Steel Series Gauges

From WeatherCat Wiki
Jump to: navigation, search


Before you start

Before you start to configure the SteelSeries Gauges, read the Cumulus Wiki entry on SteelSeries at

Even though that Wiki article is about setting up the Gauges on Cumulus software, it is helpful to get a general understanding of how to configure the Gauges.

You may also want to read the SteelSeries FAQ at

How to configure the SteelSeries Gauges for WeatherCat

Download the latest version of the gauges from

Once you have extracted all the files from the download, open the gauges.js file using a text editor or your favourite project tool. TextWrangler is a good option; it's free and will preserve the UTF-8 format. It also displays line numbers, which is extremely helpful.

The edits you need to do depend on how you set up (or intend to set up) your website.

These instructions are based on SteelSeries Version 2.5.8 and were updated 27 August 2015 (Stardate -307345.7736555049 for the Trekkies).

Two options

Choose one of the following two options for organising your SteelSeries files on your website. All of the sections following the two options apply, regardless of which option you choose.

(Option 1) All the files for the gauges are or will be in the top level (root) of the website

After following these setup instructions, you should be able to access the gauges by going to

Once you have downloaded the zip file from, extract all the files from the zip file (retaining the folder structure)

You should now have created a folder called SteelSeries-Weather-Gauges-master

Read the ReadMe.txt file, which also identifies the version number

Edit the file gauges.js which you will find in the web_server | scripts sub folder

Find (approx.) Line 34

weatherProgram    : 0,

Replace with

weatherProgram    : 3,

Find (approx.) Line 35

imgPathURL        : './images/',

Replace with

imgPathURL        : '/',

Now upload all the files and folders contained in SteelSeries-Weather-Gauges-master to the root level of your website making sure the sub folder structure is retained.

(Option 2) All the files for the gauges are or will be in a subdirectory of the root level of the website

For these setup instructions we will assume you are going to put the gauges file into a folder called "steel" which will be a sub folder of your webs root folder. After following these setup instructions, you should be able to access the gauges by going to

Once you have downloaded the zip file from, extract all the files from the zip file (retaining the folder structure)

You should now have created a folder called SteelSeries-Weather-Gauges-master

Rename this folder to "steel" (without quotes)

In this "steel" folder you will now need to edit the gauges.js file located in the web_server | scripts sub folder and make the following changes

Find (approx.) Line 34

weatherProgram    : 0,

Replace with

weatherProgram    : 3,

Find (approx.) Line 35

imgPathURL        : './images/',

Replace with

imgPathURL        : './',

Find (approx.) Line 65

realTimeURL_WC     : 'realtimegaugesWC.txt',

Replace with

realTimeURL_WC     : './realtimegaugesWC.txt',

Upload the entire "steel" folder to your website making sure that the folder structure remains the same.

Configuring WeatherCat for the SteelSeries Gauges

The realtimegaugesWC.txt file is the only file that WeatherCat needs to process in order to update the gauges. The easiest way to enable this it to move realtimegaugesWC.txt to your WeatherCat Custom Web Template folder as identified in WeatherCat | Preferences | On-Line | Custom Web | Set HTML Source.

Now you need to modify some settings in WeatherCat

  • Open WeatherCat Preferences --> Online --> Custom Web --> Additional Files
    • Click Add
    • Click Set Path
    • Find your realtimegaugesWC.txt
    • Check Enable and FTP, set time for .10 minute (every six seconds)
    • Click OK

Now WeatherCat will process the realtimegaugesWC.txt file every 6 seconds and upload it (via FTP) to your website.

Alternatively, you can set the time for every .5 minutes and it will upload every 30 seconds, which is a good alternative if you don't want to upload quite as often.

NOTE: As WeatherCat does not allow you to specify a destination directory when processing additional files, your file will ALWAYS be located in the location specified by the FTP details under your Custom Web preferences.

Next, you need to make a one-time upload to your website of the WeatherCat tags for the popup graphs so that WeatherCat can replace them with the actual graph as it updates with new data. Upload this file to either the root of your website or the "steel" folder, depending on whether you used Option 1 or Option 2 above. Here is a sample file, called image_upload.html and this is what it looks like in TextWrangler:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<META http-equiv="Content-type" content="text/html; charset=iso-8859-1">



