Author Topic: Webcam Page Code  (Read 11893 times)

0 Members and 1 Guest are viewing this topic.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #25 on: November 19, 2016, 04:40:46 PM »
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;" >
&nbsp;Latitude&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;Longitude&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;Elevation&nbsp;586&nbsp;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&nbsp;month</a>::<a href="thisyear.htm">this&nbsp;year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly&nbsp;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>

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #26 on: November 19, 2016, 09:48:59 PM »
Thanks,

Uploaded it as http://weather.inverellit.com/webcams5.htm.

But still showing Webcam as the title in the Popup Window.

Phil.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #27 on: November 20, 2016, 02:59:00 PM »
strange... anyway, try this then

Code: [Select]
<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;" >
&nbsp;Latitude&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;Longitude&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;Elevation&nbsp;586&nbsp;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&nbsp;month</a>::<a href="thisyear.htm">this&nbsp;year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly&nbsp;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>

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #28 on: November 21, 2016, 01:33:18 AM »
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

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #29 on: November 22, 2016, 04:13:35 PM »
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.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #30 on: November 22, 2016, 04:23:19 PM »
Code: [Select]
<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;" >
&nbsp;Latitude&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;Longitude&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;Elevation&nbsp;586&nbsp;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&nbsp;month</a>::<a href="thisyear.htm">this&nbsp;year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly&nbsp;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>

Offline Simnm

  • Member
  • *
  • Posts: 8
    • Meteoso
Re: Webcam Page Code
« Reply #31 on: December 09, 2017, 07:54:40 PM »
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 ?

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #32 on: June 08, 2021, 01:39:18 AM »
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.

Code: [Select]
<!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;">&nbsp;Latitude&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;Longitude&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;Elevation&nbsp;586&nbsp;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&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;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&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;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&nbsp;index</a>: :<a href="fwgraphs.php">fwi&nbsp;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>

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Webcam Page Code
« Reply #33 on: June 09, 2021, 06:36:49 AM »
1st table row: Make the single cell span 2 cells "colspan="2"

Code: [Select]
<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>
 


Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #34 on: June 09, 2021, 05:12:58 PM »
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
« Last Edit: June 09, 2021, 05:15:17 PM by Phil23 »

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Webcam Page Code
« Reply #35 on: June 09, 2021, 05:31:23 PM »
give that image a width at the end, after class
Code: [Select]
<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>
« Last Edit: June 09, 2021, 05:33:06 PM by Cutty Sark Sailor »
 


Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #36 on: June 09, 2021, 06:11:33 PM »
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


Code: [Select]
<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>


Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #37 on: June 09, 2021, 06:22:03 PM »
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?

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Webcam Page Code
« Reply #38 on: June 09, 2021, 06:29:58 PM »
You want it like this,  Right?
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
Code: [Select]
<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
Code: [Select]
        <div id="widecontent">to
Code: [Select]
        <div id="widecontent" style="max-width:100%">So that wide content div is
Code: [Select]
          <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>
« Last Edit: June 09, 2021, 07:10:21 PM by Cutty Sark Sailor »
 


Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #39 on: June 09, 2021, 11:04:05 PM »
You want it like this,  Right?
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.

Code: [Select]
      });
 
      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...
« Last Edit: June 09, 2021, 11:48:46 PM by Phil23 »

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #40 on: June 11, 2021, 08:33:02 PM »
You want it like this,  Right?
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.

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Webcam Page Code
« Reply #41 on: June 11, 2021, 09:00:06 PM »
You want it like this,  Right?
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..
« Last Edit: June 11, 2021, 09:03:04 PM by Cutty Sark Sailor »
 


Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #42 on: June 11, 2021, 09:55:06 PM »
Thanks Cutty,

I'm getting to the bottom of it now with adding the width after the image.

Code: [Select]
      <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.

Code: [Select]
<!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;">&nbsp;Latitude&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;Longitude&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;Elevation&nbsp;586&nbsp;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&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;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&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;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&nbsp;index</a>: :<a href="fwgraphs.php">fwi&nbsp;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>

« Last Edit: June 11, 2021, 10:51:10 PM by Phil23 »

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #43 on: June 12, 2021, 08:15:37 PM »
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