Author Topic: 'Jumping' Graphics  (Read 3074 times)

0 Members and 1 Guest are viewing this topic.

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
'Jumping' Graphics
« on: June 22, 2010, 01:17:41 PM »
I have an annoyance with the web site. The Cloud height graphic frequently, along with (sometimes) the windrose graphic, 'jumps' when it reloads. I've noticed this behaviour on some other sites and yet not on other sites. It doesn't happen every single time but often enough to be a real annoyance.
Does anyone know a) why this is happening and b) how to prevent it?
http://www.sanctuaryweather.co.nz

Very many thanks for any forthcoming help with this.
« Last Edit: June 22, 2010, 01:22:00 PM by Dal »
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline BigOkie

  • Forecaster
  • *****
  • Posts: 1063
  • Tulsa, OK
    • KOKTULSA13
Re: 'Jumping' Graphics
« Reply #1 on: June 22, 2010, 01:42:32 PM »
I have an annoyance with the web site. The Cloud height graphic frequently, along with (sometimes) the windrose graphic, 'jumps' when it reloads. I've noticed this behaviour on some other sites and yet not on other sites. It doesn't happen every single time but often enough to be a real annoyance.
Does anyone know a) why this is happening and b) how to prevent it?
http://www.sanctuaryweather.co.nz

Very many thanks for any forthcoming help with this.

Likely, it "jumps" due to the real-time nature of updates being used by the ajax templates.  These are typically sites using the Saratoga php ajax templates and have the ability to update as often as every 3 seconds.


Current setup: Davis Vantage Pro 2 Plus Wireless
Weather radios:
Reecom R-1650
Sangean CL-100

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #2 on: June 22, 2010, 11:31:20 PM »
Likely, it "jumps" due to the real-time nature of updates being used by the ajax templates.  These are typically sites using the Saratoga php ajax templates and have the ability to update as often as every 3 seconds.

That was my original thought and that sent me looking at other sites which use the Saratoga-based templates. Approximately 50% of them have the same problem, while the other 50% don't.
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Online 4wd

  • Forecaster
  • *****
  • Posts: 365
    • North York Moors weather
Re: 'Jumping' Graphics
« Reply #3 on: June 23, 2010, 05:09:39 AM »
I'm not seeing it here, it's probably related to how quickly the server or your own connection can deliver the image files.
It would be made worse by adjusting the image sizes by using html to make them fit a page layout.
Haven't checked but assume your template does not do this.

When I see a live weather page flicker and jump I just assume it's updating to the latest data so 'a good thing' - so long as it doesn't hang while loading.

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #4 on: June 23, 2010, 12:21:20 PM »
I'm not seeing it here, it's probably related to how quickly the server or your own connection can deliver the image files.

Well, that was my other thought..... that it's the server delivery causing it. That could explain why some sites have the proble (if it can be called that) and yet others don't. And no, I'm not using html to resize.
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 4465
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: 'Jumping' Graphics
« Reply #5 on: June 23, 2010, 02:19:33 PM »
The 'jumping' can be caused by JavaScript (AJAX updates) replacing an image without a 'placeholder' to keep the height of the image stable in the browser.  In the dashboard (for example) there's a 1px x 58px high invisible gif (spacer.gif) to prevent collapse of the page while the image is being updated by the JavaScript.  It would be helpful to cite websites that show the jumping issue and ones that don't (by URL) .. then further investigation of the cause is possible :)
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis Vantage Pro Plus - FARS, Boltek-PCI/NexStorm, GRLevel3, WD, WL, VWS, Cumulus, Meteohub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #6 on: June 23, 2010, 11:27:57 PM »
  It would be helpful to cite websites that show the jumping issue and ones that don't (by URL) .. then further investigation of the cause is possible :)

Apart from my own of course, here's one that does: http://www.tokoroaweatherlive.net/
Here's one that doesn't: http://www.hebwx.co.uk/

Occasionally one needs to wait to see it happen as it doesn't happen on every single reload. Sometimes, for example, you can wait a couple of minutes before it hapens, other times it'll happen a number of times in a row straight off.
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 4465
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: 'Jumping' Graphics
« Reply #7 on: June 24, 2010, 12:43:55 AM »
Using http://validator.w3.org/ on your site shows 55 HTML errors, so some of the behavior you're seeing may be due to the browser trying to do the formatting with some issues in the underlying HTML.

www.tokoroaweatherlive.net has no HTML errors cited (but you say still shows the jumping).

www.hebwx.co.uk has 17 HTML errors cited, but doesn't show the jumping.

All three sites use the alternate ajax-dashboard (which besides the basic template) seems the only commonality.

Scott's http://www.websterweatherlive.com/ site also as the alt dashboard, validates fine, and seems to have no jumping problem.

Somehow, on the sites that 'jump', the browser seems to think it has to recalculate the margins/paddings/positions of the elements due to the JavaScript update of the HTML (which should be the same HTML, just different text content).

I'd suggest first fixing the HTML errors so the page validates ok, see if the problem remains, then we can explore deeper...

