Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Re 2.5.4 Q's

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

Post Reply
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re 2.5.4 Q's

Post by BCJKiwi »

Sorry - a newbie at the SSGauges - just need some help understanding some 'quirks?"
When using a stripped down version of the gauges page i.e. an 'include' file comprising only two gauges

Code: Select all

<div class="row">
    <div id="tip_7" class="gauge">
      <canvas id="canvas_dir" class="gaugeSizeSml"></canvas>
    </div>
    <div id="tip_10" class="gauge">
      <canvas id="canvas_rose" class="gaugeSizeSml"></canvas>
    </div>
  </div>
I find;
1. The windrose will not display data if
showPopupGraphs : true, but will if set to false.
2. The text popup degree symbol shows an accented A plus the degree symbol instead of just the degree symbol. On the regular gauges page this displays normally.
3. Sparkline graphs ( <script type="text/javascript" src="./jquery.sparkline.min.js"></script> ) won't load data to display the sparkline graphs in earlier part of the page.


showWindVariation : true, adds 'METAR' to the tool tips. it does not appear to "//Show variation in wind direction over the last 10 minutes on the direction gauge" as per the gauges.js script note - what am I not understanding? However it does seem to turn on/off the METAR in the tooltip. However this does not seem to relate to local conditions at all, neither in time or values. How is it derived?
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: Re 2.5.4 Q's

Post by water01 »

I believe 2 is caused by NOT saving the code as UTF-8 without BOM and/or not having UTF-8 in the header.
David
Image
User avatar
mcrossley
Posts: 12695
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Re 2.5.4 Q's

Post by mcrossley »

Can you provide a link to a test page please?
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Re 2.5.4 Q's

Post by BCJKiwi »

Yes, you can load the test page here (not on the menu) http://silveracorn.co.nz/weather/wxmxtrends.php

Have simply edited the standard (for me) XHTML-1 Saratoga trends page.
It is now a single page (no includes for the gauges).
I have placed the references to the style sheet and scripts into the head section and just placed;

Code: Select all

   <div class="row">
      <div id="tip_7" class="gauge">
         <canvas id="canvas_dir" class="gaugeSizeSml"></canvas>
      </div>
      <div id="tip_10" class="gauge">
      <canvas id="canvas_rose" class="gaugeSizeSml"></canvas>
      </div>
   </div>
inside a <td> .. </td> at the right place on the page.

This works and validates but does not show the proper degree symbol. It also calls gauges-trends.js which is a copy of gauges.js with these settings;

Code: Select all

showPopupData     : true,                   //Pop-up data displayed
            showPopupGraphs   : false,                   //If pop-up data is displayed, show the graphs?
            mobileShowGraphs  : false,                  //If false, on a mobile/narrow display, always disable the graphs
            showWindVariation : false,                   //Show variation in wind direction over the last 10 minutes on the direction gauge
            showIndoorTempHum : false,                   //Show the indoor temperature/humidity options
            showCloudGauge    : false,                   //Display the Cloud Base gauge
            showUvGauge       : false,                   //Display the UV Index gauge
            showSolarGauge    : false,                   //Display the Solar gauge
            showSunshineLed   : false,                   //Show 'sun shining now' LED on solar gauge
            showRoseGauge     : true,                   //Show the optional Wind Rose gauge
            showRoseGaugeOdo  : true,                   //Show the optional Wind Rose gauge wind run Odometer
            showRoseOnDirGauge: false,                   //Show the rose data as sectors on the direction gauge
            showGaugeShadow   : true,                   //Show a drop shadow outside the gauges
For you to see the METAR I have turned back on showWindVariation
If I add the standard Saratoga UTF-8 line "$useUTF8= true;" inside <head, the degree symbol displays correctly but 6 validation errors arise beginning with lines in the standard Saratoga include scripts, not in this script.
The page is a long way from being HTML5 so that line is not implemented.
Using <meta charset="UTF-8"> instead is ineffective - i.e. does not change to UTF-8.
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Re 2.5.4 Q's

Post by BCJKiwi »

OK,
Sorted the validation errors:- Added the Saratoga HTML5 switch and converted the offending obsolete syntax to HTML5 using inline css styles where validation errors were flagged.

So now UTF8 and HTML5, degree symbol good, validation good.
This version now at the link posted above.
User avatar
mcrossley
Posts: 12695
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Re 2.5.4 Q's

Post by mcrossley »

So you are all sorted now?
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Re 2.5.4 Q's

Post by BCJKiwi »

Not really, still some unanswered questions;
1. The windrose will not display data if
showPopupGraphs : true,
but will if set to false.
2. The text popup degree symbol shows an accented A plus the degree symbol instead of just the degree symbol. On the regular gauges page this displays normally. Fixed by implementation of Saratoga HTML5 and UTF-8 switches (and converting script to HTML5)
3. Sparkline graphs ( <script type="text/javascript" src="./jquery.sparkline.min.js"></script> ) won't load data to display the sparkline graphs in earlier part of the page - sparkline code now removed.
4. showWindVariation : true, adds 'METAR' to the tool tips. It does not appear to "//Show variation in wind direction over the last 10 minutes on the direction gauge" as per the gauges.js script note - what am I not understanding?
4a. However it does seem to turn on/off the METAR in the tooltip. However the 'METAR' does not seem to relate to local conditions at all, neither in time or values. How is it derived?
User avatar
mcrossley
Posts: 12695
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Re 2.5.4 Q's

Post by mcrossley »

1. I see the problem, I'll fix it in the next release. Meanwhile, your line 3012, change to...

Code: Select all

                if (gaugeDew) {
                    $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][gaugeDew.data.popupImg] + cacheDefeat);
                }
3. Not a gauges issue.
4. Working OK for me, I see the variation indicator on your gauge - not very obvious as you have changed the background colour, but it is there.
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Re 2.5.4 Q's

Post by BCJKiwi »

OK,
Line 3012 fixes the graphs issue, Thanks - I've ditched the "special" version gauges-trends.js.
Post Reply