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 4019) - 03 April 2024
Legacy Cumulus 1 release 1.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
Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024
Cumulus MX V4 beta test release 4.0.0 (build 4019) - 03 April 2024
Legacy Cumulus 1 release 1.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
- ConligWX
- Posts: 1630
- 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
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.
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 • CumulusMX v4.0.0
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir • CumulusMX v4.0.0
-
- 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
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.
Sjaak
My weather camera is still in the attic at the moment but will go outside when the weather gets better in the Netherlands.
Sjaak
Weather Station: Amersfoort-Nieuwland, The Netherlands.
http://element14.synology.me
http://element14.synology.me
- ConligWX
- Posts: 1630
- 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
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.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.
Sjaak
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 • CumulusMX v4.0.0
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir • CumulusMX v4.0.0
- mcrossley
- Posts: 12763
- 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
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.
- ConligWX
- Posts: 1630
- 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
Regards Simon
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir • CumulusMX v4.0.0
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir • CumulusMX v4.0.0
- mcrossley
- Posts: 12763
- 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
If you change your webcam URL in Cumulus to "https://www.conligwx.org/webcam.htm", then the menu should work too.
- ConligWX
- Posts: 1630
- 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
I have just changed it.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.
Regards Simon
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir • CumulusMX v4.0.0
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir • CumulusMX v4.0.0
-
- 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
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
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.
- 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
Late to the party ...
@simon ...
In your .webcam-center class add:
height: auto;
Then it keeps its height / width ratio
@simon ...
In your .webcam-center class add:
height: auto;
Then it keeps its height / width ratio
......................Imagine, what you will KNOW tomorrow !
-
- Posts: 275
- 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
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
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: oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4019
website: oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4019
-
- 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
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;"> Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 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 data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly 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 data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly 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 index</a>: :<a href="fwgraphs.php">fwi 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:
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:
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: