1,123
edits
SteelSeries Gauges: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
no edit summary
No edit summary |
|||
| (29 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{AddOnBanner|name=SteelSeries Gauges|type=Web Page|author=Mark Crossley|contact='mcrossley' via the forum|updated= | {{AddOnBanner|name=SteelSeries Gauges|type=Web Page|author=Mark Crossley|contact='mcrossley' via the forum|updated=23 October 2018|version=2.7.2}} | ||
[[Image:gauge.png|left]] | [[Image:gauge.png|left]] | ||
[[Image:Steelseries-sshot-3.jpg|thumb|Default Gauges]] | [[Image:Steelseries-sshot-3.jpg|thumb|Default Gauges]] | ||
| Line 13: | Line 13: | ||
Each gauge has has an optional pop-up information box that contains some additional text based data for today, and a graph of recent trends for relevant values. | Each gauge has has an optional pop-up information box that contains some additional text based data for today, and a graph of recent trends for relevant values. | ||
Please note that these gauges use HTML5 'features' and so will not run on older browsers, in particular | Please note that these gauges use HTML5 'features' and so will not run on older browsers, in particular versions of Internet Explorer prior to IE9. Also if you are planning on embedding the code in an existing page, then the whole page should be converted to the HTML5 standard. | ||
== Quick Start Guide for Cumulus Users | == Quick Start Guide for Cumulus 1 Users (Other software users may want to scan this too) == | ||
1. | 1. Extract all the file in the SteelSeries zip file to a folder on your PC. | ||
2. Copy " | 2. Copy "realtimegaugesT.txt" to your Cumulus web folder (N.B. The file in the SteelSeries zip is for Cumulus 1, Cumulus MX supplies its own file with this name, but using a slightly different format). | ||
3. | 3. Copy "gauges-ssT.htm" to your Cumulus web folder. | ||
4. On main Cumulus screen, in '''Configuration''' menu, pick ''Internet'' option, '''Files''' tab and complete a row for each file (again this guide is for Cumulus 1, Cumulus MX automatically uploads realtimegauges as a standard file): | |||
realtime file:- | realtime file:- | ||
| Line 29: | Line 31: | ||
Realtime = Yes | Realtime = Yes | ||
FTP = Yes (unless you are local hosting) | FTP = Yes (unless you are local hosting) | ||
UTF-8 = Yes | |||
gauges HTML file:- | gauges HTML file:- | ||
| Line 35: | Line 38: | ||
Process = Yes | Process = Yes | ||
Realtime = No | Realtime = No | ||
FTP = Yes (unless you are local | FTP = Yes (unless you are local hosting) | ||
UTF-8 = Yes | |||
'''''NOTE''': Cumulus does not actually update any data when it processes the web | (The standard Cumulus template is Cumulus\web\gaugesT.htm, this uses "Cumulus\web\gauges-ssT.htm" so you can retain the old one). | ||
'''''NOTE''': Cumulus does not actually update any data when it processes the (gauges-ssT.htm) web template, it simply replaces the 'static-ish' values such as your station name, location, version etc. If you wish you can edit the ''gauges-ssT.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. OR, you can let Cumulus process and upload the HTML file to your web site a few times, then remove it from 'files' tab table.'' | |||
5. If required edit the "gauges.js", the key items are at the top: | |||
- The path on your website to the "realtimegauges.txt" file. | - The 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 'trend' graphs folder (''images'' in standard Cumulus set up). | ||
- The relative path on your website to your old 'gauges' page. (users with 'old' browsers will be redirected to this page) | - The relative path on your website to your old 'gauges.htm' page. (users with 'old' browsers will be redirected to this page) | ||
6. If you do not require the UV/Solar Index gauges, then change the lines | |||
showUvGauge : true, | showUvGauge : true, | ||
| Line 53: | Line 58: | ||
showSolarGauge : false, | showSolarGauge : false, | ||
7. FTP the folders 'css' and 'scripts' and their contents (the files that are contained in the ZIP file) from your PC to the folder where your "gauges-ss.htm" file is located (probably the same folder where all your other Cumulus HTM files are located) on your web server. | |||
8. Test the page. | |||
=== Relative Paths === | === Relative Paths === | ||
Are just that, they specify where something is on your web site folder structure relative to the page you are currently displaying. | 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, the relative path of the Cumulus css file is one folder back in the path. You would then enter the path as "../weatherstyle.css". | If you are installing to a web folder different from your Cumulus 'root' on your web server, you will first need to edit the "gauges-ss.htm" file, and amend the relative path to your Cumulus "weatherstyle.css" file. So if you copy these gauges to a folder called 'gauges-ss' in the root of your website, the relative path of the Cumulus css file is one folder back in the path. You would then enter the path as "../weatherstyle.css". | ||
== What Next? == | == What Next? == | ||
| Line 145: | Line 150: | ||
<script src="scripts/windrose.js"></script> | <script src="scripts/windrose.js"></script> | ||
<script src="scripts/RGraph.common.core.min.js"></script> | <script src="scripts/RGraph.common.core.min.js"></script> | ||
<script src="scripts/RGraph. | <script src="scripts/RGraph.rose.min.js"></script> | ||
2. Edit gauges.js, and change... | 2. Edit gauges.js, and change... | ||
| Line 171: | Line 176: | ||
* * * * | * * * * | ||
* * * * o | * * * * o | ||
== Altering the gauge sizes on the page == | |||
From version 2.2.0 the sizes of the gauges is controlled via CSS and longer coded in the gauges.js script. By default all the gauge canvas tags are set to pick up their size from the ".gaugeSizeStd" class in gauges-ss.css file. To change the size of all the gauges, simply edit this class and set the width & height to your required size - the width and height should always be the same. | |||
You can easily have different sized gauges on the same page, in the gauges-ss.css I have created two additional classes ".gaugeSizeSml" and ".gaugeSizeLrg", (again you can edit the width/height values of these classes to whatever you want), to assign one of these alternative sizes to a gauge, edit the HTML and change (for example)... | |||
<canvas id="canvas_baro" class="gaugeSizeStd"></canvas> | |||
to | |||
<canvas id="canvas_baro" class="gaugeSizeLrg"></canvas> | |||
This would change the Barometer from a 221 pixel gauge, to 261 pixels (using the default values). | |||
== JavaScript Files == | == JavaScript Files == | ||
| Line 176: | Line 193: | ||
Some of the JavaScript files are pre-minimised in the package, the un-minimised versions of these script can be found in the /scripts/src folder. The 'src' folder is not used by the web page in normal use, but for debugging purposes you may want to change the page to these source scripts. | Some of the JavaScript files are pre-minimised in the package, the un-minimised versions of these script can be found in the /scripts/src folder. The 'src' folder is not used by the web page in normal use, but for debugging purposes you may want to change the page to these source scripts. | ||
'''''Note:''''' the file ''"scripts/ | '''''Note:''''' the file ''"scripts/steelseries_tween.min.js"'' is a combination of ''"scripts/src/steelseries.min.js"'' '''AND''' ''"scripts/src/tween.min.js"'' concatenated together. You should never have to edit these files, but be aware of this if you do. | ||
All the JavaScript files have been created using a UTF-8 character encoding, when editing the files please use an editor that is capable of retaining the correct file encoding. | All the JavaScript files have been created using a UTF-8 character encoding, when editing the files please use an editor that is capable of retaining the correct file encoding. | ||
Once you are happy with your web page I recommend that you minimise all your scripts, and possibly concatenate them - if you do this though, ensure that you maintain the script load order. Concatenation is not as big a speed up as it used to be as most modern browsers no longer 'block' when downloading a script file. | Once you are happy with your web page I recommend that you minimise all your scripts, and possibly concatenate them - if you do this though, ensure that you maintain the script load order. Concatenation is not as big a speed up as it used to be as most modern browsers no longer 'block' when downloading a script file. | ||
== Weather Display Users == | == Weather Display Users == | ||
| Line 234: | Line 250: | ||
<script src="scripts/windrose.js"></script> | <script src="scripts/windrose.js"></script> | ||
<script src="scripts/RGraph.common.core.min.js"></script> | <script src="scripts/RGraph.common.core.min.js"></script> | ||
<script src="scripts/RGraph. | <script src="scripts/RGraph.rose.min.js"></script> | ||
Note that VWS does *not* produce data for all the entries to be displayed. | Note that VWS does *not* produce data for all the entries to be displayed. | ||
| Line 245: | Line 261: | ||
(Thanks to Ken True of saratoga-weather.org for the VWS support script) | (Thanks to Ken True of saratoga-weather.org for the VWS support script) | ||
== WeatherCat Users == | == WeatherCat Users == | ||
| Line 251: | Line 266: | ||
Please see the WeatherCat wiki page for instructions: http://wiki.trixology.com/index.php/Steel_Series_Gauges | Please see the WeatherCat wiki page for instructions: http://wiki.trixology.com/index.php/Steel_Series_Gauges | ||
== Meteobridge Users == | |||
Some features of the gauges page are not available, when you configure the program type to "4" the | |||
script automatically disables the Wind Rose gauge and the pop-up graphs. | |||
Please download the support script from [http://saratoga-weather.org/wxtemplates/setup-Meteobridge.php Saratoga Weather]. | |||
(Thanks to Ken True of saratoga-weather.org for the Meteobridge support script) | |||
| Line 260: | Line 283: | ||
= Downloads = | = Downloads = | ||
The gauges can be downloaded from here: [ | The code for the gauges is now on GitHub, it can be [https://github.com/mcrossley/SteelSeries-Weather-Gauges/ viewed here]. | ||
The gauges package can be downloaded from here: [https://github.com/mcrossley/SteelSeries-Weather-Gauges/archive/master.zip Download here]. | |||
= Release History = | = Release History = | ||
The latest version of the gauges is 2.2 | The latest version of the gauges is 2.7.2, a full version history can be [[SteelSeries_Versions|found here]]. | ||
[[Category: | [[Category:SteelSeries]] | ||
