SteelSeries JavaScript gauges ============================= Created by Mark Crossley July 2011 Version 2.4.3 Updated: 23 July 2013 +-------------------------------------------------------+ | | | Please read the more comprehensive notes on the Wiki: | | http://wiki.sandaysoft.com/a/SteelSeries_Gauges | | | | And the FAQ on the Wiki: | | http://wiki.sandaysoft.com/a/SteelSeries_FAQ | | | +------------------------------------------------------ + Some brief notes for Cumulus users (but other users should skim this as well): Copy "realtimegaugesT.txt" to your Cumulus web folder. Copy "gauges-ssT.htm" to your Cumulus web folder. Configure Cumulus Internet|Files to: realtime file:- Local filename = \Cumulus\web\realtimegaugesT.txt Remote filename = /realtimegauges.txt Process = Yes Realtime = Yes FTP = Yes (unless you are local hosting) gauges HTML file:- Local filename = \Cumulus\web\gauges-ssT.htm Remote filename = /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. If required edit the "gauges.js", the key items are at the top: 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.htm" file, and amend the relative path to your Cumulus "weatherstyle.css" file. 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, the relative path of the Cumulus css file is one folder back in the path. You would then enter the path as "../weatherstyle.css". 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). 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. These files reside in your "\cumulus\web" folder. You will need to edit each xxxxxT.htm file, and near the bottom change the link from "gauges.htm" to "gauges-ss.htm" (also include the path if you have installed the SS gauges into a subfolder from you main Cumulus web site). 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 Cumulus gauges page on your site, the new page will direct any really old incompatible browsers back to the original page. If you decide on a different 'standard' gauge size, then you need to edit the gauges-ss.css file. By default all the gauges use the ".gaugeSizeStd" class, simply change the width and height settings there. You can also remove any HTML elements associated with gauges you will not use as well, again this is not mandatory, the script will remove them dynamically for you. Browser Redirects ----------------- If you want to redirect browsers that do not have scripting enabled, then you will have to do this in the HTML file itself. In the header section add the following code: 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 12 var strings = LANG.EN, to var strings = LANG.XX, (where XX is the desired language code). 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 tand 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 %vpforecasttext% tag. Change this to what suits you best: %vpforecasttext% Davis VP forecast %forecasticonword% Words for the (Davis?) forecast icon %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 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 hen calls the changeLang() function. e.g. // Dynamic script to change the default language to German changeLang(LANG.DE); 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: <#cumulusforecastenc> - Always displays the Cumulus generated Zambretti forecast <#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 whole background, so it you want to retain the aspect ratio make your images square! Removing a Wind Rose 'gauge' ---------------------------- From release 2.0 I have integrated the Wind Rose 'gauge' into the standard 'package', from v2.1.0 it is enabled by default. To disable the Wind Rose you have to make the following changes... 1. Edit gauges-ssT.htm/gauges-ss-basic.htm/gauges-ss-basic-inc.php and delete the 'radar' scripts towards the end of the document. 2. Edit gauges.js, and change... showRoseGauge : true, To... showRoseGauge : false, That's it, the Wind Rose should now be removed from your page. Note for VWS users the Wind Rose will be automatically disabled, but these users should still remove the scripts from the HTML as above to reduce the page load times. 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)... * * * * * o * * * o o To move the gauges you just need to edit the HTML file and move
's (and their contents) with a class="gauge". Each 'row' is contained within a
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. I use the following 'horizontal' layout on my personal page (no Solar or UV optional gauges, but with the optional Wind Rose) * * * * * * * * 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)... to This would change the Barometer from a 221 pixel gauge, to 261 pixels (using the default values). Weather Display Users ===================== These files will work with WD if you switch the following value in gauges.js: weatherProgram : 0, To... weatherProgram : 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 process the customclientrawlocal.txt, in WD you need to: * in control panel, webfiles/web page setup, real time ftp setup * see the custom client raw file setup...and tick to create that * make sure the needed customclientrawlocal.txt is in the clientraw folder location The provided HTML files gauges-ssT.htm etc, are designed to be 'processed' by Cumulus before uploading to the web site and renaming as gauges-ss.htm This processing replaces all the tags like <#location> with general information about your station (the 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 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 %humidexcelsius% to %humidexfaren% if you use Fahrenheit as your temperature scale. (there is no WD tag to report the value in your default scale). This and the forecast tag (see above) are the only things you should have to edit in the ccr file. Virtual Weather Station (VWS) Users =================================== These files will work with VWS if you have setup VWS to upload the WeatherFlash conditions files (wflash.txt, wflash2.txt). You do not have to purchase WeatherFlash to use these scripts, but just have to set up VWS to upload the files via HTTP or FTP methods. See VWS, Internet, WeatherFlash dialog for setup and use either Server File or Active Server Page to perform the upload with an interval of 10 seconds or so. steelseriesVWSjson.php ---------------------- Configure the steelseriesVWSjson.php file settings area near the top of the file for the location of the WeatherFlash Data/ directory (using relative file addressing), and for your other preferences (units, timezone, etc.). In scripts/gauges.js, * change the weatherProgram variable to 2 to indicate VWS is being used. * change the imgPathURL to the relative URL location of the VWS vwsNNN.jpg graphs. * change the realTimeURL_VWS to the relative URL path of the steelseriesVWSjson.php script In gauges-ss-basic.htm, * remove the wind rose scripts by deleting the following lines... Note that VWS does *not* produce data for all the entries to be displayed. The following are missing due to this lack of VWS supplied data: * windrose display: the display will be disabled by default. * rain chart: the time of last rain is 'n/a'. * all-time min/max barometer pressure: the Barometer gauge will not show red areas up to the all record low pressure and from the record high pressure to the max of the gauge. * some gauges show only current values as the min/max values are not computed by VWS. * the humidex number is not provided by VWS, but computed by the steelseriesVWSjson.php script instead, so there is no humidex graph available. (Thanks to Ken True of saratoga-weather.org for the VWS support script) WeatherCat Users ================ 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. (Thanks to Ken True of saratoga-weather.org for the Meteobridge support script) Release History ======================= 2.4.3 * Updated gauges.js - Changed UV level thresholds from integer boundaries to 1 dp rounded boundaries. UVI is normally quoted as a rounded integer value, so if we are displaying decimals we should use n.5 as the transition. - Added missing unit conversion for today's maximum hourly rain rate. * Updated language.js/language.min.js - Changed English UV "Little Risk" wording to "Moderate Risk" to fall in-line with many recommended wordings. Other translations need looking at. 2.4.2 * Updated gauges.js - Fixed rain gauge autoscaling between 0.5 and 1.0 when using Inches! 2.4.1 * Updated gauges.js - Fixed rain rate gauge autoscaling between 0.5 and 1.0 when using Inches 2.4.0 * Updated gauges.js - Added global gauge option fullScaleDeflectionTime to control pointer 'speed' - Changed the UV gauge to use new gradient scale colours by default - Added Today's High value to the UV gauge - Changed rain gauge to always use blue LEDs - line 653 - Fixed the 0.5" rain gauge code introduced in version 2.3.1 - Applied fix for VWS not supplying the correct value for max rain rate today * Updated the realtime JSON files to include today's high UV value - Cumulus - realtimegaugesT.txt - v11 - Weather Display - customeclientrawlocal.txt - v10 - Weather Cat - realtimegaugesWC.txt - v12 - Meteobridge - see Ken True's web site for updated script - v10 2.3.2 * Only WeatherCat users need to update from v2.3.1 unless you want the additional Portuguese translation * WeatherCat version 1.2 or later is required to run this update * Updated gauges.js - Fixed handling of current theoretical solar radiation in doSolar() for WC users - Made realtimegauges JSON file weather program dependent so updates to the JSON file for one program can be made independently of the others * Updated realtimegaugesWC.txt - Added tag value for CurrentSolarMax to replace "N/A" - Version uplifted to 11 * Updated language.js/language.min.js - Added Portuguese translation by 'Werk_AG' 2.3.1 * Updated gauges.js - Fixed wind direction variablity calculation to cope with full 360 direction changes in the last 10 minutes - Change wind direction METAR variablity speed threshold from USA based 6kts to European 3kts (line 1783 if you want to change it back) - Added full wind data to the METAR string - Fixed the solar gauge, todays max indicator being shown with programs that do not supply this value - Added missing code to refresh the solar graph periodically - Added fix for WeatherCat not providing current theoretical solar max value - Added new user configurable options for the rain and rain-rate gauges default max scale values - Reset the inch rain and rain-rate gauges default max scale value from 1.0 to 0.5 inches, and when the max scale is less than 1.0in, use two decimal places. * Updated gauges-ss-basic.htm - Fixed two HTML5 errors * Updated realtimegaugesT.txt (ver 10) (Cumulus) - Added missing todays solar max value * Updated realtimegaugesWC.txt (ver 10) (WeatherCat) - Moved todays max value from current theoretical max to todays max * Updated src/steelseries.js - New library version v0.14.3 - Fixes script exception/crash in Firefox v21+ - Also updated src/steelseries.min.js & steelseries_tween.min.js * Removed jquery-1.8.2.min.js from the distribution 2.3.0 * Updated gauges.js - Added support for Meteobridge. * Updated windrose.js - Fixed 'blurry' appearance of the rose plot at some gauge sizes. 2.2.3 * Updated gauges.js - Fixed bug in handling WeatherCat wind speeds in Knots * Updated steelseries.js, steelseries.min.js, steelseries_tween.min.js - Now up to SS v0.14.0 (adds support for user LED's) * Updated windrose.js - Minor tweaks 2.2.2 * Updated gauges.js - Fixed mph & knots wind unit handling for WeatherCat users only * Updated languages.js - Nederlands strings updated 2.2.1 * Updated gauges-ssT.htm - Fixed typo in -> * Updated gauges.js - Fixed automatic gauge resizing on 'mobile' devices. 2.2.0 * Updated gauges.js - Added support for WeatherCat - Changed gauge shadow default to 30% black, and added gauge.shadowColour parameter - All gauges now take their size from the HTML/CSS, this means they can easily be indiviually resized - Moved solarGaugeScaleMax from 'config' to 'gauge' where it more logically belongs with the other scale values * Updated gauges-ss.css - Added classes gaugeSizeSml, gaugeSizeStd, gaugeSizeLrg * Updated windrose.js - Now picks up gauge shadow colour from gauges.gauge.shadowColour - Gauge shadow code now picked up from gauges.js - Internal renaming of variables from radar to rose * Added file gauges-ss-basic-inc.php - Provides a page to integrate with Ken True's popular Saratoga web site templates * Update gauges-ssT.htm, gauges-ss-basic.htm, gauges-ss-basic-inc.php - All gauge sizes (width/height) now replaced with class="gaugeSizeStd" - Amended the status LCD panel and timer LCD panel sizes to match sizes previously set in the gauges.js script - Changed rose script from RGraph.radar.min.js to RGraph.radar.min.js * Updated steelseries.js, steelseries.min.js, steelseries_tween.min.js - Now up to SS v 0.13.0 * Removed RGraph.radar.js/Rgraph.radar.min.js - Added RGraph.rose.js/RGraph.rose.min.js 2.1.1 * Updated windrose.js - Made the compass point symbols slightly larger and darker. - Fixed problems with the odometer positioning on some pages. * Updated language.js/language.min.js - Completed Greek, Finnish, & Norwegan translations. - Updated Spanish & Catalan translations. * Renamed the combined steelseries & tween file from "steelseries.min.js" to "steelseries_tween.min.js" - No functional changes * Updated gauges-ssT.htm & gauges-ss-basic.htm - To pick up renamed steelseries_tween.min.js file - No functional changes * Updated gauges.js - Fixed wind run display units handling when source data is non-metric and the browser does not have a cookie set. - Added in 'missing' code to make the LED flash red when the page timeout occurs. 2.1.0 * New file gauges-ss-basic.htm - This is a minimal html page to display the gauges, suitable for including in an existing page via an