SteelSeries FAQ: Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search
m (→‎My HTML page gets corrupted when Cumulus processes it: update for latest Cumulus build re UTF-8 and add 'My gauges are not using the right minimum and maximum')
 
(19 intermediate revisions by 2 users not shown)
Line 13: Line 13:
== Using the SteelSeries Gauges with the Saratoga Templates ==
== Using the SteelSeries Gauges with the Saratoga Templates ==


The Saratoga templates from Ken True use the ISO-8859-n character set particular to the language you are using. This is fundamentally incompatible with the UTF-8 character set used by the SteelSeries gauges.
The older versions of the Saratoga templates from Ken True use the ISO-8859-n character set particular to the language you are using. This is fundamentally incompatible with the UTF-8 character set used by the SteelSeries gauges.


Ken has updated his templates to work with the HTML5 gauges, if you haven't already done so you will need to update your templates from Ken's website. Then in the SteelSeries zip file is a PHP include file for the Saratoga templates - gauges-ss-basic-inc.php. Use this include file as the basis for your gauges page.
If you are using the Saratoga templates then please take a look at this: [http://www.weather-watch.com/smf/index.php/topic,54749.msg459638.html#msg459638 from Ken True].<br>
Another solution for the Saratoga templates using an iframe from Ken [http://sandaysoft.com/forum/viewtopic.php?f=25&t=4561&start=673 can be found here].


== My HTML page gets corrupted when Cumulus processes it ==
== My HTML page gets corrupted when Cumulus processes it ==
This happens if you have used extended character sets in your gauges-ssT.htm file and then saved it as UTF-8 (as you should). Unfortunately Cumulus does not understand UTF-8 and when it processes the page it will re-save it as ANSI encoded. In this case the only option is to manually edit the gauges-ssT.htm file yourself and replace the tags <#xxxx> with your station data, then save as gauges-ss.htm (in UTF-8 format) and FTP the file to your web site manually.
This happens if you have used extended character sets in your gauges-ssT.htm file and then saved it as UTF-8 (as you should). Unfortunately old versions of Cumulus did not understand UTF-8 and when it processes the page old Cumulus versions will re-save it as ANSI encoded.

Upgrade to the latest version of Cumulus, reading the release notes for all the builds inbetween your old one and that you have now installed paying particular attention to any mention of UTF-8.


== My gauges are not using the right minimum and maximum ==
The pressure gauge uses the all-time highest and lowest values to determine what scale to display. The other gauges use that day's lowest and highest values to determine the scale to display. Check your source does not have some rogue values distorting the range displayed.


= Additional Gauges =
= Additional Gauges =
Line 26: Line 31:


The copy of the SteelSeries library supplied with the weather gauges only contains a subset of all the gauges available in SteelSeries Canvas library. The supplied gauges are Radial, RadialBargraph, DisplaySingle, WindDirection, and Odometer. If you want to display any other types of gauges, then you will have to download the full [https://github.com/HanSolo/SteelSeries-Canvas SteelSeries library from Github]. The SteelSeries demo pages have some very basic code to display each of the gauge types, all the configuration parameters for each gauge can be found by looking in the SteelSeries.js source file - there is no on-line documentation for the library.
The copy of the SteelSeries library supplied with the weather gauges only contains a subset of all the gauges available in SteelSeries Canvas library. The supplied gauges are Radial, RadialBargraph, DisplaySingle, WindDirection, and Odometer. If you want to display any other types of gauges, then you will have to download the full [https://github.com/HanSolo/SteelSeries-Canvas SteelSeries library from Github]. The SteelSeries demo pages have some very basic code to display each of the gauge types, all the configuration parameters for each gauge can be found by looking in the SteelSeries.js source file - there is no on-line documentation for the library.

= Tweaking the Wind Rose =

== How do I alter the Wind Rose plot colours? ==
The Wind Rose is based on the RGraph Rose component, in windrose.js you will find a line (around line 160 as of v2.2.2) like this:
rose.Set('chart.colors', ['Gradient(gray:red)']);
This controls the colour of the plot sectors. Please refer to the RGraph website for information on [http://www.rgraph.net/docs/howto-gradient-syntax.html how to use the gradient syntax].

== How do I alter the gap between the Wind Rose sectors? ==
In windrose.js you will find a line (around line 161 as of v2.2.2) like this:
rose.Set('chart.margin', Math.ceil(50 / data.length));
This controls the gap between the sectors, to reduce the gap change '50' to a lower number (say 30), to increase the gap use a bigger number.

<br>
= Design customizations =
SteelSeries gauges could use hundreds designs with combination of style, size, colors and so on!

== Gauges size ==
Gauges could take near any size and to help using it, 3 different sizes has been created<br>
You just have to find that line and change ''gaugeSizeStd'' parameter:<br>
<canvas id="canvas_dew" class="'''gaugeSizeStd'''"></canvas>

''Since these paramete are defined in gauge-cc.css file, you could edit for any size, keep '''odd''' numbers''
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|gaugeSizeSml
|Size: 121px x 121px
|-
|gaugeSizeStd
|Size: 151px x 151px
|-
|gaugeSizeLrg
|Size: 261px x 261px
|-
|}
<br>
== Setting frame design ==
'''setFrameDesign''' function control "ring" appearance
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|BLACK_METAL
|Black Metal
|-
|METAL
|Metal
|-
|SHINY_METAL
|Shiny Metal
|-
|BRASS
|Brass
|-
|STEEL
|Steel
|-
|CHROME
|Chrome
|-
|GOLD
|Gold
|-
|ANTHRACITE
|Anthracite
|-
|TILTED_GRAY
|Tilted Gray
|-
|TILTED_BLACK
|Tilted Black
|-
|GLOSSY_METAL
|Glossy Metal
|-
|}
<br>
== Setting background color ==
'''setBackgroundColor''' function control gauge background color, posible parameters are:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|DARK_GRAY
|Dark Gray
|-
|SATIN_GRAY
|Satin Gray
|-
|LIGHT_GRAY
|Light Gray
|-
|WHITE
|White
|-
|BLACK
|Black
|-
|BEIGE
|Beige
|-
|BROWN
|Brown
|-
|RED
|Red
|-
|GREEN
|Green
|-
|BLUE
|Blue
|-
|ANTHRACITE
|Anthracite
|-
|MUD
|Mud
|-
|PUNCHED_SHEET
|Punched Sheet
|-
|CARBON
|Carbon
|-
|STAINLESS
|Stainless steel
|-
|BRUSHED_METAL
|Brushed Metal
|-
|BRUSHED_STAINLESS
|Brushed Stainless steel
|-
|TURNED
|Turned
|}
<br>

== Settting needles color ==
'''setPointerColor''' function control needles color, parameters available:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|RED
|Red
|-
|GREEN
|Green
|-
|BLUE
|Blue
|-
|ORANGE
|Orange
|-
|YELLOW
|Yellow
|-
|CYAN
|Cyan
|-
|MAGENTA
|Magenta
|-
|WHITE
|White
|-
|GRAY
|Gray
|-
|BLACK
|Black
|-
|RAITH
|Raith
|-
|GREEN_LCD
|Green LCD
|-
|JUG_GREEN
|JUG Green
|-
|}
<br>
== Settting needles design ==
'''setPointerColor''' function control needles type, parameters available:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|TYPE1
|Type 1
|-
|TYPE2
|Type 2
|-
|TYPE3
|Type 3
|-
|TYPE4
|Type 4
|-
|TYPE5
|Type 5
|-
|TYPE6
|Type 6
|-
|TYPE7
|Type 7
|-
|TYPE8
|Type 8
|-
|TYPE9
|Type 9
|-
|TYPE10
|Type 10
|-
|TYPE11
|Type 11
|-
|TYPE12
|Type 12
|-
|TYPE13
|Type 13
|-
|TYPE14
|Type 14
|-
|TYPE15
|Type 15
|-
|TYPE16
|Type 16
|-
|}
<br>