You have now done everything you need to do to display the default SteelSeries Gauges on your website. Everything below is optional.

Basic SteelSeries Options

There are lots of changes you can make to tweak the look of your Gauges. You can choose to not display all of the gauges, change the colours, fonts, font sizes, pointers, background, gauge size and more! It is a good idea to save a copy of your entire SteelSeries folder before you start to play with the options so you can always go back to the standard files. The options are implemented by editing certain files with your text editor. Make sure sure you edit with an editor that preserves the UTF-8 format. We will explain how to implement some options.

Configuration Options

To change basic script configuration parameters, open up the gauges.js file with your text editor and find approximate Line 32.

    // Script configuration parameters you may want to 'tweak'
            scriptVer         : '2.5.8',
            weatherProgram    : 3,                      //Set 0=Cumulus, 1=Weather Display, 2=VWS, 3=WeatherCat, 4=Meteobridge, 5=WView, 6=WeeWX
            imgPathURL        : '/',             //*** Change this to the relative path for your 'Trend' graph images
            oldGauges         : 'gauges.htm',           //*** Change this to the relative path for your 'old' gauges page.
            realtimeInterval  : 5,                      //*** Download data interval, set to your realtime data update interval in seconds
            longPoll          : false,                  // if enabled, use long polling and PHP generated data !!only enable if you understand how this is implemented!!
            gaugeMobileScaling: 0.85,                   //scaling factor to apply when displaying the gauges mobile devices, set to 1 to disable (default 0.85)
            graphUpdateTime   : 15,                     //period of pop-up data graph refresh, in minutes (default 15)
            stationTimeout    : 3,                      //period of no data change before we declare the station off-line, in minutes (default 3)
            pageUpdateLimit   : 20,                     //period after which the page stops automatically updating, in minutes (default 20),
                                                        // - set to 0 (zero) to disable this feature
            pageUpdatePswd    : 'its-me',               //password to over ride the page updates time-out, do not set to blank even if you do not use a password - http://<URL>&pageUpdate=its-me
            digitalFont       : false,                  //Font control for the gauges & timer
            digitalForecast   : false,                  //Font control for the status display, set this to false for languages that use accented characters in the forecasts
            showPopupData     : true,                   //Pop-up data displayed
            showPopupGraphs   : true,                   //If pop-up data is displayed, show the graphs?
            mobileShowGraphs  : false,                  //If false, on a mobile/narrow display, always disable the graphs
            showWindVariation : true,                   //Show variation in wind direction over the last 10 minutes on the direction gauge
            showIndoorTempHum : true,                   //Show the indoor temperature/humidity options
            showCloudGauge    : true,                   //Display the Cloud Base gauge
            showUvGauge       : true,                   //Display the UV Index gauge
            showSolarGauge    : true,                   //Display the Solar gauge
            showSunshineLed   : true,                   //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: true,                   //Show the rose data as sectors on the direction gauge
            showGaugeShadow   : true,                   //Show a drop shadow outside the gauges

This section of the script, starting with approximate Line 37 is where you can configure the following: update interval, mobile device scaling, graph update interval, turn off popup graphs, turn off indoor temperature and humidity options, do not display cloudbase, solar, UV or wind rose gauges, turn off windrose sectors on the wind direction gauge.

After saving the file, FTP it to your website, replacing the gauges.js file there with the edited version.

Gauge Look and Feel Options

To change look and feel options, open up the gauges.js file with your text editor and find approximate Line 79.

