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 30 March 2015 (Stardate -307758.62813926936 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.

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.

Basic Configuration Options

To change basic script configuration parameters, open up the gauges.js file with your text editor and find approximate line number 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 number 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

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 that are being displayed, you may need to modify the gauges-ss.css file to allow for the difference in image size.

Adding a background image to your gauges page

For adding an individual background image you have to edit the code in the gauges-ss.css file.

Find approximate line number 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/brushedsteel2.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.

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:

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.

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.

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.

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.

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.

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.10 Build 1306) has two options for that tag:

Windrose8$ provides 8 directions every 45° or Windrose45$ provides 45 directions every 8°.

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 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 backyard weather community and for making it available to WeatherCat. Thanks to Stu Ball for providing support for SteelSeries Gauges in the most amazing piece of weather software 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:

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