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

request for embedded Webcam into MX Webpage

Please DO NOT use this to publish your entire wish. This Forum is for specific suggestions to enhance the usability of Cumulus MX for all users, NOT your personal requirements. Please check this forum and the rejected forum to make sure you are NOT posting a DUPLICATE suggestion. It will be heavily monitored by Admin and Mark Crossley to determine the feasibility and the difficulty of the suggestion. Those Topics that are deemed inadmissible will moved to the rejected Forum. The remaining Topics will be the Accepted list of future developments, and when our voluntary development group adds it to a build, the build number will be added to the Topic title.
Post Reply
User avatar
ConligWX
Posts: 1571
Joined: Mon 19 May 2014 10:45 pm
Weather Station: Davis vPro2+ w/DFARS + AirLink
Operating System: Ubuntu 22.04 LTS
Location: Bangor, NI
Contact:

request for embedded Webcam into MX Webpage

Post by ConligWX »

Hi there.

I'd like to see some type of embedded webcam image into a MX style page rather than just linking the image in a browser. I understand that webcam images are all different, but could this be done? it would make the image more inclusive of the overall layout of the MX site pages.
Regards Simon

https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •

Image
Gregorean
Posts: 82
Joined: Tue 12 May 2020 11:41 am
Weather Station: Davis Vantage Pro 2
Operating System: Raspberry Pi 4B
Location: Amersfoort, The Netherlands
Contact:

Re: request for embedded Webcam into MX Webpage

Post by Gregorean »

Hello Simon, something like this? http://element14.serverthuis.nl
My weather camera is still in the attic at the moment but will go outside when the weather gets better in the Netherlands. :D

Sjaak
Weather Station: Amersfoort-Nieuwland, The Netherlands.
http://element14.synology.me
User avatar
ConligWX
Posts: 1571
Joined: Mon 19 May 2014 10:45 pm
Weather Station: Davis vPro2+ w/DFARS + AirLink
Operating System: Ubuntu 22.04 LTS
Location: Bangor, NI
Contact:

Re: request for embedded Webcam into MX Webpage

Post by ConligWX »

Gregorean wrote: Tue 02 Mar 2021 11:52 am Hello Simon, something like this? http://element14.serverthuis.nl
My weather camera is still in the attic at the moment but will go outside when the weather gets better in the Netherlands. :D

Sjaak
nope. if you goto https://www.conligwx.org/index.htm check the webcam link at top. it loads just the image. the webcam would be better inside a webpage template so that Navigation can still take place within the same Browser tab.

as an example: https://www.conligwx.org/wxskywebcamcu.php
Regards Simon

https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •

Image
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: request for embedded Webcam into MX Webpage

Post by mcrossley »

It is up to the user to provide the web URL, it could be a link to a single image, a link to page on the same site, or elsewhere. MX has no idea what has been typed in to the configuration - it's just a URL.
User avatar
ConligWX
Posts: 1571
Joined: Mon 19 May 2014 10:45 pm
Weather Station: Davis vPro2+ w/DFARS + AirLink
Operating System: Ubuntu 22.04 LTS
Location: Bangor, NI
Contact:

Re: request for embedded Webcam into MX Webpage

Post by ConligWX »

this is the way.....

done. https://www.conligwx.org/webcam.htm
Regards Simon

https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •

Image
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: request for embedded Webcam into MX Webpage

Post by mcrossley »

If you change your webcam URL in Cumulus to "https://www.conligwx.org/webcam.htm", then the menu should work too.
User avatar
ConligWX
Posts: 1571
Joined: Mon 19 May 2014 10:45 pm
Weather Station: Davis vPro2+ w/DFARS + AirLink
Operating System: Ubuntu 22.04 LTS
Location: Bangor, NI
Contact:

Re: request for embedded Webcam into MX Webpage

Post by ConligWX »

mcrossley wrote: Tue 02 Mar 2021 4:09 pm If you change your webcam URL in Cumulus to "https://www.conligwx.org/webcam.htm", then the menu should work too.
I have just changed it.
Regards Simon

https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •

Image
liddelljs
Posts: 119
Joined: Sat 31 Oct 2015 10:22 pm
Weather Station: Ecowitt GW1001
Operating System: RPi 3 Raspbian Buster
Location: Perth Western Australia

Re: request for embedded Webcam into MX Webpage

Post by liddelljs »

There is also a piece of script somewhere on the MX forum (I have looked and for the life of me can't find it again) that allows the image to be updated independent of the webpage. I have attached my webcam page which contains the script. Only issue I have is that the script has a fixed image size so doesn't scale well on my phone (and I have zero javascript knowledge to modify).
The script works well but it might be nice to have the ability to update the page automatically (like the index page) with a user defined interval so that the script is not required (in MX settings).

Cheers
You do not have the required permissions to view the files attached to this post.
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: request for embedded Webcam into MX Webpage

Post by beteljuice »

Late to the party ...

@simon ...

In your .webcam-center class add:

height: auto;

Then it keeps its height / width ratio ;)
Image
......................Imagine, what you will KNOW tomorrow !
NeilThomas
Posts: 266
Joined: Thu 11 Oct 2012 9:51 am
Weather Station: Davis Vantage Pro2
Operating System: Raspberry Pi 4
Location: Gloucester
Contact:

