Topic: Steel Series Gauges and Meteohub

[sjforster]

Hi All,

First post and I think this possibly spans between the Meteohub / PHP/AJAX scripting sections of the forum so firstly apologies if it's in the wrong section.  I'm trying to setup the steel series gauges on my weather website using the  Saratoga Templates and a Raspberry Pi running meteohub.  I'm 99% complete but can't find the solution to the last problem and hoping somebody has the answer, I'm pretty sure it's straight forward as searching through the forum dosen't seem to flag up similar issues, so I'm pretty sure I've missed something.

I've got the gauges working following the meteobridge setup on saratoga-weather.org but editing the gauges.js script to create settings for the meteohub rather than the meteobridge so that it uploads the data in a file called MHrealtime.txt and allows the gauges to display graphs produced by the meteohub.

Changes I've made to gauges.js are:

Code: [Select]

            weatherProgram     : 7,                      //Set 0=Cumulus, 1=Weather Display, 2=VWS, 3=WeatherCat, 4=Meteobridge, 5=WView, 6=WeeWX, 7=Meteohub

Code: [Select]

realTimeUrlMH      : 'MHrealtimegauges.txt',   //*** Meteohub Users: Change to the location of the JSON file

Code: [Select]

programLink = ['<a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a>',
                       '<a href="http://www.weather-display.com/" target="_blank">Weather Display</a>',
                       '<a href="http://www.ambientweather.com/virtualstation.html" target="_blank">Virtual Weather Station</a>',
                       '<a href="http://trixology.com/weathercat/" target="_blank">WeatherCat</a>',
                       '<a href="http://www.meteobridge.com/" target="_blank">Meteobridge</a>',
                       '<a href="http://www.wviewweather.com/" target="_blank">Wview</a>',
                       '<a href="http://www.weewx.com/" target="_blank">weewx</a>',
       '<a href="http://wiki.meteohub.de//" target="_blank">Meteohub</a>'],

Code: [Select]

case 7:
                // Meteohub
                realtimeVer = 10;   //minimum version of the realtime JSON file required
                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlMH;
                config.showPopupGraphs = true;        // config.tipImgs - no Meteobridge images available
                config.showRoseGauge = false;          // no windrose data from MB
                config.showCloudGauge = true;
                config.tipImgs = [                                      // config.tipImgs for Weather Display users with wxgraph
    ['dayinouttemp.png', 'dayinouttemp.png'],           // Temperature: outdoor, indoor
                    // Temperature: dewpnt, apparent, windChill, HeatIndx, humidex
                    ['dayouttemphum.png', 'dayouttemphum.png', 'dayouttemphum.png', 'dayouttemphum.png', 'dayouttemphum.png'],
                    'dayrain.png',                                      // Rainfall
                    'dayrainrate.png',                                  // Rainfall rate
                    ['dayinouthum.png', 'dayinouthum.png'],             // Humidity: outdoor, indoor
                    'daybarometer.png',                                 // Pressure
                    'daywind.png',                                      // Wind speed
                    'daywinddir.png',                                   // Wind direction
                    (config.showUvGauge ? 'dayuv.png' : null),          // UV graph if UV sensor is present | =null if no UV sensor
                    (config.showSolarGauge ? 'dayradiation.png' : null), // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
                    (config.showRoseGauge ? 'daywindvec.png' : null),    // Wind direction if Rose is enabled | =null if Rose is disabled
                    (config.showCloudGauge ? null : null)  // Pressure for cloud height | =null if Cloud Height is disabled
                   ];
                config.showWindVariation = false;      // no wind variation data from MB
                break;
This part all works great however the issue I've got is the pop graphs that include the time stamps for the max/min weather events all display the same format as the data in the uploaded data i.e. YYYYmmddhhmmss e.g. 20170415001300 rather than a human readable format of dd-mm-yy hh:mm or similar.

I've tried changing the format within the uploaded data using information from the meteobridge site but that doesn't seem to apply to the meteohub e.g. ([Data_Field_time=apm.gh]-[Data_Field_time=apm.ef]-[Data_Field_time=apm.abcd]etc) as well as trying changing formats withing the settings of the saratoga templates etc without any success.

I've also attached the data that's uploaded to the website to display on the gauges.