== Settting LCD color ==
'''setLcdColor''' function control LCD display color, parameters available are:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|BEIGE
|Beige
|-
|BLUE
|Blue
|-
|ORANGE
|Orange
|-
|RED
|Red
|-
|YELLOW
|Yellow
|-
|WHITE
|White
|-
|GRAY
|Gray
|-
|BLACK
|Black
|-
|GREEN
|Green
|-
|BLUE2
|Blue2
|-
|BLUE_BLACK
|Blue Black
|-
|BLUE_DARKBLUE
|Dark Blue
|-
|BLUE_GRAY
|Blue Gray
|-
|STANDARD
|Standard
|-
|STANDARD_GREEN
|Green
|-
|BLUE_BLUE
|True Blue
|-
|RED_DARKRED
|Dark Red
|-
|DARKBLUE
|Dark Blue
|-
|LILA
|Lila
|-
|BLACKRED
|Black Red
|-
|DARKGREEN
|Dark Green
|-
|AMBER
|Amber
|-
|LIGHTBLUE
|Light Blue
|-
|SECTIONS
|Sections
|-
|}
<br>
== Settting LED color ==
'''setLedColor''' function control LED color, parameters available are:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|RED_LED
|Red
|-
|GREEN_LED
|Green
|-
|BLUE_LED
|Blue
|-
|ORANGE_LED
|Orange
|-
|YELLOW_LED
|Yellow
|-
|CYAN_LED
|Cyan
|-
|MAGENTA_LED
|Magenta
|-
|}
<br>
== Settting foreground design==
'''setForegroundType''' function control gauge foreground apearence, parameters available are:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|TYPE1
|Type 1
|-
|TYPE2
|Type 2
|-
|TYPE3
|Type 3
|-
|TYPE4
|Type 4
|-
|TYPE5
|Type 5
|-
|TYPE6
|Type 6
|-
|}
<br>
== Settting Wind Avg Pointer Color ==
'''setPointerColorAvg''' function control Wind Avg Pointer color, parameters available:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|RED
|Red
|-
|GREEN
|Green
|-
|BLUE
|Blue
|-
|ORANGE
|Orange
|-
|YELLOW
|Yellow
|-
|CYAN
|Cyan
|-
|MAGENTA
|Magenta
|-
|WHITE
|White
|-
|GRAY
|Gray
|-
|BLACK
|Black
|-
|RAITH
|Raith
|-
|GREEN_LCD
|Green LCD
|-
|JUG_GREEN
|JUG Green
|-
|}
<br>

