Steel Series Gauges

From WeatherCat Wiki
Jump to: navigation, search

Contents

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 http://wiki.sandaysoft.com/a/SteelSeries_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.


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 http://wiki.sandaysoft.com/a/SteelSeries_Gauges, extract all the files from the zip file (retaining the folder structure)

You should now have created a folder called gauges-ss-vX-X-X (where X-X-X represents the version of SS-Gauges)

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

Find (approx. line 18)

weatherProgram    : 0,

Replace with

weatherProgram    : 3,

Find (approx. line 19)

imgPathURL        : './images/',

Replace with

imgPathURL        : '/',

Now upload all the files and folders contained in gauges-ss-vX-X-X 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 http://wiki.sandaysoft.com/a/SteelSeries_Gauges, extract all the files from the zip file (retaining the folder structure)

You should now have created a folder called gauges-ss-vX-X-X (where X represents the version of SS-Gauges)

Rename this folder to "steel" (without quotes)

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

Find (approx. line 18)

weatherProgram    : 0,

Replace with

weatherProgram    : 3,

Find (approx. line 19)

imgPathURL        : './images/',

Replace with

imgPathURL        : '/',

Find (approx. line 43)

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 268)

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.

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox