Steel Series Gauges
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.3 updated 30 January 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 240)
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.