//Gauge global look'n'feel settings
        gaugeGlobals = {
            minMaxArea             : 'rgba(212,132,134,0.3)', //area sector for today's max/min. (red, green, blue, transparency)
            windAvgArea            : 'rgba(132,212,134,0.3)',
            windVariationSector    : 'rgba(120,200,120,0.7)', //only used when rose data is shown on direction gauge
            frameDesign            : steelseries.FrameDesign.TILTED_GRAY,
            background             : steelseries.BackgroundColor.BEIGE,
            foreground             : steelseries.ForegroundType.TYPE1,
            pointer                : steelseries.PointerType.TYPE8,
            pointerColour          : steelseries.ColorDef.RED,
            dirAvgPointer          : steelseries.PointerType.TYPE8,
            dirAvgPointerColour    : steelseries.ColorDef.BLUE,
            gaugeType              : steelseries.GaugeType.TYPE4,
            lcdColour              : steelseries.LcdColor.STANDARD,
            knob                   : steelseries.KnobType.STANDARD_KNOB,
            knobStyle              : steelseries.KnobStyle.SILVER,
            labelFormat            : steelseries.LabelNumberFormat.STANDARD,
            tickLabelOrientation   : steelseries.TickLabelOrientation.HORIZONTAL, // was .NORMAL up to v1.6.4
            rainUseSectionColours  : false,                                       // Only one of these colour options should be true
            rainUseGradientColours : false,                                       // Set both to false to use the pointer colour
            tempTrendVisible       : true,
            pressureTrendVisible   : true,
            uvLcdDecimals          : 1,
            // sunshine threshold values
            sunshineThreshold      : 50,    // the value in W/m² above which we can consider the Sun to be shining, *if* the current value exceeds...
            sunshineThresholdPct   : 75,    // the percentage of theoretical solar irradiance above which we consider the Sun to be shining
            // default gauge ranges - before auto-scaling/ranging
            tempScaleDefMinC       : -20,
            tempScaleDefMaxC       : 40,
            tempScaleDefMinF       : 0,
            tempScaleDefMaxF       : 100,
            baroScaleDefMinhPa     : 990,
            baroScaleDefMaxhPa     : 1030,
            baroScaleDefMinkPa     : 99,
            baroScaleDefMaxkPa     : 103,
            baroScaleDefMininHg    : 29.2,
            baroScaleDefMaxinHg    : 30.4,
            windScaleDefMaxMph     : 20,
            windScaleDefMaxKts     : 20,
            windScaleDefMaxMs      : 10,
            windScaleDefMaxKmh     : 30,
            rainScaleDefMaxmm      : 10,
            rainScaleDefMaxIn      : 0.5,
            rainRateScaleDefMaxmm  : 10,
            rainRateScaleDefMaxIn  : 0.5,
            uvScaleDefMax          : 10,				//Northern Europe may be lower - max. value recorded in the UK is 8, so use a scale of 10 for UK
            solarGaugeScaleMax     : 1000,              //Max value to be shown on the solar gauge - theoretical max without atmosphere ~ 1374 W/m²
                                                        // - but Davis stations can read up to 1800, use 1000 for Northern Europe?
            cloudScaleDefMaxft     : 3000,
            cloudScaleDefMaxm      : 1000,
            shadowColour           : 'rgba(0,0,0,0.3)'  //Colour to use for gauge shadows - default 30% transparent black

This section of the script, starting with approximate Line 84 is where you can configure things that change the the look of your gauges. These items include: frame design, background, foreground, pointer style, pointer colour, decimals and sunshine threshold.

The two sunshine parameters determine how sensitive the LED light is on the Solar Radiation gauge. The LED lights up when the sun is shining. Both parameters have to be met for the light to turn on.

The 'Threshold' is to stop the attempt at sunshine detection when the readings are very low near dawn or dusk. Often the sensors read higher than expected at this time due to the cosine response not being totally accurate, and atmospheric scattering from dust and cloud having a relatively large effect.

Once the value current value exceeds the threshold, then it also has to equal or exceed the percentage of theoretical before we declare 'Sunshine'!

Lowering the parameters causes the LED to light up in lower light conditions. These values can be tuned to your location and sensor to more accurately reflect when the sun is actually shining. You will need to play with them for a while to find a good setting. For example, the settings might work great on a clear day, but not too well when it is snowing. Experiment until your LED light obeys your every wish.

Demo site

There is a very helpful demo site at which you can play with every SteelSeries option known to man (or woman). Mark Crossley, the man who made the subset of the SteelSeries available to WeatherCat (and lots of other weather software packages), created this site. You can get an idea of what your gauges will look like without having the hassle of FTPing every option to your website just to see how it turns out. Find a combination you like on the demo site and then make those changes in your gauges.js file. Check it out at


Please note the warning beginning at Line 184:

        // ==================================================================================================================
        // Nothing below this line needs to be modified for the gauges as supplied
        // - unless you really know what you are doing
        // - but remember, if you break it, it's up to you to fix it ;-)
        // ==================================================================================================================

If you are careful, and follow the instructions appearing below, you will be able to safely tweak some additional settings to customize the appearance of your gauges and pop-up graphs. However, if you like to edit first and read instructions later, you may be in for some heartache. Best practices always include making your edits on a copy while you keep the original files safely tucked away elsewhere. 'Nuff said.

Replacing the pop-up graphs

The gauges.js file comes pre-configured to use the default graphs when you hover over one of the gauges. Should you wish to change these to use any of the custom graphs, you will need to make further changes to the file.

Find (approx.) Line 269

    config.tipImgs = [                                       // config.tipImgs - WeatherCat users using the 'default' weather site
                    ['temperature1.jpg', 'tempin1.jpg'],                 // Temperature: outdoor, indoor
                    // Temperature: dewpoint, apparent, windChill, heatIndex, humidex
                    ['dewpoint1.jpg', 'temperature1.jpg', 'windchill1.jpg', 'heatindex1.jpg', 'temperature1.jpg'],
                    'precipitationc1.jpg',                               // Rainfall
                    'precipitation1.jpg',                                // Rainfall rate
                    ['rh1.jpg', 'rhin1.jpg'],                            // Humidity: outdoor, indoor
                    'pressure1.jpg',                                     // Pressure
                    'windspeed1.jpg',                                    // Wind speed
                    'winddirection1.jpg',                                // Wind direction
                    (config.showUvGauge ? 'uv1.jpg' : null),             // UV graph if UV sensor is present | =null if no UV sensor
                    (config.showSolarGauge ? 'solarrad1.jpg' : null),    // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
                    (config.showRoseGauge ? 'winddirection1.jpg' : null),// Wind direction if Rose is enabled | =null if Rose is disabled
                    (config.showCloudGauge ? 'cloudbase1.jpg' : null)     // Pressure for cloud height | =null if Cloud Height is disabled

Replace the default jpg filenames with the custom graph filenames you wish to use in their place. Save your file and FTP it to your website.

NOTE: If you do change the pop-up graphs being displayed to use customized graphs, you may need to modify the gauges-ss.css file to allow for the difference in image size. You must match the Web Width and Web Height settings in your custom graph with the width and height settings in the gauges-ss.css file. Make this modification, if required, in the .tipimg{ section of the gauges-ss.css file. Also, remember to add the appropriate tag for your custom popup graph to your image_upload.html file and re-upload the modified file to your website.

Tweaking gradient colours

You can change gradient colours by editing the default colour codes.

Changing the default Wind Rose Gauge colours

Line 2121 in the gauges.js file defines a three-colour gradient for the Wind Rose gauge plot. The default line looks like this:

rose.Set('chart.colors', ['Gradient(#408040:red:#7070A0)']);

The default colours are dark green - red - dark purple. You can change the code for the three colours to plot your Wind Rose in the colours of your choice. For example, the following code will display your Wind Rose plot in green - yellow - red.

rose.Set('chart.colors', ['Gradient(#3C973C:#FFFF00:red)']);

Rainfall and Rain Rate colours

The rainfall rate and rainfall total 'stepped' colours (not enabled by default) are defined in createRainRateSections (Line 3089) and createRainfallSections (Line 3112).

The continuous gradient colours for rainfall are defined in the createRainfallGradient section (Line 3143). By default, the full range of colours will be displayed from 0 - 100 mm, or 0 - 4 inches. You can adjust these values to be lower if you desire the full gradient range to be displayed in less total rainfall. This is done by editing the values in line 3146. The default range:

(metric ? 100 : 4),

A lower value range:

(metric ? 25 : 1),

Note: Do not change anything in this line other than the numbers.

Additional Options to change the appearance of your gauges

Adding a background image to your gauges page

To add a background image for your SteelSeries Gauges you have to edit the code in the gauges-ss.css file.

Find approximate Line 5

body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	text-align: left;
  color: #585858;

Insert a new line after Line 8 with the path to your background image, as in the following example:

font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	text-align: left;
	background-image: url(http://yourwebsite/steel/images/brushedsteel.jpg);	
  color: #585858;

Make sure that the 4th line url points to the location where the desired background pattern is stored on your web directory.

Upload your modified gauges-ss.css file, replacing the copy on your website.

Other options you can change in the gauges-ss.css file

There are other changes you can make in the gauges-ss.css file to alter the appearance of your SteelSeries gauges, some of which are described here.

Credits Text Colour

You can change the hex code on Line 9 (Line 10 if you made the change to use a background image as described above) to change the colour of the text used in the credits section of the gauges.

For example, replace:

body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	text-align: left;
  color: #585858;
body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	text-align: left;
  color: #323232;
to change the colour of the credits from light gray to very dark gray.

Other lines you can change include:

Text Size of Gauge Options

Line 49 (Line 50 if you made the change to use a background image as described above) changes the text size of the radio buttons, such as Dew Point, Apparent, Wind Chill, etc. For example, change

label {
  height: 15px;
  text-align: left;
  font-size: 9px;
  vertical-align: 15%;
to the following:
label {
  height: 15px;
  text-align: left;
  font-size: 10px;
  vertical-align: 15%;

to increase the text size.

Background Colour Units of Measure Box

Line 58 (Line 59 if you made the change to use a background image as described above) changes the background colour of the units of measure box. For example, change

  background-color: #CCF;
to the following:
  background-color: #ffffcc;

in order to change the background colour on the units of measure box from lavender to pale yellow.

Popup Graphs Font

Line 97 (Line 98 if you made the change to use a background image as described above) changes the font in the standard popup graphs. For example, replace

  font-family: sans-serif;

with the following:

  font-family: Verdana, Helvetica, sans-serif;

for an easier to read font in the popup graphs.

Popup Graph Space Allocation

Line 105 (Line 106 if you made the change to use a background image as described above) sets the amount of space to be used to display the popup graphs. If you are using custom graphs rather than the default graphs, this size allocation must match the Web Width and Web Height specified in WeatherCat custom graphs.

  width: 438px;
  height: 175px;

You can modify the pixels (width and/or height), which changes the size allocated for custom popup graphs if you are not using the default graphs.

After making any changes in the gauges-ss.css file, FTP the new file to your website, replacing the old one.

Options you can modify in the gauges-ss-basic.htm file

There are some changes you can make to the gauges-ss-basic.htm file, some which are described here. You can make these changes with your html editor, but a text editor, such as Text Wrangler works fine.

Gauge Size

You can change the size of each individual gauge by editing the canvas ID. For example, to change the default size of the temperature gauge from Standard to Large, replace

Line 22
<canvas id="canvas_temp" class="gaugeSizeStd"></canvas>


<canvas id="canvas_temp" class="gaugeSizeLrg"></canvas>

You have to make the same change to each gauge if you want them to be the same size. You can also change the size to Sml if you wish to display smaller gauges.

Adding additional text to the Credits section

Line 150 is where the credits are that appear at the bottom of the gauges. You can add something here should you wish. Please don't remove the existing credits as we appreciate everything these individuals have done to create this incredible display and make it available for WeatherCat users.

After making any changes in the gauges-ss.basic.htm file, FTP the new file to your website, replacing the old one.

Options you can modify in the realtimegaugesWC.txt file

There are several options you can modify in the realtimegaugesWC.txt file, some of which are described here. Remember to make these changes in the version of the file that is located in your Set HTML Source folder and not in the Set Save Path folder. You do not need to FTP these changes to your website as WeatherCat processes this file and uploads it.

The Forecast Ticker. If your weather station supports the forecast ticker, you can add any other desired tags to the forecast tag. For example, you can add the current date or date and time to the ticker. The forecast tag is located on Line 4. The original line reads:

"forecast":"Current forecast is -- CF$ --",

You can add a time stamp to the forecast line by modifying line 4 to read as follows:

"forecast":"D$ Current forecast is -- CF$ --",

The D$ tag adds the date and time. You could also use any of the other date and time tags. For that matter, you can use any WeatherCat tag in the ticker that makes sense to you. However, just because it makes sense to you does not necessarily mean that it's a good idea. After all, how many "good" ideas of yours has your wife shot down?

The Wind Rose Gauge. If you are using the wind rose gauge, the WeatherCat tag located in the realtimegaugesWC.txt file identifies the number of compass directions for the wind rose pattern. WeatherCat currently (v 2.20 Build 280) has two options for that tag:

Windrose8$ provides 8 directions every 45° or Windrose45$ provides 45 directions every 8° (starting at north and running clockwise).

The lower resolution produces wider bands on the Wind Run gauge.

This tag is located on Line 76 and the default is Windrose45$. If you wish to have the wider band display, change the tag to Windrose8$, as in the following example. The default tag is:


To display wider bands, change the tag to this:


Upgrading from an older version to a newer version

Beginning with SteelSeries Gauges version 2.5, the folders in the download package have been reorganized. If you know what you are doing, you can move the files from the download into whatever folder(s) you are using on your website. You can also simply replace your current setup with the new folders. If you replace your old folders with the new ones, remember to adjust the settings in gauges.js (around line 35) to account for your new folder structure. If you don't know what you are doing, don't upgrade. Never fix what ain't broken.

Important Notice: Unlike WeatherCat, which preserves your settings when you upgrade, with SteelSeries the changes you have made to any file need to be made again in the upgrade file(s). For example, any change you made in the original files (gauge styles and counter settings in gauges.js, background image in gauges-ss.css, changes in languages.min.js, customized lines in gauges-ss-basic.htm, etc) must be duplicated in the upgrade files in order for the SteelSeries Gauges to continue to work on your website.

Still need help?

If you have done your best to figure this out and still need some help, look for the answer to your question on the WeatherCat forum here: ==>

If you still can't figure it out, post your question there and your fellow WeatherCatters will try to assist.

An explanation of what each gauge is displaying, according to one WeatherCat user, may be found here: ==>

Thank you Uncle Buck, Mark Crossley and Stu Ball

A special thanks to Uncle Buck, the first WeatherCat user to implement the SteelSeries Gauges even before Mark Crossley included support for it in his scripts. Thanks to Mark Crossley for his brilliant efforts to make SteelSeries Gauges available to the personal weather station community and for making it available to WeatherCat. Thanks to Stu Ball for providing support for SteelSeries Gauges in the most amazing and complete weather software package made for Mac!

Examples of SteelSeries Gauges in action

The following links are to some of the SteelSeries Gauges on personal websites around the world. Most, but not all, of these sites use WeatherCat to provide the data. The links are listed in alphabetical order.


Carefree Weather:

Carlsbad Obervatory:

Cecil County:


East Dallas TX Weather:

Indian Mountain Lakes:

La Noue Beach:


Long Road:

No Wait Weather:

Point Cook: (This is the first WeatherCat-supported SteelSeries Gauges website and was developed by Uncle Buck)

Prägraten am Großvenediger:

Randys Weather On The Hill:

Saratoga Weather:


Son en Breugel:

Timber Lakes:


Wilmslow Weather:

Wishaw Weather:


And finally

The whole point of installing the SteelSeries Gauges on your website is for you to have fun! Experiment with them and enjoy the journey. Studies have shown that when you have the SteelSeries Gauges on your website, your children will have more respect for you and your grandchildren will love you more. Your wife will thank you for spending so much time on your computer. The neighbours will check your website more frequently. One user's brother told him that the gauges look way better than the weather site maintained by the local television station. While your mileage may vary, one thing is for certain - the weather will enjoy hanging around your anemometer and rain collector cup after you implement the SteelSeries Gauges.

Personal tools