Page 1 of 1

weather overlay

Posted: Mon 12 Aug 2019 4:40 pm
by sylvantino
can cumulus put overlap information on my ipcam if not is there any other way of doing? thanks

Re: weather overlay

Posted: Mon 12 Aug 2019 6:21 pm
by Weerhaas
Hi,

Maybe you can try ImageSalsa.
http://www.imagesalsa.com.

Re: weather overlay

Posted: Tue 13 Aug 2019 1:14 pm
by forestedge
Hi, you could try downloading yawcam free software https://www.yawcam.com/. Assuming it is compatible with your webcam then details on creating the overlay are in this topic viewtopic.php?f=19&t=2914

Re: weather overlay

Posted: Tue 13 Aug 2019 2:59 pm
by beteljuice
Many cameras software now accept a txt file i/p to overlay - have you investigated what your camera can do ?

Re: weather overlay

Posted: Tue 13 Aug 2019 9:23 pm
by Phil23
I use iSpy to monitor & upload my Cam images.
It can do some basic text overlay too, but can't see it overlaying webtags.

Other thing I like is that it can make time lapse videos for me too.
Currently it's configured to record a frame every 10 seconds & save the file after 30 minutes.
Another option sets the mpg to have a fram rate of 6 fps, so my 30 second playback covers a duration of 30 minutes.

Have never got to putting the mpg's on my site, but they are interesting to review after storm events.

http://weather.inverellit.com/webcams.htm

Code for that page below if anyone's interested.

Cheers.

Code: Select all

<!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: 0.85;
            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.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="webcams.htm">webcam</a>:</td>
  </tr>
</table>
<!-- End of navigation menus at the top -->

<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>
    
<!-- Start of navigation menus at the top -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
    <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&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="webcams.htm">webcam</a>:</td>
</table>
<!-- End of navigation menus at the top -->
<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>  
<!--</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>
   </body>
</html>


Re: weather overlay

Posted: Tue 13 Aug 2019 9:37 pm
by beteljuice
@phil223

There's a plugin for text (from a file) for ISpy https://www.ispyconnect.com/plugins.aspx

For static images it could always be done via some PHP, either directly modifying the image itself, or overlaying information on top of the image in a 'container' in a html environment ..

Edit: In a html type page, if you've already got an ajax js realtime grabber, you could use that to put info (apparently) on top of the picture, and it would update (independent of the picture)

... but somewhere nowadays there is usually a facility built in the cam software that can do it ... maybe ???

Re: weather overlay

Posted: Wed 14 Aug 2019 11:58 am
by Mapantz
I have never contributed to a script before, but me and friend made an overlay about 10 years ago and I still use it now. I may as well post it. I'm sure it could be done a lot better, but it hasn't ever failed me.

Save the code below as webcam.html or webcam.php, or whatever is best for you.

Code: Select all

<!DOCTYPE html>
<html class="yr" lang="en-gb">
 <head>
  <title>Weather-cam</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link href="https://fonts.googleapis.com/css?family=Roboto:700&display=swap" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script>
   function updateImage() { $.ajax({ url: "overlay.php", type: 'GET', success: function(data) { $('#overlay').html(data); } }); setTimeout("updateImage()",5000); }
 </script>
 </head>
<body onload="updateImage()">
	<h1>This is the model of your webcam.<br>
            The camera is facing East-Northeast</h1>
           <div style="text-align:center;position: relative;">
            <img src="YOUR_WEBCAM_URL?t=1472242835126" height="720" width="1280" onload="setTimeout(function() {src = src.substring(0, (src.lastIndexOf(&quot;t=&quot;)+2))+(new Date()).getTime()}, 1000)" onerror="setTimeout(function() {src = src.substring(0, (src.lastIndexOf(&quot;t=&quot;)+2))+(new Date()).getTime()}, 1000)" alt="">
         <div id="overlay" style="position: absolute; bottom: 0px;font-family: 'Roboto', sans-serif; font-size: 120%; color:#FFFFFF;">
      </div>
    </div>
 </body>
</html>
Save the attached overlay.txt as overlay.php

My camera produces a CGIProxy.fcgi image, which is live, but a static image, so it needs updating via a script. I put the direct link to my cam in a file called cam.php and then call it from the webcam page that people will visit.

In the webcam code, you'll see <img src="<YOUR_WEBCAM_URL>?t=1472242835126" edit that to a url that links directly to your cam. eg <img src="mywebcam.php?t=1472242835126"

You'll have to edit the overlay.txt to point to your realtime.txt and also edit the margin-left and margin-bottom at the bottom of the overlay.txt as it is designed to show on a 720 x 1280 image.

You can also change the update speed of both the realtime.txt data and the webcam image in the webcam code above.

If successful, it should work like this: https://warehamwx.co.uk/webcam2.php
overlay.txt