Author Topic: HTML code to make browser update automatically at inerval  (Read 2776 times)

0 Members and 1 Guest are viewing this topic.

Offline DaleReid

  • Forecaster
  • *****
  • Posts: 2002
    • Weather at Eau Claire, WI
HTML code to make browser update automatically at inerval
« on: May 09, 2022, 08:28:31 PM »
Is there a line of HTML code that will cause a browser, displaying a web page image, to update or refresh at intervals selected by the programmer?
ECWx.info
&
ECWx.info/t/index.php

Offline sky_watcher

  • Contributor
  • ***
  • Posts: 138
Re: HTML code to make browser update automatically at inerval
« Reply #1 on: May 09, 2022, 09:06:48 PM »
Is there a line of HTML code that will cause a browser, displaying a web page image, to update or refresh at intervals selected by the programmer?
Try this page for what you want:
https://www.geeksforgeeks.org/how-to-automatic-refresh-a-web-page-in-fixed-time/
“The more a man knows, the more willing he is to learn. The less a man knows, the more positive he is that he knows everything...” ― Robert G. Ingersoll

Offline chief-david

  • Educational Weather
  • Forecaster
  • *****
  • Posts: 2846
  • Space Academy for Educators
    • Benilde-St. Margaret's Weather
Re: HTML code to make browser update automatically at inerval
« Reply #2 on: May 09, 2022, 10:07:37 PM »
<meta http-equiv="refresh" content="500">


in the head.   time is in seconds



You can't phase me-I teach Middle School.
It's not you-It's WU.

Offline DaleReid

  • Forecaster
  • *****
  • Posts: 2002
    • Weather at Eau Claire, WI
Re: HTML code to make browser update automatically at inerval
« Reply #3 on: May 09, 2022, 10:09:11 PM »
Thank you. I'll look at the code to see if I can understand it, being the newcomer that I am.  Thank you again.  Dale
ECWx.info
&
ECWx.info/t/index.php

Offline DaleReid

  • Forecaster
  • *****
  • Posts: 2002
    • Weather at Eau Claire, WI
Re: HTML code to make browser update automatically at inerval
« Reply #4 on: May 09, 2022, 10:10:24 PM »
Chief, that is even simpler.  I know that they update code all the time and maybe this has been there for awhile, but this makes sense and I'm glad they have it as a function of html. Dale
ECWx.info
&
ECWx.info/t/index.php

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: HTML code to make browser update automatically at inerval
« Reply #5 on: May 11, 2022, 08:22:25 AM »
Dale, I use this to ONLY reload a single image, instead of the whole page.... there's other ways, but this seems to work better for me:
Code: [Select]
<body onload="setTimeout('Cam1Still()',10000)">
<img id="stillSC" class="wxcam" src="../still/camSC.jpg?" alt="Accessing Server" />

<script>
function Cam1Still() {
   if (!document.images) return;
   document.getElementById('stillSC').src = '../still/camSC.jpg?' + Math.random();
   setTimeout('Cam1Still()',10000);
}
</script>
The Body tag replaces current 'naked' body tag, or add the 'onload' thingy into the tag.
This reloads every 10 seconds.'Cam1Still' is function name... name it what you will, both places...
Give the 'image' an 'id', and put it both places. ('stillSC' in this example) 
Then of course, the image source... ('src') both places 
'?' is important.
https://frankfortweather.us/camsUP/stillNW.html e.g.
Mike
« Last Edit: May 11, 2022, 08:30:55 AM by Cutty Sark Sailor »
 


Offline DaleReid

  • Forecaster
  • *****
  • Posts: 2002
    • Weather at Eau Claire, WI
Re: HTML code to make browser update automatically at inerval
« Reply #6 on: May 11, 2022, 08:30:48 AM »
Again, more ways to do things, and like our language, the computer code has many ways to 'say' something.

Thanks to all who have given me examples to study and to help understand how things work. Dale
ECWx.info
&
ECWx.info/t/index.php

Offline chief-david

  • Educational Weather
  • Forecaster
  • *****
  • Posts: 2846
  • Space Academy for Educators
    • Benilde-St. Margaret's Weather
Re: HTML code to make browser update automatically at inerval
« Reply #7 on: May 11, 2022, 06:09:47 PM »
Dale, I use this to ONLY reload a single image, instead of the whole page.... there's other ways, but this seems to work better for me:
Code: [Select]
<body onload="setTimeout('Cam1Still()',10000)">
<img id="stillSC" class="wxcam" src="../still/camSC.jpg?" alt="Accessing Server" />

<script>
function Cam1Still() {
   if (!document.images) return;
   document.getElementById('stillSC').src = '../still/camSC.jpg?' + Math.random();
   setTimeout('Cam1Still()',10000);
}
</script>
The Body tag replaces current 'naked' body tag, or add the 'onload' thingy into the tag.
This reloads every 10 seconds.'Cam1Still' is function name... name it what you will, both places...
Give the 'image' an 'id', and put it both places. ('stillSC' in this example) 
Then of course, the image source... ('src') both places 
'?' is important.
https://frankfortweather.us/camsUP/stillNW.html e.g.
Mike

Will that work to update the WU radar package and not the whole page?



