Link to home
Start Free TrialLog in
Avatar of elysiandc
elysiandc

asked on

load img src with partial filename?

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. The next image would be bay1905061448.gif, and so on. The file name is always changing, bay{DDMMYYhhmm}.gif, with minutes changing in 5 minute increments...so 03, 08, 13, 18 etc to 58 and back to 03.

I asked how to load the image with script to change the {DDMMYYhhmm} variable of the filename, but had some inherint problems I hadn't considered. For more info see;
https://www.experts-exchange.com/questions/21857644/img-src-filename-variable-driven-based-on-current-date-time.html#16724782

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{DDMMYYhhmm}.gif in the source directory and is constantly overwritten with the next image, 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 created the desire filename. We just go for the constant instead, being 'bay' and '.gif'.

Is there any way to ignore the rest of the filename?
Avatar of Krule
Krule
Flag of Canada image

Hmm, this isn't javascript related, which is what that last question is posted in.

It would be a lot easier if I knew what environment you were in, since this is better made as server-side scripting. (Ie: php/asp/jsp)

Theres really no clean way to browse through the directories of another server, unless you use something like AJAX, and the other server has directory listing on, which is does not appear to. In fact, theres no way of doing this unless you own that site, and can turn on directory listings, or you own it and can write a server side script to accomplish this.

That being said, if you could do that, why wouldn't you be able to just rename the file that is updated to not have a timestamp? So thats not a good solution.

Another solution would be to brute force it. That is, generate todays date, then just iterate through all the possible numbers for the minutes/hours (24*60) and see which one doesn't return a 404. This would also require some AJAX since you would need to make a request to the server.
Well if you know the name of the image ONCE then you know it forever - ie, if you know the image was called 1905061443.gif then you don't need to guess what the next image will be called.  You know what every image will be called forever ad infinitum.  

Of course, there is a chance that either server gets the time settings out of whack, in which case you would have problems.  But servers are meant to be reliable, so it shouldn't need to happen.  A good error handling routine would help - something along the lines of what Krule says perhaps, where you try a few alternatives until you don't get a 404.  You could even cheat and load the page at http://www.earthsci.unimelb.edu.au/~awatkins/bay.html and grab the image source from there...  That may give you a performance hit though - might work in error situations however.

Avatar of rrz
>Can we just tell it to source bay*.gif, where * is an unknown and ignored variable?  
Yes, using  "Regular Expressions" to search the source code.  I am not an expert with RegEx but maybe someone will help.  Perhaps something like    "http://www.earthsci.unimelb.edu.au/~awatkins/bay\d*.gif"   or   "http://www.earthsci.unimelb.edu.au/~awatkins/bay\d{10}.gif"    will work for the pattern to search for in the code. Maybe just searching for the img tag would work. You would also need the map tag.
Since you don't seem to have any server-side engine to help you, what do you think about using an applet ?  But I would need to colaborate with some experts to get it done.   rrz
I don't see how an Applet would work any better than any JS solution using RegEx.

This seems a bit 'hackey' to me if I say. I think just asking the owner of the site to make a copy of the file named 'bay.gif' would save yourself a TONE of work. Sometimes the best solution is not technical, but civil :-)
Krule,  Please show us how javascript can grab the source code.
I am not suggesting that we use an applet for the display of the image. What I am suggesting is that we use an applet to dynamically grab the current name of the image and pass it the page.   rrz
Avatar of elysiandc
elysiandc

ASKER

Perhaps if I explain a little of the method behind the madness of my question could help.

