1,154
edits
SteelSeries Gauges: Difference between revisions
no edit summary
No edit summary |
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 Gauges =
Based on the JavaScript/HTML5 Canvas SteelSeries gauges, this weather gauge page, blah, blah, blah...
== Quick Start Guide for Cumulus Users ==
1. Copy "realtimegaugesT.txt" to your Cumulus web folder.
2. Copy "gauges-ssT.htm" to your Cumulus web folder.
3. Configure Cumulus Internet|Files to:
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.''
4. If required edit the "gauges.js", the key items are at the top:
- The relative path on your website to the "realtimegauges.txt" file.
5. If you do not require the UV/Solar Index gauges, then change the lines
showUvGauge
6. 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.
7. Copy (or move) the folders 'css' and 'scripts' and their contents (the files that are contained in the ZIP file) to the folder where your "gauges-ss.htm" file is located (probably the same folder where all your other Cumulus HTM files are located).
=== Relative Paths ===
Are just that, they specify where something is on your web site folder structure relative to the page you are currently displaying. So if you copy these gauges to a folder called 'gauges-ss' in the root of your website, and upload the "realtimegauges.txt" to the root folder; the relative path of the .txt file is one folder back in the path. You would then enter the path as "../realtimegauges.txt". If the .txt file is uploaded to the same folder as the gauges page, then the relative path is the same folder, and you would just enter "realtimegauges.txt"▼
▲Are just that, they specify where something is on your web site folder structure relative to the page you are currently displaying. So if you copy these gauges to a folder called 'gauges-ss' in the root of your website, and upload the "realtimegauges.txt" to the root folder; the relative path of the .txt file is one folder back in the path. You would then enter the path as "../realtimegauges.txt". If the .txt file is uploaded to the same folder as the gauges page, then the relative path is the same folder, and you would just enter "realtimegauges.txt"
== What Next? ==▼
▲== What Next? ==
After you get your new gauges page up and running, you will probably want to make it the default gauges page on your web site. So assuming you are running the 'standard' Cumulus web pages (if not then you can figure all this stuff out for yourself), you will need to edit all the Cumulus supplied template files.
Next time Cumulus updates your web site, the links on all your existing pages should now point to the new SS gauges.
It is as well to leave the original gauges page on your site, the new page will direct any really old incompatible browsers back to the original page.
== Browser Redirects ==
<noscript>
Obviously with the url changed to where ever you want the redirect pointing.
== Changing Languages ==
To switch statically, you need to edit the "gauges.js" file, and change the line 12:
var strings = LANG.EN,
To add a new translation, edit the "language.js" file and copy one of the existing sections e.g. English, to the end of the file, changing all the LANG.EN values to LANG.XX (where XX is the code for the new language), and editing all the strings. The zip file contains a language.js file with English, French, German, Dutch, Swedish, Danish, Finnish, Norwegian, Italian, Spanish, and Catalan translations to get you going.
If you are only going to use one language, then deleting the unused language options and the changeLang() function from the language.js file will speed up the page load time slightly.
To switch languages dynamically, you need to add script to your page which sets the LANG object to equal the desired language and then calls the changeLang() function. e.g.
// Dynamic script to change the default language to German
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 as the text of the message is being supplied by your weather station/software.
== Forecast Messages ==▼
By default for Cumulus the <#forecastenc> message is displayed which shows either the Cumulus generated forecast or the external station generated forecast depending on how Cumulus is configured. Starting with version 1.9.2 Cumulus has additional forecast message options: ▼
▲== Forecast Messages ==
▲By default for Cumulus the <#forecastenc> message is displayed which shows either the Cumulus generated forecast or the external station generated forecast depending on how Cumulus is configured. Starting with version 1.9.2 Cumulus has additional forecast message options:
<#cumulusforecastenc> - Always displays the Cumulus generated Zambretti forecast
If you wish to use one of these options, then you should edit the "realtimegaugesT.txt" file and replace the '<#forecastenc>' tag with the one of your choice.
NOTE: If your forecast messages use accented characters (or any character not in the basic 103 characters in the LCD font), then I recommend that you disable the digital font on the status/forecast display. Set the following in gauges.js:
digitalForecast : false,
Weather Display users have different options for the forecast message to be used. By default the ccrlocal file uses the Davis VP
%forecasticonword% Words for the (Davis?) forecast icon
== 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 gauge, and a larger image to the DewPoint gauge. These will probably be removed by most people, they are added to demonstrate how to use this feature. See the comments in gauges.js about removing/adding these logos.
In order to let the gauge background appear through your images you should make them 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 size the images similar to your desired gauge size. The code will resize the image to fit the 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 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 document. Change...
<!--
<script src="scripts/windrose.js"></script>▼
<script src="scripts/RGraph.common.core.min.js"></script>▼
<script src="scripts/RGraph.radar.min.js"></script>▼
-->▼
To...▼
<script src="scripts/windrose.js"></script>
<script src="scripts/RGraph.common.core.min.js"></script>
<script src="scripts/RGraph.radar.min.js"></script>
2. Edit gauges.js, and change... ▼
▲2. Edit gauges.js, and change...
showRoseGauge : false,
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 four rows of gauges laid out like this (o = optional gauge)...
* * *
To move the gauges you just need to edit the HTML file and move <div>'s (and their contents) with a class="gauge". Each 'row' is contained within a <div> with a class="row". If you do re-order the gauges, then DO NOT change the "tip_N" numbers, each number is associated with a particular gauge not it's position on the page.
* * * *
== Weather Display Users ==
These files will work with WD if you switch the variable g_weatherProgram at the top of gauges.js to have a value of 1. This will make the script use the WD customclientraw.txt file rather than the Cumulus realtimegauges.txt file. A template for this file suitable for processing by WD is provided in the zip file - customclientrawlocal.txt
To use the templates with WD you will have to manually edit the HTML file, and replace each of these tags 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 sample web pages.
=== customclientrawlocal.txt ===
The value for Humidex is set to Celcius by default. You may want to change this tag from
= Release History =
<u>'''2.0.0'''</u>
**Added smaller gauge size option for 'mobile' devices
**Added ability to select the display units:
<blockquote>Temp: °C, °F<br>Rain: mm, inch<br>Wind: km/h, m/s, mph, knots<br>Baro: hPa, mb, inHg, kPa </blockquote> ▼
▲Temp: °C, °F<br>Rain: mm, inch<br>Wind: km/h, m/s, mph, knots<br>Baro: hPa, mb, inHg, kPa
*Updated Language handling, all languages now use a single (English by default) template HTML file, calling changeLang(LANG.newLanguage) now updates the HTML as well as the gauges.
*Updated realtimeGaugesT.txt & customclientrawlocal.txt
| |||