You can't phase me-I teach Middle School.
It's not you-It's WU.

Offline BCJKiwi

  • Forecaster
  • *****
  • Posts: 302
    • Silver Acorn Weather - N.Z.
Re: HTML code to make browser update automatically at inerval
« Reply #8 on: May 12, 2022, 09:42:24 PM »
This code synchronises the refresh to time of next update and as configured does the refresh 35 seconds after the update.
For the Saratoga tempalate I have placed it in top.php

Code: [Select]
// synchronise page refresh to tags upload time - assumes correct time zone set in php scripts to match WXsoftware timezone
// $timeofnextupdate is standard site variable in Saratoga template for both CU & WD but calculated for CU
if (isset($timeofnextupdate) && $timeofnextupdate != '---' ) {
   $nextupd = (substr($timeofnextupdate,0,2)*60*60) + (substr($timeofnextupdate,3,5)*60); // next update hh:mm as seconds
   $present = (date('H')*60*60) + (date('i')*60) + date('s');                             // now hh:mm:ss as seconds
   if ($nextupd > $present) {$metrefresh = $nextupd - $present + 35;} else {$metrefresh = 620/2;} // handle midnight
// echo "timeofnextupdate (hh:mm): " . $timeofnextupdate . " = nextupd (secs): " . $nextupd .", present (secs): ".$present . ", refresh (secs): ". $metrefresh . "  - HH:" . date('H') . " MM:" . date('i') ." SS:" . date('s') . " tagtime: " . $time;
 } else { $metrefresh = 620; }
// echo "default refresh: ". $metrefresh; // default
?>
   <meta http-equiv="refresh" content="<?php echo $metrefresh?>" />

Offline weatherdoc

  • Senior Contributor
  • ****
  • Posts: 180
    • Willowsford Farm Weather
Re: HTML code to make browser update automatically at inerval
« Reply #9 on: May 14, 2022, 08:29:03 AM »
Hey chief-david, thanks for the code snippet. I had been updating my entire wxcam page each minute but implemented your code so that just the still image updates every 10 seconds: https://novawx.dscloud.me/wxcam.php

Offline chief-david

  • Educational Weather
  • Forecaster
  • *****
  • Posts: 2846
  • Space Academy for Educators
    • Benilde-St. Margaret's Weather
Re: HTML code to make browser update automatically at inerval
« Reply #10 on: May 14, 2022, 08:41:09 AM »
Now my question....how can I put this in the WU radar package and not have to update the whole page?



You can't phase me-I teach Middle School.
It's not you-It's WU.

Offline miraculon

  • Sunrise Side Weather
  • Forecaster
  • *****
  • Posts: 4107
  • KE8DAF
    • Sunrise Side Weather in Rogers City MI USA
Re: HTML code to make browser update automatically at inerval
« Reply #11 on: May 14, 2022, 08:42:29 AM »
The images can be stuck in a cache, even if the entire page is refreshed.

I use this random number generator trick to force an image refresh. This is a particular problem with some of my generated charts on my site.

See this post: https://www.wxforum.net/index.php?topic=43665.msg444653#msg444653 for a how-to. I didn't come up with this solution, I found it somewhere on the web a few years back.

Greg H.


Blitzortung Stations #706 and #1682
CoCoRaHS: MI-PI-1
CWOP: CW4114 and KE8DAF-13
WU: KMIROGER7
Amateur Radio Callsign: KE8DAF

Offline chief-david

  • Educational Weather
  • Forecaster
  • *****
  • Posts: 2846
  • Space Academy for Educators
    • Benilde-St. Margaret's Weather
Re: HTML code to make browser update automatically at inerval
« Reply #12 on: May 29, 2022, 08:40:38 AM »
Now my question....how can I put this in the WU radar package and not have to update the whole page?

After all of this time--I put my meta  info into the WU radar package.

It reloads the radar, and not the whole page!!!!!! Wish I knew this 10 years ago-especially when I was able to go to live data.

Quote
<!DOCTYPE html>
<html lang="en">
<head>
<title>WUradar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="weather, Weather, radar" />
<meta http-equiv="refresh" content="180">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>



You can't phase me-I teach Middle School.
It's not you-It's WU.

Offline DaleReid

  • Forecaster
  • *****
  • Posts: 2002
    • Weather at Eau Claire, WI
Re: HTML code to make browser update automatically at inerval
« Reply #13 on: May 29, 2022, 01:34:59 PM »
David, interesting observation.  Thanks for sharing your discovery.
Dale
ECWx.info
&
ECWx.info/t/index.php

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 9257
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: HTML code to make browser update automatically at inerval
« Reply #14 on: May 29, 2022, 03:52:25 PM »
Ummm... the
Code: [Select]
<meta http-equiv="refresh" content="180"> in the <head> part of the page causes the browser to reload the page..all the page.  Only JavaScript can be used to reload parts of the page.. that's how the AJAX scripts (ajaxWDwx.js, etc) work to refresh PART of the page (specifically marked areas) from a more frequently updated conditions file.
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis VP1+ FARS, Blitzortung RED, GRLevel3, WD, WL, VWS, Cumulus, Meteobridge
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP