• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

<img src> filename variable driven based on current date & time

Hi,

I am designing a weather site and have been given permission to use the map on

http://www.earthsci.unimelb.edu.au/~awatkins/bay.html

This is a gif image that is updated every 5 mins, so the file name changes too, ie bay1905061443.gif for 19/05/2006 14:43.

I found this
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21408398.html which gives me

<p align="left"><img id='myImage' src=''>
<script type="text/javascript">
   var today = new Date()
   var day = today.getDate()
   var month = today.getMonth() + 1
   var year = today.getYear()
   vday = day.toString()
   vmonth = month.toString()
   vyear = year.toString()
   if (vday.length == 1) {vday = '0' + vday}
   if (vmonth.length == 1) {vmonth = '0' + vmonth}
   document.write(vyear + vmonth + vday)
   var vFileName="http://www.mydomain/" + vyear + vmonth + vday + ".gif"
   document.getElementById('myImage').src = vFileName;

 </script>
which is useful for setting the date, but there are two main differences I need.

Firstly, how do I format the date to be in ddmmyy format?

Secondly, how do I add the time, and only every 5 mins? ie the next image after the example above would be bay1905061448.gif

The final thing that needs to be in there is the image mapping... so far I have the following

<map name="home_nav">
      <area alt="Point Wilson" shape="RECT" coords="40,100,130,180" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/wilson.html" title="Point Wilson Wind Graph">
      <area alt="Fawkner Beacon" shape="RECT" coords="160,30,280,110" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/fbeacon.html" title="Fawkner Beacon Wind Graph">
      <area alt="St Kilda Harbour RMYS" shape="RECT" coords="170,1,290,29" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/stk.html" title="St Kilda Harbour RMYS Wind Graph">
      <area alt="Frankston Beach" shape="RECT" coords="220,125,340,194" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/frankston.html" title="Frankston Beach Wind Graph">
      <area alt="Cerberus" shape="RECT" coords="270,215,330,297" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/cerberus.html" title="Cerberus Wind Graph">
      <area alt="South Channel Is." shape="RECT" coords="135,195,235,265" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/schan.html" title="South Channel Is. Wind Graph">
      <area alt="Bay and Ocean Temperature" shape="RECT" coords="5,245,134,287" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/temps.html" title="Sea Surface Temperatures Graph">
      <area alt="Melbourne Air Temp Graph" shape="RECT" coords="5,288,145,315" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/melbtemp.html" title="Melbourne Air Temp Graph">
      <area alt="Melbourne Sunrise Sunset Graph" shape="RECT" coords="1,1,120,38" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/sunset.html" title="Melbourne Sunrise Sunset Graph">
      <area alt="RYCV (Williamstown) Tide Graph" shape="RECT" coords="1,39,120,75" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/rycv.wave.html" title="RYCV (Williamstown) Tide Graph">
      </map>

      <img usemap="#home_nav" src="" alt="Bay Winds" align="middle" border="0" height="316" width="346" img id='myImage' src=''>

<script type="text/javascript">
   var today = new Date()
   var day = today.getDate()
   var month = today.getMonth() + 1
   var year = today.getYear()
   vday = day.toString()
   vmonth = month.toString()
   vyear = year.toString()
   if (vday.length == 1) {vday = '0' + vday}
   if (vmonth.length == 1) {vmonth = '0' + vmonth}
   document.write(vyear + vmonth + vday)
   var vFileName="http://www.earthsci.unimelb.edu.au/%7Eawatkins/bay" + vyear + vmonth + vday + ".gif"
   document.getElementById('myImage').src = vFileName;

 </script>

Sadly I am a graphics specialist, not a coding guru, so aren't too good with this stuff... any tips would be hugely appreciated.

Regards

The BFG
0
elysiandc
Asked:
elysiandc
  • 6
  • 2
1 Solution
 
basicinstinctCommented:
Firstly, how do I format the date to be in ddmmyy format?

<p align="left"><img id='myImage' src=''>
            <script type="text/javascript">
               var today = new Date();
               var day = today.getDate();
               var month = today.getMonth() + 1;
               var year = today.getYear();
               vday = day.toString();
               vmonth = month.toString();
               vyear = year.toString();
               vyear = vyear.substring(vyear.length - 2);
               if (vday.length == 1) {vday = '0' + vday;}
               if (vmonth.length == 1) {vmonth = '0' + vmonth;}
               document.write(vday + vmonth + vyear);
               var vFileName="http://www.mydomain/" + vday + vmonth + vyear + ".gif";
               document.getElementById('myImage').src = vFileName;
             </script>
