Welcome to the Cumulus Support forum.

Latest Cumulus MX release 3.9.0 (build 3095) - 09 October 2020 (please see announcement regarding releases since 3.5.0)
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 the NOAA report and Snow Index drop-down menus to 2030)

Use this Wiki link to Download the Software (Cumulus MX / Cumulus 1 and other related items).

Problem with the width of the Forecast and Countdown LCDs

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

Post Reply
gpercival
Posts: 22
Joined: Fri 11 Feb 2011 11:00 am
Weather Station: La Crosse 2355
Operating System: Windows XP
Location: Asquith, NSW, Australia

Problem with the width of the Forecast and Countdown LCDs

Post by gpercival »

I have just upgraded to version 2.2.2 from 2.0.1. After some fiddling I have everything working (i really like the new Wind Rose by the way).

My problem is that I can't control the width and height of the Forecast and Countdown LCDs in my webpage. This used to be done through the gauges.js file. I note in release 2.2.0, control was moved to the html template. I already had these parameters set in the template but it now makes no difference. I have tried changing the parameters but nothing changes.

This may be an HTML problem rather than a Steel Series problem but I have run out of options.

http://www.rhumbline.com.au/weather

Thanks in advance.

Geoff

gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: Problem with the width of the Forecast and Countdown LCD

Post by gemini06720 »

Geoff, looking at the source code of your page, I notice the following:

Code: Select all

<td ...>
  On-line Status:&nbsp; 
  <canvas id="canvas_led" width="25" height="25"></canvas>&nbsp;&nbsp;&nbsp; 
  <canvas id="canvas_status" width="50" height="25"></canvas>&nbsp;&nbsp; 
  Next update in:&nbsp;  
  <canvas id="canvas_timer" width="70" height="25"></canvas> 
</td>
You might want to give a bit more width to the 'canvas_status' than the 50 pixels you have assigned it - start with 300 pixels and move up until you are satisfied with the width of the forecast/status gauge.

gpercival
Posts: 22
Joined: Fri 11 Feb 2011 11:00 am
Weather Station: La Crosse 2355
Operating System: Windows XP
Location: Asquith, NSW, Australia

Re: Problem with the width of the Forecast and Countdown LCD

Post by gpercival »

You might want to give a bit more width to the 'canvas_status' than the 50 pixels you have assigned it - start with 300 pixels and move up until you are satisfied with the width of the forecast/status gauge.
Sorry Ray,

The 50 pixel is a hangover from my testing. I have set it back to 550 px and it makes not difference.

Geoff

gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: Problem with the width of the Forecast and Countdown LCD

Post by gemini06720 »

Geoff, I looked at both cascading style sheets (weatherstyle.css and gauges-ss.css) and did not find any properties that could/should affect that particular 'td' tag.

If you do not mind making some modifications to your 'gauges.js' script...

As I do not like using the standard HTML 'width/height' tags (I prefer using the CSS 'width/height' properties), I have added two lines to the 'canvas_status' code allowing for full flexibility into the selection of the width/height of the forecast/status gauge - here is my modified code:

Code: Select all

drawStatus = function () {
    // create forecast display
    if ($('#canvas_status').length) {
        _gaugeStatus = new steelseries.DisplaySingle(
            'canvas_status', {
            width             : $('#canvas_status').width(), //Set the gauge size according to the canvas CSS 'width:' in the HTML
            height            : $('#canvas_status').height(), //Set the gauge size according to the canvas CSS 'height:' in the HTML
            lcdColor          : gauge.lcdColour,
            unitStringVisible : false,
            value             : _statusStr,
            digitalFont       : config.digitalForecast,
            valuesNumeric     : false,
            autoScroll        : true,
            alwaysScroll      : true
        });
    }
},
It is probably worth a try ... that is until Mark wakes up and is able to offer you a better solution... ;)

gpercival
Posts: 22
Joined: Fri 11 Feb 2011 11:00 am
Weather Station: La Crosse 2355
Operating System: Windows XP
Location: Asquith, NSW, Australia

Re: Problem with the width of the Forecast and Countdown LCD

Post by gpercival »

Thanks Ray,

That has certainly fixed the problem but it will break the next time I upgrade.

We will see what Mark has to say.

Geoff

gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: Problem with the width of the Forecast and Countdown LCD

Post by gemini06720 »

Indeed, the modifications would prevent easy update to the next releases... :| ...but that might be the 'inconvenience' to live with to get the desired flexibility... :roll:

But I think those two lines should be part of all the gauges, including the 'led', 'status' and 'timer' to provide full flexibility, more so evident when one want to go/use the incredibly nice looking linear gauges instead of the 'more standard looking' radial gauges:

Code: Select all

params.width = Math.ceil($('#canvas_xxxxx').width() * config.gaugeScaling);
params.height = Math.ceil($('#canvas_xxxxx').height() * config.gaugeScaling);

User avatar
mcrossley
Posts: 7004
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Buster Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Problem with the width of the Forecast and Countdown LCD

Post by mcrossley »

It was version 2.2.0 that introduced the change from setting the size in the script to using the element size (set using width/height attributes or CSS is doesn't matter). The release notes also say the SteelSeries library was updated...
* Updated steelseries.js, steelseries.min.js, steelseries_tween.min.js
- Now up to SS v 0.13.0

You are still running version SS v 0.11.14. If you upgrade this library to the required version or later, then the sizing will work as expected.

gpercival
Posts: 22
Joined: Fri 11 Feb 2011 11:00 am
Weather Station: La Crosse 2355
Operating System: Windows XP
Location: Asquith, NSW, Australia

Re: Problem with the width of the Forecast and Countdown LCD

Post by gpercival »

Thanks Mark,

I will check that.

I am a little confused though. When I upgraded to v2.2.2 I replaced all the associated files. How did I miss the latest version of the library?

Geoff

User avatar
mcrossley
Posts: 7004
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Buster Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Problem with the width of the Forecast and Countdown LCD

Post by mcrossley »

I think it may be because your page is picking up scripts/steelseries.min.js

Later releases changed this to scripts/steelseries_tween.min.js

gpercival
Posts: 22
Joined: Fri 11 Feb 2011 11:00 am
Weather Station: La Crosse 2355
Operating System: Windows XP
Location: Asquith, NSW, Australia

Re: Problem with the width of the Forecast and Countdown LCD

Post by gpercival »

Fixed and upgradable.

Thanks for the help.

Geoff
http://www.rhumbline.com.au/weather

Post Reply