WXforum.net
Web Weather => Weather Web Cam Links => Topic started by: Phil23 on November 15, 2016, 03:53:08 AM
-
Just wondering is someone can help me out with some code for my webcams.
I currently have this http://weather.inverellit.com/webcams.htm (http://weather.inverellit.com/webcams.htm) which only displays a single camera.
I've got 2 cameras active now, the second is Wcam2.jpg.
The source I'm using is pretty basic, I'm not really up on html.
Would like the 2 images side by side, with them expanding to full screen when clicked.
Tried a couple of things with no success.
Thanks
Phil.
-
Hi,
use a table:
<table style="width:98%;margin:0 auto">
<tr>
<td style="width:50%;text-align:center">
<img name="refresh" src="http://weather.inverellit.com/images/Wcam1.jpg" alt="Webcam Image" style="width:98%;margin:0 auto">
</td>
<td style="width:50%;text-align:center">
<img name="refresh2" src="http://weather.inverellit.com/images/Wcam2.jpg" alt="Webcam Image 2" style="width:98%;margin:0 auto">
</td>
</tr>
</table>
-
Or maybe something like...?
<img name="refresh1" src="http://weather.inverellit.com/images/Wcam1.jpg" alt="Webcam Image 1" style="display:inline-block;width:49%;">
<img name="refresh2" src="http://weather.inverellit.com/images/Wcam2.jpg" alt="Webcam Image 2" style="display:inline-block;width:49%;">
-
Yes, thats of course also an option, but you then should also add "margin:0 auto" for each, otherwise you will have them not centered perfectly, there would be a 2% gap on the right I think
-
Yes, thats of course also an option, but you then should also add "margin:0 auto" for each, otherwise you will have them not centered perfectly, there would be a 2% gap on the right I think
There would be a gap, the margin auto will fix it, but you should also add borders to taste etc.
-
Hi,
use a table:
<table style="width:98%;margin:0 auto">
<tr>
<td style="width:50%;text-align:center">
<img name="refresh" src="http://weather.inverellit.com/images/Wcam1.jpg" alt="Webcam Image" style="width:98%;margin:0 auto">
</td>
<td style="width:50%;text-align:center">
<img name="refresh2" src="http://weather.inverellit.com/images/Wcam2.jpg" alt="Webcam Image 2" style="width:98%;margin:0 auto">
</td>
</tr>
</table>
Thanks Everyone,
I've put just this code in http://weather.inverellit.com/webcams2.htm (http://weather.inverellit.com/webcams2.htm), but no refresh code or titles.
Can someone show me how to modify the java refresh script?
Sorry, like I mentioned, I'm really not up on html & Java.
Thanks
Phil.
-
You have the Javascript commented out, you have to delete this:
<!--
-
Please excuse my ignorance.
I do have a little programming experience, but this is code I don't understand.
My current page, with the single camera seems to auto refresh, http://weather.inverellit.com/webcams.htm (http://weather.inverellit.com/webcams.htm) and it has the "<!--"
I presume that piece of Java would need to accommodate the 2 different images, but again I don't quite get what the java is doing in relation to the html.
Phil.
-
I personally would use jQuery for this, which is a library that makes JavaScript a lot easier to work with. And it would also make it much easier for the full screen popups. It is of course possible to do it all in just plain Javascript, but this is easier.
-
OK, Im going to have a look at it, just hang on I will post the script here, I will make it simple you can then play around with the styling
-
Thanks, Much appreciated.
My only current programming experience is with a product called MMbasic, http://geoffg.net/MicromiteMX470.html (http://geoffg.net/MicromiteMX470.html)which runs on a PIC32.
Hoping to develop a mini console with it to work with my VP2.
Java & HTML I still don't have my head around.
Phil.
-
No problem Phil,
just a few questions:
1. any title?
2. do you prefer dark/light theme?
Any additional text for the images?
Update interval?
-
and which colors do you prefer for the text if there is one (title, the popup window etc.)
-
OK, here is the code, we can play around with the colors later based on what you like.
Please upload it to your server and then see if it works. It should update every 30 seconds. The images should popup full screen when clicked.
Post here a link so that I can make sure it works.
Thanks
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width:98%;
margin:0 auto;
opacity: 0.85;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
h1{
font-variant:small-caps;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Phil's Backyard Webcams</h1>
<table style="width:98%;margin:0 auto">
<tr>
<td style="width:50%;text-align:center">
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</table>
<div style="position:absolute;text-align:center;bottom:10px;margin:0 auto;width:100%">
<strong>Inverell NSW</strong><br>Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m
</div>
<div id="fullWindow" title="Webcam"></div>
</body>
<script>
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam1").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
$("#webcam2").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
}
dialogHeight = screen.height*0.9;
dialogWidth = screen.width*0.9;
$("#fullWindow").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$(".webcam").click(function(){
src = $(this).attr("src");
popupImage(src);
});
function popupImage(src){
$("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow").dialog('open');
}
</script>
</html>
-
Sorry for the delayed reply.
Just go called out for a bit.
That looks great, Cam on the left is East facing, right is to the West.
I've got it sitting here at the moment:- http://weather.inverellit.com/webcams2.htm (http://weather.inverellit.com/webcams2.htm)
Nearly 2:00pm here in Aus & had a few mid-day issues to deal with.
Really appreciate the help in an area in which I don't have the competence required.
Not sure what is supposed to happen when clicking on the images, but will try to get a handle on the code.
Thanks again.
Phil.
-
Just visited the page again & noticed the left image had not updated, but the right one had.
A refresh brought it up to date.
Both images are updating following the refresh.
Maybe I should have waited a little longer before initially clicking refresh
Phil
-
Clicking the image should make it popup in a larger window
-
Hi,
I don't seem to get any pop-up function.
Tried pop-up blocker turned off, no change.
Page is here.
http://weather.inverellit.com/webcams2.htm (http://weather.inverellit.com/webcams2.htm)
Phil.
-
When I click the image, it zooms in in a separate window, popup blocker should not have any effect.
Can someone else try?
-
Strange,
Had previously tried it many times on 2 dirrerent PC's with no result.
Both running IE11.
But working now.
-
Works for me in Chrome, FF and IE
-
Thanks Jachym,
Appreciate this.
I notice by the code I may not be able to label the pop-ups individually.
As in East Camera & West Camera?
Correct.
-
Hi Jáchym,
Thanks again for you help & FYI it's evolved a bit more over here http://sandaysoft.com/forum/viewtopic.php?f=19&t=15807&p=121385#p121385 (http://sandaysoft.com/forum/viewtopic.php?f=19&t=15807&p=121385#p121385).
Current version is up.
http://weather.inverellit.com/webcams.htm (http://weather.inverellit.com/webcams.htm)
Cheers
Phil.
-
Nice, one more thing we could add is the title for the popup, do you want different one for each cam?
-
Lol,
That's what I was trying to do last night & think I've possibly broken things a little.
Had to revert back to a previous version.
I was trying to change "webcam" to "East Camera" & "West Camera", but not enough understanding of how jquery works.
Also notice that sometimes when I first revisit the page I need a manual refresh to get the page up to date.
Phil
-
OK, try this, I havent tested it, so let me know if it works or not:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Phil's Backyard weather data" />
<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />
<title>Phil's Backyard Weather Webcam</title>
<link href="http://weather.inverellit.com/weatherstyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width:98%;
margin:0 auto;
opacity: 0.85;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
</style>
</head>
<body>
<div id="content">
<h1>Phil's Backyard Weather</h1>
<h2 style="text-align: left; text-transform: none;" >
Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m</h2>
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>::<a href="gauges.htm">gauges</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="thismonth.htm">this month</a>::<a href="thisyear.htm">this year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly records</a>::<a href="trends.htm">trends</a>::<a href="http://sandaysoft.com/forum/">forum</a>::<a href="webcams.htm">webcam</a>:</td>
</tr>
</table>
</div>
<div id="fullWindow" title="Webcam"></div>
</body>
<script>
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam1").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
$("#webcam2").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
}
dialogHeight = screen.height*0.85;
dialogWidth = screen.width*0.63;
$("#fullWindow").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$(".webcam").click(function(){
src = $(this).attr("src");
camID = $(this).attr("id");
popupImage(src,camID);
});
function popupImage(src,camID){
$("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
if(camID=="webcam1"){
$("#fullWindow").attr("title","East Camera");
}
else if(camID=="webcam2"){
$("#fullWindow").attr("title","West Camera");
}
else{
$("#fullWindow").attr("title","Camera");
}
$("#fullWindow").dialog('open');
}
</script>
</html>
-
Thanks,
Uploaded it as http://weather.inverellit.com/webcams5.htm (http://weather.inverellit.com/webcams5.htm).
But still showing Webcam as the title in the Popup Window.
Phil.
-
strange... anyway, try this then
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Phil's Backyard weather data" />
<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />
<title>Phil's Backyard Weather Webcam</title>
<link href="http://weather.inverellit.com/weatherstyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width:98%;
margin:0 auto;
opacity: 0.85;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
</style>
</head>
<body>
<div id="content">
<h1>Phil's Backyard Weather</h1>
<h2 style="text-align: left; text-transform: none;" >
Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m</h2>
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>::<a href="gauges.htm">gauges</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="thismonth.htm">this month</a>::<a href="thisyear.htm">this year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly records</a>::<a href="trends.htm">trends</a>::<a href="http://sandaysoft.com/forum/">forum</a>::<a href="webcams.htm">webcam</a>:</td>
</tr>
</table>
</div>
<div id="fullWindow" title="East Camera"></div>
<div id="fullWindow2" title="West Camera"></div>
</body>
<script>
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam1").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
$("#webcam2").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
}
dialogHeight = screen.height*0.85;
dialogWidth = screen.width*0.63;
$("#fullWindow").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindow2").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#webcam1").click(function(){
src = $(this).attr("src");
popupImage1(src);
});
$("#webcam2").click(function(){
src = $(this).attr("src");
popupImage2(src);
});
function popupImage1(src){
$("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow").dialog('open');
}
function popupImage2(src){
$("#fullWindow2").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow2").dialog('open');
}
</script>
</html>
-
Thanks Jachym,
That has done it.
Your help, well actually doing most of this is greatly appreciated.
I now have it up as my linked camera page.
Thanks
Phil.
http://weather.inverellit.com/webcams.htm (http://weather.inverellit.com/webcams.htm)
-
Hi Jachym,
Just one thing I notice, if I visit the page in the morning it shows the cached images from the previous day.
They update manually with refresh, or automatically after the auto refresh interval.
Is it possible that the page can refresh automatically when it is first visited?
Thanks
Phil.
-
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Phil's Backyard weather data" />
<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />
<title>Phil's Backyard Weather Webcam</title>
<link href="http://weather.inverellit.com/weatherstyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width:98%;
margin:0 auto;
opacity: 0.85;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
</style>
</head>
<body>
<div id="content">
<h1>Phil's Backyard Weather</h1>
<h2 style="text-align: left; text-transform: none;" >
Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m</h2>
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>::<a href="gauges.htm">gauges</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="thismonth.htm">this month</a>::<a href="thisyear.htm">this year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly records</a>::<a href="trends.htm">trends</a>::<a href="http://sandaysoft.com/forum/">forum</a>::<a href="webcams.htm">webcam</a>:</td>
</tr>
</table>
</div>
<div id="fullWindow" title="East Camera"></div>
<div id="fullWindow2" title="West Camera"></div>
</body>
<script>
imageUpdate();
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam1").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
$("#webcam2").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
}
dialogHeight = screen.height*0.85;
dialogWidth = screen.width*0.63;
$("#fullWindow").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindow2").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#webcam1").click(function(){
src = $(this).attr("src");
popupImage1(src);
});
$("#webcam2").click(function(){
src = $(this).attr("src");
popupImage2(src);
});
function popupImage1(src){
$("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow").dialog('open');
}
function popupImage2(src){
$("#fullWindow2").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow2").dialog('open');
}
</script>
</html>
-
Thanks for the code. I changed the address for those of my website. Will the code stop working if the website http://code.jquery.com/ closes ?
-
Ok,
FOUR and a half years later & I'm playing with some Esp32-Cams to add two more for North & South.
I can get an extra camera on the page, but am struggling to have the top (eventually North) to centre over the two cameras below.
And then the same will apply once the 4th one is going.
Tried all the thing that come to mind but the ESP camera appears either on the left or right above the 2 others.
Can anyone put me out of my misery?
http://weather.inverellit.com/webcams2.htm
Thanks
Phil.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Phil's Backyard weather data" />
<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />
<title>Phil's Backyard Weather Webcam</title>
<link href="http://weather.inverellit.com/weatherstyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width:98%;
margin:0 auto;
opacity: 1.00;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
</style>
<body>
<div id="content">
<h1>Phil's Backyard Weather</h1>
<h2 style="text-align: left; text-transform: none;"> Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m</h2>
<!-- Start of navigation menus at the top -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today-yesterday.htm">today/yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:</td>
</tr>
</table>
<!-- End of navigation menus at the top -->
</div>
<div id="widecontent">
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td style="width:50%;text-align:center">Esp32 Test Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Esp32-Cam.jpg" id="webcam3" class="webcam">
</td>
</tr>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<!-- Start of navigation menus at the bottom -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">
:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>
:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:<br>
:<a href="fwi.php">fire index</a>: :<a href="fwgraphs.php">fwi graphs</a>: :<a href="top10.php">top10</a>: :<a href="betel_monthlyrecord_mx.html">extremes</a>: :<a href="sysinfo.php">sysinfo</a>:
</td>
</tr>
</table>
<!-- End of navigation menus at the bottom -->
<br><br><br>
<a href="http://cumulussites.net/" target="_blank"><img src="http://cumulussites.net/button.php?u=Phil23" alt="Cumulus Top Weather Sites" border="0" width="162" height="55"></a>
</div>
<div id="fullWindow" title="West Camera"></div>
<div id="fullWindow2" title="East Camera"></div>
<div id="fullWindow3" title="Esp32 Test Camera"></div>
<!--</body>-->
<script>
imageUpdate();
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam1").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
$("#webcam2").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
$("#webcam3").attr("src","http://weather.inverellit.com/images/Esp32-Cam.jpg" + timestamp);
}
dialogHeight = screen.height*0.85;
dialogWidth = screen.width*0.63;
$("#fullWindow").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindow2").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindow3").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#webcam1").click(function(){
src = $(this).attr("src");
popupImage1(src);
});
$("#webcam2").click(function(){
src = $(this).attr("src");
popupImage2(src);
});
$("#webcam3").click(function(){
src = $(this).attr("src");
popupImage3(src);
});
function popupImage1(src){
$("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow").dialog('open');
}
function popupImage2(src){
$("#fullWindow2").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow2").dialog('open');
}
function popupImage3(src){
$("#fullWindow3").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow3").dialog('open');
}
</script>
</body>
</html>
-
1st table row: Make the single cell span 2 cells "colspan="2"
<div id="widecontent"><p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="width:50%;text-align:center">Esp32 Test Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Esp32-Cam.jpg" id="webcam3" class="webcam">
</td>
</tr>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</tbody>
</table>
-
1st table row: Make the single cell span 2 cells "colspan="2"
That was the first thing I tried, & ended up with a full width image above the two smaller images.
Next though was trying 25% width on the same line, but no change.
From their I just got uglier & uglier.
See Example. http://weather.inverellit.com/webcams3.htm
-
give that image a width at the end, after class
<table style="text-align: center; width: 100%;" cellspacing="0" cellpadding="1" border="0"> <tbody>
<tr>
<td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
<small>Click Image below for Larger Image</small><br>
<img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
</td>
-
Sort of got it "Looking right with a 2nd table & a 25% margin-left.
Seems like a bit of a fudge (Space-Bar formatting like), but it shows Ok at this point.
Gotta be a more correct way.
http://weather.inverellit.com/webcams4.htm
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 50%; margin-left: 25%" border="0" cellpadding="1" cellspacing="25%">
<tbody>
<tr>
<td style="width:50%;text-align:center">Esp32 Test Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Esp32-Cam.jpg" id="webcam3" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</tbody>
</table>
-
Do I really need 3 tables for the 3 rows; with margin-left in the 1st & 3rd?
OR can the margin-left be included in just the 1st & 3rd <tr> sections?
-
You want it like this, Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm (https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm)
All you need do is add the size as I posted above:give that image a width at the end, after class<table style="text-align: center; width: 100%;" cellspacing="0" cellpadding="1" border="0"> <tbody>
<tr>
<td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
<small>Click Image below for Larger Image</small><br>
<img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
</td>
and to make it responsive: change <div id="widecontent">to <div id="widecontent" style="max-width:100%">So that wide content div is <div id="widecontent" style="max-width:100%">
<p>Webcams will update once a minute.</p>
<table style="text-align: center;" cellspacing="0" cellpadding="1" border="0">
<tbody>
<tr>
<td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
<small>Click Image below for Larger Image</small><br>
<img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
</td>
</tr>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br>
<small>Click Image below for Larger Image</small><br>
<img src="Phil's%20Backyard%20Weather%20Webcam_files/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br>
<small>Click Image below for Larger Image</small><br>
<img src="Phil's%20Backyard%20Weather%20Webcam_files/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</tbody>
</table>
</div>
-
You want it like this, Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm (https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm)
Yes that's about it, but with the Pop-ups.
Currently have progressed to Webcams5
http://weather.inverellit.com/webcams2.htm
http://weather.inverellit.com/webcams3.htm
http://weather.inverellit.com/webcams4.htm
http://weather.inverellit.com/webcams5.htm
But along the way have broken the pop-up's in 4 & 5.
East & west still work in 4, but neither in 5.
Developer mode tells me "Uncaught SyntaxError: Unexpected end of input"
, and points to the </script> line, but I can't see whats different between 5 & 2 to break it.
Also have taken note of changing to <div id="widecontent" style="max-width:100%">
Thanks
Phil.
});
function popupImage1(src){
$("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow").dialog('open');
}
function popupImage2(src){
$("#fullWindow2").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow2").dialog('open');
}
function popupImage3(src){
$("#fullWindow3").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow3").dialog('open');
}
function popupImage4(src){
$("#fullWindow4").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow4").dialog('open');
}
</script>
Edit: Found it; a paste in error, now to the other things above...
-
You want it like this, Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm (https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm)
All you need do is add the size as I posted above:
Just revisiting this today; Looks like you've edited your example.
It was showing 3 images the same size yesterday, but on refreshing the first image is 100% & the ones under it 50%.
Got mine looking how I want, but believe your code is really a better solution.
My latest kludge that relies on 3 tables & a margin on the left.
-
You want it like this, Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm (https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm)
All you need do is add the size as I posted above:
Just revisiting this today; Looks like you've edited your example.
It was showing 3 images the same size yesterday, but on refreshing the first image is 100% & the ones under it 50%.
Got mine looking how I want, but believe your code is really a better solution.
My latest kludge that relies on 3 tables & a margin on the left.
Er.... actually when you 'lost' the popup, I removed my tidbits to 'look see', got interrupted and forget to put it back... I'll be dropping that file off host in a day or two. You note it still is just one table? I don't have your fixed js, so the popup doesn't work..
-
Thanks Cutty,
I'm getting to the bottom of it now with adding the width after the image.
<td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
<small>Click Image below for Larger Image</small><br>
<img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
</td>
Other thing I notice is your sample is that the top image does not have the rounded corners.
(My mistake editing in Developer view).
I have updated the Script so it's more readable, 1,2,3,4 references now replaced by more logical N,S,E,W.
(And learnt that you can't use "-" in Function names)???
This is the latest revision I made before trying to revert to a single table.
Cheers
Phil.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Phil's Backyard weather data" />
<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />
<title>Phil's Backyard Weather Webcam</title>
<link href="http://weather.inverellit.com/weatherstyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width: 98%;
margin:0 auto;
opacity: 1.00;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
</style>
<body>
<div id="content">
<h1>Phil's Backyard Weather</h1>
<h2 style="text-align: left; text-transform: none;"> Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m</h2>
<!-- Start of navigation menus at the top -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today-yesterday.htm">today/yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:</td>
</tr>
</table>
<!-- End of navigation menus at the top -->
</div>
<div id="widecontent">
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 50%; margin-left: 25%" border="0" cellpadding="1" cellspacing="25%">
<tbody>
<tr>
<td style="width:50%;text-align:center">North Facing Camera<br/>Esp32-Cam<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Esp32-Cam-Nth.jpg" id="webcam-N" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam-W" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam-E" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="text-align: center; width: 50%; margin-left: 25%" border="0" cellpadding="1" cellspacing="25%">
<tbody>
<tr>
<td style="width:50%;text-align:center">South Facing Camera<br/>Esp32 Test<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Esp32-Cam.jpg" id="webcam-S" class="webcam">
</td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<!-- Start of navigation menus at the bottom -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">
:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>
:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:<br>
:<a href="fwi.php">fire index</a>: :<a href="fwgraphs.php">fwi graphs</a>: :<a href="top10.php">top10</a>: :<a href="betel_monthlyrecord_mx.html">extremes</a>: :<a href="sysinfo.php">sysinfo</a>:
</td>
</tr>
</table>
<!-- End of navigation menus at the bottom -->
<br><br><br>
<a href="http://cumulussites.net/" target="_blank"><img src="http://cumulussites.net/button.php?u=Phil23" alt="Cumulus Top Weather Sites" border="0" width="162" height="55"></a>
</div>
<div id="fullWindow_N" title="North Camera"></div>
<div id="fullWindowS" title="South Camera"></div>
<div id="fullWindowE" title="East Camera"></div>
<div id="fullWindowW" title="West Camera"></div>
<!--</body>-->
<script>
imageUpdate();
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam-N").attr("src","http://weather.inverellit.com/images/Esp32-Cam-Nth.jpg" + timestamp);
$("#webcam-S").attr("src","http://weather.inverellit.com/images/Esp32-Cam.jpg" + timestamp);
$("#webcam-E").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
$("#webcam-W").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
}
dialogHeight = screen.height*0.85;
dialogWidth = screen.width*0.63;
$("#fullWindow_N").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindowS").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindowE").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindowW").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#webcam-N").click(function(){
src = $(this).attr("src");
popupImage_N(src);
});
$("#webcam-S").click(function(){
src = $(this).attr("src");
popupImage_S(src);
});
$("#webcam-E").click(function(){
src = $(this).attr("src");
popupImage_E(src);
});
$("#webcam-W").click(function(){
src = $(this).attr("src");
popupImage_W(src);
});
function popupImage_N(src){
$("#fullWindow_N").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow_N").dialog('open');
}
function popupImage_S(src){
$("#fullWindowS").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindowS").dialog('open');
}
function popupImage_E(src){
$("#fullWindowE").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindowE").dialog('open');
}
function popupImage_W(src){
$("#fullWindowW").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindowW").dialog('open');
}
</script>
</body>
</html>
-
Think I'm almost there with http://weather.inverellit.com/webcams8.htm
Open to any fine tuning & improvement.
One issue that has existed since the original version is the "Click for Larger Image" when viewing on Mobile devices.
It has always been fine on PC's, but tapping the image on a phone gives a tall stretched image.
Thanks
Phil