Any thoughts / advice would be greatly appreciated.

Regards

Simon

[Jáchym]

Hi Simon,

welcome to the forum.

Looking at the gauges.js, it takes the string directly from the realtime file. Since you cannot control this on Meteohub side it would have to be parsed inside the gauges.js separately for each gauge.

One solution I can think of is simply parsing it as a string, spliting it using substrings and then creating the corresponding date.

For example, the tooltip for the temp gauge (sorry cant tell you which line number because Im looking at the gauges.js from my template which I modified a lot, so it wont match yours):

Code: [Select]

tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TtempTL +
                                 ' | ' +
                                 strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TtempTH;

So here you can see, it is using the "data.TtempTL".

"data" is the variable with all your realtime parameters.

One option would be rewriting the value of data.TtempTL before it is inserted into the tooltip string.

So above that you would have to split the data.TtempTL string using the JavaScript substring command, then rearrange the numbers and insert dashes/slashes and then save it as for example TtempTLFormatted and replace it in the tip string.

Then of course you would have to do the same thing for all the other gauges.

Somebody might come up with a different solution, this is just one I came up with looking at the code if the change cannot be made in the realtime file itself.

[saratogaWX]

Since Meteohub can produce Weather-Display clientraw.txt file, you may be able to use the stock script by specifying you're using 'Weather-Display' and change the location to where the clientraw.txt is uploaded.

[sjforster]

Jáchym,

Thanks for the quick reply, I was hoping it was something I was doing incorrectly but I'll give the substring parsing a try to see if I can split them as needed, looking at other's peoples gauge pages it tends to just be hours and minutes thats displayed so hopefully it's not too difficult to change the string for the gauges on the page.

Thanks,

Simon

[sjforster]

saratogaWX,

Thanks for the prompt reply. I'll also give the clientraw option a go to see if that works.

Thanks,

Simon

[Jáchym]

Something like this should work:

Code: [Select]

TLowTime = data.TtempTL;
TLowTimeH = TLowTime.substr(8,2);
TLowTimeMin = TLowTime.substr(10,2);
TLowTimeFormatted = TLowTimeH + ":" + TLowTimeMin;

tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + TLowTimeFormatted +
                                 ' | ' +
                                 strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TtempTH;

[Jáchym]

If all the dates are the same format you can even make it easier and create a function for it

Like this:

Code: [Select]

function parseExtremetime(string){
     extremeH = string.substr(8,2);
     extremeMin = string.substr(10,2);
     return extremeH + ":" + extremeMin;
}
and then for each of the times just pass it through the function

Code: [Select]

tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + parseExtremetime(data.TtempTL) +
                                 ' | ' +
                                 strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + parseExtremetime(data.TtempTH);

[sjforster]

Jáchym,

The function routes seems the way to go as all the date formats are the same.

I've tried the initial code but thats resulted in only 1 gauge at a time displaying a value and having to select a radio button for the next one to display a value + no tool tip text was displayed with the graph but I'll work on it.

Thanks for your input.

[sjforster]

saratogaWX,

The metehub is set up to produce the clientraw.txt file by default but the gauges.js is expecting customclientraw.txt which must be different from the clientraw.txt file which gives the following error in the gauges display:

"parsererror: SyntaxError: Unexpected number in JSON at position 6"

I'll see if i can get the meteohub to replicate the format of the customclientraw.txt file.

Regards,

Simon

[sjforster]

Jáchym / saratogaWX

Having slept on it overnight and re-reading about the special control characters on page 72 of the metehub-v4.7en user manual I've decided to alter the data in the file rather than altering the code in gauges.js.

Using the '#' control character to split the hours and minutes out of the string:

String Format: YYYYmmddhhmmss
Position:          ABCDEFGHIJKLMN

#IJ:#KL to give hh:mm

So for the TtempTL time string I've changed

Code: [Select]

"TtempTL":"[day1_th0_tempmin_time]"
to

Code: [Select]

"TtempTL":"[day1_th0_tempmin_time#IJ]:[day1_th0_tempmin_time#KL]"
and repeated for the 11 other time strings and it's succesfully displaying the time.

Thanks for your assistance.

Regards,

Simon