#297459 - 24/04/2007 16:12
Dumb Javascript Question
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
Greetings!
I use a hybrid of a few different interfaces as a web front end to my office empeg. This front end is basically a flat HTML page intro screen, with a graphic of the player and what is playing, leading to a selected hijack playlist. Normally, this graphic updates with the screen data from /proc/empeg_screen.png.
This works fine under older IE and older Firefox. But Firefox 2 and IE7 no longer autorefresh the screen graphic. A snooper on the network is not showing a GET to the player. The timing loop works fine for other graphics and alert popups (used to test the logic), but I cannot figure out why this one graphic would be a problem. Especially since it works fine in IE6...
Clue, please... Attached is the html / javascript. The css is for font settings and opacity. Nothing special, but I cannot see why it is not working with Firefox 2 or IE7...
Attachments
298202-wk.html (1014 downloads)
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
#297460 - 24/04/2007 16:18
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31597
Loc: Seattle, WA
|
Is the browser caching the image and just not bothering to go fetch a new one? Is there a javascript command to deliberately override the cache when you do a page refresh?
Or, alternatively, isn't there a way to edit the HTML page to tell the browser to ignore the cache when reloading?
|
|
Top
|
|
|
|
|
#297461 - 24/04/2007 16:23
Re: Dumb Javascript Question
[Re: tfabris]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
I do have nocache statements (Pragma:no-cache and Expires:-1) in the HTML. If I use any other image (example - a blank screen), I can see it reloading the other image repeatedly with my snoop.
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297462 - 24/04/2007 16:42
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
Hmmm... Could it be a timing issue, where I am reading the empeg_screen.png file while it is being written? I put a second image in that display loop, and it executes for a random amount of iterations before stopping without any error indication.
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297463 - 24/04/2007 17:10
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31597
Loc: Seattle, WA
|
Until Mark chimes in with the correct answer, have you peeked at the source code to CharcoalGray99's interface? I know that it also doesn't work on IE7 or Firefox, but perhaps he's doing something differently that might be portable.
|
|
Top
|
|
|
|
|
#297464 - 24/04/2007 17:33
Re: Dumb Javascript Question
[Re: tfabris]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
I have. In fact, that is where I stole a lot of the javascript reloading and images from. 
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297465 - 25/04/2007 07:45
Re: Dumb Javascript Question
[Re: tfabris]
|
addict
Registered: 11/01/2002
Posts: 612
Loc: Reading, UK
|
I think this may help: http://www.theserverside.com/discussions/thread.tss?thread_id=32410Last answer: The answer to this problem is simple and a bit strange use headers in lowercase for firefox works in internet explorer too.. for example: Response.AppendHeader("pragma", "no-store,no-cache") ' //HTTP 1.0 Response.AppendHeader("cache-control", "no-cache, no-store,must-revalidate, max-age=-1") // HTTP 1.1 Response.AppendHeader("expires", "-1") Checked khtpd.c and indeed they are being sent nicely Capitalised... I'll patch my kernel and try it...
_________________________
LittleBlueThing
Running twin 30's
|
|
Top
|
|
|
|
|
#297466 - 25/04/2007 08:21
Re: Dumb Javascript Question
[Re: LittleBlueThing]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
Interesting!!! This raises up some possible causes with the version of http protocol. I have to experiment...
Meanwhile, changing the header lines to...
<META HTTP-EQUIV="pragma" CONTENT="no-store,no-cache">
<META HTTP-EQUIV="cache-control" CONTENT="no-store,no-cache,must-revalidate,max-age=-1">
<META HTTP-EQUIV="expires" CONTENT="-1">
...did not produce any noticeable difference. The test image display_blank.png reloads properly, repeatedly, while the empeg_screen.png does not.
function RefreshScreen()
{
document.images.namedisplay.src = "images/display_blank.png";
document.images.namedisplay.src = "proc/empeg_screen.png";
setTimeout('RefreshScreen()',5000);
}
A snoop on the network shows:
Using device /dev/hme (promiscuous mode)
client -> empeg HTTP GET / HTTP/1.1
client -> empeg HTTP GET /images/default.css HTTP/1.1
client -> empeg HTTP GET /images/fascia_left.gif HTTP/1.1
client -> empeg HTTP GET /images/fascia_top.gif HTTP/1.1
client -> empeg HTTP GET /images/display_smoke.png HTTP/1.1
client -> empeg HTTP GET /images/fascia_right.gif HTTP/1.1
client -> empeg HTTP GET /proc/empeg_screen.png HTTP/1.1
client -> empeg HTTP GET /images/fascia_bottom.gif HTTP/1.1
client -> empeg HTTP GET /images/display_blank.png HTTP/1.1
client -> empeg HTTP GET /images/display_blank.png HTTP/1.1
client -> empeg HTTP GET /images/display_blank.png HTTP/1.1
client -> empeg HTTP GET /images/display_blank.png HTTP/1.1
Edited by pgrzelak (25/04/2007 08:24)
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297467 - 25/04/2007 09:43
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
It is likely that different HTTP headers are being set by the webserver on the empeg for the two different png files. The different headers will be causing different caching behaviour for the two different images.
You could try requesting "proc/empeg_screen.png?timestamp" where "timestamp" is a value that changes each time you request it. I haven't checked to see whether Mark's webserver handles requests like that though.
_________________________
Remind me to change my signature to something more interesting someday
|
|
Top
|
|
|
|
|
#297468 - 25/04/2007 09:51
Re: Dumb Javascript Question
[Re: andy]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
Greetings!
Some more testing shows some rather interesting behavior. While working with the Firefox DOM Inspector, I found that if I have two instances (tabs or windows) of the exact page up in Firefox, they update properly. Closing one of the windows or tabs reverts back to the previous behavior.
I will have to try throwing a parameter afterward. I suspect it is ignored as long as there is nothing after it (at least, that is the behavior I see in the browser so far).
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297469 - 25/04/2007 10:00
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
Well, the server will not accept anything after the "?", so that is moot. Also, I tried alternating the timer with a plain empeg_screen.png and one followed by a ?. No luck.
At this stage, I think the browser is still caching the image somehow, and having two instances of the browser is forcing the issue by being slightly out of sync. One interesting note is that IE7 tabs display two different screen images, but neither refresh.
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297470 - 25/04/2007 10:19
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
The meta tags in the page will not have any effect on how images linked from the page will be cached.
_________________________
Remind me to change my signature to something more interesting someday
|
|
Top
|
|
|
|
|
#297471 - 25/04/2007 10:27
Re: Dumb Javascript Question
[Re: andy]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
So, basically it comes down to a local image caching issue. And if the meta tags in the code do not modify behavior for the images contained, it would be a matter of forcing the header through the web server itself. Hmmm... Time to start looking at some of the style sheets and configurations for hijack...
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297472 - 25/04/2007 13:12
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Paul, I just spent a couple of hours fiddling with this, and it's entirely a browser issue. Nothing really works other than feeding unique URLs to Firefox each time. So, Hijack v470 is now available, with support for a "IGNORE=xxxxx" parameter that you can use in the URLs. Eg. Code:
document.images.image1.src = 'http://my.empeg/proc/empeg_screen.png?IGNORE=' + Date();
Just for kicks, I also updated the HTTP headers returned by Hijack to include more of the modern " not cacheable, you idiot!" keywords, but none of them really have any effect here.
|
|
Top
|
|
|
|
|
#297473 - 25/04/2007 13:28
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
Very cool!!! Thanks! I do not have the ability to test in the office, but I will let you know how things go.
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297474 - 15/05/2007 11:29
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Hehh.. related to this..
Being the kernel-focused fellow that I am, I've only just discovered that the "width=" attribute works for *expanding* image displays in a browser. Duh..
And the immediate practical application for this, is to use it like this (below) inside the empeg web interface:
<img src="/proc/empeg_screen.png" width="384"/>
Well golly! That sure does make the remote display viewing much easier on the eyes!
Here (attached) is a hacked up stylesheet to demonstrate it. To try this out, first ensure you have the latest Hijack kernel, and then just copy this file to /default.xsl on your empeg. Then surf to http://your.player.ip.address/?FID=101&EXT=.xml and watch the fun.
EDIT: replaced original attachment with a better one
Cheers
Attachments
299173-default.xsl (733 downloads)
Edited by mlord (15/05/2007 11:40)
|
|
Top
|
|
|
|
|
#297475 - 15/05/2007 12:09
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Mmm.. perhaps one of you can help me with something now? I want to do this: Code:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="3"><img border="0" src="/fascia_left.gif" width="94" height="90"/></td>
<td rowspan="1"><img border="0" src="/fascia_top.gif" width="128" height="28"/></td>
<td rowspan="3"><img border="0" src="/fascia_right.gif" width="74" height="90"/></td>
</tr>
<tr>
<td bgcolor="grey"><img src="/proc/empeg_screen.png" width="128" height="32" name="screen_png"/></td>
</tr>
<tr>
<td rowspan="1"><img border="0" src="/fascia_bottom.gif" width="128" height="30"/></td>
</tr>
</tbody>
</table>
.. except it ends up looking like this (Firefox):  How to fix it? Or how to do it better inside the default.xsl stylesheet (previous post)? Thanks
Edited by mlord (15/05/2007 12:10)
|
|
Top
|
|
|
|
|
#297476 - 15/05/2007 12:33
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
Sorry. Busy day at the office... Thanks! I will try out the style sheet in a little while. Meanwhile, I actually cheat with the fascia drawing code. Whitespace matters, so I did everything in a javascript function: function drawFascia(url) { document.write("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"); document.write("\t<tbody>"); document.write("\t<tr>"); document.write("\t\t<td rowspan=\"3\"><img border=\"0\" src=\"images/fascia_left.gif\" width=\"94\" height=\"90\"></td>"); document.write("\t\t<td><img border=\"0\" src=\"images/fascia_top.gif\" width=\"128\" height=\"28\"></td>"); document.write("\t\t<td rowspan=\"3\"><img border=\"0\" src=\"images/fascia_right.gif\" width=\"74\" height=\"90\"></td>"); document.write("\t</tr>"); document.write("\t<tr>"); document.write("\t\t<td id=\"tdDisplay\" background=\"images/display_smoke.png\"><img src=\"/proc/empeg_screen.png\" class=\"display\" width=\"128\" height=\"32\" name=\"namedisplay\" OnAbort=\"LoadError()\" OnError=\"LoadError()\"></td>"); document.write("\t</tr>"); document.write("\t<tr>"); document.write("\t\t<td><img border=\"0\" src=\"images/fascia_bottom.gif\" width=\"128\" height=\"30\"></td>"); document.write("\t</tr>"); document.write("\t</tbody>"); document.write("</table>"); document.write("<br>"); }
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297477 - 15/05/2007 13:26
Re: Dumb Javascript Question
[Re: pgrzelak]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
I don't seem to be able to get that js function to do anything in the stylesheet.
Mark / Paul / web-gurus ??
Here (attached) is a .zip archive with my hacked-up empeg web-lite interface.
Just unpack it, and move the contents to the root (/) directory of an empeg, and then surf to it (requires latest Hijack for the default.xsl).
There are two versions of the default.xsl file included, and you'll have to rename them in turn to use them. default.xsl-bad is what I thought *should* work, but the table element spacing for the fascias is off. It seems to have some extra padding, despite my best efforts to get rid of it.
The other version, default.xsl-good, is one I've hand-tweaked to look correct in my firefox-1.5, but this is heavily browser dependent. I'd like a better fix in the stylesheet for this.
Help?
And eventually, I want clickable image maps for the buttons.
Attachments
299181-my_empeg_weblite.zip (384 downloads)
|
|
Top
|
|
|
|
|
#297478 - 15/05/2007 14:44
Re: Dumb Javascript Question
[Re: mlord]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Gah. This took longer than it should have. IE sucks. This is a version that uses CSS and won't give you any gaps. Don't get me started about how if you want to float an image within a div in IE, the browser will insert whitespace around the image. The code below could be more terse for FireFox, but this is a good cross-browser solution: Code:
<style>
.left, .right, .middle {
float: left;
}
.middleimg {
float: left;
clear: left;
}
</style>
<div class="left">
<img src="fascia_left.gif">
</div>
<div class="middle">
<div class="middleimg"><img src="fascia_top.gif"></div>
<div class="middleimg"><img src="empeg_screen.png"></div>
<div class="middleimg"><img src="fascia_bottom.gif"></div>
</div>
<div class="right">
<img src="fascia_right.gif">
</div>
|
|
Top
|
|
|
|
|
#297479 - 15/05/2007 16:19
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Thanks Mark. Better, but still not right in Firefox (swiftfox) 1.5.0.7 here: 
Edited by mlord (15/05/2007 16:43)
|
|
Top
|
|
|
|
|
#297480 - 15/05/2007 16:39
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Mmm... same result in Firefox-2.0.0.3 (Linux).
It is adding whitespace between the three middle images, as in the snapshot above.
My hacked up evolution of your stylesheet is attached.
???
Attachments
299199-default.xsl (717 downloads)
Edited by mlord (15/05/2007 16:41)
|
|
Top
|
|
|
|
|
#297481 - 15/05/2007 18:18
Re: Dumb Javascript Question
[Re: mlord]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Add the following to the stylesheet:
.mfront_col img { display: block; }
For some reason Firefox is not treating the images as a block element in the XSL but does in a test example.
|
|
Top
|
|
|
|
|
#297482 - 15/05/2007 18:32
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Quote:
Add the following to the stylesheet:
.mfront_col img { display: block; }
For some reason Firefox is not treating the images as a block element in the XSL but does in a test example.
Great! Yooo-Da-Mann!!
Thanks, Mark!
|
|
Top
|
|
|
|
|
#297483 - 15/05/2007 19:17
Re: Dumb Javascript Question
[Re: mlord]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Someone really should come up with a render of the fascia, the one we are using bugs me because it's so pixelated and the screen part is tinted blue. I'm sure this picture that Charcoalgrey99 used was a render at some point, I can't believe that was a photo - anyone know where the original, ORIGINAL fascia art came from?
|
|
Top
|
|
|
|
|
#297484 - 15/05/2007 19:20
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31597
Loc: Seattle, WA
|
It definitely was a render. It was the original render from the CAD files of the fascia during development of the Mark2. Rob V posted those renders somewhere in very high resolution at that time. The version used in the Charcoalgray99 template are a reduced-down version of those original high-rez pictures. If we could find them again, you could edit them to get rid of the blue tint and to not have the pixellation.
|
|
Top
|
|
|
|
|
#297485 - 15/05/2007 20:18
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Quote:
the one we are using bugs me because it's so pixelated and the screen part is tinted blue. I'm sure this picture that Charcoalgrey99 used was a render at some point, I can't believe that was a photo - anyone know where the original, ORIGINAL fascia art came from?
I'd be happy with just a better copy than the one I have here -- the bottom middle portion in particular was mismatched in size compared with the rest of the "set". I think I saved those from an early MSIE-only CG web interface.
Cheers
|
|
Top
|
|
|
|
|
#297486 - 15/05/2007 20:25
Re: Dumb Javascript Question
[Re: tfabris]
|
carpal tunnel
Registered: 25/12/2000
Posts: 16706
Loc: Raleigh, NC US
|
That post is here, and references http://www.empeg.com/preview, which doesn't exist in the Wayback machine. They may be lost to posterity. Edit: I totally take it back. The correct post is here, and the Wayback machine has it, including a big 1450x457 pixel render. Success!
Edited by wfaulk (15/05/2007 20:30)
_________________________
Bitt Faulk
|
|
Top
|
|
|
|
|
#297487 - 15/05/2007 20:49
Re: Dumb Javascript Question
[Re: wfaulk]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Nice, Bitt! I've got it saved now, if I have some time tonight I might try to weakly stab away (Gimp along?) at making a sliced-up version of this.
|
|
Top
|
|
|
|
|
#297488 - 15/05/2007 20:56
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14493
Loc: Canada
|
Quote:
Nice, Bitt! I've got it saved now, if I have some time tonight I might try to weakly stab away (Gimp along?) at making a sliced-up version of this.
A version sliced to fit a 2X/2X render of the front panel display would be very nice.
The front panel is 32H x 128W, so a render with an opening for 64x256 would be great!
Cheers
|
|
Top
|
|
|
|
|
|
Previous Topic
Index
