Web Weather > Weather Web Cam Links

Webcam Page Code

<< < (3/9) > >>

Phil23:
Thanks, Much appreciated.

My only current programming experience is with a product called MMbasic, http://geoffg.net/MicromiteMX470.htmlwhich 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.

Jáchym:
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?

Jáchym:
and which colors do you prefer for the text if there is one (title, the popup window etc.)

Jáchym:
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&deg; 46' 26"    Longitude E 151&deg; 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>

Phil23:
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

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.

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version