== Settting Wind Avg Pointer design ==
'''setPointerAvg''' function control Wind Avg Pointer type, parameters available:
{| class="wikitable" border="1"
|-
!style="width:150px" | Parameter
!style="width:500px" | Description
|-
|TYPE1
|Type 1
|-
|TYPE2
|Type 2
|-
|TYPE3
|Type 3
|-
|TYPE4
|Type 4
|-
|TYPE5
|Type 5
|-
|TYPE6
|Type 6
|-
|TYPE7
|Type 7
|-
|TYPE8
|Type 8
|-
|TYPE9
|Type 9
|-
|TYPE10
|Type 10
|-
|TYPE11
|Type 11
|-
|TYPE12
|Type 12
|-
|TYPE13
|Type 13
|-
|TYPE14
|Type 14
|-
|TYPE15
|Type 15
|-
|TYPE16
|Type 16
|-
|}
<br>

[[Category:SteelSeries]]

Latest revision as of 15:16, 28 July 2014

The Steelseries Gauges FAQ

If you think a question is missing from the FAQ, please add it - together with the answer!


Installing and Running

I get funny symbols on the gauges before the degree sign

The Steelseries scripts are supplied in UTF-8 format, if you have edited the files and saved them in another file format, that can be cause.
Another cause can be the hosting page, if that uses a character set other than UTF-8 you can again get character corruptions.

Using the SteelSeries Gauges with the Saratoga Templates

The older versions of the Saratoga templates from Ken True use the ISO-8859-n character set particular to the language you are using. This is fundamentally incompatible with the UTF-8 character set used by the SteelSeries gauges.

Ken has updated his templates to work with the HTML5 gauges, if you haven't already done so you will need to update your templates from Ken's website. Then in the SteelSeries zip file is a PHP include file for the Saratoga templates - gauges-ss-basic-inc.php. Use this include file as the basis for your gauges page.

My HTML page gets corrupted when Cumulus processes it

This happens if you have used extended character sets in your gauges-ssT.htm file and then saved it as UTF-8 (as you should). Unfortunately old versions of Cumulus did not understand UTF-8 and when it processes the page old Cumulus versions will re-save it as ANSI encoded.

Upgrade to the latest version of Cumulus, reading the release notes for all the builds inbetween your old one and that you have now installed paying particular attention to any mention of UTF-8.


My gauges are not using the right minimum and maximum

The pressure gauge uses the all-time highest and lowest values to determine what scale to display. The other gauges use that day's lowest and highest values to determine the scale to display. Check your source does not have some rogue values distorting the range displayed.

Additional Gauges

I'd like to add gauge XXXX from the demo pages

The copy of the SteelSeries library supplied with the weather gauges only contains a subset of all the gauges available in SteelSeries Canvas library. The supplied gauges are Radial, RadialBargraph, DisplaySingle, WindDirection, and Odometer. If you want to display any other types of gauges, then you will have to download the full SteelSeries library from Github. The SteelSeries demo pages have some very basic code to display each of the gauge types, all the configuration parameters for each gauge can be found by looking in the SteelSeries.js source file - there is no on-line documentation for the library.

Tweaking the Wind Rose

How do I alter the Wind Rose plot colours?

The Wind Rose is based on the RGraph Rose component, in windrose.js you will find a line (around line 160 as of v2.2.2) like this: 

               rose.Set('chart.colors', ['Gradient(gray:red)']);

This controls the colour of the plot sectors. Please refer to the RGraph website for information on how to use the gradient syntax.

How do I alter the gap between the Wind Rose sectors?

In windrose.js you will find a line (around line 161 as of v2.2.2) like this: 

               rose.Set('chart.margin', Math.ceil(50 / data.length));

This controls the gap between the sectors, to reduce the gap change '50' to a lower number (say 30), to increase the gap use a bigger number.


Design customizations

SteelSeries gauges could use hundreds designs with combination of style, size, colors and so on!

