Page 1 of 1
request for embedded Webcam into MX Webpage
Posted: Mon 01 Mar 2021 3:15 pm
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.
Re: request for embedded Webcam into MX Webpage
Posted: Tue 02 Mar 2021 11:52 am
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.
Sjaak
Re: request for embedded Webcam into MX Webpage
Posted: Tue 02 Mar 2021 12:40 pm
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.
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
Re: request for embedded Webcam into MX Webpage
Posted: Tue 02 Mar 2021 3:31 pm
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.
Re: request for embedded Webcam into MX Webpage
Posted: Tue 02 Mar 2021 4:07 pm
by ConligWX
Re: request for embedded Webcam into MX Webpage
Posted: Tue 02 Mar 2021 4:09 pm
by mcrossley
If you change your webcam URL in Cumulus to "
https://www.conligwx.org/webcam.htm", then the menu should work too.
Re: request for embedded Webcam into MX Webpage
Posted: Tue 02 Mar 2021 4:14 pm
by ConligWX
Re: request for embedded Webcam into MX Webpage
Posted: Sat 13 Mar 2021 1:16 am
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
Re: request for embedded Webcam into MX Webpage
Posted: Sat 13 Mar 2021 4:44 am
by beteljuice
Late to the party ...
@simon ...
In your .webcam-center class add:
height: auto;
Then it keeps its height / width ratio
Re: request for embedded Webcam into MX Webpage
Posted: Sat 13 Mar 2021 4:51 pm
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
Re: request for embedded Webcam into MX Webpage
Posted: Wed 16 Jun 2021 10:23 am
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;"> 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>