SteelSeries FAQ

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 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.

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
DARK_GRAY	Dark Gray
SATIN_GRAY	Satin Gray
LIGHT_GRAY	LightGray
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