Steel Series Gauges

Revision as of 10:18, 15 February 2015

How to configure the Stainless Steel Gauges for WeatherCat

The very first thing you need to do is download the latest version of the gauges from https://github.com/mcrossley/SteelSeries-Weather-Gauges/

Once you have extracted all the files from the download, open the gauges.js file using a text editor or your favourite project tool.

The edits you will need to do are dependant on how you have setup (or intend to set up) your website.

These instructions are based on SteelSeries Version 2.5.5 updated 14 February 2015

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

After following these setup instructions, you should be able to access the gauges by going to http://www.yourpage.com/gauges-ss-basic.htm

Once you have downloaded the zip file from https://github.com/mcrossley/SteelSeries-Weather-Gauges/, 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.

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

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 http://www.yourpage.com/steel/gauges-ss-basic.htm

Once you have downloaded the zip file from https://github.com/mcrossley/SteelSeries-Weather-Gauges/, 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.

Final steps for setting up the Steel Series Gauges

As an option, you can copy the realtimegaugesWC.txt file to a location that is more suited to your needs as this is the only file that needs to be processed by WeatherCat for the gauges to work. One suggested location would be to copy it to your WeatherCat Custom Web Templates folder.

Now you will 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.

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.

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 = [
            	    ['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
		    (config.showSolarGauge ? 'solarrad1.jpg' : null),            // Solar rad
		    (config.showRoseGauge ? 'winddirection1.jpg' : null)     // Wind direction for Wind Rose

Replace with

Replace the jpg filenames with those you wish to use in their place.
(i.e. Replace the default graph filenames with the custom graph filenames.) 

NOTE: If you do change the pop-up graphs that are being displayed, you may need to modify the gauges-as.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:

Find

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

Replace with

body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	text-align: left;
        background-image: url(/yourbackgroundimage.jpg);
}

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

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

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 gauge.js (around line 35) to account for your new folder structure.

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