Steel Series Gauges

From WeatherCat Wiki (Mahler2)
Revision as of 00:19, 24 December 2023 by Blicj11 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


The SteelSeries Gauges for WeatherCat

This SteelSeries wiki article is designed to assist WeatherCat users to install and customize Mark Crossley's SteelSeries Gauges. Mark was the first to develop weather gauges from Han Solo's Steel-Series Canvas (available on Github at Others have used this same javascript base, but have tweaked it for their own templates. For example, a version of Mark Crossley's work has been edited by Wim van der Kuil for his Leuven Template. Although similar, the javascript files from these various iterations cannot be used together in a mix and match fashion. This Wiki article is to assist you in installing Mark Crossley's gauges. For help with other versions, contact the version developer.

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. BBEdit is a good option; it's free for 30-days and will preserve the UTF-8 format. It also displays line numbers, which is extremely helpful. BBedit's file editing functions, including comparing two different versions of a file, can still be used after the 30-day free demo period has expired.

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

These instructions are based on SteelSeries Version 2.7.6 and were last updated 23 December 2023 (Stardate -635948.1729564082 for the Trekkies).

SteelSeries version 2.7.6 allows for easier implementation of SSL on your website, adds today's minimum and maximum Internal Temperature to the temperature gauge popup graph, allows you to easily add data from an extra temperature or humidity sensor to the gauge, refines the Internal Temp calculation between C and F for today's low, and fixes a couple of boo-boos that popped up in previous versions, circa 2.6.5.

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 37

weatherProgram    : 0,

Replace with

weatherProgram    : 3,

Find (approx.) Line 38

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 website 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 37

weatherProgram    : 0,

Replace with

weatherProgram    : 3,

Find (approx.) Line 38

imgPathURL        : './images/',

Replace with

imgPathURL        : './',

Find (approx.) Line 71

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.

With either option, you must identify the relative path to your weather data

Line 38 (and Line 71, if using Option 2) is where you identify the relative path to your data for the gauges. The relative path specifies where the data is in your website folder structure, relative to the page where your gauges are displaying. In other words, you have to identify where your realtimegaugesWC.txt file is located relative to your gauges-ss-basic.htm file.

For example, if your data file (realtimegaugesWC.txt) is located in the same folder as your gauges, you can either specify Line 38 to read

imgPathURL        : './',


imgPathURL        : '/',

If your data file is located in a path that is one folder above the gauges folder, edit Line 38 to read

imgPathURL        : '../',

If your data files located in a path that is two folders above the gauges folder, edit Line 38 to read

imgPathURL        : '../../',

and so forth.

Assuming Option 2, you will make the same changes to Line 71 as Line 38. For example, if you changed Line 38 to read

imgPathURL        : '../',

you need to change Line 71 to read

realTimeURL_WC     : '../realtimegaugesWC.txt',

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 BBEdit:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1265.21">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Times}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Times; min-height: 14.0px}
<p class="p1">GRTEMPO$</p>
<p class="p1">GRDEW$</p>
<p class="p1">GRHUMO$</p>
<p class="p1">GRWINDCH$</p>
<p class="p1">GRHEATI$</p>
<p class="p1">GRSOLAR$</p>
<p class="p1">GRUV$</p>
<p class="p1">GRWINDD$</p>
<p class="p1">GRWINDS$</p>
<p class="p1">GRPRESSURE$</p>
<p class="p1">GRCLOUDB$</p>
<p class="p1">GRRAIN1$</p>
<p class="p1">GRRAIN24$</p>
<p class="p1">GRHUMI$</p>
<p class="p1">GRTEMPI$</p>
<p class="p2"><br></p>

You have now done everything you need to do to display the default SteelSeries Gauges on your website. Everything that follows 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 you edit with an editor that preserves the UTF-8 format. We will now 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 35 labeled Script configuration parameters you may want to 'tweak'.

 // Script configuration parameters you may want to 'tweak'
            scriptVer          : '2.7.6',
            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
            showWindMetar      : false,                  //Show the METAR substring for wind speed/direction over the last 10 minutes on the direction gauge popup
            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
            roundCloudbaseVal  : true,                   //Round the value shown on the cloud base gauge to make it easier to read
                                                        // The realtime files should be absolute paths, "/xxx.txt" refers to the public root of your web server
            realTimeUrlLongPoll: 'realtimegauges-longpoll.php',     //*** ALL Users: If using long polling, change to your location of the PHP long poll realtime file ***
            realTimeUrlCumulus : 'realtimegauges.txt',     //*** Cumulus Users: Change to your location of the realtime file ***
            realTimeUrlWD      : 'customclientraw.txt',    //*** WD Users: Change to your location of the ccr file ***
            realTimeUrlVWS     : 'steelseriesVWSjson.php', //*** VWS Users: Change to your location of the JSON script generator ***
            realTimeUrlWC      : '../realtimegaugesWC.txt',   //*** WeatherCat Users: Change to your location of the JSON script generator ***
            realTimeUrlMB      : 'MBrealtimegauges.txt',   //*** Meteobridge Users: Change to the location of the JSON file
            realTimeUrlWView   : 'customclientraw.txt',    //*** WView Users: Change to your location of the customclientraw.txt file ***
            realTimeUrlWeewx   : 'gauge-data.txt',         //*** WeeWX Users: Change to your location of the gauge data file ***
            useCookies         : true,                   //Persistently store user preferences in a cookie?
            tipImages          : [],

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.

A word about the parameter for gaugeMobileScaling, which is set at a default of .85. Changing this parameter "should" make the gauges smaller (or larger) when they are shown on a "small screen." A small screen is defined as < 480 pixels wide at line 371. Most smartphones have greater resolution than 480, so changing this parameter will have no affect on how the gauges appear on an iPhone. Experimenting with iPhone 6, 6s, 8+, Xs, 11 Pro, 13 Mini, and 15 Pro rotating the phone to landscape mode displays the gauges properly. Popup gauges will also appear properly on an iPhone if you make the edit for them described later in this article.

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

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

Note that changing approximate Line 101 and Line 102 does not change your gauge display so don't waste your time.

The two sunshine parameters (approximate Line 111 and Line 112) 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.

Note: Not that you care about some organisation of which you are not a member, but according to the World Meteorological Organization (WMO), you know they are legitimate because they are headquartered in Geneva Switzerland, sunshine hours are only computed when direct solar irradiance exceeds a threshold value of 120 W/m². This threshold may be a wee bit high for accuracy at many personal weather station locations.

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 194:

        // ==================================================================================================================
        // 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 precisely follow the remaining instructions, 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 281

    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. The following are some examples. You can locate and tweak the gradient colours of any gauge.

Changing the default Wind Rose Gauge colours

Line 2204 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 3206) and createRainfallSections (Line 3221).

