Welcome to the Cumulus Support forum.

Latest Cumulus MX release v3.0.2 build 3052 - 13 September 2019.
Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014

See the Wiki for downloading either version.

weather overlay

Discussion specific to Fine Offset and similar rebadged weather stations
Post Reply
sylvantino
Posts: 7
Joined: Wed 20 Dec 2017 10:48 am
Weather Station: WS3083
Operating System: Windows 10

weather overlay

Post by sylvantino » Mon 12 Aug 2019 4:40 pm

can cumulus put overlap information on my ipcam if not is there any other way of doing? thanks

Weerhaas
Posts: 4
Joined: Mon 31 Aug 2015 6:31 am
Weather Station: Vantage Pro 2 Plus
Operating System: Windows Pro 10 32b
Location: Zaandam, Nederland
Contact:

Re: weather overlay

Post by Weerhaas » Mon 12 Aug 2019 6:21 pm

Hi,

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

forestedge
Posts: 54
Joined: Sun 29 Jul 2012 11:46 am
Weather Station: Davis Vantage Pro2 Plus
Operating System: Windows 10 64 bit
Location: Ashurst Bridge, Hampshire UK
Contact:

Re: weather overlay

Post by forestedge » Tue 13 Aug 2019 1:14 pm

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

User avatar
beteljuice
Posts: 2718
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: weather overlay

Post by beteljuice » Tue 13 Aug 2019 2:59 pm

Many cameras software now accept a txt file i/p to overlay - have you investigated what your camera can do ?
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 213
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: weather overlay

Post by Phil23 » Tue 13 Aug 2019 9:23 pm

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>

Image

User avatar
beteljuice
Posts: 2718
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: weather overlay

Post by beteljuice » Tue 13 Aug 2019 9:37 pm

@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 ???
Image
......................Imagine, what you will KNOW tomorrow !

Mapantz
Posts: 604
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 10 x64
Location: Dorset - UK
Contact:

Re: weather overlay

Post by Mapantz » Wed 14 Aug 2019 11:58 am

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
You do not have the required permissions to view the files attached to this post.
Image

Post Reply