I originally wanted client side script so that I could implement the map on the Scuba shops current weather site ( http://www.aquaticadventures.com.au/weather.htm ). Three reasons for this, 1.taking a while to build the new site, 2.they don't currently have PHP or the like setup on the current one and 3. they can't keep accurate details up, and divers need accurate weather info for safety reasons. This one map has about 80% of the info they need and is updated every 5 mins, so is a fantastic resource.

I will need to setup a content management system and a shop, so will be using PHP down the track. I understand a server side solution would probably be better/easier and I dare say I will need some help when I get to that...so stay tuned.

In the mean time I am open to both RegEx and Applets, perhaps a pref for RegEx. I'll search around a bit and see what I can find out too.
Oh hmm..I guess if this isn't your domain you can't use XMLHttpRequest object..then no, javascript can't do this.

I'll keep thinking
Oh, I forgot to mention one of the key factors. The guy that owns the site works in Earth Science at Melbourne University, so pulls all this weather info from various sources no one else can get access to. There are all sorts of graphs and charts on the site that are dynamically generated by 3rd party monitoring software, just like the map. Unfortuantely he has no control over how the file is named as he doesn't run the software, the Uni does.

Have a look at the source code for the site ( http://www.earthsci.unimelb.edu.au/~awatkins/bay.html ). I can't even figure out how the site a)dynamically updates the line 'OBSERVATIONS LAST UPDATED: Monday May 22 01:12' or creates the line <img align="center"  USEMAP="#home_nav" border=0 width=346 height=316 src = "http://www.earthsci.unimelb.edu.au/~awatkins/bay2205060103.gif" alt="Bay Winds">. The only JavaScript I see on the page are for the navigation menu, and the mystery script in the HEAD that I don't understand....
As Krule posted, this is easy with server-side technology.
Have you considered taking the easy way out and just putting a link  on your page ?
If you don't want a link on your page to the map page, then maybe you could use javascript( as suggested by Krule). Maybe you could use a frameset. The map page could be a very small frame on the bottom and then use the DOM to grab the image tag and put it into your page in the top frame. Just an idea that I didn't test. Yes, it is a
>bit 'hackey'
SOLUTION
Avatar of Krule
Krule
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I'd certainly be up for giving it a shot that way. I don't mind if it seems a bit 'hackey', as this is only intended to be a temporary solution until the new site is ready to go, I'll give anything a go in the mean time. :D
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
having trouble with server, sorry.
i was thinking though, what about just loading the foreign page in aniframe like ths:

<html>
      <head>
            <title>Your page on your site</title>
      </head>
      <body>
            <h1>Your page heading</h1>
            <p>Some words and stuff</p>

            <iframe frameborder="0" scrolling="no" width="60%" height="80%" src="http://www.earthsci.unimelb.edu.au/~awatkins/bay.html"/>
      </body>
</html>
Thanks a million for your ongoing help with this one basicinstinct (and everyone else too!), I really really appreciate it very much.

I have tried the JSP solution, but can't seem to get the image to show up. I checked the source image and the name has now changed from 03, 08, 13, 18 etc sequence to 01, 06, 11 etc. I emailed the guy that owns the weather map and he explained that sometimes that systems tht generate the map have bugs (like temp showing 99.99 degrees) and need to be restarted, so the date/time stamp on the filename is subject to change. Clearly this rules out using the date/time variable in any way. Damn, hell, crap, bugger! I really liked that solution too.

I've given the iframe a go, it's pretty good, but still shows the menu bar from the source site across the top. I'd like to get rid of that as it gives too many options for the end user, and the info provided there is not really relevant to the dive site. I know I can set the frame size to lose the menu off the bottom, but is there anyway to 'crop' the source page in the frame to block the unnecessary info?

I've been searching for a way to move the content up in the frame, effectively chopping/hiding the menu off the top, but haven't had much luck so far. The map is not in a table with a name to refer to...   Will keep looking.
>I have tried the JSP solution  
So, you do have a servlet container at your site ?  If yes, then you could use   java.net.HttpURLConnection or <c:import> (JSTL)  to grab the source code.   What parts of the map page do you want ?      rrz
I've just checked again with the clients host. No JSP setup or available. Nothing server side at this stage, I have to get the client to upgrade to get PHP, CGI or ASP.
Then I guess Krule's suggestion
>making an invisible frame that loaded the other page and then you could use DOM to search for the image tag.  
might the way to go. He offered to post code.   What parts of the map page do you want ?  Just the image ?  Do you want the clickable area parts ?  Do you want the links that give more info ?  Also I noticed that the  heading  "OBSERVATIONS LAST UPDATED:   "  is not in sync with the image numbers.  Is that a problem ?
I also noticed that the times were out of sych, this does not matter though. I am really only after the image. I'll then make this a link back to the original site, so if end users want more info they can go straight there in new window. The clickable areas link back to a bunch of graphs and charts, which won't mean a lot to the divers. I'd have no idea how to do this so a code sample would mean the world to me.
It was Krule's idea
>making an invisible frame    
and he said he had the code.  He was around a couple of hours ago.
I tried to implement something like the following line in a dive page.
 document.images[0].src = parent.mapPage.document.images[0].src  
But I came up againest javascript's  "same-origin policy". I guess I don't know javascript as well as I thought I did. Hopefully Krule has the solution.
Hi all,

I've been checking around and read heaps of articles - it's just making things worse for me! Too much info that I don't understand, I'm afraid.

I can do the invisible frame easlily enough, but it's doing my head in trying to work out the correct way to pull the image from it. Points are still going for this...

Any suggestions? Thanks!
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Crap, sorry. Forgot to close of this question. Thanks a million for all your help with this guys. I have gone the frame oprion for now. Am setting up PHP for the clients new site, so maybe there will be a way around the problem with that instead. I'll search the PHP section and post the problem again there. :) Thanks!