Author Topic: Webcam Page Code  (Read 2351 times)

0 Members and 1 Guest are viewing this topic.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8551
    • 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

  • Contributor
  • ***
  • Posts: 126
    • 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: 8551
    • 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

  • Contributor
  • ***
  • Posts: 126
    • 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

  • Contributor
  • ***
  • Posts: 126
    • 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: 8551
    • 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: 7
    • 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 ?

 

anything