Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

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 »

can cumulus put overlap information on my ipcam if not is there any other way of doing? thanks
Weerhaas
Posts: 17
Joined: Mon 31 Aug 2015 6:31 am
Weather Station: Vantage Pro 2 Plus
Operating System: Windows Pro 10 64b
Location: Zaandam, Nederland
Contact:

Re: weather overlay

Post by Weerhaas »

Hi,

Maybe you can try ImageSalsa.
http://www.imagesalsa.com.
forestedge
Posts: 104
Joined: Sun 29 Jul 2012 11:46 am
Weather Station: Davis Vantage Pro2 Plus DFARS
Operating System: Windows 10 64 bit
Location: Ashurst Bridge, Hampshire UK
Contact:

Re: weather overlay

Post 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
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: weather overlay

Post by beteljuice »

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: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: weather overlay

Post 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>

:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: weather overlay

Post 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 ???
Image
......................Imagine, what you will KNOW tomorrow !
Mapantz
Posts: 1777
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 11 x64
Location: Dorset - UK
Contact:

Re: weather overlay

Post 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/webcam.php
overlay.txt
You do not have the required permissions to view the files attached to this post.
Image
Post Reply