1,126
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 |
||
| Line 1: | Line 1: | ||
{{AddOnBanner|name=SteelSeries Gauges|type=Web Page|author=Mark Crossley|contact='mcrossley' via the forum|updated=19 Dec 2012|version=2.0}} | {{AddOnBanner|name=SteelSeries Gauges|type=Web Page|author=Mark Crossley|contact='mcrossley' via the forum|updated=19 Dec 2012|version=2.0}} | ||
= SteelSeries JavaScript | = SteelSeries JavaScript Gauges = | ||
== Quick Start Guide for Cumulus Users == | == Quick Start Guide for Cumulus Users == | ||
| Line 10: | Line 10: | ||
realtime file:- | realtime file:- | ||
Local filename = <path>\Cumulus\web\realtimegaugesT.txt | |||
Remote filename = <website_root_path>/realtimegauges.txt | |||
Process = Yes | |||
Realtime = Yes | |||
FTP = Yes (unless you are local hosing) | |||
gauges HTML file:- | |||
Local filename = <path>\Cumulus\web\gauges-ssT.htm | |||
Remote filename = <website_root_path>/gauges-ss.htm | |||
Process = Yes | |||
Realtime = No | |||
FTP = Yes (unless you are local hosing) | |||
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. | 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. | ||
| Line 27: | Line 27: | ||
- The relative path on your website to the "realtimegauges.txt" file. | - The relative path on your website to the "realtimegauges.txt" file. | ||
- The relative path on your website to your 'trend' graphs folder. | |||
- The relative path on your website to your old 'gauges' page. (users with 'old' browsers will be redirected to this page) | |||
#If you do not require the UV/Solar Index gauges, then change the lines | #If you do not require the UV/Solar Index gauges, then change the lines | ||
showUvGauge : true, | showUvGauge : true, | ||
showSolarGauge : true, | |||
to | to | ||
showUvGauge : false, | |||
showSolarGauge : false, | |||
#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. | #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. | ||
| Line 42: | Line 42: | ||
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" | 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). | 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). | ||
== What Next? == | |||
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. | |||
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). | 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). | ||
| Line 50: | Line 54: | ||
Next time Cumulus updates your web site, the links on all your existing pages should now<br>point to the new SS gauges. | 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. | 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. | ||
== Browser Redirects == | |||
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. | |||
== Changing Languages == | |||
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). | 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). | ||
| Line 68: | Line 76: | ||
This will re-label all the gauges, and update the text/radio buttons etc on the web page. | 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. | 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 == | |||
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 | |||
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. | 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. | ||
| Line 80: | Line 92: | ||
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: | 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 | %vpforecasttext% Davis VP forecast<br> %forecasticonword% Words for the (Davis?) forecast icon<br> %dailywarning/forecast% forecast from input daily weather | ||
== Adding Logo's/Custom Images to the Gauge Backgrounds == | |||
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. | |||
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. | 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! | 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! | ||
== Adding a Wind Rose 'gauge' == | |||
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... | |||
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> | 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> | ||
| Line 94: | Line 114: | ||
2. Edit gauges.js, and change...<br> showRoseGauge : false,<br> To...<br> showRoseGauge : true, | 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. | That's it, the Wind Rose should now display on your page. | ||
== Altering the gauge 'layout' on the page == | |||
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)... | |||
***<br> * * o<br> * * *<br> o o | ***<br> * * o<br> * * *<br> o o | ||
| Line 106: | Line 130: | ||
****<br> * * * * o | ****<br> * * * * o | ||
Weather Display Users | |||
== Weather Display Users == | |||
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 | |||
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. | 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. | ||
| Line 114: | Line 142: | ||
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 | 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. | 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 === | |||
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. | |||
= Release History = | |||
2.0.0 | |||
* Much of the code rewritten and/or reformatted<br> - Most things now contained in a 'gauges' object to avoid polluting the global namespace with<br> numerous variables etc.<br> - Load orders changed to speed up initial page load/display<br> * Updated gauges.js<br> - Added ability to select the display units:<br> Temp: °C, °F<br> Rain: mm, inch<br> Wind: km/h, m/s, mph, knots<br> Baro: hPa, mb, inHg, kPa<br> - Added (optional) cookie handling to preserve end user unit preferences across sessions<br> - Added variables to set the default min/max values for gauges<br> - Changed the temperature gauge scaling logic so both gauges always use the same range (except<br> for the indoor temperature)<br> - Default units are now 'metric': °C, mm, hPa, km/h<br> - Fixed bug in getord() routine<br> - Added config.dewDisplayType setting to control initial 'dew' gauge display<br> - Added smaller gauge size option for 'mobile' devices<br> * Updated Language handling, all languages now use a single (English by default) template HTML file,<br> calling changeLang(LANG.newLanguage) now updates the HTML as well as the gauges.<br> * Updated realtimeGaugesT.txt & customclientrawlocal.txt<br> - Added todays dominant wind direction<br> * Added Danish, Norwegian, and Italian translations<br> * Changed gauges-ssT.html to use <div>'s for the layout rather than tables.<br> * Removed ddimgtooltip.css - now incorporated into gauges-ss.css<br> * Removed ddimgtooltip.js - now incorporated into gauges.js<br> * Removed tween.min.js - now incorporated into steelseries.min.js<br> * Updated realtimeGaugesT.txt and ccrT.txt files to ver8 - added dominant wind direction<br> * Updated steelseries.js<br> - Updated to v0.11.14<br> * Added optional Wind Rose 'gauge', this also adds the following scripts. The Wind Rose is not enabled by<br> default, and the scripts will not downloaded by the page.<br> - windrose.js<br> - RGraph.common.core.min.js<br> - RGraph.radar.min.js | |||
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 | 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 | ||