Welcome to the Cumulus Support forum.

Latest Cumulus MX release v3.3.0 build 3063 - 10 January 2020.
    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: 7
    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: 57
    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: 2814
    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: 377
    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: 2814
    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: 643
    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