Steelseries Gauges for WD

Sorry John, I’ll try harder! :lol:

A question about the trend images, Mark.

I see this in gauges.js:


var g_tempTrendVisible = true;
var g_pressureTrendVisible = true;
// the trend images to be used for the popup data, used in conjuction with g_g_imgPathURL
// by default this is configured for the Cumulus 'standard' web site

I’m not sure what this means, or how/where to configure trend images in WD. Is it looking for .png’s? What are their paths/names?

The arrows on my temp and pressure gauges aren’t working correctly for some reason: http://www.gwwilkins.org/gauges-ss.php.

Thanks!

It’s a bit confusing I agree.
The g_tempTrendVisibile/g_pressureTrendVisible control the trend ‘indicators’ (rising/steady/falling) indicators of the respective gauges.

The trend ‘images’ (maybe I should change the terminology to trend graphs) are images of graphs used in the pop-ups (any web format will do).

Correct.

Edit: Sorry, not that is not correct. The customclientrawlocal.txt should be in your webfiles directory.

-Keith

On more careful examination, the trend arrows are working correctly. Apparently it’s my eyes that aren’t! :oops:

I am having problems with getting the graphs to work. I have setup wxgraphs and its working correctly but still unable to get them to show up. Any ideas or suggestions?

http://www.kb5bfa.com/gauges
http://www.kb5bfa.com/wxgraphs/wxgraphs_test.html

Thanks to everyone who has assisted in getting all this to work and for the gauges, they are very nice.

Couple of things, on your main page change this…

<script src="scripts/ddimgtooltip.min.js"></script>

to this

<script src="scripts/ddimgtooltip.js"></script>

Then in ddimgtooltip.js try this…