0
 
basicinstinctCommented:
This example will refresh the page every five minutes and rename the image source according to your requirements (including hours and minutes).

<html>
      <head>
            <meta http-equiv="refresh" content="300">
            <script type="text/javascript">
               function load()
               {
                     var today = new Date();
                  var day = today.getDate();
                  var month = today.getMonth() + 1;
                  var year = today.getYear();
                  var hours = today.getHours()
                  var mins = today.getMinutes()
                  vday = day.toString();
                  vmonth = month.toString();
                  vyear = year.toString();
                  vyear = vyear.substring(vyear.length - 2);
                  vhours = hours.toString();
                  vmins = mins.toString();
                  vday = pad(vday);
                  vmonth = pad(vmonth);
                  vhours = pad(vhours);
                  vmins = pad(vmins);
                  document.write(vday + vmonth + vyear + vhours + vmins);
                  var vFileName="http://www.mydomain/" + vday + vmonth + vyear + ".gif";
                  var oImg = document.getElementById('myImage');
                  oImg.src = vFileName;
               }
               
               function pad(s)
               {
                     s = (s.length == 1) ? '0' + s : s;
                  return s;
               }
             </script>
      </head>
      <body onload="load();">
            <p align="left"><img id='myImage' src=''>
      </body>
</html
0
 
basicinstinctCommented:
Of course, this is all client side stuff, so if userA loads the page at 14:30 he will refresh at 14:35 (and the image will be named accordingly).  If userB loads the page at 14:31 the page will refresh at 14:36 (and the page will be named accordingly).  Had you taken that into account?  You posted client side code so I just worked off that.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
basicinstinctCommented:
also, if the user's machine is set to the wrong date / time that will stuff it up too
0
 
basicinstinctCommented:
and timezones...
0
 
elysiandcAuthor Commented:
Wow, top work basicinstinct! Amazing! You have a very good point about the timezones and dates. I hadn't really thought about those sorst of problems by having it run client side. Most users would be viewing from within the appropriate timezone, but I'd rather have a site that can be viewed from anywhere without errors.

I guess it could be done client side, but to much of a hastle to figure out, so I figure that leads to the next question...how to do it server side? Or, is there any way we can script it to ignore the numbers and just pull the file based on the word 'bay'? For server side, I'd be using PHP and MySQL, of which my knowledge is fairly basic at this stage.

We'd been looking at pulling the source image by trying to use the full filename, which has many potential problems. Stupidly I hadn't considered the flipside. Can we just tell it to source bay*.gif, where * is an unknown and ignored variable? There is only one file named bay{variable#}.gif in the source directory, so the script wouldn't encounter errors due to other .gif files with 'bay' in their names. This does away for the need to combine any date or time figures to create the desire filename. We just go for the constant instead.

Doing it server side, we can only assume that the server date and time are correct, and in the desired timezone. So there are potential problems that could occur there, but lets assume not for the sake of the exercise.
The script would need to take into account that the source image name changes every 5 minutes, so is updated at 03, 08, 13, 18, 23 etc. to 58 and then starts back to 03. That is the minutes, so there would be ddmmyyhh before that. Seems like a bit of an effort.

What do you think?

Much obliged,

The BFG
0
 
rrzCommented:
I don't if  basicinstinct  is around now or if he knows PHP, but maybe you ask your question at  
http://www.experts-exchange.com/Web/Web_Languages/PHP/
0
 
elysiandcAuthor Commented:
I have accepted the answer that basicinstinct gave above, as it does solve the initial problem that was proposed. I hhave had to rethink the apporach to the problem and have posted some other questions elsewhere. Any further comments or solutions to the queries above would still be greatly appreciated though. :D
0
 
basicinstinctCommented:
Hi - ok cool bananas.

I think this will be easy to program server side.

Perhaps it could be as easy as reloading the page every five minutes at precisely the right time.  When the page reloads the server decides what the image source will be and bob's your uncle.

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now