Best regards,
Ken

Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis Vantage Pro Plus - FARS, Boltek-PCI/NexStorm, GRLevel3, WD, WL, VWS, Cumulus, Meteohub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #8 on: June 24, 2010, 03:13:11 AM »

I'd suggest first fixing the HTML errors so the page validates ok, see if the problem remains, then we can explore deeper...

When I first decided to try to get to the bottom of it, I threw up a test site (no longer there now), using just the basic Ajax PHP pages downloaded from your site, Ken. I made no changes whatsoever to it. The default windrose graphic was still jumping.
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline Weather Display

  • Forecaster
  • *****
  • Posts: 2611
    • West Coast Road Weather Data
Re: 'Jumping' Graphics
« Reply #9 on: June 24, 2010, 03:18:36 AM »
I must say I do like this web site
http://www.tokoroaweatherlive.net/index.php
especially the wind direction graphic
well done to that person /persions behind that :)

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 4465
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: 'Jumping' Graphics
« Reply #10 on: June 24, 2010, 11:35:04 AM »

I'd suggest first fixing the HTML errors so the page validates ok, see if the problem remains, then we can explore deeper...

When I first decided to try to get to the bottom of it, I threw up a test site (no longer there now), using just the basic Ajax PHP pages downloaded from your site, Ken. I made no changes whatsoever to it. The default windrose graphic was still jumping.

That's odd.. I see no 'jumping' with the default template site(s) using FF 3.6.4 .. which browser are you using?

Best regards.
Lem
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis Vantage Pro Plus - FARS, Boltek-PCI/NexStorm, GRLevel3, WD, WL, VWS, Cumulus, Meteohub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #11 on: June 24, 2010, 12:21:59 PM »
Same browser: FF 3.6.4 With the default site, the 'jumping' is far less noticeable but is still there. Once the Webster dashboard is added with the cloud height graphic, it becomes far more noticeable. If I get a chance today, I'll throw up the test site again.
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline DaculaWeather

  • It's a Jeep thing... you wouldn't understand.
  • WxElement panel
  • Forecaster
  • *****
  • Posts: 2960
  • SCCA EM #156
    • Dacula and Gwinnett County Georgia USA Weather
Re: 'Jumping' Graphics
« Reply #12 on: June 24, 2010, 12:33:32 PM »
I must say I do like this web site
http://www.tokoroaweatherlive.net/index.php
especially the wind direction graphic
well done to that person /persions behind that :)
I noticed the wind rose graphic jumps on that one too. I went back and looked at mine and it doesn't jump at all.
Steve
Davis Vue, VWS, WDisplay, VVP, StartWatch CWOP 


Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #13 on: June 24, 2010, 02:00:56 PM »
I noticed the wind rose graphic jumps on that one too.

Yep. So it doesn't appear to be caused by html errors because Ken says there aren't any on that site, or at least that particular page. In fact, I've just validated http://www.tokoroaweatherlive.net/index.php myself and it has definitely passed. So html errors aren't causing it.
« Last Edit: June 24, 2010, 02:09:09 PM by Dal »
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #14 on: June 24, 2010, 02:05:57 PM »
Ok, I've thrown up the basic site at http://test.sanctuaryweather.co.nz. Apart from the thermometer graphic, it's completely original. I've tested it with http://validator.w3.org/ and it's passed. Yet the wind graphic definitely shows jumping.
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline DaculaWeather

  • It's a Jeep thing... you wouldn't understand.
  • WxElement panel
  • Forecaster
  • *****
  • Posts: 2960
  • SCCA EM #156
    • Dacula and Gwinnett County Georgia USA Weather
Re: 'Jumping' Graphics
« Reply #15 on: June 24, 2010, 02:12:14 PM »
Go to www.pingdom.com and click on "Tools" on the top navigation bar. Run the load test and see what kind of numbers you get back.
Steve
Davis Vue, VWS, WDisplay, VVP, StartWatch CWOP 


Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #16 on: June 24, 2010, 04:03:40 PM »
Go to www.pingdom.com and click on "Tools" on the top navigation bar. Run the load test and see what kind of numbers you get back.

For the main site: Total loading time = 8.9 seconds
Test site = 4.7 seconds
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 4465
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: 'Jumping' Graphics
« Reply #17 on: June 24, 2010, 04:49:08 PM »
Ok, I've thrown up the basic site at http://test.sanctuaryweather.co.nz. Apart from the thermometer graphic, it's completely original. I've tested it with http://validator.w3.org/ and it's passed. Yet the wind graphic definitely shows jumping.
Hmmm... I don't see what I'd term as 'jumping' (i.e. moving up the page/tables compressing), but I do see the flash as the graphic refreshes in place (both conditions icon and wind-rose until they are loaded into the browser cache).  Is the latter the 'jumping' to which you are referring?

Best regards,
Ken
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis Vantage Pro Plus - FARS, Boltek-PCI/NexStorm, GRLevel3, WD, WL, VWS, Cumulus, Meteohub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #18 on: June 24, 2010, 04:57:03 PM »

Hmmm... I don't see what I'd term as 'jumping' (i.e. moving up the page/tables compressing), but I do see the flash as the graphic refreshes in place (both conditions icon and wind-rose until they are loaded into the browser cache).  Is the latter the 'jumping' to which you are referring?