var ddimgtooltip={
  tiparray:function(){
    var tooltips=[];
    tooltips[0]=[imgPathURL + "temp+hum_24hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[1]=[imgPathURL + "temp+dew+hum_1hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[2]=[imgPathURL + "rain_24hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[3]=[imgPathURL + "rain_1hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[4]=[imgPathURL + "humidity_1hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[5]=[imgPathURL + "baro_24hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[6]=[imgPathURL + "windgust_1hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[7]=[imgPathURL + "winddir_1hr.php", " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[8]=[null, " ", {background:"#0000CD", color:"white", border:"9px ridge darkblue"}];
    tooltips[9]=[null, " ", {background:"#FFFFFF", color:"black", border:"2px ridge darkblue"}];
    return tooltips; //do not remove/change this line
  }(),

You can change the background colors to match your theme if you wish.

Jack

You can try http://www.westerncawx.net/ftp

How can you run server-side code (php) on the client side(javascript)? The above code doesn’t work for me because it calls php code from within javascript. I see that you have solved this problem somehow on your site, but the method isn’t clear to me. Any hints?

From v1.6.3 you no longer have/need to edit ddimgtooltip.js - it picks up whatever you place in the g_imgPathURL and g_tipImgs array variables in gauges.js

The relevant bit of ddimgtooltips.js now looks like this:

tooltips[0]=[(g_tipImgs[0][0] !== null ? g_imgPathURL + g_tipImgs[0][0] : null), " ", style];
tooltips[1]=[(g_tipImgs[1][0] !== null ? g_imgPathURL + g_tipImgs[1][0] : null), " ", style];
tooltips[2]=[(g_tipImgs[2] !== null ? g_imgPathURL + g_tipImgs[2] : null), " ", style];
tooltips[3]=[(g_tipImgs[3] !== null ? g_imgPathURL + g_tipImgs[3] : null), " ", style];
tooltips[4]=[(g_tipImgs[4][0] !== null ? g_imgPathURL + g_tipImgs[4][0] : null), " ", style];
tooltips[5]=[(g_tipImgs[5] !== null ? g_imgPathURL + g_tipImgs[5] : null), " ", style];
tooltips[6]=[(g_tipImgs[6] !== null ? g_imgPathURL + g_tipImgs[6] : null), " ", style];
tooltips[7]=[(g_tipImgs[7] !== null ? g_imgPathURL + g_tipImgs[7] : null), " ", style];
tooltips[8]=[(g_tipImgs[8] !== null ? g_imgPathURL + g_tipImgs[8] : null), " ", style];
tooltips[9]=[(g_tipImgs[9] !== null ? g_imgPathURL + g_tipImgs[9] : null), " ", style];

The only reason to edit ddimgtooltip.js now is if you want to change the popup ‘style’ - or add more gauges :wink:
/Mark

Thanks, Mark! Success with gauges-ss_v1-6-3 by restoring the distribution ddimgtooltip.js and modifying gauges.js to use this path to the graphs:


var g_imgPathURL              = "../wxgraphs/";

,
and to use this image array:


var g_tipImgs = [["temp+hum_24hr.php", "indoor_temp_24hr.php"],       		// Temperature: outdoor, indoor
                 ["temp+dew+hum_1hr.php","temp+dew+hum_1hr.php","temp+dew+hum_1hr.php","temp+dew+hum_1hr.php","temp+dew+hum_1hr.php"],  // Temperature: dewpnt, apparent, windChill, HeatIndx, humidex
                 "rain_24hr.php",                                       // Rainfall
                 "rain_1hr.php",                                        // Rainfall rate
                 ["humidity_1hr.php", "humidity_1hr.php"],            // Humidity: outdoor, indoor
                 "baro_24hr.php",                                       // Pressure
                 "windgust_1hr.php",                                    // Wind speed
                 "winddir_1hr.php",                                     // Wind direction
                 "uv_24hr.php",                                         // UV
                 "solar_24hr.php"                                       // Solar rad
                ];

I appreciate very much your hard work and especially your patience. You can lead a horse to water (me), but you can’t make him drink (i.e. see what’s right in front of his nose.) This is the page now: http://www.gwwilkins.org/gauges-ss.php. :greenjumpers: :signthanks:

Glad you got it going Jerry.

Your page looks good, but I’ve spotted one error in my code - you are leaving the units in the ccr file, and the whilst the script should handle this, I miss handle the data a bit in the Wind Direction gauge, so it fails to display the variation in direction on your gauge - I’ll get that fixed.

Edit: Maybe you could test the fix for me?

gauges.js, line 1448, change:

if (+data.wspeed.replace(',', '.') > 0) {

to:

if (windSpd > 0) {

Actually I do not think the wind variation tags in WD are still working correctly. I just patched Jerry’s page in the debugger and watched his Wind Dir gauge.

The tags were reading 242-305, then the current value within that range.

Then there was a current reading on 330, the range tags changed to 242-330 (correct).

The next reading was 275, the range tags went back to 242-305 (wrong?) I would have expected them to reflect this new larger variation in direction and continue to read 242-330.

This sort of pattern carried on repeating, when the current value went above or below the 242-305 range.

In fact the tags seem stubbornly ‘stuck’ on 242-305.

One for Brian I think.

You’re correct, Mark. The changes don’t ‘take’ even with the modified code you suggested. For now, I’ll revert to the prior code in order to avoid a misleading gauge. I also changed the graph to winddir_24hr.php which will provide additional information once Brian fixes the tags.

Thanks!

the range tag works on average wind direction
also make sure to be using the latest version of WD (does not mention which version is being used)

Ah, thanks for clarifying that Brian.

Thanks, Brian. I think that explains it, and Mark has already confirmed it. I’m using the latest version of WD, V10.37Rb16. BTW, would you recommend using

%avdirlastimediate10%.......Average dir wind for the last immediate 10 minute period

vs.

%avdir10minute% ............average ten minute wind direction (degrees)

for the tag in customclientrawlocal.txt? Would the veer directions


%mindir10minute%............Max veer left wind direction, last 10 minute (based on 10 minute average speed)
%maxdir10minute%............Max veer right wind direction, last 10 minute (based on 10 minute average speed)

be something to look at here, or do I not understand those tags?

Thanks again for all your hard work.

Using ‘%avdirlastimediate10%…Average dir wind for the last immediate 10 minute period’ seems to have changed the range tags to much more reasonable values on my site.

I’ll see how it works out.

Thank you, thank you. I just copied and pasted your code into my page and the graphs worked.

Bill

Glad to hear it, Bill. The credit really belongs to Mark. :slight_smile: