SteelSeries Gauges: Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search

SteelSeries Gauges (view source)

Revision as of 21:54, 18 December 2012

288 bytes removed ,  18 December 2012
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 gaugesGauges =
 
== Quick Start Guide for Cumulus Users ==
 
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.
 
- 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
 
showUvGauge : true,
showSolarGauge : true,
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.
Relative Paths&nbsp;:<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? ==
 
▲<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.
 
These files reside in your "&lt;path to cumulus&gt;\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.
 
<br>Browser Redirects<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> &lt;noscript&gt;<br> &lt;meta http-equiv="refresh" content="3; url=index.htm"/&gt;<br> &lt;/noscript&gt;<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> &lt;noscript&gt;<br> &lt;meta http-equiv="refresh" content="3; url=index.htm"/&gt;<br> &lt;/noscript&gt;<br>Obviously with the url changed to where ever you want redirect pointing.
 
 
 
▲<br>== Changing Languages<br>------------------ ==
 
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 &lt;#forecastenc&gt; 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>&lt;#cumulusforecastenc&gt; - Always displays the Cumulus generated Zambretti forecast<br>&lt;#wsforecastenc&gt; - Always displays the external weather station forecast ▼
 
== Forecast Messages ==
 
▲Forecast Messages<br>-----------------<br>By default for Cumulus the &lt;#forecastenc&gt; 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>&lt;#cumulusforecastenc&gt; - Always displays the Cumulus generated Zambretti forecast<br>&lt;#wsforecastenc&gt; - 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 '&lt;#forecastenc&gt;' 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&nbsp;%vpforecasttext% tag. Change this to what suits you best:
 
%vpforecasttext% Davis VP forecast<br>&nbsp;%forecasticonword% Words for the (Davis?) forecast icon<br>&nbsp;%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 ==
 
▲<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.
 
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' ==
 
▲<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...
 
1. Edit gauges-ssT.htm and remove the comment from around the 'radar' scripts towards the end of the<br> document. Change...<br> &lt;!--<br> &lt;script src="scripts/windrose.js"&gt;&lt;/script&gt;<br> &lt;script src="scripts/RGraph.common.core.min.js"&gt;&lt;/script&gt;<br> &lt;script src="scripts/RGraph.radar.min.js"&gt;&lt;/script&gt;<br> --&gt;<br> To...<br> &lt;script src="scripts/windrose.js"&gt;&lt;/script&gt;<br> &lt;script src="scripts/RGraph.common.core.min.js"&gt;&lt;/script&gt;<br> &lt;script src="scripts/RGraph.radar.min.js"&gt;&lt;/script&gt;
2. Edit gauges.js, and change...<br> showRoseGauge&nbsp;: false,<br> To...<br> showRoseGauge&nbsp;: 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>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)...
 
***<br> * * o<br> * * *<br> o o
****<br> * * * * o
 
<br>
 
 
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 ==
 
▲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
 
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 &lt;#location&gt; 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 ===
 
customclientrawlocal.txt<br>------------------------<br>The value for Humidex is set to Celcius by default. You may want to change this<br>tag from&nbsp;%humidexcelsius% to&nbsp;%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 =
 
▲customclientrawlocal.txt<br>------------------------<br>The value for Humidex is set to Celcius by default. You may want to change this<br>tag from&nbsp;%humidexcelsius% to&nbsp;%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.
 
<br>
 
2.0.0
Release History<br>=======================
 
2.0.0<br> * 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 &amp; customclientrawlocal.txt<br> - Added todays dominant wind direction<br> * Added Danish, Norwegian, and Italian translations<br> * Changed gauges-ssT.html to use &lt;div&gt;'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
Retrieved from "https://www.cumuluswiki.org/a/Special:MobileDiff/2098"

Navigation menu