Best regards,
Ken

'Jumping' is my term for it. There's a definite time period, when the graphic is reloading, that shows a blank space before the graphic becomes present again. This is apparent on only some sites, while on others the transition appears seamless. e.g. Martin's site at http://www.hebwx.co.uk doesn't seem to exhibit that characteristic at all (at least not that I've seen), likewise with a number of other sites I've looked at. Yet with some other sites it's quite pronounced.
In some ways it's no big deal, apart from being a slight annoyance. Just bothers me a bit is all :)
« Last Edit: June 24, 2010, 05:00:32 PM by Dal »
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 4465
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: 'Jumping' Graphics
« Reply #19 on: June 24, 2010, 06:01:27 PM »
Ahhh... it's a 'refresh flash' (blank graphic space before graphic reloads) that's the problem.

It may be caused by
Code: [Select]
<meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
in top.php which is used to ensure that content is always 'fresh'.  Some browsers will refuse to update (even if the image changes) without having that directive.  The time-lag for the refresh certainly depends on the website-to-browser response time for the graphic reload to take place.  The AJAX script has a built-in check in the set_ajax_obs() function to NOT change the HTML (not reload a graphic) if no change is made since the last time (stored in the <span> tag pseudo-attribute of lastobs="" .. you can see them in FF WebDeveloper by doing a 'Show Generated Source' request).

I see that the cloud height graphic seems to refresh each time with the alt-ajax-dashboard config .. not sure why that is.  If the height and condition hasn't changed, it should remain the same ?!?
Ahhh.. the cloud graphic includes a buster=..... who's value changes each time, so a fresh graphic is computed, and a new image is fetched.

Best regards,
Ken

Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis Vantage Pro Plus - FARS, Boltek-PCI/NexStorm, GRLevel3, WD, WL, VWS, Cumulus, Meteohub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #20 on: June 24, 2010, 06:20:24 PM »
That would explain that, then :) So.... not anything that can be done about it, Ken?
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 4465
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: 'Jumping' Graphics
« Reply #21 on: June 25, 2010, 01:27:45 AM »
To get the cloud height graphic to refresh less frequently is possible, but may sacrifice what it's presenting (current conditions+cloud height+wind speed) if refreshed less frequently.

I'll take a look at the code and see what might be done to refresh less and still preserve the fidelity of what the image presents.

Best regards,
Ken
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis Vantage Pro Plus - FARS, Boltek-PCI/NexStorm, GRLevel3, WD, WL, VWS, Cumulus, Meteohub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Cienega32

  • Forecaster
  • *****
  • Posts: 2573
    • East Mesa Weather
Re: 'Jumping' Graphics
« Reply #22 on: June 25, 2010, 04:13:45 AM »
I must say I do like this web site
http://www.tokoroaweatherlive.net/index.php
especially the wind direction graphic
well done to that person /persions behind that :)

Are you talking about the "current" Wind Rose (a nice TNET Weather creation) or the "24 hr Trend" graphic?

The Trend graphic is very cool! Nice & clean.

Pat ~ Davis VP2 6153-Weatherlink-Weather Display-StartWatch-VirtualVP-Win7 Pro-64bit
www.LasCruces-Weather.com   www.EastMesaWeather.com

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 4465
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: 'Jumping' Graphics
« Reply #23 on: June 25, 2010, 03:51:06 PM »
That would explain that, then :) So.... not anything that can be done about it, Ken?

Well, I've taken a look and experimented with Ranier's great cloud-height.php script and regarding the 'jumping' as it refreshes most every time, there's not much that can be done except to remove the <span class="ajax" id="ajaxcloudheightimg">...</span> from around the invocation of the script (in other words, don't AJAX refresh it).
The AJAX and the image use wind direction/speed to determine if a new image is needed, so in variable winds, you can get a refresh each time the AJAX kicks in.  So...
Just use the dashboard to load a static image (created at the time the page is reloaded by the browser), and your display won't 'jump'.  The downside (of course) is that unless you force a reload of the page every 5 minutes or so, the image can become 'out of sync' with the current conditions -- I think this is a small price to pay for getting a stable display :)

BTW, the wind-rose doesn't normally 'jump' because it is a set of 16 static images that the browser can cache, and the thermometer only updates when  there is a 1 degree change to the current (or high/low).

Hope this helps...
Best regards,
Ken
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis Vantage Pro Plus - FARS, Boltek-PCI/NexStorm, GRLevel3, WD, WL, VWS, Cumulus, Meteohub
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Dal

  • Senior Member
  • **
  • Posts: 82
  • Climbing the cliffs of Moher in my sleep
    • The Sanctuary Weather Station
Re: 'Jumping' Graphics
« Reply #24 on: June 25, 2010, 03:59:26 PM »
I use a METAR for the cloud height and that updates only every hour, or thereabouts. Perhaps forcing a page refresh of maybe 15 - 30 minutes would suffice? The windrose and the thermometer should be unaffected.
Gun tigeadh Solas nan Solas
dha mí dhridhe doilleir o tíaite.
Gun tigeadh ais an Spioraid Air mo chridhe