Re: request for embedded Webcam into MX Webpage

Post by NeilThomas »

Hi

There are now 3 framework templates available on the wiki. These will allow you to create a new page based on the current theme to contain your webcam image.Visit the page https://cumuluswiki.org/a/Default_Website_Development for further information.

I also use a pop utility called fancybox that allows me to put a thumbnail of the image on my page. It can be found at http://fancybox.net
Neil Thomas
website: weather.oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4010
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: request for embedded Webcam into MX Webpage

Post by Phil23 »

beteljuice wrote: Sat 13 Mar 2021 4:44 am Late to the party ...
Even later to the Party.

Re Webcam Pages, Pop-ups from thumbnails etc....

I've just finished updating my cams page to support 4 cameras with pop-ups.
(And not without help from others).

Current state is here, http://weather.inverellit.com/webcams.htm

Some of what's there might be of use to convert into the newer format,
maybe with a 1 2 3 4 camera option in the template.

It's far from perfect, particularly the pop-ups om Mobiles.
But it may be of use to others with some changes.

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

		</div>
		<div id="widecontent" style="max-width:100%">
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 100%; border="0" cellpadding="1">
  <tbody>
    <tr>
	  <td colspan="2" style="width:100%;text-align:center">North Facing Camera<br/>Esp32-Cam<br/>
         <small>Click Image below for Larger Image</small><br/>
         <img src="http://weather.inverellit.com/images/Esp32-Cam-Nth.jpg" id="webcam-N" class="webcam" Style="width:50%">
      </td>
    </tr>
    <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="webcam-W" 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="webcam-E" class="webcam"> 
      </td>
    </tr>
    <tr>
	  <td colspan="2" style="width:100%;text-align:center">South Facing Camera<br/>Esp32 Test<br/>
         <small>Click Image below for Larger Image</small><br/>
         <img src="http://weather.inverellit.com/images/Esp32-Cam.jpg" id="webcam-S" class="webcam" Style="width:50%">
      </td>
    </tr>
  </tbody>
</table>
    
		</div>
		<div id="content">
<!-- Start of navigation menus at the bottom -->
<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="<#webcamurl>">webcam</a>:<br>

    :<a href="fwi.php">fire&nbsp;index</a>: :<a href="fwgraphs.php">fwi&nbsp;graphs</a>: :<a href="top10.php">top10</a>: :<a href="betel_monthlyrecord_mx.html">extremes</a>: :<a href="sysinfo.php">sysinfo</a>:

  </td>
</tr>
</table>
<!-- End of navigation menus at the bottom -->
<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_N" title="North Camera"></div>  
<div id="fullWindowS" title="South Camera"></div>  
<div id="fullWindowE" title="East Camera"></div>  
<div id="fullWindowW" title="West Camera"></div> 
<!--</body>-->
   <script>
	  imageUpdate();
	  
      setInterval(function(){ imageUpdate(); }, (30*1000));
      
      function imageUpdate(){
         timestamp = new Date();
         timestamp = "?"+timestamp.getTime();
         $("#webcam-N").attr("src","http://weather.inverellit.com/images/Esp32-Cam-Nth.jpg" + timestamp);
         $("#webcam-S").attr("src","http://weather.inverellit.com/images/Esp32-Cam.jpg" + timestamp);
         $("#webcam-E").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
         $("#webcam-W").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
      }
      
      dialogHeight = screen.height*0.85;
      dialogWidth = screen.width*0.63;
	  
	  
	   $("#fullWindow_N").dialog({
         modal: true,
         autoOpen: false,
         height: dialogHeight,
         width: dialogWidth
      });
	   $("#fullWindowS").dialog({
         modal: true,
         autoOpen: false,
         height: dialogHeight,
         width: dialogWidth
      });
	   $("#fullWindowE").dialog({
         modal: true,
         autoOpen: false,
         height: dialogHeight,
         width: dialogWidth
      });
      $("#fullWindowW").dialog({
         modal: true,
         autoOpen: false,
         height: dialogHeight,
         width: dialogWidth
      });
      
      $("#webcam-N").click(function(){
         src = $(this).attr("src");
         popupImage_N(src);
      });
      $("#webcam-S").click(function(){
         src = $(this).attr("src");
         popupImage_S(src);
      });
      $("#webcam-E").click(function(){
         src = $(this).attr("src");
         popupImage_E(src);
      });
      $("#webcam-W").click(function(){
         src = $(this).attr("src");
         popupImage_W(src);
      });

	  function popupImage_N(src){
       $("#fullWindow_N").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindow_N").dialog('open');
      }
	  function popupImage_S(src){
       $("#fullWindowS").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindowS").dialog('open');
      }
	  function popupImage_E(src){
       $("#fullWindowE").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindowE").dialog('open');
      }
      function popupImage_W(src){
       $("#fullWindowW").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindowW").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:
Post Reply