Gauges size

Gauges could take near any size and to help using it, 3 different sizes has been created
You just have to find that line and change gaugeSizeStd parameter:
<canvas id="canvas_dew" class="gaugeSizeStd"></canvas>

Since these paramete are defined in gauge-cc.css file, you could edit for any size, keep odd numbers

Parameter Description
gaugeSizeSml Size: 121px x 121px
gaugeSizeStd Size: 151px x 151px
gaugeSizeLrg Size: 261px x 261px


Setting frame design

setFrameDesign function control "ring" appearance

Parameter Description
BLACK_METAL Black Metal
METAL Metal
SHINY_METAL Shiny Metal
BRASS Brass
STEEL Steel
CHROME Chrome
GOLD Gold
ANTHRACITE Anthracite
TILTED_GRAY Tilted Gray
TILTED_BLACK Tilted Black
GLOSSY_METAL Glossy Metal


Setting background color

setBackgroundColor function control gauge background color, posible parameters are:

Parameter Description
DARK_GRAY Dark Gray
SATIN_GRAY Satin Gray
LIGHT_GRAY Light Gray
WHITE White
BLACK Black
BEIGE Beige
BROWN Brown
RED Red
GREEN Green
BLUE Blue
ANTHRACITE Anthracite
MUD Mud
PUNCHED_SHEET Punched Sheet
CARBON Carbon
STAINLESS Stainless steel
BRUSHED_METAL Brushed Metal
BRUSHED_STAINLESS Brushed Stainless steel
TURNED Turned


Settting needles color

setPointerColor function control needles color, parameters available:

Parameter Description
RED Red
GREEN Green
BLUE Blue
ORANGE Orange
YELLOW Yellow
CYAN Cyan
MAGENTA Magenta
WHITE White
GRAY Gray
BLACK Black
RAITH Raith
GREEN_LCD Green LCD
JUG_GREEN JUG Green


Settting needles design

setPointerColor function control needles type, parameters available:

Parameter Description
TYPE1 Type 1
TYPE2 Type 2
TYPE3 Type 3
TYPE4 Type 4
TYPE5 Type 5
TYPE6 Type 6
TYPE7 Type 7
TYPE8 Type 8
TYPE9 Type 9
TYPE10 Type 10
TYPE11 Type 11
TYPE12 Type 12
TYPE13 Type 13
TYPE14 Type 14
TYPE15 Type 15
TYPE16 Type 16


Settting LCD color

setLcdColor function control LCD display color, parameters available are:

Parameter Description
BEIGE Beige
BLUE Blue
ORANGE Orange
RED Red
YELLOW Yellow
WHITE White
GRAY Gray
BLACK Black
GREEN Green
BLUE2 Blue2
BLUE_BLACK Blue Black
BLUE_DARKBLUE Dark Blue
BLUE_GRAY Blue Gray
STANDARD Standard
STANDARD_GREEN Green
BLUE_BLUE True Blue
RED_DARKRED Dark Red
DARKBLUE Dark Blue
LILA Lila
BLACKRED Black Red
DARKGREEN Dark Green
AMBER Amber
LIGHTBLUE Light Blue
SECTIONS Sections


Settting LED color

setLedColor function control LED color, parameters available are:

Parameter Description
RED_LED Red
GREEN_LED Green
BLUE_LED Blue
ORANGE_LED Orange
YELLOW_LED Yellow
CYAN_LED Cyan
MAGENTA_LED Magenta


Settting foreground design

setForegroundType function control gauge foreground apearence, parameters available are:

Parameter Description
TYPE1 Type 1
TYPE2 Type 2
TYPE3 Type 3
TYPE4 Type 4
TYPE5 Type 5
TYPE6 Type 6


Settting Wind Avg Pointer Color

setPointerColorAvg function control Wind Avg Pointer color, parameters available:

Parameter Description
RED Red
GREEN Green
BLUE Blue
ORANGE Orange
YELLOW Yellow
CYAN Cyan
MAGENTA Magenta
WHITE White
GRAY Gray
BLACK Black
RAITH Raith
GREEN_LCD Green LCD
JUG_GREEN JUG Green


Settting Wind Avg Pointer design

setPointerAvg function control Wind Avg Pointer type, parameters available:

Parameter Description
TYPE1 Type 1
TYPE2 Type 2
TYPE3 Type 3
TYPE4 Type 4
TYPE5 Type 5
TYPE6 Type 6
TYPE7 Type 7
TYPE8 Type 8
TYPE9 Type 9
TYPE10 Type 10
TYPE11 Type 11
TYPE12 Type 12
TYPE13 Type 13
TYPE14 Type 14
TYPE15 Type 15
TYPE16 Type 16


Retrieved from "https://www.cumuluswiki.org/index.php?title=SteelSeries_FAQ&oldid=3473"