The continuous gradient colours for rainfall are defined in the createRainfallGradient section (Line 3240). 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 3243. 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.

Add a Logo to your Gauge Face

You can add a logo to the face of a gauge. The gauges.js file includes some commented out instructions on how to add a small logo to the Temperature Gauge. Mark Crossley included the feature, but doesn't think it is very useful and won't be used by most people. The instructions begin on Line 381.

If you want to try this feature to see how it looks, do the following:

  • Delete the comment indicator on Line 192.
  • Delete the comment indicator on Line 389.
  • Delete the comment indicator on Line 390.
  • Delete the comment indicator on Line 739 (assuming you want to add the logo to your Temperature gauge - if you want to add it to a different gauge, copy line 739 and paste it as a new line in the same relative location for the desired gauge and delete the comment indicator after pasting).
  • Copy the file logoSmall.png from the Images folder in the SteelSeries download to the folder to which you pointed in Line 38.
  • Save the changes and FTP gauges.js to your website.

Note that logoSmall.png is a 250x250 file that contains a much smaller image on the bottom center of the overall image. This allows the small logo to be displayed at the bottom center of the Temperature Gauge. If you want your logo to replace the sample logo, you will need to create a similar sized png file with your logo only taking up a similar amount of space on the bottom center of the overall image. If you simply create a 250x250 pixel png of your logo, it will display over the entire gauge, not just on the bottom.

If you want to create your own logo file, comply with the following guidelines:

  • In order to let the gauge background appear through your image, make the image semi-transparent, which means saving it as a PNG file.
  • The SteelSeries code will clip your image if it exceeds the gauge background area, so you should size the image similar to your desired gauge size.
  • The code will resize your image to fit the whole background, so it you want to retain the aspect ratio make your image square.
  • The code will resize your image to fit the whole background, so don't undersize it or it will appear blurry.
  • Replace the logoSmall.png file with your own png file but retain the filename.

You can view the only known (to us) example of a customized logo on a gauge face by clicking here and scrolling down to the Cloud Base gauge ==>

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:

Size of Gauges

Beginning with Line 35 (Line 36 if you made the change to use a background image as described above) you can change the definition of Small, Standard, and Large for the gauges. Change the width and height. You do NOT have to change the size here to change the gauges from the default Standard size to either Small or Large. You do that elsewhere. These lines in this file are where you can change the definition of Small, Standard, and Large.

Text Size of Gauge Options

Line 53 (Line 54 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 64 (Line 65 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 103 (Line 104 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 111 (Line 112 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 a few 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 BBEdit 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.

Changes made in this file do not always automatically appear in the gauges. If you should run into this behaviour, simply Clear History of the Last Hour in Safari (or the equivalent in your preferred browser) and reload the gauges, which should now display your edits.

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 spouse 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 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:


Transitioning from http to https

If you are implementing SSL (https) on your weather site, DO NOT PANIC. One user recently followed this advice and his life improved dramatically. The SteelSeries Gauges will run just fine on your https site, but if you have any hard links in the scripts, you will need to change them from http to https.

Note that beginning with SteelSeries version 2.6.4, you will find improved integration with SSL and no tweaking is required for https links unless you have specifically added a hard http link somewhere.

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 Lines 38 and 71) 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 display properly on your website. Therefore, we strongly suggest you create a list documenting every single change you make so you can easily make them again when you upgrade. Alternatively, if you use BBEdit, you can use its Find Differences function to show you the differences between your original file and the upgrade file. The problem with this method is you may not be able to differentiate between your changes and those made by Mark Crossley when he adds new features. You know best so if you have complete photographic recall, don't worry about documentation.

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 especially for making it available for use with WeatherCat. Thanks to Stu Ball for tweaking the most amazing and complete weather software package made for Mac to allow WeatherCatters to use the SteelSeries Gauges!

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.


Cecil County:

Coastal Port Maitland, Nova Scotia, Canada:


Kesh Farm Station:

Long Road:

Long Sutton, UK:

Palm Club and Leisure Gardens: (This template provides a version of SteelSeries Gauges)

Parkwood Hills - Our Backyard Weather:

Point Cook Weather:

Prägraten am Großvenediger:

Saratoga Weather: (This template provides a version of SteelSeries Gauges)

Selston Weather: (This template provides a version of SteelSeries Gauges)

Silver Acorn Weather:


Son en Breugel:

Timber Lakes:

Wairoa Weather:

Wilmslow Weather: (This is Mark Crossley's site - he developed the SteelSeries Gauges for personal weather stations)

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 spouse 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 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 more fully enjoy hanging around your anemometer and rain collector cup after you implement the SteelSeries Gauges.

Personal tools