1,154
edits
SteelSeries Gauges: Difference between revisions
no edit summary
(Created page with '{{AddOnBanner|name=SteelSeries Gauges|type=Web Page|author=Mark Crossley|contact='mcrossley' via the forum|updated=19 Dec 2012|version=2.0}} = SteelSeries JavaScript gauges = …') |
No edit summary |
||
|
{{AddOnBanner|name=SteelSeries Gauges|type=Web Page|author=Mark Crossley|contact='mcrossley' via the forum|updated=19 Dec 2012|version=2.0}}
= SteelSeries JavaScript
== Quick Start Guide for Cumulus Users ==
realtime file:-
NOTE: Cumulus does not actually update any data when it processes the web page, it simply replaces the 'static-ish' values such as your station name, location, version etc. If you wish you can edit the .htm file and directly enter the information, then you do not need to get Cumulus to process the file, just copy it once to your web site, removing the 'T' from the filename.
- The relative path on your website to the "realtimegauges.txt" file.
#If you do not require the UV/Solar Index gauges, then change the lines
showUvGauge : true,
to
#If you have installed to a web folder different from your Cumulus 'root' you will also need to edit the "gauges-ss.html" file, and amend the relative path to your Cumulus "weatherstyle.css" file.
Relative Paths :<br> Are just that, they specify where something is on your web site folder<br> structure relative to the page you are currently displaying.<br> So if you copy these gauges to a folder called 'gauges-ss' in the root of<br> your website, and upload the "realtimegauges.txt" to the root folder; the<br> relative path of the .txt file is one folder back in the path. You would<br> then enter the path as "../realtimegauges.txt".<br> If the .txt file is uploaded to the same folder as the gauges page, then the<br> relative path is the same folder, and you would just enter "realtimegauges.txt"
Copy (or move) the folders 'css' and 'scripts' and their contents (the files<br>that are contained in the ZIP file) to the folder where your "gauges-ss.htm" file is<br>located (probably the same folder where all your other Cumulus HTM files are located).
<br>What Next?<br>----------<br>After you get your new gauges page up and running, you will probably want to make it the<br>default gauges page on your web site. So assuming you are running the 'standard' Cumulus<br>web pages (if not then you can figure all this stuff out for yourself), you will need to<br>edit all the Cumulus supplied template files. ▼
== What Next? ==
▲
These files reside in your "<path to cumulus>\cumulus\web" folder. You will need to edit<br>each xxxxxT.htm file, and near the bottom change the link from "gauges.htm" to "gauges-ss.htm"<br>(also include the path if you have installed the SS gauges into a subfolder from you main<br>Cumulus web site).
Next time Cumulus updates your web site, the links on all your existing pages should now<br>point to the new SS gauges.
It is as well to leave the original gauges page on your site, the new page will direct<br>any really old incompatible browsers back to the original page.
If you want to redirect browsers that do not have scripting enabled, then you will have to<br>do this in the HTML file itself. In the header section add the following code:<br> <noscript><br> <meta http-equiv="refresh" content="3; url=index.htm"/><br> </noscript><br>Obviously with the url changed to where ever you want redirect pointing. ▼
== Browser Redirects ==
<br>Changing Languages<br>------------------ ▼
▲If you want to redirect browsers that do not have scripting enabled, then you will have to<br>do this in the HTML file itself. In the header section add the following code:<br> <noscript><br> <meta http-equiv="refresh" content="3; url=index.htm"/><br> </noscript><br>Obviously with the url changed to where ever you want redirect pointing.
To switch statically, you need to edit the "gauges.js" file, and change the line 22<br> var _strings = LANG.EN,<br>to<br> var _strings = LANG.XX,<br> (where XX is the desired language code).
This will re-label all the gauges, and update the text/radio buttons etc on the web page.
However, changing the language for the gauges DOES NOT translate the displayed forecast<br>as the texts of the message are being supplied by your weather station/software.
Forecast Messages<br>-----------------<br>By default for Cumulus the <#forecastenc> message is displayed which shows either the Cumulus<br>generated forecast or the external station generated forecast depending on how Cumulus is configured.<br>Starting with version 1.9.2 Cumulus has additional forecast message options:<br><#cumulusforecastenc> - Always displays the Cumulus generated Zambretti forecast<br><#wsforecastenc> - Always displays the external weather station forecast ▼
== Forecast Messages ==
▲
If you wish to use one of these options, then you should edit the "realtimegaugesT.txt" file<br>and replace the '<#forecastenc>' tag with the one of your choice.
Weather Display users have different options for the forecast message to be used. By default the<br>ccrlocal file uses the Davis VP %vpforecasttext% tag. Change this to what suits you best:
%vpforecasttext% Davis VP forecast<br> %forecasticonword% Words for the (Davis?) forecast icon<br> %dailywarning/forecast% forecast from input daily weather
<br>Adding Logo's/Custom Images to the Gauge Backgrounds<br>----------------------------------------------------<br>The supplied code contains some commented out instructions to add a small logo to the temperature<br>gauge, and a larger image to the DewPoint gauge. These will probably be removed by most people,<br>they are added to demonstrate how to use this feature. See the comments in gauges.js about<br>removing/adding these logos. ▼
== Adding Logo's/Custom Images to the Gauge Backgrounds ==
▲
In order to let the gauge background appear through your images you should make them<br>semi-transparent, which means saving them as PNG files.
The SteelSeries code will clip your images if they exceed the gauge background area, I suggest you<br>size the images similar to your desired gauage size. The code will resize the image to fit the<br>whole background, so it you want to retain the aspect ratio make your images square!
<br>Adding a Wind Rose 'gauge'<br>--------------------------<br>From release 2.0 I have integrated the Wind Rose 'gauge' into the standard 'package' but it is disabled<br>by default. To enable the Wind Rose you have to make the following changes... ▼
== Adding a Wind Rose 'gauge' ==
▲
1. Edit gauges-ssT.htm and remove the comment from around the 'radar' scripts towards the end of the<br> document. Change...<br> <!--<br> <script src="scripts/windrose.js"></script><br> <script src="scripts/RGraph.common.core.min.js"></script><br> <script src="scripts/RGraph.radar.min.js"></script><br> --><br> To...<br> <script src="scripts/windrose.js"></script><br> <script src="scripts/RGraph.common.core.min.js"></script><br> <script src="scripts/RGraph.radar.min.js"></script>
2. Edit gauges.js, and change...<br> showRoseGauge : false,<br> To...<br> showRoseGauge : true,
That's it, the Wind Rose should now display on your page.
<br>Altering the gauge 'layout' on the page<br>---------------------------------------<br>It is easy to 'move' the gauges around the page to create alternative layouts. By default, there are<br>four rows of gauges laid out like this (o = optional gauge)... ▼
== Altering the gauge 'layout' on the page ==
▲
***<br> * * o<br> * * *<br> o o
****<br> * * * * o
Weather Display Users<br>---------------------<br>These files will work with WD if you switch the variable g_weatherProgram at the top of gauges.js to<br>have a value of 1. This will make the script use the WD customclientraw.txt file rather than the Cumulus<br>realtimegauges.txt file. A template for this file suitable for processing by WD is provided in the<br>zip file - customclientrawlocal.txt ▼
== Weather Display Users ==
▲
The provided HTML files gauges-ssT.htm etc, are designed to be 'processed' by Cumulus before uploading<br>to the web site and renaming as gauges-ss.htm<br>This processing replaces all the tags like <#location> with general information about your station (the<br>station name) in this case.
To use the templates with WD you will have to manually edit the HTML file, and replace each of these tags<br>with information appropriate to you. I suggest you then save the file as gauges-ss.htm
You will also want to replace the Menu bar at the bottom of the HTML page which is specific to the Cumulus<br>sample web pages.
=== customclientrawlocal.txt ===
= Release History =
▲customclientrawlocal.txt<br>------------------------<br>The value for Humidex is set to Celcius by default. You may want to change this<br>tag from %humidexcelsius% to %humidexfaren% if you use Farenheit as your temperature<br>scale. (there is no WD tag to report the value in your default scale). This and the forecast tag (see above)<br>are the only things you should have to edit in the ccr file.
2.0.0
1.6.6<br> * Updated languages.js<br> - Added Danish translation - thanks Henrik - but no template HTML file<br> - Added Finnish translation - thanks Timo<br> * Updated gauges.js<br> - Fixed the humidty graph being downloaded every realtime update.<br> * Added gauges-ssT-fi.htm<br> - Finnish translation
| |||