Author Topic: Webcam Page Code  (Read 11890 times)

0 Members and 1 Guest are viewing this topic.

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Webcam Page Code
« on: November 15, 2016, 03:53:08 AM »
Just wondering is someone can help me out with some code for my webcams.

I currently have this http://weather.inverellit.com/webcams.htm which only displays a single camera.

I've got 2 cameras active now, the second is Wcam2.jpg.

The source I'm using is pretty basic, I'm not really up on html.

Would like the 2 images side by side, with them expanding to full screen when clicked.

Tried a couple of things with no success.

Thanks

Phil.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #1 on: November 15, 2016, 05:12:25 AM »
Hi,
use a table:

<table style="width:98%;margin:0 auto">
  <tr>
    <td style="width:50%;text-align:center">
       <img name="refresh" src="http://weather.inverellit.com/images/Wcam1.jpg" alt="Webcam Image" style="width:98%;margin:0 auto">
    </td>
    <td style="width:50%;text-align:center">
       <img name="refresh2" src="http://weather.inverellit.com/images/Wcam2.jpg" alt="Webcam Image 2" style="width:98%;margin:0 auto">
    </td>
  </tr>
</table>

Offline mcrossley

  • Forecaster
  • *****
  • Posts: 1128
    • Wilmslow Astro
Re: Webcam Page Code
« Reply #2 on: November 15, 2016, 07:21:51 AM »
Or maybe something like...?
Code: [Select]
<img name="refresh1" src="http://weather.inverellit.com/images/Wcam1.jpg" alt="Webcam Image 1" style="display:inline-block;width:49%;">
<img name="refresh2" src="http://weather.inverellit.com/images/Wcam2.jpg" alt="Webcam Image 2" style="display:inline-block;width:49%;">
Mark

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #3 on: November 15, 2016, 07:26:47 AM »
Yes, thats of course also an option, but you then should also add "margin:0 auto" for each, otherwise you will have them not centered perfectly, there would be a 2% gap on the right I think

Offline mcrossley

  • Forecaster
  • *****
  • Posts: 1128
    • Wilmslow Astro
Re: Webcam Page Code
« Reply #4 on: November 15, 2016, 07:37:01 AM »
Yes, thats of course also an option, but you then should also add "margin:0 auto" for each, otherwise you will have them not centered perfectly, there would be a 2% gap on the right I think
There would be a gap, the margin auto will fix it, but you should also add borders to taste etc.
Mark

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #5 on: November 15, 2016, 02:08:59 PM »
Hi,
use a table:

<table style="width:98%;margin:0 auto">
  <tr>
    <td style="width:50%;text-align:center">
       <img name="refresh" src="http://weather.inverellit.com/images/Wcam1.jpg" alt="Webcam Image" style="width:98%;margin:0 auto">
    </td>
    <td style="width:50%;text-align:center">
       <img name="refresh2" src="http://weather.inverellit.com/images/Wcam2.jpg" alt="Webcam Image 2" style="width:98%;margin:0 auto">
    </td>
  </tr>
</table>

Thanks Everyone,

I've put just this code in http://weather.inverellit.com/webcams2.htm, but no refresh code or titles.

Can someone show me how to modify the java refresh script?

Sorry, like I mentioned, I'm really not up on html & Java.

Thanks

Phil.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #6 on: November 15, 2016, 02:38:25 PM »
You have the Javascript commented out, you have to delete this:

<!--

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #7 on: November 15, 2016, 04:03:13 PM »
Please excuse my ignorance.

I do have a little programming experience, but this is code I don't understand.

My current page, with the single camera seems to auto refresh, http://weather.inverellit.com/webcams.htm and it has the "<!--"

I presume that piece of Java would need to accommodate the 2 different images, but again I don't quite get what the java is doing in relation to the html.

Phil.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #8 on: November 15, 2016, 04:28:41 PM »
I personally would use jQuery for this, which is a library that makes JavaScript a lot easier to work with. And it would also make it much easier for the full screen popups. It is of course possible to do it all in just plain Javascript, but this is easier.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #9 on: November 15, 2016, 06:40:20 PM »
OK, Im going to have a look at it, just hang on I will post the script here, I will make it simple you can then play around with the styling

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #10 on: November 15, 2016, 06:52:37 PM »
Thanks, Much appreciated.

My only current programming experience is with a product called MMbasic, http://geoffg.net/MicromiteMX470.htmlwhich runs on a PIC32.
Hoping to develop a mini console with it to work with my VP2.

Java & HTML I still don't have my head around.

Phil.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #11 on: November 15, 2016, 06:55:01 PM »
No problem Phil,
just a few questions:

1. any title?
2. do you prefer dark/light theme?

Any additional text for the images?

Update interval?

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #12 on: November 15, 2016, 06:57:52 PM »
and which colors do you prefer for the text if there is one (title, the popup window etc.)

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #13 on: November 15, 2016, 07:21:56 PM »
OK, here is the code, we can play around with the colors later based on what you like.

Please upload it to your server and then see if it works. It should update every 30 seconds. The images should popup full screen when clicked.

Post here a link so that I can make sure it works.
Thanks




<html>
   <head>
      <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="//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;
         }
         h1{
            font-variant:small-caps;
            text-align: center;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <h1>Phil's Backyard Webcams</h1>
      <table style="width:98%;margin:0 auto">
         <tr>
            <td style="width:50%;text-align:center">
               <img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
            </td>
            <td>
               <img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
            </td>
         </tr>
      </table>
      <div style="position:absolute;text-align:center;bottom:10px;margin:0 auto;width:100%">
         <strong>Inverell NSW</strong><br>Latitude S 29&deg; 46' 26"    Longitude E 151&deg; 07' 14"    Elevation 586 m
      </div>
      <div id="fullWindow" title="Webcam"></div>      
   </body>
   <script>
      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.9;
      dialogWidth = screen.width*0.9;
      $("#fullWindow").dialog({
         modal: true,
         autoOpen: false,
         height: dialogHeight,
         width: dialogWidth
      });
      
      $(".webcam").click(function(){
         src = $(this).attr("src");
         popupImage(src);
      });
      
      function popupImage(src){
         $("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
         $("#fullWindow").dialog('open');      
      }
   </script>
</html>

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #14 on: November 15, 2016, 10:04:27 PM »
Sorry for the delayed reply.

Just go called out for a bit.

That looks great, Cam on the left is East facing, right is to the West.

I've got it sitting here at the moment:- http://weather.inverellit.com/webcams2.htm

Nearly 2:00pm here in Aus & had a few mid-day issues to deal with.

Really appreciate the help in an area in which I don't have the competence required.

Not sure what is supposed to happen when clicking on the images, but will try to get a handle on the code.

Thanks again.

Phil.

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #15 on: November 15, 2016, 11:35:01 PM »
Just visited the page again & noticed the left image had not updated, but the right one had.

A refresh brought it up to date.

Both images are updating following the refresh.

Maybe I should have waited a little longer before initially clicking refresh


Phil

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #16 on: November 16, 2016, 07:18:52 AM »
Clicking the image should make it popup in a larger window

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #17 on: November 16, 2016, 01:58:46 PM »
Hi,

I don't seem to get any pop-up function.
Tried pop-up blocker turned off, no change.

Page is here.

http://weather.inverellit.com/webcams2.htm

Phil.


Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #18 on: November 16, 2016, 03:50:53 PM »
When I click the image, it zooms in in a separate window, popup blocker should not have any effect.

Can someone else try?

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #19 on: November 16, 2016, 04:23:46 PM »
Strange,

Had previously tried it many times on 2 dirrerent PC's with no result.

Both running IE11.

But working now.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #20 on: November 16, 2016, 04:36:33 PM »
Works for me in Chrome, FF and IE

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #21 on: November 16, 2016, 07:13:21 PM »
Thanks Jachym,

Appreciate this.

I notice by the code I may not be able to label the pop-ups individually.

As in East Camera & West Camera?

Correct.

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #22 on: November 18, 2016, 06:20:37 PM »
Hi Jáchym,

Thanks again for you help & FYI it's evolved a bit more over here http://sandaysoft.com/forum/viewtopic.php?f=19&t=15807&p=121385#p121385.

Current version is up.

http://weather.inverellit.com/webcams.htm


Cheers

Phil.

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Webcam Page Code
« Reply #23 on: November 18, 2016, 06:35:07 PM »
Nice, one more thing we could add is the title for the popup, do you want different one for each cam?

Offline Phil23

  • Senior Contributor
  • ****
  • Posts: 288
    • Phil's Backyard
Re: Webcam Page Code
« Reply #24 on: November 19, 2016, 03:46:52 PM »
Lol,

That's what I was trying to do last night & think I've possibly broken things a little.

Had to revert back to a previous version.

I was trying to change "webcam" to "East Camera" & "West Camera", but not enough understanding of how jquery works.

Also notice that sometimes when I first revisit the page I need a manual refresh to get the page up to date.

Phil