G Dalenoord Laatste update is van 3 maart

Transcription

1 Cumulus Gauges-SS programma G Dalenoord Laatste update is van 3 maart

2 Inhoud 1 Brongegevens Guages_SS Om de kleueren te bepalen: Indicatie stijgend/dalend indicatie verplaatsen in de meter Gauges-ss versie SteelSeries Gauges Contents vers Gauges-ss - vers verschillende bestanden: Vragen over Gauges-ss vers Gauges.ss Language.js Steeseries.js Windrose.js Gauges-ss.css Gaugess 2 vers.2.0. beta-4a Installeren van Gauges-ss vers Betekenis/functie van de verschillende bestanden: Gauges-ss vers Bron: gaugest-ss.htm Bron: realtimegaugest.txt Vertaling weersverwachting Bron: ddimgtooltip.css Bron: gauges-ss.css Bron: ddimgtooltip.js Bron: gauges.js Bron: language_nl.js Bron: parserealtime.js Bron: steelseries.js Bron: tween.min.js Waar kan ik bekijken wat de effecten zijn van de instellingen Voorbeels Spaanse site Pagina van Henk, d.d. 16-september Pagina van Henk, d.d. 16-september Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 1

3 1 Brongegevens Guages_SS 21-dec-2012 Bron: Wiki: Bron voor bekijken van instellingen: Met deze tool, kan men de weersgegevens weergeven met meters. In het komende hoofdstuk wardt aangegeven waar het bron-bestand vandaan gehaald wordt, Instellingen en de verschillende broncodes. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 2

4 1.1 Om de kleueren te bepalen: Note: In order to try out different colour combinations and gauge styles, you can use my demo pages Hier onder vier Bron=adressen voor: Radial Gauges, LinearGauges, Extra Gauges, StopWatch Gauge Radial Gauges: Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 3

5 LinearGauges: Extra Gauges: Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 4

6 StopWatch Gauge: Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 5

7 1.2 Indicatie stijgend/dalend indicatie verplaatsen in de meter. Dus het verplaatsen van de stijgend/dalend indicatie var trendposx = size * 0.29; var trendposy = size * 0.36; Komt overseen met mijn eigen site: In vers.2.11 staat deze regel in Steelseries.js voor de temperatuurmeter. Deze waarde gelden voor beide meters. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 6

8 Proefondervindelijk de waarde naar var trendposx = size * 0.44; var trendposy = size * 0.73; Omgezet. Dit laatste in steelseries_tween.min.js : Deze geldt voor beide meters. In vers.2.11 staat deze regel in Steelseries.js voor de luchtdrukmeter. Ga er dus van uit dat bovenstaande ook geldt voor vers2.22. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 7

9 2 Gauges-ss versie SteelSeries Gauges Name: SteelSeries Gauges Type: Web Page Author: Mark Crossley Contact: 'mcrossley' via the forum Last update: 03 Feb 2013 Version: Default Gauges All Gauges Shown No Optional Gauges Shown Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 8

10 History van voorgaande versies en de links van downloaden van deoudere versies: (7-feb-2013) Vers [Download here] Updated windrose.js o Made the compass point symbols slightly larger and darker. o Fixed problems with the odometer positioning on some pages. Updated language.js/language.min.js o Completed Greek, Finnish, & Norwegan translations. o Updated Spanish & Catalan translations. Renamed the combined steelseries & tween file from "steelseries.min.js" to "steelseries_tween.min.js" o No functional changes Updated gauges-sst.htm & gauges-ss-basic.htm o To pick up renamed steelseries_tween.min.js file o No functional changes Updated gauges.js o Fixed wind run display units handling when source data is non-metric and the browser does not have a cookie set. o Added in 'missing' code to make the LED flash red when the page timeout occurs. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 9

11 Vers [Download here] New file gauges-ss-basic.htm o This is a minimal html page to display the gauges, suitable for including in an existing page via an <iframe> tag, or including in PHP scripts. Updated gauges.js o Made the Wind rose enabled by default. o Added option to disable the Wind Run odometer on the Wind Rose. o Changes to support Wind Run odometer. o Added support for VWS. Updated windrose.js o Changes to support the Wind Run odometer. Updated gauges.css o Changes to support the Wind Run odometer. Updated gauges-sst.htm o Windrose radar scripts are now enabled by default Updated realtimegaugest.txt & customclientrawlocal.txt o Added "windrun" = wind run today - for odometer Updated languages.js/languages.min.js o Added - windruntoday: "Wind run today" - translations required please! New file steelseriesvwsjson.php o Generates the JSON data for VWS users Removed file weatherstyle.css o This is used by the Cumulus template(gauges-sst.htm) and was only included for WD users, Cumulus users would already have this file. I expect WD & VWS users to use the gauges-ssbasic.htm which does not use this style sheet. Note: In order to try out different colour combinations and gauge styles, you can use my demo pages Radial Gauges, LinearGauges, Extra Gauges, StopWatch Gauge Mark post as unread Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 10

12 2.2 Contents vers SteelSeries JavaScript Gauges o 1.1 Quick Start Guide for Cumulus Users Relative Paths o 1.2 What Next? o 1.3 Browser Redirects o 1.4 Changing Languages o 1.5 Forecast Messages o 1.6 Adding Logo's/Custom Images to the Gauge Backgrounds o 1.7 Removing a Wind Rose 'gauge' o 1.8 Altering the gauge 'layout' on the page o 1.9 JavaScript Files o 1.10 Weather Display Users customclientrawlocal.txt o 1.11 Virtual Weather Station (VWS) Users steelseriesvwsjson.php 2 SteelSeries FAQ 3 Downloads 4 Release History SteelSeries JavaScript Gauges Based on the JavaScript/HTML5 Canvas SteelSeries gauges, this weather gauge page is now available in version 2. The page is Ajax based and uses the JQuery library to pull a JSON formatted data file from your web server to update the gauge values. By default the page is configured to update every 60 seconds. - Edit in gauges.js 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 version 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 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: Edit in Cumulus programma zelf Configuration Internet. 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 hosting) 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 Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 11

13 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 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) 5. If you do not require the UV/Solar Index gauges, then change the lines default = true showuvgauge : true, showsolargauge : true, to showuvgauge : false, showsolargauge : false, 6. 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. 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, 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? 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 "<path to cumulus>\cumulus\web" folder. You will need to edit each xxxxxt.htm file, and near the bottom change the link from "gauges.htm" (= de oude site) to "gauges-ss.htm" (= de nieuwe meter site) (also include the path if you have installed the SS gauges into a sub-folder 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 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 it is a good idea to edit the HTML file and make all the gauge <canvas> entries 'width' and 'height' properties the same value. This is not mandatory, but it means the page will not 're-flow' between the initial page load and script running. You can also remove any 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: <noscript> <meta http-equiv="refresh" content="3; url=index.htm"/> </noscript> Obviously with the url changed to where ever you want the redirect pointing. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 12

14 Changing Languages To switch statically, you need to edit the "gauges.js" file, and change the line 14: var strings = LANG.EN, to var strings = LANG.XX, (where XX is the desired language code). moet dus LANG.NL worden 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. I see the translations as community effort, so I have created a translations page for SteelSeries here in the Wiki. Please contribute by refining or completing these pages. 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 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 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 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 %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 whole background, so it you want to retain the aspect ratio make your images square! Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 13

15 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 Edit gauges-sst.htm/gauges-ss-basic.htm and delete the 'radar' scripts towards the end of the document <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... 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 <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. I use the following 'horizontal' layout on my personal page (no Solar or UV optional gauges, but with the optional Wind Rose) * * * * * * * * o JavaScript Files 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/steelseries.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. 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 These files will work with WD if you switch the following value in gauges.js: weatherprogram : 0, To... weatherprogram : 1, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 14

16 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 Celsius 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. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 15

17 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. You need to switch the following value in gauges.js: weatherprogram : 0, To... weatherprogram : 2, 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... <script src="scripts/windrose.js"></script> <script src="scripts/rgraph.common.core.min.js"></script> <script src="scripts/rgraph.radar.min.js"></script> 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) SteelSeries FAQ Please take a look at the SteelSeries FAQ if you are having problems with these scripts. Downloads The gauges can be downloaded from here: Download here Release History The latest version of the gauges is 2.1.1, a full version history can be found here. Category: WebTools Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 16

18 2.3 Gauges-ss - vers verschillende bestanden: htm-bestanden gauges-ss.htm gaugest-ss.htm Txt-bestanden realtimegauges.txt realtimegaugest.txt CSS-bestanden gauges-ss.css Dit bestand wordt automatisch op intenet gezet door de instelling in Cumulus Configuration Internet (tablad files ). Wat i nu doe is dat het bestand gaugest-ss.htm één keer gedownload naar de site. Als dat is gebeurt, ga ik dit bestand als standaard gebruiken en eventueel modificeren. Dus gauges-ss.htm wordt het standaard bestand en wordt gaugest-ss.htm niet meer gebruikt. Dit bestand is aangepast door Gaike. Dit bestand is het moeder exemplaar. Deze wordt via Cumuls gedownload als gauges-ss.htm bestand. Veranderingen op dit bestand dient via dit file-bestand te worden gedownload (via Cumulus) Is dus nodig. Dit bestand is aangepast door Gaike. Dit bestand wordt automatisch op intenet gezet door de instelling in Cumulus Configuration Internet (tablad files ). Dit bestand is het moeder exemplaar. Deze wordt via Cumuls gedownload als realtimegauges.txt bestand. Veranderingen op dit bestand dient via dit file-bestand te worden gedownload (via Cumulus). Dit bestand heb ik met de hand gekopieerd naar C:\Comulus\Web\ realtimegaugest.txt Is dus nodig. Het bepalen van de gebruikte fonttype, inc. de grootte, enz. Tevens wordt hier de grote van de grafieken bepaald, enz. Grote van grafiek wordt bepaald door de volgende code:.tipimg{ width: 438px; veranderen in 638 height: 175px; veranderen in 250 Is dus nodig. Font- bestanden lcdmono2ultra-webfont.eot lcdmono2ultra-webfont.svg lcdmono2ultra-webfont.ttf lcdmono2ultra-webfont.woff Fonttype ttf, welke een digitaal uiterlijk heeft Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 17

19 script-directory (*.js bestanden) gauges.js Hier wordt bepaald hoe de meters er uitzien, update-tijd, enz.: ar strings = LANG.NL, imgpathurl: '../images/' oldgauges: '../gauges.htm' Counter: 10 Grootte: 221, Enz., Tevens wordt hier aangegeven welke meters zichtmaar worden weergegeven. Het bepaald niet de volgorde op het scherm Bepaalt ook wat de maximale meter-waarde is. Bijvoorbeeld dat de temperatuur tussen 0 de 40 is Hier heeft Henk dus bepaald welke meters er zichtbaar zijn en de uitslagen voor de zon en UV. Is dus nodig. Dit bestand is aangepast door Gaike. jquery min.js Uitgeklede versie van jquery js Is dus nodig. language.js RGraph.common.core.min.js RGraph.radar.min.js steelseries.min.js windrose.js Wordt gebruikt om vertalingen van woorden in de site uit te voeren. Ik gebruik het bestand language_nl.js. In gaugesss.htm is de verwijzing ook naar language_nl.js Is dus nodig. Dit bestand is aangepast door Gaike. Uitgeklede versie van RGraph.common.core.js Is dus nodig. Uitgeklede versie van RGraph.radar.core.js Is dus nodig. Uitgeklede versie van steelseries.js. Is dus nodig. Voor de opmaak van de windrose Is dus nodig. /free_gauges/instruction s.html /gauge/ oad/ gspot.com/ gspot.com/2011/04/steel series-javascriptedition.html Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 18

20 2.4 Vragen over Gauges-ss vers Vraag d.d. 12feb-2013 Subject: Version up and running gwheelo wrote: Mark - once again you nailed it! v gwheelo I have a questio about your Gauges. In your gaues you have in the wind-direction "Latest"in red text en "Average" in bleu, this because of the nedeals of the gauges. Where did you difined the colors (file)? Second question, is the Gauges Windrose you put in the text "Windrun / km" where (file) did you include this text. Home: Antwoord d.d Hello Gaike - Look for this section in gauges.js: drawdir = function () { var params = extend(commonparams); create wind direction/compass radial gauge if ($('#canvas_dir').length) { params.pointertypelatest = gauge.pointer; default TYPE1, params.pointertypeaverage = steelseries.pointertype.type8; default TYPE8 params.pointercoloraverage = steelseries.colordef.blue; params.degreescale = true; Show degree scale rather than ordinal directions params.pointsymbols = strings.compass; params.rosevisible = false; params.lcdtitlestrings = _dir.titles; params.usecolorlabels = true; _gaugedir = new steelseries.winddirection('canvas_dir', params); _gaugedir.setvalueaverage(+_dir.valueaverage); _gaugedir.setvaluelatest(+_dir.valuelatest); Your code will have: params.usecolorlabels = false; Change the = false to = true **************************************************************************** The text "Windrun / km" comes from a combination of html, css, and the gauges.js. It does not appear in Marks code so you will have to work out the method which works best for you. My version is abit complex as it must be able to switch languages. If your page is limited to a single language it should be a great deal easier to implement. Here is the html part I use: <!--End units_row--> <div id="odo"><!--<span id="radar_title"></span>--> </div> <div id="rose_title_details"><span id="rose_hour_info"></span> <span id="rose_hours"></span> <span id="hour_text"></span></div> Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 19

21 <div id="reaadout"> <!-- <canvas id="canvas_odo" ></canvas> <br>--> <span id="distance"></span> / <span id="windrun_unit"></span> </div> <div class="unitstable"> And here is my gauges.js code (actually this part may be in your language.js file instead - I may have moved this part of the script): function changelang(newlang) { update the gauge titles etc gauges.setlang(newlang); $('#rose_hour_info').html(newlang.rose_past); $('#hour_text').html(newlang.rose_hour); $('#radar_title').html(newlang.rose_title); $('#distance').html(newlang.windrun_title); and this part of the script is in gauges.js: if (_gaugedir) { _rosehours = Math.round(_roseSample/ ); if (document.getelementbyid('rose_hours')) { document.getelementbyid('rose_hours').innerhtml = _rosehours; if (document.getelementbyid('windrun_unit')) { document.getelementbyid('windrun_unit').innerhtml = distancetext; dodir(); I have used css to place the divs exactly where I want them. It is a bit complicated - but using your browser (Mozzilla Firefox, for example) while viewing my page click "Tools --> Developer Tools - - View Source" to view my html code. While viewing the code click on any of the linked files, for instance: <script src="../cumulus/gauges/scripts/gaugesxx.js"></script> to view and copy the code. I am not a very good example to copy as I wander away from Mark's standard code and my code is notoriously sloppy and very unprofessional. Best of luck and don't hesitate to ask more questions. George Wheelock Washington D.C. USA & L'Estartit, Spain Mijn antwoord 14-feb-2013 Thanks for the extensive explanation. I have change de color of the wind-dir with success. On the rose I will try. As you say, it is more complicated. I only us one language and do not use PHP. So I will experiment with your explanation. If you have some tips, just to add the text Wind-Run in one language, I will appreciate that. Overall thank for the help!!! Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 20

22 Vraag 13-feb-2013 Gaike Message subject: Re: SteelSeries Announcements Folder: Sent messages Subject: SteelSeries Announcements I have a question about the graphic from Cumulus. When I move the mouse-cursor over a gauges I see the graphic from cumulus. I want to change de size of the graphics. Where and in what file do I change the graphics of the Cumulus when I move the mouse-cursor over one off the gaugess Greatings Gaike : ges-ss.htm Antwoord 14-feb-2013 mcrossley Message subject: Re: SteelSeries Announcements Folder: Inbox In gauges.css.tipimg{ width: 438px; height: 175px; Sent: Thu Feb 14, :26 pm Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 21

23 2.5 Gauges.ss /*! * A starter gauges page for Cumulus and Weather Display, based * on the JavaScript SteelSeries gauges by Gerrit Grunwald. * * Created by Mark Crossley, 02 February 2013 * * File encoding = UTF-8 * */ /*globals steelseries, LANG, changelang, radar*/ /*jshint jquery:true */ LANG.NL../images../gauges.htm var gauges = (function () { var strings = LANG.EN, Set to your default language. Store all the strings in one object config = { Script configuration parameters you may want to 'tweak' In de oude Gauges_SS was de waarde 251. Nu is dat 221 scriptver : ' ', geworden. weatherprogram : 0, Set 0=Cumulus, 1=Weather Display, 2=VWS imgpathurl : '../images/', *** Change this to the relative path for your 'Trend' graph images oldgauges : '../gauges.htm', *** Change this to the relative path for your 'old' gauges page. forecastwidth : 550, width of the forecast display (default value 550 pixels) counter : 10, download data counter (secs, default 60) gaugesize : 221, size of gauges (default 221) - Odd numbers tend to render better than even gaugesizemobile : 161, size of gauges used on mobile devices (default 161) graphupdatetime : 15, period of popup data graph refesh, in minutes (default 15) stationtimeout : 3, period of no data change before we declare the station offline, in minutes (default 3) pageupdatelimit : 20, period after which the page stops automatically updating, in minutes (default 20), - set to 0 (zero) to disable this feature pageupdatepswd : 'its-me', password to over ride the page updates timeout, do not set to blank even if you do not use a password digitalfont : true, Font control for the gauges & timer digitalforecast : true, Font control for the status display, set this to false for languages that use accented characters in the forecasts showpopupdata : true, Popup data displayed showpopupgraphs : true, If popup data is displayed, show the graphs? showwindvariation : true, Show variation in wind direction over the last 10 minutes on the direction gauge showindoortemphum : true, Show the indoor temperature/humidity options showuvgauge : true, Display the UV Index gauge showsolargauge : true, Display the Solar gauge solargaugescalemax: 1400, Max value to be shown on the solar gauge - theoretical max without atmosphere ~ 1374 W/m² - but Davis stations can read up to 1800 showrosegauge : true, Show the optional Wind Rose gauge showrosegaugeodo : true, Show the optional Wind Rose gauge Windrun Odometer showgaugeshadow : true, Show a drop shadow outside the gauges The realtime files should be absolute paths, "/xxx.txt" refers to the public root of your web server realtimeurl_cumulus: 'realtimegauges.txt', *** Cumulus Users: Change to your location of the realtime file *** realtimeurl_wd : 'customclientraw.txt', *** WD Users: Change to your location of the ccr file *** realtimeurl_vws : 'steelseriesvwsjson.php', *** VWS Users: Change to your location of the JSON script generator *** usecookies : true, Persistently store user preferences in a cookie? tipimages : [], dewdisplaytype : 'app' Initial 'scale' to display 'dew' - Dewpoint on the 'dewpoint' gauge. 'app' - Apparent temperature 'wnd' - Wind Chill 'hea' - Heat Index 'hum' - Humidex, test for canvas support before we do anything else, especially reference steelseries which will cause the script to abort! _canvas = (!!document.createelement("canvas").getcontext? true : (function () { $('body').html(strings.canvasnosupport); settimeout(function () { window.location = config.oldgauges; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 22

24 , 3000); return false; ()) ), Gauge global look'n'feel settings gauge = { minmaxarea : 'rgba(212, 132, 134, 0.3)', area sector for todays max/min. (red, green, blue, transparency) windavgarea : 'rgba(132, 212, 134, 0.3)', framedesign : steelseries.framedesign.tilted_gray, background : steelseries.backgroundcolor.beige, foreground : steelseries.foregroundtype.type1, pointer : steelseries.pointertype.type8, pointercolour : steelseries.colordef.red, gaugetype : steelseries.gaugetype.type4, lcdcolour : steelseries.lcdcolor.standard, knob : steelseries.knobtype.standard_knob, knobstyle : steelseries.knobstyle.silver, labelformat : steelseries.labelnumberformat.standard, ticklabelorientation : steelseries.ticklabelorientation.horizontal, was.normal up to v1.6.4 rainusesectioncolours : false, Only one of these colour options should be true rainusegradientcolours : false, Set both to false to use the pointer colour temptrendvisible : true, pressuretrendvisible : true, uvlcddecimals : 1, default gauge ranges - before auto-scaling/ranging tempscaledefminc : -20, tempscaledefmaxc : 40, tempscaledefminf : 0, tempscaledefmaxf : 100, baroscaledefminhpa : 990, baroscaledefmaxhpa : 1030, baroscaledefminkpa : 99, baroscaledefmaxkpa : 103, baroscaledefmininhg : 29.2, baroscaledefmaxinhg : 30.4, windscaledefmaxmph : 20, windscaledefmaxkts : 20, windscaledefmaxms : 10, windscaledefmaxkmh : 30, uvscaledefmax : 16, commonparams = { Common parameters for all the SteelSeries gauges size : config.gaugesize, gaugetype : gauge.gaugetype, minvalue : 0, nicescale : true, ledvisible : false, framedesign : gauge.framedesign, backgroundcolor : gauge.background, foregroundtype : gauge.foreground, pointertype : gauge.pointer, pointercolor : gauge.pointercolour, knobtype : gauge.knob, knobstyle : gauge.knobstyle, lcdcolor : gauge.lcdcolour, lcddecimals : 1, digitalfont : config.digitalfont, ticklabelorientation : gauge.ticklabelorientation, labelnumberformat : gauge.labelformat, _firstrun = true, Used to setup units & scales etc _userunitsset = false, Tracks if the display units have been set by a user preference _refreshgraphs = false, Flag to signal refesh of the pop data graphs data = {, Stores all the values from realtime.txt Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 23

25 _countdowntimer, _count = 11, countdown tracker, initially set to download timeout value _httperror = 0, global to track download errors _pageupdateparam, Stores the password if any from the page URL _statusstr = strings.statusstr, _cachedefeat = '?' + (new Date()).getTime().toString(), used to force reload of popup data graphs, _pageloaded = new Date(), _displayunits = null, Stores the display units cookie settings _displaydewgauge = null, Stores the dewppoint gauge preferred scale _temp = {, _dew = {, _wind = {, _dir = {, _rain = {, _rrate = {, _baro = {, _hum = {, _uv = {, _solar = {, _led = {, _sampledate, _realtimever = 9, minimum version of the realtime JSON file required _cumuluslink = '<a href=" target="_blank">cumulus</a>', _wdisplaylink = '<a href=" target="_blank">weather Display</a>', _vwslink = '<a href=" target="_blank">virtual Weather Station</a>', _gaugetemp, _gaugedew, _gaugerain, _gaugerrate, _gaugehum, _gaugebaro, _gaugewind, _gaugedir, _gaugestatus, _gaugetimer, _gaugeuv, _gaugesolar, _gaugeled, /* _imgbackground, Uncomment if using a background image on the gauges */ Nothing below this line needs to be modified for the gauges as supplied - unless you really know what you are doing - but remember, if you break it, it's up to you to fix it ;) init() Called when the document is ready, pre-draws the Status Display then calls the first Ajax fetch of realtimegauges.txt. First draw of the gauges now defered until the Ajax data is available as a 'speed up'. init = function () { Cumulus, Weather Display, or VWS? if (config.weatherprogram === 0) { config.realtimeurl = config.realtimeurl_cumulus; else if (config.weatherprogram === 1) { config.realtimeurl = config.realtimeurl_wd; else if (config.weatherprogram === 2) { config.realtimeurl = config.realtimeurl_vws; config.showrosegauge = false; no windrose data from VWS else { config.realtimeurl = null; Set the language changelang(strings); Use smaller gauges when running on phone devices if (/iphone ipad ipod android blackberry mini webos windows\sce palm/i.test(navigator.useragent.tolowercase())) { commonparams.size = config.gaugesizemobile; add a shadow to the gauge var offset = Math.ceil(commonParams.size * 0.015); commonparams.boxshadow = { 'box-shadow': '#888 ' + offset + 'px ' + offset + 'px ' + offset + 'px', 'border-radius': Math.floor(commonParams.size / 2) + 'px' Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 24

26 ; Logo images to 'personalise' the gauge backgrounds To add a logo to a gauge, add the parameter: params.customlayer = _imgsmall; to the corresponding drawxxxx() function below. These are for demo only, to add them remove the comments around the following lines, and the _imgbackground definition line above... /* _imgbackground = document.createelement('img'); small logo $(_imgbackground).attr('src', config.imgpathurl + 'logosmall.png'); */ End of logo images the trend images to be used for the popup data, used in conjuction with config.imgpathurl by default this is configured for the Cumulus 'standard' web site ** If you specify one image in a sub-array, then you MUST provide images for all the other sub-elements if (config.weatherprogram === 0) { config.tipimgs for Cumulus users using the 'default' weather site config.tipimgs = [ ['temp.png', 'intemp.png'], Temperature: outdoor, indoor Temperature: dewpoint, apparent, windchill, heatindex, humidex ['temp.png', 'temp.png', 'temp.png', 'temp.png', 'temp.png'], 'raint.png', Rainfall 'rain.png', Rainfall rate ['hum.png', 'hum.png'], Humidity: outdoor, indoor 'press.png', Pressure 'wind.png', Wind speed 'windd.png', Wind direction (config.showuvgauge? 'uv.png' : null), UV (config.showsolargauge? 'solar.png' : null), Solar rad (config.showrosegauge? 'windd.png' : null) Wind direction for Wind Rose ]; else if (config.weatherprogram === 1) { config.tipimgs for Weather Display users with wxgraph config.tipimgs = [ ['temp+hum_24hr.php', 'indoor_temp_24hr.php'], Temperature: outdoor, indoor Temperature: dewpnt, apparent, windchill, HeatIndx, humidex ['temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php'], 'rain_24hr.php', Rainfall 'rain_1hr.php', Rainfall rate ['humidity_1hr.php', 'humidity_7days.php'], Humidity: outdoor, indoor 'baro_24hr.php', Pressure 'windgust_1hr.php', Wind speed 'winddir_24hr.php', Wind direction (config.showuvgauge? 'uv_24hr.php' : null), UV graph if UV sensor is present =null if no UV sensor (config.showsolargauge? 'solar_24hr.php' : null), Solar rad graph if Solar sensor is present Solar =null if no Solar sensor (config.showrosegauge? 'winddir_24hr.php' : null) Wind direction if Radar is enabled =null if Radar is disabled ]; else if (config.weatherprogram === 2) { config.tipimgs for VWS users config.tipimgs = [ ['vws742.jpg', 'vws741.jpg'], Temperature: outdoor, indoor Temperature: dewpnt, apparent, windchill, HeatIndx, humidex ['vws757.jpg', 'vws762.jpg', 'vws754.jpg', 'vws756.jpg', null], 'vws744.jpg', Rainfall 'vws859.jpg', Rainfall rate ['vws740.jpg', 'vws739.jpg'], Humidity: outdoor, indoor 'vws758.jpg', Pressure 'vws737.jpg', Wind speed 'vws736.jpg', Wind direction (config.showuvgauge? 'vws752.jpg' : null), UV graph if UV sensor is present =null if no UV sensor (config.showsolargauge? 'vws753.jpg' : null), Solar rad graph if Solar sensor is present Solar =null if no Solar sensor (config.showrosegauge? 'vws736.jpg' : null) Wind direction if Radar is enabled =null if Radar is disabled ]; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 25

27 else { config.tipimgs - unknown config.tipimgs = [ [null, null], [null, null, null, null, null], null, null, [null, null], null, null, null, null, null, null ]; define temperature gauge start values _temp.sections = createtempsections(true); _temp.areas = []; _temp.minvalue = gauge.tempscaledefminc; _temp.maxvalue = gauge.tempscaledefmaxc; _temp.title = strings.temp_title_out; _temp.value = gauge.tempscaledefminc ; _temp.maxminvisible = false; _temp.selected = 'out'; define dew point gauge start values _dew.sections = createtempsections(true); _dew.areas = []; _dew.minvalue = gauge.tempscaledefminc; _dew.maxvalue = gauge.tempscaledefmaxc; _dew.value = gauge.tempscaledefminc ; Has the end user selected a prefered 'scale' before _displaydewgauge = getcookie('dewgauge'); Set 'dewgauge' radio buttons to match prefered units if (_displaydewgauge!== null) { _dew.selected = _displaydewgauge; else { _dew.selected = config.dewdisplaytype; setradiocheck('rad_dew', _dew.selected); switch (_dew.selected) { case 'dew': _dew.title = strings.dew_title; _dew.image = 0; case 'app': _dew.title = strings.apptemp_title; _dew.image = 1; case 'wnd': _dew.title = strings.chill_title; _dew.image = 2; case 'hea': _dew.title = strings.heat_title; _dew.image = 3; case 'hum': _dew.title = strings.humdx_title; _dew.image = 4; _dew.minmeasuredvisible = false; _dew.maxmeasuredvisible = false; define rain gauge start values _rain.maxvalue = 10; _rain.value = ; _rain.title = strings.rain_title; _rain.lcddecimals = 1; _rain.scaledecimals = 1; _rain.labelnumberformat = gauge.labelformat; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 26

28 _rain.sections = (gauge.rainusesectioncolours? createrainfallsections(true) : []); _rain.valgrad = (gauge.rainusegradientcolours? createrainfallgradient(true) : null); define rain rate gauge start values _rrate.maxmeasured = 0; _rrate.maxvalue = 10; _rrate.value = ; _rrate.title = strings.rrate_title; _rrate.lcddecimals = 1; _rrate.scaledecimals = 0; _rrate.labelnumberformat = gauge.labelformat; _rrate.sections = createrainratesections(true); define humidity gauge start values _hum.areas = []; _hum.value = ; _hum.title = strings.hum_title_out; _hum.selected = 'out'; define pressure/barometer gauge start values _baro.sections = []; _baro.areas = []; _baro.minvalue = gauge.baroscaledefminhpa; _baro.maxvalue = gauge.baroscaledefmaxhpa; _baro.value = _baro.minvalue ; _baro.title = strings.baro_title; _baro.lcddecimals = 1; _baro.scaledecimals = 0; _baro.labelnumberformat = gauge.labelformat; define wind gauge start values _wind.maxvalue = gauge.windscaledefmaxkph; _wind.areas = []; _wind.maxmeasured = 0; _wind.value = ; _wind.title = strings.wind_title; define wind direction gauge start values _dir.valuelatest = 0; _dir.valueaverage = 0; _dir.titles = [strings.latest_web, strings.tenminavg_web]; define UV start values _uv.value = ; _uv.title = strings.uv_title; _uv.sections = [ steelseries.section(0, 2.9, '#289500'), steelseries.section(2.9, 5.8, '#f7e400'), steelseries.section(5.8, 7.8, '#f85900'), steelseries.section(7.8, 10.9, '#d8001d'), steelseries.section(10.9, 20, '#6b49c8') ]; _uv.usesections = true; _uv.maxvalue = 16; define Solar start values _solar.value = ; _solar.title = strings.solar_title; _solar.units = 'W/m²'; _solar.sections = [ steelseries.section(0, 600, 'rgba(40,149,0,0.3)'), steelseries.section(600, 800, 'rgba(248,89,0,0.3)'), steelseries.section(800, 1000, 'rgba(216,0,29,0.3)'), steelseries.section(1000, 1800, 'rgba(107,73,200,0.3)') ]; _solar.lcddecimals = 0; _solar.maxvalue = config.solargaugescalemax; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 27

29 define led indicator _led.on = false; _led.blink = false; _led.oldblink = _led.blink; _led.title = strings.led_title; _led.colour = steelseries.ledcolor.green_led; _led.oldcolour = _led.colour; set some default units DO NOT CHANGE THESE - THE SCRIPT DEPENDS ON THESE DEFAULTS the units actually displayed, will be read from the realtime.txt file, or from the users last visit Get the display units the user last used when they visited before - if present _displayunits = getcookie('units'); Set 'units' radio buttons to match prefered units if (_displayunits!== null) { User wants specific units _userunitsset = true; temperature setradiocheck('rad_unitstemp', _displayunits.temp); data.tempunit = 'Â ' + _displayunits.temp; rain setradiocheck('rad_unitsrain', _displayunits.rain); data.rainunit = _displayunits.rain; pressure setradiocheck('rad_unitspress', _displayunits.press); data.pressunit = _displayunits.press; wind setradiocheck('rad_unitswind', _displayunits.wind); data.windunit = _displayunits.wind; _displayunits.windrun = getwindrununits(data.windunit); else { Set the defaults to metric ) _displayunits = { temp: 'C', rain: 'mm', press: 'hpa', wind: 'km/h', windrun: 'km' ; data.tempunit = 'Â C'; data.rainunit = 'mm'; data.pressunit = 'hpa'; data.windunit = 'km/h'; remove indoor temperature/humidity options? if (!config.showindoortemphum) { $('#rad_temp1').remove(); $('#lab_temp1').remove(); $('#rad_temp2').remove(); $('#lab_temp2').remove(); $('#rad_hum1').remove(); $('#lab_hum1').remove(); $('#rad_hum2').remove(); $('#lab_hum2').remove(); remove the UV gauge? if (!config.showuvgauge) { $('#canvas_uv').parent().remove(); remove the Solar gauge? Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 28

30 if (!config.showsolargauge) { $('#canvas_solar').parent().remove(); remove the Wind Rose? if (!config.showrosegauge) { $('#canvas_rose').parent().remove(); $('#rgraph_attrib').remove(); else if (radar!== "undefined") { radar.init(commonparams.size, config.showrosegaugeodo); radar.settitle(strings.windrose); radar.setcompassstring(strings.compass); enable popup data ddimgtooltip.showtips = config.showpopupdata; if (config.showpopupgraphs) { Note the number of array elements must match 'i' in ddimgtooltip.tiparray() ddimgtooltip.tiparray[0][0] = (config.tipimgs[0][0]!== null? '' : null); ddimgtooltip.tiparray[1][0] = (config.tipimgs[1][0]!== null? '' : null); ddimgtooltip.tiparray[2][0] = (config.tipimgs[2]!== null? '' : null); ddimgtooltip.tiparray[3][0] = (config.tipimgs[3]!== null? '' : null); ddimgtooltip.tiparray[4][0] = (config.tipimgs[4][0]!== null? '' : null); ddimgtooltip.tiparray[5][0] = (config.tipimgs[5]!== null? '' : null); ddimgtooltip.tiparray[6][0] = (config.tipimgs[6]!== null? '' : null); ddimgtooltip.tiparray[7][0] = (config.tipimgs[7]!== null? '' : null); ddimgtooltip.tiparray[8][0] = (config.tipimgs[8]!== null? '' : null); ddimgtooltip.tiparray[9][0] = (config.tipimgs[9]!== null? '' : null); ddimgtooltip.tiparray[10][0] = (config.tipimgs[10]!== null? '' : null); draw the status gadgets first, they will display any errors in the intial setup drawled(); drawstatus(); drawtimer(); getrealtime();, drawxxxx functions perform the initial construction of the gauges drawled = function () { create led indicator if ($('#canvas_led').length) { _gaugeled = new steelseries.led( 'canvas_led', { size : 25, ledcolor : _led.colour ); if (_led.on) { _gaugeled.toggleled(); $('#canvas_led').attr('title', _led.title);, drawstatus = function () { create forecast display if ($('#canvas_status').length) { _gaugestatus = new steelseries.displaysingle( 'canvas_status', { width : config.forecastwidth, height : 25, lcdcolor : gauge.lcdcolour, unitstringvisible : false, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 29

31 , value : _statusstr, digitalfont : config.digitalforecast, valuesnumeric : false, autoscroll : true, alwaysscroll : false ); drawtimer = function () { create timer display if ($('#canvas_timer').length) { _gaugetimer = new steelseries.displaysingle( 'canvas_timer', { width : (config.counter.tostring().length * 13) + (strings.timer.length * 6), height : 25, lcdcolor : gauge.lcdcolour, lcddecimals : 0, unitstring : strings.timer, unitstringvisible : true, digitalfont : config.digitalfont, value : _count );, drawtemp = function () { var params = extend(commonparams); create temperature radial gauge if ($('#canvas_temp').length) { params.section = _temp.sections; params.area = _temp.areas; params.minvalue = _temp.minvalue; params.maxvalue = _temp.maxvalue; params.thresholdvisible = false; params.minmeasuredvaluevisible = _temp.maxminvisible; params.maxmeasuredvaluevisible = _temp.maxminvisible; params.titlestring = _temp.title; params.unitstring = data.tempunit; params.trendvisible = gauge.temptrendvisible; params.customlayer = _imgbackground; uncomment to add a background image - See Logo Images above _gaugetemp = new steelseries.radial('canvas_temp', params); _gaugetemp.setvalue(_temp.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_temp').css(commonparams.boxshadow);, drawdew = function () { var params = extend(commonparams); create dew point radial gauge if ($('#canvas_dew').length) { params.section = _dew.sections; params.area = _dew.areas; params.minvalue = _dew.minvalue; params.maxvalue = _dew.maxvalue; params.thresholdvisible = false; params.titlestring = _dew.title; params.unitstring = data.tempunit; _gaugedew = new steelseries.radial('canvas_dew', params); _gaugedew.setvalue(_dew.value); add a shadow to the gauge Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 30

32 if (config.showgaugeshadow) { $('#canvas_dew').css(commonparams.boxshadow);, drawrain = function () { var params = extend(commonparams); create rain radial bargraph gauge if ($('#canvas_rain').length) { params.maxvalue = _rain.maxvalue; params.thresholdvisible = false; params.titlestring = _rain.title; params.unitstring = data.rainunit; params.valuecolor = gauge.pointercolour; params.valuegradient = _rain.valgrad; params.usevaluegradient = gauge.rainusegradientcolours; params.usesectioncolors = gauge.rainusesectioncolour; params.usesectioncolors = gauge.rainusesectioncolours; params.labelnumberformat = _rain.labelnumberformat; params.fractionalscaledecimals = _rain.scaledecimals; _gaugerain = new steelseries.radialbargraph('canvas_rain', params); _gaugerain.setvalue(_rain.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_rain').css(commonparams.boxshadow);, drawrrate = function () { var params = extend(commonparams); create rain rate radial gauge if ($('#canvas_rrate').length) { params.section = _rrate.sections; params.maxvalue = _rrate.maxvalue; params.thresholdvisible = false; params.maxmeasuredvaluevisible = true; params.titlestring = _rrate.title; params.unitstring = data.rainunit + '/h'; params.lcddecimals = _rrate.lcddecimals; params.labelnumberformat = _rrate.labelnumberformat; params.fractionalscaledecimals = _rrate.scaledecimals; _gaugerrate = new steelseries.radial('canvas_rrate', params); _gaugerrate.setmaxmeasuredvalue(_rrate.maxmeasured); _gaugerrate.setvalue(_rrate.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_rrate').css(commonparams.boxshadow);, drawhum = function () { var params = extend(commonparams); create humidity radial gauge if ($('#canvas_hum').length) { params.section = [steelseries.section(0, 20, 'rgba(255,255,0,0.3)'), steelseries.section(20, 80, 'rgba(0,255,0,0.3)'), steelseries.section(80, 100, 'rgba(255,0,0,0.3)')]; params.area = _hum.areas; params.maxvalue = 100; params.thresholdvisible = false; params.titlestring = _hum.title; params.unitstring = '%'; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 31

33 _gaugehum = new steelseries.radial('canvas_hum', params); _gaugehum.setvalue(_hum.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_hum').css(commonparams.boxshadow);, drawbaro = function () { var params = extend(commonparams); create pressure/barometric radial gauge if ($('#canvas_baro').length) { params.section = _baro.sections; params.area = _baro.areas; params.minvalue = _baro.minvalue; params.maxvalue = _baro.maxvalue; params.nicescale = false; params.thresholdvisible = false; params.titlestring = _baro.title; params.unitstring = data.pressunit; params.lcddecimals = _baro.lcddecimals; params.trendvisible = gauge.pressuretrendvisible; params.labelnumberformat = _baro.labelnumberformat; params.fractionalscaledecimals = _baro.scaledecimals; _gaugebaro = new steelseries.radial('canvas_baro', params); _gaugebaro.setvalue(_baro.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_baro').css(commonparams.boxshadow);, drawwind = function () { var params = extend(commonparams); create wind speed radial gauge if ($('#canvas_wind').length) { params.area = _wind.areas; params.maxvalue = _wind.maxvalue; params.nicescale = false; params.thresholdvisible = false; params.maxmeasuredvaluevisible = true; params.titlestring = _wind.title; params.unitstring = data.windunit; _gaugewind = new steelseries.radial('canvas_wind', params); _gaugewind.setmaxmeasuredvalue(_wind.maxmeasured); _gaugewind.setvalue(_wind.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_wind').css(commonparams.boxshadow);, drawdir = function () { var params = extend(commonparams); create wind direction/compass radial gauge if ($('#canvas_dir').length) { params.pointertypelatest = gauge.pointer; default TYPE1, params.pointertypeaverage = steelseries.pointertype.type8; default TYPE8 params.pointercoloraverage = steelseries.colordef.blue; params.degreescale = true; Show degree scale rather than ordinal directions params.pointsymbols = strings.compass; params.rosevisible = false; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 32

34 params.lcdtitlestrings = _dir.titles; params.usecolorlabels = false; _gaugedir = new steelseries.winddirection('canvas_dir', params); _gaugedir.setvalueaverage(+_dir.valueaverage); _gaugedir.setvaluelatest(+_dir.valuelatest); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_dir').css(commonparams.boxshadow);, drawuv = function () { var params = extend(commonparams); create UV bargraph gauge if ($('#canvas_uv').length) { params.gaugetype = steelseries.gaugetype.type3; params.maxvalue = gauge.uvscaledefmax; params.titlestring = _uv.title; params.nicescale = false; params.section = _uv.sections; params.usesectioncolors = _uv.usesections; params.lcddecimals = gauge.uvlcddecimals; _gaugeuv = new steelseries.radialbargraph('canvas_uv', params); _gaugeuv.setvalue(_uv.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_uv').css(commonparams.boxshadow);, drawsolar = function () { var params = extend(commonparams); create Solar gauge if ($('#canvas_solar').length) { params.section = _solar.sections; params.maxvalue = _solar.maxvalue; params.titlestring = _solar.title; params.unitstring = _solar.units; params.nicescale = false; params.thresholdvisible = false; params.lcddecimals = _solar.lcddecimals; _gaugesolar = new steelseries.radial('canvas_solar', params); _gaugesolar.setvalue(_solar.value); add a shadow to the gauge if (config.showgaugeshadow) { $('#canvas_solar').css(commonparams.boxshadow);, doupdate() called to update all the gauges with fresh data, then start the timer for the next update doupdate = function () { first time only, setup units etc if (_firstrun) { dofirst(); if (_refreshgraphs) { _cachedefeat = '?' + (new Date()).getTime().toString(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 33

35 if (_gaugetemp) { dotemp(); if (_gaugedew) { dodew(); if (_gaugebaro) { dobaro(); if (_gaugerain) { dorain(); if (_gaugerrate) { dorrate(); if (_gaugehum) { dohum(); if (_gaugewind) { dowind(); if (_gaugedir) { dodir(); if (_gaugeuv) { douv(); if (_gaugesolar) { dosolar(); if (config.showrosegauge && typeof radar!== "undefined") { dorose(); if (_refreshgraphs) { _refreshgraphs = false; if (_firstrun && config.showpopupdata && config.showpopupgraphs) { now download the trend images - has to be done here as dofirst may remove elements from the page - and we delay the download of the images speeding up page display $('#imgtip0_img').attr('src', config.imgpathurl + config.tipimgs[0][0] + _cachedefeat); $('#imgtip1_img').attr('src', config.imgpathurl + config.tipimgs[1][_dew.image] + _cachedefeat); $('#imgtip2_img').attr('src', config.imgpathurl + config.tipimgs[2] + _cachedefeat); $('#imgtip3_img').attr('src', config.imgpathurl + config.tipimgs[3] + _cachedefeat); $('#imgtip4_img').attr('src', config.imgpathurl + config.tipimgs[4][0] + _cachedefeat); $('#imgtip5_img').attr('src', config.imgpathurl + config.tipimgs[5] + _cachedefeat); $('#imgtip6_img').attr('src', config.imgpathurl + config.tipimgs[6] + _cachedefeat); $('#imgtip7_img').attr('src', config.imgpathurl + config.tipimgs[7] + _cachedefeat); $('#imgtip8_img').attr('src', config.imgpathurl + config.tipimgs[8] + _cachedefeat); $('#imgtip9_img').attr('src', config.imgpathurl + config.tipimgs[9] + _cachedefeat); $('#imgtip10_img').attr('src', config.imgpathurl + config.tipimgs[10] + _cachedefeat); kick off a timer for popup graphic updates setinterval(function () { _refreshgraphs = true;, config.graphupdatetime * 60 * 1000); if (_firstrun) { _firstrun = false; _count = config.counter; countdown();, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 34

36 getrealtime() fetches the realtimegauges.txt file from the server getrealtime = function () { setstatus(strings.statusmsg); _count = 11; 10 seconds timeout countdown(); $.ajax({url: config.realtimeurl, datatype: 'text', cache: false, success: checkrtresp, error: checkrterror, timeout: );, checkrtresp() called by the Ajax fetch once data has been downloaded checkrtresp = function (response, status, xhr) { countdown(true); response = response.replace(/[\r\n]/g, ''); _httperror = 0; processdata(response);, checkrterror() called by the Ajax fetch if an error occurs during the fetching realtimegauges.txt checkrterror = function (xhr, status, error) { Clear any existing download timer cleartimeout(_countdowntimer); setled(false, strings.led_title_unknown); _httperror = status + ': ' + error; _count = 11; 10 seconds countdown();, processdata() massages the data returned in realtimegauges.txt, and calls doupdate() to update the page processdata = function (datastr) { var str, dt, tm, today, now, then, tmp, elapsedmins; get the realtime fields into a handy 'data' object try { data = JSON.parse(dataStr); catch (e) { JSON parse bombs if the file is zero length, so start a quickish retry... setstatus(strings.realtimecorrupt); _count = 3; 2 seconds countdown(); return; and check we have the expected number if (data.ver!== undefined && data.ver >= _realtimever) { OK, we have the expected number of data fields mainpulate the last rain time into something more friendly try { str = data.lastraintipiso.split(' '); dt = str[0].replace(/\g, '-').split('-'); WD uses dd/mm/yyyy :( tm = str[1].split(':'); today = new Date(); today.sethours(0, 0, 0, 0); if (data.dateformat === undefined) { data.dateformat = 'y/m/d'; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 35

37 else { frig for WD bug which leaves a trailing % character from the tag data.dateformat = data.dateformat.replace('%', ''); if (data.dateformat === 'y/m/d') { ISO/Cumulus format then = new Date(dt[0], dt[1] - 1, dt[2], tm[0], tm[1], 0, 0); else if (data.dateformat === 'd/m/y') { then = new Date(dt[2], dt[1] - 1, dt[0], tm[0], tm[1], 0, 0); else { m/d/y then = new Date(dt[2], dt[0] - 1, dt[1], tm[0], tm[1], 0, 0); if (then.gettime() >= today.gettime()) { data.lastrained = strings.lastrainedt_info + ' ' + str[1]; else if (then.gettime() >= today.gettime()) { data.lastrained = strings.lastrainedy_info + ' ' + str[1]; else { data.lastrained = then.getdate().tostring() + ' ' + strings.months[then.getmonth()] + ' ' + strings.at + ' ' + str[1]; catch (e) { data.lastrained = data.lastraintipiso; clean up temperature units - remove html encoding if (data.tempunit.length > 1) { clean up temperature units - remove html encoding using old format realtimegaugest.txt data.tempunit.replace(' ', 'Â '); else { using new realtimegaugest.txt with Cumulus > data.tempunit = 'Â ' + data.tempunit; Check for station off-line now = new Date(); tmp = data.timeutc.split(','); _sampledate = Date.UTC(tmp[0], tmp[1] - 1, tmp[2], tmp[3], tmp[4], tmp[5]); if (now - _sampledate > config.stationtimeout * 60 * 1000) { elapsedmins = Math.floor((now - _sampledate) / (1000 * 60)); the realtimegauges.txt file isn't being updated _led.colour = steelseries.ledcolor.red_led; _led.title = strings.led_title_offline; if (elapsedmins < 120) { up to 2 hours ago tm = elapsedmins.tostring() + ' ' + strings.statusminsago; else if (elapsedmins < 2 * 24 * 60) { up to 48 hours ago tm = Math.floor(elapsedMins / 60).toString() + ' ' + strings.statushoursago; else { days ago! tm = Math.floor(elapsedMins / (60 * 24)).toString() + ' ' + strings.statusdaysago; _led.blink = true; data.forecast = strings.led_title_offline + ' ' + strings.statuslastupdate + ' ' + tm; else if (+data.sensorcontactlost === 1) { Fine Offset sensor status _led.colour = steelseries.ledcolor.red_led; _led.title = strings.led_title_lost; _led.blink = true; data.forecast = strings.led_title_lost; else { _led.colour = steelseries.ledcolor.green_led; _led.title = strings.led_title_ok + '. ' + strings.statuslastupdate + ': ' + data.date; _led.blink = false; de-encode the forecast string if required (Cumulus support for extended characters) data.forecast = $('<div/>').html(data.forecast).text(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 36

38 data.forecast.trim(); if (data.pressunit === 'in') { Cumulus pressunit tag value data.pressunit = 'inhg'; if (data.windunit === 'kmh') { WD wind unit omits '/' data.windunit = 'km/h'; Temperature data conversion for display required? if (data.tempunit.indexof(_displayunits.temp) === -1 && _userunitsset) { temp needs converting if (data.tempunit.indexof('c')!== -1) { convtempdata(c2f); else { convtempdata(f2c); else if (_firstrun) { _displayunits.temp = data.tempunit.indexof('c') === -1? 'F' : 'C'; setradiocheck('rad_unitstemp', _displayunits.temp); Rain data conversion for display required? if (data.rainunit!== _displayunits.rain && _userunitsset) { rain needs converting convraindata(_displayunits.rain === 'mm'? in2mm : mm2in); else if (_firstrun) { _displayunits.rain = data.rainunit; setradiocheck('rad_unitsrain', _displayunits.rain); Wind data conversion for display required? if (data.windunit!== _displayunits.wind && _userunitsset) { rain needs converting convwinddata(data.windunit, _displayunits.wind); else if (_firstrun) { _displayunits.wind = data.windunit; _displayunits.windrun = getwindrununits(data.windunit); setradiocheck('rad_unitswind', _displayunits.wind); Pressure data conversion for display required? if (data.pressunit!== _displayunits.press && _userunitsset) { convbarodata(data.pressunit, _displayunits.press); else if (_firstrun) { _displayunits.press = data.pressunit; setradiocheck('rad_unitspress', _displayunits.press); setled(true, _led.title); setstatus(data.forecast); doupdate(); else { set an error message if (data.ver < _realtimever) { _gaugetimer.setvalue(0); setstatus('your ' + config.realtimeurl.substr(config.realtimeurl.lastindexof('/') + 1) + ' file template needs updating!'); return; else { oh-oh! The number of data fields isn't what we expected setstatus(strings.realtimecorrupt); setled(false, strings.led_title_unknown); _count = 4; 3 second retry countdown(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 37

39 , setstatus() applies the supplied string to the status LCD display setstatus = function (str) { _statusstr = str; if (_gaugestatus) { _gaugestatus.setvalue(str);, setled() sets the warning LED state and popup text setled = function (onoff, title) { _led.title = title _led.title; if (_gaugeled) { _gaugeled.setledonoff(onoff); if ($('#canvas_led').length) { $('#canvas_led').attr('title', _led.title); if (_led.colour!== _led.oldcolour) { _gaugeled.setledcolor(_led.colour); _led.oldcolour = _led.colour; if (_led.blink!== _led.oldblink) { _gaugeled.blink(_led.blink); _led.oldblink = _led.blink;, countdown() updates the countdown LCD display, and if the count reaches zero fires off a new Ajax update countdown = function (stop) { if (stop!== undefined && stop) { cleartimeout(_countdowntimer); _count = 0; _gaugetimer.setvalue(_count); return; has the page update limit been reached - and no password supplied var now = new Date(); if (stop === false) { we are being called from the LED onclick event, so reset the time the page was loaded _pageloaded = now; if (config.pageupdatelimit > 0 && now > _pageloaded.gettime() + config.pageupdatelimit * && _pageupdateparam!== config.pageupdatepswd) { setstatus(strings.statuspagelimit); _led.colour = steelseries.ledcolor.red_led; _led.title = strings.statuspagelimit; _led.blink = true; setled(true); _count = 1; _gaugetimer.setvalue(0); set an onclick event on the LED to restart $('#canvas_led').click(function () { refresh the page data gauges.countdown(false); and disable the onclick event again $('#canvas_led').off('click'); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 38

40 ); and stop return; _count -= 1; if (_gaugetimer) { _gaugetimer.setvalue(_count); if (_count === 0) { getrealtime(); _count = config.counter; else { _countdowntimer = settimeout(countdown, 1000); if (_httperror!== 0) { setstatus(strings.statushttp + ' - ' + _httperror + ' - ' + strings.statusretryin);, doxxxxx() functions update each relevant gauge with the latest information dotemp = function (radio) { if rad isn't specified, just use existing value var sel = (radio === undefined? _temp.selected : radio.value), popupimg, t1, scalestep, tip; if (sel === 'out') { _temp.minvalue = data.tempunit.indexof('c')!== -1? gauge.tempscaledefminc : gauge.tempscaledefminf; _temp.maxvalue = data.tempunit.indexof('c')!== -1? gauge.tempscaledefmaxc : gauge.tempscaledefmaxf; _temp.low = extractdecimal(data.temptl); _temp.lowscale = getmintemp(); _temp.high = extractdecimal(data.tempth); _temp.highscale = getmaxtemp(); _temp.value = extractdecimal(data.temp); _temp.title = strings.temp_title_out; _temp.loc = strings.temp_out_info; popupimg = 0; _temp.trendval = extractdecimal(data.temptrend); if (gauge.temptrendvisible) { t1 = temptrend(+_temp.trendval, data.tempunit, false); if (t1 > 0) { _temp.trend = steelseries.trendstate.up; else if (t1 < 0) { _temp.trend = steelseries.trendstate.down; else { _temp.trend = steelseries.trendstate.steady; else { _temp.low = extractdecimal(data.intemp); _temp.lowscale = _temp.low; _temp.high = _temp.low; _temp.highscale = _temp.low; _temp.value = _temp.low; _temp.title = strings.temp_title_in; _temp.loc = strings.temp_in_info; popupimg = 1; _temp.maxminvisible = false; if (gauge.temptrendvisible) { _temp.trend = steelseries.trendstate.off; has the gauge type changed? Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 39

41 + '/h';, if (_temp.selected!== sel) { _temp.selected = sel; Change gauge title _gaugetemp.settitlestring(_temp.title); _gaugetemp.setmaxmeasuredvaluevisible(_temp.maxminvisible); _gaugetemp.setminmeasuredvaluevisible(_temp.maxminvisible); if (config.showpopupgraphs && config.tipimgs[0][0]!== null) { $('#imgtip0_img').attr('src', config.imgpathurl + config.tipimgs[0][popupimg] + _cachedefeat); auto scale the ranges if (data.tempunit.indexof('c')!== -1) { scalestep = 10; else { scalestep = 20; while (_temp.lowscale < _temp.minvalue) { _temp.minvalue -= scalestep; if (_temp.highscale <= _temp.maxvalue - scalestep) { _temp.maxvalue -= scalestep; while (_temp.highscale > _temp.maxvalue) { _temp.maxvalue += scalestep; if (_temp.minvalue >= _temp.minvalue + scalestep) { _temp.minvalue += scalestep; if (_temp.minvalue!== _gaugetemp.getminvalue() _temp.maxvalue!== _gaugetemp.getmaxvalue()) { _gaugetemp.setminvalue(_temp.minvalue); _gaugetemp.setmaxvalue(_temp.maxvalue); _gaugetemp.setvalue(_temp.minvalue); if (_temp.selected === 'out') { _temp.areas = [steelseries.section(+_temp.low, +_temp.high, gauge.minmaxarea)]; else { _temp.areas = []; if (gauge.temptrendvisible) { _gaugetemp.settrend(_temp.trend); _gaugetemp.setarea(_temp.areas); _gaugetemp.setvalueanimated(+_temp.value); if (ddimgtooltip.showtips) { update tooltip if (_temp.selected === 'out') { tip = _temp.loc + ' - ' + strings.lowestf_info + ': ' + _temp.low + data.tempunit + ' ' + strings.at + ' ' + data.ttemptl + ' ' + strings.highestf_info + ': ' + _temp.high + data.tempunit + ' ' + strings.at + ' ' + data.ttempth + '<br>' + strings.temp_trend_info + ': ' + temptrend(_temp.trendval, data.tempunit, true) + ' ' + _temp.trendval + data.tempunit else { tip = _temp.loc + ': ' + data.intemp + data.tempunit; $('#imgtip0_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[0][0]!== null) { $('#imgtip0_img').attr('src', config.imgpathurl + config.tipimgs[0][_temp.selected === 'out'? 0 : 1] + _cachedefeat); dodew = function (radio) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 40

42 var tip, if rad isn't specified, just use existing value sel = (radio === undefined? _dew.selected : radio.value), popupimg, scalestep; _dew.lowscale = getmintemp(); _dew.highscale = getmaxtemp(); switch (sel) { case 'dew': dew point _dew.low = extractdecimal(data.dewpointtl); _dew.high = extractdecimal(data.dewpointth); _dew.value = extractdecimal(data.dew); _dew.areas = [steelseries.section(+_dew.low, +_dew.high, gauge.minmaxarea)]; _dew.title = strings.dew_title; _dew.minmeasuredvisible = false; _dew.maxmeasuredvisible = false; popupimg = 0; tip = strings.dew_info + ':' + '<br>' + '- ' + strings.lowest_info + ': ' + _dew.low + data.tempunit + ' ' + strings.at + ' ' + data.tdewpointtl + ' ' + strings.highest_info + ': ' + _dew.high + data.tempunit + ' ' + strings.at + ' ' + data.tdewpointth; case 'app': apparent temperature _dew.low = extractdecimal(data.apptemptl); _dew.high = extractdecimal(data.apptempth); _dew.value = extractdecimal(data.apptemp); _dew.areas = [steelseries.section(+_dew.low, +_dew.high, gauge.minmaxarea)]; _dew.title = strings.apptemp_title; _dew.minmeasuredvisible = false; _dew.maxmeasuredvisible = false; popupimg = 1; tip = tip = strings.apptemp_info + ':' + '<br>' + '- ' + strings.lowestf_info + ': ' + _dew.low + data.tempunit + ' ' + strings.at + ' ' + data.tapptemptl + ' ' + strings.highestf_info + ': ' + _dew.high + data.tempunit + ' ' + strings.at + ' ' + data.tapptempth; case 'wnd': wind chill _dew.low = extractdecimal(data.wchilltl); _dew.high = extractdecimal(data.wchill); _dew.value = extractdecimal(data.wchill); _dew.areas = []; _dew.title = strings.chill_title; _dew.minmeasuredvisible = true; _dew.maxmeasuredvisible = false; popupimg = 2; tip = strings.chill_info + ':' + '<br>' + '- ' + strings.lowest_info + ': ' + _dew.low + data.tempunit + ' ' + strings.at + ' ' + data.twchilltl; case 'hea': heat index _dew.low = extractdecimal(data.heatindex); _dew.high = extractdecimal(data.heatindexth); _dew.value = extractdecimal(data.heatindex); _dew.areas = []; _dew.title = strings.heat_title; _dew.minmeasuredvisible = false; _dew.maxmeasuredvisible = true; popupimg = 3; tip = strings.heat_info + ':' + '<br>' + '- ' + strings.highest_info + ': ' + _dew.high + data.tempunit + ' ' + strings.at + ' ' + data.theatindexth; case 'hum': humidex _dew.low = extractdecimal(data.humidex); _dew.high = extractdecimal(data.humidex); _dew.value = extractdecimal(data.humidex); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 41

43 _dew.areas = []; _dew.title = strings.humdx_title; _dew.minmeasuredvisible = false; _dew.maxmeasuredvisible = false; popupimg = 4; tip = strings.humdx_info + ': ' + _dew.value + data.tempunit; if (_dew.selected!== sel) { _dew.selected = sel; change gauge title _gaugedew.settitlestring(_dew.title); and graph image if (config.showpopupgraphs && config.tipimgs[1][0]!== null) { $('#imgtip1_img').attr('src', config.imgpathurl + config.tipimgs[1][popupimg] + _cachedefeat); save the choice in a cookie setcookie('dewgauge', sel); auto scale the ranges if (data.tempunit.indexof('c')!== -1) { scalestep = 10; else { scalestep = 20; while (_dew.lowscale < _dew.minvalue) { _dew.minvalue -= scalestep; if (_dew.highscale <= _dew.maxvalue - scalestep) { _dew.maxvalue -= scalestep; while (_dew.highscale > _dew.maxvalue) { _dew.maxvalue += scalestep; if (_dew.minvalue >= _dew.minvalue + scalestep) { _dew.minvalue += scalestep; if (_dew.minvalue!== _gaugedew.getminvalue() _dew.maxvalue!== _gaugedew.getmaxvalue()) { _gaugedew.setminvalue(_dew.minvalue); _gaugedew.setmaxvalue(_dew.maxvalue); _gaugedew.setvalue(_dew.minvalue); _gaugedew.setminmeasuredvaluevisible(_dew.minmeasuredvisible); _gaugedew.setmaxmeasuredvaluevisible(_dew.maxmeasuredvisible); _gaugedew.setminmeasuredvalue(+_dew.low); _gaugedew.setmaxmeasuredvalue(+_dew.high); _gaugedew.setarea(_dew.areas); _gaugedew.setvalueanimated(+_dew.value); if (ddimgtooltip.showtips) { update tooltip $('#imgtip1_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[1][popupimg]!== null) { $('#imgtip1_img').attr('src', config.imgpathurl + config.tipimgs[1][popupimg] + _cachedefeat);, dorain = function () { _rain.value = extractdecimal(data.rfall); if (data.rainunit === 'mm') { 10, 20, _rain.maxvalue = Math.max(Math.ceil(_rain.value / 10) * 10, 10); else { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 42

44 inches 1.0, 2.0, , 12.0, 14.0 if (_rain.value < 6) { _rain.maxvalue = Math.max(Math.ceil(_rain.value), 1.0); else { _rain.maxvalue = Math.ceil(_rain.value / 2) * 2; if (_rain.maxvalue!== _gaugerain.getmaxvalue()) { _gaugerain.setvalue(0); _gaugerain.setmaxvalue(_rain.maxvalue); _gaugerain.setvalueanimated(_rain.value); if (ddimgtooltip.showtips) { update tooltip $('#imgtip2_txt').html(strings.lastrain_info + ': ' + data.lastrained); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[2]!== null) { $('#imgtip2_img').attr('src', config.imgpathurl + config.tipimgs[2] + _cachedefeat);, dorrate = function () { var tip; _rrate.value = extractdecimal(data.rrate); _rrate.maxmeasured = extractdecimal(data.rratetm); if (data.rainunit === 'mm') { 10, 20, _rrate.maxvalue = Math.max(Math.ceil(_rrate.maxMeasured / 10) * 10, 10); else { inches 0.5, 1.0, 1.5, _rrate.maxvalue = Math.max(Math.ceil(_rrate.maxMeasured * 2) * 0.5, 0.5); inches 1.0, 2.0, _rrate.maxvalue = Math.max(Math.ceil(_rrate.maxMeasured), 1.0); if (_rrate.maxvalue!== _gaugerrate.getmaxvalue()) { _gaugerrate.setvalue(0); _gaugerrate.setmaxvalue(_rrate.maxvalue); _gaugerrate.setvalueanimated(_rrate.value); _gaugerrate.setmaxmeasuredvalue(_rrate.maxmeasured); if (ddimgtooltip.showtips) { update tooltip tip = strings.rrate_info + ':<br>' + '- ' + strings.maximum_info + ': ' + data.rratetm + ' ' + data.rainunit + '/h ' + strings.at + ' ' + data.trratetm + ' ' + strings.max_hour_info + ': ' + extractdecimal(data.hourlyrainth) + ' ' + data.rainunit + ' ' + strings.at + ' ' + data.thourlyrainth; $('#imgtip3_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[3]!== null) { $('#imgtip3_img').attr('src', config.imgpathurl + config.tipimgs[3] + _cachedefeat);, dohum = function (radio) { if rad isn't specified, just use existing value var sel = (radio === undefined? _hum.selected : radio.value), popupimg, tip; if (sel === 'out') { _hum.value = extractdecimal(data.hum); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 43

45 _hum.areas = [steelseries.section(+extractdecimal(data.humtl), +extractdecimal(data.humth), gauge.minmaxarea)]; _hum.title = strings.hum_title_out; popupimg = 0; else { _hum.value = extractdecimal(data.inhum); _hum.areas = []; _hum.title = strings.hum_title_in; popupimg = 1; if (_hum.selected!== sel) { _hum.selected = sel; Change gauge title _gaugehum.settitlestring(_hum.title); if (config.showpopupgraphs) { $('#imgtip4_img').attr('src', config.imgpathurl + config.tipimgs[4][popupimg] + _cachedefeat); _gaugehum.setarea(_hum.areas); _gaugehum.setvalueanimated(_hum.value); if (ddimgtooltip.showtips) { update tooltip if (_hum.selected === 'out') { tip = strings.hum_out_info + ':' + '<br>' + '- ' + strings.minimum_info + ': ' + extractdecimal(data.humtl) + '% ' + strings.at + ' ' + data.thumtl + ' ' + strings.maximum_info + ': ' + extractdecimal(data.humth) + '% ' + strings.at + ' ' + data.thumth; else { tip = strings.hum_in_info + ': ' + extractdecimal(data.inhum) + '%'; $('#imgtip4_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[4][0]!== null) { $('i#mgtip4_img').attr('src', config.imgpathurl + config.tipimgs[4][popupimg] + _cachedefeat);, dobaro = function () { var tip, t1; _baro.reclow = +extractdecimal(data.pressl); _baro.rechigh = +extractdecimal(data.pressh); _baro.todaylow = +extractdecimal(data.presstl); _baro.todayhigh = +extractdecimal(data.pressth); _baro.value = +extractdecimal(data.press); Convert the WD change over 3 hours to an hourly rate _baro.trendval = +extractdecimal(data.presstrendval) / (config.weatherprogram === 0? 1 : 3); if (data.pressunit === 'hpa' data.pressunit === 'mb') { min range steps of 10 hpa _baro.minvalue = Math.min(Math.floor((_baro.recLow - 2) / 10) * 10, 990); _baro.maxvalue = Math.max(Math.ceil((_baro.recHigh + 2) / 10) * 10, 1030); _baro.trendvalrnd = _baro.trendval.tofixed(1); round to 0.1 else if (data.pressunit === 'kpa') { min range steps of 1 kpa _baro.minvalue = Math.min(Math.floor(_baro.recLow - 0.2), 99); _baro.maxvalue = Math.max(Math.ceil(_baro.recHigh + 0.2), 105); _baro.trendvalrnd = _baro.trendval.tofixed(2); round to 0.01 else { inhg: min range steps of 0.5 inhg _baro.minvalue = Math.min(Math.floor((_baro.recLow - 0.1) * 2) / 2, 29.5); _baro.maxvalue = Math.max(Math.ceil((_baro.recHigh + 0.1) * 2) / 2, 30.5); _baro.trendvalrnd = _baro.trendval.tofixed(3); round to if (_baro.minvalue!== _gaugebaro.getminvalue() _baro.maxvalue!== _gaugebaro.getmaxvalue()) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 44

46 _gaugebaro.setminvalue(_baro.minvalue); _gaugebaro.setmaxvalue(_baro.maxvalue); _gaugebaro.setvalue(_baro.minvalue); if (_baro.rechigh === _baro.todayhigh && _baro.reclow === _baro.todaylow) { VWS does not provide record hi/lo values _baro.sections = []; _baro.areas = [steelseries.section(_baro.todaylow, _baro.todayhigh, gauge.minmaxarea)]; else { _baro.sections = [ steelseries.section(_baro.minvalue, _baro.reclow, 'rgba(255,0,0,0.5)'), steelseries.section(_baro.rechigh, _baro.maxvalue, 'rgba(255,0,0,0.5)') ]; _baro.areas = [ steelseries.section(_baro.minvalue, _baro.reclow, 'rgba(255,0,0,0.5)'), steelseries.section(_baro.rechigh, _baro.maxvalue, 'rgba(255,0,0,0.5)'), steelseries.section(_baro.todaylow, _baro.todayhigh, gauge.minmaxarea) ]; if (gauge.pressuretrendvisible) { Use the barotrend rather than simple arithmetic test - steady is more/less than zero! t1 = barotrend(_baro.trendval, data.pressunit, false); if (t1 > 0) { _baro.trend = steelseries.trendstate.up; else if (t1 < 0) { _baro.trend = steelseries.trendstate.down; else { _baro.trend = steelseries.trendstate.steady; _gaugebaro.settrend(_baro.trend); _gaugebaro.setarea(_baro.areas); _gaugebaro.setsection(_baro.sections); _gaugebaro.setvalueanimated(_baro.value); if (ddimgtooltip.showtips) { update tooltip tip = strings.baro_info + ':' + '<br>' + '- ' + strings.minimum_info + ': ' + _baro.todaylow + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.tpresstl + ' ' + strings.maximum_info + ': ' + _baro.todayhigh + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.tpressth + '<br>' + '- ' + strings.baro_trend_info + ': ' + barotrend(_baro.trendval, data.pressunit, true) + ' ' + (_baro.trendvalrnd > 0? '+' : '') + _baro.trendvalrnd + ' ' + data.pressunit + '/h'; $('#imgtip5_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[5]!== null) { $('#imgtip5_img').attr('src', config.imgpathurl + config.tipimgs[5] + _cachedefeat);, dowind = function () { var tip; _wind.value = extractdecimal(data.wlatest); _wind.average = extractdecimal(data.wspeed); _wind.gust = extractdecimal(data.wgust); _wind.maxgusttoday = extractdecimal(data.wgusttm); _wind.maxavgtoday = extractdecimal(data.windtm); switch (data.windunit) { case 'mph': case 'kts': _wind.maxvalue = Math.max(Math.ceil(_wind.maxGustToday / 10) * 10, gauge.windscaledefmaxmph); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 45

47 case 'm/s': _wind.maxvalue = Math.max(Math.ceil(_wind.maxGustToday / 5) * 5, gauge.windscaledefmaxms); default: _wind.maxvalue = Math.max(Math.ceil(_wind.maxGustToday / 20) * 20, gauge.windscaledefmaxkmh); _wind.areas = [ steelseries.section(0, +_wind.average, gauge.windavgarea), steelseries.section(+_wind.average, +_wind.gust, gauge.minmaxarea) ]; if (_wind.maxvalue!== _gaugewind.getmaxvalue()) { _gaugewind.setmaxvalue(_wind.maxvalue); _gaugewind.setarea(_wind.areas); _gaugewind.setmaxmeasuredvalue(_wind.maxgusttoday); _gaugewind.setvalueanimated(_wind.value); if (ddimgtooltip.showtips) { update tooltip tip = strings.tenminavgwind_info + ': ' + _wind.average + ' ' + data.windunit + ' ' + strings.maxavgwind_info + ': ' + _wind.maxavgtoday + ' ' + data.windunit + '<br>' + strings.tenmingust_info + ': ' + _wind.gust + ' ' + data.windunit + ' ' + strings.maxgust_info + ': ' + _wind.maxgusttoday + ' ' + data.windunit + ' ' + strings.at + ' ' + data.twgusttm + ' ' + strings.bearing_info + ': ' + data.bearingtm + (isnan(parsefloat(data.bearingtm))? '' : 'Â (' + getord(+data.bearingtm) + ')'); $('#imgtip6_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[6]!== null) { $('#imgtip6_img').attr('src', config.imgpathurl + config.tipimgs[6] + _cachedefeat);, dodir = function () { var windspd, range, tip; _dir.valuelatest = extractinteger(data.bearing); _dir.titlelatest = strings.latest_title; _dir.valueaverage = extractinteger(data.avgbearing); _dir.titleaverage = strings.tenminavg_title; _dir.bearingfrom = extractinteger(data.bearingrangefrom10); _dir.bearingto = extractinteger(data.bearingrangeto10); _gaugedir.setvalueanimatedaverage(+_dir.valueaverage); if (_dir.valueaverage === 0) { _dir.valuelatest = 0; _gaugedir.setvalueanimatedlatest(+_dir.valuelatest); windspd = +extractdecimal(data.wspeed); switch (data.windunit.tolowercase()) { case 'mph': _wind.avgknots = * windspd; case 'kts': _wind.avgknots = windspd; case 'm/s': _wind.avgknots = * windspd; case 'km/h': case 'kmh': _wind.avgknots = * windspd; if (config.showwindvariation) { if (windspd > 0) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 46

48 if (_wind.avgknots < 6) { _gaugedir.setsection([steelseries.section(_dir.bearingfrom, _dir.bearingto, gauge.minmaxarea)]); _gaugedir.setarea([]); _gaugedir.vrb = ' - METAR: VRB'; else { _gaugedir.setsection([]); _gaugedir.setarea([steelseries.section(_dir.bearingfrom, _dir.bearingto, gauge.minmaxarea)]); _gaugedir.vrb = ' - METAR: ' + _dir.bearingfrom + 'V' + _dir.bearingto; If variation less than 60 degrees, then METAR = Steady range = (+_dir.bearingto < +_dir.bearingfrom? (+_dir.bearingto) : +_dir.bearingto) - (+_dir.bearingfrom); if (range < 60) { _gaugedir.vrb = ' - METAR: STDY'; else { Zero wind speed, calm _gaugedir.vrb = ' - METAR: 00000KT'; _gaugedir.setsection([]); _gaugedir.setarea([]); else { _gaugedir.vrb = ''; if (ddimgtooltip.showtips) { update tooltip tip = strings.latest_title + ' ' + strings.bearing_info + ': ' + _dir.valuelatest + 'Â (' + getord(+_dir.valuelatest) + ')' + _gaugedir.vrb + '<br>' + strings.tenminavg_web + ' ' + strings.bearing_info + ': ' + _dir.valueaverage + 'Â (' + getord(+_dir.valueaverage) + ')' + ', ' + strings.dominant_bearing + ': ' + data.domwinddir; if (!config.showrosegauge) { Wind run is shown on the wind rose if it is available tip += '<br>' + strings.windruntoday + ': ' + data.windrun + ' ' + _displayunits.windrun; $('#imgtip7_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[7]!== null) { $('#imgtip7_img').attr('src', config.imgpathurl + config.tipimgs[7] + _cachedefeat);, douv = function () { var tip; _uv.value = extractdecimal(data.uv); if (+_uv.value === 0) { _uv.risk = strings.uv_levels[0]; _uv.headline = strings.uv_headlines[0]; _uv.detail = strings.uv_details[0]; else if (_uv.value < 3) { _uv.risk = strings.uv_levels[1]; _uv.headline = strings.uv_headlines[1]; _uv.detail = strings.uv_details[1]; else if (_uv.value < 6) { _uv.risk = strings.uv_levels[2]; _uv.headline = strings.uv_headlines[2]; _uv.detail = strings.uv_details[2]; else if (_uv.value < 8) { _uv.risk = strings.uv_levels[3]; _uv.headline = strings.uv_headlines[3]; _uv.detail = strings.uv_details[3]; else if (_uv.value < 11) { _uv.risk = strings.uv_levels[4]; _uv.headline = strings.uv_headlines[4]; _uv.detail = strings.uv_details[4]; else { _uv.risk = strings.uv_levels[5]; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 47

49 _uv.headline = strings.uv_headlines[5]; _uv.detail = strings.uv_details[5]; _gaugeuv.setvalueanimated(_uv.value); _gaugeuv.setunitstring(_uv.risk); if (ddimgtooltip.showtips) { update tooltip tip = '<b>' + strings.uv_title + ': ' + _uv.value + '</b><br>'; tip += '<i>' + _uv.headline + '</i><br>'; tip += _uv.detail; $('#imgtip8_txt').html(tip); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[8]!== null) { $('#imgtip8_img').attr('src', config.imgpathurl + config.tipimgs[8] + _cachedefeat);, dosolar = function () { var tip, percent; _solar.value = +extractinteger(data.solarrad); _solar.currmaxvalue = +extractinteger(data.currentsolarmax); Set a section (100 units wide) to show current theoretical max value _gaugesolar.setarea([steelseries.section(_solar.currmaxvalue, Math.min(_solar.currMaxValue + 100, config.solargaugescalemax), 'rgba(220,0,0,0.5)')]); Set the value _gaugesolar.setvalueanimated(_solar.value); If we have today's max radiation value (WD only) then show it if (data.solartm!== undefined) { _solar.maxtoday = extractinteger(data.solartm); _gaugesolar.setmaxmeasuredvalue(_solar.maxtoday); if (ddimgtooltip.showtips) { update tooltip percent = (+_solar.currmaxvalue === 0? '--' : Math.round(+_solar.value / +_solar.currmaxvalue * 100)); tip = '<b>' + strings.solar_title + ': ' + _solar.value + ' W/m²</b><br>' + '<i>' + percent + '% ' + strings.solar_ofmax + '</i><br>' + strings.solar_currentmax + ': ' + _solar.currmaxvalue + ' W/m²'; if (data.solartm!== undefined) { tip += '<br>' + strings.solar_maxtoday + ': ' + _solar.maxtoday + ' W/m²'; $('#imgtip9_txt').html(tip);, dorose = function () { radar.dowindrose(); if (ddimgtooltip.showtips) { update tooltip $('#imgtip10_txt').html(strings.dominant_bearing + ': ' + data.domwinddir + '<br>' + strings.windruntoday + ': ' + data.windrun + ' ' + _displayunits.windrun); if (_refreshgraphs && config.showpopupgraphs && config.tipimgs[10]!== null) { $('#imgtip10_img').attr('src', config.imgpathurl + config.tipimgs[10] + _cachedefeat);, dofirst() called by doupdate() the first time the page is updated to setup various things that are only known when the realtimegauges.txt data is available dofirst = function () { drawtemp(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 48

50 drawdew(); if (data.tempunit.indexof('f')!== -1) { _displayunits.temp = 'F'; setradiocheck('rad_unitstemp', 'F'); settempunits(false); drawhum(); drawbaro(); if (data.pressunit!== 'hpa') { _displayunits.press = data.pressunit; setradiocheck('rad_rad_unitspress', data.pressunit); setbarounits(data.pressunit); drawwind(); drawdir(); if (data.windunit!== 'mph') { _displayunits.wind = data.windunit; setradiocheck('rad_rad_unitspress', data.pressunit); setwindunits(data.windunit); drawrain(); drawrrate(); if (data.rainunit === 'in') { _displayunits.rain = data.rainunit; setrainunits(false); if (config.showsolargauge) { drawsolar(); if (data.solartm!== "undefined") { _gaugesolar.setmaxmeasuredvaluevisible(true); if (config.showuvgauge) { drawuv(); set the script version on the page if ($('#scriptver').length) { $('#scriptver').html(config.scriptver); set the version information from the station $('#programversion').html(data.version); $('#programbuild').html(data.build); if (config.weatherprogram === 0) { $('#programname').html(_cumuluslink); else if (config.weatherprogram === 1) { $('#programname').html(_wdisplaylink); else if (config.weatherprogram === 2) { $('#programname').html(_vwslink); else { $('#programname').html('<a href="#">n/a</a>'); has a page timeout over ride password been supplied? _pageupdateparam = gup('pageupdate'); if (config.showpopupdata) { now initialise the pop-up script and download the trend images - has to be done here as dofirst may remove elements from the page - and we delay the download of the images speeding up page display ddimgtooltip.init('[id^="tip_"]'); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 49

51 , createtempsections() creates an array of gauge sections appropriate for Celcius or Farenheit scales createtempsections = function (celsius) { var section; if (celsius) { section = [ steelseries.section(-100, -35, 'rgba(195, 92, 211, 0.4)'), steelseries.section(-35, -30, 'rgba(139, 74, 197, 0.4)'), steelseries.section(-30, -25, 'rgba( 98, 65, 188, 0.4)'), steelseries.section(-25, -20, 'rgba( 62, 66, 185, 0.4)'), steelseries.section(-20, -15, 'rgba( 42, 84, 194, 0.4)'), steelseries.section(-15, -10, 'rgba( 25, 112, 210, 0.4)'), steelseries.section(-10, -5, 'rgba( 9, 150, 224, 0.4)'), steelseries.section(-5, 0, 'rgba( 2, 170, 209, 0.4)'), steelseries.section(0, 5, 'rgba( 0, 162, 145, 0.4)'), steelseries.section(5, 10, 'rgba( 0, 158, 122, 0.4)'), steelseries.section(10, 15, 'rgba( 54, 177, 56, 0.4)'), steelseries.section(15, 20, 'rgba(111, 202, 56, 0.4)'), steelseries.section(20, 25, 'rgba(248, 233, 45, 0.4)'), steelseries.section(25, 30, 'rgba(253, 142, 42, 0.4)'), steelseries.section(30, 40, 'rgba(236, 45, 45, 0.4)'), steelseries.section(40, 100, 'rgba(245, 109, 205, 0.4)') ]; else { section = [ steelseries.section(-200, -30, 'rgba(195, 92, 211, 0.4)'), steelseries.section(-30, -25, 'rgba(139, 74, 197, 0.4)'), steelseries.section(-25, -15, 'rgba( 98, 65, 188, 0.4)'), steelseries.section(-15, -5, 'rgba( 62, 66, 185, 0.4)'), steelseries.section(-5, 5, 'rgba( 42, 84, 194, 0.4)'), steelseries.section(5, 15, 'rgba( 25, 112, 210, 0.4)'), steelseries.section(15, 25, 'rgba( 9, 150, 224, 0.4)'), steelseries.section(25, 32, 'rgba( 2, 170, 209, 0.4)'), steelseries.section(32, 40, 'rgba( 0, 162, 145, 0.4)'), steelseries.section(40, 50, 'rgba( 0, 158, 122, 0.4)'), steelseries.section(50, 60, 'rgba( 54, 177, 56, 0.4)'), steelseries.section(60, 70, 'rgba(111, 202, 56, 0.4)'), steelseries.section(70, 80, 'rgba(248, 233, 45, 0.4)'), steelseries.section(80, 90, 'rgba(253, 142, 42, 0.4)'), steelseries.section(90, 110, 'rgba(236, 45, 45, 0.4)'), steelseries.section(110, 200, 'rgba(245, 109, 205, 0.4)') ]; return section;, createrainsections() returns an array of section highlights for the Rain Rate gauge /* Assumes 'standard' descriptive limits from UK met office: < 0.25 mm/hr - Very light rain 0.25mm/hr to 1.0mm/hr - Light rain 1.0 mm/hr to 4.0 mm/hr - Moderate rain 4.0 mm/hr to 16.0 mm/hr - Heavy rain 16.0 mm/hr to 50 mm/hr - Very heavy rain > 50.0 mm/hour - Extreme rain Roughly translated to the corresponding Inch rates < to to to 0.60 Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 50

52 0.60 to 2.0 > 2.0 */ createrainratesections = function (metric) { var section; if (metric) { section = [ steelseries.section(0, 0.25, 'rgba(0, 140, 0, 0.5)'), steelseries.section(0.25, 1, 'rgba(80, 192, 80, 0.5)'), steelseries.section(1, 4, 'rgba(150, 203, 150, 0.5)'), steelseries.section(4, 16, 'rgba(212, 203, 109, 0.5)'), steelseries.section(16, 50, 'rgba(225, 155, 105, 0.5)'), steelseries.section(50, 1000, 'rgba(245, 86, 59, 0.5)')]; else { section = [ steelseries.section(0, 0.05, 'rgba(0, 140, 0, 0.5)'), steelseries.section(0.05, 0.1, 'rgba(80, 192, 80, 0.5)'), steelseries.section(0.1, 0.15, 'rgba(150, 203, 150, 0.5)'), steelseries.section(0.15, 0.6, 'rgba(212, 203, 109, 0.5)'), steelseries.section(0.6, 2, 'rgba(225, 155, 105, 0.5)'), steelseries.section(2, 100, 'rgba(245, 86, 59, 0.5)')]; return section;, createrainfallsections()returns an array of section highlights for total rainfall in mm or inches createrainfallsections = function (metric) { var section; if (metric) { section = [ steelseries.section(0, 5, 'rgba(0, 250, 0, 1)'), steelseries.section(5, 10, 'rgba(0, 250, 117, 1)'), steelseries.section(10, 25, 'rgba(218, 246, 0, 1)'), steelseries.section(25, 40, 'rgba(250, 186, 0, 1)'), steelseries.section(40, 50, 'rgba(250, 95, 0, 1)'), steelseries.section(50, 65, 'rgba(250, 0, 0, 1)'), steelseries.section(65, 75, 'rgba(250, 6, 80, 1)'), steelseries.section(75, 100, 'rgba(205, 18, 158, 1)'), steelseries.section(100, 125, 'rgba(0, 0, 250, 1)'), steelseries.section(125, 500, 'rgba(0, 219, 212, 1)')]; else { section = [ steelseries.section(0, 0.2, 'rgba(0, 250, 0, 1)'), steelseries.section(0.2, 0.5, 'rgba(0, 250, 117, 1)'), steelseries.section(0.5, 1, 'rgba(218, 246, 0, 1)'), steelseries.section(1, 1.5, 'rgba(250, 186, 0, 1)'), steelseries.section(1.5, 2, 'rgba(250, 95, 0, 1)'), steelseries.section(2, 2.5, 'rgba(250, 0, 0, 1)'), steelseries.section(2.5, 3, 'rgba(250, 6, 80, 1)'), steelseries.section(3, 4, 'rgba(205, 18, 158, 1)'), steelseries.section(4, 5, 'rgba(0, 0, 250, 1)'), steelseries.section(5, 20, 'rgba(0, 219, 212, 1)')]; return section;, createrainfallgradient() returns an array of SS colours for continous gradient colouring of the total rainfall LED gauge createrainfallgradient = function (metric) { var grad = new steelseries.gradientwrapper( 0, (metric? 100 : 4), [0, 0.1, 0.62, 1], [new steelseries.rgbacolor(15, 148, 0, 1), new steelseries.rgbacolor(213, 213, 0, 1), new steelseries.rgbacolor(213, 0, 25, 1), new steelseries.rgbacolor(250, 0, 0, 1)] ); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 51

53 return grad;, Helper functions getord() converts a value in degrees (0-360) into a localised compass point (N, ENE, NE, etc) getord = function (deg) { if (deg === 0) { Special case, 0=No wind, 360=North return strings.calm; else { return (strings.coords[math.floor((deg ) / 22.5) % 16]);, gup() extracts the named parameter from the current page URL gup = function (paramname) { var regexs, regex, results; paramname = paramname.replace(/(\[ \])/g, '\\$1'); regexs = '[\\?&]' + paramname + '=([^&#]*)'; regex = new RegExp(regexS); results = regex.exec(window.location.href); if (results === null) { return ''; else { return results[1];, extractdecimal() returns a decimal number from a string, the decimal point can be either a dot or a comma it ignores any text such as pre/appended units extractdecimal = function (str) { return (/[\-+]?[0-9]+\.?[0-9]*/).exec(str.replace(',', '.'))[0];, extractinteger() returns an integer from a string it ignores any text such as pre/appended units extractinteger = function (str) { return (/[\-+]?[0-9]+/).exec(str)[0];, temptrend() converts a temperature trend value into a localised string, or +1, 0, -1 depending on the value of btxt temptrend = function (trend, units, btxt) { Scale is over 3 hours, in Celcius var val = trend * 3 * (units.indexof('c')!== -1? 1 : (5 / 9)), ret; if (val > 5) { ret = (btxt? strings.risingveryrapidly : 1); else if (val > 3) { ret = (btxt? strings.risingquickly : 1); else if (val > 1) { ret = (btxt? strings.rising : 1); else if (val > 0.5) { ret = (btxt? strings.risingslowly : 1); else if (val >= -0.5) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 52

54 ret = (btxt? strings.steady : 0); else if (val >= -1) { ret = (btxt? strings.fallingslowly : -1); else if (val >= -3) { ret = (btxt? strings.falling : -1); else if (val >= -5) { ret = (btxt? strings.fallingquickly : -1); else { ret = (btxt? strings.fallingveryrapidly : -1); return ret;, barotrend() converts a pressure trend value into a localised string, or +1, 0, -1 depending on the value of btxt barotrend = function (trend, units, btxt) { var val = trend * 3, ret; The terms below are the UK Met Office terms for a 3 hour change in hpa trend is supplied as an hourly change, so multiply by 3 if (units === 'in' units === 'inhg') { val *= ; else if (units === 'kpa') { val *= 10; assume everything else is hpa or mb, could be dangerous! if (val > 6.0) { ret = (btxt? strings.risingveryrapidly : 1); else if (val > 3.5) { ret = (btxt? strings.risingquickly : 1); else if (val > 1.5) { ret = (btxt? strings.rising : 1); else if (val > 0.1) { ret = (btxt? strings.risingslowly : 1); else if (val >= -0.1) { ret = (btxt? strings.steady : 0); else if (val >= -1.5) { ret = (btxt? strings.fallingslowly : -1); else if (val >= -3.5) { ret = (btxt? strings.falling : -1); else if (val >= -6.0) { ret = (btxt? strings.fallingquickly : -1); else { ret = (btxt? strings.fallingveryrapidly : -1); return ret;, getmintemp() returns the lowest temperature today for gauge scaling getmintemp = function () { return Math.min( extractdecimal(data.temptl), extractdecimal(data.dewpointtl), extractdecimal(data.apptemptl), extractdecimal(data.wchilltl));, getmaxtemp() returns the highest temperature today for gauge scaling getmaxtemp = function () { return Math.max( extractdecimal(data.tempth), extractdecimal(data.apptempth), Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 53

55 , extractdecimal(data.heatindexth), extractdecimal(data.humidex)); Celcius to Farenheit c2f = function (val) { return (extractdecimal(val) * 9 / ).toFixed(1);, Farenheit to Celcius f2c = function (val) { return ((extractdecimal(val) - 32) * 5 / 9).toFixed(1);, mph to ms mph2ms = function (val) { return (extractdecimal(val) * 0.447).toFixed(1);, knots to ms kts2ms = function (val) { return (extractdecimal(val) * 0.515).toFixed(1);, kph to ms kmh2ms = function (val) { return (extractdecimal(val) * ).toFixed(1);, ms to kts ms2kts = function (val) { return (extractdecimal(val) * ).toFixed(1);, ms to mph ms2mph = function (val) { return (extractdecimal(val) * 2.237).toFixed(1);, ms to kph ms2kmh = function (val) { return (extractdecimal(val) * 3.6).toFixed(1);, mm to inches mm2in = function (val) { return (extractdecimal(val) / 25.4).toFixed(2);, inches to mm in2mm = function (val) { return (extractdecimal(val) * 25.4).toFixed(1);, miles to km miles2km = function (val) { return (extractdecimal(val) * ).toFixed(1);, nautical miles to km nmiles2km = function (val) { return (extractdecimal(val) * ).toFixed(1);, km to miles km2miles = function (val) { return (extractdecimal(val) / ).toFixed(1);, km to nautical miles km2nmiles = function (val) { return (extractdecimal(val) / ).toFixed(1);, hpa to inhg (@0Â C) hpa2inhg = function (val, decimals) { decimals = decimals 2; return (extractdecimal(val) * ).toFixed(decimals);, inhg to hpa (@0Â C) inhg2hpa = function (val) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 54

56 return (extractdecimal(val) / ).toFixed(1);, kpa to hpa kpa2hpa = function (val) { return (extractdecimal(val) * 10).toFixed(1);, hpa to kpa hpa2kpa = function (val, decimals) { decimals = decimals 2; return (extractdecimal(val) / 10).toFixed(decimals);, setcookie() writes the 'obj' in cookie 'name' for persistant storage setcookie = function (name, obj) { var date = new Date(), expires; cookies valid for 1 year date.setyear(date.getfullyear() + 1); expires = '; expires=' + date.togmtstring(); document.cookie = name + '=' + encodeuricomponent(json.stringify(obj)) + expires;, getcookie() reads the value of cookie 'name' from persitent storage getcookie = function (name) { var i, x, y, ret = null, arrcookies = document.cookie.split(';'); for (i = arrcookies.length; i--;) { x = arrcookies[i].split('='); if (x[0].trim() === name) { try { y = decodeuricomponent(x[1]); catch (e) { y = x[1]; ret = JSON.parse(unescape(y)); return ret;, setradiocheck() sets the desired value of the HTML radio buttons to be selected setradiocheck = function (obj, val) { $('input:radio[name="' + obj + '"]').filter('[value="' + val + '"]').attr('checked', true);, convtempdata() converts all the temperature values using the supplied conversion function convtempdata = function (convfunc) { data.apptemp = convfunc(data.apptemp); data.apptempth = convfunc(data.apptempth); data.apptemptl = convfunc(data.apptemptl); data.dew = convfunc(data.dew); data.dewpointth = convfunc(data.dewpointth); data.dewpointtl = convfunc(data.dewpointtl); data.heatindex = convfunc(data.heatindex); data.heatindexth = convfunc(data.heatindexth); data.humidex = convfunc(data.humidex); data.intemp = convfunc(data.intemp); data.temp = convfunc(data.temp); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 55

57 data.tempth = convfunc(data.tempth); data.temptl = convfunc(data.temptl); data.wchill = convfunc(data.wchill); data.wchilltl = convfunc(data.wchilltl); if (convfunc === c2f) { data.temptrend = (+extractdecimal(data.temptrend) * 9 / 5).toFixed(1); data.tempunit = 'Â F'; else { data.temptrend = (+extractdecimal(data.temptrend) * 5 / 9).toFixed(1); data.tempunit = 'Â C';, convraindata() converts all the rain data units using the supplied conversion function convraindata = function (convfunc) { data.rfall = convfunc(data.rfall); data.rrate = convfunc(data.rrate); data.rratetm = convfunc(data.rratetm); data.rainunit = convfunc === mm2in? 'in' : 'mm';, convwinddata() converts all the wind values using the supplied coversion function convwinddata = function (from, to) { var fromfunc1, tofunc1, fromfunc2, tofunc2, dummy = function (val) { return val; ; convert to m/s & km switch (from) { case 'mph': fromfunc1 = mph2ms; fromfunc2 = miles2km; case 'kts': fromfunc1 = kts2ms; fromfunc2 = nmiles2km; case 'km/h': fromfunc1 = kmh2ms; fromfunc2 = dummy; case 'm/s': /* falls through */ default: fromfunc1 = dummy; fromfunc2 = dummy; conversion function from km to required units switch (to) { case 'mph': tofunc1 = ms2mph; tofunc2 = km2miles; _displayunits.windrun = 'miles'; case 'kts': tofunc1 = ms2kts; tofunc2 = km2nmiles; _displayunits.windrun = 'n.miles'; case 'km/h': tofunc1 = ms2kmh; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 56

58 tofunc2 = dummy; _displayunits.windrun = 'km'; case 'm/s': /* falls through */ default: tofunc1 = dummy; tofunc2 = dummy; _displayunits.windrun = 'km'; do the conversions data.wgust = tofunc1(fromfunc1(data.wgust)); data.wgusttm = tofunc1(fromfunc1(data.wgusttm)); data.windtm = tofunc1(fromfunc1(data.windtm)); data.windrun = tofunc2(fromfunc2(data.windrun)); data.wlatest = tofunc1(fromfunc1(data.wlatest)); data.wspeed = tofunc1(fromfunc1(data.wspeed)); data.windunit = to;, convbarodata() converts all the pressure values using the supplied coversion function convbarodata = function (from, to) { var fromfunc, tofunc, dummy = function (val) { return val; ; convert to hpa switch (from) { case 'hpa': /* falls through */ case 'mb': fromfunc = dummy; case 'inhg': fromfunc = inhg2hpa; case 'kpa': fromfunc = kpa2hpa; convert to required units switch (to) { case 'hpa': /* falls through */ case 'mb': tofunc = dummy; case 'inhg': tofunc = hpa2inhg; case 'kpa': tofunc = hpa2kpa; data.press = tofunc(fromfunc(data.press)); data.pressh = tofunc(fromfunc(data.pressh)); data.pressl = tofunc(fromfunc(data.pressl)); data.pressth = tofunc(fromfunc(data.pressth)); data.presstl = tofunc(fromfunc(data.presstl)); data.presstrendval = tofunc(fromfunc(data.presstrendval), 3); data.pressunit = to;, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 57

59 setunits() Main data conversion routine, calls all the sub-routines setunits = function (radio) { var sel = radio.value; _userunitsset = true; switch (sel) { == Temperature == case 'C': _displayunits.temp = sel; if (data.tempunit.indexof(sel) === -1) { settempunits(true); convtempdata(f2c); dotemp(); dodew(); case 'F': _displayunits.temp = sel; if (data.tempunit.indexof(sel) === -1) { settempunits(false); convtempdata(c2f); dotemp(); dodew(); == Rainfall == case 'mm': _displayunits.rain = sel; if (data.rainunit!== sel) { setrainunits(true); convraindata(in2mm); dorain(); dorrate(); case 'in': _displayunits.rain = sel; if (data.rainunit!== sel) { setrainunits(false); convraindata(mm2in); dorain(); dorrate(); == Pressure == case 'hpa': /* falls through */ case 'inhg': /* falls through */ case 'mb': /* falls through */ case 'kpa': _displayunits.press = sel; if (data.pressunit!== sel) { convbarodata(data.pressunit, sel); setbarounits(sel); dobaro(); == Wind speed == case 'mph': /* falls through */ case 'kts': /* falls through */ Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 58

60 case 'm/s': /* falls through */ case 'km/h': _displayunits.wind = sel; if (data.windunit!== sel) { convwinddata(data.windunit, sel); setwindunits(sel); dowind(); dodir(); if (config.showrosegauge && typeof radar!== "undefined") { dorose(); if (config.usecookies) { setcookie('units', _displayunits);, settempunits = function (celcius) { if (celcius) { data.tempunit = 'Â C'; _temp.sections = createtempsections(true); _temp.minvalue = gauge.tempscaledefminc; _temp.maxvalue = gauge.tempscaledefmaxc; _dew.sections = createtempsections(true); _dew.minvalue = gauge.tempscaledefminc; _dew.maxvalue = gauge.tempscaledefmaxc; else { data.tempunit = 'Â F'; _temp.sections = createtempsections(false); _temp.minvalue = gauge.tempscaledefminf; _temp.maxvalue = gauge.tempscaledefmaxf; _dew.sections = createtempsections(false); _dew.minvalue = gauge.tempscaledefminf; _dew.maxvalue = gauge.tempscaledefmaxf; _gaugetemp.setunitstring(data.tempunit); _gaugetemp.setsection(_temp.sections); _gaugedew.setunitstring(data.tempunit); _gaugedew.setsection(_temp.sections);, setrainunits = function (mm) { if (mm) { data.rainunit = 'mm'; _rain.lcddecimals = 1; _rain.scaledecimals = 1; _rain.labelnumberformat = gauge.labelformat; _rain.sections = (gauge.rainusesectioncolours? createrainfallsections(true) : []); _rain.maxvalue = 10; _rain.grad = (gauge.rainusegradientcolours? createrainfallgradient(true) : null); _rrate.lcddecimals = 1; _rrate.scaledecimals = 0; _rrate.labelnumberformat = gauge.labelformat; _rrate.sections = createrainratesections(true); _rrate.maxvalue = 10; else { data.rainunit = 'in'; _rain.lcddecimals = 2; _rain.scaledecimals = 1; _rain.labelnumberformat = steelseries.labelnumberformat.fractional; _rain.sections = (gauge.rainusesectioncolours? createrainfallsections(false) : []); _rain.maxvalue = 1; _rain.grad = (gauge.rainusegradientcolours? createrainfallgradient(false) : null); _rrate.lcddecimals = 2; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 59

61 _rrate.scaledecimals = 1; _rrate.labelnumberformat = steelseries.labelnumberformat.fractional; _rrate.sections = createrainratesections(false); _rrate.maxvalue = 1; _rain.value = 0; _rrate.value = 0; _gaugerain.setunitstring(data.rainunit); _gaugerain.setsection(_rain.sections); _gaugerain.setgradient(_rain.grad); _gaugerain.setfractionalscaledecimals(_rain.scaledecimals); _gaugerain.setlabelnumberformat(_rain.labelnumberformat); _gaugerain.setlcddecimals(_rain.lcddecimals); _gaugerrate.setunitstring(data.rainunit + '/h'); _gaugerrate.setsection(_rrate.sections); _gaugerrate.setfractionalscaledecimals(_rrate.scaledecimals); _gaugerrate.setlabelnumberformat(_rrate.labelnumberformat); _gaugerrate.setlcddecimals(_rrate.lcddecimals);, setwindunits = function (to) { var maxval; conversion function to required units switch (to) { case 'mph': maxval = gauge.windscaledefmaxmph; case 'kts': maxval = gauge.windscaledefmaxkts; case 'km/h': maxval = gauge.windscaledefmaxkmh; case 'm/s': maxval = gauge.windscaledefmaxms; set the gauges data.windunit = to; _wind.maxvalue = maxval; _gaugewind.setunitstring(data.windunit); _gaugewind.setvalue(0);, setbarounits = function (to) { var minval, maxval; set to the required units switch (to) { case 'hpa': /* falls through */ case 'mb': minval = gauge.baroscaledefminhpa; maxval = gauge.baroscaledefmaxhpa; _baro.lcddecimals = 1; _baro.scaledecimals = 0; _baro.labelnumberformat = gauge.labelformat; case 'inhg': minval = gauge.baroscaledefmininhg; maxval = gauge.baroscaledefmaxinhg; _baro.lcddecimals = 2; _baro.scaledecimals = 1; _baro.labelnumberformat = steelseries.labelnumberformat.fractional; case 'kpa': minval = gauge.baroscaledefminkpa; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 60

62 maxval = gauge.baroscaledefmaxkpa; _baro.lcddecimals = 2; _baro.scaledecimals = 1; _baro.labelnumberformat = steelseries.labelnumberformat.fractional; data.pressunit = to; _gaugebaro.setunitstring(to); _gaugebaro.setlcddecimals(_baro.lcddecimals); _gaugebaro.setfractionalscaledecimals(_baro.scaledecimals); _gaugebaro.setlabelnumberformat(_baro.labelnumberformat); _baro.minvalue = minval; _baro.maxvalue = maxval; _baro.value = _baro.minvalue;, setlang() switches the HTML page language set, called by changelang() in language.js setlang = function (newlang) { reset to the new language strings = newlang; temperature if ($('#rad_temp1').is(':checked')) { _temp.title = strings.temp_title_out; else { _temp.title = strings.temp_title_in; switch ($('input[name="rad_dew"]:checked').val()) { case 'dew': _dew.title = strings.dew_title; case 'app': _dew.title = strings.apptemp_title; case 'wnd': _dew.title = strings.chill_title; case 'hea': _dew.title = strings.heat_title; case 'hum': _dew.title = strings.humdx_title; rain _rain.title = strings.rain_title; rrate _rrate.title = strings.rrate_title; humidty if ($('#rad_hum1').is(':checked')) { _hum.title = strings.hum_title_out; else { _hum.title = strings.hum_title_in; barometer _baro.title = strings.baro_title; wind _wind.title = strings.wind_title; can't do anything about the LED and status at the moment :( g_led.title = strings.led_title; Update all the title string and Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 61

63 call all the gauge functions to update popup data if (_gaugetemp) { _gaugetemp.settitlestring(_temp.title); dotemp(); if (_gaugedew) { _gaugedew.settitlestring(_dew.title); dodew(); if (_gaugebaro) { _gaugebaro.settitlestring(_baro.title); dobaro(); if (_gaugerain) { _gaugerain.settitlestring(_rain.title); dorain(); if (_gaugerrate) { _gaugerrate.settitlestring(_rrate.title); dorrate(); if (_gaugehum) { _gaugehum.settitlestring(_hum.title); dohum(); if (_gaugewind) { _gaugewind.settitlestring(_wind.title); dowind(); if (_gaugedir) { _gaugedir.setpointsymbols(strings.compass); _dir.titles = [strings.latest_web, strings.tenminavg_web]; _gaugedir.setlcdtitlestrings(_dir.titles); dodir(); if (_gaugeuv) { _uv.title = strings.uv_title; _gaugeuv.settitlestring(_uv.title); if (_gaugesolar) { _solar.title = strings.solar_title; _gaugesolar.settitlestring(_solar.title); if (typeof radar!== "undefined") { radar.settitle(strings.windrose); radar.setcompassstring(strings.compass); radar.dowindrose();, getwindrununits = function (spdunits) { var retval; switch (spdunits) { case 'mph': retval = 'miles'; case 'kts': retval = 'n.miles'; case 'km/h': /* falls through */ case 'm/s': /* falls through */ default: retval = 'km'; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 62

64 return retval;, extend() used to add a parent object attributes to a child object extend = function (parent, child) { var i; child = child {; for (i in parent) { if (parent.hasownproperty(i)) { child[i] = parent[i]; return child;, getwindrosedata = function () { return data.windrosedata;, getwindrun = function () { return extractdecimal(data.windrun); ; Called when the document object has loaded This starts the whole script. $(document).ready(function () { Kick it all off init(); ); return { config: config, gauge: gauge, setlang: setlang, dotemp: dotemp, dodew: dodew, dohum: dohum, setunits: setunits, getwindrosedata: getwindrosedata, getwindrun: getwindrun, countdown: countdown ; ()), ============================================================================================================== ================= ============================================================================================================== ================= ============================================================================================================== ================= /*! Image w/ description tooltip v2.0 - For FF1+ IE6+ Opr8+ * Created: April 23rd, This notice must stay intact for usage * Author: Dynamic Drive at * Visit for full source code * Modified: M Crossley June 2011, January 2012 * v2.- */ ddimgtooltip = { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 63

65 tiparray : (function () { var style = {background: '#FFFFFF', color: 'black', border: '2px ridge darkblue', i = 11, set to number of tooltips required tooltips = []; for (;i--;) { tooltips[i] = [null, ' ', style]; return tooltips; ()), tooltipoffsets : [20, -30], additional x and y offset from mouse cursor for tooltips tipdelay : 1000, _delaytimer : 0, tipprefix : 'imgtip', tooltip DOM ID prefixes createtip : function ($, tipid, tipinfo) { if ($('#' + tipid).length === 0) { if this tooltip doesn't exist yet return $('<div id="' + tipid + '" class="ddimgtooltip" />').html( ((tipinfo[1])? '<div class="tipinfo" id="' + tipid + '_txt">' + tipinfo[1] + '</div>' : '') + (tipinfo[0]!== null? '<div style="text-align:center"><img class="tipimg" id="' + tipid + '_img" src="' + tipinfo[0] + '" /></div>' : '') ).css(tipinfo[2] {).appendto(document.body); return null;, positiontooltip : function ($, $tooltip, e) { var x = e.pagex + this.tooltipoffsets[0], y = e.pagey + this.tooltipoffsets[1], tipw = $tooltip.outerwidth(), tiph = $tooltip.outerheight(), whght = $(window).height(), dtop = $(document).scrolltop(); x = (x + tipw > $(document).scrollleft() + $(window).width())? x - tipw - (ddimgtooltip.tooltipoffsets[0] * 2) : x; y = (y + tiph > dtop + whght)? dtop + whght - tiph - 10 : y; $tooltip.css({left: x, top: y);, delaybox : function ($, $tooltip, e) { if (this.showtips) { ddimgtooltip._delaytimer = settimeout(function () { ddimgtooltip.showbox($tooltip.selector);, ddimgtooltip.tipdelay);, showbox : function (tooltip) { if (this.showtips) { $(tooltip).show(); $(tooltip).fadein();, hidebox : function ($, $tooltip) { cleartimeout(ddimgtooltip._delaytimer); $tooltip.hide(); $tooltip.fadeout();, showtips : false, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 64

66 ; init : function (targetselector) { $(document).ready(function ($) { var tiparray = ddimgtooltip.tiparray, $targets = $(targetselector); if ($targets.length === 0) { return; $targets.each(function () { var $target = $(this), tipsuffix, tipid, $tooltip; $target.attr('id').match(/_(\d+)/); match d of attribute id='tip_d' tipsuffix = parseint(regexp.$1, 10); get d as integer tipid = this._tipid = ddimgtooltip.tipprefix + tipsuffix; construct this tip's ID value and remember it $tooltip = ddimgtooltip.createtip($, tipid, tiparray[tipsuffix]); $target.mouseenter(function (e) { var $tooltip = $('#' + this._tipid); ddimgtooltip.showbox($, $tooltip, e); ddimgtooltip.delaybox($, $tooltip, e); ); $target.mouseleave(function (e) { var $tooltip = $('#' + this._tipid); ddimgtooltip.hidebox($, $tooltip); ); $target.mousemove(function (e) { var $tooltip = $('#' + this._tipid); ddimgtooltip.positiontooltip($, $tooltip, e); ); if ($tooltip) { add mouseenter to this tooltip (only if event hasn't already been added) $tooltip.mouseenter(function () { ddimgtooltip.hidebox($, $(this)); ); ); ); end dom ready String.prototype.trim = String.prototype.trim function trim() { return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 65

67 2.6 Language.js /* * A language file for the starter SteelSeries gauges page for Cumulus * * Created by Mark Crossley, July 2011 * * File encoding = UTF-8 */ /*! Version: Updated: 01 February 2013 */ /*global gauges */ /*jshint jquery:true */ var LANG = LANG {; ============================================================================================================ ========== English ============================================================================================================ ========== LANG.EN = { canvasnosupport : "No HTML5 Canvas support in your browser... Sorry...<br>" + "Try upgrading your browser to a more recent version - nearly all browsers support Canvas now, even IE9!<br><br>" + "Redirecting you to an 'old' gauges page...", led_title : "Remote sensor status unkonwn", led_title_ok : "Remote sensor OK", led_title_lost : "Remote sensor contact lost!", led_title_unknown : "Remote sensor status unknown!", led_title_offline: "The weather station is currently offline.", weather : "weather", latitude : "Latitude", longitude : "Longitude", elevation : "Elevation", statusstr : "Loading...", StatusMsg : "Downloading...", StatusHttp : "HTTP Request Failed", StatusRetry : "Retrying...", StatusRetryIn : "Retry in...", StatusTimeout : "Timed out", StatusPageLimit : "Page auto-update limit reached, click the status LED to continue", StatusLastUpdate : "Last update", StatusMinsAgo : "minutes ago", StatusHoursAgo : "hours ago", StatusDaysAgo : "days ago", realtimecorrupt : "Text file download corrupted! Retrying...", timer : "seconds", at : "at", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Temperature", temp_title_in : "Inside Temp", temp_out_info : "Outside Temperature", temp_out_web : "Outside", temp_in_info : "Inside Temperature", temp_in_web : "Inside", temp_trend_info : "Temperature Trend", dew_title : "Dew Point", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 66

68 dew_info : "Dew Point", dew_web : "Dew Point", apptemp_title : "Apparent", apptemp_info : "Apparent (Feels-Like) Temperature", apptemp_web : "Apparent", chill_title : "Wind Chill", chill_info : "Wind Chill", chill_web : "Wind Chill", heat_title : "Heat Index", heat_info : "Heat Index", heat_web : "Heat Index", humdx_title : "Humidex", humdx_info : "Humidex", humdx_web : "Humidex", rain_title : "Rainfall", rrate_title : "Rain Rate", rrate_info : "Rain Rate", LastRain_info : "Last Rain", LastRainedT_info : "Today at", LastRainedY_info : "Yesterday at", hum_title_out : "Humidity", hum_title_in : "Inside Hum", hum_out_info : "Outside Humidity", hum_in_info : "Inside Humidity", hum_out_web : "Outside", hum_in_web : "Inside", baro_title : "Pressure", baro_info : "Barometric Pressure", baro_trend_info : "Pressure Trend", wind_title : "Wind Speed", tenminavg_title : "Average Wind Speed", tenminavgwind_info : "Average wind speed (10 min)", maxavgwind_info : "Maximum average wind speed", tenmingust_info : "Gust (10 min)", maxgust_info : "Maximum gust", latest_title : "Latest Wind", latestwind_info : "Latest Wind Speed", bearing_info : "Bearing", latest_web : "Latest", tenminavg_web : "Average", dominant_bearing : "Dominant wind today", calm: "calm", windrose: "Wind Rose", windruntoday: "Wind run today", uv_title : "UV Index", uv_levels : ["None", "No danger", "Little risk", "High risk", "Very high risk", "Extreme risk"], uv_headlines : ["No measurable UV Index", "No danger to the average person", "Little risk of harm from unprotected sun exposure", "High risk of harm from unprotected sun exposure", "Very high risk of harm from unprotected sun exposure", "Extreme risk of harm from unprotected sun exposure"], uv_details : ["It is still night time or it is a very cloudy day.", "Wear sunglasses on bright days; use sunscreen if there is snow on the ground,<br>" + "which reflects UV radiation, or if you have particularly fair skin.", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 67

69 "Wear sunglasses and use SPF 30+ sunscreen, cover the body with clothing and<br>" + "a hat, and seek shade around midday when the sun is most intense.", "Wear sunglasses and use SPF 30+ sunscreen, cover the body with sun protective<br>" + "clothing and a wide-brim hat, and reduce time in the sun from two hours before<br>" + "to three hours after solar noon (roughly 11:00 AM to 4:00 PM during summer in<br>" + "zones that observe daylight saving time).", "Wear SPF 30+ sunscreen, a shirt, sunglasses, and a hat.<br>" + "Do not stay out in the sun for too long.", "Take all precautions, including: wear sunglasses and use SPF 30+ sunscreen,<br>" + "cover the body with a long-sleeve shirt and trousers, wear a very broad hat, and<br>" + "avoid the sun from two hours before to three hours after solar noon (roughly 11:00 AM<br>" + "to 4:00 PM during summer in zones that observe daylight saving time)."], solar_title : "Solar Radiation", solar_currentmax : "Current theoretical maximum reading", solar_ofmax : "of maximum", solar_maxtoday : "Today's maximum reading", lowest_info : "Lowest", highest_info : "Highest", lowestf_info : "Lowest", for proper translation of feminine words highestf_info : "Highest", for proper translation of feminine words RisingVeryRapidly : "Rising very rapidly", RisingQuickly : "Rising quickly", Rising : "Rising", RisingSlowly : "Rising slowly", Steady : "Steady", FallingSlowly : "Falling slowly", Falling : "Falling", FallingQuickly : "Falling quickly", FallingVeryRapidly : "Falling very rapidly", maximum_info : "Maximum", max_hour_info : "Max per hour", minimum_info : "Minimum", coords : ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"], compass : ["N", "NE", "E", "SE", "S", "SW", "W", "NW"], months : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] ; ============================================================================================================ ========== French by Ray of Tzouhalem-Maple Bay Weather, and Jacques of Weather by You! ============================================================================================================ ========== LANG.FR = { canvasnosupport : "Votre navigateur ne supporte pas la fonction Canvas de HTML5...Dà solã...<br>" + "Une mise-ã -jour de votre navigateur à une version plus rã cente est requise - presque tous les navigateurs supportent HTML5 maintenant, incluant IE9!<br><br>" + "Je vous redirige vers le site contenant les anciennes jauges...", led_title : "Statut du capteur - inconnu", led_title_ok : "Statut du capteur - OK", led_title_lost : "Contact avec le capteur - interrompu!", led_title_unknown : "Contact avec le capteur - inconnu!", led_title_offline : "La station mã tã o est actuellement hors-ligne.", weather : "Mà tã o", latitude : "Latitude", longitude : "Longitude", elevation : "à lã vation", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 68

70 statusstr : "Chargement...", StatusMsg : "Tà lã chargement...", StatusHttp : "La requãªte HTTP a à chouã ", StatusRetry : "Rà essai...", StatusRetryIn : "Tentative dans...", StatusTimeout : "Dà passement de tempa", StatusPageLimit : "Dà lais de rafraã chissement automatique atteint, actualisez votre page pour continuer", StatusLastUpdate : "Dernià re mise-ã -jour - il y a", StatusMinsAgo : "minutes", StatusHoursAgo : "heures", StatusDaysAgo : "jours", realtimecorrupt : "Le tã lã chargement du fichier texte est corrompu! Rà essai...", timer : "secondes", at : "à ", temp_title_out : "Tempà rature", temp_title_in : "Intà rieure", temp_out_info : "Tempà rature à l'extã rieure", temp_out_web : "à l'extã rieur", temp_in_info : "Tempà rature à l'intã rieure", temp_in_web : "à l'intã rieur", temp_trend_info : "Tendances de la tempã rature", dew_title : "Point de rosã e", dew_info : "Point de rosã e", dew_web : "Point de rosã e", apptemp_title : "Sensation", apptemp_info : "Sensation - tempã rature ressentie", apptemp_web : "Sensation", chill_title : "Refroidissement", chill_info : "Refroidissement à olien", chill_web : "Refroidissement", heat_title : "Indice chaleur", heat_info : "Indice de chaleur", heat_web : "Indice chaleur", humdx_title : "Humidex", humdx_info : "Humidex", humdx_web : "Humidex", rain_title : "Prà cipitations", rrate_title : "Dà bit de pluie", rrate_info : "Dà bit de pluie", LastRain_info : "Dernià re pluie", LastRainedT_info : "aujourd'hui à ", LastRainedY_info : "hier à ", hum_title_out : "Humidità ", hum_title_in : "Intà rieure", hum_out_info : "Humidità à l'extã rieur", hum_in_info : "Humidità à l'intã rieur", hum_out_web : "à l'extã rieur", hum_in_web : "à l'intã rieur", baro_title : "Pression", baro_info : "Pression baromã trique", baro_trend_info : "tendance baromã trique", wind_title : "Vitesse du vent", tenminavg_title : "Vitesse moyenne", tenminavgwind_info : "Vitesse moyenne du vent (10 min)", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 69

71 maxavgwind_info : "vitesse moyenne maximale", tenmingust_info : "Rafale (10 min)", maxgust_info : "Rafale maximale", latest_title : "Vent rã cent", latestwind_info : "Vitesse du vent (rã cente)", bearing_info : "direction", latest_web : "Rà cente", tenminavg_web : "Moyenne", dominant_bearing : "Vent dominant aujourd'hui", calm: "calme", windrose: "Rose des Vents", windruntoday: "Wind run today", uv_title : "lâ indice UV", uv_levels : ["Nul", "Bas", "Modà rã ", "à levã ", "Trà s à levã ", "Extrême"], uv_headlines : ["Aucun indice UV quantifiable", "Sans danger pour l'individu moyen", "Peu de risques de brã»lures causã es par l'exposition au soleil sans protection", "Haut risque de brã»lures si exposition au soleil sans protection", "Risque trã s à levã de brã»lure si exposition au soleil sans protection", "Trà s grand risque de brã»lure si exposition au soleil sans protection"], uv_details : ["Il fait encore nuit ou c'est une journã e trã s nuageuse.", "Protection solaire minime requise pour les activitã s normales.<br>" + "Portez des lunettes de soleil lors de journã es ensoleillã es. Si vous restez à lâ extã rieur pendant plus dâ une heure, couvrez-vous et utilisez un à cran solaire.<br>" + "La rã flexion par la neige peut presque doubler lâ intensitã des rayons UV. Portez des lunettes de soleil et appliquez un à cran solaire sur votre visage.", "Prenez des prã cautions : couvrez-vous, portez un chapeau et des lunettes de soleil, et appliquez un à cran solaire, surtout si vous êtes à lâ extã rieur pendant 30 minutes ou plus.<br>" + "Cherchez lâ ombre à la mi-journã e, le soleil est à son plus fort.", "Protection nã cessaire â les rayons UV endommagent la peau et peuvent causer des coups de soleil.<br>" + "à vitez le soleil entre 11 h et 16 h, prenez toutes les prã cautions : cherchez lâ ombre, couvrez-vous, portez un chapeau et des lunettes de soleil et appliquez un à cran solaire.", "Prà cautions supplã mentaires nã cessaires : la peau non protã gã e sera endommagã e et peut brã»ler rapidement.<br>" + "à vitez le soleil entre 11 h et 16 h. Cherchez lâ ombre, couvrez-vous, portez un chapeau et des lunettes de soleil et appliquez un à cran solaire.", "Les valeurs de 11 ou plus sont trã s rares. Cependant, lâ indice UV peut atteindre 14 ou plus dans les tropiques ou le sud des à tats-unis.<br>" + "Prenez toutes les prã cautions. La peau non protã gã e sera endommagã e et peut brã»ler en quelques minutes. à vitez le soleil entre 11 h et 16 h, couvrez-vous, portez un chapeau et des lunettes de soleil et appliquez un à cran solaire.<br>" + "Nâ oubliez pas que le sable blanc et les autres surfaces brillantes rã flã chissent les rayons UV et augmentent lâ exposition à ces rayons."], solar_title : "Rayonnement solaire", solar_currentmax : "Lecture maximale thã orique courante", solar_ofmax : "du maximum", solar_maxtoday : "Lecture maximale de la journã e", lowest_info : "le plus bas", highest_info : "le plus à levã ", lowestf_info : "la plus basse", for proper translation of feminine words highestf_info : "la plus à levã e", for proper translation of feminine words RisingVeryRapidly : "Augmentation trã s rapide", RisingQuickly : "Augmentation rapide", Rising : "Augmentation", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 70

72 RisingSlowly : "Augmentation lentement", Steady : "Constante", FallingSlowly : "Baisse lentement", Falling : "Baisse", FallingQuickly : "Baisse rapidement", FallingVeryRapidly : "Baisse trã s rapidement", maximum_info : "maximum", max_hour_info : "maximum par heure", minimum_info : "minimum", coords : ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSO", "SO", "OSO", "O", "ONO", "NO", "NNO"], compass : ["N", "NE", "E", "SE", "S", "SO", "O", "NO"], months : ["Jan", "Fà v", "Mar", "Avr", "Mai", "Jui", "Jul", "Aoû", "Sep", "Oct", "Nov", "Dà c"] ; ============================================================================================================ ========== Deutsch by RASter ============================================================================================================ ========== LANG.DE = { canvasnosupport : "Ihr Browser hat keine HTML5 Canvas Unterstützung.<br>" + "Aktualisieren Sie Ihren Browser auf eine neuere Version, fast alle Browser Unterstützen Canvas Heute, sogar der IE9!<br><br>" + "Sie werden auf eine 'Alte' Gauge Seite umgeleitet...", led_title : "Fernsensor: Status unbekannt", led_title_ok : "Fernsensor: OK", led_title_lost : "Fernsensor: Kontakt verloren!", led_title_unknown : "Fernsensor: Status unbekannt!", led_title_offline : "Die Wetterstation ist derzeit offline.", weather : "Wetter", latitude : "Breitengrad", longitude : "Là ngengrad", elevation : "Hà he", statusstr : "Lade...", StatusMsg : "Lade Daten...", StatusHttp : "HTTP Anfrage fehlgeschlagen", StatusRetry : "Wiederhole...", StatusRetryIn : "Wiederhole in...", StatusTimeout : "Zeitüberschreitung", StatusPageLimit : 'Seiten "auto-update"-zeitlimit erreicht, um fortzufahren aktuelle Seite neu laden', StatusLastUpdate : "Letzte Aktualisierung vor", StatusMinsAgo : "Minuten", StatusHoursAgo : "Stunden", StatusDaysAgo : "Tagen", realtimecorrupt : "Geladene Textdatei ist beschã digt! Wiederhole...", timer : "Sekunden", at : "um", temp_title_out : "Temperatur", temp_title_in : "Temp. Innen", temp_out_info : "Außentemperatur", temp_out_web : "Außen", temp_in_info : "Innentemperatur", temp_in_web : "Innen", temp_trend_info : "Temperatur Trend", dew_title : "Taupunkt", dew_info : "Taupunkt", dew_web : "Taupunkt", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 71

73 apptemp_title : "Gefühlt", apptemp_info : "Gefühlte Temperatur", apptemp_web : "Gefühlt", chill_title : "Windkà lte", chill_info : "Windkà lte", chill_web : "Windkà lte", heat_title : "Hitzeindex", heat_info : "Hitzeindex", heat_web : "Hitzeindex", humdx_title : "Humidex", humdx_info : "Humidex", humdx_web : "Humidex", rain_title : "Regen", rrate_title : "Regenmenge", rrate_info : "Regenmenge", LastRain_info : "Letzter Regen", LastRainedT_info : "Heute um", LastRainedY_info : "Gestern um", hum_title_out : "Luftfeuchte", hum_title_in : "Luftfeuchte In", hum_out_info : "Luftfeuchte Außen", hum_in_info : "Luftfeuchte Innen", hum_out_web : "Außen", hum_in_web : "Innen", baro_title : "Luftdruck", baro_info : "Barometrischer Luftdruck", baro_trend_info : "Luftdruck Trend", wind_title : "Windstà rke ", tenminavg_title : "Mittelwert Windstà rke", tenminavgwind_info : "Mittelwert Windstà rke (10 min)", maxavgwind_info : "Hà chster Mittelwert Windstà rke", tenmingust_info : "Windbà e (10 min)", maxgust_info : "Hà chste Windbà e", latest_title : "Aktueller Wind", latestwind_info : "Aktuelle Windstà rke", bearing_info : "Windrichtung", latest_web : "Aktuell", tenminavg_web : "Mittelwert", dominant_bearing : "vorherrschende Windrichtung Heute", calm: "calm", windrose: "Windrose", windruntoday: "Wind run today", uv_title : "UV Index", uv_levels : ["keiner", "keine Gefahr", "kleines Risiko", "hohes Risiko", "sehr hohes Risiko", "extremes Risiko"], uv_headlines : ["Kein messbarer UV Index", "Keine Gefahr fã¼r die durchschnittliche Person", "Kleines Risiko einer Schà digung durch ungeschã¼tzten Aufenthalt in der Sonne", "Grosses Risiko einer Schà digung durch ungeschã¼tzten Aufenthalt in der Sonne", "Sehr hohes Risiko einer Schà digung durch ungeschã¼tzten Aufenthalt in der Sonne", "Extremes Risiko einer Schà digung durch ungeschã¼tzten Aufenthalt in der Sonne"], uv_details : ["Es ist entweder Nacht oder ein sehr bewã lkter Tag.", "Tragen Sie an hellen Tagen eine Sonnenbrille; verwenden Sie Sonnenschutzmittel<br>" + "wenn Sie besonders helle Haut haben oder wenn Schnee liegt welcher UV_Strahlung reflektiert.", "Tragen Sie eine Sonnenbrille und verwenden Sie Sonnencreme<br>" + "mit Lichtschutzfaktor 30 oder hã her. Bedecken Sie den Kà rper mit Kleidung und tragen Sie einen Hut.<br>" + Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 72

74 "Suchen Sie um die Mittagszeit, wenn die Sonne am stã rksten ist, Schatten auf.", "Tragen Sie eine Sonnenbrille und verwenden Sie Sonnencreme<br>" + "mit Lichtschutzfaktor 30 und hã her. Schützen Sie den Kà rper durch entsprechende Kleidung<br>" + "und einen breitkrempigen Hut. Begrenzen Sie den Aufenthalt in der Sonne zwei Stunden vor bis drei Stunden nach<br>" + "dem solaren Mittag (ca. 11:00-16:00 Uhr in Là ndern mit Sommerzeit) auf ein Minimum", "Benutzen Sie Sonnencreme, Lichtschutzfaktor 30 und hã her.<br>" + "Tragen Sie eine Sonnenbrille, T-Shirt und einen Hut.<br>" + "Bleiben Sie nicht zu lange in der Sonne.", "Treffen Sie alle Vorsichtsmaßnahmen: tragen Sie eine Sonnenbrille und benutzen Sie Sonnencreme,<br>" + "Lichtschutzfaktor 30 oder hã her, bedecken Sie den Kà rper mit einem langã rmeligen T-Shirt, tragen Sie lange Hosen und einen breiten Hut, <br>" + "meiden Sie die Sonne zwei Stunden vor bis drei Stunden nach dem solaren Mittag (ca. 11:00 - <br>" + "16:00 Uhr in Là ndern mit Sommerzeit)."], solar_title : "Sonnenstrahlung", solar_currentmax : "Aktueller theoretischer maximaler Messwert", solar_ofmax : "vom Maximum", solar_maxtoday : "Heutiger maximaler Messwert", lowest_info : "Niedrigster", highest_info : "Hà chster", lowestf_info : "Niedrigste", for proper translation of feminine words highestf_info : "Hà chste", for proper translation of feminine words RisingVeryRapidly : "sehr schnell steigend", RisingQuickly : "schnell steigend", Rising : "steigend", RisingSlowly : "langsam steigend ", Steady : "konstant", FallingSlowly : 'langsam fallend', Falling : "fallend", FallingQuickly : "schnell fallend", FallingVeryRapidly : "sehr schnell fallend", maximum_info : "Maximum", max_hour_info : "Max pro Stunde", minimum_info : "Minimum", coords : ["N", "NNO", "NO", "ONO", "O", "OSO", "SO", "SSO", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"], compass : ["N", "NO", "O", "SO", "S", "SW", "W", "NW"], months : ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"] ; ============================================================================================================ ========== Nederlands (Dutch) ============================================================================================================ ========== LANG.NL = { canvasnosupport : "Uw browser ondersteunt geen HTML5 Canvas.<br>" + "Gebruik een modernere browser of de laatste versie, bijna alle browsers ondersteunen Canvas nu, zelfs IE9!<br><br>" + "Je wordt naar de 'oude' meters omgeleid...", led_title : "Buitensensor status onbekend", led_title_ok : "Buitensensor OK", led_title_lost : "Buitensensor kontakt verloren!", led_title_unknown : "Buitensensor status onbekend!", led_title_offline : "Het weerstation is momenteel offline.", weather : "Weer", latitude : "Breedtegraad", longitude : "Lengtegraad", elevation : "Hoogte", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 73

75 statusstr : "Laden..", StatusMsg : "Data laden...", StatusHttp : "HTTP Aanvraag afgebroken", StatusRetry : "Opnieuw...", StatusRetryIn : "Opnieuw over..", StatusTimeout : "Tijd voorbij", StatusPageLimit : "Pagina auto-update limiet bereikt, pagina herladen om door te gaan", StatusLastUpdate : "Laatste bijwerking", StatusMinsAgo : "minuten geleden", StatusHoursAgo : "uren geleden", StatusDaysAgo : "dagen geleden", realtimecorrupt : "Data zijn fout! Opnieuw...", timer : "Seconden", at : "om", temp_title_out : "Temperatuur", temp_title_in : "Binnentemperatuur", temp_out_info : "Buitentemperatuur", temp_out_web : "Buiten", temp_in_info : "Binnentemperatuur", temp_in_web : "Binnen", temp_trend_info : "Temperatuurtrend", dew_title : "Dauwpunt", dew_info : "Dauwpunt", dew_web : "Dauwpunt", apptemp_title : "Gevoel", apptemp_info : "Gevoelstemperatuur", apptemp_web : "Gevoel", chill_title : "Windchill", chill_info : "Windchill", chill_web : "Windchill", heat_title : "Hitteindex", heat_info : "Hitteindex", heat_web : "Hitteindex", humdx_title : "Humidex", humdx_info : "Humidex", humdx_web : "Humidex", rain_title : "Regen", rrate_title : "Regenintensiteit", rrate_info : "Regenintensiteit", LastRain_info : "Laatste regen", LastRainedT_info : "Vandaag om", LastRainedY_info : "Gisteren om", hum_title_out : "Luchtvochtigheid", hum_title_in : "Luchtvochtigheid binnen", hum_out_info : "Luchtvochtigheid buiten", hum_in_info : "Luchtvochtigheid binnen", hum_out_web : "Buiten", hum_in_web : "Binnen", baro_title : "Luchtdruk", baro_info : "Barometer luchtdruk", baro_trend_info : "Barometer trend", wind_title : "Wind ", tenminavg_title : "Gemiddelde windsnelheid", tenminavgwind_info : "Gemiddelde windsnelheid (10 min)", maxavgwind_info : "Hoogste gemiddelde windsnelheid", tenmingust_info : "Wind (10 min)", maxgust_info : "Hoogste windvlaag", latest_title : "Huidige wind", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 74

76 latestwind_info : "Huidige windsnelheid", bearing_info : "Windrichting", latest_web : "Momenteel", tenminavg_web : "Gemiddelde", dominant_bearing : "Overheersende Windrichting", calm: "kalm", windrose: "Windroos", windruntoday: "Wind run today", uv_title : "UV-Index", uv_levels : ["Geen", "Geen gevaar", "Weinig gevaar", "Hoog risico", "Zeer hoog risico", "Extreem risico"], uv_headlines : ["Geen meetbare UV Index", "Geen gevaar voor de gewone mens", "Kleine kans op zonnebrand bij onbeschermde huid", "Hoog risico op zonnebrand bij onbeschermde huid", "Zeer hoog risico op zonnebrand bij onbeschermde huid", "Extreem risico op zonnebrand bij onbeschermde huid"], uv_details : ["Het is nog steeds nacht of het is een zeer bewolkte dag.", "Draag een zonnebril bij heldere dagen, gebruik zonnecreme bij een sneeuwlaag,<br>" + "omdat die UV-straling terugkaatst, of bij zeer bleke huid.", "Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, draag beschermende kledij en<br>" + "een hoed en ga uit de zon tijdens de middaguren wanneer de zon op zijn hoogst staat.", "Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, smeer u goed in<br>" + "draag beschermende kledij met een breedgerande hoed, beperk uw tijd in de zon van twee uur voor<br>" + "tot drie uur na de middagzon (ongeveer van 11:00 uur tot 16:00 uur tijdens de zomertijd.", "Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, beschermende kledij en een hoed.<br>" + "Blijf niet te lang in de zon.", "Neem alle voorzorgen, waaronder: zonnebril, zonnecreme met beschermingsfactor 30 of meer,<br>" + "een t-shirt met lange mouwen, een broek en een breedgerande hoed, en<br>" + "vermijd de middagzon vanaf 11:00 uur tot 16:00 uur, tijdens de zomer."], solar_title : "Zonnestraling", solar_currentmax : "Huidige theoretische maximale waarde", solar_ofmax : "van maximum", solar_maxtoday : "Maximale waarde vandaag", lowest_info : "Laagste", highest_info : "Hoogste", lowestf_info : "Laagste", for proper translation of feminine words highestf_info : "Hoogste", for proper translation of feminine words RisingVeryRapidly : "Zeer snel stijgend", RisingQuickly : "Snel stijgend", Rising : "Stijgend", RisingSlowly : "Langzaam stijgend", Steady : "Constant", FallingSlowly : "Langzaam dalend", Falling : "Dalend", FallingQuickly : "Snel dalend", FallingVeryRapidly : "Zeer snel dalend", maximum_info : "Maximum", max_hour_info : "Max per uur", minimum_info : "Minimum", coords : ["N", "NNO", "NO", "ONO", "O", "OZO", "ZO", "ZZO", "Z", "ZZW", "ZW", "WZW", "W", "WNW", "NW", "NNW"], compass : ["N", "NO", "O", "ZO", "Z", "ZW", "W", "NW"], Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 75

77 months : ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"] ; ============================================================================================================ ========== Swedish ***INCOMPLETE*** ============================================================================================================ ========== LANG.SE = { canvasnosupport : "Tyvà rr... Ingen HTML5 Canvas support i din weblã sare...<br>" + "Prà va att uppgradera din weblã sare till en senare version!<br><br>" + "Styr om till en à ldre sida med mã tare...", led_title : "Và derstationens status à r okã nd", led_title_ok : "Và derstationen OK", led_title_lost : "Har tappat kontakten med vã derstationen!", led_title_unknown : "Và derstationens status à r okã nd!", led_title_offline : "Và derstationen à r fã r nã rvarande ej nã bar.", weather : "väder", latitude : "Latitud", longitude : "Longitud", elevation : "Altitud", statusstr : "Laddar...", StatusMsg : "Laddar ned...", StatusHttp : "HTTP-begà ran misslyckades", StatusRetry : "Fà rsã ker pã nytt...", StatusRetryIn : "Fà rsã k om...", StatusTimeout : "Timed out", StatusPageLimit : "Page auto-update limit reached, refresh your browser to continue", StatusLastUpdate : "Senaste uppdatering fã r", StatusMinsAgo : "minuter sedan", StatusHoursAgo : "timmar sedan", StatusDaysAgo : "dagar sedan", realtimecorrupt : "Den nedladdade filen à r felaktig! Fà rsã ker pã nytt...", timer : "sekunder", at : "vid", temp_title_out : "Temperatur", temp_title_in : "Innetemp", temp_out_info : "Utetemp", temp_out_web : "Ute", temp_in_info : "Innetemp", temp_in_web : "Inne", temp_trend_info : "Trend - temp", dew_title : "Daggpunkt", dew_info : "Daggpunkt", dew_web : "Daggpunkt", apptemp_title : "Upplevd", apptemp_info : "Upplevd (kã nns som) temperatur", apptemp_web : "Upplevd", chill_title : "Kà ldeffekt", chill_info : "Kà ldeffekt", chill_web : "Kà ldeffekt", heat_title : "Và rmeindex", heat_info : "Và rmeindex", heat_web : "Và rmeindex", humdx_title : "Fuktindex", humdx_info : "Fuktindex", humdx_web : "Fuktindex", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 76

78 rain_title : "Nederbà rd", rrate_title : "Nederbà rd", rrate_info : "Nederbà rdintensitet", LastRain_info : "Senaste nederbã rd", LastRainedT_info : "Idag vid", LastRainedY_info : "Igà r vid", hum_title_out : "Fukt. ute", hum_title_in : "Fukt. inne", hum_out_info : "Fukt. ute", hum_in_info : "Fukt. inne", hum_out_web : "Fukt. ute", hum_in_web : "Fukt. inne", baro_title : "Lufttryck", baro_info : "Lufttryck", baro_trend_info : "Trend - lufttryck", wind_title : "Vind", tenminavg_title : "Medelvind", tenminavgwind_info : "Medelvind (10 min)", maxavgwind_info : "Max medelvind", tenmingust_info : "Byvind (10 min)", maxgust_info : "Max byvind", latest_title : "Senaste vind", latestwind_info : "Senaste vind", bearing_info : "Riktning", latest_web : "Senaste", tenminavg_web : "Medel", dominant_bearing : "Dominant wind today", calm: "calm", windrose: "Wind Rose", windruntoday: "Wind run today", uv_title : "UV Index", uv_levels : ["None", "Ingen fara", "Liten risk", "Hà g risk", "Mycket hã g risk", "Extrem risk"], uv_headlines : ["No measurable UV Index", "Ingen fara fã r normalindividen", "Liten skaderisk vid oskyddad solexponering", "Hà g skaderisk vid oskyddad solexponering", "Và ldigt hã g skaderisk vid oskyddad solexponering", "Extrem skaderisk vid oskyddad solexponering"], uv_details : ["It is still night time or it is a very cloudy day.", "Anvà nd solglasã gon molnfria dagar, anvã nd solskydd om det finns snã pã marken,<br>" + "som reflekterar UV-strà lningen, eller om du har omtã lig hy.", "Anvà nd solglasã gon och solskyddsfaktor 30+, tã ck hud med klã dsel och<br>" + "huvudbonad, sã k skugga vid middagstid dã solen à r som intensivast.", "Anvà nd solglasã gon och solskyddsfaktor 30+, tã ck hud med solskyddande klã dsel och<br>" + "bredbrã ttad huvudbonad, begrã nsa tiden i solen under tvã timmar fã re<br>" + "och tre timmar efter dã solen stã r som hã gst (~11:00 till 16:00 under sommarperioden i<br>" + "omrã den med sommartid).", "Anvà nd solskyddsfaktor 30+, skjorta, solglasã gon och huvudbonad.<br>" + "Vistas inte utomhus onã digt mycket.", "Vidtag alla fã rsiktighetsã tgã rder: anvã nd solglasã gon och solskyddsfaktor 30+,<br>" + "tã ck kroppen med lã ngã rmad skjorta och lã ngbyxor, anvã nd bredbrã ttad huvudbonad,<br>" + "undvik solen under tvã timmar fã re och tre timmar efter dã solen stã r som hã gst (~11:00 till<br>" + "16:00 under sommarperioden i omrã den med sommartid)."], Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 77

79 solar_title : "Solar Radiation", solar_currentmax : "Current theoretical maximum reading", solar_ofmax : "of maximum", solar_maxtoday : "Today's maximum reading", lowest_info : "Là gsta", highest_info : "Hà gsta", lowestf_info : "Là gsta", for proper translation of feminine words highestf_info : "Hà gsta", for proper translation of feminine words RisingVeryRapidly : "Stiger mycket snabbt", RisingQuickly : "Stiger snabbt", Rising : "Stigande", RisingSlowly : "Stigande lã ngsamt", Steady : "Konstant", FallingSlowly : "Faller lã ngsamt", Falling : "Fallande", FallingQuickly : "Fallande snabbt", FallingVeryRapidly : "Fallande mycket snabbt", maximum_info : "Max", max_hour_info : "Max per timma", minimum_info : "Min", coords : ["N", "NNO", "NO", "ONO", "O", "OSO", "SO", "SSO", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"], compass : ["N", "NO", "O", "SO", "S", "SW", "W", "NW"], months : ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"] ; ============================================================================================================ ========== Danish ***INCOMPLETE*** ============================================================================================================ ========== LANG.DK = { canvasnosupport : "Din browser understã tter ikke HTML5 lã rred...<br>" + "Opdatere din browser til en nyere version - nã sten alle browsere understã ter lã rred nu - selv Internet Explorer 9!<br><br>" + "Du omdirigeres til vores gamle forside...", led_title : "Status ukendt", led_title_ok : "Status OK", led_title_lost : "Ingen kontakt til vejrstationen!", led_title_unknown : "Status ukendt!", led_title_offline: "Vejrstationen er pt. offline.", weather : "vejret", latitude : "Breddegrad", longitude : "Là ngdegrad", elevation : "Hà jde over havet", statusstr : "Henter...", StatusMsg : "Downloader...", StatusHttp : "HTTP forespã rgsel fejlede", StatusRetry : "Prà ver igen...", StatusRetryIn : "Prà ver om...", StatusTimeout : "Timed out", StatusPageLimit : "Sidens grã nse for opdateringer blev nã et, opdater din browser for at fortsã tte", StatusLastUpdate : "Seneste opdatering", StatusMinsAgo : "minutter siden", StatusHoursAgo : "timer siden", StatusDaysAgo : "dage siden", realtimecorrupt : "Fejl pã vejrdatafilen - prã ver igen...", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 78

80 timer : "sekunder", at : "kl.", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Temperatur", temp_title_in : "Inde temp", temp_out_info : "Ude temperatur", temp_out_web : "Ude", temp_in_info : "Inde temperatur", temp_in_web : "Inde", temp_trend_info : "Temperatur tendens", dew_title : "Dugpunkt", dew_info : "Dugpunkt", dew_web : "Dugpunkt", apptemp_title : "Komfort", apptemp_info : "Komfort (fã les som) temperatur", apptemp_web : "Komfort", chill_title : "Vindchill", chill_info : "Vindchill", chill_web : "Vindchill", heat_title : "Hedeindex", heat_info : "Hedeindex", heat_web : "Hedeindex", humdx_title : "Humidex", humdx_info : "Humidex", humdx_web : "Humidex", rain_title : "Regn", rrate_title : "Regnrate", rrate_info : "Regnrate", LastRain_info : "Seneste regn", LastRainedT_info : "I dag kl.", LastRainedY_info : "I gã r kl.", hum_title_out : "Fugtighed", hum_title_in : "Inde fugt", hum_out_info : "Ude fugtighed", hum_in_info : "Inde fugtighed", hum_out_web : "Ude", hum_in_web : "Inde", baro_title : "Barometer", baro_info : "Barometer", baro_trend_info : "Barometer tendens", wind_title : "Vindhastighed", tenminavg_title : "Gennemsnitlig vindhastighed", tenminavgwind_info : "Gennemsnitlig vindhastighed (10 min)", maxavgwind_info : "Maximum gennemsnitlig vindhastighed", tenmingust_info : "Vindstà d (10 min)", maxgust_info : "Maximum vindstã d", latest_title : "Seneste vind", latestwind_info : "Seneste vindhastighed", bearing_info : "Retning", latest_web : "Seneste", tenminavg_web : "Gennemsnit", dominant_bearing : "Dominant wind today", calm: "calm", windrose: "Wind Rose", windruntoday: "Wind run today", uv_title : "UV index", uv_levels : ["Ingen", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 79

81 "Ingen fare", "Lille risiko", "Hà j risiko", "Meget hã j risiko", "Ekstrem risko"], uv_headlines : ["Ingen mã lbar UV index", "Ingen fare for personskade", "Lille risiko for skade hvis der ikke bruges solbeskyttelse", "Stor risiko for skade, hvis der ikke bruges solbeskyttelse", "Meget stor risiko for skade, hvis der ikke bruges solbeskyttelse", "Ekstrem risiko for skade, hvis der ikke bruges solbeskyttelse"], uv_details : ["Det er stadig mã rkt - eller en meget skyet dag.", "Brug solbriller pã lyse dage, brug solcreme hvis der er sne pã jorden,<br/>" + "som reflekterer UV strã ling, eller hvis du har en sã rlig sart hud.", "Brug solbriller og solcreme faktor 30+, tildã k kroppen med tã j og<br/>" + "hat, og sã g skygge mellem 12 og 14, hvor solen er mest intens.", "Brug solbriller og solcreme faktor 30+, tildã k kroppen med solbeskyttende<br/>" + "tã jh og brug en bredskygget hat. Sà g skygge mellem 11 og 15<br/>", "Brug solcreme faktor 30+, trã je, solbriller og en hat.<br/>" + "Ophold dig ikke i solen i lang tid.", "Tag alle forholdsregler: Brug solbriller og solcreme faktor 30+,<br/>" + "tildã k korppen med langã rmet trã je og bukser. Brug en meget stor hat og<br/>" + "undgã solen mellem 11 og 15"], solar_title : "Solstrà ling", solar_currentmax : "Max. muligt", solar_ofmax : "af maximum", solar_maxtoday : "Maximum i dag", lowest_info : "Laveste", highest_info : "Hà jeste", lowestf_info : "Laveste", for proper translation of feminine words highestf_info : "Hà jeste", for proper translation of feminine words RisingVeryRapidly : "Meget hurtigt stigende", RisingQuickly : "Hurtigt stigende", Rising : "Stigende", RisingSlowly : "Langsomt stigende", Steady : "Stabil", FallingSlowly : "Langsomt faldende", Falling : "Faldende", FallingQuickly : "Hurtigt faldende", FallingVeryRapidly : "Meget hurtigt faldende", maximum_info : "Maximum", max_hour_info : "Max pr. time", minimum_info : "Minimum", coords : ["N", "NNà ", "Nà ", "à Nà ", "à ", "à Sà ", "Sà ", "SSà ", "S", "SSV", "SV", "VSV", "V", "VNV", "NV", "NNV"], compass : ["N", "Nà ", "à ", "Sà ", "S", "SV", "V", "NV"], months : ["Jan", "Feb", "Mar", "Apr", "MaJ", "Jun", "Jul", "Aug", "Sep", "OKt", "Nov", "Dec"] ; ============================================================================================================ ========== Finish ============================================================================================================ ========== LANG.FI = { canvasnosupport : "Selaimesi ei tue HTML5 Canvas tekniikkaa... Sorry...<br>" + "Pà ivitã selain uudempaan versioon - melkein kaikki tukevat Canvas tekniikkaa, myã s IE9!<br><br>" + "Siirrytà à n sivulle ilman HMTL5/Canvas mittareita...", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 80

82 led_title : "Pà ivityksen tila tuntematon", led_title_ok : "Pà ivitys OK", led_title_lost : "Tietoliikenneyhteys poikki!", led_title_unknown : "Pà ivityksen tila tuntematon!", led_title_offline: "Sà à asema on offline tilassa.", weather : "sã à ", latitude : "Latitude", longitude : "Longitude", elevation : "Korkeus merenpinnasta", statusstr : "Ladataan...", StatusMsg : "Ladataan...", StatusHttp : "HTTP pyyntã epã onnistui", StatusRetry : "Yritetà à n uudelleen...", StatusRetryIn : "Uusi yritys...", StatusTimeout : "Aikakatkaistiin", StatusPageLimit : "Sivun automaattisten latausten lukumã à rã on saavutettu, pã ivitã selaimen nã kymã jatkaaksesi!", StatusLastUpdate : "Pà ivitetty", StatusMinsAgo : "minuuttia sitten", StatusHoursAgo : "tuntia sitten", StatusDaysAgo : "pã ivã à sitten", realtimecorrupt : "Tekstitiedoston lataus epã onnistui! Yritetà à n uudelleen...", timer : "sekuntia", at : "klo.", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Là mpã tila", temp_title_in : "Sisà lã mpã tila", temp_out_info : "Ulkolà mpã tila", temp_out_web : "Ulko", temp_in_info : "Sisà lã mpã tila", temp_in_web : "Sisà ", temp_trend_info : "Là mpã tilan muutos", dew_title : "Kastepiste", dew_info : "Kastepiste", dew_web : "Kastepiste", apptemp_title : "Nà ennã inen", apptemp_info : "Nà ennã inen (tuntuu-kuin) lã mpã tila", apptemp_web : "Nà ennã inen", chill_title : "Hyytà vyys", chill_info : "Hyytà vyys", chill_web : "Hyytà vyys", heat_title : "Tukaluus", heat_info : "Tukaluus", heat_web : "Tukaluus", humdx_title : "Kosteusindeksi", humdx_info : "Kosteusindeksi", humdx_web : "Kosteusindeksi", rain_title : "Sademà à rã ", rrate_title : "Voimakkuus", rrate_info : "Sateen voimakkuus", LastRain_info : "Viimeksi satanut", LastRainedT_info : "Tà nã à n", LastRainedY_info : "Eilen", hum_title_out : "Ilmankosteus", hum_title_in : "Sisà ilmankosteus", hum_out_info : "Ilmankosteus", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 81

83 hum_in_info : "Sisà ilmankosteus", hum_out_web : "Ulko", hum_in_web : "Sisà ", baro_title : "Ilmanpaine", baro_info : "Ilmanpaine", baro_trend_info : "Ilmanpaineen muutos", wind_title : "Tuulen nopeus", tenminavg_title : "Keskimà à rã inen tuulen nopeus", tenminavgwind_info : "Keskimà à rã inen tuulen nopeus (10 min)", maxavgwind_info : "Korkein keskituulen nopeus", tenmingust_info : "Puuskatuuli (10 min)", maxgust_info : "Kovin tuulen puuska", latest_title : "Viimeisin tuuli", latestwind_info : "Viimeisin tuulen nopeus", bearing_info : "Suunta", latest_web : "Viimeisin", tenminavg_web : "Keskimà à rin", dominant_bearing : "Hallitseva tuulen suunta tã nã à n", calm: "tyyntã ", windrose: "Tuuliruusu", windruntoday: "Tuulen matka tã nã à n", uv_title : "UV Indeksi", uv_levels : ["n/a", "Heikko", "Kohtalainen", "Voimakas", "Hyvin voimakas", "à à rimmã isen voimakas"], uv_headlines : ["Ei mitattavissa olevaa UV sã teilyã ", "Ei vaaraa normaali henkilã lle", "Và hã inen vaara suojaamattomassa auringonpaisteessa", "Vaara suojaamattomassa auringonpaisteessa", "Suuri vaara suojaamattomassa auringonpaisteessa", "à à rimmã isen suuri vaara suojaamattomassa auringonpaisteessa"], uv_details : ["On yã aika tai erittã in pilvistã.", "Kà ytã aurinkolaseja. Kà ytã aurinkosuojavoidetta jos maassa on lunta tai jos ihosi on erityisen herkkã.", "Kà ytã aurinkolaseja ja aurinkosuojavoidetta. Suojaa iho vaatteilla ja pã à hineellã <br>" + "ja pysyttele varjoisassa ympã ristã ssã keskipã ivã n tienoilla, kun auringon paiste on voimakkaimmillaan.", "Kà ytã aurinkolaseja ja aurinkosuojavoidetta, jonka suojakerroin on vã hintã à n 15. <br>" + "Suojaa iho vaatteilla ja leveã lierisellã pã à hineellã. Và hennã ulkonaoloa kello 11:n ja 16:n vã lillã.", "Kà ytã aurinkolaseja ja aurinkosuojavoidetta, jonka suojakerroin on vã hintã à n 15. <br>" + "Suojaa iho vaatteilla ja leveã lierisellã pã à hineellã. Và hennã ulkonaoloa kello 11:n ja 16:n vã lillã.", "Varaudu sã teilyyn kaikin mahdollisin tavoin, kã ytã aurinkolaseja ja aurinkovoidetta, <br>" + "suojaa vartalo pitkã hihaisella paidalla ja pitkillã housuilla, kã ytã leveã lieristã pã à hinettã <br>" + "ja vã ltã aurinkoa kello 11:n ja 16:n vã lillã."], solar_title : "Auringon sã teilyteho", solar_currentmax : "Teorettinen maksimisã teily nyt", solar_ofmax : "maksimista", solar_maxtoday : "Maksimisà teily tã nã à n", lowest_info : "Alin", highest_info : "Korkein", lowestf_info : "Alin", for proper translation of feminine words highestf_info : "Korkein", for proper translation of feminine words RisingVeryRapidly : "Nousee erittã in nopeasti", RisingQuickly : "Nousee nopeasti", Rising : "Nousee", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 82

84 RisingSlowly : "Nousee hitaasti", Steady : "Vakaa", FallingSlowly : "Laskee hitaasti", Falling : "Laskee", FallingQuickly : "Laskee nopeasti", FallingVeryRapidly : "Laskee erittã in nopeasti", maximum_info : "Korkein", max_hour_info : "Suurin sademã à rã tunnissa", minimum_info : "Alin", coords : ["P", "PKO", "KO", "IKO", "I", "IKA", "KA", "EKA", "E", "ELO", "LO", "LLO", "L", "LLU", "LU", "PLU"], compass : ["P", "KO", "I", "KA", "E", "LO", "L", "LU"], months : ["Tammikuuta", "Helmikuuta", "Maaliskuuta", "Huhtikuuta", "Toukokuuta", "Kesà kuuta", "Heinà kuuta", "Elokuuta", "Syyskuuta", "Lokakuuta", "Marraskuuta", "Joulukuuta"] ; ============================================================================================================ ========== Norwegian ============================================================================================================ ========== LANG.NO = { canvasnosupport : "Ingen HTML5 Canvas-stà tte i nettleseren din... Beklager...<br>" + "Prà v à oppgradere nettleseren til en nyere versjon - nesten alle nettlesere stã tter Canvas nã, selv IE9!<br><br>" + "Omdirigerer deg til den 'gamle' mã lersiden...", led_title : "Fjernsensor: Status ukjent", led_title_ok : "Fjernsensor: OK", led_title_lost : "Fjernsensor: Mistet kontakt!", led_title_unknown : "Fjernsensor: Status ukjent!", led_title_offline: "Và rstasjonen er ikke aktiv.", weather : "vã r", latitude : "Breddegrad", longitude : "Lengdegrad", elevation : "Hà yde", statusstr : "Laster...", StatusMsg : "Laster ned...", StatusHttp : "HTTP forespã rsel mislyktes", StatusRetry : "Prà ver igjen...", StatusRetryIn : "Prà ver igjen om...", StatusTimeout : "Tidsavbrutt", StatusPageLimit : "Sidens automatiske oppdatering er nã dd, du mã oppdatere (F5) siden for à fortsette", StatusLastUpdate : "Siste oppdatering", StatusMinsAgo : "minutter siden", StatusHoursAgo : "timer siden", StatusDaysAgo : "dager siden", realtimecorrupt : "Tekstfilnedlasting avbrutt! Prà ver pã nytt...", timer : "sekunder", at : "klokken", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Utetemperatur", temp_title_in : "Innetemperatur", temp_out_info : "Utetemperatur", temp_out_web : "Utendà rs", temp_in_info : "Innetemperatur", temp_in_web : "Innendà rs", temp_trend_info : "Temperaturtrend", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 83

85 dew_title : "Duggpunkt", dew_info : "Duggpunkt", dew_web : "Duggpunkt", apptemp_title : "Fà lt", apptemp_info : "Fà lt temperatur", apptemp_web : "Fà lt", chill_title : "Vindfaktor", chill_info : "Vindfaktor", chill_web : "Vindfaktor", heat_title : "Varmeindeks", heat_info : "Varmeindeks", heat_web : "Varmeindeks", humdx_title : "Luftfuktighet", humdx_info : "Luftfuktighet", humdx_web : "Luftfuktighet", rain_title : "Nedbà r", rrate_title : "Nedbà r", rrate_info : "Nedbà rsrate", LastRain_info : "Sist nedbã r", LastRainedT_info : "I dag klokken", LastRainedY_info : "I gã r klokken", hum_title_out : "Luftfuktighet", hum_title_in : "Luftfuktighet inne", hum_out_info : "Luftfuktighet ute", hum_in_info : "Luftfuktighet inne", hum_out_web : "Utendà rs", hum_in_web : "Innendà rs", baro_title : "Trykk", baro_info : "Barometrisk trykk", baro_trend_info : "Trykktrend", wind_title : "Vindhastighet", tenminavg_title : "Snitt vindhastighet", tenminavgwind_info : "Snitt vindhastighet (10 min)", maxavgwind_info : "Maks. snitt vindhastighet", tenmingust_info : "Vindkast (10 min)", maxgust_info : "Hà yeste vindkast", latest_title : "Siste vind", latestwind_info : "Siste vindhastighet", bearing_info : "Retning", latest_web : "Siste", tenminavg_web : "Snitt", dominant_bearing : "Dominerende vind i dag", calm: "stille", windrose: "Vindrose", windruntoday: "Vindstrekning i dag", uv_title : "UV Indeks", uv_levels : ["Ingen", "Ingen fare", "Liten risiko", "Hà y risiko", "Veldig hã y risiko", "Ekstrem risiko"], uv_headlines : ["Ingen mã lbar UV Indeks", 'Ingen fare for en "gjennomsnittlig" person', "Liten risiko for skade fra ubeskyttet soling", "Hà y risiko for skade fra ubeskyttet soling", "Svà rt hã y risiko for skade fra ubeskyttet soling", "Ekstrem risiko for skade fra ubeskyttet soling"], uv_details : ["Det er fortsatt natt - eller det er en veldig overskyet dag.", "Bruk solbriller pã lyse dager, bruk solkrem hvis det er snã pã bakken,<br>" + "som reflekterer UV-strà ling - hvis du ikke har spesielt god hud.", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 84

86 "Bruk solbriller og SPF30 + solkrem, dekk kroppen med klã r og<br>" + "en lue, sã k skygge midt pã dagen nã r solen er mest intens.", "Bruk solbriller og SPF30 + solkrem, dekk kroppen med solbeskyttende<br>" + "klã r og en skyggelue, reduser tid i solen fra to timer fã r<br>" + "til tre timer etter at solen er pã det hã yeste (ca 11:00 til 16:00 om sommeren i<br>" + "(soner som bruker sommertid).", "Bruk SPF30 + solkrem, en skjorte, solbriller og solhatt.<br>" + "Ikke vã re ute i solen for lenge.", "Ta alle forholdsregler, inkludert: bruk av solbriller samt bruk SPF30 + solkrem,<br>" + "dekk kroppen med en langermet skjorte og bukse, bruk skyggelue og<br>" + "unngã solen fra to timer fã r til tre timer etter at solen er pã det hã yeste (ca 11:00<br>" + "til 16:00 om sommeren i soner som bruker sommertid)."], solar_title : "Solstrà ling", solar_currentmax : "Nà vã rende teoretiske maksimale mã ling", solar_ofmax : "av maksimalt", solar_maxtoday : "Dagens maksimale mã ling", lowest_info : "Lavest", highest_info : "Hà yest", lowestf_info : "Lavest", for proper translation of feminine words highestf_info : "Hà yest", for proper translation of feminine words RisingVeryRapidly : "à ker veldig raskt", RisingQuickly : "à ker raskt", Rising : "à ker", RisingSlowly : "à ker sakte", Steady : "Jevn", FallingSlowly : "Faller sakte", Falling : "Faller", FallingQuickly : "Faller raskt", FallingVeryRapidly : "Faller veldig raskt", maximum_info : "Maks.", max_hour_info : "Maks. pr. time", minimum_info : "Min.", coords : ["N", "NNà ", "Nà ", "à Nà ", "à ", "à Sà ", "Sà ", "SSà ", "S", "SSV", "SV", "VSV", "V", "VNV", "NV", "NNV"], compass : ["N", "Nà ", "à ", "Sà ", "S", "SV", "V", "NV"], months : ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Des"] ; ============================================================================================================ ========== Italian ============================================================================================================ ========== LANG.IT = { canvasnosupport : "HTML5 Canvas non supportato dal tuo browser... Spiacente...<br>" + "Prova ad aggiornare il tuo browser ad una versione piè recente - quasi tutti i browser supportano Canvas adesso, eccetto IE9!<br><br>" + "Ti sto reindirizzando ad una pagina dei calibri precedente...", led_title : "Sensori: stato sconosciuto", led_title_ok : "Sensori: comumicazione OK", led_title_lost : "Sensori: comunicazione non OK", led_title_unknown : "Sensori: stato sconosciuto", led_title_offline : "Stazione meteo temporaneamente OFFLINE", weather : "meteo", latitude : "Latitudine", longitude : "Longitudine", elevation : "Altezza", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 85

87 statusstr : "Caricamento...", StatusMsg : "Downloading...", StatusHttp : "Richiesta HTTP Fallita", StatusRetry : "Sto riprovando...", StatusRetryIn : "Riprovo in...", StatusTimeout : "Timed out", StatusPageLimit : "Raggiunto limite auto-aggiornamento pagina, aggiorna la pagina per continuare", StatusLastUpdate : "Ultimo aggiornamento", StatusMinsAgo : "minuti fa", StatusHoursAgo : "ore fa", StatusDaysAgo : "giorni fa", realtimecorrupt : "File di testo scaricato corrotto! Sto riprovando...", timer : "secondi", at : "alle", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Temp. est.", temp_title_in : "Temp. int.", temp_out_info : "Temp. esterna", temp_out_web : "Esterna", temp_in_info : "Temp. interna", temp_in_web : "Interna", temp_trend_info : "Variaz. temp.", dew_title : "Dew Point", dew_info : "Dew Point", dew_web : "Dew Point", apptemp_title : "T. apparen.", apptemp_info : "Temp. apparente", apptemp_web : "Temp. apparente", chill_title : "Wind Chill", chill_info : "Wind Chill", chill_web : "Wind Chill", heat_title : "Ind. calor.", heat_info : "Indice di calore", heat_web : "Indice di calore", humdx_title : "Ind. umid.", humdx_info : "Indice di umiditã ", humdx_web : "Indice di umiditã ", rain_title : "Precipitaz.", rrate_title : "Rain Rate", rrate_info : "Rateo precipitaz.", LastRain_info : "Ultime precipit.", LastRainedT_info : "Oggi alle", LastRainedY_info : "Ieri alle", hum_title_out : "Umidità ", hum_title_in : "Umid. int.", hum_out_info : "Umid. esterna", hum_in_info : "Umid. interna", hum_out_web : "Esterna", hum_in_web : "Interna", baro_title : "Pressione", baro_info : "Pressione barometrica", baro_trend_info : "Variaz. press.", wind_title : "Vel. vento", tenminavg_title : "Vel. media", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 86

88 tenminavgwind_info : "Vel. media vento (10 min. media)", maxavgwind_info : "Vel. max. vento (10 min. media)", tenmingust_info : "Raffica max. (ultimi 10 min.)", maxgust_info : "Raffica max.", latest_title : "Ult. mis.", latestwind_info : "Ultima vel. misurata", bearing_info : "Direzione", latest_web : "Ultima direz.", tenminavg_web : "Direz. media", dominant_bearing : "Vento dominante oggi", calm : "calmo", windrose : "Direz. dominante", windruntoday : "Wind run odierno", uv_title : "Indice UV", uv_levels : ["Nessuna", "Nessun pericolo", "Rischio basso", "Rischio alto", "Rischio molto alto", "Rischio estremo"], uv_headlines : ["Indice UV non misurabile", "Nessun pericolo per la maggior parte delle persone", "Lieve pericolo di scottatura da una esposizione al sole non adeguatamente protetta", "Alto rischio di scottature da una esposizione al sole non adeguatamente protetta", "Rischio molto alto di scottature da una esposizione al sole non adeguatamente protetta", "Rischio estremo di scottature da una esposizione al sole non adeguatamente protetta"], uv_details : ["E' ancora notte o à molto nuvoloso.", "Indossa occhiali da sole nei giorni con molta luce; usa lenti da sole con neve al suolo,<br>" + "che potrebbe riflettere radiazioni UV, o se hai pelle particolarmente chiara.", "Indossa occhiali da sole ed utilizza protezioni solari SPF 30+, mantieni i vestiti ed indossa<br>" + "un cappello, riparati all'ombra durante le ore centrali quando il sole à pi㹠intenso.", "Indossa occhiali da sole ed utilizza protezioni solari SPF 30+, proteggi il corpo indossando vestiti chiari<br>" + "e un cappello a tesa larga, riduci inoltre l'esposizione al sole da due ore prima<br>" + "a tre ore dopo mezzogiorno (approssimativamente dalle 11:00 alle 16:00 durante l'estate nelle<br>" + "zone che osservano l'ora legale).", "Utilizza protezioni solari SPF 30+, una t-shirt, occhiali da sole, ed un cappello.<br>" + "Non stare al sole troppo a lungo.", "Prendi tutte le precauzioni, incluso: occhiali da sole, utilizzo protezioni solari SPF 30+,<br>" + "proteggi il corpo con una t-shirt a maniche lunghe e pantaloni, indossa un cappello con tesa, ed<br>" + "evita il sole da due ore prima a tre ore dopo mezzogiorno (approssimativamente dalle 11:00<br>" + "alle 16:00 durante l'estate nelle zone che osservano l'ora legale)."], solar_title : "Radiazione solare", solar_currentmax : "Attuale massima lettura teorica", solar_ofmax : "del massimo", solar_maxtoday : "Lettura massima odierna", lowest_info : "Minimo", highest_info : "Massimo", lowestf_info : "Minima", for proper translation of feminine words highestf_info : "Massima", for proper translation of feminine words RisingVeryRapidly : "In crescita molto rapida", RisingQuickly : "In crescita rapida", Rising : "In crescita", RisingSlowly : "In crescita lenta", Steady : "Costante", FallingSlowly : "In lento calo", Falling : "In calo", FallingQuickly : "In veloce calo", FallingVeryRapidly : "In calo molto rapido", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 87

89 maximum_info : "Massimo", max_hour_info : "Max. per ora", minimum_info : "Minimo", coords : ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSO", "SO", "OSO", "O", "ONO", "NO", "NNO"], compass : ["N", "NE", "E", "SE", "S", "SO", "O", "NO"], months : ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"] ; ============================================================================================================ ========== Spanish ============================================================================================================ ========== LANG.ES = { canvasnosupport : "No hay soporte para HTML5 en su navegador... Lo siento...<br>" + "Trate de actualizar su navegador a una versiã³n mã s reciente - casi todos los navegadores son compatibles con à l ahora, incluso IE9!<br><br>" + "Redirigir a la antigua pã gina de medidores...", led_title : "Sensor remoto en estado desconocido", led_title_ok : "Sensor remoto funcionando correctamente", led_title_lost : "Contacto perdido con el sensor remoto", led_title_unknown : "Sensor remoto en estado desconocido", led_title_offline : "La estaciã³n meteorolã³gica no estã conectada", weather : "estado del tiempo", latitude : "Latitud", longitude : "Longitud", elevation : "Elevación", statusstr : "Cargando...", StatusMsg : "Recibiendo...", StatusHttp : "Error en peticiã³n HTTP", StatusRetry : "Volviendo a probar...", StatusRetryIn : "Reintentando...", StatusTimeout : "Tiempo excedido", StatusPageLimit : "Se ha alcanzado el limite de tiempo de actualizacion automatica, recargue la pagina para continuar", StatusLastUpdate : "Ultima actualizaciã³n a las", StatusMinsAgo : "minutos", StatusHoursAgo : "horas", StatusDaysAgo : "dãas", realtimecorrupt : "Archivo daã±ado! Reintentando...", timer : "Segundos", at : "a las", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Temperatura", temp_title_in : "Temp. interior", temp_out_info : "Temperatura exterior", temp_out_web : "Exterior", temp_in_info : "Temperatura interior", temp_in_web : "Interior", temp_trend_info : "Tendencia", dew_title : "RocÃo", dew_info : "Temperatura de rocão", dew_web : "RocÃo", apptemp_title : "Temp. aparente", apptemp_info : "Temperatura aparente", apptemp_web : "Temperatura aparente", chill_title : "Windchill", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 88

90 chill_info : "Windchill", chill_web : "Windchill", heat_title : "Indice de calor", heat_info : "Indice de calor", heat_web : "Indice de calor", humdx_title : "Humidex", humdx_info : "Humidex", humdx_web : "Humidex", rain_title : "Precipitación", rrate_title : "Intensidad de lluvia", rrate_info : "Intensidad de lluvia", LastRain_info : "Llovió por última vez", LastRainedT_info : "Hoy a las", LastRainedY_info : "Ayer a las", hum_title_out : "Humedad", hum_title_in : "Humedad interior", hum_out_info : "Humedad Exterior", hum_in_info : "Humedad interior", hum_out_web : "Exterior", hum_in_web : "Interior", baro_title : "Presión", baro_info : "Presión", baro_trend_info : "Tendencia de presiã³n", wind_title : "Velocidad Viento", tenminavg_title : "Velocidad media actual", tenminavgwind_info : "Velocidad media actual (10 min)", maxavgwind_info : "Velocidad media mã xima", tenmingust_info : "Rà cha (10 min)", maxgust_info : "Racha mã xima", latest_title : "Viento actual", latestwind_info : "Última lectura de viento", bearing_info : "Dirección", latest_web : "Actual", tenminavg_web : "Media", dominant_bearing : "Viento dominante hoy", calm : "calma", windrose : "Rosa de los Vientos", windruntoday : "Recorrido del viento hoy", uv_title : "Indice UV", uv_levels : ["Nulo", "Sin riesgo", "Riesgo bajo", "Riesgo alto", "Riesgo muy alto", "Riesgo extremo"], uv_headlines : ["Indice UV no medible", "Sin riesgo para la poblaciã³n media", "Riesgo bajo de quemadura por exposiciã³n al sol sin protecciã³n", "Riesgo alto de quemadura por exposiciã³n al sol sin protecciã³n", "Riesgo muy alto de quemadura por exposiciã³n al sol sin protecciã³n", "Riesgo extremo de quemadura por exposiciã³n al sol sin protecciã³n"], uv_details : ["Es aun de noche o el dãa estã muy nublado.", "Use gafas de sol en dãas soleados; use protecciã³n solar si hay nieve en el suelo,<br>" + "que refleja la radiaciã³n UV, o si tiene la piel particularmente sensible.", "Use gafas de sol y protector solar factor 30 o superior, cubra el cuerpo con ropa y<br>" + "una gorra, y busque zonas de sombra al mediodãa cuando el sol es mã s intenso.", "Use gafas de sol y protecciã³n solar factor 30 o superior, cubra el cuerpo con ropas que protejan del sol<br>" + "y sombreros anchos, y reduzca el tiempo al sol desde dos horas antes hasta<br>" + "tres horas despuã s del mediodãa solar (aproximadamente desde las 11:00 hasta las 16:00 en verano).", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 89

91 "Use protecciã³n solar factor 30 o superior, camisa, gafas de sol, y gorra.<br>" + "No permanezca al sol durante mucho tiempo.", "Tome todas las precauciones, incluyendo: usar gafas de sol y protecciã³n solar factor 30 o superior,<br>" + "cubrir el cuerpo con camisas de manga larga y pantalones, llevar sombreros de ala ancha, y<br>" + "evitar el sol desde dos horas antes hasta tres horas despuã s del mediodãa solar<br>" + "(aproximadamente desde las 11:00 hasta las 16:00 PM en verano)."], solar_title : "Radiación solar", solar_currentmax : "Mà ximo teã³rico en este momento", solar_ofmax : "del mã ximo teã³rico", solar_maxtoday : "Valor mã ximo real hoy", lowest_info : "MÃnima", highest_info : "Mà xima", lowestf_info : "MÃnima", highestf_info : "Mà xima", RisingVeryRapidly : "Subiendo muy rã pidamente", RisingQuickly : "Subiendo rã pidamente", Rising : "Subiendo", RisingSlowly : "Subiendo lentamente", Steady : "Estable", FallingSlowly : "Bajando lentamente", Falling : "Bajando", FallingQuickly : "Bajando rã pidamente", FallingVeryRapidly : "Bajando muy rã pidamente", maximum_info : "Mà xima", max_hour_info : "Mà xima por hora", minimum_info : "MÃnima", coords : ["N","NNE","NE","ENE","E","ESE","SE","SSE","S","OSO","O","OSO","O","ONO","NO","NNO","ONO"], compass : ["N","NE","E","SE","S","SO","O","NO"], months : ["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"] ; ============================================================================================================ ========== Catalan ============================================================================================================ ========== LANG.CT = { canvasnosupport : "No hi ha suport per HTML5 en el seu navegador... Ho sento...<br>" + "Intenta actualitzar el vostre navegador a una versiã³ mã s recent - gairebã tots els navegadors sã³n compatibles amb HTML5 ara, fins i tot IE9!<br><br>" + "Redirigir a una 'vella' pã gina de mesuradors...", led_title : "Estat del sensor remot desconegut", led_title_ok : "Sensor remot correcte", led_title_lost : "Perdut contacte amb el sensor remot", led_title_unknown : "Estat del sensor remot desconegut ", led_title_offline : "L'estació meteorolã²gica estã fora de lãnea", weather : "El Temps", latitude : "Latitud", longitude : "Longuitud", elevation : "Elevació", statusstr : "Carregant...", StatusMsg : "Descà rrega de dades...", StatusHttp : "Petició HTTP Error", StatusRetry : "Tornant a provar...", StatusRetryIn : "Tornant a provar en..", StatusTimeout : "Temps d'espera esgotat", StatusPageLimit : "La autoactualitzaciã³ de la pã gina ha arribat al lãmit, actualitza el teu navegador per a continuar", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 90

92 StatusLastUpdate : "Última actualitzaciã³", StatusMinsAgo : "minuts", StatusHoursAgo : "hores", StatusDaysAgo : "dies", realtimecorrupt : "Descà rrega de l'arxiu de text corrupte! reintentant...", timer : "segons", at : "a les ", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Temperatura", temp_title_in : " T Interior", temp_out_info : "Temp exterior", temp_out_web : "Exterior", temp_in_info : "Temp interior", temp_in_web : "Interior", temp_trend_info : "Tendà ncia", dew_title : "Rosada", dew_info : "Punt de rosada", dew_web : "Punt de rosada", apptemp_title : "Temp aparent", apptemp_info : "Temperatura aparent", apptemp_web : "Aparent", chill_title : " T sensaciã³", chill_info : " T sensaciã³", chill_web : " T sensaciã³", heat_title : "à ndex de calor", heat_info : "à ndex de calor", heat_web : "à ndex de calor", humdx_title : " T xafogor", humdx_info : " T xafogor", humdx_web : " T xafogor", rain_title : "Pluja", rrate_title : "Intensitat de pluja", rrate_info : "Intensitat de pluja", LastRain_info : "Últim dia de pluja", LastRainedT_info : "Avui a les", LastRainedY_info : "Ahir a les", hum_title_out : "Humitat Exterior", hum_title_in : "Humitat Interior", hum_out_info : "Humitat Exterior", hum_in_info : "Humitat Interior", hum_out_web : "Exterior", hum_in_web : "Interior", baro_title : "Pressió", baro_info : "Pressió", baro_trend_info : "Tendà ncia", wind_title : "Velocitat del Vent", tenminavg_title : "Velocitat mitjana del vent", tenminavgwind_info : " Vel. del Vent (promig 10')", maxavgwind_info : "Vent Mà xim (promig 10')", tenmingust_info : "Rà fega mã xima (últims 10 min)", maxgust_info : "Rà fega mã xima", latest_title : "Direcció del vent", latestwind_info : "Últimes velocitat del vent", bearing_info : "última", latest_web : "Darrer", tenminavg_web : "Mitjana", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 91

93 dominant_bearing : "Vent dominant avui", calm: "calma", windrose: "Rosa dels Vents", windruntoday: "Recorregut del vent avui", uv_title : "Index UV", uv_levels : ["Cap", "Sense perill", "Risc mãnim", "Risc alt", "Risc molt alt", "Risc extrem"], uv_headlines : ["Index UV no mesurable", "Sense perill per a la mitjana de les persones", "Risc baix de lesions per exposiciã³ al sol sense protecciã³", "Risc alt de lesions per exposiciã³ al sol sense protecciã³", "Risc molt alt de lesions per exposiciã³ al sol sense protecciã³", "Risc extrem de lesions per exposiciã³ al sol sense protecciã³"], uv_details : ["Encara à s de nit o à s un dia molt tapat.", "Utilitza ulleres de sol en dies clars; feu servir protecciã³ solar si hi ha neu al terra,<br>" + "que reflecteix la radiaciã³ UV, o si tã la pell particularment clara.", "Utilitzar ulleres de sol i protecciã³ solar SPF 30+, cobrir el cos amb roba i<br>" + "barret, busqui ombra per migdia quan el sol à s mã s intens.", "Utilitzi ulleres de sol i protecciã³ solar SPF 30+, cobriu el cos amb roba<br>" + "i un barret, reduiu l'exposiciã³ al sol de dos<br>" + "a tres hores abans del migdia solar (normalment de 11:00 AM a 4:00 PM durant l'estiu en <br>" + "zones que fan servir l'horari d'estiu).", "Utilitzar protecciã³ solar SPF 30+, una camisa, ulleres de sol i barret.<br>" + "No estar al sol durant llargs perãodes de temps.", "Prengui totes les precaucions, incloent: utilitzar ulleres de sol i protecciã³ solar SPF 30+,<br>" + "cobrir el cos amb camises de mã niga llarga i pantalons llargs, utilitzar un barret ampli, i<br>" + "evitar el sol a partir de dues hores abans o tres hores desprã s del migdia solar (aprox. de 11:00 AM<br>" + "a 4:00 PM durant l'estiu en zones que fan servir l'horari d'estiu)."], solar_title : "Radiació Solar", solar_currentmax : "Mà xima lectura teã²rica actual", solar_ofmax : "del mã xim", solar_maxtoday : "Lectura mã xima d'avui", lowest_info : "MÃnima", highest_info : "Mà xima", lowestf_info : "MÃnima", highestf_info : "Mà xima", RisingVeryRapidly : "Pujant molt rã pidament", RisingQuickly : "Pujant rã pidament", Rising : "Pujant", RisingSlowly : "Pujant lentament", Steady : "Estable", FallingSlowly : "Baixant lentament", Falling : "Baixant", FallingQuickly : "Baixant rã pidament", FallingVeryRapidly : "Baixant molt rã pidament", maximum_info : "Mà xim", max_hour_info : "Pluja horã ria mã xima", minimum_info : "MÃnim", coords : ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "WSW", "W", "WSW", "W", "WNW", "NW", "NNW", "WNW"], compass : ["N", "NE", "E", "ES", "S", "SW", "W", "NW"], months : ["Gener", "Febrer", "Marà ", "Abril", "Maig", "Juny", "Juliol", "Agost", "Setembre", "Octubre", "Novembre", "Desembre"] ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 92

94 ============================================================================================================ ========== Greek by Dimitris Vichos ============================================================================================================ ========== LANG.GR = { canvasnosupport : "Î ÎÎºÎ Î ÏƒÎ Ï Î Ï browser Ï Î Ï Ï Ï Î ÏƒÎ¹Î¼Î Ï Î Î¹Î Ï Îµ Πεν Ï Ï Î ÏƒÏ Î Ï Î Î ÎµÎ¹ Ï Î Î½ γλώσσα HTML- 5<br>" + "Î Î½Î±Î²Î±Î Î¼Î ÏƒÏ Îµ Ï Î Î½ browser Ï Î Ï Ï Ï Î ÏƒÎ¹Î¼Î Ï Î Î¹Î Ï Îµ σε ÎµÎºÎ Î ÏƒÎ Ï Î Ï Ï Ï Î ÏƒÏ Î Ï Î Î ÎµÎ¹ HTML-5 <br><br>" + "Î Î½Î±ÎºÎ±Ï ÎµÏ Î Î½ÏƒÎ ÏƒÎµÎ»Î Î Î±Ï ÏƒÏ Î Î½ Ï Î±Î»Î¹Î.. gauges page...", led_title : "Î Ï ÏŽÎ»ÎµÎ¹Î± ÎµÏ Î±Ï Î Ï Î¼Îµ Ï Î Î½ Î±Î¹ÏƒÎ Î Ï Î Ï Î±", led_title_ok : "Î Î¹ÏƒÎ Î Ï Î Ï Î± ÎµÎ½Ï Î Î¾ÎµÎ¹", led_title_lost : "Î Ï ÏŽÎ»ÎµÎ¹Î± ÎµÏ Î±Ï Î Ï!", led_title_unknown : "Î Î³Ï ÏƒÏ Î ÎºÎ±Ï Î ÏƒÏ Î±ÏƒÎ Î±Î¹ÏƒÎ Î Ï Î Ï Î±!", led_title_offline: "Ο Î¼ÎµÏ ÎµÏ Ï Î Î»Î Î³Î¹ÎºÏŒÏ ÏƒÏ Î±Î Î¼ÏŒÏ ÎµÎ Î½Î±Î¹ ÎµÎºÏ ÏŒÏ Î Î¹ÎºÏ Ï Î Ï.", weather : "ÎšÎ±Î¹Ï ÏŒÏ ", latitude : "Î ÏŒÏ ÎµÎ¹Î Ï Î»Î Ï Î Ï ", longitude : "Î Î½Î±Ï Î Î»Î¹ÎºÏŒ Î¼Î ÎºÎ Ï ", elevation : "Î ÏˆÏŒÎ¼ÎµÏ Ï Î ", statusstr : "Î Î Ï Ï ÏŽÎ½ÎµÎ¹...", StatusMsg : "Î ÏŒÏ Ï Ï ÏƒÎ Î ÎµÎ Î Î¼ÎÎ½Ï Î½...", StatusHttp : "Î Ï ÏŽÎ»ÎµÎ¹Î± Î Î¹ÎµÏ Î Ï Î½ÏƒÎ Ï http...", StatusRetry : "Î Ï Î±Î½Î Î»Î ÏˆÎ...", StatusRetryIn : "Î Ï Î±Î½Î Î»Î ÏˆÎ ÏƒÎµ...", StatusTimeout : "Î Î Î¾Î Ï Ï ÏŒÎ½Î Ï ", StatusPageLimit : "Î Î±Ï Î±ÎºÎ±Î»ÏŽ Î±Î½Î±Î½ÎµÏŽÏƒÏ Îµ Ï Î Î½ browser...", StatusLastUpdate : "Î ÎµÎ»ÎµÏ Ï Î±Î Î± λΠψΠΠεΠΠμÎÎ½Ï Î½", StatusMinsAgo : "Î»ÎµÏ Ï Î Ï Ï Î Î½", StatusHoursAgo : "ÏŽÏ ÎµÏ Ï Ï Î Î½", StatusDaysAgo : "μÎÏ ÎµÏ Ï Ï Î¹Î½", realtimecorrupt : "Î Ï Î ÏƒÏ Î Î ÎµÎ¹Î± Î±Î½Î ÎºÏ Î ÏƒÎ Ï Î ÎµÎ Î Î¼ÎÎ½Ï Î½, ÎµÏ Î±Î½Î Î»Î ÏˆÎ ", timer : "Î ÎµÏ Ï ÎµÏ ÏŒÎ»ÎµÏ Ï Î±", at : "ÏƒÏ Î¹Ï ", MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out') 11 characters ====" "==== 11 characters temp_title_out : "Î ÎµÏ Î¼ÏŒÎ¼ÎµÏ Ï Î ", temp_title_in : "Î ÏƒÏ Ï ÎµÏ Î¹ÎºÎ Î ÎµÏ Î¼Î ÎºÏ Î±ÏƒÎ Î±", temp_out_info : "Î Î¾Ï Ï ÎµÏ Î¹ÎºÎ Î ÎµÏ Î¼Î ÎºÏ Î±ÏƒÎ Î±", temp_out_web : "Î Î¾Ï Ï ÎµÏ Î¹ÎºÎ ", temp_in_info : "Î ÏƒÏ Ï ÎµÏ Î¹ÎºÎ Î ÎµÏ Î¼Î ÎºÏ Î±ÏƒÎ Î±", temp_in_web : "Î ÏƒÏ Ï ÎµÏ Î¹ÎºÎ ", temp_trend_info : "Î Î ÏƒÎ Î ÎµÏ Î¼Î ÎºÏ Î±ÏƒÎ Î±Ï ", dew_title : "Î Î Î¼ÎµÎ Î Î Ï ÏŒÏƒÎ Ï ", dew_info : "Î Î Î¼ÎµÎ Î Î Ï ÏŒÏƒÎ Ï ", dew_web : "Î Î Î¼ÎµÎ Î Î Ï ÏŒÏƒÎ Ï ", apptemp_title : "Î Î¹ÏƒÎ Î Ï Î Î ÎµÏ Î¼Î ÎºÏ Î±ÏƒÎ Î±", apptemp_info : "Î Î¹ÏƒÎ Î Ï Î Î ÎµÏ Î¼Î ÎºÏ Î±ÏƒÎ Î±", apptemp_web : "Î Î¹ÏƒÎ Î Ï Î Î ÎµÏ Î¼Î ÎºÏ Î±ÏƒÎ Î±", chill_title : "Î Î ÏƒÎ Î ÏƒÎ ÏˆÏ Ï Î Ï Ï ", chill_info : "Î Î ÏƒÎ Î ÏƒÎ ÏˆÏ Ï Î Ï Ï ", chill_web : "Î Î ÏƒÎ Î ÏƒÎ ÏˆÏ Ï Î Ï Ï ", heat_title : "Î ÎµÎ ÎºÏ Î Ï Î Ï ÏƒÏ Î Ï Î Î±Ï ", heat_info : "Î ÎµÎ ÎºÏ Î Ï Î Ï ÏƒÏ Î Ï Î Î±Ï ", heat_web : "Î ÎµÎ ÎºÏ Î Ï Î Ï ÏƒÏ Î Ï Î Î±Ï ", humdx_title : "Î ÎµÎ ÎºÏ Î Ï Ï Î³Ï Î±ÏƒÎ Î±Ï ", Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 93

95 humdx_info : "Î ÎµÎ ÎºÏ Î Ï Ï Î³Ï Î±ÏƒÎ Î±Ï ", humdx_web : "Î ÎµÎ ÎºÏ Î Ï Ï Î³Ï Î±ÏƒÎ Î±Ï ", rain_title : "Î Ï Î Ï ÏŒÏ Ï Ï ÏƒÎ ", rrate_title : "Î Î½Ï Î±ÏƒÎ Î²Ï Î Ï ÏŒÏ Ï Ï ÏƒÎ Ï ", rrate_info : "Î Î½Ï Î±ÏƒÎ Î²Ï Î Ï ÏŒÏ Ï Ï ÏƒÎ Ï ", LastRain_info : "Î ÎµÎ»ÎµÏ Ï Î±Î Î± Î²Ï Î Ï ÏŒÏ Ï Ï ÏƒÎ ", LastRainedT_info : "Î Î Î¼ÎµÏ Î± ÏƒÏ Î¹Ï ", LastRainedY_info : "Ï Î ÎµÏ ÏƒÏ Î¹Ï ", hum_title_out : "Î Î³Ï Î±ÏƒÎ Î±", hum_title_in : "Î ÏƒÏ Ï ÎµÏ Î¹ÎºÎ Ï Î³Ï Î±ÏƒÎ Î±", hum_out_info : "Î Î¾Ï Ï ÎµÏ Î¹ÎºÎ Ï Î³Ï Î±ÏƒÎ Î±", hum_in_info : "Î ÏƒÏ Ï ÎµÏ Î¹ÎºÎ Ï Î³Ï Î±ÏƒÎ Î±", hum_out_web : "Î Î¾Ï Ï ÎµÏ Î¹ÎºÎ ", hum_in_web : "Î ÏƒÏ Ï ÎµÏ Î¹ÎºÎ ", baro_title : "Î Î±Ï ÏŒÎ¼ÎµÏ Ï Î ", baro_info : "Î Ï Î¼Î ÏƒÏ Î±Î¹Ï Î¹ÎºÎ Ï Î ÎµÏƒÎ ", baro_trend_info : "Î Î ÏƒÎ Ï Î ÎµÏƒÎ Ï ", wind_title : "AÎ½ÎµÎ¼ÏŒÎ¼ÎµÏ Ï Î ", tenminavg_title : "ÎœÎÏƒÎ Ï Î±Ï Ï Ï Î Ï Î± ανÎÎ¼Î Ï ", tenminavgwind_info : "ÎœÎσΠ10Î»ÎµÏ Ï Î Ï Î±Ï Ï Ï Î Ï Î± ανÎÎ¼Î Ï ", maxavgwind_info : "ÎœÎÎ³Î¹ÏƒÏ Î Î¼ÎÏƒÎ Ï Î±Ï Ï Ï Î Ï Î± ανÎÎ¼Î Ï ", tenmingust_info : "Î Î¹Ï Î Î±Î½ÎÎ¼Î Ï ", maxgust_info : "ÎœÎÎ³Î¹ÏƒÏ Î Ï Î¹Ï Î Î±Î½ÎÎ¼Î Ï ", latest_title : "Î ÎµÎ»ÎµÏ Ï Î±Î Î± ÎνΠειξΠανÎÎ¼Î Ï ", latestwind_info : "Î ÎµÎ»ÎµÏ Ï Î±Î Î± Ï Î±Ï Ï Ï Î Ï Î± ανÎÎ¼Î Ï ", bearing_info : "ΠιÎÏ Î Ï Î½ÏƒÎ ", latest_web : "Î ÎµÎ»ÎµÏ Ï Î±Î Î±", tenminavg_web : "ÎœÎσΠ", dominant_bearing : "Î Ï Î¹ÎºÏ Î±Ï ÎÏƒÏ ÎµÏ Î Î Î¹ÎÏ Î Ï Î½ÏƒÎ ", calm: "ΠΠνεμΠα", windrose: "Î Î½ÎµÎ¼Î Ï Ï Î¹Î ", windruntoday: "Î Ï ÎξιμΠΠÎÏ Î±", uv_title : "UV ΠνΠειξΠ", uv_levels : ["ΜΠΠενικό", "Î ÎºÎ Î½Î Ï Î½Î ", "ÎœÎ¹ÎºÏ Î Î Ï Î¹ÎºÏ Î½Î Ï Î½ÏŒÏ Î Ï Î±", "Î ÏˆÎ Î»Î Î Ï Î¹ÎºÏ Î½Î Ï Î½ÏŒÏ Î Ï Î±", "Î Î Î»Ï Ï ÏˆÎ Î»Î ÎµÏ Î¹ÎºÏ Î½Î Ï Î½ÏŒÏ Î Ï Î±", "Î ÎºÏ Î±Î Î± ÎµÏ Î¹ÎºÏ Î½Î Ï Î½ÏŒÏ Î Ï Î±"], uv_headlines : ["ÎœÎ Î¼ÎµÏ Ï Î ÏƒÎ¹Î¼Î UV ÎνΠεικΠ", "Î ÎºÎ Î½Î Ï Î½Î ÏƒÏ Î Î¼ÎÏƒÎ ÎµÏ Î Ï ÎµÎ Î ", "ÎœÎ¹ÎºÏ ÏŒÏ ÎºÎ Î½Î Ï Î½Î Ï ÏƒÏ Î Î½ Î Î»Î¹Î±ÎºÎ Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î±", "Î ÏˆÎ Î»ÏŒÏ ÎºÎ Î½Î Ï Î½Î Ï ÏƒÏ Î Î½ Î Î»Î¹Î±ÎºÎ Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î±", "Î Î Î»Ï Ï ÏˆÎ Î»ÏŒÏ ÎºÎ Î½Î Ï Î½Î Ï ÏƒÏ Î Î½ Î Î»Î¹Î±ÎºÎ Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î±", "EÎ¾Î±Î¹Ï ÎµÏ Î¹ÎºÎ Ï ÏˆÎ Î»ÏŒÏ ÎºÎ Î½Î Ï Î½Î Ï ÏƒÏ Î Î½ Î Î»Î¹Î±ÎºÎ Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î±"], uv_details : ["Πκόμα εΠναι Î½Ï Ï Ï Î± ΠΠμÎÏ Î± εΠναι Ï Î Î»Ï ÏƒÏ Î½Î½ÎµÏ Î¹Î±ÏƒÎ¼ÎνÎ.", "Î Î Ï Î Î¼Îµ Î³Ï Î±Î»Î¹Î Î Î»Î Î Ï ; Ï Î Ï Î Î¼Îµ Î³Ï Î±Î»Î¹Î Î Î»Î Î Ï ÏŒÏ Î±Î½ Ï Î ÎÎ Î±Ï Î Ï ÎµÎ Î½Î±Î¹ Ï Î¹Î Î½Î ÏƒÎºÎµÏ ÎÏ,<br>" + "Ï Î Ï Î Î¼Îµ Ï Î Ï Ï Î± Ï Î Ï Î±Î½Ï Î±Î½Î±ÎºÎ»Î Ï Î½ Ï Î Î½ ΠλιακΠUV Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î±.", "Î Î Ï Î Î¼Îµ Î³Ï Î±Î»Î¹Î ÎºÎ±Î¹ Î±Î½Ï Î Î»Î¹Î±ÎºÏŒ με Î ÎµÎ ÎºÏ Î SPF 30+, Î Ï Ï Î½ÏŒÎ¼Î±ÏƒÏ Îµ με Î±Î½Î Î¹Ï Ï ÏŒÏ Ï Ï Î¼Î± Ï Î Ï Ï Î±<br>" + "ÎºÎ±Ï ÎλÎ, και Î±Ï Î Ï ÎµÏ Î³Î Ï Î¼Îµ Ï Î Î½ Î Î»Î¹Î Ï Î¹Ï Î ÎµÏ Î¼ÎÏ ÏŽÏ ÎµÏ Ï Î Ï Î Î¼ÎÏ Î±Ï.", "Î Î Ï Î Î¼Îµ Î³Ï Î±Î»Î¹Î ÎºÎ±Î¹ Î±Î½Ï Î Î»Î¹Î±ÎºÏŒ με Î ÎµÎ ÎºÏ Î SPF 30+, ÎºÎ±Î»Ï Ï Ï Î Ï Î¼Îµ Ï Î ÏƒÏŽÎ¼Î± με Î±Î½Ï Î Î»Î¹Î±ÎºÏŒ<br>" + "Î Ï Î Î³Ï Î±Î¼Î¼Î±Ï Î Î Î Ï Î¼Îµ Ï Î¹Ï ÎµÎ¾Ï Ï ÎµÏ Î¹ÎºÎÏ Î Î Ï Î»ÎµÎ¹ÎÏ <br>" + "3 ÏŽÏ ÎµÏ Î¼ÎµÏ Î Ï Î Î½ μÎÎ³Î¹ÏƒÏ Î Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î± (Î±Ï ÏŒ Ï Î¹Ï 11 Ï Î Ï Ï Ï Î Ï Ï Ï Î¹Ï 4 Ï Î Î±Ï Î ÎµÏ Î¼Î±<br>" + "Οι Î ÏŽÎ½ÎµÏ Ï Î Ï Î ÎµÏ Î¹Î½Î Ï ÏŽÏ Î±Ï ).", "Î Î Ï Î Î¼Îµ Î±Î½Ï Î Î»Î¹Î±ÎºÏŒ με Î ÎµÎ ÎºÏ Î SPF 30+, ÎœÏ Î»Î Ï Î Î ÎºÎ¹ Î±Î½Î Î¹Ï Ï ÏŒÏ Ï Ï Î¼Î Î³Ï Î±Î»Î¹Î Î Î»Î Î Ï ÎºÎ±Î¹ Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 94

96 ÎºÎ±Ï ÎλÎ.<br>" + "Î Ï ÏŒÏ ÎÏ Î³Î Ï Î¼Îµ Ï Î Î½ Î¼Î±ÎºÏ Î Ï Ï ÏŒÎ½Î¹Î± Ï Î±Ï Î±Î¼Î Î½Î ÏƒÏ Î Î½ ΠλιÎ.", "Î Î±Î Ï Î½Î Ï Î¼Ï ÏŒÎ»ÎµÏ Ï Î¹Ï Ï Ï Î Ï Ï Î»Î Î¾ÎµÎ¹Ï, ÏƒÏ Î¼Ï ÎµÏ Î¹Î»Î±Î¼Î²Î±Î½Î Î¼ÎÎ½Ï Î½: Î³Ï Î±Î»Î¹Î Î Î»Î Î Ï ÎºÎ±Î¹ Î±Î½Ï Î Î»Î¹Î±ÎºÏŒ με Î ÎµÎ ÎºÏ Î SPF 30+,<br>" + "Î Ï Ï Î½ÏŒÎ¼Î±ÏƒÏ Îµ με Î±Î½Î Î¹Ï Ï ÏŒÏ Ï Ï Î¼Î± Ï Î Ï Ï Î±,ÎºÎ±Ï ÎλÎ, και<br>" + "Î Ï Î Ï ÎµÏ Î³Î Ï Î¼Îµ Ï ÎµÎ»ÎµÎ Ï Ï Ï Î Î½ ΠλιΠ2 ÏŽÏ ÎµÏ Ï Ï Î Î½ και Ï Ï ÎµÎ Ï ÏŽÏ ÎµÏ Î¼ÎµÏ Î Ï Î Î¼ÎÎ³Î¹ÏƒÏ Î Ï Î Ï Î Î»Î¹Î±ÎºÎ Ï Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î±Ï (Î±Ï ÏŒ Ï Î¹Ï 11 Ï Î Ï Ï Ï Î <br>" + "Ï Ï Ï Î¹Ï 4 Ï Î Î±Ï ÏŒÎ³ÎµÏ Î¼Î± )."], solar_title : "Î Î»Î¹Î±ÎºÎ Î±ÎºÏ Î¹Î½Î Î²Î Î»Î Î±", solar_currentmax : "Î Ï ÎÏ Î Ï ÏƒÎ± μÎÎ³Î¹ÏƒÏ Î Î ÎµÏ Ï Î Ï Î¹ÎºÎ ÎνΠειξΠ", solar_ofmax : "Ï Î Ï Î¼ÎÎ³Î¹ÏƒÏ Î Ï ", solar_maxtoday : "Î Î Î¼ÎµÏ Î¹Î½Î Î¼ÎÎ³Î¹ÏƒÏ Î ÎνΠειξΠ", lowest_info : "EÎ»Î Ï Î¹ÏƒÏ Î ", highest_info : "ÎœÎÎ³Î¹ÏƒÏ Î ", lowestf_info : "Î Î»Î Ï Î¹ÏƒÏ Î ", for proper translation of feminine words highestf_info : "ÎœÎÎ³Î¹ÏƒÏ Î ", for proper translation of feminine words RisingVeryRapidly : "ΠαγΠαΠα Ï Ï ÏŽÏƒÎ ", RisingQuickly : "Ï Î±Ï ÎµÎ Î± Ï Ï ÏŽÏƒÎ ", Rising : "Ï Ï ÏŽÏƒÎ ", RisingSlowly : "Î Ï Î³Î Ï Ï ÏŽÏƒÎ ", Steady : "Î Ï Î±Î ÎµÏ Î ", FallingSlowly : "Î Ï Î³Î Î Î½Î Î Î Ï ", Falling : "Î Î½Î Î Î Ï ", FallingQuickly : "Î Î±Ï ÎµÎ Î± Ï Ï ÏŽÏƒÎ ", FallingVeryRapidly : "ΠαγΠαΠα Ï Ï ÏŽÏƒÎ ", maximum_info : "MÎÎ³Î¹ÏƒÏ Î ", max_hour_info : "MÎÎ³Î¹ÏƒÏ Î Ï Ï Î¹Î±Î Î±", minimum_info : "Î Î»Î Ï Î¹ÏƒÏ Î ", coords : ["Î ", "Î Î Î ", "Î Î ", "Î Î Î ", "Î ", "Î Î Î ", "Î Î ", "Î Î Î ", "Î ", "Î Î Î ", "Î Î ", "Î Î Î ", "Î ", "Î Î Î ", "Î Î ", "Î Î Î "], compass : ["Î ", "Î Î ", "Î ", "Î Î ", "Î ", "Î Î ", "Î ", "Î Î "], months : ["Παν", "Πεβ", "ÎœÎ±Ï ", "Î Ï Ï ", "Μαι", "Î Î Ï Î½", "Î Î Ï Î»", "Î Ï Î³", "Î ÎµÏ ", "ÎŸÎºÏ ", "ΠΠε", "Πεκ"] ; ============================================================================================================ ========== function changelang(newlang) { update the gauge titles etc gauges.setlang(newlang); HTML boiler plate $('#lang_weather').html(newlang.weather); $('#lang_latitude').html(newlang.latitude); $('#lang_longitude').html(newlang.longitude); $('#lang_elevation').html(newlang.elevation); update the web page radio buttons $('#lab_temp1').html(newlang.temp_out_web); $('#lab_temp2').html(newlang.temp_in_web); $('#lab_dew1').html(newlang.dew_web); $('#lab_dew2').html(newlang.apptemp_web); $('#lab_dew3').html(newlang.chill_web); $('#lab_dew4').html(newlang.heat_web); $('#lab_dew5').html(newlang.humdx_web); $('#lab_hum1').html(newlang.hum_out_web); $('#lab_hum2').html(newlang.hum_in_web); unit table $('#lang_temperature').html(newlang.temp_title_out); $('#lang_rainfall').html(newlang.rain_title); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 95

97 $('#lang_pressure').html(newlang.baro_title); $('#lang_windspeed').html(newlang.wind_title); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 96

98 2.7 Steeseries.js /*! * Name : steelseries.js * Authors : Gerrit Grunwald, Mark Crossley * Last modified : * Revision : a - Cumulus specific version * * Copyright (c) 2011, Gerrit Grunwald, Mark Crossley * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, are permitted * provided that the following conditions are met: * * # Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * # Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following * disclaimer in the documentation and/or other materials provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, * BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, LOSS OF USE, DATA, OR PROFITS; OR BUSINESS * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ /*globals Tween */ var steelseries = (function () { Constants var HALF_PI = Math.PI * 0.5, TWO_PI = Math.PI * 2, PI = Math.PI, RAD_FACTOR = Math.PI / 180, DEG_FACTOR = 180 / Math.PI, doc = document, lcdfontname = 'LCDMono2Ultra,Arial,Verdana,sans-serif', stdfontname = 'Arial,Verdana,sans-serif'; ************************************* C O M P O N O N E N T S ************************************************ var radial = function (canvas, parameters) { parameters = parameters {; var gaugetype = (undefined === parameters.gaugetype? steelseries.gaugetype.type4 : parameters.gaugetype), size = (undefined === parameters.size? 200 : parameters.size), minvalue = (undefined === parameters.minvalue? 0 : parameters.minvalue), maxvalue = (undefined === parameters.maxvalue? (minvalue + 100) : parameters.maxvalue), nicescale = (undefined === parameters.nicescale? true : parameters.nicescale), threshold = (undefined === parameters.threshold? (maxvalue - minvalue) / 2 : parameters.threshold), section = (undefined === parameters.section? null : parameters.section), area = (undefined === parameters.area? null : parameters.area), titlestring = (undefined === parameters.titlestring? "" : parameters.titlestring), unitstring = (undefined === parameters.unitstring? "" : parameters.unitstring), framedesign = (undefined === parameters.framedesign? steelseries.framedesign.metal : parameters.framedesign), framevisible = (undefined === parameters.framevisible? true : parameters.framevisible), backgroundcolor = (undefined === parameters.backgroundcolor? steelseries.backgroundcolor.dark_gray : parameters.backgroundcolor), backgroundvisible = (undefined === parameters.backgroundvisible? true : parameters.backgroundvisible), pointertype = (undefined === parameters.pointertype? steelseries.pointertype.type1 : parameters.pointertype), pointercolor = (undefined === parameters.pointercolor? steelseries.colordef.red : parameters.pointercolor), knobtype = (undefined === parameters.knobtype? steelseries.knobtype.standard_knob : parameters.knobtype), Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 97

99 knobstyle = (undefined === parameters.knobstyle? steelseries.knobstyle.silver : parameters.knobstyle), lcdcolor = (undefined === parameters.lcdcolor? steelseries.lcdcolor.standard : parameters.lcdcolor), lcdvisible = (undefined === parameters.lcdvisible? true : parameters.lcdvisible), lcddecimals = (undefined === parameters.lcddecimals? 2 : parameters.lcddecimals), digitalfont = (undefined === parameters.digitalfont? false : parameters.digitalfont), fractionalscaledecimals = (undefined === parameters.fractionalscaledecimals? 1 : parameters.fractionalscaledecimals), ledcolor = (undefined === parameters.ledcolor? steelseries.ledcolor.red_led : parameters.ledcolor), ledvisible = (undefined === parameters.ledvisible? true : parameters.ledvisible), thresholdvisible = (undefined === parameters.thresholdvisible? true : parameters.thresholdvisible), minmeasuredvaluevisible = (undefined === parameters.minmeasuredvaluevisible? false : parameters.minmeasuredvaluevisible), maxmeasuredvaluevisible = (undefined === parameters.maxmeasuredvaluevisible? false : parameters.maxmeasuredvaluevisible), foregroundtype = (undefined === parameters.foregroundtype? steelseries.foregroundtype.type1 : parameters.foregroundtype), foregroundvisible = (undefined === parameters.foregroundvisible? true : parameters.foregroundvisible), labelnumberformat = (undefined === parameters.labelnumberformat? steelseries.labelnumberformat.standard : parameters.labelnumberformat), playalarm = (undefined === parameters.playalarm? false : parameters.playalarm), alarmsound = (undefined === parameters.alarmsound? false : parameters.alarmsound), customlayer = (undefined === parameters.customlayer? null : parameters.customlayer), ticklabelorientation = (undefined === parameters.ticklabelorientation? (gaugetype === steelseries.gaugetype.type1? steelseries.ticklabelorientation.tangent : steelseries.ticklabelorientation.normal) : parameters.ticklabelorientation), trendvisible = (undefined === parameters.trendvisible? false : parameters.trendvisible), trendcolors = (undefined === parameters.trendcolors? [steelseries.ledcolor.red_led, steelseries.ledcolor.green_led, steelseries.ledcolor.cyan_led] : parameters.trendcolors), useodometer = (undefined === parameters.useodometer? false : parameters.useodometer), odometerparams = (undefined === parameters.odometerparams? { : parameters.odometerparams), odometerusevalue = (undefined === parameters.odometerusevalue? false : parameters.odometerusevalue), fullscaledeflectiontime = (undefined === parameters.fullscaledeflectiontime? 2.5 : parameters.fullscaledeflectiontime); Create audio tag for alarm sound var audioelement; if (playalarm && alarmsound!== false) { audioelement = doc.createelement('audio'); audioelement.setattribute('src', alarmsound); audioelement.setattribute('src', 'js/alarm.mp3'); audioelement.setattribute('preload', 'auto'); var value = minvalue; var odovalue = minvalue; var self = this; Properties var minmeasuredvalue = maxvalue; var maxmeasuredvalue = minvalue; var ledblinking = false; var ledtimerid = 0; var tween; var repainting = false; var trendindicator = steelseries.trendstate.off; var trendsize = size * 0.06; var trendposx = size * 0.29; var trendposy = size * 0.36; GaugeType specific private variables var freeareaangle; var rotationoffset; var tickmarkoffset; var anglerange; var anglestep; var angle = rotationoffset + (value - minvalue) * anglestep; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 98

100 Get the canvas context and clear it var mainctx = doc.getelementbyid(canvas).getcontext('2d'); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); Set the size mainctx.canvas.width = size; mainctx.canvas.height = size; var imagewidth = size; var imageheight = size; var centerx = imagewidth / 2; var centery = imageheight / 2; Misc var ledposx = 0.6 * imagewidth; var ledposy = 0.4 * imageheight; var lcdfontheight = Math.floor(imageWidth / 10); var stdfont = lcdfontheight + 'px ' + stdfontname; var lcdfont = lcdfontheight + 'px ' + lcdfontname; var lcdheight = imageheight * 0.13; var lcdwidth = imagewidth * 0.4; var lcdposx = (imagewidth - lcdwidth) / 2; var lcdposy = imageheight * 0.57; var odoposx, odoposy = imageheight * 0.61; var shadowoffset = imagewidth * 0.006; Constants var initialized = false; Tickmark specific private variables var niceminvalue = minvalue; var nicemaxvalue = maxvalue; var nicerange = maxvalue - minvalue; var range = nicemaxvalue - niceminvalue; var minortickspacing = 0; var majortickspacing = 0; var maxnoofminorticks = 10; var maxnoofmajorticks = 10; Method to calculate nice values for min, max and range for the tickmarks var calculate = function calculate() { if (nicescale) { nicerange = calcnicenumber(maxvalue - minvalue, false); majortickspacing = calcnicenumber(nicerange / (maxnoofmajorticks - 1), true); niceminvalue = Math.floor(minValue / majortickspacing) * majortickspacing; nicemaxvalue = Math.ceil(maxValue / majortickspacing) * majortickspacing; minortickspacing = calcnicenumber(majortickspacing / (maxnoofminorticks - 1), true); minvalue = niceminvalue; maxvalue = nicemaxvalue; range = maxvalue - minvalue; else { nicerange = (maxvalue - minvalue); niceminvalue = minvalue; nicemaxvalue = maxvalue; range = nicerange; majortickspacing = calcnicenumber(nicerange / (maxnoofmajorticks - 1), true); minortickspacing = calcnicenumber(majortickspacing / (maxnoofminorticks - 1), true); switch (gaugetype.type) { case 'type1': freeareaangle = 0; rotationoffset = PI; tickmarkoffset = HALF_PI; anglerange = HALF_PI; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 99

101 anglestep = anglerange / range; case 'type2': freeareaangle = 0; rotationoffset = PI; tickmarkoffset = HALF_PI; anglerange = PI; anglestep = anglerange / range; case 'type3': freeareaangle = 0; rotationoffset = HALF_PI; tickmarkoffset = 0; anglerange = 1.5 * PI; anglestep = anglerange / range; case 'type4': /* falls through */ default: freeareaangle = 60 * RAD_FACTOR; rotationoffset = HALF_PI + (freeareaangle / 2); tickmarkoffset = 0; anglerange = TWO_PI - freeareaangle; anglestep = anglerange / range; angle = rotationoffset + (value - minvalue) * anglestep; ; ************** Buffer creation ******************** Buffer for the frame var framebuffer = createbuffer(size, size); var framecontext = framebuffer.getcontext('2d'); Buffer for the background var backgroundbuffer = createbuffer(size, size); var backgroundcontext = backgroundbuffer.getcontext('2d'); var lcdbuffer; Buffer for led on painting code var ledbufferon = createbuffer(size * , size * ); var ledcontexton = ledbufferon.getcontext('2d'); Buffer for led off painting code var ledbufferoff = createbuffer(size * , size * ); var ledcontextoff = ledbufferoff.getcontext('2d'); Buffer for current led painting code var ledbuffer = ledbufferoff; Buffer for the minmeasuredvalue indicator var minmeasuredvaluebuffer = createbuffer(math.ceil(size * ), Math.ceil(size * )); var minmeasuredvaluectx = minmeasuredvaluebuffer.getcontext('2d'); Buffer for the maxmeasuredvalue indicator var maxmeasuredvaluebuffer = createbuffer(math.ceil(size * ), Math.ceil(size * )); var maxmeasuredvaluectx = maxmeasuredvaluebuffer.getcontext('2d'); Buffer for pointer image painting code var pointerbuffer = createbuffer(size, size); var pointercontext = pointerbuffer.getcontext('2d'); Buffer for static foreground painting code Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 100

102 var foregroundbuffer = createbuffer(size, size); var foregroundcontext = foregroundbuffer.getcontext('2d'); Buffers for trend indicators var trendupbuffer, trendsteadybuffer, trenddownbuffer, trendoffbuffer; Buffer for odometer var odogauge, odobuffer, odocontext; if (useodometer && lcdvisible) { odobuffer = createbuffer(10, 10); size doesn't matter, it will get reset by odometer code odocontext = odobuffer.getcontext('2d'); ************** Image creation ******************** var drawlcdtext = function (ctx, value) { ctx.restore(); ctx.save(); ctx.textalign = 'right'; ctx.strokestyle = lcdcolor.textcolor; ctx.fillstyle = lcdcolor.textcolor; if (lcdcolor === steelseries.lcdcolor.standard lcdcolor === steelseries.lcdcolor.standard_green) { ctx.shadowcolor = 'gray'; ctx.shadowoffsetx = imagewidth * 0.007; ctx.shadowoffsety = imagewidth * 0.007; ctx.shadowblur = imagewidth * 0.007; if (digitalfont) { ctx.font = lcdfont; else { ctx.font = stdfont; ctx.filltext(value.tofixed(lcddecimals), lcdposx + lcdwidth - lcdwidth * 0.05, lcdposy + lcdheight * lcdfontheight * 0.38, lcdwidth * 0.9); ctx.restore(); ; var drawpostsimage = function (ctx) { ctx.save(); if ('type1' === gaugetype.type) { Draw max center top post ctx.drawimage(createknobimage(math.ceil(imageheight * ), steelseries.knobtype.standard_knob, knobstyle), imagewidth * , imageheight * ); if ('type1' === gaugetype.type 'type2' === gaugetype.type) { Draw min left post ctx.drawimage(createknobimage(math.ceil(imageheight * ), steelseries.knobtype.standard_knob, knobstyle), imagewidth * , imageheight * ); if ('type2' === gaugetype.type 'type3' === gaugetype.type) { Draw max right post ctx.drawimage(createknobimage(math.ceil(imageheight * ), steelseries.knobtype.standard_knob, knobstyle), imagewidth * , imageheight * ); if ('type3' === gaugetype.type) { Draw min center bottom post ctx.drawimage(createknobimage(math.ceil(imageheight * ), steelseries.knobtype.standard_knob, knobstyle), imagewidth * , imageheight * ); if ('type4' === gaugetype.type) { Min post Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 101

103 ctx.drawimage(createknobimage(math.ceil(imageheight * ), steelseries.knobtype.standard_knob, knobstyle), imagewidth * , imageheight * ); Max post ctx.drawimage(createknobimage(math.ceil(imageheight * ), steelseries.knobtype.standard_knob, knobstyle), imagewidth * , imageheight * ); ; ctx.restore(); var createthresholdimage = function () { var thresholdbuffer = doc.createelement('canvas'); thresholdbuffer.width = Math.ceil(size * ); thresholdbuffer.height = Math.ceil(thresholdBuffer.width * 0.9); var thresholdctx = thresholdbuffer.getcontext('2d'); thresholdctx.save(); var gradthreshold = thresholdctx.createlineargradient(0, 0.1, 0, thresholdbuffer.height * 0.9); gradthreshold.addcolorstop(0, '#520000'); gradthreshold.addcolorstop(0.3, '#fc1d00'); gradthreshold.addcolorstop(0.59, '#fc1d00'); gradthreshold.addcolorstop(1, '#520000'); thresholdctx.fillstyle = gradthreshold; thresholdctx.beginpath(); thresholdctx.moveto(thresholdbuffer.width * 0.5, 0.1); thresholdctx.lineto(thresholdbuffer.width * 0.9, thresholdbuffer.height * 0.9); thresholdctx.lineto(thresholdbuffer.width * 0.1, thresholdbuffer.height * 0.9); thresholdctx.lineto(thresholdbuffer.width * 0.5, 0.1); thresholdctx.closepath(); thresholdctx.fill(); thresholdctx.strokestyle = '#FFFFFF'; thresholdctx.stroke(); thresholdctx.restore(); return thresholdbuffer; ; var drawareasectionimage = function (ctx, start, stop, color, filled) { if (start < minvalue) { start = minvalue; else if (start > maxvalue) { start = maxvalue; if (stop < minvalue) { stop = minvalue; else if (stop > maxvalue) { stop = maxvalue; if (start >= stop) { return; ctx.save(); ctx.strokestyle = color; ctx.fillstyle = color; ctx.linewidth = imagewidth * 0.035; var startangle = (anglerange / range * start - anglerange / range * minvalue); var stopangle = startangle + (stop - start) / (range / anglerange); ctx.translate(centerx, centery); ctx.rotate(rotationoffset); ctx.beginpath(); if (filled) { ctx.moveto(0, 0); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 102

104 ctx.arc(0, 0, imagewidth * ctx.linewidth / 2, startangle, stopangle, false); else { ctx.arc(0, 0, imagewidth * 0.365, startangle, stopangle, false); ctx.closepath(); if (filled) { ctx.moveto(0, 0); ctx.fill(); else { ctx.stroke(); ctx.translate(-centerx, -centery); ctx.restore(); ; var drawtickmarksimage = function (ctx, labelnumberformat) { var fontsize = Math.ceil(imageWidth * 0.04), alpha = rotationoffset, Tracks total rotation rotationstep = anglestep * minortickspacing, textrotationangle, valuecounter = minvalue, majortickcounter = maxnoofminorticks - 1, OUTER_POINT = imagewidth * 0.38, MAJOR_INNER_POINT = imagewidth * 0.35, MED_INNER_POINT = imagewidth * 0.355, MINOR_INNER_POINT = imagewidth * 0.36, TEXT_TRANSLATE_X = imagewidth * 0.3, TEXT_WIDTH = imagewidth * 0.1, HALF_MAX_NO_OF_MINOR_TICKS = maxnoofminorticks / 2, MAX_VALUE_ROUNDED = parsefloat(maxvalue.tofixed(2)), i; backgroundcolor.labelcolor.setalpha(1); ctx.save(); ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.font = fontsize + 'px ' + stdfontname; ctx.strokestyle = backgroundcolor.labelcolor.getrgbacolor(); ctx.fillstyle = backgroundcolor.labelcolor.getrgbacolor(); ctx.translate(centerx, centery); ctx.rotate(rotationoffset); if (gaugetype.type === 'type1' gaugetype.type === 'type2') { TEXT_WIDTH = imagewidth * 0.035; for (i = minvalue; parsefloat(i.tofixed(2)) <= MAX_VALUE_ROUNDED; i += minortickspacing) { textrotationangle = rotationstep + HALF_PI; majortickcounter++; Draw major tickmarks if (majortickcounter === maxnoofminorticks) { ctx.linewidth = 1.5; ctx.beginpath(); ctx.moveto(outer_point, 0); ctx.lineto(major_inner_point, 0); ctx.closepath(); ctx.stroke(); ctx.save(); ctx.translate(text_translate_x, 0); switch (ticklabelorientation.type) { case 'horizontal': textrotationangle = -alpha; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 103

105 case 'tangent': textrotationangle = (alpha <= HALF_PI + PI? PI : 0); case 'normal': /* falls through */ default: textrotationangle = HALF_PI; ctx.rotate(textrotationangle); switch (labelnumberformat.format) { case 'fractional': ctx.filltext((valuecounter.tofixed(fractionalscaledecimals)), 0, 0, TEXT_WIDTH); case 'scientific': ctx.filltext((valuecounter.toprecision(2)), 0, 0, TEXT_WIDTH); case 'standard': /* falls through */ default: ctx.filltext((valuecounter.tofixed(0)), 0, 0, TEXT_WIDTH); ctx.translate(-text_translate_x, 0); ctx.restore(); valuecounter += majortickspacing; majortickcounter = 0; ctx.rotate(rotationstep); alpha += rotationstep; continue; Draw tickmark every minor tickmark spacing if (0 === maxnoofminorticks % 2 && majortickcounter === (HALF_MAX_NO_OF_MINOR_TICKS)) { ctx.linewidth = 1; ctx.beginpath(); ctx.moveto(outer_point, 0); ctx.lineto(med_inner_point, 0); ctx.closepath(); ctx.stroke(); else { ctx.linewidth = 0.5; ctx.beginpath(); ctx.moveto(outer_point, 0); ctx.lineto(minor_inner_point, 0); ctx.closepath(); ctx.stroke(); ctx.rotate(rotationstep); alpha += rotationstep; /* Logarithmic scale var tmp = 0.1; var minvaluelog10 = 0.1; var maxvaluelog10 = parseint(math.pow(10, Math.ceil(Math.log10(maxValue)))); var drawlabel = true; anglestep = anglerange / (maxvaluelog10 - minvaluelog10) for (var scalefactor = minvaluelog10 ; scalefactor <= maxvaluelog10 ; scalefactor *= 10) { for (var i = parsefloat((1 * scalefactor).tofixed(1)) ; i < parsefloat((10 * scalefactor).tofixed(1)) ; i += scalefactor) Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 104

106 { textrotationangle =+ rotationstep + HALF_PI; if(drawlabel) { ctx.linewidth = 1.5; ctx.beginpath(); ctx.moveto(imagewidth * 0.38,0); ctx.lineto(imagewidth * 0.35,0); ctx.closepath(); ctx.stroke(); ctx.save(); ctx.translate(imagewidth * 0.31, 0); ctx.rotate(textrotationangle); ctx.filltext(parsefloat((i).tofixed(1)), 0, 0, imagewidth * ); ctx.translate(-imagewidth * 0.31, 0); ctx.restore(); drawlabel = false; else { ctx.linewidth = 0.5; ctx.beginpath(); ctx.moveto(imagewidth * 0.38,0); ctx.lineto(imagewidth * 0.36,0); ctx.closepath(); ctx.stroke(); doc.write("log10 scale value: " + parsefloat((i).tofixed(1)) + "<br>"); Math.log10(parseFloat((i).toFixed(1))); ctx.rotate(rotationstep); tmp = 0.1; drawlabel = true; */ ctx.translate(-centerx, -centery); ctx.restore(); ; ************** Initialization ******************** Draw all static painting code to background var init = function (parameters) { parameters = parameters {; var drawframe = (undefined === parameters.frame? false : parameters.frame); var drawbackground = (undefined === parameters.background? false : parameters.background); var drawled = (undefined === parameters.led? false : parameters.led); var drawpointer = (undefined === parameters.pointer? false : parameters.pointer); var drawforeground = (undefined === parameters.foreground? false : parameters.foreground); var drawtrend = (undefined === parameters.trend? false : parameters.trend); var drawodo = (undefined === parameters.odo? false : parameters.odo); initialized = true; Calculate the current min and max values and the range calculate(); Create frame in frame buffer (backgroundbuffer) if (drawframe && framevisible) { drawradialframeimage(framecontext, framedesign, centerx, centery, imagewidth, imageheight); Create background in background buffer (backgroundbuffer) if (drawbackground && backgroundvisible) { drawradialbackgroundimage(backgroundcontext, backgroundcolor, centerx, centery, imagewidth, imageheight); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 105

107 Create custom layer in background buffer (backgroundbuffer) drawradialcustomimage(backgroundcontext, customlayer, centerx, centery, imagewidth, imageheight); Draw LED ON in ledbuffer_on if (drawled) { ledcontexton.drawimage(createledimage(math.ceil(size * ), 1, ledcolor), 0, 0); Draw LED ON in ledbuffer_off ledcontextoff.drawimage(createledimage(math.ceil(size * ), 0, ledcolor), 0, 0); Draw min measured value indicator in minmeasuredvaluebuffer if (minmeasuredvaluevisible) { minmeasuredvaluectx.drawimage(createmeasuredvalueimage(math.ceil(size * ), steelseries.colordef.blue.dark.getrgbacolor(), true, true), 0, 0); Draw max measured value indicator in maxmeasuredvaluebuffer if (maxmeasuredvaluevisible) { maxmeasuredvaluectx.drawimage(createmeasuredvalueimage(math.ceil(size * ), steelseries.colordef.red.medium.getrgbacolor(), true), 0, 0); Create alignment posts in background buffer (backgroundbuffer) if (drawbackground && backgroundvisible) { drawpostsimage(backgroundcontext); Create section in background buffer (backgroundbuffer) if (null!== section && 0 < section.length) { var sectionindex = section.length; do { sectionindex--; drawareasectionimage(backgroundcontext, section[sectionindex].start, section[sectionindex].stop, section[sectionindex].color, false); while (0 < sectionindex); Create area in background buffer (backgroundbuffer) if (null!== area && 0 < area.length) { var areaindex = area.length; do { areaindex--; drawareasectionimage(backgroundcontext, area[areaindex].start, area[areaindex].stop, area[areaindex].color, true); while (0 < areaindex); Create tickmarks in background buffer (backgroundbuffer) drawtickmarksimage(backgroundcontext, labelnumberformat); Create title in background buffer (backgroundbuffer) drawtitleimage(backgroundcontext, imagewidth, imageheight, titlestring, unitstring, backgroundcolor, true, true); Draw threshold image to background context if (drawbackground && thresholdvisible) { backgroundcontext.save(); backgroundcontext.translate(centerx, centery); backgroundcontext.rotate(rotationoffset + (threshold - minvalue) * anglestep + HALF_PI); backgroundcontext.translate(-centerx, -centery); backgroundcontext.drawimage(createthresholdimage(), imagewidth * 0.475, imageheight * 0.13); backgroundcontext.translate(centerx, centery); backgroundcontext.restore(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 106

108 Create lcd background if selected in background buffer (backgroundbuffer) if (drawbackground && lcdvisible) { if (useodometer && drawodo) { odogauge = new steelseries.odometer('', { _context: odocontext, height: size * 0.075, decimals: odometerparams.decimals, digits: (odometerparams.digits === undefined? 5 : odometerparams.digits), valueforecolor: odometerparams.valueforecolor, valuebackcolor: odometerparams.valuebackcolor, decimalforecolor: odometerparams.decimalforecolor, decimalbackcolor: odometerparams.decimalbackcolor, font: odometerparams.font, value: value ); odoposx = (imagewidth - odobuffer.width) / 2; else if (!useodometer) { lcdbuffer = createlcdbackgroundimage(lcdwidth, lcdheight, lcdcolor); backgroundcontext.drawimage(lcdbuffer, lcdposx, lcdposy); Create pointer image in pointer buffer (contentbuffer) if (drawpointer) { drawpointerimage(pointercontext, imagewidth, pointertype, pointercolor, backgroundcolor.labelcolor); Create foreground in foreground buffer (foregroundbuffer) if (drawforeground && foregroundvisible) { var knobvisible = (pointertype.type === 'type15' pointertype.type === 'type16'? false : true); drawradialforegroundimage(foregroundcontext, foregroundtype, imagewidth, imageheight, knobvisible, knobtype, knobstyle, gaugetype); Create the trend indicator buffers if (drawtrend && trendvisible) { trendupbuffer = createtrendindicator(trendsize, steelseries.trendstate.up, trendcolors); trendsteadybuffer = createtrendindicator(trendsize, steelseries.trendstate.steady, trendcolors); trenddownbuffer = createtrendindicator(trendsize, steelseries.trendstate.down, trendcolors); trendoffbuffer = createtrendindicator(trendsize, steelseries.trendstate.off, trendcolors); ; var resetbuffers = function (buffers) { buffers = buffers {; var resetframe = (undefined === buffers.frame? false : buffers.frame); var resetbackground = (undefined === buffers.background? false : buffers.background); var resetled = (undefined === buffers.led? false : buffers.led); var resetpointer = (undefined === buffers.pointer? false : buffers.pointer); var resetforeground = (undefined === buffers.foreground? false : buffers.foreground); if (resetframe) { framebuffer.width = size; framebuffer.height = size; framecontext = framebuffer.getcontext('2d'); if (resetbackground) { backgroundbuffer.width = size; backgroundbuffer.height = size; backgroundcontext = backgroundbuffer.getcontext('2d'); if (resetled) { ledbufferon.width = Math.ceil(size * ); ledbufferon.height = Math.ceil(size * ); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 107

109 ledcontexton = ledbufferon.getcontext('2d'); ledbufferoff.width = Math.ceil(size * ); ledbufferoff.height = Math.ceil(size * ); ledcontextoff = ledbufferoff.getcontext('2d'); Buffer for current led painting code ledbuffer = ledbufferoff; if (resetpointer) { pointerbuffer.width = size; pointerbuffer.height = size; pointercontext = pointerbuffer.getcontext('2d'); if (resetforeground) { foregroundbuffer.width = size; foregroundbuffer.height = size; foregroundcontext = foregroundbuffer.getcontext('2d'); ; var toggleandrepaintled = function () { if (ledvisible) { if (ledbuffer === ledbufferon) { ledbuffer = ledbufferoff; else { ledbuffer = ledbufferon; if (!repainting) { repainting = true; requestanimframe(self.repaint); ; var blink = function (blinking) { if (blinking) { ledtimerid = setinterval(toggleandrepaintled, 1000); else { clearinterval(ledtimerid); ; ************************************ Public methods ************************************** this.setvalue = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue); if (value!== targetvalue) { value = targetvalue; if (value > maxmeasuredvalue) { maxmeasuredvalue = value; if (value < minmeasuredvalue) { minmeasuredvalue = value; if (value >= threshold &&!ledblinking) { ledblinking = true; blink(ledblinking); if (playalarm) { audioelement.play(); else if (value < threshold) { ledblinking = false; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 108

110 blink(ledblinking); if (playalarm) { audioelement.pause(); this.repaint(); return this; ; this.getvalue = function () { return value; ; this.setodovalue = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = (newvalue < 0? 0 : newvalue); if (odovalue!== targetvalue) { odovalue = targetvalue; this.repaint(); return this; ; this.getodovalue = function () { return odovalue; ; this.setvalueanimated = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = (newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue)), gauge = this, time; if (value!== targetvalue) { if (undefined!== tween) { if (tween.playing) { tween.stop(); time = fullscaledeflectiontime * Math.abs(targetValue - value) / (maxvalue - minvalue); time = Math.max(time, fullscaledeflectiontime / 5); tween = new Tween({, '', Tween.regularEaseInOut, value, targetvalue, time); tween = new Tween({, '', Tween.regularEaseInOut, value, targetvalue, 1); tween = new Tween(new Object(), '', Tween.strongEaseInOut, value, targetvalue, 1); tween.onmotionchanged = function (event) { value = event.target._pos; if (value >= threshold &&!ledblinking) { ledblinking = true; blink(ledblinking); if (playalarm) { audioelement.play(); else if (value < threshold) { ledblinking = false; blink(ledblinking); if (playalarm) { audioelement.pause(); if (value > maxmeasuredvalue) { maxmeasuredvalue = value; if (value < minmeasuredvalue) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 109

111 minmeasuredvalue = value; if (!repainting) { repainting = true; requestanimframe(gauge.repaint); ; tween.start(); return this; ; this.resetminmeasuredvalue = function () { minmeasuredvalue = value; this.repaint(); ; this.resetmaxmeasuredvalue = function () { maxmeasuredvalue = value; this.repaint(); return this; ; this.setminmeasuredvaluevisible = function (visible) { minmeasuredvaluevisible = visible; this.repaint(); return this; ; this.setmaxmeasuredvaluevisible = function (visible) { maxmeasuredvaluevisible = visible; this.repaint(); return this; ; this.setmaxmeasuredvalue = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue); maxmeasuredvalue = targetvalue; this.repaint(); return this; ; this.setminmeasuredvalue = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue); minmeasuredvalue = targetvalue; this.repaint(); return this; ; this.settitlestring = function (title) { titlestring = title; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setunitstring = function (unit) { unitstring = unit; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 110

112 this.setminvalue = function (value) { minvalue = parsefloat(value); resetbuffers({frame: true, background: true); init({frame: true, background: true); this.repaint(); return this; ; this.getminvalue = function () { return minvalue; ; this.setmaxvalue = function (value) { maxvalue = parsefloat(value); resetbuffers({frame: true, background: true); init({frame: true, background: true); this.repaint(); return this; ; this.getmaxvalue = function () { return maxvalue; ; this.setthreshold = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue); threshold = targetvalue; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setarea = function (areaval) { area = areaval; resetbuffers({background: true, foreground: true); init({background: true, foreground: true ); this.repaint(); return this; ; this.setsection = function (areasec) { section = areasec; resetbuffers({background: true, foreground: true); init({background: true, foreground: true ); this.repaint(); return this; ; this.setthresholdvisible = function (visible) { thresholdvisible = visible; this.repaint(); return this; ; this.setlcddecimals = function (decimals) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 111

113 lcddecimals = parseint(decimals, 10); this.repaint(); return this; ; this.setframedesign = function (newframedesign) { resetbuffers({frame: true); framedesign = newframedesign; init({frame: true); this.repaint(); return this; ; this.setbackgroundcolor = function (newbackgroundcolor) { resetbuffers({background: true, pointer: (pointertype.type === 'type2' pointertype.type === 'type13'? true : false) background ); backgroundcolor = newbackgroundcolor; init({background: true, type2 & 13 depend on background pointer: (pointertype.type === 'type2' pointertype.type === 'type13'? true : false) ); this.repaint(); return this; ; type2 & 13 depend on this.setforegroundtype = function (newforegroundtype) { resetbuffers({foreground: true); foregroundtype = newforegroundtype; init({foreground: true); this.repaint(); return this; ; this.setpointertype = function (newpointertype) { resetbuffers({pointer: true, foreground: true ); pointertype = newpointertype; init({pointer: true, foreground: true ); this.repaint(); return this; ; this.setpointercolor = function (newpointercolor) { resetbuffers({pointer: true); pointercolor = newpointercolor; init({pointer: true); this.repaint(); return this; ; this.setledcolor = function (newledcolor) { resetbuffers({led: true); ledcolor = newledcolor; init({led: true); this.repaint(); return this; ; this.setlcdcolor = function (newlcdcolor) { lcdcolor = newlcdcolor; resetbuffers({background: true); init({background: true); this.repaint(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 112

114 return this; ; this.settrend = function (newvalue) { trendindicator = newvalue; this.repaint(); return this; ; this.settrendvisible = function (visible) { trendvisible = visible; this.repaint(); return this; ; this.setfractionalscaledecimals = function (decimals) { fractionalscaledecimals = parseint(decimals, 10); resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setlabelnumberformat = function (format) { labelnumberformat = format; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.repaint = function () { if (!initialized) { init({frame: true, background: true, led: true, pointer: true, trend: true, foreground: true, odo: true); mainctx.clearrect(0, 0, size, size); Draw frame if (framevisible) { mainctx.drawimage(framebuffer, 0, 0); Draw buffered image to visible canvas mainctx.drawimage(backgroundbuffer, 0, 0); Draw lcd display if (lcdvisible) { if (useodometer) { odogauge.setvalue(odometerusevalue? value : odovalue); mainctx.drawimage(odobuffer, odoposx, odoposy); else { drawlcdtext(mainctx, value); Draw led if (ledvisible) { if (value < threshold) { ledblinking = false; ledbuffer = ledbufferoff; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 113

115 mainctx.drawimage(ledbuffer, ledposx, ledposy); Draw the trend indicator if (trendvisible) { switch (trendindicator.state) { case 'up': mainctx.drawimage(trendupbuffer, trendposx, trendposy); case 'steady': mainctx.drawimage(trendsteadybuffer, trendposx, trendposy); case 'down': mainctx.drawimage(trenddownbuffer, trendposx, trendposy); case 'off': mainctx.drawimage(trendoffbuffer, trendposx, trendposy); Draw min measured value indicator if (minmeasuredvaluevisible) { mainctx.save(); mainctx.translate(centerx, centery); mainctx.rotate(rotationoffset + HALF_PI + (minmeasuredvalue - minvalue) * anglestep); mainctx.translate(-centerx, -centery); mainctx.drawimage(minmeasuredvaluebuffer, mainctx.canvas.width * , mainctx.canvas.height * 0.105); mainctx.restore(); Draw max measured value indicator if (maxmeasuredvaluevisible) { mainctx.save(); mainctx.translate(centerx, centery); mainctx.rotate(rotationoffset + HALF_PI + (maxmeasuredvalue - minvalue) * anglestep); mainctx.translate(-centerx, -centery); mainctx.drawimage(maxmeasuredvaluebuffer, mainctx.canvas.width * , mainctx.canvas.height * 0.105); mainctx.restore(); angle = rotationoffset + HALF_PI + (value - minvalue) * anglestep; Define rotation center mainctx.save(); mainctx.translate(centerx, centery); mainctx.rotate(angle); mainctx.translate(-centerx, -centery); Set the pointer shadow params mainctx.shadowcolor = 'rgba(0, 0, 0, 0.8)'; mainctx.shadowoffsetx = mainctx.shadowoffsety = shadowoffset; mainctx.shadowblur = shadowoffset * 2; Draw the pointer mainctx.drawimage(pointerbuffer, 0, 0); Undo the translations & shadow settings mainctx.restore(); Draw foreground if (foregroundvisible) { mainctx.drawimage(foregroundbuffer, 0, 0); repainting = false; ; Visualize the component this.repaint(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 114

116 return this; ; var radialbargraph = function (canvas, parameters) { parameters = parameters {; var gaugetype = (undefined === parameters.gaugetype? steelseries.gaugetype.type4 : parameters.gaugetype), size = (undefined === parameters.size? 200 : parameters.size), minvalue = (undefined === parameters.minvalue? 0 : parameters.minvalue), maxvalue = (undefined === parameters.maxvalue? (minvalue + 100) : parameters.maxvalue), nicescale = (undefined === parameters.nicescale? true : parameters.nicescale), threshold = (undefined === parameters.threshold? (maxvalue - minvalue) / 2 : parameters.threshold), section = (undefined === parameters.section? null : parameters.section), usesectioncolors = (undefined === parameters.usesectioncolors? false : parameters.usesectioncolors), titlestring = (undefined === parameters.titlestring? "" : parameters.titlestring), unitstring = (undefined === parameters.unitstring? "" : parameters.unitstring), framedesign = (undefined === parameters.framedesign? steelseries.framedesign.metal : parameters.framedesign), framevisible = (undefined === parameters.framevisible? true : parameters.framevisible), backgroundcolor = (undefined === parameters.backgroundcolor? steelseries.backgroundcolor.dark_gray : parameters.backgroundcolor), backgroundvisible = (undefined === parameters.backgroundvisible? true : parameters.backgroundvisible), valuecolor = (undefined === parameters.valuecolor? steelseries.colordef.red : parameters.valuecolor), lcdcolor = (undefined === parameters.lcdcolor? steelseries.lcdcolor.standard : parameters.lcdcolor), lcdvisible = (undefined === parameters.lcdvisible? true : parameters.lcdvisible), lcddecimals = (undefined === parameters.lcddecimals? 2 : parameters.lcddecimals), digitalfont = (undefined === parameters.digitalfont? false : parameters.digitalfont), fractionalscaledecimals = (undefined === parameters.fractionalscaledecimals? 1 : parameters.fractionalscaledecimals), customlayer = (undefined === parameters.customlayer? null : parameters.customlayer), ledcolor = (undefined === parameters.ledcolor? steelseries.ledcolor.red_led : parameters.ledcolor), ledvisible = (undefined === parameters.ledvisible? true : parameters.ledvisible), labelnumberformat = (undefined === parameters.labelnumberformat? steelseries.labelnumberformat.standard : parameters.labelnumberformat), foregroundtype = (undefined === parameters.foregroundtype? steelseries.foregroundtype.type1 : parameters.foregroundtype), foregroundvisible = (undefined === parameters.foregroundvisible? true : parameters.foregroundvisible), playalarm = (undefined === parameters.playalarm? false : parameters.playalarm), alarmsound = (undefined === parameters.alarmsound? false : parameters.alarmsound), valuegradient = (undefined === parameters.valuegradient? null : parameters.valuegradient), usevaluegradient = (undefined === parameters.usevaluegradient? false : parameters.usevaluegradient), ticklabelorientation = (undefined === parameters.ticklabelorientation? (gaugetype === steelseries.gaugetype.type1? steelseries.ticklabelorientation.tangent : steelseries.ticklabelorientation.normal) : parameters.ticklabelorientation), trendvisible = (undefined === parameters.trendvisible? false : parameters.trendvisible), trendcolors = (undefined === parameters.trendcolors? [steelseries.ledcolor.red_led, steelseries.ledcolor.green_led, steelseries.ledcolor.cyan_led] : parameters.trendcolors), fullscaledeflectiontime = (undefined === parameters.fullscaledeflectiontime? 2.5 : parameters.fullscaledeflectiontime); Create audio tag for alarm sound if (playalarm && alarmsound!== false) { var audioelement = doc.createelement('audio'); audioelement.setattribute('src', alarmsound); audioelement.setattribute('preload', 'auto'); var value = minvalue; var range = maxvalue - minvalue; var ledblinking = false; var ledtimerid = 0; var tween; var self = this; var repainting = false; GaugeType specific private variables var freeareaangle; var rotationoffset; var bargraphoffset; var tickmarkoffset; var anglerange; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 115

117 var deganglerange; var anglestep; var angle; var sectionangles = []; var issectionsvisible = false; var isgradientvisible = false; Get the canvas context and clear it var mainctx = doc.getelementbyid(canvas).getcontext('2d'); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); Set the size mainctx.canvas.width = size; mainctx.canvas.height = size; var imagewidth = size; var imageheight = size; var centerx = imagewidth / 2; var centery = imageheight / 2; Misc var lcdfontheight = Math.floor(imageWidth / 10); var stdfont = lcdfontheight + 'px ' + stdfontname; var lcdfont = lcdfontheight + 'px ' + lcdfontname; var lcdheight = imageheight * 0.13; var lcdwidth = imagewidth * 0.4; var lcdposx = (imagewidth - lcdwidth) / 2; var lcdposy = imageheight / 2 - lcdheight / 2; Constants var ACTIVE_LED_POS_X = imagewidth * ; var ACTIVE_LED_POS_Y = imagewidth * ; var LED_SIZE = Math.ceil(size * ); var LED_POS_X = imagewidth * ; var LED_POS_X = imagewidth * 0.53; var LED_POS_Y = imageheight * 0.61; var trendindicator = steelseries.trendstate.off; var trendsize = size * 0.06; var trendposx = size * 0.38; var trendposy = size * 0.57; switch (gaugetype.type) { case "type1": freeareaangle = 0; rotationoffset = PI; bargraphoffset = 0; tickmarkoffset = HALF_PI; anglerange = HALF_PI; deganglerange = anglerange * DEG_FACTOR; anglestep = anglerange / range; case "type2": freeareaangle = 0; rotationoffset = PI; bargraphoffset = 0; tickmarkoffset = HALF_PI; anglerange = PI; deganglerange = anglerange * DEG_FACTOR; anglestep = anglerange / range; case "type3": freeareaangle = 0; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 116

118 rotationoffset = HALF_PI; bargraphoffset = -HALF_PI; tickmarkoffset = 0; anglerange = 1.5 * PI; deganglerange = anglerange * DEG_FACTOR; anglestep = anglerange / range; case "type4": /* falls through */ default: freeareaangle = 60 * RAD_FACTOR; rotationoffset = HALF_PI + (freeareaangle / 2); bargraphoffset = -TWO_PI / 6; tickmarkoffset = 0; anglerange = TWO_PI - freeareaangle; deganglerange = anglerange * DEG_FACTOR; anglestep = anglerange / range; Buffer for the frame var framebuffer = createbuffer(size, size); var framecontext = framebuffer.getcontext('2d'); Buffer for static background painting code var backgroundbuffer = createbuffer(size, size); var backgroundcontext = backgroundbuffer.getcontext('2d'); var lcdbuffer; Buffer for active bargraph led var activeledbuffer = createbuffer(math.ceil(size * ), Math.ceil(size * )); var activeledcontext = activeledbuffer.getcontext('2d'); Buffer for led on painting code var ledbufferon = createbuffer(led_size, LED_SIZE); var ledcontexton = ledbufferon.getcontext('2d'); Buffer for led off painting code var ledbufferoff = createbuffer(led_size, LED_SIZE); var ledcontextoff = ledbufferoff.getcontext('2d'); Buffer for current led painting code var ledbuffer = ledbufferoff; Buffer for the background of the led var ledbackground; Buffer for static foreground painting code var foregroundbuffer = createbuffer(size, size); var foregroundcontext = foregroundbuffer.getcontext('2d'); Buffers for trend indicators var trendupbuffer, trendsteadybuffer, trenddownbuffer, trendoffbuffer; var initialized = false; Tickmark specific private variables var niceminvalue = minvalue; var nicemaxvalue = maxvalue; var nicerange = maxvalue - minvalue; range = nicemaxvalue - niceminvalue; var minortickspacing = 0; var majortickspacing = 0; var maxnoofminorticks = 10; var maxnoofmajorticks = 10; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 117

119 Method to calculate nice values for min, max and range for the tickmarks var calculate = function calculate() { if (nicescale) { nicerange = calcnicenumber(maxvalue - minvalue, false); majortickspacing = calcnicenumber(nicerange / (maxnoofmajorticks - 1), true); niceminvalue = Math.floor(minValue / majortickspacing) * majortickspacing; nicemaxvalue = Math.ceil(maxValue / majortickspacing) * majortickspacing; minortickspacing = calcnicenumber(majortickspacing / (maxnoofminorticks - 1), true); minvalue = niceminvalue; maxvalue = nicemaxvalue; range = maxvalue - minvalue; else { nicerange = (maxvalue - minvalue); niceminvalue = minvalue; nicemaxvalue = maxvalue; range = nicerange; minortickspacing = 1; majortickspacing = 10; majortickspacing = calcnicenumber(nicerange / (maxnoofmajorticks - 1), true); minortickspacing = calcnicenumber(majortickspacing / (maxnoofminorticks - 1), true); switch (gaugetype.type) { case 'type1': freeareaangle = 0; rotationoffset = PI; tickmarkoffset = HALF_PI; anglerange = HALF_PI; anglestep = anglerange / range; case 'type2': freeareaangle = 0; rotationoffset = PI; tickmarkoffset = HALF_PI; anglerange = PI; anglestep = anglerange / range; case 'type3': freeareaangle = 0; rotationoffset = HALF_PI; tickmarkoffset = 0; anglerange = 1.5 * PI; anglestep = anglerange / range; case 'type4': fall through /* falls through */ default: freeareaangle = 60 * RAD_FACTOR; rotationoffset = HALF_PI + (freeareaangle / 2); tickmarkoffset = 0; anglerange = TWO_PI - freeareaangle; anglestep = anglerange / range; angle = rotationoffset + (value - minvalue) * anglestep; ; ********************************* Private methods ********************************* Draw all static painting code to background var init = function (parameters) { parameters = parameters {; var drawframe = (undefined === parameters.frame? false : parameters.frame); var drawbackground = (undefined === parameters.background? false : parameters.background); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 118

120 var drawled = (undefined === parameters.led? false : parameters.led); var drawvalue = (undefined === parameters.value? false : parameters.value); var drawforeground = (undefined === parameters.foreground? false : parameters.foreground); var drawtrend = (undefined === parameters.trend? false : parameters.trend); initialized = true; calculate(); Create frame in frame buffer (framebuffer) if (drawframe && framevisible) { drawradialframeimage(framecontext, framedesign, centerx, centery, imagewidth, imageheight); Create background in background buffer (backgroundbuffer) if (drawbackground && backgroundvisible) { drawradialbackgroundimage(backgroundcontext, backgroundcolor, centerx, centery, imagewidth, imageheight); Create custom layer in background buffer (backgroundbuffer) drawradialcustomimage(backgroundcontext, customlayer, centerx, centery, imagewidth, imageheight); Draw LED ON in ledbuffer_on if (drawled) { ledcontexton.drawimage(createledimage(led_size, 1, ledcolor), 0, 0); Draw LED ON in ledbuffer_off ledcontextoff.drawimage(createledimage(led_size, 0, ledcolor), 0, 0); Buffer the background of the led for blinking ledbackground = backgroundcontext.getimagedata(led_pos_x, LED_POS_Y, LED_SIZE, LED_SIZE); if (drawbackground) { Create bargraphtrack in background buffer (backgroundbuffer) drawbargraphtrackimage(backgroundcontext); Create tickmarks in background buffer (backgroundbuffer) if (drawbackground && backgroundvisible) { drawtickmarksimage(backgroundcontext, labelnumberformat); Create title in background buffer (backgroundbuffer) drawtitleimage(backgroundcontext, imagewidth, imageheight, titlestring, unitstring, backgroundcolor, true, true); Create lcd background if selected in background buffer (backgroundbuffer) if (drawbackground && lcdvisible) { lcdbuffer = createlcdbackgroundimage(lcdwidth, lcdheight, lcdcolor); backgroundcontext.drawimage(lcdbuffer, lcdposx, lcdposy); Convert Section values into angles issectionsvisible = false; if (usesectioncolors && null!== section && 0 < section.length) { issectionsvisible = true; var sectionindex = section.length; sectionangles = []; do { sectionindex--; sectionangles.push({start: (((section[sectionindex].start + Math.abs(minValue)) / (maxvalue - minvalue)) * deganglerange), stop: (((section[sectionindex].stop + Math.abs(minValue)) / (maxvalue - minvalue)) * deganglerange), color: customcolordef(section[sectionindex].color)); while (0 < sectionindex); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 119

121 Use a gradient for the valuecolor? isgradientvisible = false; if (usevaluegradient && valuegradient!== null) { force section colors off! issectionsvisible = false; isgradientvisible = true; Create an image of an active led in active led buffer (activeledbuffer) if (drawvalue) { drawactiveled(activeledcontext, valuecolor); Create foreground in foreground buffer (foregroundbuffer) if (drawforeground && foregroundvisible) { drawradialforegroundimage(foregroundcontext, foregroundtype, imagewidth, imageheight, false); Create the trend indicator buffers if (drawtrend && trendvisible) { trendupbuffer = createtrendindicator(trendsize, steelseries.trendstate.up, trendcolors); trendsteadybuffer = createtrendindicator(trendsize, steelseries.trendstate.steady, trendcolors); trenddownbuffer = createtrendindicator(trendsize, steelseries.trendstate.down, trendcolors); trendoffbuffer = createtrendindicator(trendsize, steelseries.trendstate.off, trendcolors); ; var resetbuffers = function (buffers) { buffers = buffers {; var resetframe = (undefined === buffers.frame? false : buffers.frame); var resetbackground = (undefined === buffers.background? false : buffers.background); var resetled = (undefined === buffers.led? false : buffers.led); var resetvalue = (undefined === buffers.value? false : buffers.value); var resetforeground = (undefined === buffers.foreground? false : buffers.foreground); Buffer for the frame if (resetframe) { framebuffer.width = size; framebuffer.height = size; framecontext = framebuffer.getcontext('2d'); Buffer for static background painting code if (resetbackground) { backgroundbuffer.width = size; backgroundbuffer.height = size; backgroundcontext = backgroundbuffer.getcontext('2d'); Buffer for active bargraph led if (resetvalue) { activeledbuffer.width = Math.ceil(size * ); activeledbuffer.height = Math.ceil(size * ); activeledcontext = activeledbuffer.getcontext('2d'); if (resetled) { Buffer for led on painting code ledbufferon.width = Math.ceil(size * ); ledbufferon.height = Math.ceil(size * ); ledcontexton = ledbufferon.getcontext('2d'); Buffer for led off painting code ledbufferoff.width = Math.ceil(size * ); ledbufferoff.height = Math.ceil(size * ); ledcontextoff = ledbufferoff.getcontext('2d'); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 120

122 Buffer for current led painting code ledbuffer = ledbufferoff; Buffer for static foreground painting code if (resetforeground) { foregroundbuffer.width = size; foregroundbuffer.height = size; foregroundcontext = foregroundbuffer.getcontext('2d'); ; var drawbargraphtrackimage = function (ctx) { ctx.save(); Bargraphtrack Frame ctx.save(); ctx.linewidth = size * 0.085; ctx.beginpath(); ctx.translate(centerx, centery); ctx.rotate(rotationoffset - 4 * RAD_FACTOR); ctx.translate(-centerx, -centery); ctx.arc(centerx, centery, imagewidth * , 0, anglerange + 8 * RAD_FACTOR, false); ctx.rotate(-rotationoffset); var ledtrackframegradient = ctx.createlineargradient(0, * imageheight, 0, * imageheight); ledtrackframegradient.addcolorstop(0, '#000000'); ledtrackframegradient.addcolorstop(0.22, '#333333'); ledtrackframegradient.addcolorstop(0.76, '#333333'); ledtrackframegradient.addcolorstop(1, '#cccccc'); ctx.strokestyle = ledtrackframegradient; ctx.stroke(); ctx.restore(); Main ctx.save(); ctx.linewidth = size * 0.075; ctx.beginpath(); ctx.translate(centerx, centery); ctx.rotate(rotationoffset - 4 * RAD_FACTOR); ctx.translate(-centerx, -centery); ctx.arc(centerx, centery, imagewidth * , 0, anglerange + 8 * RAD_FACTOR, false); ctx.rotate(-rotationoffset); var ledtrackmaingradient = ctx.createlineargradient(0, * imageheight, 0, * imageheight); ledtrackmaingradient.addcolorstop(0, '#111111'); ledtrackmaingradient.addcolorstop(1, '#333333'); ctx.strokestyle = ledtrackmaingradient; ctx.stroke(); ctx.restore(); Draw inactive leds var ledcenterx = (imagewidth * imagewidth * ) / 2; var ledcentery = (imagewidth * imagewidth * ) / 2; var ledoffgradient = ctx.createradialgradient(ledcenterx, ledcentery, 0, ledcenterx, ledcentery, * imagewidth); ledoffgradient.addcolorstop(0, '#3c3c3c'); ledoffgradient.addcolorstop(1, '#323232'); var angle = 0; for (angle = 0; angle <= deganglerange; angle += 5) { ctx.save(); ctx.translate(centerx, centery); ctx.rotate((angle * RAD_FACTOR) + bargraphoffset); ctx.translate(-centerx, -centery); ctx.beginpath(); ctx.rect(imagewidth * , imagewidth * , imagewidth * , imagewidth * ); ctx.closepath(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 121

123 ctx.fillstyle = ledoffgradient; ctx.fill(); ctx.restore(); ctx.restore(); ; var drawactiveled = function (ctx, color) { ctx.save(); ctx.beginpath(); ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.closepath(); var ledcenterx = (ctx.canvas.width / 2); var ledcentery = (ctx.canvas.height / 2); var ledgradient = mainctx.createradialgradient(ledcenterx, ledcentery, 0, ledcenterx, ledcentery, ctx.canvas.width / 2); ledgradient.addcolorstop(0, color.light.getrgbacolor()); ledgradient.addcolorstop(1, color.dark.getrgbacolor()); ctx.fillstyle = ledgradient; ctx.fill(); ctx.restore(); ; var drawlcdtext = function (ctx, value) { ctx.save(); ctx.textalign = 'right'; ctx.strokestyle = lcdcolor.textcolor; ctx.fillstyle = lcdcolor.textcolor; if (lcdcolor === steelseries.lcdcolor.standard lcdcolor === steelseries.lcdcolor.standard_green) { ctx.shadowcolor = 'gray'; ctx.shadowoffsetx = imagewidth * 0.007; ctx.shadowoffsety = imagewidth * 0.007; ctx.shadowblur = imagewidth * 0.007; if (digitalfont) { ctx.font = lcdfont; else { ctx.font = stdfont; ctx.filltext(value.tofixed(lcddecimals), lcdposx + lcdwidth - lcdwidth * 0.05, lcdposy + lcdheight * lcdfontheight * 0.38, lcdwidth * 0.9); ctx.restore(); ; var drawtickmarksimage = function (ctx, labelnumberformat) { var alpha = rotationoffset, Tracks total rotation rotationstep = anglestep * minortickspacing, textrotationangle, fontsize = Math.ceil(imageWidth * 0.04), valuecounter = minvalue, majortickcounter = maxnoofminorticks - 1, TEXT_TRANSLATE_X = imagewidth * 0.28, TEXT_WIDTH = imagewidth * 0.1, MAX_VALUE_ROUNDED = parsefloat(maxvalue.tofixed(2)), i; backgroundcolor.labelcolor.setalpha(1); ctx.save(); ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.font = fontsize + 'px ' + stdfontname; ctx.strokestyle = backgroundcolor.labelcolor.getrgbacolor(); ctx.fillstyle = backgroundcolor.labelcolor.getrgbacolor(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 122

124 ctx.translate(centerx, centery); ctx.rotate(rotationoffset); if (gaugetype.type === 'type1' gaugetype.type === 'type2') { TEXT_WIDTH = imagewidth * ; for (i = minvalue; parsefloat(i.tofixed(2)) <= MAX_VALUE_ROUNDED; i += minortickspacing) { textrotationangle = + rotationstep + HALF_PI; majortickcounter++; Draw major tickmarks if (majortickcounter === maxnoofminorticks) { ctx.save(); ctx.translate(text_translate_x, 0); switch (ticklabelorientation.type) { case 'horizontal': textrotationangle = -alpha; case 'tangent': textrotationangle = (alpha <= HALF_PI + PI? PI : 0); case 'normal': /* falls through */ default: textrotationangle = HALF_PI; ctx.rotate(textrotationangle); switch (labelnumberformat.format) { case 'fractional': ctx.filltext((valuecounter.tofixed(fractionalscaledecimals)), 0, 0, TEXT_WIDTH); case 'scientific': ctx.filltext((valuecounter.toprecision(2)), 0, 0, TEXT_WIDTH); case 'standard': /* falls through */ default: ctx.filltext((valuecounter.tofixed(0)), 0, 0, TEXT_WIDTH); ctx.translate(-text_translate_x, 0); ctx.restore(); valuecounter += majortickspacing; majortickcounter = 0; ctx.rotate(rotationstep); alpha += rotationstep; continue; ctx.rotate(rotationstep); alpha += rotationstep; ctx.translate(-centerx, -centery); ctx.restore(); ; var blink = function (blinking) { if (blinking) { ledtimerid = setinterval(toggleandrepaintled, 1000); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 123

125 else { clearinterval(ledtimerid); ; var toggleandrepaintled = function () { if (ledvisible) { if (ledbuffer === ledbufferon) { ledbuffer = ledbufferoff; else { ledbuffer = ledbufferon; if (!repainting) { repainting = true; requestanimframe(self.repaint); ; ********************************* Public methods ********************************* this.setvalue = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = (newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue)); if (value!== targetvalue) { value = targetvalue; if (value >= threshold &&!ledblinking) { ledblinking = true; blink(ledblinking); if (playalarm) { audioelement.play(); else if (value < threshold) { ledblinking = false; blink(ledblinking); if (playalarm) { audioelement.pause(); this.repaint(); return this; ; this.getvalue = function () { return value; ; this.setvalueanimated = function (newvalue) { newvalue = parsefloat(newvalue); var targetvalue = (newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue)), gauge = this, time; if (value!== targetvalue) { if (undefined!== tween) { if (tween.playing) { tween.stop(); time = fullscaledeflectiontime * Math.abs(targetValue - value) / (maxvalue - minvalue); time = Math.max(time, fullscaledeflectiontime / 5); tween = new Tween({, '', Tween.regularEaseInOut, value, targetvalue, time); tween = new Tween({, '', Tween.regularEaseInOut, value, targetvalue, 1); tween = new Tween(new Object(), '', Tween.strongEaseInOut, this.value, targetvalue, 1); tween.onmotionchanged = function (event) { value = event.target._pos; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 124

126 if (value >= threshold &&!ledblinking) { ledblinking = true; blink(ledblinking); if (playalarm) { audioelement.play(); else if (value < threshold) { ledblinking = false; blink(ledblinking); if (playalarm) { audioelement.pause(); if (!repainting) { repainting = true; requestanimframe(gauge.repaint); ; tween.start(); return this; ; this.setframedesign = function (newframedesign) { resetbuffers({frame: true); framedesign = newframedesign; init({frame: true); this.repaint(); return this; ; this.setbackgroundcolor = function (newbackgroundcolor) { resetbuffers({background: true, led: true); backgroundcolor = newbackgroundcolor; init({background: true, led: true); this.repaint(); return this; ; this.setforegroundtype = function (newforegroundtype) { resetbuffers({foreground: true); foregroundtype = newforegroundtype; init({foreground: true); this.repaint(); return this; ; this.setvaluecolor = function (newvaluecolor) { resetbuffers({value: true); valuecolor = newvaluecolor; init({value: true); this.repaint(); return this; ; this.setledcolor = function (newledcolor) { resetbuffers({led: true); ledcolor = newledcolor; init({led: true); this.repaint(); return this; ; this.setlcdcolor = function (newlcdcolor) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 125

127 lcdcolor = newlcdcolor; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setlcddecimals = function (decimals) { lcddecimals = parseint(decimals, 10); this.repaint(); return this; ; this.setsection = function (areasec) { section = areasec; init(); this.repaint(); return this; ; this.setsectionactive = function (value) { usesectioncolors = value; init(); this.repaint(); return this; ; this.setgradient = function (grad) { valuegradient = grad; init(); this.repaint(); return this; ; this.setgradientactive = function (value) { usevaluegradient = value; init(); this.repaint(); return this; ; this.setminvalue = function (value) { minvalue = value; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.getminvalue = function () { return minvalue; ; this.setmaxvalue = function (value) { maxvalue = value; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.getmaxvalue = function () { return maxvalue; ; this.setthreshold = function (newvalue) { newvalue = parsefloat(newvalue); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 126

128 var targetvalue = newvalue < minvalue? minvalue : (newvalue > maxvalue? maxvalue : newvalue); threshold = targetvalue; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.settitlestring = function (title) { titlestring = title; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setunitstring = function (unit) { unitstring = unit; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.settrend = function (newvalue) { trendindicator = parsefloat(newvalue); this.repaint(); return this; ; this.settrendvisible = function (visible) { trendvisible = visible; this.repaint(); return this; ; this.setfractionalscaledecimals = function (decimals) { fractionalscaledecimals = parseint(decimals, 10); resetbuffers({background: true); init({background: true); this.repaint(); ; this.setlabelnumberformat = function (format) { labelnumberformat = format; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.repaint = function () { var activeledangle = ((value + Math.abs(minValue)) / (maxvalue - minvalue)) * deganglerange, activeledcolor, lastactiveledcolor = valuecolor, angle, i, currentvalue, gradrange, fraction; if (!initialized) { init({frame: true, background: true, led: true, value: true, trend: true, foreground: true); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 127

129 mainctx.clearrect(0, 0, size, size); Draw frame image if (framevisible) { mainctx.drawimage(framebuffer, 0, 0); Draw buffered image to visible canvas mainctx.drawimage(backgroundbuffer, 0, 0); Draw active leds for (angle = 0; angle <= activeledangle; angle += 5) { check for LED color activeledcolor = valuecolor; Use a gradient for value colors? if (isgradientvisible) { Convert angle back to value currentvalue = minvalue + (angle / deganglerange) * (maxvalue - minvalue); gradrange = valuegradient.getend() - valuegradient.getstart(); fraction = currentvalue / gradrange; fraction = Math.max(Math.min(fraction, 1), 0); activeledcolor = customcolordef(valuegradient.getcolorat(fraction).getrgbacolor()); else if (issectionsvisible) { for (i = 0; i < sectionangles.length; i++) { if (angle >= sectionangles[i].start && angle < sectionangles[i].stop) { activeledcolor = sectionangles[i].color; Has LED color changed? If so redraw the buffer if (lastactiveledcolor.medium.gethexcolor()!== activeledcolor.medium.gethexcolor()) { drawactiveled(activeledcontext, activeledcolor); lastactiveledcolor = activeledcolor; mainctx.save(); mainctx.translate(centerx, centery); mainctx.rotate((angle * RAD_FACTOR) + bargraphoffset); mainctx.translate(-centerx, -centery); mainctx.drawimage(activeledbuffer, ACTIVE_LED_POS_X, ACTIVE_LED_POS_Y); mainctx.restore(); Draw lcd display if (lcdvisible) { drawlcdtext(mainctx, value); Draw led if (ledvisible) { if (value < threshold) { ledblinking = false; ledbuffer = ledbufferoff; mainctx.drawimage(ledbuffer, LED_POS_X, LED_POS_Y); Draw the trend indicator if (trendvisible) { switch (trendindicator.state) { case 'up': mainctx.drawimage(trendupbuffer, trendposx, trendposy); case 'steady': mainctx.drawimage(trendsteadybuffer, trendposx, trendposy); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 128

130 case 'down': mainctx.drawimage(trenddownbuffer, trendposx, trendposy); case 'off': mainctx.drawimage(trendoffbuffer, trendposx, trendposy); Draw foreground if (foregroundvisible) { mainctx.drawimage(foregroundbuffer, 0, 0); repainting = false; ; Visualize the component this.repaint(); return this; ; var displaysingle = function (canvas, parameters) { parameters = parameters {; var width = (undefined === parameters.width? 128 : parameters.width), height = (undefined === parameters.height? 48 : parameters.height), lcdcolor = (undefined === parameters.lcdcolor? steelseries.lcdcolor.standard : parameters.lcdcolor), lcddecimals = (undefined === parameters.lcddecimals? 2 : parameters.lcddecimals), unitstring = (undefined === parameters.unitstring? '' : parameters.unitstring), unitstringvisible = (undefined === parameters.unitstringvisible? false : parameters.unitstringvisible), digitalfont = (undefined === parameters.digitalfont? false : parameters.digitalfont), valuesnumeric = (undefined === parameters.valuesnumeric? true : parameters.valuesnumeric), value = (undefined === parameters.value? 0 : parameters.value), alwaysscroll = (undefined === parameters.alwaysscroll? false : parameters.alwaysscroll), autoscroll = (undefined === parameters.autoscroll? false : parameters.autoscroll), section = (undefined === parameters.section? null : parameters.section); var scrolling = false; var scrollx = 0; var scrolltimer; var repainting = false; var self = this; Get the canvas context and clear it var mainctx = doc.getelementbyid(canvas).getcontext('2d'); mainctx.save(); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); Set the size mainctx.canvas.width = width; mainctx.canvas.height = height; var imagewidth = width; var imageheight = height; var textwidth = 0; var fontheight = Math.floor(imageHeight / 1.5); var stdfont = fontheight + 'px ' + stdfontname; var lcdfont = fontheight + 'px ' + lcdfontname; var initialized = false; ************** Buffer creation ******************** Buffer for the lcd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 129

131 var lcdbuffer; var sectionbuffer = []; var sectionforegroundcolor = []; ************** Image creation ******************** var drawlcdtext = function (value, color) { mainctx.save(); mainctx.textalign = 'right'; mainctx.textbaseline = 'top'; mainctx.strokestyle = color; mainctx.fillstyle = color; /* */ mainctx.beginpath(); mainctx.rect(2, 0, imagewidth - 4, imageheight); mainctx.closepath(); mainctx.clip(); if ((lcdcolor === steelseries.lcdcolor.standard lcdcolor === steelseries.lcdcolor.standard_green) && section === null) { mainctx.shadowcolor = 'gray'; mainctx.shadowoffsetx = imageheight * 0.05; mainctx.shadowoffsety = imageheight * 0.05; mainctx.shadowblur = imageheight * 0.06; mainctx.font = digitalfont? lcdfont : stdfont; if (valuesnumeric) { Numeric value var unitwidth = 0; textwidth = 0; if (unitstringvisible) { mainctx.font = Math.floor(imageHeight / 2.5) + 'px ' + stdfontname; unitwidth = mainctx.measuretext(unitstring).width; if (digitalfont) { mainctx.font = lcdfont; else { mainctx.font = stdfont; var lcdtext = value.tofixed(lcddecimals); textwidth = mainctx.measuretext(lcdtext).width; mainctx.filltext(lcdtext, imagewidth - unitwidth scrollx, imageheight * fontheight * 0.38); if (unitstringvisible) { mainctx.font = Math.floor(imageHeight / 2.5) + 'px ' + stdfontname; mainctx.filltext(unitstring, imagewidth scrollx, imageheight * fontheight * 0.38); else { Text value textwidth = mainctx.measuretext(value).width; if (alwaysscroll (autoscroll && textwidth > imagewidth - 4)) { if (!scrolling) { if (textwidth > imagewidth * 0.8) { scrollx = imagewidth - textwidth - imagewidth * 0.2; leave 20% blank leading space to give time to read start of message else { scrollx = 0; scrolling = true; cleartimeout(scrolltimer); kill any pending animate scrolltimer = settimeout(animate, 200); else if (autoscroll && textwidth <= imagewidth - 4) { scrollx = 0; scrolling = false; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 130

132 mainctx.filltext(value, imagewidth scrollx, imageheight * fontheight * 0.38); mainctx.restore(); ; var createlcdsectionimage = function (width, height, color, lcdcolor) { var lcdsectionbuffer = createbuffer(width, height); var lcdctx = lcdsectionbuffer.getcontext('2d'); lcdctx.save(); var xb = 0; var yb = 0; var wb = width; var hb = height; var rb = Math.min(width, height) * 0.095; var lcdbackground = lcdctx.createlineargradient(0, yb, 0, yb + hb); lcdbackground.addcolorstop(0, '#4c4c4c'); lcdbackground.addcolorstop(0.08, '#666666'); lcdbackground.addcolorstop(0.92, '#666666'); lcdbackground.addcolorstop(1, '#e6e6e6'); lcdctx.fillstyle = lcdbackground; roundedrectangle(lcdctx, xb, yb, wb, hb, rb); lcdctx.fill(); lcdctx.restore(); lcdctx.save(); var rgb = getcolorvalues(color); var hsb = rgbtohsb(rgb[0], rgb[1], rgb[2]); var rgbstart = getcolorvalues(lcdcolor.gradientstartcolor); var hsbstart = rgbtohsb(rgbstart[0], rgbstart[1], rgbstart[2]); var rgbfraction1 = getcolorvalues(lcdcolor.gradientfraction1color); var hsbfraction1 = rgbtohsb(rgbfraction1[0], rgbfraction1[1], rgbfraction1[2]); var rgbfraction2 = getcolorvalues(lcdcolor.gradientfraction2color); var hsbfraction2 = rgbtohsb(rgbfraction2[0], rgbfraction2[1], rgbfraction2[2]); var rgbfraction3 = getcolorvalues(lcdcolor.gradientfraction3color); var hsbfraction3 = rgbtohsb(rgbfraction3[0], rgbfraction3[1], rgbfraction3[2]); var rgbstop = getcolorvalues(lcdcolor.gradientstopcolor); var hsbstop = rgbtohsb(rgbstop[0], rgbstop[1], rgbstop[2]); var startcolor = hsbtorgb(hsb[0], hsb[1], hsbstart[2] ); var fraction1color = hsbtorgb(hsb[0], hsb[1], hsbfraction1[2] ); var fraction2color = hsbtorgb(hsb[0], hsb[1], hsbfraction2[2] ); var fraction3color = hsbtorgb(hsb[0], hsb[1], hsbfraction3[2] ); var stopcolor = hsbtorgb(hsb[0], hsb[1], hsbstop[2] ); var xf = 1; var yf = 1; var wf = width - 2; var hf = height - 2; var rf = rb - 1; var lcdforeground = lcdctx.createlineargradient(0, yf, 0, yf + hf); lcdforeground.addcolorstop(0, 'rgb(' + startcolor[0] + ', ' + startcolor[1] + ', ' + startcolor[2] + ')'); lcdforeground.addcolorstop(0.03, 'rgb(' + fraction1color[0] + ',' + fraction1color[1] + ',' + fraction1color[2] + ')'); lcdforeground.addcolorstop(0.49, 'rgb(' + fraction2color[0] + ',' + fraction2color[1] + ',' + fraction2color[2] + ')'); lcdforeground.addcolorstop(0.5, 'rgb(' + fraction3color[0] + ',' + fraction3color[1] + ',' + fraction3color[2] + ')'); lcdforeground.addcolorstop(1, 'rgb(' + stopcolor[0] + ',' + stopcolor[1] + ',' + stopcolor[2] + ')'); lcdctx.fillstyle = lcdforeground; roundedrectangle(lcdctx, xf, yf, wf, hf, rf); lcdctx.fill(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 131

133 lcdctx.restore(); return lcdsectionbuffer; ; var createsectionforegroundcolor = function (sectioncolor) { var rgbsection = getcolorvalues(sectioncolor); var hsbsection = rgbtohsb(rgbsection[0], rgbsection[1], rgbsection[2]); var sectionforegroundrgb = hsbtorgb(hsbsection[0], 0.57, 0.83); return 'rgb(' + sectionforegroundrgb[0] + ', ' + sectionforegroundrgb[1] + ', ' + sectionforegroundrgb[2] + ')'; ; var animate = function () { if (scrolling) { if (scrollx > imagewidth) { scrollx = -textwidth; scrollx += 2; scrolltimer = settimeout(animate, 50); else { scrollx = 0; if (!repainting) { repainting = true; requestanimframe(self.repaint); ; ************** Initialization ******************** var init = function () { var sectionindex; initialized = true; ; Create lcd background if selected in background buffer (backgroundbuffer) lcdbuffer = createlcdbackgroundimage(width, height, lcdcolor); if (null!== section && 0 < section.length) { for (sectionindex = 0 ; sectionindex < section.length ; sectionindex++) { sectionbuffer[sectionindex] = createlcdsectionimage(width, height, section[sectionindex].color, lcdcolor); sectionforegroundcolor[sectionindex] = createsectionforegroundcolor(section[sectionindex].color); ************** Public methods ******************** this.setvalue = function (newvalue) { if (value!== newvalue) { value = newvalue; this.repaint(); return this; ; this.setlcdcolor = function (newlcdcolor) { lcdcolor = newlcdcolor; init(); this.repaint(); return this; ; this.setsection = function (newsection) { section = newsection; init({background: true, foreground: true); this.repaint(); return this; ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 132

134 this.setscrolling = function (scroll) { if (scroll) { if (scrolling) { return; else { scrolling = scroll; animate(); else { disable scrolling scrolling = scroll; return this; ; this.repaint = function () { if (!initialized) { init(); mainctx.save(); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); var lcdbackgroundbuffer = lcdbuffer; var lcdtextcolor = lcdcolor.textcolor; var sectionindex; Draw sections if (null!== section && 0 < section.length) { for (sectionindex = 0 ; sectionindex < section.length ; sectionindex++) { if (value >= section[sectionindex].start && value <= section[sectionindex].stop) { lcdbackgroundbuffer = sectionbuffer[sectionindex]; lcdtextcolor = sectionforegroundcolor[sectionindex]; Draw lcd background mainctx.drawimage(lcdbackgroundbuffer, 0, 0); Draw lcd text drawlcdtext(value, lcdtextcolor); repainting = false; ; Visualize the component this.repaint(); return this; ; var winddirection = function (canvas, parameters) { parameters = parameters {; var size = (undefined === parameters.size? 200 : parameters.size), framedesign = (undefined === parameters.framedesign? steelseries.framedesign.metal : parameters.framedesign), framevisible = (undefined === parameters.framevisible? true : parameters.framevisible), backgroundcolor = (undefined === parameters.backgroundcolor? steelseries.backgroundcolor.dark_gray : parameters.backgroundcolor), backgroundvisible = (undefined === parameters.backgroundvisible? true : parameters.backgroundvisible), pointertypelatest = (undefined === parameters.pointertypelatest? steelseries.pointertype.type1 : parameters.pointertypelatest), pointertypeaverage = (undefined === parameters.pointertypeaverage? steelseries.pointertype.type8 : parameters.pointertypeaverage), pointercolor = (undefined === parameters.pointercolor? steelseries.colordef.red : parameters.pointercolor), pointercoloraverage = (undefined === parameters.pointercoloraverage? steelseries.colordef.blue : parameters.pointercoloraverage), Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 133

135 knobtype = (undefined === parameters.knobtype? steelseries.knobtype.standard_knob : parameters.knobtype), knobstyle = (undefined === parameters.knobstyle? steelseries.knobstyle.silver : parameters.knobstyle), foregroundtype = (undefined === parameters.foregroundtype? steelseries.foregroundtype.type1 : parameters.foregroundtype), foregroundvisible = (undefined === parameters.foregroundvisible? true : parameters.foregroundvisible), pointsymbols = (undefined === parameters.pointsymbols? ["N", "NE", "E", "SE", "S", "SW", "W", "NW"] : parameters.pointsymbols), customlayer = (undefined === parameters.customlayer? null : parameters.customlayer), degreescale = (undefined === parameters.degreescale? true : parameters.degreescale), rosevisible = (undefined === parameters.rosevisible? false : parameters.rosevisible), lcdcolor = (undefined === parameters.lcdcolor? steelseries.lcdcolor.standard : parameters.lcdcolor), lcdvisible = (undefined === parameters.lcdvisible? true : parameters.lcdvisible), digitalfont = (undefined === parameters.digitalfont? false : parameters.digitalfont), section = (undefined === parameters.section? null : parameters.section), area = (undefined === parameters.area? null : parameters.area), lcdtitlestrings = (undefined === parameters.lcdtitlestrings? ["Latest", "Average"] : parameters.lcdtitlestrings), titlestring = (undefined === parameters.titlestring? "" : parameters.titlestring), usecolorlabels = (undefined === parameters.usecolorlabels? false : parameters.usecolorlabels), fullscaledeflectiontime = (undefined === parameters.fullscaledeflectiontime? 2.5 : parameters.fullscaledeflectiontime); var tweenlatest; var tweenaverage; var valuelatest = 0; var valueaverage = 0; var anglestep = RAD_FACTOR; var anglelatest = this.valuelatest; var angleaverage = this.valueaverage; var rotationoffset = -HALF_PI; var anglerange = TWO_PI; var range = 360; var repainting = false; Get the canvas context and clear it var mainctx = doc.getelementbyid(canvas).getcontext('2d'); mainctx.save(); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); Set the size mainctx.canvas.width = size; mainctx.canvas.height = size; var imagewidth = size; var imageheight = size; var centerx = imagewidth / 2; var centery = imageheight / 2; var lcdfontheight = Math.floor(imageWidth / 10); var stdfont = lcdfontheight + 'px ' + stdfontname; var lcdfont = lcdfontheight + 'px ' + lcdfontname; var lcdwidth = imagewidth * 0.3; var lcdheight = imageheight * 0.12; var lcdposx = (imagewidth - lcdwidth) / 2; var lcdposy1 = imageheight * 0.32; var lcdposy2 = imageheight * 0.565; var initialized = false; ************** Buffer creation ******************** Buffer for all static background painting code var backgroundbuffer = createbuffer(size, size); var backgroundcontext = backgroundbuffer.getcontext('2d'); Buffer for LCD displays var lcdbuffer; Buffer for latest pointer images painting code Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 134

136 var pointerbufferlatest = createbuffer(size, size); var pointercontextlatest = pointerbufferlatest.getcontext('2d'); Buffer for average pointer image var pointerbufferaverage = createbuffer(size, size); var pointercontextaverage = pointerbufferaverage.getcontext('2d'); Buffer for static foreground painting code var foregroundbuffer = createbuffer(size, size); var foregroundcontext = foregroundbuffer.getcontext('2d'); ************** Image creation ******************** var drawlcdtext = function (value, blatest) { mainctx.save(); mainctx.textalign = 'center'; mainctx.strokestyle = lcdcolor.textcolor; mainctx.fillstyle = lcdcolor.textcolor; convert value from -180,180 range into range if (value < 0) { value += 360; value = "00" + Math.round(value); value = value.substring(value.length, value.length - 3); if (lcdcolor === steelseries.lcdcolor.standard lcdcolor === steelseries.lcdcolor.standard_green) { mainctx.shadowcolor = 'gray'; mainctx.shadowoffsetx = imagewidth * 0.007; mainctx.shadowoffsety = imagewidth * 0.007; mainctx.shadowblur = imagewidth * 0.007; mainctx.font = (digitalfont? lcdfont : stdfont); mainctx.filltext(value + "\u00b0", imagewidth / 2 + lcdwidth * 0.05, (blatest? lcdposy1 : lcdposy2) + lcdheight * lcdfontheight * 0.38, lcdwidth * 0.9); mainctx.restore(); ; var drawareasectionimage = function (ctx, start, stop, color, filled) { ctx.save(); ctx.strokestyle = color; ctx.fillstyle = color; ctx.linewidth = imagewidth * 0.035; var startangle = (anglerange / range * start); var stopangle = startangle + (stop - start) / (range / anglerange); ctx.translate(centerx, centery); ctx.rotate(rotationoffset); ctx.beginpath(); if (filled) { ctx.moveto(0, 0); ctx.arc(0, 0, imagewidth * ctx.linewidth / 2, startangle, stopangle, false); else { ctx.arc(0, 0, imagewidth * 0.365, startangle, stopangle, false); ctx.closepath(); if (filled) { ctx.moveto(0, 0); ctx.fill(); else { ctx.stroke(); ctx.translate(-centerx, -centery); ctx.restore(); ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 135

137 var drawtickmarksimage = function (ctx) { var OUTER_POINT = imagewidth * 0.38, MAJOR_INNER_POINT = imagewidth * 0.35, MED_INNER_POINT = imagewidth * 0.355, MINOR_INNER_POINT = imagewidth * 0.36, TEXT_WIDTH = imagewidth * 0.1, TEXT_TRANSLATE_X = imagewidth * 0.31, CARDINAL_TRANSLATE_X = imagewidth * 0.36, stdfont, smlfont, i; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.save(); ctx.strokestyle = backgroundcolor.labelcolor.getrgbacolor(); ctx.fillstyle = backgroundcolor.labelcolor.getrgbacolor(); ctx.translate(centerx, centery); if (!degreescale) { stdfont = 0.12 * imagewidth + 'px serif'; smlfont = 0.06 * imagewidth + 'px serif'; var anglestep = RAD_FACTOR; ctx.linewidth = 1; ctx.strokestyle = backgroundcolor.symbolcolor.getrgbacolor(); for (i = 0; 360 > i; i += 2.5) { if (0 === i % 5) { ctx.beginpath(); ctx.moveto(imagewidth * 0.38, 0); ctx.lineto(imagewidth * 0.36, 0); ctx.closepath(); ctx.stroke(); Draw the labels ctx.save(); switch (i) { case 0: E ctx.translate(imagewidth * 0.35, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[2], 0, 0); ctx.translate(-imagewidth * 0.35, 0); case 45: SE ctx.translate(imagewidth * 0.29, 0); ctx.rotate(half_pi); ctx.font = smlfont; ctx.filltext(pointsymbols[3], 0, 0); ctx.translate(-imagewidth * 0.29, 0); case 90: S ctx.translate(imagewidth * 0.35, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[4], 0, 0); ctx.translate(-imagewidth * 0.35, 0); case 135: SW ctx.translate(imagewidth * 0.29, 0); ctx.rotate(half_pi); ctx.font = smlfont; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 136

138 ctx.filltext(pointsymbols[5], 0, 0); ctx.translate(-imagewidth * 0.29, 0); case 180: W ctx.translate(imagewidth * 0.35, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[6], 0, 0); ctx.translate(-imagewidth * 0.35, 0); case 225: NW ctx.translate(imagewidth * 0.29, 0); ctx.rotate(half_pi); ctx.font = smlfont; ctx.filltext(pointsymbols[7], 0, 0); ctx.translate(-imagewidth * 0.29, 0); case 270: N ctx.translate(imagewidth * 0.35, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[0], 0, 0); ctx.translate(-imagewidth * 0.35, 0); case 315: NE ctx.translate(imagewidth * 0.29, 0); ctx.rotate(half_pi); ctx.font = smlfont; ctx.filltext(pointsymbols[1], 0, 0); ctx.translate(-imagewidth * 0.29, 0); ctx.restore(); if (rosevisible && (0 === i 22.5 === i 45 === i 67.5 === i 90 === i === i 135 === i === i 180 === i === i 225 === i === i 270 === i === i 315 === i === i 360 === i)) { ROSE_LINE ctx.save(); ctx.beginpath(); indent the 16 half quadrant lines a bit for visual effect if (i % 45) { ctx.moveto(imagewidth * 0.29, 0); else { ctx.moveto(imagewidth * 0.38, 0); ctx.lineto(imagewidth * 0.1, 0); ctx.closepath(); ctx.restore(); ctx.stroke(); ctx.rotate(anglestep * 2.5); else { stdfont = Math.floor(0.1 * imagewidth) + 'px serif bold'; smlfont = Math.floor(imageWidth * 0.04) + 'px ' + stdfontname; ctx.rotate(anglestep * 5); for (i = 5; 360 >= i; i += 5) { Draw the labels ctx.save(); switch (i) { case 360: ctx.translate(cardinal_translate_x, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[2], 0, 0, TEXT_WIDTH); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 137

139 ctx.translate(-cardinal_translate_x, 0); case 90: ctx.translate(cardinal_translate_x, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[4], 0, 0, TEXT_WIDTH); ctx.translate(-cardinal_translate_x, 0); case 180: ctx.translate(cardinal_translate_x, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[6], 0, 0, TEXT_WIDTH); ctx.translate(-cardinal_translate_x, 0); case 270: ctx.translate(cardinal_translate_x, 0); ctx.rotate(half_pi); ctx.font = stdfont; ctx.filltext(pointsymbols[0], 0, 0, TEXT_WIDTH); ctx.translate(-cardinal_translate_x, 0); case 5: case 85: case 95: case 175: case 185: case 265: case 275: case 355: leave room for ordinal labels default: if ((i + 90) % 20) { ctx.linewidth = ((i + 90) % 5)? 1.5 : 1; ctx.beginpath(); ctx.moveto(outer_point, 0); var to = (i + 90) % 10? MINOR_INNER_POINT : MAJOR_INNER_POINT; ctx.lineto(to, 0); ctx.closepath(); ctx.stroke(); else { ctx.linewidth = 1.5; ctx.beginpath(); ctx.moveto(outer_point, 0); ctx.lineto(major_inner_point, 0); ctx.closepath(); ctx.stroke(); var val = (i + 90) % 360; ctx.translate(text_translate_x, 0); ctx.rotate(half_pi); ctx.font = smlfont; ctx.filltext(("0".substring(val >= 100) + val), 0, 0, TEXT_WIDTH); ctx.translate(-text_translate_x, 0); ctx.restore(); ctx.rotate(anglestep * 5); ctx.translate(-centerx, -centery); ctx.restore(); ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 138

140 var drawlcdtitles = function (ctx) { if (lcdtitlestrings.length > 0) { ctx.save(); ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.fillstyle = (usecolorlabels? pointercolor.medium.getrgbacolor() : backgroundcolor.labelcolor.getrgbacolor()); ctx.font = * imagewidth + 'px ' + stdfontname; ctx.filltext(lcdtitlestrings[0], imagewidth / 2, imageheight * 0.29, imagewidth * 0.3); ctx.fillstyle = (usecolorlabels? pointercoloraverage.medium.getrgbacolor() : backgroundcolor.labelcolor.getrgbacolor()); ctx.filltext(lcdtitlestrings[1], imagewidth / 2, imageheight * 0.71, imagewidth * 0.3); if (titlestring.length > 0) { ctx.fillstyle = backgroundcolor.labelcolor.getrgbacolor(); ctx.font = * imagewidth + 'px ' + stdfontname; ctx.filltext(titlestring, imagewidth / 2, imageheight * 0.5, imagewidth * 0.3); ; ************** Initialization ******************** Draw all static painting code to background var init = function (parameters) { parameters = parameters {; var drawbackground = (undefined === parameters.background? false : parameters.background); var drawpointer = (undefined === parameters.pointer? false : parameters.pointer); var drawforeground = (undefined === parameters.foreground? false : parameters.foreground); initialized = true; if (drawbackground && framevisible) { drawradialframeimage(backgroundcontext, framedesign, centerx, centery, imagewidth, imageheight); if (drawbackground && backgroundvisible) { Create background in background buffer (backgroundbuffer) drawradialbackgroundimage(backgroundcontext, backgroundcolor, centerx, centery, imagewidth, imageheight); Create custom layer in background buffer (backgroundbuffer) drawradialcustomimage(backgroundcontext, customlayer, centerx, centery, imagewidth, imageheight); Create section in background buffer (backgroundbuffer) if (null!== section && 0 < section.length) { var sectionindex = section.length; do { sectionindex--; drawareasectionimage(backgroundcontext, section[sectionindex].start, section[sectionindex].stop, section[sectionindex].color, false); while (0 < sectionindex); Create area in background buffer (backgroundbuffer) if (null!== area && 0 < area.length) { var areaindex = area.length; do { areaindex--; drawareasectionimage(backgroundcontext, area[areaindex].start, area[areaindex].stop, area[areaindex].color, true); while (0 < areaindex); drawtickmarksimage(backgroundcontext); if (drawbackground && rosevisible) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 139

141 drawroseimage(backgroundcontext, centerx, centery, imagewidth, imageheight, backgroundcolor); Create lcd background if selected in background buffer (backgroundbuffer) if (drawbackground && lcdvisible) { lcdbuffer = createlcdbackgroundimage(lcdwidth, lcdheight, lcdcolor); backgroundcontext.drawimage(lcdbuffer, lcdposx, lcdposy1); backgroundcontext.drawimage(lcdbuffer, lcdposx, lcdposy2); Create title in background buffer (backgroundbuffer) drawlcdtitles(backgroundcontext); if (drawpointer) { drawpointerimage(pointercontextaverage, imagewidth, pointertypeaverage, pointercoloraverage, backgroundcolor.labelcolor); drawpointerimage(pointercontextlatest, imagewidth, pointertypelatest, pointercolor, backgroundcolor.labelcolor); if (drawforeground && foregroundvisible) { var knobvisible = (pointertypelatest.type === 'type15' pointertypelatest.type === 'type16'? false : true); drawradialforegroundimage(foregroundcontext, foregroundtype, imagewidth, imageheight, knobvisible, knobtype, knobstyle); ; var resetbuffers = function (buffers) { buffers = buffers {; var resetbackground = (undefined === buffers.background? false : buffers.background); var resetpointer = (undefined === buffers.pointer? false : buffers.pointer); var resetforeground = (undefined === buffers.foreground? false : buffers.foreground); Buffer for all static background painting code if (resetbackground) { backgroundbuffer.width = size; backgroundbuffer.height = size; backgroundcontext = backgroundbuffer.getcontext('2d'); Buffers for pointer image painting code if (resetpointer) { pointerbufferlatest.width = size; pointerbufferlatest.height = size; pointercontextlatest = pointerbufferlatest.getcontext('2d'); pointerbufferaverage.width = size; pointerbufferaverage.height = size; pointercontextaverage = pointerbufferaverage.getcontext('2d'); Buffer for static foreground painting code if (resetforeground) { foregroundbuffer.width = size; foregroundbuffer.height = size; foregroundcontext = foregroundbuffer.getcontext('2d'); ; ************************************ Public methods ************************************** this.setvaluelatest = function (newvalue) { Actually need to handle rather than are used for directions 0 is used as a special case to indicate 'calm' newvalue = parsefloat(newvalue); newvalue = newvalue === 360? 360 : newvalue % 360; if (valuelatest!== newvalue) { valuelatest = newvalue; this.repaint(); return this; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 140

142 ; this.getvaluelatest = function () { return valuelatest; ; this.setvalueaverage = function (newvalue) { Actually need to handle rather than are used for directions 0 is used as a special case to indicate 'calm' newvalue = parsefloat(newvalue); newvalue = newvalue === 360? 360 : newvalue % 360; if (valueaverage!== newvalue) { valueaverage = newvalue; this.repaint(); return this; ; this.getvalueaverage = function () { return valueaverage; ; this.setvalueanimatedlatest = function (newvalue) { var targetvalue, gauge = this, diff, time; Actually need to handle rather than are used for directions 0 is used as a special case to indicate 'calm' newvalue = parsefloat(newvalue); targetvalue = (newvalue === 360? 360 : newvalue % 360); if (valuelatest!== targetvalue) { if (undefined!== tweenlatest) { if (tweenlatest.playing) { tweenlatest.stop(); diff = getshortestangle(valuelatest, targetvalue); time = fullscaledeflectiontime * Math.abs(diff) / 180; time = Math.max(time, fullscaledeflectiontime / 5); tweenlatest = new Tween({, '', Tween.regularEaseInOut, valuelatest, valuelatest + diff, time); tweenlatest.onmotionchanged = function (event) { valuelatest = event.target._pos === 360? 360 : event.target._pos % 360; if (!repainting) { repainting = true; requestanimframe(gauge.repaint); ; Use onmotionfinished to set end value in case targetvalue = 360 if (targetvalue === 360) { tweenlatest.onmotionfinished = function (event) { valuelatest = targetvalue; if (!repainting) { repainting = true; requestanimframe(gauge.repaint); ; tweenlatest.start(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 141

143 return this; ; this.setvalueanimatedaverage = function (newvalue) { var targetvalue, gauge = this, diff, time; Actually need to handle rather than are used for directions 0 is used as a special case to indicate 'calm' newvalue = parsefloat(newvalue); targetvalue = (newvalue === 360? 360 : newvalue % 360); if (valueaverage!== newvalue) { if (undefined!== tweenaverage) { if (tweenaverage.playing) { tweenaverage.stop(); diff = getshortestangle(valueaverage, targetvalue); time = fullscaledeflectiontime * Math.abs(diff) / 180; time = Math.max(time, fullscaledeflectiontime / 5); tweenaverage = new Tween({, '', Tween.regularEaseInOut, valueaverage, valueaverage + diff, time); tweenaverage.onmotionchanged = function (event) { valueaverage = event.target._pos === 360? 360 : event.target._pos % 360; if (!repainting) { repainting = true; requestanimframe(gauge.repaint); ; Use onmotionfinished to set end value in case targetvalue = 360 if (targetvalue === 360) { tweenaverage.onmotionfinished = function (event) { valueaverage = targetvalue; if (!repainting) { repainting = true; requestanimframe(gauge.repaint); ; tweenaverage.start(); return this; ; this.setarea = function (areaval) { area = areaval; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setsection = function (areasec) { section = areasec; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setframedesign = function (newframedesign) { framedesign = newframedesign; resetbuffers({background: true); init({background: true); this.repaint(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 142

144 return this; ; this.setbackgroundcolor = function (newbackgroundcolor) { backgroundcolor = newbackgroundcolor; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setforegroundtype = function (newforegroundtype) { resetbuffers({foreground: true); foregroundtype = newforegroundtype; init({foreground: true); this.repaint(); return this; ; this.setpointercolor = function (newpointercolor) { resetbuffers({pointer: true); pointercolor = newpointercolor; init({pointer: true); this.repaint(); return this; ; this.setpointercoloraverage = function (newpointercolor) { resetbuffers({pointer: true); pointercoloraverage = newpointercolor; init({pointer: true); this.repaint(); return this; ; this.setpointertype = function (newpointertype) { pointertypelatest = newpointertype; resetbuffers({pointer: true, foreground: true ); init({pointer: true, foreground: true ); this.repaint(); return this; ; this.setpointertypeaverage = function (newpointertype) { pointertypeaverage = newpointertype; resetbuffers({pointer: true, foreground: true ); init({pointer: true, foreground: true ); this.repaint(); return this; ; this.setpointsymbols = function (newpointsymbols) { pointsymbols = newpointsymbols; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 143

145 this.setlcdcolor = function (newlcdcolor) { lcdcolor = newlcdcolor; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.setlcdtitlestrings = function (titles) { lcdtitlestrings = titles; resetbuffers({background: true); init({background: true); this.repaint(); return this; ; this.repaint = function () { if (!initialized) { init({frame: true, background: true, led: true, pointer: true, foreground: true); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); if (framevisible backgroundvisible) { mainctx.drawimage(backgroundbuffer, 0, 0); Draw lcd display if (lcdvisible) { drawlcdtext(valuelatest, true); drawlcdtext(valueaverage, false); Define rotation angle angleaverage = valueaverage * anglestep; we have to draw to a rotated temporary image area so we can translate in absolute x, y values when drawing to main context var shadowoffset = imagewidth * 0.006; Define rotation center mainctx.save(); mainctx.translate(centerx, centery); mainctx.rotate(angleaverage); mainctx.translate(-centerx, -centery); Set the pointer shadow params mainctx.shadowcolor = 'rgba(0, 0, 0, 0.8)'; mainctx.shadowoffsetx = mainctx.shadowoffsety = shadowoffset; mainctx.shadowblur = shadowoffset * 2; Draw the pointer mainctx.drawimage(pointerbufferaverage, 0, 0); Define rotation angle difference for average pointer anglelatest = valuelatest * anglestep - angleaverage; mainctx.translate(centerx, centery); mainctx.rotate(anglelatest); mainctx.translate(-centerx, -centery); mainctx.drawimage(pointerbufferlatest, 0, 0); mainctx.restore(); if (foregroundvisible) { mainctx.drawimage(foregroundbuffer, 0, 0); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 144

146 repainting = false; ; Visualize the component this.repaint(); return this; ; var led = function (canvas, parameters) { parameters = parameters {; var size = (undefined === parameters.size? 32 : parameters.size), ledcolor = (undefined === parameters.ledcolor? steelseries.ledcolor.red_led : parameters.ledcolor); var ledblinking = false; var ledtimerid = 0; Get the canvas context and clear it var mainctx = doc.getelementbyid(canvas).getcontext('2d'); mainctx.save(); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); Set the size mainctx.canvas.width = size; mainctx.canvas.height = size; var initialized = false; Buffer for led on painting code var ledbufferon = doc.createelement('canvas'); ledbufferon.width = size; ledbufferon.height = size; var ledcontexton = ledbufferon.getcontext('2d'); Buffer for led off painting code var ledbufferoff = doc.createelement('canvas'); ledbufferoff.width = size; ledbufferoff.height = size; var ledcontextoff = ledbufferoff.getcontext('2d'); Buffer for current led painting code var ledbuffer = ledbufferoff; var init = function () { initialized = true; Draw LED ON in ledbuffer_on ledcontexton.clearrect(0, 0, ledcontexton.canvas.width, ledcontexton.canvas.height); ledcontexton.drawimage(createledimage(size, 1, ledcolor), 0, 0); Draw LED ON in ledbuffer_off ledcontextoff.clearrect(0, 0, ledcontextoff.canvas.width, ledcontextoff.canvas.height); ledcontextoff.drawimage(createledimage(size, 0, ledcolor), 0, 0); ; this.toggleled = function () { if (ledbuffer === ledbufferon) { ledbuffer = ledbufferoff; else { ledbuffer = ledbufferon; repaint(); return this; ; this.setledcolor = function (newcolor) { ledcolor = newcolor; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 145

147 initialized = false; repaint(); return this; ; this.setledonoff = function (on) { if (true === on) { ledbuffer = ledbufferon; else { ledbuffer = ledbufferoff; repaint(); return this; ; /* this.blink = function(blinking) { if (blinking) { ledtimerid = setinterval(this.toggleled, 1000); else { clearinterval(ledtimerid); ; */ this.blink = function (blink) { if (blink) { if (!ledblinking) { ledtimerid = setinterval(this.toggleled, 1000); ledblinking = true; else { if (ledblinking) { clearinterval(ledtimerid); ledblinking = false; return this; ; var repaint = function () { if (!initialized) { init(); mainctx.save(); mainctx.clearrect(0, 0, mainctx.canvas.width, mainctx.canvas.height); mainctx.drawimage(ledbuffer, 0, 0); mainctx.restore(); ; repaint(); return this; ; var odometer = function (canvas, parameters) { parameters = parameters {; var doc = document, parameters _context = (undefined === parameters._context? null : parameters._context), If component used internally by steelseries height = (undefined === parameters.height? 40 : parameters.height), digits = (undefined === parameters.digits? 6 : parameters.digits), decimals = (undefined === parameters.decimals? 1 : parameters.decimals), decimalbackcolor = (undefined === parameters.decimalbackcolor? '#F0F0F0' : parameters.decimalbackcolor), decimalforecolor = (undefined === parameters.decimalforecolor? '#F01010' : parameters.decimalforecolor), font = (undefined === parameters.font? stdfontname : parameters.font), Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 146

148 value = (undefined === parameters.value? 0 : parameters.value), valuebackcolor = (undefined === parameters.valuebackcolor? '#050505' : parameters.valuebackcolor), valueforecolor = (undefined === parameters.valueforecolor? '#F8F8F8' : parameters.valueforecolor), wobblefactor = (undefined === parameters.wobblefactor? 0.07 : parameters.wobblefactor), initialized = false, tween, ctx, repainting = false, digitheight, digitwidth, stdfont, width, columnheight, verticalspace, zerooffset, wobble = [], buffers backgroundbuffer, backgroundcontext, foregroundbuffer, foregroundcontext, digitbuffer, digitcontext, decimalbuffer, decimalcontext; End of variables Get the canvas context and clear it if (_context) { ctx = _context; else { ctx = doc.getelementbyid(canvas).getcontext('2d'); Cannot display negative values yet if (value < 0) { value = 0; digitheight = Math.floor(height * 0.85); stdfont = '600 ' + digitheight + 'px ' + font; digitwidth = Math.floor(height * 0.68); width = digitwidth * (digits + decimals); columnheight = digitheight * 11; verticalspace = columnheight / 12; zerooffset = verticalspace * 0.81; Resize and clear the main context ctx.canvas.width = width; ctx.canvas.height = height; Create buffers backgroundbuffer = createbuffer(width, height); backgroundcontext = backgroundbuffer.getcontext('2d'); foregroundbuffer = createbuffer(width, height); foregroundcontext = foregroundbuffer.getcontext('2d'); digitbuffer = createbuffer(digitwidth, columnheight * 1.1); digitcontext = digitbuffer.getcontext('2d'); decimalbuffer = createbuffer(digitwidth, columnheight * 1.1); decimalcontext = decimalbuffer.getcontext('2d'); function init() { var grad, i; initialized = true; Create the foreground foregroundcontext.rect(0, 0, width, height); grad = foregroundcontext.createlineargradient(0, 0, 0, height); grad.addcolorstop(0, 'rgba(0, 0, 0, 1)'); grad.addcolorstop(0.1, 'rgba(0, 0, 0, 0.4)'); grad.addcolorstop(0.33, 'rgba(255, 255, 255, 0.45)'); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 147

149 grad.addcolorstop(0.46, 'rgba(255, 255, 255, 0)'); grad.addcolorstop(0.9, 'rgba(0, 0, 0, 0.4)'); grad.addcolorstop(1, 'rgba(0, 0, 0, 1)'); foregroundcontext.fillstyle = grad; foregroundcontext.fill(); Create a digit column background digitcontext.rect(0, 0, digitwidth, columnheight * 1.1); digitcontext.fillstyle = valuebackcolor; digitcontext.fill(); edges digitcontext.strokestyle = '#f0f0f0'; digitcontext.linewidth = '1px'; height * "px"; digitcontext.moveto(0, 0); digitcontext.lineto(0, columnheight * 1.1); digitcontext.stroke(); digitcontext.strokestyle = '#202020'; digitcontext.moveto(digitwidth, 0); digitcontext.lineto(digitwidth, columnheight * 1.1); digitcontext.stroke(); numerals digitcontext.textalign = 'center'; digitcontext.textbaseline = 'middle'; digitcontext.font = stdfont; digitcontext.fillstyle = valueforecolor; put the digits vertically into the buffer for (i = 9; i < 21; i++) { digitcontext.filltext(i % 10, digitwidth * 0.5, verticalspace * (i - 9) + verticalspace / 2); Create a decimal column if (decimals > 0) { background decimalcontext.rect(0, 0, digitwidth, columnheight * 1.1); decimalcontext.fillstyle = decimalbackcolor; decimalcontext.fill(); edges decimalcontext.strokestyle = '#f0f0f0'; decimalcontext.linewidth = '1px'; height * "px"; decimalcontext.moveto(0, 0); decimalcontext.lineto(0, columnheight * 1.1); decimalcontext.stroke(); decimalcontext.strokestyle = '#202020'; decimalcontext.moveto(digitwidth, 0); decimalcontext.lineto(digitwidth, columnheight * 1.1); decimalcontext.stroke(); numerals decimalcontext.textalign = 'center'; decimalcontext.textbaseline = 'middle'; decimalcontext.font = stdfont; decimalcontext.fillstyle = decimalforecolor; put the digits vertically into the buffer for (i = 9; i < 21; i++) { decimalcontext.filltext(i % 10, digitwidth * 0.5, verticalspace * (i - 9) + verticalspace / 2); wobble factors for (i = 0; i < (digits + decimals); i++) { wobble[i] = Math.random() * wobblefactor * height - wobblefactor * height / 2; function drawdigits() { var pos = 1, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 148

150 val = value, i, num, numb, frac, prevnum; do not use Math.pow() - rounding errors! for (i = 0; i < decimals; i++) { val *= 10; numb = Math.floor(val); frac = val - numb; numb = String(numb); prevnum = 9; for (i = 0; i < decimals + digits; i++) { num = +numb.substring(numb.length - i - 1, numb.length - i) 0; if (prevnum!== 9) { frac = 0; if (i < decimals) { backgroundcontext.drawimage(decimalbuffer, width - digitwidth * pos, -(verticalspace * (num + frac) + zerooffset + wobble[i])); else { backgroundcontext.drawimage(digitbuffer, width - digitwidth * pos, -(verticalspace * (num + frac) + zerooffset + wobble[i])); pos++; prevnum = num; this.setvalueanimated = function (newval) { var gauge = this; newval = parsefloat(newval); if (newval < 0) { newval = 0; if (value!== newval) { if (undefined!== tween) { if (tween.playing) { tween.stop(); tween = new Tween({, '', Tween.strongEaseOut, value, newval, 2); tween.onmotionchanged = function (event) { value = event.target._pos; if (!repainting) { repainting = true; requestanimframe(gauge.repaint); ; tween.start(); this.repaint(); return this; ; this.setvalue = function (newval) { value = parsefloat(newval); if (value < 0) { value = 0; this.repaint(); return this; ; this.getvalue = function () { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 149

151 return value; ; this.repaint = function () { if (!initialized) { init(); draw digits drawdigits(); draw the foreground backgroundcontext.drawimage(foregroundbuffer, 0, 0); paint back to the main context ctx.drawimage(backgroundbuffer, 0, 0); repainting = false; ; this.repaint(); ; ************************************ I M A G E - F U N C T I O N S ***************************************** var drawroseimage = function (ctx, centerx, centery, imagewidth, imageheight, backgroundcolor) { var fill = true, i, grad, symbolcolor = backgroundcolor.symbolcolor.getrgbacolor(); ctx.save(); ctx.linewidth = 1; ctx.fillstyle = symbolcolor; ctx.strokestyle = symbolcolor; ctx.translate(centerx, centery); broken ring for (i = 0; i < 360; i += 15) { fill =!fill; ctx.beginpath(); ctx.arc(0, 0, imagewidth * 0.26, i * RAD_FACTOR, (i + 15) * RAD_FACTOR, false); ctx.arc(0, 0, imagewidth * 0.23, (i + 15) * RAD_FACTOR, i * RAD_FACTOR, true); ctx.closepath(); if (fill) { ctx.fill(); ctx.stroke(); ctx.translate(-centerx, -centery); /* PATH1_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); ctx.fillstyle = fillcolorpath; ctx.fill(); ctx.stroke(); PATH2_2 ctx.save(); ctx.beginpath(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 150

152 ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); ctx.fillstyle = fillcolorpath; ctx.fill(); ctx.stroke(); PATH3_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); ctx.fillstyle = fillcolorpath; ctx.fill(); ctx.stroke(); PATH4_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); ctx.fillstyle = fillcolorpath; ctx.fill(); ctx.stroke(); PATH5_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * 0.5, imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); var PATH5_2_GRADIENT = ctx.createlineargradient( * imagewidth, 0, * imagewidth, 0); PATH5_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)'); PATH5_2_GRADIENT.addColorStop(0.48, 'rgb(222, 223, 218)'); PATH5_2_GRADIENT.addColorStop(0.49, backgroundcolor.symbolcolor.getrgbacolor()); PATH5_2_GRADIENT.addColorStop(1, backgroundcolor.symbolcolor.getrgbacolor()); ctx.fillstyle = PATH5_2_GRADIENT; ctx.fill(); ctx.stroke(); PATH6_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * 0.5, imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); var PATH6_2_GRADIENT = ctx.createlineargradient( * imagewidth, 0, ( ) * imagewidth, 0); PATH6_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)'); PATH6_2_GRADIENT.addColorStop(0.56, 'rgb(222, 223, 218)'); PATH6_2_GRADIENT.addColorStop(0.5601, backgroundcolor.symbolcolor.getrgbacolor()); PATH6_2_GRADIENT.addColorStop(1, backgroundcolor.symbolcolor.getrgbacolor()); ctx.fillstyle = PATH6_2_GRADIENT; ctx.linewidth = 1; ctx.linecap = 'square'; ctx.linejoin = 'miter'; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 151

153 ctx.strokestyle = backgroundcolor.symbolcolor.getrgbacolor(); ctx.fill(); ctx.stroke(); PATH7_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * 0.5); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); var PATH7_2_GRADIENT = ctx.createlineargradient(0, * imageheight, 0, * imageheight); PATH7_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)'); PATH7_2_GRADIENT.addColorStop(0.48, 'rgb(222, 223, 218)'); PATH7_2_GRADIENT.addColorStop(0.49, backgroundcolor.symbolcolor.getrgbacolor()); PATH7_2_GRADIENT.addColorStop(1, backgroundcolor.symbolcolor.getrgbacolor()); ctx.fillstyle = PATH7_2_GRADIENT; ctx.fill(); ctx.stroke(); PATH8_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * 0.5); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); var PATH8_2_GRADIENT = ctx.createlineargradient(0, * imageheight, 0, * imageheight); PATH8_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)'); PATH8_2_GRADIENT.addColorStop(0.52, 'rgb(222, 223, 218)'); PATH8_2_GRADIENT.addColorStop(0.53, backgroundcolor.symbolcolor.getrgbacolor()); PATH8_2_GRADIENT.addColorStop(1, backgroundcolor.symbolcolor.getrgbacolor()); ctx.fillstyle = PATH8_2_GRADIENT; ctx.fill(); ctx.stroke(); PATH9_2 ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.closepath(); ctx.moveto(imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.closepath(); ctx.fillstyle = fillcolorpath; ctx.linewidth = 1; ctx.linecap = 'square'; ctx.linejoin = 'miter'; ctx.strokestyle = backgroundcolor.symbolcolor.getrgbacolor(); ctx.fill(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 152

154 */ ctx.stroke(); ctx.restore(); Replacement code, not quite the same but much smaller! for (i = 0; 360 >= i; i += 90) { Small pointers ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); ctx.fillstyle = symbolcolor; ctx.fill(); ctx.stroke(); Large pointers ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * 0.5, imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.lineto(imagewidth * , imageheight * ); ctx.closepath(); grad = ctx.createlineargradient( * imagewidth, 0, * imagewidth, 0); grad.addcolorstop(0, 'rgb(222, 223, 218)'); grad.addcolorstop(0.48, 'rgb(222, 223, 218)'); grad.addcolorstop(0.49, symbolcolor); grad.addcolorstop(1, symbolcolor); ctx.fillstyle = grad; ctx.fill(); ctx.stroke(); ctx.translate(centerx, centery); ctx.rotate(i * RAD_FACTOR); ctx.translate(-centerx, -centery); Central ring ctx.beginpath(); ctx.translate(centerx, centery); ctx.arc(0, 0, imagewidth * 0.1, 0, TWO_PI, false); ctx.linewidth = imagewidth * 0.022; ctx.stroke(); ctx.translate(-centerx, -centery); ctx.restore(); ; var drawpointerimage = function (ctx, size, ptrtype, ptrcolor, lblcolor) { var ptrbuffer, ptrctx, grad, radius, cachekey = size.tostring() + ptrtype.type + ptrcolor.light.gethexcolor() + ptrcolor.medium.gethexcolor(); check if we have already created and cached this buffer, if not create it if (!drawpointerimage.cache[cachekey]) { create a pointer buffer ptrbuffer = createbuffer(size, size); ptrctx = ptrbuffer.getcontext('2d'); switch (ptrtype.type) { case 'type2': grad = ptrctx.createlineargradient(0, size * , 0, size * ); grad.addcolorstop(0, lblcolor.getrgbacolor()); grad.addcolorstop(0.36, lblcolor.getrgbacolor()); grad.addcolorstop(0.361, ptrcolor.light.getrgbacolor()); grad.addcolorstop(1, ptrcolor.light.getrgbacolor()); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 153

155 ptrctx.fillstyle = grad; ptrctx.beginpath(); ptrctx.moveto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.closepath(); ptrctx.fill(); case 'type3': ptrctx.beginpath(); ptrctx.rect(size * , size * , size * , size * ); ptrctx.closepath(); ptrctx.fillstyle = ptrcolor.light.getrgbacolor(); ptrctx.fill(); case 'type4': grad = ptrctx.createlineargradient( * size, 0, * size, 0); grad.addcolorstop(0, ptrcolor.dark.getrgbacolor()); grad.addcolorstop(0.51, ptrcolor.dark.getrgbacolor()); grad.addcolorstop(0.52, ptrcolor.light.getrgbacolor()); grad.addcolorstop(1, ptrcolor.light.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.beginpath(); ptrctx.moveto(size * 0.5, size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * 0.5); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * 0.5); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * 0.5, size * ); ptrctx.closepath(); ptrctx.fill(); case 'type5': grad = ptrctx.createlineargradient( * size, 0, * size, 0); grad.addcolorstop(0, ptrcolor.light.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.light.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.medium.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.beginpath(); ptrctx.moveto(size * 0.5, size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * 0.5, size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * 0.5, size * ); ptrctx.closepath(); ptrctx.fill(); ptrctx.linewidth = 1; ptrctx.linecap = 'square'; ptrctx.linejoin = 'miter'; ptrctx.strokestyle = ptrcolor.dark.getrgbacolor(); ptrctx.stroke(); case 'type6': ptrctx.fillstyle = ptrcolor.medium.getrgbacolor(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 154

156 ptrctx.beginpath(); ptrctx.moveto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * 0.5, size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.closepath(); ptrctx.fill(); case 'type7': grad = ptrctx.createlineargradient( * size, 0, * size, 0); grad.addcolorstop(0, ptrcolor.dark.getrgbacolor()); grad.addcolorstop(1, ptrcolor.medium.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.beginpath(); ptrctx.moveto(size * , size * ); ptrctx.lineto(size * , size * 0.5); ptrctx.lineto(size * , size * 0.5); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.closepath(); ptrctx.fill(); case 'type8': grad = ptrctx.createlineargradient( * size, 0, * size, 0); grad.addcolorstop(0, ptrcolor.light.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.light.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.medium.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.strokestyle = ptrcolor.dark.getrgbacolor(); ptrctx.beginpath(); ptrctx.moveto(size * 0.5, size * ); ptrctx.lineto(size * , size * 0.5); ptrctx.beziercurveto(size * , size * 0.5, size * , size * , size * 0.5, size * ); ptrctx.beziercurveto(size * , size * , size * , size * 0.5, size * , size * 0.5); ptrctx.lineto(size * 0.5, size * ); ptrctx.closepath(); ptrctx.fill(); ptrctx.stroke(); case 'type9': grad = ptrctx.createlineargradient( * size, 0, * size, 0); grad.addcolorstop(0, 'rgb(50, 50, 50)'); grad.addcolorstop(0.5, '#666666'); grad.addcolorstop(1, 'rgb(50, 50, 50)'); ptrctx.fillstyle = grad; ptrctx.strokestyle = '#2E2E2E'; ptrctx.beginpath(); ptrctx.moveto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.closepath(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 155

157 ptrctx.moveto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.closepath(); ptrctx.fill(); ptrctx.beginpath(); ptrctx.moveto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.closepath(); ptrctx.fillstyle = ptrcolor.medium.getrgbacolor(); ptrctx.fill(); case 'type10': POINTER_TYPE10 ptrctx.beginpath(); ptrctx.moveto(size * 0.5, size * ); ptrctx.beziercurveto(size * 0.5, size * , size * , size * , size * , size * 0.5); ptrctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * 0.5); ptrctx.beziercurveto(size * , size * , size * 0.5, size * , size * 0.5, size * ); ptrctx.closepath(); grad = ptrctx.createlineargradient( * size, 0, * size, 0); grad.addcolorstop(0, ptrcolor.light.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.light.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.medium.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.strokestyle = ptrcolor.medium.getrgbacolor(); ptrctx.linewidth = 1; ptrctx.linecap = 'square'; ptrctx.linejoin = 'miter'; ptrctx.fill(); ptrctx.stroke(); case 'type11': POINTER_TYPE11 ptrctx.beginpath(); ptrctx.moveto(0.5 * size, * size); ptrctx.lineto( * size, 0.5 * size); ptrctx.beziercurveto( * size, 0.5 * size, * size, * size, 0.5 * size, * size); ptrctx.beziercurveto( * size, * size, * size, 0.5 * size, * size, 0.5 * size); ptrctx.lineto(0.5 * size, * size); ptrctx.closepath(); grad = ptrctx.createlineargradient(0, * size, 0, * size); grad.addcolorstop(0, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.dark.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.strokestyle = ptrcolor.dark.getrgbacolor(); ptrctx.fill(); ptrctx.stroke(); case 'type12': Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 156

158 POINTER_TYPE12 ptrctx.beginpath(); ptrctx.moveto(0.5 * size, * size); ptrctx.lineto( * size, 0.5 * size); ptrctx.lineto(0.5 * size, * size); ptrctx.lineto( * size, 0.5 * size); ptrctx.lineto(0.5 * size, * size); ptrctx.closepath(); grad = ptrctx.createlineargradient(0, * size, 0, * size); grad.addcolorstop(0, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.dark.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.strokestyle = ptrcolor.dark.getrgbacolor(); ptrctx.fill(); ptrctx.stroke(); case 'type13': POINTER_TYPE13 case 'type14': POINTER_TYPE14 (same shape as 13) ptrctx.beginpath(); ptrctx.moveto( * size, * size); ptrctx.lineto(0.5 * size, * size); ptrctx.lineto( * size, * size); ptrctx.lineto( * size, * size); ptrctx.lineto( * size, * size); ptrctx.lineto( * size, * size); ptrctx.closepath(); if (ptrtype.type === 'type13') { TYPE13 grad = ptrctx.createlineargradient(0, 0.5 * size, 0, * size); grad.addcolorstop(0, lblcolor.getrgbacolor()); grad.addcolorstop(0.85, lblcolor.getrgbacolor()); grad.addcolorstop(0.85, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.medium.getrgbacolor()); ptrctx.fillstyle = grad; else { TYPE14 grad = ptrctx.createlineargradient( * size, 0, * size, 0); grad.addcolorstop(0, ptrcolor.verydark.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.light.getrgbacolor()); grad.addcolorstop(1, ptrcolor.verydark.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.fill(); case 'type15': POINTER TYPE15 - Classic with crescent case 'type16': POINTER TYPE16 - Classic without crescent ptrctx.beginpath(); ptrctx.moveto(size * , size * ); ptrctx.lineto(size * , size * 0.13); ptrctx.lineto(size * , size * 0.13); ptrctx.lineto(size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * 0.5); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); if (ptrtype.type === 'type15') { ptrctx.lineto(size * , size * 0.57); ptrctx.beziercurveto(size * 0.46, size * 0.58, size * 0.46, size * 0.62, size * , size * 0.63); ptrctx.beziercurveto(size * 0.47, size * 0.62, size * 0.48, size * 0.59, size * 0.5, size * 0.59); ptrctx.beziercurveto(size * 0.53, size * 0.59, size * 0.52, size * 0.62, size * , size * 0.63); ptrctx.beziercurveto(size * 0.54, size * 0.62, size * 0.54, size * 0.58, size * , size * 0.57); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 157

159 ptrctx.lineto(size * , size * 0.57); else { ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.lineto(size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * 0.5); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.closepath(); if (ptrtype.type === 'type15') { grad = ptrctx.createlineargradient(0, 0, 0, size * 0.63); else { grad = ptrctx.createlineargradient(0, 0, 0, size * ); grad.addcolorstop(0, ptrcolor.medium.getrgbacolor()); grad.addcolorstop( , ptrcolor.medium.getrgbacolor()); grad.addcolorstop(0.5, ptrcolor.light.getrgbacolor()); grad.addcolorstop( , ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.medium.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.strokestyle = ptrcolor.dark.getrgbacolor(); ptrctx.fill(); ptrctx.stroke(); Draw the rings ptrctx.beginpath(); radius = size * / 2; ptrctx.arc(size * 0.5, size * 0.5, radius, 0, TWO_PI); grad = ptrctx.createlineargradient(size * radius, size * radius, 0, size * radius); grad.addcolorstop(0, '#e6b35c'); grad.addcolorstop(0.01, '#e6b35c'); grad.addcolorstop(0.99, '#c48200'); grad.addcolorstop(1, '#c48200'); ptrctx.fillstyle = grad; ptrctx.closepath(); ptrctx.fill(); ptrctx.beginpath(); radius = size * / 2; ptrctx.arc(size * 0.5, size * 0.5, radius, 0, TWO_PI); grad = ptrctx.createradialgradient(size * 0.5, size * 0.5, 0, size * 0.5, size * 0.5, radius); grad.addcolorstop(0, '#c5c5c5'); grad.addcolorstop(0.19, '#c5c5c5'); grad.addcolorstop(0.22, '#000000'); grad.addcolorstop(0.8, '#000000'); grad.addcolorstop(0.99, '#707070'); grad.addcolorstop(1, '#707070'); ptrctx.fillstyle = grad; ptrctx.closepath(); ptrctx.fill(); case 'type1': /* falls through */ default: grad = ptrctx.createlineargradient(0, size * , 0, size * ); grad.addcolorstop(0, ptrcolor.verydark.getrgbacolor()); grad.addcolorstop(0.3, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(0.59, ptrcolor.medium.getrgbacolor()); grad.addcolorstop(1, ptrcolor.verydark.getrgbacolor()); ptrctx.fillstyle = grad; ptrctx.beginpath(); ptrctx.moveto(size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * 0.5, size * , size * 0.5, size * ); ptrctx.beziercurveto(size * 0.5, size * , size * , size * , size * , size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 158

160 ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * 0.5); ptrctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * 0.5); ptrctx.beziercurveto(size * , size * , size * , size * , size * , size * ); ptrctx.closepath(); ptrctx.fill(); cache buffer drawpointerimage.cache[cachekey] = ptrbuffer; ctx.drawimage(drawpointerimage.cache[cachekey], 0, 0); return this; ; drawpointerimage.cache = {; var drawradialframeimage = function (ctx, framedesign, centerx, centery, imagewidth, imageheight) { var radfbuffer, radfctx, grad, outerx, innerx, fractions, colors, cachekey = imagewidth.tostring() + imageheight + framedesign.design; check if we have already created and cached this buffer, if not create it if (!drawradialframeimage.cache[cachekey]) { Setup buffer radfbuffer = createbuffer(imagewidth, imageheight); radfctx = radfbuffer.getcontext('2d'); outer gray frame radfctx.fillstyle = '#848484'; radfctx.strokestyle = 'rgba(132, 132, 132, 0.5)'; radfctx.beginpath(); radfctx.arc(centerx, centery, imagewidth / 2, 0, TWO_PI, true); radfctx.closepath(); radfctx.fill(); radfctx.stroke(); radfctx.beginpath(); radfctx.arc(centerx, centery, imagewidth * / 2, 0, TWO_PI, true); radfctx.closepath(); main gradient frame switch (framedesign.design) { case "metal": grad = radfctx.createlineargradient(0, imagewidth * , 0, imageheight * ); grad.addcolorstop(0, '#fefefe'); grad.addcolorstop(0.07, 'rgb(210, 210, 210)'); grad.addcolorstop(0.12, 'rgb(179, 179, 179)'); grad.addcolorstop(1, 'rgb(213, 213, 213)'); radfctx.fillstyle = grad; radfctx.fill(); case "brass": grad = radfctx.createlineargradient(0, imagewidth * , 0, imageheight * ); grad.addcolorstop(0, 'rgb(249, 243, 155)'); grad.addcolorstop(0.05, 'rgb(246, 226, 101)'); grad.addcolorstop(0.10, 'rgb(240, 225, 132)'); grad.addcolorstop(0.50, 'rgb(90, 57, 22)'); grad.addcolorstop(0.90, 'rgb(249, 237, 139)'); grad.addcolorstop(0.95, 'rgb(243, 226, 108)'); grad.addcolorstop(1, 'rgb(202, 182, 113)'); radfctx.fillstyle = grad; radfctx.fill(); case "steel": grad = radfctx.createlineargradient(0, imagewidth * , 0, imageheight * ); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 159

161 grad.addcolorstop(0, 'rgb(231, 237, 237)'); grad.addcolorstop(0.05, 'rgb(189, 199, 198)'); grad.addcolorstop(0.10, 'rgb(192, 201, 200)'); grad.addcolorstop(0.50, 'rgb(23, 31, 33)'); grad.addcolorstop(0.90, 'rgb(196, 205, 204)'); grad.addcolorstop(0.95, 'rgb(194, 204, 203)'); grad.addcolorstop(1, 'rgb(189, 201, 199)'); radfctx.fillstyle = grad; radfctx.fill(); case "gold": grad = radfctx.createlineargradient(0, imagewidth * , 0, imageheight * ); grad.addcolorstop(0, 'rgb(255, 255, 207)'); grad.addcolorstop(0.15, 'rgb(255, 237, 96)'); grad.addcolorstop(0.22, 'rgb(254, 199, 57)'); grad.addcolorstop(0.3, 'rgb(255, 249, 203)'); grad.addcolorstop(0.38, 'rgb(255, 199, 64)'); grad.addcolorstop(0.44, 'rgb(252, 194, 60)'); grad.addcolorstop(0.51, 'rgb(255, 204, 59)'); grad.addcolorstop(0.6, 'rgb(213, 134, 29)'); grad.addcolorstop(0.68, 'rgb(255, 201, 56)'); grad.addcolorstop(0.75, 'rgb(212, 135, 29)'); grad.addcolorstop(1, 'rgb(247, 238, 101)'); radfctx.fillstyle = grad; radfctx.fill(); case "anthracite": grad = radfctx.createlineargradient(0, * imageheight, 0, * imageheight); grad.addcolorstop(0, 'rgb(118, 117, 135)'); grad.addcolorstop(0.06, 'rgb(74, 74, 82)'); grad.addcolorstop(0.12, 'rgb(50, 50, 54)'); grad.addcolorstop(1, 'rgb(79, 79, 87)'); radfctx.fillstyle = grad; radfctx.fill(); case "tiltedgray": grad = radfctx.createlineargradient( * imagewidth, * imageheight, * imagewidth, * imageheight); grad.addcolorstop(0, '#ffffff'); grad.addcolorstop(0.07, 'rgb(210, 210, 210)'); grad.addcolorstop(0.16, 'rgb(179, 179, 179)'); grad.addcolorstop(0.33, '#ffffff'); grad.addcolorstop(0.55, '#c5c5c5'); grad.addcolorstop(0.79, '#ffffff'); grad.addcolorstop(1, '#666666'); radfctx.fillstyle = grad; radfctx.fill(); case "tiltedblack": grad = radfctx.createlineargradient( * imagewidth, * imageheight, * imagewidth, * imageheight); grad.addcolorstop(0, '#666666'); grad.addcolorstop(0.21, '#000000'); grad.addcolorstop(0.47, '#666666'); grad.addcolorstop(0.99, '#000000'); grad.addcolorstop(1, '#000000'); radfctx.fillstyle = grad; radfctx.fill(); case "glossymetal": grad = radfctx.createradialgradient(0.5 * imagewidth, 0.5 * imageheight, 0, 0.5 * imagewidth, 0.5 * imagewidth, 0.5 * imagewidth); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 160

162 grad.addcolorstop(0, 'rgb(207, 207, 207)'); grad.addcolorstop(0.96, 'rgb(205, 204, 205)'); grad.addcolorstop(1, 'rgb(244, 244, 244)'); radfctx.fillstyle = grad; radfctx.fill(); radfctx.beginpath(); radfctx.arc(0.5 * imagewidth, 0.5 * imageheight, * imagewidth / 2, 0, TWO_PI); radfctx.closepath(); grad = radfctx.createlineargradient(0, imageheight * imageheight, 0, * imageheight); grad.addcolorstop(0, 'rgb(249, 249, 249)'); grad.addcolorstop(0.23, 'rgb(200, 195, 191)'); grad.addcolorstop(0.36, '#ffffff'); grad.addcolorstop(0.59, 'rgb(29, 29, 29)'); grad.addcolorstop(0.76, 'rgb(200, 194, 192)'); grad.addcolorstop(1, 'rgb(209, 209, 209)'); radfctx.fillstyle = grad; radfctx.fill(); radfctx.beginpath(); radfctx.arc(0.5 * imagewidth, 0.5 * imageheight, * imagewidth / 2, 0, TWO_PI); radfctx.closepath(); radfctx.fillstyle = '#f6f6f6'; radfctx.fill(); radfctx.beginpath(); radfctx.arc(0.5 * imagewidth, 0.5 * imageheight, 0.85 * imagewidth / 2, 0, TWO_PI); radfctx.closepath(); radfctx.fillstyle = '#333333'; radfctx.fill(); case "blackmetal": fractions = [0, 0.125, , 0.5, , 0.875, 1]; colors = [ new RgbaColor(254, 254, 254, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(153, 153, 153, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(153, 153, 153, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(254, 254, 254, 1)]; radfctx.save(); radfctx.clip(radfctx.arc(centerx, centery, imagewidth * / 2, 0, TWO_PI, true)); outerx = imagewidth * ; innerx = imagewidth * ; grad = new ConicalGradient(fractions, colors); grad.fillcircle(radfctx, centerx, centery, innerx, outerx); fade outer edge radfctx.strokestyle = '#848484'; radfctx.strokestyle = 'rgba(132, 132, 132, 0.8)'; radfctx.beginpath(); radfctx.linewidth = imagewidth / 90; radfctx.arc(centerx, centery, imagewidth / 2, 0, TWO_PI, true); radfctx.closepath(); radfctx.stroke(); radfctx.restore(); case "shinymetal": fractions = [0, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 161

163 0.125, 0.25, , 0.5, , 0.75, 0.875, 1]; colors = [ new RgbaColor(254, 254, 254, 1), new RgbaColor(210, 210, 210, 1), new RgbaColor(179, 179, 179, 1), new RgbaColor(238, 238, 238, 1), new RgbaColor(160, 160, 160, 1), new RgbaColor(238, 238, 238, 1), new RgbaColor(179, 179, 179, 1), new RgbaColor(210, 210, 210, 1), new RgbaColor(254, 254, 254, 1)]; radfctx.save(); radfctx.clip(radfctx.arc(centerx, centery, imagewidth * / 2, 0, TWO_PI, true)); outerx = imagewidth * ; innerx = imagewidth * ; grad = new ConicalGradient(fractions, colors); grad.fillcircle(radfctx, centerx, centery, innerx, outerx); fade outer edge radfctx.strokestyle = '#848484'; radfctx.strokestyle = 'rgba(132, 132, 132, 0.8)'; radfctx.beginpath(); radfctx.linewidth = imagewidth / 90; radfctx.arc(centerx, centery, imagewidth / 2, 0, TWO_PI, true); radfctx.closepath(); radfctx.stroke(); radfctx.restore(); case "chrome": fractions = [0, 0.09, 0.12, 0.16, 0.25, 0.29, 0.33, 0.38, 0.48, 0.52, 0.63, 0.68, 0.8, 0.83, 0.87, 0.97, 1]; colors = [ new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(136, 136, 138, 1), new RgbaColor(164, 185, 190, 1), new RgbaColor(158, 179, 182, 1), new RgbaColor(112, 112, 112, 1), new RgbaColor(221, 227, 227, 1), new RgbaColor(155, 176, 179, 1), new RgbaColor(156, 176, 177, 1), new RgbaColor(254, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(156, 180, 180, 1), Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 162

164 new RgbaColor(198, 209, 211, 1), new RgbaColor(246, 248, 247, 1), new RgbaColor(204, 216, 216, 1), new RgbaColor(164, 188, 190, 1), new RgbaColor(255, 255, 255, 1)]; radfctx.save(); radfctx.clip(radfctx.arc(centerx, centery, imagewidth * / 2, 0, TWO_PI, true)); outerx = imagewidth * ; innerx = imagewidth * ; grad = new ConicalGradient(fractions, colors); grad.fillcircle(radfctx, centerx, centery, innerx, outerx); fade outer edge radfctx.strokestyle = '#848484'; radfctx.strokestyle = 'rgba(132, 132, 132, 0.8)'; radfctx.beginpath(); radfctx.linewidth = imagewidth / 90; radfctx.arc(centerx, centery, imagewidth / 2, 0, TWO_PI, true); radfctx.closepath(); radfctx.stroke(); radfctx.restore(); inner bright frame radfctx.fillstyle = 'rgb(191, 191, 191)'; radfctx.beginpath(); radfctx.arc(centerx, centery, imagewidth * / 2, 0, TWO_PI, true); radfctx.closepath(); radfctx.fill(); clip out center so it is transparent if the background is not visible radfctx.globalcompositeoperation = 'destination-out'; Background ellipse radfctx.beginpath(); radfctx.arc(centerx, centery, imagewidth * 0.83 / 2, 0, TWO_PI, true); radfctx.closepath(); radfctx.fill(); cache the buffer drawradialframeimage.cache[cachekey] = radfbuffer; ctx.drawimage(drawradialframeimage.cache[cachekey], 0, 0); return this; ; drawradialframeimage.cache = {; var drawradialbackgroundimage = function (ctx, backgroundcolor, centerx, centery, imagewidth, imageheight) { var radbbuffer, radbctx, grad, fractions, colors, backgroundoffsetx = imagewidth * / 2, mono, texturecolor, texture, radius, turnradius, stepsize, end, i, cachekey = imagewidth.tostring() + imageheight + backgroundcolor.name; check if we have already created and cached this buffer, if not create it if (!drawradialbackgroundimage.cache[cachekey]) { Setup buffer radbbuffer = createbuffer(imagewidth, imageheight); radbctx = radbbuffer.getcontext('2d'); Background ellipse radbctx.beginpath(); radbctx.arc(centerx, centery, backgroundoffsetx, 0, TWO_PI, true); radbctx.closepath(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 163

165 If the backgroundcolor is a texture fill it with the texture instead of the gradient if (backgroundcolor.name === 'CARBON' backgroundcolor.name === 'PUNCHED_SHEET' backgroundcolor.name === 'BRUSHED_METAL' backgroundcolor.name === 'BRUSHED_STAINLESS') { if (backgroundcolor.name === 'CARBON') { radbctx.fillstyle = radbctx.createpattern(carbonbuffer, 'repeat'); radbctx.fill(); if (backgroundcolor.name === 'PUNCHED_SHEET') { radbctx.fillstyle = radbctx.createpattern(punchedsheetbuffer, 'repeat'); radbctx.fill(); Add another inner shadow to make the look more realistic grad = radbctx.createlineargradient(backgroundoffsetx, 0, imagewidth - backgroundoffsetx, 0); grad.addcolorstop(0, 'rgba(0, 0, 0, 0.25)'); grad.addcolorstop(0.5, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(1, 'rgba(0, 0, 0, 0.25)'); radbctx.fillstyle = grad; radbctx.beginpath(); radbctx.arc(centerx, centery, backgroundoffsetx, 0, TWO_PI, true); radbctx.closepath(); radbctx.fill(); if (backgroundcolor.name === 'BRUSHED_METAL' backgroundcolor.name === 'BRUSHED_STAINLESS') { mono = (backgroundcolor.name === 'BRUSHED_METAL'? true : false); texturecolor = parseint(backgroundcolor.gradientstop.gethexcolor().substr(-6), 16); texture = brushedmetaltexture(texturecolor, 5, 0.1, mono, 0.5); radbctx.fillstyle = radbctx.createpattern(texture.fill(0, 0, imagewidth, imageheight), 'no-repeat'); radbctx.fill(); else if (backgroundcolor.name === 'STAINLESS' backgroundcolor.name === 'TURNED') { Define the fractions of the conical gradient paint fractions = [0, 0.03, 0.10, 0.14, 0.24, 0.33, 0.38, 0.5, 0.62, 0.67, 0.76, 0.81, 0.85, 0.97, 1]; Define the colors of the conical gradient paint colors = [new RgbaColor('#FDFDFD'), new RgbaColor('#FDFDFD'), new RgbaColor('#B2B2B4'), new RgbaColor('#ACACAE'), new RgbaColor('#FDFDFD'), new RgbaColor('#8E8E8E'), new RgbaColor('#8E8E8E'), new RgbaColor('#FDFDFD'), new RgbaColor('#8E8E8E'), new RgbaColor('#8E8E8E'), new RgbaColor('#FDFDFD'), new RgbaColor('#ACACAE'), new RgbaColor('#B2B2B4'), new RgbaColor('#FDFDFD'), new RgbaColor('#FDFDFD')]; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 164

166 grad = new ConicalGradient(fractions, colors); grad.fillcircle(radbctx, centerx, centery, 0, backgroundoffsetx); if (backgroundcolor.name === 'TURNED') { Define the turning radius radius = backgroundoffsetx; turnradius = radius * 0.55; Step size proporational to radius stepsize = RAD_FACTOR * (500 / radius); Save before we start radbctx.save(); restrict the turnings to the desired area radbctx.beginpath(); radbctx.arc(centerx, centery, radius, 0, TWO_PI); radbctx.closepath(); radbctx.clip(); set the style for the turnings radbctx.linewidth = 0.5; end = TWO_PI - stepsize * 0.3; Step the engine round'n'round for (i = 0 ; i < end; i += stepsize) { draw a 'turn' radbctx.strokestyle = 'rgba(240, 240, 255, 0.25)'; radbctx.beginpath(); radbctx.arc(centerx + turnradius, centery, turnradius, 0, TWO_PI); radbctx.stroke(); rotate the 'piece' a fraction to draw 'shadow' radbctx.translate(centerx, centery); radbctx.rotate(stepsize * 0.3); radbctx.translate(-centerx, -centery); draw a 'turn' radbctx.strokestyle = 'rgba(25, 10, 10, 0.1)'; radbctx.beginpath(); radbctx.arc(centerx + turnradius, centery, turnradius, 0, TWO_PI); radbctx.stroke(); now rotate on to the next 'scribe' position minus the 'fraction' radbctx.translate(centerx, centery); radbctx.rotate(stepsize - stepsize * 0.3); radbctx.translate(-centerx, -centery); Restore canvas now we are done radbctx.restore(); else { grad = radbctx.createlineargradient(0, imagewidth * , 0, backgroundoffsetx * 2); grad.addcolorstop(0, backgroundcolor.gradientstart.getrgbacolor()); grad.addcolorstop(0.4, backgroundcolor.gradientfraction.getrgbacolor()); grad.addcolorstop(1, backgroundcolor.gradientstop.getrgbacolor()); radbctx.fillstyle = grad; radbctx.fill(); Inner shadow grad = radbctx.createradialgradient(centerx, centery, 0, centerx, centery, backgroundoffsetx); grad.addcolorstop(0, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(0.7, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(0.71, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(0.86, 'rgba(0, 0, 0, 0.03)'); grad.addcolorstop(0.92, 'rgba(0, 0, 0, 0.07)'); grad.addcolorstop(0.97, 'rgba(0, 0, 0, 0.15)'); grad.addcolorstop(1, 'rgba(0, 0, 0, 0.3)'); radbctx.fillstyle = grad; radbctx.beginpath(); radbctx.arc(centerx, centery, backgroundoffsetx, 0, TWO_PI, true); radbctx.closepath(); radbctx.fill(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 165

167 cache the buffer drawradialbackgroundimage.cache[cachekey] = radbbuffer; ctx.drawimage(drawradialbackgroundimage.cache[cachekey], 0, 0); return this; ; drawradialbackgroundimage.cache = {; var drawradialcustomimage = function (ctx, img, centerx, centery, imagewidth, imageheight) { var drawwidth = imagewidth * , drawheight = imageheight * , x = (imagewidth - drawwidth) / 2, y = (imageheight - drawheight) / 2; if (img!== null && img.height > 0 && img.width > 0) { ctx.save(); Set the clipping area ctx.beginpath(); ctx.arc(centerx, centery, imagewidth * / 2, 0, TWO_PI, true); ctx.clip(); Add the image ctx.drawimage(img, x, y, drawwidth, drawheight); ctx.restore(); return this; ; var drawradialforegroundimage = function (ctx, foregroundtype, imagewidth, imageheight, withcenterknob, knob, style, gaugetype, orientation) { var radfgbuffer, radfgctx, knobsize = Math.ceil(imageHeight * ), knobx = imagewidth * knobsize / 2, knoby = imageheight * knobsize / 2, shadowoffset = imagewidth * 0.008, gradhighlight, gradhighlight2, cachekey = foregroundtype.type + imagewidth + imageheight + withcenterknob + (knob!== undefined? knob.type : '-') + (style!== undefined? style.style : '-') + (orientation!== undefined? orientation.type : '-'); check if we have already created and cached this buffer, if so return it and exit if (!drawradialforegroundimage.cache[cachekey]) { Setup buffer radfgbuffer = createbuffer(imagewidth, imageheight); radfgctx = radfgbuffer.getcontext('2d'); center post if (withcenterknob) { Set the pointer shadow params radfgctx.shadowcolor = 'rgba(0, 0, 0, 0.8)'; radfgctx.shadowoffsetx = radfgctx.shadowoffsety = shadowoffset; radfgctx.shadowblur = shadowoffset * 2; if (gaugetype === steelseries.gaugetype.type5) { if (steelseries.orientation.west === orientation) { knobx = imagewidth * knobsize / 2; radfgctx.drawimage(createknobimage(knobsize, knob, style), knobx, knoby); else { knoby = imageheight * knobsize / 2; radfgctx.drawimage(createknobimage(knobsize, knob, style), knobx, imageheight * ); else { radfgctx.drawimage(createknobimage(knobsize, knob, style), knobx, knoby); Undo shadow drawing radfgctx.shadowoffsetx = radfgctx.shadowoffsety = 0; radfgctx.shadowblur = 0; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 166

168 highlight switch (foregroundtype.type) { case 'type2': radfgctx.beginpath(); radfgctx.moveto(imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * 0.5, imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.closepath(); gradhighlight = radfgctx.createlineargradient( * imagewidth, * imageheight, * imagewidth, * imageheight); gradhighlight.addcolorstop(0, 'rgba(255, 255, 255, 0.275)'); gradhighlight.addcolorstop(1, 'rgba(255, 255, 255, 0.015)'); case 'type3': radfgctx.beginpath(); radfgctx.moveto(imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.closepath(); gradhighlight = radfgctx.createlineargradient(0, * imageheight, 0, * imageheight); gradhighlight.addcolorstop(0, 'rgba(255, 255, 255, 0.275)'); gradhighlight.addcolorstop(1, 'rgba(255, 255, 255, 0.015)'); case 'type4': radfgctx.beginpath(); radfgctx.moveto(imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.closepath(); gradhighlight = radfgctx.createradialgradient((0.5) * imagewidth, ((0.5) * imageheight), 0, ((0.5) * imagewidth), ((0.5) * imageheight), * imagewidth); gradhighlight.addcolorstop(0, 'rgba(255, 255, 255, 0)'); gradhighlight.addcolorstop(0.82, 'rgba(255, 255, 255, 0)'); gradhighlight.addcolorstop(0.83, 'rgba(255, 255, 255, 0)'); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 167

169 gradhighlight.addcolorstop(1, 'rgba(255, 255, 255, 0.15)'); radfgctx.beginpath(); radfgctx.moveto(imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.closepath(); gradhighlight2 = radfgctx.createlineargradient( * imagewidth, * imageheight, * imagewidth, * imageheight); gradhighlight2.addcolorstop(0, 'rgba(255, 255, 255, 0.275)'); gradhighlight2.addcolorstop(1, 'rgba(255, 255, 255, 0.015)'); radfgctx.fillstyle = gradhighlight2; radfgctx.fill(); case 'type5': radfgctx.beginpath(); radfgctx.moveto(imagewidth * , imageheight * 0.5); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * 0.5); radfgctx.closepath(); gradhighlight = radfgctx.createlineargradient(0, * imageheight, 0, * imageheight); gradhighlight.addcolorstop(0, 'rgba(255, 255, 255, 0.275)'); gradhighlight.addcolorstop(1, 'rgba(255, 255, 255, 0.015)'); case 'type1': /* falls through */ default: radfgctx.beginpath(); radfgctx.moveto(imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * 0.5, imageheight * ); radfgctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); radfgctx.closepath(); gradhighlight = radfgctx.createlineargradient(0, * imageheight, 0, * imageheight); gradhighlight.addcolorstop(0, 'rgba(255, 255, 255, 0.275)'); gradhighlight.addcolorstop(1, 'rgba(255, 255, 255, 0.015)'); radfgctx.fillstyle = gradhighlight; radfgctx.fill(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 168

170 cache the buffer drawradialforegroundimage.cache[cachekey] = radfgbuffer; ctx.drawimage(drawradialforegroundimage.cache[cachekey], 0, 0); return this; ; drawradialforegroundimage.cache = {; var createknobimage = function (size, knob, style) { var knobbuffer, knobctx, maxpostcenterx = size / 2, maxpostcentery = size / 2, grad, cachekey = size.tostring() + knob.type + style.style; check if we have already created and cached this buffer, if not create it if (!createknobimage.cache[cachekey]) { knobbuffer = createbuffer(size * , size * ); knobctx = knobbuffer.getcontext('2d'); switch (knob.type) { case 'metalknob': METALKNOB_FRAME knobctx.beginpath(); knobctx.moveto(0, size * 0.5); knobctx.beziercurveto(0, size * , size * , 0, size * 0.5, 0); knobctx.beziercurveto(size * , 0, size, size * , size, size * 0.5); knobctx.beziercurveto(size, size * , size * , size, size * 0.5, size); knobctx.beziercurveto(size * , size, 0, size * , 0, size * 0.5); knobctx.closepath(); grad = knobctx.createlineargradient(0, 0, 0, size); grad.addcolorstop(0, 'rgb(92, 95, 101)'); grad.addcolorstop(0.47, 'rgb(46, 49, 53)'); grad.addcolorstop(1, 'rgb(22, 23, 26)'); knobctx.fillstyle = grad; knobctx.fill(); METALKNOB_MAIN knobctx.beginpath(); knobctx.moveto(size * , size * 0.5); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * 0.5); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * 0.5); knobctx.closepath(); grad = knobctx.createlineargradient(0, * size, 0, * size); switch (style.style) { case 'black': grad.addcolorstop(0, 'rgb(43, 42, 47)'); grad.addcolorstop(1, 'rgb(26, 27, 32)'); case 'brass': grad.addcolorstop(0, 'rgb(150, 110, 54)'); grad.addcolorstop(1, 'rgb(124, 95, 61)'); case 'silver': /* falls through */ default: grad.addcolorstop(0, 'rgb(204, 204, 204)'); grad.addcolorstop(1, 'rgb(87, 92, 98)'); knobctx.fillstyle = grad; knobctx.fill(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 169

171 METALKNOB_LOWERHL knobctx.beginpath(); knobctx.moveto(size * , size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * ); knobctx.closepath(); grad = knobctx.createradialgradient(( ) * size, (( ) * size), 0, (( ) * size), (( ) * size), * size); grad.addcolorstop(0, 'rgba(255, 255, 255, 0.6)'); grad.addcolorstop(1, 'rgba(255, 255, 255, 0)'); knobctx.fillstyle = grad; knobctx.fill(); METALKNOB_UPPERHL knobctx.beginpath(); knobctx.moveto(size * , size * ); knobctx.beziercurveto(size * , size * , size * , 0, size * 0.5, 0); knobctx.beziercurveto(size * , 0, size * , size * , size * , size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * ); knobctx.closepath(); grad = knobctx.createradialgradient(0.5 * size, 0, 0, ((0.5) * size), 0, * size); grad.addcolorstop(0, 'rgba(255, 255, 255, )'); grad.addcolorstop(1, 'rgba(255, 255, 255, 0)'); knobctx.fillstyle = grad; knobctx.fill(); METALKNOB_INNERFRAME knobctx.beginpath(); knobctx.moveto(size * , size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * ); knobctx.closepath(); grad = knobctx.createlineargradient(0, * size, 0, * size); grad.addcolorstop(0, '#000000'); grad.addcolorstop(1, 'rgb(204, 204, 204)'); knobctx.fillstyle = grad; knobctx.fill(); METALKNOB_INNERBACKGROUND knobctx.beginpath(); knobctx.moveto(size * , size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * 0.5, size * ); knobctx.beziercurveto(size * , size * , size * , size * , size * , size * ); knobctx.closepath(); grad = knobctx.createlineargradient(0, * size, 0, * size); grad.addcolorstop(0, 'rgb(10, 9, 1)'); grad.addcolorstop(1, 'rgb(42, 41, 37)'); knobctx.fillstyle = grad; knobctx.fill(); case 'standardknob': grad = knobctx.createlineargradient(0, 0, 0, size); grad.addcolorstop(0, 'rgb(180, 180, 180)'); grad.addcolorstop(0.46, 'rgb(63, 63, 63)'); grad.addcolorstop(1, 'rgb(40, 40, 40)'); knobctx.fillstyle = grad; knobctx.beginpath(); knobctx.arc(maxpostcenterx, maxpostcentery, size / 2, 0, TWO_PI, true); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 170

172 knobctx.closepath(); knobctx.fill(); grad = knobctx.createlineargradient(0, size - size * 0.77, 0, size - size * size * 0.77); switch (style.style) { case 'black': grad.addcolorstop(0, 'rgb(191, 191, 191)'); grad.addcolorstop(0.5, 'rgb(45, 44, 49)'); grad.addcolorstop(1, 'rgb(125, 126, 128)'); case 'brass': grad.addcolorstop(0, 'rgb(223, 208, 174)'); grad.addcolorstop(0.5, 'rgb(123, 95, 63)'); grad.addcolorstop(1, 'rgb(207, 190, 157)'); case 'silver': /* falls through */ default: grad.addcolorstop(0, 'rgb(215, 215, 215)'); grad.addcolorstop(0.5, 'rgb(116, 116, 116)'); grad.addcolorstop(1, 'rgb(215, 215, 215)'); knobctx.fillstyle = grad; knobctx.beginpath(); knobctx.arc(maxpostcenterx, maxpostcentery, size * 0.77 / 2, 0, TWO_PI, true); knobctx.closepath(); knobctx.fill(); 2); grad = knobctx.createradialgradient(maxpostcenterx, maxpostcentery, 0, maxpostcenterx, maxpostcentery, size * 0.77 / grad.addcolorstop(0, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(0.75, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(0.76, 'rgba(0, 0, 0, 0.01)'); grad.addcolorstop(1, 'rgba(0, 0, 0, 0.2)'); knobctx.fillstyle = grad; knobctx.beginpath(); knobctx.arc(maxpostcenterx, maxpostcentery, size * 0.77 / 2, 0, TWO_PI, true); knobctx.closepath(); knobctx.fill(); cache the buffer createknobimage.cache[cachekey] = knobbuffer; return createknobimage.cache[cachekey]; ; createknobimage.cache = {; var createledimage = function (size, state, ledcolor) { var ledbuffer, ledctx, ledcenterx = size / 2, ledcentery = size / 2, grad, cachekey = size.tostring() + state + ledcolor.outercolor_on; check if we have already created and cached this buffer, if not create it if (!createledimage.cache[cachekey]) { ledbuffer = createbuffer(size, size); ledctx = ledbuffer.getcontext('2d'); switch (state) { case 0: LED OFF OFF Gradient grad = ledctx.createradialgradient(ledcenterx, ledcentery, 0, ledcenterx, ledcentery, size * 0.5 / 2); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 171

173 grad.addcolorstop(0, ledcolor.innercolor1_off); grad.addcolorstop(0.2, ledcolor.innercolor2_off); grad.addcolorstop(1, ledcolor.outercolor_off); ledctx.fillstyle = grad; ledctx.beginpath(); ledctx.arc(ledcenterx, ledcentery, size * 0.5 / 2, 0, TWO_PI, true); ledctx.closepath(); ledctx.fill(); InnerShadow grad = ledctx.createradialgradient(ledcenterx, ledcentery, 0, ledcenterx, ledcentery, size * 0.5 / 2); grad.addcolorstop(0, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(0.8, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(1, 'rgba(0, 0, 0, 0.4)'); ledctx.fillstyle = grad; ledctx.beginpath(); ledctx.arc(ledcenterx, ledcentery, size * 0.5 / 2, 0, TWO_PI, true); ledctx.closepath(); ledctx.fill(); LightReflex grad = ledctx.createlineargradient(0, 0.35 * size, 0, 0.35 * size * size); grad.addcolorstop(0, 'rgba(255, 255, 255, 0.4)'); grad.addcolorstop(1, 'rgba(255, 255, 255, 0)'); ledctx.fillstyle = grad; ledctx.beginpath(); ledctx.arc(ledcenterx, 0.35 * size * size / 2, size * 0.2, 0, TWO_PI, true); ledctx.closepath(); ledctx.fill(); case 1: LED ON ON Gradient grad = ledctx.createradialgradient(ledcenterx, ledcentery, 0, ledcenterx, ledcentery, size * 0.5 / 2); grad.addcolorstop(0, ledcolor.innercolor1_on); grad.addcolorstop(0.2, ledcolor.innercolor2_on); grad.addcolorstop(1, ledcolor.outercolor_on); ledctx.fillstyle = grad; ledctx.beginpath(); ledctx.arc(ledcenterx, ledcentery, size * 0.5 / 2, 0, TWO_PI, true); ledctx.closepath(); ledctx.fill(); InnerShadow grad = ledctx.createradialgradient(ledcenterx, ledcentery, 0, ledcenterx, ledcentery, size * 0.5 / 2); grad.addcolorstop(0, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(0.8, 'rgba(0, 0, 0, 0)'); grad.addcolorstop(1, 'rgba(0, 0, 0, 0.4)'); ledctx.fillstyle = grad; ledctx.beginpath(); ledctx.arc(ledcenterx, ledcentery, size * 0.5 / 2, 0, TWO_PI, true); ledctx.closepath(); ledctx.fill(); LightReflex grad = ledctx.createlineargradient(0, 0.35 * size, 0, 0.35 * size * size); grad.addcolorstop(0, 'rgba(255, 255, 255, 0.4)'); grad.addcolorstop(1, 'rgba(255, 255, 255, 0)'); ledctx.fillstyle = grad; ledctx.beginpath(); ledctx.arc(ledcenterx, 0.35 * size * size / 2, size * 0.2, 0, TWO_PI, true); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 172

174 ledctx.closepath(); ledctx.fill(); Corona grad = ledctx.createradialgradient(ledcenterx, ledcentery, 0, ledcenterx, ledcentery, size / 2); grad.addcolorstop(0, setalpha(ledcolor.coronacolor, 0).color); grad.addcolorstop(0.6, setalpha(ledcolor.coronacolor, 0.4).color); grad.addcolorstop(0.7, setalpha(ledcolor.coronacolor, 0.25).color); grad.addcolorstop(0.8, setalpha(ledcolor.coronacolor, 0.15).color); grad.addcolorstop(0.85, setalpha(ledcolor.coronacolor, 0.05).color); grad.addcolorstop(1, setalpha(ledcolor.coronacolor, 0).color); ledctx.fillstyle = grad; ledctx.beginpath(); ledctx.arc(ledcenterx, ledcentery, size / 2, 0, TWO_PI, true); ledctx.closepath(); ledctx.fill(); cache the buffer createledimage.cache[cachekey] = ledbuffer; return createledimage.cache[cachekey]; ; createledimage.cache = {; var createlcdbackgroundimage = function (width, height, lcdcolor) { var lcdbuffer, lcdctx, xb = 0, yb = 0, wb = width, hb = height, rb = Math.min(width, height) * 0.095, grad, xf = 1, yf = 1, wf = width - 2, hf = height - 2, rf = rb - 1, cachekey = width.tostring() + height + JSON.stringify(lcdColor); check if we have already created and cached this buffer, if not create it if (!createlcdbackgroundimage.cache[cachekey]) { lcdbuffer = createbuffer(width, height); lcdctx = lcdbuffer.getcontext('2d'); background grad = lcdctx.createlineargradient(0, yb, 0, yb + hb); grad.addcolorstop(0, '#4c4c4c'); grad.addcolorstop(0.08, '#666666'); grad.addcolorstop(0.92, '#666666'); grad.addcolorstop(1, '#e6e6e6'); lcdctx.fillstyle = grad; roundedrectangle(lcdctx, xb, yb, wb, hb, rb); lcdctx.fill(); foreground grad = lcdctx.createlineargradient(0, yf, 0, yf + hf); grad.addcolorstop(0, lcdcolor.gradientstartcolor); grad.addcolorstop(0.03, lcdcolor.gradientfraction1color); grad.addcolorstop(0.49, lcdcolor.gradientfraction2color); grad.addcolorstop(0.5, lcdcolor.gradientfraction3color); grad.addcolorstop(1, lcdcolor.gradientstopcolor); lcdctx.fillstyle = grad; roundedrectangle(lcdctx, xf, yf, wf, hf, rf); lcdctx.fill(); cache the buffer createlcdbackgroundimage.cache[cachekey] = lcdbuffer; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 173

175 return createlcdbackgroundimage.cache[cachekey]; ; createlcdbackgroundimage.cache = {; var createmeasuredvalueimage = function (size, indicatorcolor, radial, vertical) { var indicatorbuffer, indicatorctx, cachekey = size.tostring() + indicatorcolor + radial + vertical; check if we have already created and cached this buffer, if so return it and exit if (!createmeasuredvalueimage.cache[cachekey]) { indicatorbuffer = doc.createelement('canvas'); indicatorctx = indicatorbuffer.getcontext('2d'); indicatorbuffer.width = size; indicatorbuffer.height = size; indicatorctx.fillstyle = indicatorcolor; if (radial) { indicatorctx.beginpath(); indicatorctx.moveto(size * 0.5, size); indicatorctx.lineto(0, 0); indicatorctx.lineto(size, 0); indicatorctx.closepath(); indicatorctx.fill(); else { if (vertical) { indicatorctx.beginpath(); indicatorctx.moveto(size, size * 0.5); indicatorctx.lineto(0, 0); indicatorctx.lineto(0, size); indicatorctx.closepath(); indicatorctx.fill(); else { indicatorctx.beginpath(); indicatorctx.moveto(size * 0.5, 0); indicatorctx.lineto(size, size); indicatorctx.lineto(0, size); indicatorctx.closepath(); indicatorctx.fill(); cache the buffer createmeasuredvalueimage.cache[cachekey] = indicatorbuffer; return createmeasuredvalueimage.cache[cachekey]; ; createmeasuredvalueimage.cache = {; var createtrendindicator = function (width, onsection, colors) { var height = width * 2, trendbuffer, trendctx, fill, cachekey = onsection.state + width + JSON.stringify(colors), drawuparrow = function () { draw up arrow (red) var ledcolor = colors[0]; if (onsection.state === 'up') { fill = trendctx.createradialgradient(0.5 * width, 0.2 * height, 0, 0.5 * width, 0.2 * height, 0.5 * width); fill.addcolorstop(0, ledcolor.innercolor1_on); fill.addcolorstop(0.2, ledcolor.innercolor2_on); fill.addcolorstop(1, ledcolor.outercolor_on); else { fill = trendctx.createlineargradient(0, 0, 0, 0.5 * height); fill.addcolorstop(0, '#323232'); fill.addcolorstop(1, '#5c5c5c'); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 174

176 , trendctx.fillstyle = fill; trendctx.beginpath(); trendctx.moveto(0.5 * width, 0); trendctx.lineto(width, 0.2 * height); trendctx.lineto(0.752 * width, 0.2 * height); trendctx.lineto(0.752 * width, 0.37 * height); trendctx.lineto(0.252 * width, 0.37 * height); trendctx.lineto(0.252 * width, 0.2 * height); trendctx.lineto(0, 0.2 * height); trendctx.closepath(); trendctx.fill(); if (onsection.state!== 'up') { Inner shadow trendctx.strokestyle = 'rgba(0, 0, 0, 0.4)'; trendctx.beginpath(); trendctx.moveto(0, 0.2 * height); trendctx.lineto(0.5 * width, 0); trendctx.lineto(width, 0.2 * height); trendctx.moveto(0.252 * width, 0.2 * height); trendctx.lineto(0.252 * width, 0.37 * height); trendctx.stroke(); Inner highlight trendctx.strokestyle = 'rgba(255, 255, 255, 0.3)'; trendctx.beginpath(); trendctx.moveto(0.252 * width, 0.37 * height); trendctx.lineto(0.752 * width, 0.37 * height); trendctx.lineto(0.752 * width, 0.2 * height); trendctx.lineto(width, 0.2 * height); trendctx.stroke(); else { draw halo fill = trendctx.createradialgradient(0.5 * width, 0.2 * height, 0, 0.5 * width, 0.2 * height, 0.7 * width); fill.addcolorstop(0, setalpha(ledcolor.coronacolor, 0).color); fill.addcolorstop(0.5, setalpha(ledcolor.coronacolor, 0.3).color); fill.addcolorstop(0.7, setalpha(ledcolor.coronacolor, 0.2).color); fill.addcolorstop(0.8, setalpha(ledcolor.coronacolor, 0.1).color); fill.addcolorstop(0.85, setalpha(ledcolor.coronacolor, 0.05).color); fill.addcolorstop(1, setalpha(ledcolor.coronacolor, 0).color); trendctx.fillstyle = fill; trendctx.beginpath(); trendctx.arc(0.5 * width, 0.2 * height, 0.7 * width, 0, TWO_PI, true); trendctx.closepath(); trendctx.fill(); drawequals = function () { draw equal symbol var ledcolor = colors[1]; trendctx.beginpath(); if (onsection.state === 'steady') { fill = ledcolor.outercolor_on; trendctx.fillstyle = fill; trendctx.rect(0.128 * width, 0.41 * height, * width, * height); trendctx.rect(0.128 * width, * height, * width, * height); trendctx.closepath(); trendctx.fill(); else { fill = trendctx.createlineargradient(0, 0.41 * height, 0, 0.41 * height * height); fill.addcolorstop(0, '#323232'); fill.addcolorstop(1, '#5c5c5c'); trendctx.fillstyle = fill; trendctx.rect(0.128 * width, 0.41 * height, * width, * height); trendctx.closepath(); trendctx.fill(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 175

177 fill = trendctx.createlineargradient(0, * height, 0, * height * height); fill.addcolorstop(0, '#323232'); fill.addcolorstop(1, '#5c5c5c'); trendctx.fillstyle = fill; trendctx.rect(0.128 * width, * height, * width, * height); trendctx.closepath(); trendctx.fill(); if (onsection.state!== 'steady') { inner shadow trendctx.strokestyle = 'rgba(0, 0, 0, 0.4)'; trendctx.beginpath(); trendctx.moveto(0.128 * width, 0.41 * height * height); trendctx.lineto(0.128 * width, 0.41 * height); trendctx.lineto(0.128 * width * width, 0.41 * height); trendctx.stroke(); trendctx.beginpath(); trendctx.moveto(0.128 * width, * height * height); trendctx.lineto(0.128 * width, * height); trendctx.lineto(0.128 * width * width, * height); trendctx.stroke(); inner highlight trendctx.strokestyle = 'rgba(255, 255, 255, 0.3)'; trendctx.beginpath(); trendctx.moveto(0.128 * width * width, 0.41 * height); trendctx.lineto(0.128 * width * width, 0.41 * height * height); trendctx.lineto(0.128 * width, 0.41 * height * height); trendctx.stroke(); trendctx.beginpath(); trendctx.moveto(0.128 * width * width, * height); trendctx.lineto(0.128 * width * width, * height * height); trendctx.lineto(0.128 * width, * height * height); trendctx.stroke(); else { draw halo fill = trendctx.createradialgradient(0.5 * width, 0.5 * height, 0, 0.5 * width, 0.5 * height, 0.7 * width); fill.addcolorstop(0, setalpha(ledcolor.coronacolor, 0).color); fill.addcolorstop(0.5, setalpha(ledcolor.coronacolor, 0.3).color); fill.addcolorstop(0.7, setalpha(ledcolor.coronacolor, 0.2).color); fill.addcolorstop(0.8, setalpha(ledcolor.coronacolor, 0.1).color); fill.addcolorstop(0.85, setalpha(ledcolor.coronacolor, 0.05).color); fill.addcolorstop(1, setalpha(ledcolor.coronacolor, 0).color); trendctx.fillstyle = fill; trendctx.beginpath(); trendctx.arc(0.5 * width, 0.5 * height, 0.7 * width, 0, TWO_PI, true); trendctx.closepath(); trendctx.fill();, drawdownarrow = function () { draw down arrow var ledcolor = colors[2]; if (onsection.state === 'down') { fill = trendctx.createradialgradient(0.5 * width, 0.8 * height, 0, 0.5 * width, 0.8 * height, 0.5 * width); fill.addcolorstop(0, ledcolor.innercolor1_on); fill.addcolorstop(0.2, ledcolor.innercolor2_on); fill.addcolorstop(1, ledcolor.outercolor_on); else { fill = trendctx.createlineargradient(0, 0.63 * height, 0, height); fill.addcolorstop(0, '#323232'); fill.addcolorstop(1, '#5c5c5c'); trendctx.beginpath(); trendctx.fillstyle = fill; trendctx.moveto(0.5 * width, height); trendctx.lineto(width, 0.8 * height); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 176

178 trendctx.lineto(0.725 * width, 0.8 * height); trendctx.lineto(0.725 * width, 0.63 * height); trendctx.lineto(0.252 * width, 0.63 * height); trendctx.lineto(0.252 * width, 0.8 * height); trendctx.lineto(0, 0.8 * height); trendctx.closepath(); trendctx.fill(); if (onsection.state!== 'down') { Inner shadow trendctx.strokestyle = 'rgba(0, 0, 0, 0.4)'; trendctx.beginpath(); trendctx.moveto(0, 0.8 * height); trendctx.lineto(0.252 * width, 0.8 * height); trendctx.moveto(0.252 * width, 0.63 * height); trendctx.lineto(0.752 * width, 0.63 * height); trendctx.stroke(); trendctx.beginpath(); trendctx.moveto(0.752 * width, 0.8 * height); trendctx.lineto(width, 0.8 * height); trendctx.stroke(); Inner highlight trendctx.strokestyle = 'rgba(255, 255, 255, 0.3)'; trendctx.beginpath(); trendctx.moveto(0, 0.8 * height); trendctx.lineto(0.5 * width, height); trendctx.lineto(width, 0.8 * height); trendctx.stroke(); trendctx.beginpath(); trendctx.moveto(0.752 * width, 0.8 * height); trendctx.lineto(0.752 * width, 0.63 * height); trendctx.stroke(); else { draw halo fill = trendctx.createradialgradient(0.5 * width, 0.8 * height, 0, 0.5 * width, 0.8 * height, 0.7 * width); fill.addcolorstop(0, setalpha(ledcolor.coronacolor, 0).color); fill.addcolorstop(0.5, setalpha(ledcolor.coronacolor, 0.3).color); fill.addcolorstop(0.7, setalpha(ledcolor.coronacolor, 0.2).color); fill.addcolorstop(0.8, setalpha(ledcolor.coronacolor, 0.1).color); fill.addcolorstop(0.85, setalpha(ledcolor.coronacolor, 0.05).color); fill.addcolorstop(1, setalpha(ledcolor.coronacolor, 0).color); trendctx.fillstyle = fill; trendctx.beginpath(); trendctx.arc(0.5 * width, 0.8 * height, 0.7 * width, 0, TWO_PI, true); trendctx.closepath(); trendctx.fill(); ; Check if we have already cached this indicator, if not create it if (!createtrendindicator.cache[cachekey]) { create oversized buffer for the glow trendbuffer = createbuffer(width * 2, width * 4); trendctx = trendbuffer.getcontext('2d'); trendctx.translate(width * 0.5, width * 0.5); Must draw the active section last so the 'glow' is on top switch (onsection.state) { case 'up': drawdownarrow(); drawequals(); drawuparrow(); case 'steady': drawdownarrow(); drawuparrow(); drawequals(); case 'down': Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 177

179 /* falls through */ default: drawuparrow(); drawequals(); drawdownarrow(); cache the buffer createtrendindicator.cache[cachekey] = trendbuffer; return createtrendindicator.cache[cachekey]; ; createtrendindicator.cache = {; var drawtitleimage = function (ctx, imagewidth, imageheight, titlestring, unitstring, backgroundcolor, vertical, radial, altpos, gaugetype) { gaugetype = (undefined === gaugetype? gaugetype = steelseries.gaugetype.type1 : gaugetype); ctx.save(); ctx.textalign = (radial? 'center' : 'left'); ctx.textbaseline = 'middle'; ctx.strokestyle = backgroundcolor.labelcolor.getrgbacolor(); ctx.fillstyle = backgroundcolor.labelcolor.getrgbacolor(); if (radial) { ctx.font = * imagewidth + 'px ' + stdfontname; ctx.filltext(titlestring, imagewidth / 2, imageheight * 0.3, imagewidth * 0.3); ctx.filltext(unitstring, imagewidth / 2, imageheight * 0.38, imagewidth * 0.3); else { linear if (vertical) { ctx.font = 0.1 * imagewidth + 'px ' + stdfontname; ctx.save(); ctx.translate( * imagewidth, * imageheight); ctx.rotate( ); ctx.filltext(titlestring, 0, 0); ctx.translate( * imagewidth, * imageheight); ctx.restore(); ctx.font = * imagewidth + 'px ' + stdfontname; if (altpos) { LCD visible if (gaugetype.type === 'type2') { ctx.textalign = 'right'; ctx.filltext(unitstring, 0.36 * imagewidth, imageheight * 0.79, imagewidth * 0.25); else { ctx.filltext(unitstring, 0.63 * imagewidth, imageheight * 0.85, imagewidth * 0.2); else { LCD hidden ctx.textalign = 'center'; if (gaugetype.type === 'type2') { ctx.filltext(unitstring, imagewidth / 2, imageheight * 0.92, imagewidth * 0.2); else { ctx.filltext(unitstring, imagewidth / 2, imageheight * 0.89, imagewidth * 0.2); else { linear horizontal ctx.font = * imagewidth + 'px ' + stdfontname; ctx.filltext(titlestring, imagewidth * 0.15, imageheight * 0.25, imagewidth * 0.3); ctx.font = * imagewidth + 'px ' + stdfontname; ctx.filltext(unitstring, imagewidth * , imageheight * 0.7, imagewidth * 0.07); ctx.restore(); ; ***************************************** T E X T U R E S **************************************************** Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 178

180 var carbonbuffer = drawtobuffer(12, 12, function (ctx) { var imagewidth = ctx.canvas.width, imageheight = ctx.canvas.height, offsetx = 0, offsety = 0, grad; ctx.save(); RULB ctx.save(); ctx.beginpath(); ctx.rect(0, 0, imagewidth * 0.5, imageheight * 0.5); ctx.closepath(); ctx.restore(); grad = ctx.createlineargradient(0, offsety * imageheight, 0, 0.5 * imageheight + offsety * imageheight); grad.addcolorstop(0, 'rgb(35, 35, 35)'); grad.addcolorstop(1, 'rgb(23, 23, 23)'); ctx.fillstyle = grad; ctx.fill(); RULF ctx.save(); ctx.beginpath(); ctx.rect(imagewidth * , 0, imagewidth * , imageheight * ); ctx.closepath(); ctx.restore(); offsetx = ; offsety = 0; grad = ctx.createlineargradient(0, offsety * imageheight, 0, * imageheight + offsety * imageheight); grad.addcolorstop(0, 'rgb(38, 38, 38)'); grad.addcolorstop(1, 'rgb(30, 30, 30)'); ctx.fillstyle = grad; ctx.fill(); RLRB ctx.save(); ctx.beginpath(); ctx.rect(imagewidth * 0.5, imageheight * 0.5, imagewidth * 0.5, imageheight * 0.5); ctx.closepath(); ctx.restore(); offsetx = 0.5; offsety = 0.5; grad = ctx.createlineargradient(0, offsety * imageheight, 0, 0.5 * imageheight + offsety * imageheight); grad.addcolorstop(0, 'rgb(35, 35, 35)'); grad.addcolorstop(1, 'rgb(23, 23, 23)'); ctx.fillstyle = grad; ctx.fill(); RLRF ctx.save(); ctx.beginpath(); ctx.rect(imagewidth * , imageheight * 0.5, imagewidth * , imageheight * ); ctx.closepath(); ctx.restore(); offsetx = ; offsety = 0.5; grad = ctx.createlineargradient(0, offsety * imageheight, 0, * imageheight + offsety * imageheight); grad.addcolorstop(0, 'rgb(38, 38, 38)'); grad.addcolorstop(1, 'rgb(30, 30, 30)'); ctx.fillstyle = grad; ctx.fill(); RURB ctx.save(); ctx.beginpath(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 179

181 ctx.rect(imagewidth * 0.5, 0, imagewidth * 0.5, imageheight * 0.5); ctx.closepath(); ctx.restore(); offsetx = 0.5; offsety = 0; grad = ctx.createlineargradient(0, offsety * imageheight, 0, 0.5 * imageheight + offsety * imageheight); grad.addcolorstop(0, '#303030'); grad.addcolorstop(1, 'rgb(40, 40, 40)'); ctx.fillstyle = grad; ctx.fill(); RURF ctx.save(); ctx.beginpath(); ctx.rect(imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.closepath(); ctx.restore(); offsetx = ; offsety = ; grad = ctx.createlineargradient(0, offsety * imageheight, 0, * imageheight + offsety * imageheight); grad.addcolorstop(0, 'rgb(53, 53, 53)'); grad.addcolorstop(1, 'rgb(45, 45, 45)'); ctx.fillstyle = grad; ctx.fill(); RLLB ctx.save(); ctx.beginpath(); ctx.rect(0, imageheight * 0.5, imagewidth * 0.5, imageheight * 0.5); ctx.closepath(); ctx.restore(); offsetx = 0; offsety = 0.5; grad = ctx.createlineargradient(0, offsety * imageheight, 0, 0.5 * imageheight + offsety * imageheight); grad.addcolorstop(0, '#303030'); grad.addcolorstop(1, '#282828'); ctx.fillstyle = grad; ctx.fill(); RLLF ctx.save(); ctx.beginpath(); ctx.rect(imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.closepath(); ctx.restore(); offsetx = ; offsety = ; grad = ctx.createlineargradient(0, offsety * imageheight, 0, * imageheight + offsety * imageheight); grad.addcolorstop(0, '#353535'); grad.addcolorstop(1, '#2d2d2d'); ctx.fillstyle = grad; ctx.fill(); ctx.restore(); ); var punchedsheetbuffer = drawtobuffer(15, 15, function (ctx) { var imagewidth = ctx.canvas.width, imageheight = ctx.canvas.height, grad; ctx.save(); BACK ctx.save(); ctx.beginpath(); ctx.rect(0, 0, imagewidth, imageheight); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 180

182 ctx.closepath(); ctx.restore(); ctx.fillstyle = '#1D2123'; ctx.fill(); ULB ctx.save(); ctx.beginpath(); ctx.moveto(0, imageheight * ); ctx.beziercurveto(0, imageheight * 0.4, imagewidth * , imageheight * , imagewidth * 0.2, imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * 0.4, imageheight * 0.4, imagewidth * 0.4, imageheight * ); ctx.beziercurveto(imagewidth * 0.4, imageheight * , imagewidth * , imageheight * , imagewidth * 0.2, imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , 0, imageheight * , 0, imageheight * ); ctx.closepath(); grad = ctx.createlineargradient(0, * imageheight, 0, * imageheight); grad.addcolorstop(0, '#000000'); grad.addcolorstop(1, '#444444'); ctx.fillstyle = grad; ctx.fill(); ULF ctx.save(); ctx.beginpath(); ctx.moveto(0, imageheight * 0.2); ctx.beziercurveto(0, imageheight * , imagewidth * , imageheight * 0.4, imagewidth * 0.2, imageheight * 0.4); ctx.beziercurveto(imagewidth * , imageheight * 0.4, imagewidth * 0.4, imageheight * , imagewidth * 0.4, imageheight * 0.2); ctx.beziercurveto(imagewidth * 0.4, imageheight * , imagewidth * , 0, imagewidth * 0.2, 0); ctx.beziercurveto(imagewidth * , 0, 0, imageheight * , 0, imageheight * 0.2); ctx.closepath(); ctx.fillstyle = '#050506'; ctx.fill(); LRB ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * 0.8, imageheight * , imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * 0.6, imagewidth * 0.8, imageheight * , imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * 0.6, imagewidth * , imageheight * ); ctx.closepath(); grad = ctx.createlineargradient(0, * imageheight, 0, * imageheight); grad.addcolorstop(0, '#000000'); grad.addcolorstop(1, '#444444'); ctx.fillstyle = grad; ctx.fill(); LRF ctx.save(); ctx.beginpath(); ctx.moveto(imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * 0.8, imagewidth * , imageheight * , imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * 0.8, imageheight * , imagewidth * , imageheight * 0.8, imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * 0.8, imageheight * , imagewidth * , imageheight * ); ctx.beziercurveto(imagewidth * , imageheight * , imagewidth * , imageheight * , Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 181

183 imagewidth * , imageheight * ); ctx.closepath(); ctx.fillstyle = '#050506'; ctx.fill(); ctx.restore(); ); var brushedmetaltexture = function (color, radius, amount, monochrome, shine) { this.fill = function (startx, starty, endx, endy) { var i, x, y, loop counters sinarr, width, height, outcanvas, outcanvascontext, output canvas inpixels, outpixels, pixel arrays alpha = color & 0xff000000; alpha = 255, red = (color >> 16) & 0xff, green = (color >> 8) & 0xff, blue = color & 0xff, n = 0, variation = 255 * amount, totr, totg, totb, indx, tr, tg, tb, f; startx = Math.floor(startX); starty = Math.floor(startY); endx = Math.ceil(endX); endy = Math.ceil(endY); width = endx - startx; height = endy - starty; Create output canvas outcanvas = createbuffer(width, height); outcanvascontext = outcanvas.getcontext('2d'); Create pixel arrays inpixels = outcanvascontext.createimagedata(width, height); outpixels = outcanvascontext.createimagedata(width, height); Precreate sin() values if (shine!== 0) { sinarr = []; for (i = 0; i < width; i++) { sinarr[i] = (255 * shine * Math.sin(i / width * PI)) 0; for (y = 0; y < height; y++) { The pixel array is addressed as 4 elements per pixel [r,g,b,a] if (radius!== 0) { totr = totg = totb = 0; for (x = 0; x < width; x ++) { indx = (y * width * 4) + (x * 4); tr = red; tg = green; tb = blue; if (shine!== 0) { f = sinarr[x]; tr += f; tg += f; tb += f; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 182

184 if (monochrome) { n = ((2 * Math.random() - 1) * variation) 0; inpixels.data[indx] = clamp(tr + n); inpixels.data[indx + 1] = clamp(tg + n); inpixels.data[indx + 2] = clamp(tb + n); inpixels.data[indx + 3] = alpha; else { inpixels.data[indx] = random(tr, variation); inpixels.data[indx + 1] = random(tg, variation); inpixels.data[indx + 2] = random(tb, variation); inpixels.data[indx + 3] = alpha; if (radius > 0) { horizontalblur(inpixels, outpixels, width, height, radius, alpha); outcanvascontext.putimagedata(outpixels, startx, starty); else { outcanvascontext.putimagedata(inpixels, startx, starty); return outcanvas; ; function random(x, vari) { x += ((2 * Math.random() - 1) * vari) 0; return (x < 0? 0 : (x > 255? 255 : x)); function clamp(c) { return (C < 0? 0 : (C > 255? 255 : C)); function horizontalblur(inpix, outpix, width, height, radius, alpha) { var x, y, loop counters i, mul, indx, totr, totg, totb; if (radius >= width) { radius = width - 1; mul = 1 / (radius * 2 + 1); indx = 0; for (y = 0; y < height; y++) { totr = totg = totb = 0; for (x = 0; x < radius ; x++) { i = (indx + x) * 4; totr += inpix.data[i]; totg += inpix.data[i + 1]; totb += inpix.data[i + 2]; for (x = 0; x < width; x++) { if (x > radius) { i = (indx - radius - 1) * 4; totr -= inpix.data[i]; totg -= inpix.data[i + 1]; totb -= inpix.data[i + 2]; if (x + radius < width) { i = (indx + radius) * 4; totr += inpix.data[i]; totg += inpix.data[i + 1]; totb += inpix.data[i + 2]; i = indx * 4; outpix.data[i] = (totr * mul) 0; outpix.data[i + 1] = (totg * mul) 0; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 183

185 outpix.data[i + 2] = (totb * mul) 0; outpix.data[i + 3] = alpha; indx++; return this; ; ******************************************** T O O L S ******************************************************* var RgbaColor = function (r, g, b, a) { var red, green, blue, alpha; if (arguments.length === 1) { hexadecimal input # b = parseint(r.substr(5, 2), 16); g = parseint(r.substr(3, 2), 16); r = parseint(r.substr(1, 2), 16); a = 1; else if (arguments.length === 3) { a = 1; function validatecolors() { red = range(r, 255); green = range(g, 255); blue = range(b, 255); alpha = range(a, 1); validatecolors(); this.getred = function () { return red; ; this.setred = function (r) { red = range(r, 255); ; this.getgreen = function () { return green; ; this.setgreen = function (g) { green = range(g, 255); ; this.getblue = function () { return blue; ; this.setblue = function (b) { blue = range(b, 255); ; this.getalpha = function () { return alpha; ; this.setalpha = function (a) { alpha = range(a, 1); ; this.getrgbacolor = function () { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 184

186 return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')'; ; this.getrgbcolor = function () { return 'rgb(' + red + ', ' + green + ', ' + blue + ')'; ; this.gethexcolor = function () { return '#' + red.tostring(16) + green.tostring(16) + blue.tostring(16); ; ; var ConicalGradient = function (fractions, colors) { var limit = fractions.length - 1, i; Pre-multipy fractions array into range -PI to PI for (i = 0; i <= limit; i++) { fractions[i] = TWO_PI * fractions[i] - PI; this.fillcircle = function (ctx, centerx, centery, innerx, outerx) { var angle, radius = Math.ceil(outerX), diameter = radius * 2, pixels, alpha, x, y, dx, dy, dy2, distance, indx, pixcolor, buffer, bufferctx; Original Version using rotated lines /* ctx.save(); ctx.linewidth = 1.5; ctx.translate(centerx, centery); ctx.rotate(rotationoffset); ctx.translate(-centerx, -centery); for (i = 0, size = fractions.length - 1; i < size; i++) { startangle = TWO_PI * fractions[i]; stopangle = TWO_PI * fractions[i + 1]; range = stopangle - startangle; startcolor = colors[i]; stopcolor = colors[i + 1]; for (angle = startangle; angle < stopangle; angle += anglestep) { ctx.beginpath(); ctx.fillstyle = getcolorfromfraction(startcolor, stopcolor, range, (angle - startangle)).getrgbacolor(); ctx.strokestyle = ctx.fillstyle; if (innerx > 0) { ctx.arc(centerx, centery, innerx, angle + anglestep, angle, true); else { ctx.moveto(centerx, centery); ctx.arc(centerx, centery, outerx, angle, angle + anglestep); ctx.fill(); ctx.stroke(); */ End - Original Version Create pixel array pixels = ctx.createimagedata(diameter, diameter); alpha = 255; for (y = 0; y < diameter; y++) { dy = radius - y; dy2 = dy * dy; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 185

187 for (x = 0; x < diameter; x++) { dx = x - radius; distance = Math.sqrt((dx * dx) + dy2); if (distance <= radius && distance >= innerx) { pixels are transparent by default, so only paint the ones we need angle = Math.atan2(dx, dy); for (i = 0; i < limit; i++) { if (angle >= fractions[i] && angle < fractions[i + 1]) { pixcolor = getcolorfromfraction(colors[i], colors[i + 1], fractions[i + 1] - fractions[i], angle - fractions[i], true); The pixel array is addressed as 4 elements per pixel [r,g,b,a] indx = ((diameter - y) * diameter * 4) + (x * 4); plot is 180 rotated from orginal method, so apply a simple invert (diameter - y) pixels.data[indx] = pixcolor[0]; pixels.data[indx + 1] = pixcolor[1]; pixels.data[indx + 2] = pixcolor[2]; pixels.data[indx + 3] = alpha; Create a new buffer to apply the raw data so we can rotate it buffer = createbuffer(diameter, diameter); bufferctx = buffer.getcontext('2d'); bufferctx.putimagedata(pixels, 0, 0); Apply the image buffer ctx.drawimage(buffer, centerx - radius, centery - radius); ; this.fillrect = function (ctx, centerx, centery, width, height, thicknessx, thicknessy) { var angle, width = Math.ceil(width), width2 = width / 2, height = Math.ceil(height), height2 = height / 2, thicknessx = Math.ceil(thicknessX), thicknessy = Math.ceil(thicknessY), pixels, alpha, x, y, dx, dy, indx, pixcolor, buffer, bufferctx; Create pixel array pixels = ctx.createimagedata(width, height); alpha = 255; for (y = 0; y < height; y++) { dy = height2 - y; for (x = 0; x < width; x++) { if (y > thicknessy && y < height - thicknessy) { we are in the range where we only draw the sides if (x > thicknessx && x < width - thicknessx) { we are in the empty 'middle', jump to the next edge x = width - thicknessx; dx = x - width2; angle = Math.atan2(dx, dy); for (i = 0; i < limit; i++) { if (angle >= fractions[i] && angle < fractions[i + 1]) { pixcolor = getcolorfromfraction(colors[i], colors[i + 1], fractions[i + 1] - fractions[i], angle - fractions[i], true); The pixel array is addressed as 4 elements per pixel [r,g,b,a] indx = ((height - y) * width * 4) + (x * 4); plot is 180 rotated from orginal method, so apply a simple invert (height - y) pixels.data[indx] = pixcolor[0]; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 186

188 pixels.data[indx + 1] = pixcolor[0]; pixels.data[indx + 2] = pixcolor[0]; pixels.data[indx + 3] = alpha; Create a new buffer to apply the raw data so we can clip it when drawing to canvas buffer = createbuffer(width, height); bufferctx = buffer.getcontext('2d'); bufferctx.putimagedata(pixels, 0, 0); draw the buffer back to the canvas ctx.drawimage(buffer, centerx - width2, centery - height2); ; ; var GradientWrapper = function (start, end, fractions, colors) { this.getcolorat = function (fraction) { var lowerlimit = 0, lowerindex = 0, upperlimit = 1, upperindex = 1, i, interpolationfraction; fraction = (fraction < 0? 0 : (fraction > 1? 1 : fraction)); for (i = 0; i < fractions.length; i++) { if (fractions[i] < fraction && lowerlimit < fractions[i]) { lowerlimit = fractions[i]; lowerindex = i; if (fractions[i] === fraction) { return colors[i]; if (fractions[i] > fraction && upperlimit >= fractions[i]) { upperlimit = fractions[i]; upperindex = i; interpolationfraction = (fraction - lowerlimit) / (upperlimit - lowerlimit); return getcolorfromfraction(colors[lowerindex], colors[upperindex], 1, interpolationfraction); ; this.getstart = function () { return start; ; this.getend = function () { return end; ; ; function setalpha(hex, alpha) { var hexcolor = ("#" === hex.charat(0))? hex.substring(1, 7) : hex, red = parseint((hexcolor).substring(0, 2), 16), green = parseint((hexcolor).substring(2, 4), 16), blue = parseint((hexcolor).substring(4, 6), 16); this.color = 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')'; return this; function getcolorfromfraction(sourcecolor, destinationcolor, range, fraction, returnrawdata) { var INT_TO_FLOAT = 1 / 255, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 187

189 sourcered = sourcecolor.getred(), sourcegreen = sourcecolor.getgreen(), sourceblue = sourcecolor.getblue(), sourcealpha = sourcecolor.getalpha(), deltared = destinationcolor.getred() - sourcered, deltagreen = destinationcolor.getgreen() - sourcegreen, deltablue = destinationcolor.getblue() - sourceblue, deltaalpha = destinationcolor.getalpha() * INT_TO_FLOAT - sourcealpha * INT_TO_FLOAT, fractionred = deltared / range * fraction, fractiongreen = deltagreen / range * fraction, fractionblue = deltablue / range * fraction, fractionalpha = deltaalpha / range * fraction; returnrawdata = returnrawdata false; if (returnrawdata) { return [(sourcered + fractionred).tofixed(0), (sourcegreen + fractiongreen).tofixed(0), (sourceblue + fractionblue).tofixed(0), sourcealpha + fractionalpha]; else { return new RgbaColor((sourceRed + fractionred).tofixed(0), (sourcegreen + fractiongreen).tofixed(0), (sourceblue + fractionblue).tofixed(0), sourcealpha + fractionalpha); function section(start, stop, color) { return {start : start, stop : stop, color : color; Math.log10 = function (value) { return (Math.log(value) / Math.LN10); ; function calcnicenumber(range, round) { var exponent = Math.floor(Math.log10(range)), exponent of range fraction = range / Math.pow(10, exponent), fractional part of range nicefraction; nice, rounded fraction if (round) { if (1.5 > fraction) { nicefraction = 1; else if (3 > fraction) { nicefraction = 2; else if (7 > fraction) { nicefraction = 5; else { nicefraction = 10; else { if (1 >= fraction) { nicefraction = 1; else if (2 >= fraction) { nicefraction = 2; else if (5 >= fraction) { nicefraction = 5; else { nicefraction = 10; return nicefraction * Math.pow(10, exponent); function roundedrectangle(ctx, x, y, w, h, radius) { var r = x + w, b = y + h; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 188

190 ctx.beginpath(); ctx.moveto(x + radius, y); ctx.lineto(r - radius, y); ctx.quadraticcurveto(r, y, r, y + radius); ctx.lineto(r, y + h - radius); ctx.quadraticcurveto(r, b, r - radius, b); ctx.lineto(x + radius, b); ctx.quadraticcurveto(x, b, x, b - radius); ctx.lineto(x, y + radius); ctx.quadraticcurveto(x, y, x + radius, y); ctx.closepath(); ctx.stroke(); function createbuffer(width, height) { var buffer = doc.createelement('canvas'); buffer.width = width; buffer.height = height; return buffer; function drawtobuffer(width, height, drawfunction) { var buffer = doc.createelement('canvas'); buffer.width = width; buffer.height = height; drawfunction(buffer.getcontext('2d')); return buffer; function getcolorvalues(color) { var colordata, lookupbuffer = drawtobuffer(1, 1, function (ctx) { ctx.fillstyle = color; ctx.beginpath(); ctx.rect(0, 0, 1, 1); ctx.fill(); ); colordata = lookupbuffer.getcontext('2d').getimagedata(0, 0, 2, 2).data; /* for (var i = 0; i < data.length; i += 4) { var red = data[i]; red var green = data[i + 1]; green var blue = data[i + 2]; blue var alpha = data[i + 3]; alpha console.log(red + ", " + green + ", " + blue); */ return [colordata[0], colordata[1], colordata[2], colordata[3]]; function customcolordef(color) { var VERY_DARK, DARK, LIGHT, LIGHTER, VERY_LIGHT, values = getcolorvalues(color), rgbacol = new RgbaColor(values[0], values[1], values[2], values[3]); VERY_DARK = darker(rgbacol, 0.32); DARK = darker(rgbacol, 0.62); LIGHT = lighter(rgbacol, 0.84); LIGHTER = lighter(rgbacol, 0.94); VERY_LIGHT = lighter(rgbacol, 1); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 189

191 return new ColorDef(VERY_DARK, DARK, rgbacol, LIGHT, LIGHTER, VERY_LIGHT); function rgbtohsl(red, green, blue) { var min, max, hue, saturation, lightness, delta; red /= 255; green /= 255; blue /= 255; max = Math.max(red, green, blue); min = Math.min(red, green, blue); lightness = (max + min) / 2; if (max === min) { hue = saturation = 0; achromatic else { delta = max - min; saturation = lightness > 0.5? delta / (2 - max - min) : delta / (max + min); switch (max) { case red: hue = (green - blue) / delta + (green < blue? 6 : 0); case green: hue = (blue - red) / delta + 2; case blue: hue = (red - green) / delta + 4; hue /= 6; return [hue, saturation, lightness]; /* These functions are not currently used function hsltorgb(hue, saturation, lightness) { var red, green, blue, p, q; function hue2rgb(p, q, t) { if (t < 0) { t += 1; if (t > 1) { t -= 1; if (t < 1 / 6) { return p + (q - p) * 6 * t; if (t < 1 / 2) { return q; if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; return p; if (saturation === 0) { red = green = blue = lightness; achromatic else { q = (lightness < 0.5? lightness * (1 + saturation) : lightness + saturation - lightness * saturation); p = 2 * lightness - q; red = hue2rgb(p, q, hue + 1 / 3); green = hue2rgb(p, q, hue); blue = hue2rgb(p, q, hue - 1 / 3); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 190

192 return [Math.floor(red * 255), Math.floor(green * 255), Math.floor(blue * 255)]; function hsbtohsl(hue, saturation, brightness) { var lightness = (brightness - saturation) / 2; lightness = range(lightness, 1); return [hue, saturation, lightness]; function hsltohsb(hue, saturation, lightness) { var brightness = (lightness * 2) + saturation; return [hue, saturation, brightness]; */ function hsbtorgb(hue, saturation, brightness) { var r, g, b, i = Math.floor(hue * 6), f = hue * 6 - i, p = brightness * (1 - saturation), q = brightness * (1 - f * saturation), t = brightness * (1 - (1 - f) * saturation); switch (i % 6) { case 0: r = brightness; g = t; b = p; case 1: r = q; g = brightness; b = p; case 2: r = p; g = brightness; b = t; case 3: r = p; g = q; b = brightness; case 4: r = t; g = p; b = brightness; case 5: r = brightness; g = p; b = q; return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]; function rgbtohsb(r, g, b) { var min, max, hue, saturation, brightness, delta; r = r / 255; g = g / 255; b = b / 255; max = Math.max(r, g, b); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 191

193 min = Math.min(r, g, b); brightness = max; delta = max - min; saturation = max === 0? 0 : delta / max; if (max === min) { hue = 0; achromatic else { switch (max) { case r: hue = (g - b) / delta + (g < b? 6 : 0); case g: hue = (b - r) / delta + 2; case b: hue = (r - g) / delta + 4; hue /= 6; return [hue, saturation, brightness]; function range(value, limit) { return (value < 0? 0 : (value > limit? limit : value)); function darker(color, fraction) { var red = Math.floor(color.getRed() * (1 - fraction)), green = Math.floor(color.getGreen() * (1 - fraction)), blue = Math.floor(color.getBlue() * (1 - fraction)); red = range(red, 255); green = range(green, 255); blue = range(blue, 255); return new RgbaColor(red, green, blue, color.getalpha()); function lighter(color, fraction) { var red = Math.round(color.getRed() * (1 + fraction)), green = Math.round(color.getGreen() * (1 + fraction)), blue = Math.round(color.getBlue() * (1 + fraction)); red = range(red, 255); green = range(green, 255); blue = range(blue, 255); return new RgbaColor(red, green, blue, color.getalpha()); function wrap(value, lower, upper) { var distance, times; if (upper <= lower) { throw "Rotary bounds are of negative or zero size"; distance = upper - lower; times = Math.floor((value - lower) / distance); return value - (times * distance); function getshortestangle(from, to) { return wrap((to - from), -180, 180); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 192

194 shim layer var requestanimframe = (function () { return window.requestanimationframe window.webkitrequestanimationframe window.mozrequestanimationframe window.orequestanimationframe window.msrequestanimationframe function (callback) { window.settimeout(callback, 1000 / 16); ; ()); /* function blur(ctx, width, height, radius) { This function is too CPU expensive leave disabled for now :( Cheap'n'cheerful blur filter, just applies horizontal and vertical blurs Only works for square canvas's at present var j, x, y, loop counters i, end, totr, totg, totb, tota, Create a temporary buffer tempbuffer = createbuffer(width, height), tempctx = tempbuffer.getcontext('2d'), pixel data inpix, outpix, mul, indx; ctx.save(); for (j = 0; j < 2; j++) { Get access to the pixel data inpix = ctx.getimagedata(0, 0, (j === 0? width : height), (j === 0? height : width)); outpix = ctx.createimagedata((j === 0? width : height), (j === 0? height : width)); if (j === 0) { Horizontal blur if (radius >= width) { radius = width - 1; else { Vertical blur if (radius >= height) { radius = height - 1; mul = 1 / (radius * 2 + 1); indx = 0; for (y = 0, end = (j === 0? height : width); y < end; y++) { totr = totg = totb = tota = 0; for (x = 0; x < radius ; x++) { i = (indx + x) * 4; totr += inpix.data[i]; totg += inpix.data[i + 1]; totb += inpix.data[i + 2]; tota += inpix.data[i + 3]; for (x = 0; x < (j === 0? width : height); x++) { if (x > radius) { i = (indx - radius - 1) * 4; totr -= inpix.data[i]; totg -= inpix.data[i + 1]; totb -= inpix.data[i + 2]; tota -= inpix.data[i + 3]; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 193

195 if (x + radius < width) { i = (indx + radius) * 4; totr += inpix.data[i]; totg += inpix.data[i + 1]; totb += inpix.data[i + 2]; tota += inpix.data[i + 3]; i = indx * 4; outpix.data[i] = (totr * mul) 0; outpix.data[i + 1] = (totg * mul) 0; outpix.data[i + 2] = (totb * mul) 0; outpix.data[i + 3] = (tota * mul) 0; indx++; Write the output pixel data back to the temp buffer tempctx.clearrect(0, 0, width, height); tempctx.putimagedata(outpix, 0, 0); if (j === 0) { Clear the input canvas ctx.clearrect(0, 0, width, height); Rotate image by 90 degrees ctx.translate(width / 2, height / 2); ctx.rotate(half_pi); ctx.translate(-width / 2, -height / 2); Write the buffer back ctx.drawimage(tempbuffer, 0, 0); ctx.translate(width / 2, height / 2); ctx.rotate(-pi); ctx.translate(-width / 2, -height / 2); Clear the input canvas ctx.clearrect(0, 0, width, height); ctx.drawimage(tempbuffer, 0, 0); ctx.restore(); */ **************************************** C O N S T A N T S *************************************************** var BackgroundColorDef; (function () { BackgroundColorDef = function (gradientstart, gradientfraction, gradientstop, labelcolor, symbolcolor, name) { this.gradientstart = gradientstart; this.gradientfraction = gradientfraction; this.gradientstop = gradientstop; this.labelcolor = labelcolor; this.symbolcolor = symbolcolor; this.name = name; ; ()); var LcdColorDef; (function () { LcdColorDef = function (gradientstartcolor, gradientfraction1color, gradientfraction2color, gradientfraction3color, gradientstopcolor, textcolor) { this.gradientstartcolor = gradientstartcolor; this.gradientfraction1color = gradientfraction1color; this.gradientfraction2color = gradientfraction2color; this.gradientfraction3color = gradientfraction3color; this.gradientstopcolor = gradientstopcolor; this.textcolor = textcolor; ; ()); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 194

196 var ColorDef; (function () { ColorDef = function (verydark, dark, medium, light, lighter, verylight) { this.verydark = verydark; this.dark = dark; this.medium = medium; this.light = light; this.lighter = lighter; this.verylight = verylight; ; ()); var LedColorDef; (function () { LedColorDef = function (innercolor1_on, innercolor2_on, outercolor_on, coronacolor, innercolor1_off, innercolor2_off, outercolor_off) { this.innercolor1_on = innercolor1_on; this.innercolor2_on = innercolor2_on; this.outercolor_on = outercolor_on; this.coronacolor = coronacolor; this.innercolor1_off = innercolor1_off; this.innercolor2_off = innercolor2_off; this.outercolor_off = outercolor_off; ; ()); var GaugeTypeDef; (function () { GaugeTypeDef = function (type) { this.type = type; ; ()); var OrientationDef; (function () { OrientationDef = function (type) { this.type = type; ; ()); var KnobTypeDef; (function () { KnobTypeDef = function (type) { this.type = type; ; ()); var KnobStyleDef; (function () { KnobStyleDef = function (style) { this.style = style; ; ()); var FrameDesignDef; (function () { FrameDesignDef = function (design) { this.design = design; ; ()); var PointerTypeDef; (function () { PointerTypeDef = function (type) { this.type = type; ; ()); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 195

197 var ForegroundTypeDef; (function () { ForegroundTypeDef = function (type) { this.type = type; ; ()); var LabelNumberFormatDef; (function () { LabelNumberFormatDef = function (format) { this.format = format; ; ()); var TickLabelOrientationDef; (function () { TickLabelOrientationDef = function (type) { this.type = type; ; ()); var TrendStateDef; (function () { TrendStateDef = function (state) { this.state = state; ; ()); ************************* I m p l e m e n t a t i o n s o f d e f i n i t i o n s ************************ var backgroundcolor = { DARK_GRAY: new BackgroundColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(51, 51, 51, 1), new RgbaColor(153, 153, 153, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'DARK_GRAY'), SATIN_GRAY: new BackgroundColorDef(new RgbaColor(45, 57, 57, 1), new RgbaColor(45, 57, 57, 1), new RgbaColor(45, 57, 57, 1), new RgbaColor(167, 184, 180, 1), new RgbaColor(137, 154, 150, 1), 'SATIN_GRAY'), LIGHT_GRAY: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'LIGHT_GRAY'), WHITE: new BackgroundColorDef(new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'WHITE'), BLACK: new BackgroundColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(150, 150, 150, 1), 'BLACK'), BEIGE: new BackgroundColorDef(new RgbaColor(178, 172, 150, 1), new RgbaColor(204, 205, 184, 1), new RgbaColor(231, 231, 214, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BEIGE'), BROWN: new BackgroundColorDef(new RgbaColor(245, 225, 193, 1), new RgbaColor(245, 225, 193, 1), new RgbaColor(255, 250, 240, 1), new RgbaColor(109, 73, 47, 1), new RgbaColor(89, 53, 27, 1), 'BROWN'), RED: new BackgroundColorDef(new RgbaColor(198, 93, 95, 1), new RgbaColor(212, 132, 134, 1), new RgbaColor(242, 218, 218, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(90, 0, 0, 1), 'RED'), GREEN: new BackgroundColorDef(new RgbaColor(65, 120, 40, 1), new RgbaColor(129, 171, 95, 1), new RgbaColor(218, 237, 202, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 90, 0, 1), 'GREEN'), BLUE: new BackgroundColorDef(new RgbaColor(45, 83, 122, 1), new RgbaColor(115, 144, 170, 1), new RgbaColor(227, 234, 238, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 90, 1), 'BLUE'), ANTHRACITE: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(250, 250, 250, 1), new RgbaColor(180, 180, 180, 1), 'ANTHRACITE'), MUD: new BackgroundColorDef(new RgbaColor(80, 86, 82, 1), new RgbaColor(70, 76, 72, 1), new RgbaColor(57, 62, 58, 1), new RgbaColor(255, 255, 240, 1), new RgbaColor(225, 225, 210, 1), 'MUD'), PUNCHED_SHEET: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'PUNCHED_SHEET'), CARBON: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'CARBON'), STAINLESS: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'STAINLESS'), BRUSHED_METAL: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BRUSHED_METAL'), BRUSHED_STAINLESS: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(110, 110, 112, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BRUSHED_STAINLESS'), TURNED: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'TURNED') Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 196

198 ; var lcdcolor = { BEIGE: new LcdColorDef('#c8c8b1', 'rgb(241, 237, 207)', 'rgb(234, 230, 194)', 'rgb(225, 220, 183)', 'rgb(237, 232, 191)', '#000000'), BLUE: new LcdColorDef('#ffffff', 'rgb(231, 246, 255)', 'rgb(170, 224, 255)', 'rgb(136, 212, 255)', 'rgb(192, 232, 255)', '#124564'), ORANGE: new LcdColorDef('#ffffff', 'rgb(255, 245, 225)', 'rgb(255, 217, 147)', 'rgb(255, 201, 104)', 'rgb(255, 227, 173)', '#503700'), RED: new LcdColorDef('#ffffff', 'rgb(255, 225, 225)', 'rgb(253, 152, 152)', 'rgb(252, 114, 115)', 'rgb(254, 178, 178)', '#4f0c0e'), YELLOW: new LcdColorDef('#ffffff', 'rgb(245, 255, 186)', 'rgb(210, 255, 0)', 'rgb(158, 205, 0)', 'rgb(210, 255, 0)', '#405300'), WHITE: new LcdColorDef('#ffffff', '#ffffff', 'rgb(241, 246, 242)', 'rgb(229, 239, 244)', '#ffffff', '#000000'), GRAY: new LcdColorDef('#414141', 'rgb(117, 117, 117)', 'rgb(87, 87, 87)', '#414141', 'rgb(81, 81, 81)', '#ffffff'), BLACK: new LcdColorDef('#414141', '#666666', '#333333', '#000000', '#333333', '#cccccc'), GREEN: new LcdColorDef('rgb(33, 67, 67)', 'rgb(33, 67, 67)', 'rgb(29, 58, 58)', 'rgb(28, 57, 57)', 'rgb(23, 46, 46)', 'rgba(0, 185, 165, 255)'), BLUE2: new LcdColorDef('rgb(0, 68, 103)', 'rgb(8, 109, 165)', 'rgb(0, 72, 117)', 'rgb(0, 72, 117)', 'rgb(0, 68, 103)', 'rgb(111, 182, 228)'), BLUE_BLACK: new LcdColorDef('rgb(22, 125, 212)', 'rgb(3, 162, 254)', 'rgb(3, 162, 254)', 'rgb(3, 162, 254)', 'rgb(11, 172, 244)', '#000000'), BLUE_DARKBLUE: new LcdColorDef('rgb(18, 33, 88)', 'rgb(18, 33, 88)', 'rgb(19, 30, 90)', 'rgb(17, 31, 94)', 'rgb(21, 25, 90)', 'rgb(23, 99, 221)'), BLUE_GRAY: new LcdColorDef('rgb(135, 174, 255)', 'rgb(101, 159, 255)', 'rgb(44, 93, 255)', 'rgb(27, 65, 254)', 'rgb(12, 50, 255)', '#b2b4ed'), STANDARD: new LcdColorDef('rgb(131, 133, 119)', 'rgb(176, 183, 167)', 'rgb(165, 174, 153)', 'rgb(166, 175, 156)', 'rgb(175, 184, 165)', 'rgb(35, 42, 52)'), STANDARD_GREEN: new LcdColorDef('#ffffff', 'rgb(219, 230, 220)', 'rgb(179, 194, 178)', 'rgb(153, 176, 151)', 'rgb(114, 138, 109)', '#080C06'), BLUE_BLUE: new LcdColorDef('rgb(100, 168, 253)', 'rgb(100, 168, 253)', 'rgb(95, 160, 250)', 'rgb(80, 144, 252)', 'rgb(74, 134, 255)', '#002cbb'), RED_DARKRED: new LcdColorDef('rgb(72, 36, 50)', 'rgb(185, 111, 110)', 'rgb(148, 66, 72)', 'rgb(83, 19, 20)', 'rgb(7, 6, 14)', '#FE8B92'), DARKBLUE: new LcdColorDef('rgb(14, 24, 31)', 'rgb(46, 105, 144)', 'rgb(19, 64, 96)', 'rgb(6, 20, 29)', 'rgb(8, 9, 10)', '#3DB3FF'), LILA: new LcdColorDef('rgb(175, 164, 255)', 'rgb(188, 168, 253)', 'rgb(176, 159, 255)', 'rgb(174, 147, 252)', 'rgb(168, 136, 233)', '#076148'), BLACKRED: new LcdColorDef('rgb(8, 12, 11)', 'rgb(10, 11, 13)', 'rgb(11, 10, 15)', 'rgb(7, 13, 9)', 'rgb(9, 13, 14)', '#B50026'), DARKGREEN: new LcdColorDef('rgb(25, 85, 0)', 'rgb(47, 154, 0)', 'rgb(30, 101, 0)', 'rgb(30, 101, 0)', 'rgb(25, 85, 0)', '#233123'), AMBER: new LcdColorDef('rgb(182, 71, 0)', 'rgb(236, 155, 25)', 'rgb(212, 93, 5)', 'rgb(212, 93, 5)', 'rgb(182, 71, 0)', '#593A0A'), LIGHTBLUE: new LcdColorDef('rgb(125, 146, 184)', 'rgb(197, 212, 231)', 'rgb(138, 155, 194)', 'rgb(138, 155, 194)', 'rgb(125, 146, 184)', '#090051'), SECTIONS: new LcdColorDef('#b2b2b2', '#ffffff', '#c4c4c4', '#c4c4c4', '#b2b2b2', '#000000') ; var color = { RED: new ColorDef(new RgbaColor(82, 0, 0, 1), new RgbaColor(158, 0, 19, 1), new RgbaColor(213, 0, 25, 1), new RgbaColor(240, 82, 88, 1), new RgbaColor(255, 171, 173, 1), new RgbaColor(255, 217, 218, 1)), GREEN: new ColorDef(new RgbaColor(8, 54, 4, 1), new RgbaColor(0, 107, 14, 1), new RgbaColor(15, 148, 0, 1), new RgbaColor(121, 186, 37, 1), new RgbaColor(190, 231, 141, 1), new RgbaColor(234, 247, 218, 1)), BLUE: new ColorDef(new RgbaColor(0, 11, 68, 1), new RgbaColor(0, 73, 135, 1), new RgbaColor(0, 108, 201, 1), new RgbaColor(0, 141, 242, 1), new RgbaColor(122, 200, 255, 1), new RgbaColor(204, 236, 255, 1)), ORANGE: new ColorDef(new RgbaColor(118, 83, 30, 1), new RgbaColor(215, 67, 0, 1), new RgbaColor(240, 117, 0, 1), new RgbaColor(255, 166, 0, 1), new RgbaColor(255, 255, 128, 1), new RgbaColor(255, 247, 194, 1)), YELLOW: new ColorDef(new RgbaColor(41, 41, 0, 1), new RgbaColor(102, 102, 0, 1), new RgbaColor(177, 165, 0, 1), new RgbaColor(255, 242, 0, 1), new RgbaColor(255, 250, 153, 1), new RgbaColor(255, 252, 204, 1)), CYAN: new ColorDef(new RgbaColor(15, 109, 109, 1), new RgbaColor(0, 109, 144, 1), new RgbaColor(0, 144, 191, 1), new RgbaColor(0, 174, 239, 1), new RgbaColor(153, 223, 249, 1), new RgbaColor(204, 239, 252, 1)), MAGENTA: new ColorDef(new RgbaColor(98, 0, 114, 1), new RgbaColor(128, 24, 72, 1), new RgbaColor(191, 36, 107, 1), new RgbaColor(255, 48, 143, 1), new RgbaColor(255, 172, 210, 1), new RgbaColor(255, 214, 23, 1)), WHITE: new ColorDef(new RgbaColor(210, 210, 210, 1), new RgbaColor(220, 220, 220, 1), new RgbaColor(235, 235, 235, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1)), GRAY: new ColorDef(new RgbaColor(25, 25, 25, 1), new RgbaColor(51, 51, 51, 1), new RgbaColor(76, 76, 76, 1), new RgbaColor(128, 128, 128, 1), new RgbaColor(204, 204, 204, 1), new RgbaColor(243, 243, 243, 1)), BLACK: new ColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(5, 5, 5, 1), new RgbaColor(10, 10, 10, 1), new RgbaColor(15, 15, 15, 1), new RgbaColor(20, 20, 20, 1), new RgbaColor(25, 25, 25, 1)), RAITH: new ColorDef(new RgbaColor(0, 32, 65, 1), new RgbaColor(0, 65, 125, 1), new RgbaColor(0, 106, 172, 1), new RgbaColor(130, 180, 214, 1), new RgbaColor(148, 203, 242, 1), new RgbaColor(191, 229, 255, 1)), GREEN_LCD: new ColorDef(new RgbaColor(0, 55, 45, 1), new RgbaColor(15, 109, 93, 1), new RgbaColor(0, 185, 165, 1), new RgbaColor(48, 255, 204, 1), new RgbaColor(153, 255, 227, 1), new RgbaColor(204, 255, 241, 1)), JUG_GREEN: new ColorDef(new RgbaColor(0, 56, 0, 1), new RgbaColor(32, 69, 36, 1), new RgbaColor(50, 161, 0, 1), new RgbaColor(129, 206, 0, 1), new RgbaColor(190, 231, 141, 1), new RgbaColor(234, 247, 218, 1)) Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 197

199 ; var ledcolor = { RED_LED: new LedColorDef('#FF9A89', '#FF9A89', '#FF3300', '#FF8D70', '#7E1C00', '#7E1C00', '#641B00'), GREEN_LED: new LedColorDef('#9AFF89', '#9AFF89', '#59FF2A', '#A5FF00', '#1C7E00', '#1C7E00', '#1B6400'), BLUE_LED: new LedColorDef('#899AFF', '#899AFF', '#0033FF', '#708DFF', '#001C7E', '#001C7E', '#001B64'), ORANGE_LED: new LedColorDef('#FEA23F', '#FEA23F', '#FD6C00', '#FD6C00', '#592800', '#592800', '#421F00'), YELLOW_LED: new LedColorDef('#FFFF62', '#FFFF62', '#FFFF00', '#FFFF00', '#6B6D00', '#6B6D00', '#515300'), CYAN_LED: new LedColorDef('#00FFFF', '#00FFFF', '#1BC3C3', '#00FFFF', '#083B3B', '#083B3B', '#052727'), MAGENTA_LED: new LedColorDef('#D300FF', '#D300FF', '#8600CB', '#C300FF', '#38004B', '#38004B', '#280035') ; var gaugetype = { TYPE1: new GaugeTypeDef('type1'), TYPE2: new GaugeTypeDef('type2'), TYPE3: new GaugeTypeDef('type3'), TYPE4: new GaugeTypeDef('type4'), TYPE5: new GaugeTypeDef('type5') ; var orientation = { NORTH: new OrientationDef('north'), SOUTH: new OrientationDef('south'), EAST: new OrientationDef('east'), WEST: new OrientationDef('west') ; var knobtype = { STANDARD_KNOB: new KnobTypeDef('standardKnob'), METAL_KNOB: new KnobTypeDef('metalKnob') ; var knobstyle = { BLACK: new KnobStyleDef('black'), BRASS: new KnobStyleDef('brass'), SILVER: new KnobStyleDef('silver') ; var framedesign = { BLACK_METAL: new FrameDesignDef('blackMetal'), METAL: new FrameDesignDef('metal'), SHINY_METAL: new FrameDesignDef('shinyMetal'), BRASS: new FrameDesignDef('brass'), STEEL: new FrameDesignDef('steel'), CHROME: new FrameDesignDef('chrome'), GOLD: new FrameDesignDef('gold'), ANTHRACITE: new FrameDesignDef('anthracite'), TILTED_GRAY: new FrameDesignDef('tiltedGray'), TILTED_BLACK: new FrameDesignDef('tiltedBlack'), GLOSSY_METAL: new FrameDesignDef('glossyMetal') ; var pointertype = { TYPE1: new PointerTypeDef('type1'), TYPE2: new PointerTypeDef('type2'), TYPE3: new PointerTypeDef('type3'), TYPE4: new PointerTypeDef('type4'), TYPE5: new PointerTypeDef('type5'), TYPE6: new PointerTypeDef('type6'), TYPE7: new PointerTypeDef('type7'), TYPE8: new PointerTypeDef('type8'), TYPE9: new PointerTypeDef('type9'), TYPE10: new PointerTypeDef('type10'), TYPE11: new PointerTypeDef('type11'), TYPE12: new PointerTypeDef('type12'), TYPE13: new PointerTypeDef('type13'), TYPE14: new PointerTypeDef('type14'), Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 198

200 TYPE15: new PointerTypeDef('type15'), TYPE16: new PointerTypeDef('type16') ; var foregroundtype = { TYPE1: new ForegroundTypeDef('type1'), TYPE2: new ForegroundTypeDef('type2'), TYPE3: new ForegroundTypeDef('type3'), TYPE4: new ForegroundTypeDef('type4'), TYPE5: new ForegroundTypeDef('type5') ; var labelnumberformat = { STANDARD: new LabelNumberFormatDef('standard'), FRACTIONAL: new LabelNumberFormatDef('fractional'), SCIENTIFIC: new LabelNumberFormatDef('scientific') ; var ticklabelorientation = { NORMAL: new TickLabelOrientationDef('normal'), HORIZONTAL: new TickLabelOrientationDef('horizontal'), TANGENT: new TickLabelOrientationDef('tangent') ; var trendstate = { UP: new TrendStateDef('up'), STEADY: new TrendStateDef('steady'), DOWN: new TrendStateDef('down'), OFF: new TrendStateDef('off') ; ********************************** E X P O R T F U N C T I O N S ******************************************* return { Components EXTERNAL : INTERNAL Radial : radial, RadialBargraph : radialbargraph, DisplaySingle: displaysingle, WindDirection : winddirection, Led : led, Odometer: odometer, Images drawframe : drawradialframeimage, drawbackground : drawradialbackgroundimage, drawforeground : drawradialforegroundimage, Tools rgbacolor : RgbaColor, ConicalGradient : ConicalGradient, setalpha : setalpha, getcolorfromfraction : getcolorfromfraction, gradientwrapper : GradientWrapper, Constants BackgroundColor : backgroundcolor, LcdColor : lcdcolor, ColorDef : color, LedColor : ledcolor, GaugeType : gaugetype, Orientation: orientation, FrameDesign : framedesign, PointerType : pointertype, ForegroundType : foregroundtype, KnobType : knobtype, KnobStyle: knobstyle, LabelNumberFormat: labelnumberformat, TickLabelOrientation: ticklabelorientation, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 199

201 TrendState: trendstate, Other Section : section ; ()); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 200

202 2.8 Windrose.js /*! * Windrose/Radar gauge for SteeelSeries Gauges v2 * Mark Crossley * Last modified : * Revision : */ /*global steelseries gauges RGraph */ /*jshint jquery:true */ var radar = (function () { Create some variables to hold references to the buffers var _bufferradar, _bufferradarframe, _bufferradarbackground, _bufferradarforeground, _ctxradargauge, _radarplotsize, _gaugesize, _gaugetitle, _compassstring, _firstrun = true, _canvasodo, _showodo, _gaugeodo, _odowidth, _odoheight, _ododigits = 5, Total number of odometer digits including the decimal init = function (size, showodo) { var div, ctxframe, ctxbackground, ctxforegound, offset = Math.ceil(size * 0.015), radarcanvas; _gaugesize = size; _showodo = showodo false; Create a hidden div to host the Radar plot div = document.createelement('div'); div.style.display = 'none'; document.body.appendchild(div); required Calcuate the size of the gauge background and so the size of radar plot _radarplotsize = _gaugesize * 0.68; radar plot canvas buffer _bufferradar = document.createelement('canvas'); _bufferradar.width = _radarplotsize; _bufferradar.height = _radarplotsize; _bufferradar.id = 'radarplot'; div.appendchild(_bufferradar); Create a steelseries gauge frame _bufferradarframe = document.createelement('canvas'); _bufferradarframe.width = _gaugesize; _bufferradarframe.height = _gaugesize; ctxframe = _bufferradarframe.getcontext('2d'); steelseries.drawframe(ctxframe, gauges.gauge.framedesign, _gaugesize / 2, _gaugesize / 2, _gaugesize, _gaugesize); Create a steelseries gauge background _bufferradarbackground = document.createelement('canvas'); _bufferradarbackground.width = _gaugesize; _bufferradarbackground.height = _gaugesize; ctxbackground = _bufferradarbackground.getcontext('2d'); steelseries.drawbackground(ctxbackground, gauges.gauge.background, _gaugesize / 2, _gaugesize / 2, _gaugesize, _gaugesize); Optional - add a background image if (g_imgsmall!== null) { var drawsize = g_size * ; var x = (g_size - drawsize) / 2; ctxbackground.drawimage(g_imgsmall, x, x, drawsize, drawsize); Add the compass points drawcompasspoints(ctxbackground, _gaugesize); Create a steelseries gauge forground _bufferradarforeground = document.createelement('canvas'); _bufferradarforeground.width = _gaugesize; _bufferradarforeground.height = _gaugesize; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 201

203 ctxforegound = _bufferradarforeground.getcontext('2d'); steelseries.drawforeground(ctxforegound, gauges.gauge.foreground, _gaugesize, _gaugesize, false); 'px', odometer ;) Get the context of the gauge canvas on the HTML page if ($('#canvas_rose').length) { radarcanvas = document.getelementbyid('canvas_rose'); _ctxradargauge = radarcanvas.getcontext('2d'); resize canvas on main page radarcanvas.width = _gaugesize; radarcanvas.height = _gaugesize; add a shadow to the gauge if (gauges.config.showgaugeshadow) { $('#canvas_rose').css({ 'box-shadow': '#888 ' + offset + 'px ' + offset + 'px ' + offset + ); 'border-radius': Math.floor(_gaugeSize / 2) + 'px' Render an empty gauge, looks better than just the shadow background and Paint the gauge frame _ctxradargauge.drawimage(_bufferradarframe, 0, 0); Paint the gauge background _ctxradargauge.drawimage(_bufferradarbackground, 0, 0); Paint the gauge foreground _ctxradargauge.drawimage(_bufferradarforeground, 0, 0); Create an odometer if (_showodo) { _odoheight = Math.ceil(_gaugeSize * 0.08); Sets the size of the odometer _odowidth = Math.ceil(Math.floor(_odoHeight * 0.68) * _ododigits); 'Magic' number, do not alter Create a new canvas for the oodometer _canvasodo = document.createelement('canvas'); $(_canvasodo).attr({ 'id': 'canvas_odo', 'width': _odowidth, 'height': _odoheight ); Position it $(_canvasodo).css({ 'position': 'absolute', 'top': Math.ceil(_gaugeSize * $('#canvas_rose').position().top) + 'px', 'left': Math.ceil((_gaugeSize - _odowidth) / 2 + $('#canvas_rose').position().left) + 'px' ); Insert it into the DOM before the Radar gauge $(_canvasodo).insertbefore('#canvas_rose'); Create the odometer _gaugeodo = new steelseries.odometer('canvas_odo', { height: _odoheight, digits: _ododigits - 1, decimals: 1 );, _firstrun = false; /* Just draw an empty gauge as a placeholder when the page loads NOT currently used drawwindrose = function () { if (_ctxradargauge) { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 202

204 Paint the gauge frame _ctxradargauge.drawimage(_bufferradarframe, 0, 0); Paint the gauge background _ctxradargauge.drawimage(_bufferradarbackground, 0, 0); */, Paint the gauge foreground _ctxradargauge.drawimage(_bufferradarforeground, 0, 0); Redraw the gauge with data dowindrose = function () { var radar, offset, data; if (_ctxradargauge &&!_firstrun) { data = gauges.getwindrosedata(); Clear the gauge _ctxradargauge.clearrect(0, 0, _gaugesize, _gaugesize); Clear the existing radar plot _bufferradar.width = _bufferradar.height = _radarplotsize; Create a new radar plot radar = new RGraph.Radar('radarPlot', data); radar.set('chart.strokestyle', 'black'); radar.set('chart.colors.alpha', 0.4); radar.set('chart.colors', ['red']); radar.set('chart.title', _gaugetitle); radar.set('chart.title.size', Math.ceil(0.05 * _radarplotsize)); radar.set('chart.title.bold', false); radar.set('chart.gutter.top', 0.2 * _radarplotsize); radar.set('chart.gutter.bottom', 0.2 * _radarplotsize); radar.set('chart.tooltips.effect', 'snap'); radar.set('chart.labels.axes', ''); radar.set('chart.background.circles', true); radar.set('chart.radius', _radarplotsize / 2); radar.draw(); Paint the gauge frame _ctxradargauge.drawimage(_bufferradarframe, 0, 0); Paint the gauge background _ctxradargauge.drawimage(_bufferradarbackground, 0, 0); Paint the radar plot offset = (_gaugesize - _radarplotsize) / 2; _ctxradargauge.drawimage(_bufferradar, offset, offset); Paint the gauge foreground _ctxradargauge.drawimage(_bufferradarforeground, 0, 0);, update the odometer if (_showodo) { _gaugeodo.setvalueanimated(gauges.getwindrun()); Helper function to put the compass points on the background drawcompasspoints = function (ctx, size) { ctx.save(); set the font ctx.font = 0.08 * size + 'px serif'; ctx.fillstyle = '#000000'; ctx.textalign = 'center'; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 203

205 ctx.textbaseline = 'middle';, Draw the compass points for (var i = 0; i < 4; i++) { ctx.translate(size / 2, size * 0.125); ctx.filltext(_compassstring[i * 2], 0, 0, size); ctx.translate(-size / 2, -size * 0.125); Move to center ctx.translate(size / 2, size / 2); ctx.rotate(math.pi / 2); ctx.translate(-size / 2, -size / 2); ctx.restore(); settitle = function (newtitle) { _gaugetitle = newtitle;, setcompassstring = function (newstr) { var ctxbackground; _compassstring = newstr; if (!_firstrun) { get the background context ctxbackground = _bufferradarbackground.getcontext('2d'); Redraw the background steelseries.drawbackground(ctxbackground, gauges.gauge.background, _gaugesize / 2, _gaugesize / 2, _gaugesize, _gaugesize); ; Add the compass points drawcompasspoints(ctxbackground, _gaugesize); ()); return { init: init, dowindrose: dowindrose, settitle: settitle, setcompassstring: setcompassstring ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 204

206 2.9 Gauges-ss.css /* CSS for SteelSeries Gauges * Mark Crossley * v Jan 2013 */ body { font-family: Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: left; color: #585858;.content { padding-right: 10%; padding-left: 10%; margin-right: 15%; margin-left: 15%;.row { position: relative; text-align: center;.gauge { padding: 5px; text-align: center; display: inline-block; vertical-align: top; position: relative; input[type='radio'] { width: 15px; height: auto; position:relative; vertical-align: -5%; label { height: 15px; text-align: left; font-size: 9px; vertical-align: 15%;.unitsTable { display: table; margin-left: auto; margin-right: auto; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; background-color: #CCCCFF;.cellRight { display: table-cell; text-align: right; font-size: 9px; vertical-align: middle;.credits { font-family: Arial, Helvetica, sans-serif; font-size: 70%; font-style: italic; letter-spacing: { font-family: 'LCDMono2Ultra'; src: url('data:font/woff;charset=utf- 8;base64,d09GRgABAAAAACfoABAAAAAAgPwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABsAAAAcYArYUUdERUY Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 205

207 AAAGIAAAAHQAAACAAqAAET1MvMgAAAagAAABLAAAAYJT4XRdjbWFwAAAB9AAAATkAAAH6pXE4cWN2dCAAAAMwAAAAFAAAABQD bquiznbnbqaaa0qaaagxaaaczq+0l6dnyxnwaaae+aaaaagaaaaiaaaaegdsewyaaauaaaaeoaaac2blvbcpagvhzaaaizgaaaax AAAANgH3tINoaGVhAAAjbAAAACAAAAAkEykMq2htdHgAACOMAAAA3QAAAeod1CXsbG9jYQAAJGwAAADnAAAA+EvuZmZtYXhwAAAl VAAAACAAAAAgAasCam5hbWUAACV0AAABCAAAAeYnykPLcG9zdAAAJnwAAAEOAAAByGYnCSZwcmVwAAAnjAAAAFwAAABkC/ydrHja Y2BgYGQAgpOd+YYg+rTDln4oPQEAQ1oGkQB42mNgZGBg4ANiCQYQYGJgBMIqIGYB8xgACYgArQAAAHjaY2Bh6WecwMDKwMA6i9WYg YFRFUIzL2BIYxJiAAIWTgaswDGnpJjhAIPCbxa2tH9pDAxsjxmWAoUZQXJsaWxAEQYFBkYAGk8L9wB42mNgYGBmgGAZBkYGEPgC5DGC+S wmn4c0eymckcxeomsgwqddym8qyxdpumvqw7cayrxdzozdjmekxaoicpiksgpqcvokvgrxikopgh6z/p8p1ksa1kpoomfgcnstcnw ziweny5acg4iwui8mwi8lva/jh/9/9p/bv/7/2/+o/9v/d/xf/3/f/8x/er4kpih4epig6ihxa6chlg9e7wcrllgwqd1mimbky4brzgqc EkzoCoBBwsLKAFTGzsHJxc3DwMvHLyAoJCwiKiYuISklLSMrxyCvoKikrKKqpq6hqaWto6unb2BoZGxiamZuYWllzWDDYGtn7+Do5Ozi6ubu4 enl7epr5x8qgbqcehrgee6sa0vrbsjjkxkfeuailj47jy+fircivfrcxkhivaa2elgdaaaaaaaa+gd6apga/ad0apybewcbaq942l1ru05bqr DdDQ8DgcTYIDnaFLOZkALvhTZIIK4uwsh2YzlC2o1c5GJcwAdQIFGD9msGaChTpE2DkAskPoFPiJSZNYmiNDs7s3POmTNLypGqd2m956lzFkj hbonmm34npnpfgafs9y1grtrbiy02m3rlun2/j8fmnovogkb5z1vkq0bttqaw7bl/mj+d4t7/yzwhg5zmmp5azye9hmb8m25p8dwjw Xf9QV+xOlwNBoYU01Tc9cdUyv+W5lxtGbY2M5p3cCEiP5gGaGqtjUDTnzqkej6OYgly+WysDSamrD/JRHBhMl3VVC0zvnZwn+wsOtikSnPgA Q6wVZ6Ch+OjCYX0LYkyS0OEg9gqMULEJIdCTjl3sj8pUD6ShDFvktLOuGGtgXHkNTCozdMcvsxmU9tbhzB+EUfw3S/Gkg4+sqE2RoTYjlgKYA KRkFFVvqHGcy+LAbnU/jMQJWB5+u1fJwKtOzYRL2VtnWOMFYKe3zbf+WXF3apc50Whu3dVNVTplOZDL2ff4xFPj4XhoLHgzed9f6NA7Q2L Gw2aA8GQ3o3e/9FadcRV3gsf2W81s7EWAAAAAAEAAfAA942u1dD5Ab5XXfb3clrf7vrv7/O51Opzvbl5MwAh/rs7H5E5KCfSGuh3Ey4NiE uutoh6emf1xqpr7koilhp3ps6qrwntrleozhmf3pjaklyjrsdgk8ppvgqlsmtwmaejp/dvmu5/jkvvftrrsnk45zmpc0oxtb9+mtdrv633u/9 3vve9+JYZmDDMO9Zt/FcIyDWctUGYYZmuEJ4+WHVEdhhtARUYWCypyZ4Tkq50XNRoZmOPpMc5Ih5rLVRSkj5TJS5iB39fxN7Mr5N+275h 4/aNsC1+PIjfAg0PdwMn6mxlQ5eBeiigXVfUbzsmdVW+8ZSXNwZ1UeBwIM3KLqwrGPO6tJZEhdE39hw47ZIBMacvEqn1e9ebwNwTanekX NDb94sWbj3YEhVRBrDsEbwNusuUyJDyXsCd7mEFxury9v/Kgb40Rz2SRZ5RTVLWnEqSiqIFftrF9RFM3ngCMeBT5ebiTi4AIjEc54JDdWJqau GyyPD5aTm6d231wuwQ85TEKlUv0/Hma/wg6VSvNvPMywzM/5bdx2u52xMW7mMka1wWcuzrCEcYEihcuJ6qGadfKMA3TpJaBPRpI1zq7 g2wy2kiif5ojjz+ofvip1kgfsj94r/zr/6m/uu8/8bzp2xfw5w/dbqcf4pkemzmszluybuzizza4h32oqadc4jpkzqvdynvtq00utsc4s9dqc6jij OWEK7KhtFwycojYEtzEMwxzKBmE2BkV1BY77Qdhf0FbAryFRXYWiPBweFrUROEWBoSKqa1G8Bl6ypqCtZc9q1xnTd+fszfr02fOqM6/aRc3 FzeHbObi5xlG1P68O59V+UVsBkwoXHrJZDq7Jq0peXSNqa+GgAu8Kv/rFWq5/CKZ5hVgbXDEMA5CsMiV5lLAbRbvD6erPDa5YNTScXzOirM 23/FBLcNgluWpjPTD3qkva6OI5AYwlGIon+iOK2i+rYUV1SmpM0Vbl4JXJbARfOSRV/X0rcbRCrg1EC5fhiwelakb8AArzclUKXImjNZK6WtFGh mf+e6+a52uljc5uwr68enxouvv4kijxe66+bl7kagjakms2/8prlgeljt6gz93h2ebh9rvxrd9wduqtck3ifobqgf62mqmmyljosdec/xwzh Diy3EgGHgdhYLFf+oJsguBYNzIPX57kp+3K9LhS2Vre+sCfb50o16/zVLZMTm8RpskL41R29boyHBeUysS6smd6y+7KltxoeUKZHuanx/kyEVKl UqrEFckXwQ92PDw/Wjp4sATPS/rDwwcP/vIJ/VjzRX44WN9iSPkTyVIpWWIIOcbfwM7YPWDPKfQadBknIpEd/UXj+LOagwIPoXdPjiWnx5PT /KvfLJW+uQ9cgTkHmLPD8AeJiTD/wFQlijpR0+RrvNMhDGkMWCpT0Hiw1FirpTLUUhlR4y2W+snZATjqBnGNMA4daDjeCQOQ2E2JCyVVeE HvZ3s/m7X7JFlR7UoVXogjl8KcYAjHo1maJkhqhLO7msaIOGADW1R5qcq6JbQgpzwjeH2iDHMOHz1Bio0J1ec6QB/P3bR3jzIdv2lq9+iRsSllcl rzvl43xh4lapvzd0pmq2wgtb1/fipo3nywjgygpl3obkboame0eohmdavazx7qmaegirad/ehsdbrophk1lfc9oiacc4zelwcz6mwj1rye AGhIFGt+uNYQSmRTEkZJFV5g0ZmsVOGFOAqDzjxevygHQuGmzrx+OdzQWcAjyTMOl5uT0EFEqSr4qIuGZM0ZpIi6gTT1BJorGvrLniuPTpTX bztwxsvklanh7r9pygwusonbkqkhnnz989817hb+u6avmslu4bk80ndxryi+ixtfu4dvglxugioxzxz68+dlvjwa9yeerrmvp4vgno9zdqfh T6dVYyEcaR6IP9S2i+DV9GZ1jx2kEjISGDkauvH2yIHR4NHPB4/mAgeyod/7dKTI7jhw7eMF4n2icPTZo9cfePto4YnLYF4PkoPcN/i3GveZpfcZL moeakka3htecqmrfg9bwvfwvrtrcyu+6ndwcprw5pthz0qqu8ovyykvyujfqyxuyz85um/f0x3smidkpsf2owojxrfy6oib9hxyenxjlw O+1vBlG9UFxzMJ0IWdurMNZsNBDq0pTwb2kgfoFQh5EsDvWTjfggXudligB0rypDg9Lk7vx6nDG2Av/gQm646GXVOOg4EXwy2clR0hRc5JA qtoihipmd4/wd9enh0kex7rqd/9nrup/rp5h3dricrg356fgxptf9+f691q8zmukywp6fgc1zyrrgpaaknrf0elch8imbgteyiprgxgwk5uns bxcrq0j4ciahmjobrfq0mqxus1b8d9ieyiagbhazcnc1og2ffuwablrtboxs3k1agiv55tmyjcag45qazn1glrnaysyi2rzoishlpshxkisiak RWOJZE8609cxyrYCGwdm56VRFxxeiwJG1nxiIAIOofXEgIT5FTUtaamwgmGvGoxn8aSEpIV6MVh6JbxiCkQRqca641n0/gBcshct2Rr3aDDM BOgjschdENFGp1yjU+NK+ZYKeWFiqn7DtjL5q92V+g1kWClPGgenidAavyDIWSBi4THgvjHAVAVshWdcjMh8mam6qPVJBdVzRvPxBvESYOD GgR+MWTZm9BOzogmpPtV2ktd8ZM6nOk/yqg3mx+YB3TvFmuD0wQAkblPiRwl7wmYXnG6Pz9/ASs3mNKbAjVPAuUBhHkllkfJqDhGe+SX Vq+hBlXPo7EB/JDH5Z8P7hC2VybFp5+bp3Zun+YdKp+sv3HXho+zV+/bNv1niXmFXAC5+Zx/4xzvgH3voZxYYH2Wjvcy/6bEE3PysGixQKhova GF0k0zDTcD8k2D+PWjphplrfYY2ds7GdG0Q0AYD2uDsoA3+JAaXVfqRRF7tyYOPUKvuoTbO0jCL1thUA8MbauAIhAu70+3zo8EkgPE5PF5RC grd4bjosidrgeedlyncnnvl4vkmgupymcw1llvdhh8ayljw3ck0tue0jpllrhrwolsbz7g21cfku0frpynj8vkbfy7wlql+amiavdqxxb/epz vd9asyftmvjz0gjnrr/rfnz9uupasofpdjo+ofne3lxsig6w0lsoicowked6laacldaiqetfeycvyvub1hqjgaacanceoirvyyjgmfrcet3youch 7VLItw8hyqOga/ZLEWkGNgfGGxFgonYACSqClJooQ9gWEbcWEBFgRkcG5RUaOY6YEmY7IWQbMMSzUh6E/hJGDsjqOXY3BSARCotwdB35 rddzk4glg96dbciuewp8m74mgucohfgkbdh5sij4yx6yvyc4r4cox1mcflrqcf/1sriw26mlhzch6uboqadoiy31bvddheg0vjuudhwoqyo EyqX1TDOJbhuFygswCiEIoCOCMFLcQ1idX47McauM41cB2uSxDXd85GKa43WRensy74tQyyxW70oH+00qrG/PDgITXWZnfjTHCS6gD1A8c C/qrKEmUKNFOp+pzIs7SwH44FYa5wZqo2Sr6Qp+opR3NedElqfWViY9k1TV4Eu7+WlMYqE2NT7s1T42Nl7iXyMqj9GpodzH9DT6dL3EtmX m2/ebbm4k46f4irosz8i6mkapmebrhaxfwlohy0yey40wlf1agmtel+nuythpnxqozve7eouvwpdgjaj1ubwvv7oc1xu7ojnuszm4cbt EgmlgQiPhNLPCLGLQNLgOMYWOKiWGKmdI2oxWVsC4w7YitDzpW6563RP7uZJmj1G0KcWv/3+jXfKgOklOvXkEMUSoy0jK1yiQv123XWb 981t9DQgdcwOdDpcAuvuX0Rr1FTyBZ1eoOZFLc4k0LaAcihZWBocpcGUdk+y7USFbtOVOxzjaOoWiAqoNa+BlF5YcOt7/7y15F66UaPRKWV pcyrgwgxkjch60lyiblfcy8epcvgcspnywn90nnbfzwz6qucjcoriqy/ac6ibslgf6y7f50llgkbejtwpk6jydbjzo3df8/ovhim0u/dn2okgot cvsyvj1fq12f6pjknrgvoffk+qfzpxjmjb9aurm0xwzdnucac9+vsuifoms44jazwdo6brrvlvhdhkcobdzcsgbxqoe0o7cvwp0pl9p2j8nys vjl8yxb0o5dnc/ov6aj67dpkw/wpy63k0y4/mytjtbolrfpviprca0tclkr9ombyvuzub3gca3mugeuurhpdapeg+xxs2oegcbdahphuew vpnhwm+srapm9ql/sbkhuosrbpte8sw70nkw5yz5nja5eolrmogtz22i9pqcgx1zyszzmk2m0t3htaqrutlhhqfpltzc324nfqt5ow0j5acx 1icDuC7UH7BZiyXwLRbmPGlhDdGcPcaFmOJiPqlKKxVtOpJTNpwLUo2AhkyEmuPYYtDspLJFvNUsgyMqoqvMCCYT1KFV6Ioz4Tw9olWqQ WS/T0NayEgOsC/IGNPMfaHG6PaSbA9IF21QQXTbPALGZ8YthJTSQp1YJxv4FgRo5FuVZKZ19VG03AqFlQLmzG+LY20Kix5Cg83WKgFfDdFzF ICWXyNUCxD5K8cnjvWBlmf/fYAxD/O076wioM5PfkEXh4nbueznnOrFk1CuuBNoX1nKWuQR4JlMfFykqxMhEAGvjQQ6USe6NRPGDJvRcPs N+Fa2P+1ssQLOjAZQWe8fBINIY0gV7WRi9LqxfGVe8twvWel6fGxWm9kkFe0y/Kkl3MDPsjW5XeL16zcavuNrdKRiA6ZDksUjjIrvSxTVcFj6bJ 6tBVFfaW0z+p72U/c5p8qb73JwzLHANAn+G+RK+btGQBJpo3Sh46X9Zn6BiQhclK/RqX4Y14j1zOqN1c4r3mYLYdBOJZwJElu66qHEvXX7/zq udx0sdmyigfnk5v5x4gb+rbt8pvdso9vkt9fneeqkyc+uum6styyyvgtrm12vge0lecyoavtqi8zqys5fqrwkcglqxdwhhzqfoyp8nuwp FYXKdh4bjhCz4w4hM24nAKHr+IWBbxQgbIS3IwhMYeAxgNcAnKzWxAFo47PH4pSIv/RFKjtCqmK85cDQpY6uiHp8gL279Qv2NLebJy/WB5 cnd6njx8ahnr5mgx71fkeav3l38pllgmsh49wikdzp/bg4he9os/aowab8gur+jzqkakbacrqyhbqr9mcgn1clpqmcnz6edd/md2is4qdt ssu1watiyy60zveaexq9971pnicarxjgwuohoqzag7efscek3w6ogikwga8huawpoy9nxeqcq/s8aka6bezromfc2rk60asc0kg9u5966xsr DpEJA4sULJ2/VOk7wlNh/Zu7MirK3svumhEvvMfsx31rPpfcjgXA38E9mh/fNbSxQf981/j6F8Cn7x99B6i5PxMQEmxqSZHPkTS8UFsvkQBQL VX9StZ4AWoDJgJVkzG0rBII6DHo5WGnuNJT9tsJkiuT2YInncRopkxEEfrtcyJyG/pAWZhk/G82o2r8ZFuOKcmhW1DEcZvqNpPW7Tejy69bhM Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 206

208 irclcawwmnhgz0mpniwmqnjrsvpraubjtpipc83hgymvmioptcxljsdspb2zbh+lmrzxj1pmjbehe4kqaq+khqwfzntaviibeporhjpcstak PjQFOxYk0ooWiqFJ+JJ4VHNDOgxGahgE1oIcBHO4QHtelL5n712j9XMkSb62uzL/7D1vrD0ssM9jPejUFCRxmBcfwipF2b2uPLmu7OMSQO3r vzgp9rces5wh2+bwllgzafurzs63r1uvtoy4hu0spoetsyuxqizf6rjyvfdksmsp+hg0nkxnwovbxfbfybq09avq16yh90cutrlo6jgplcogs 1i0G+anxtnKEgtqv3yC5tzmeqa9nY+Suy0eanHNXuqaCXBN8MhaNJWA6QhytGwKVBR99lfzxmBeTeXVoAhXmVNTopa4RG+EU2uhYEKH8E g0puvipqqhjus4yxxoxvfcqcljoqo3hdqyiktrsvscdknlpxykxhtasp9eeiiolmtqakjsvqyncytomww4zwxmxsj0xy2ryq4+awwonb2r FJQjwE7RC8f2dvDCNuTUxqyGec8s8L+LnfPcns5r0+nO2anFCfWg/r46Ybu6iO6HEGqNFMG9/HLH6k1771IqiU2AdofHdKf7oGeKfAhi5FchU XyRlsjfo8KBtdpBeBiy6P2nBo9qIVHL6AbYOZtYoh6wY1Z+vzTeiboYqEe1jPqmWh7pwEcGd+zdMzZtB/2OHhFBr5CCPW83UrAm7dDV2qAd kfchqz/rlfpmmhlyrzs40rckkwxwrvwcbronkljqcd3umr2aktauupseopa9hfd79mlfx/kv1zpuxugiuolm/fa9442akp7ddcpolike0cvxg ugevzkltgwnrfosowam6md+afprbplejnmen+3ds5a6apzv6prwg05rux7d0tizq7/z+wnrsflwpeipmilzsajoz+/crm7wid8nhcihdy+ ImJnFUviDc2KsTNfCiRgck1l99cKCTUunFIYftVtBMlf3lpdSLGO5aamUAs7FURQCUpgGpKQ1pWhdplqYUgRC0eR7phRgHBIt8MoQoUS9AyU svyp+ff21xiwrrh4rtnh+rcxzgzvvso98cm9yrdhrmrg7ihlpoimnhxlwr8u1vpny+wdtcz/b9rhqulhqoqckdnfkk+tyzh8m2sbxs53ea AEkyPc5WjzVGzEt0+8wy61AQLzGdBs5onW6bfp025ZVC2UXgR5VqZ3ooYN3mKDm4iio6QWG5pr0jTeXxzfjghH2Xy5aImJ4yxqRbvPfadYBl 9XT1CC8bXuats/a3q+eJs0JBqWKkobGpIaaa2yaTWquFUUWVdwitvJuvuKbgrCJKeZ/rjv8wKaKMFYZ37HXWBTyYUFCMHmLYSmIF4trEUY3 mboulouovbcyxh6lyvou9a66hw6hpzwnpegcwscucojpuu52h8xy1omprxsf+htxzuv119nyh/fvt36qnd/zj+fjz3npvi3py3gc5s50i9/ mmzyulisossmylxohpkzympt8+mf3spf11mabc9dnhtmmsxdexuzsr45ipmcqulzokqoyhlkh9za1+lru3rn1ztmknt22rxpysm381qf0v ROmUemiwd9/ol2Sz7A2UJGdUuDcv6uGjZ2+ocwCYDjmyRLvYB+raNTE+tC05ld96X/UFodH/PEsHpc+Sp+vPnzpEP17d9bn5jS5DqwFX2Nrh Kl6T8b0jKQkuQparXR905BkTFbxAV2ltj0JSFVpCg4Nhp/l8fWkuuSx8cWmLqyZNkTf3Av154pXXW2/dUPnlJdaoGDnBLLNwtXcNa1sLd/0Uc6 JzBRCWz0xKwoBrWOWpSMnssF9S9zcIaWMYyKmoWHrJ0RU058uBmuuq76cElK2ot1RXbgh4guoZErjZwIlTQJL37x13U/MZqEnOGmgnuG wizoqtjenstlxodrqjhghznzbwldi1bzruvgxbyhaufnjwcv2n58g4tdiwxjmorzim3vxuxjduilvbjrek7ixbw5itzp4uwu9nc1lieamezw4v BnMLlxqUtcOQZv7mwFZFVHzYZzXgC3qi+viWFsKPDlcBExeGnRe+ms7erV0d2PnDXWNl+9xvKYYF9bhIr1Hoqci3wStwV0nD2lrq0uZL/cNvej yttx6wg/2lxdjgp09lxlunsuzjbfvg/amcza/1wpmxrwhq2ra9ahsptgu5gcyybmfuznpj9pf5djypq7cr4q5qw1lbtexugj8xtdcddgkj1x yoypaahuv0wyii13syalsmakkguliumcc6oskovtsbrinigbcjdzfjmgbjml/ohg10gpprmb1s7sd6jydgdebhxn0ebrvrrzacmsk/a0q BgRK6JEXBUiyTp0ogakDQhtxRKUNYYWSZUPD1Y3FCILQ8uLmwj0XvrXxYW9wvYF+MGkyGbDOSIF9uAR18reGAdK623FPWa3bPJgqW0dc ngkcyr6tyym9yl4jewtdrvadyskwu5aynwseonkhiekvqokyofvdjzgb/xwe+gikhi78dvjtazv6abiz0dccqxytchjdhe7f8x2ed595elmew Pts8/t63RJIK4Yt3/2Owp61uyp6zN1keDQGB/WB9dCsUGsgLtXxy6pH2Mzf5Fm04hbHPsidaWw3a7Dp1016Ek6w2GHdq3+uB1Zp9hTl+friY GVioL2rYgUptdpRCtsekQXLmaG1ypMz6zh2vB1sH2PVyLtwjeUtZrCq4KLpXoPYgwe9eT4aX3A7bt4DJXybAfcRs8nId51HcOvMFUfeiVQkHli 3pbSKigus7Qag3t+aP9IaLqp93TWMIR9d52bLQWC5gAaOFW5g+zBvweZsxLm9dpz7QTANopgkN5xZrHK5s7KQxJACXsCadLL9YsmD+/S6Lu IWJ7tOoFTQfpxgrNLuF0COCPuojoIqOLBLdkWrdYbCuzT0+U/+6BY9/sH5seHysLtC2dYtnBg7jub9S3GjZvu/gjsPldC/KkP7XWF3qW7M9tSZQ aveinrkmxo6/dlshvnrols1gu+z1lldpuordf3sfqjoozukuizhhdph2ss3lh4e20ur+zbfrfappht9fs3jeszd3qvksyueihu2sy/kbl/b8zypin afnywhkl4d7ddktajrxptz/kwujmfkrrjby1ef1iai7iccser8inmromopvhw+6ylcmddopiboo20nge8/ikilf/q/tru9lhigeua+4ailrtddui+p /7yeHb6xd2lCe3DX+5QIb+y1fP1reVJ3e+wb56BwxnjATy89df+DrZRN6+Y36U28/eaRQMurWj96N2VBM8XknvkzruAwwMhvVopIVSytK1I6 wx4bdbgcmdvjwuhd2/m/pdc9kd20bl6bifhpkaeerqufpxyyfohapvu3dr8yhv2eszgriid7slxcy2v33lpwodmkd3agcctl/sqeq+sudytl 5emX38jcyxcubY6ezjapbc+1hf/dAFdhib2ccvzL92rn7+3PzpC9z6c+zIhfnTNG6NwPsmGu9b1lcaLDXexvKJyl3eKO82LKsdlfjrkz++m1oWB67I ntrszjngjcwjhuvsc6q1vya1nf6ybbhhjrfchkoejo18xkc0ohbxg45e3qimxoynlsdvlu9lk21vruqp2r7xhfmnt2nfto8060+zt3xh/n7amqj8 tqxfpysx7tbrbigwcmeqxzcddf1lbzslfkdmzu5szc2uyywjcp33fv7dn63xlwkyc0/tj2uif3phvfrhnhxk7ns5+pv8p9hda+fiynr1fnzl06 Dspyx9NM8afu4uEDVIG2dCHftjDG62oD9mOY0vS3WYLWghW9xQxmhuGypEkgNUISN6B0qx0YHiJ9mn77l/j1L/KUltfdJVv/WuN5ESu4S3t jtatf4ebrlg0zdoxy4za3o41tzt7f64p1mhwr0rdyb9+fu5/btz+3+uftz2mbfnf1j/af2fitg/8zbtrp9/yfilr0j16vqgt58l9enyteotcjh4uvwj qnqsxjw3c2mtd7tnk2aaer8pkvfshrdy9olxsaypl4wxx93asctz1kf1gdxnzauluief4go5goqbbhjc9mlq15v10y7wxx9n66hyeo9d9yk kdc/9oy+ftw+nztha0yxvcyr54vkl38c96cwp+nypmudbfz1na24mcg+5salcn2hitl4bfrvb2fpe7dxt9up2e3w7vbrdxt1ur263v7fbq9vt1e3 26nZ7dbu9ut1e3W6vbrdXt9ur2+3V7fbqdnt1u+st3V7dLknp9up2e3W7vbrdXt1ur263V7fbq9vt1e326nZ7dbu9ut1e3W6vbrdXt9ur260dd Xt1u726/x97dVmiXHyEi9nfoffyPGNZvqpx1LcJ/h3vwqUsY+2aXfd+L2NlrMtYCoSC7ZXUdrD3MvsU6H5biR/VB5gyX7xorsXIdmY9fW58Fwo 8l/C5+X0d8FzG5+b3w8Bzkb7eyLnh+U3mc+Fe+y5xkMnyWxhGtONfbF8gv8aQ36T3tbIMhJ1TYOUr6HctEfrVU8YvovIFjcHvbtS/b9CmNwtf mqmdynexzkltjhknh36nvidrwe60gyfczzg+sw3u3ue/q/hdhzj++2gb5/i9tu4t5ch4df7hsfgm8nv4lf563pjbw/d6rmvzfl0e8e/h61q HQ8Z5l9P7x0Bzp/1OuH9GykgZ+51zn8f/9JxBSEA+Ts/5oHHOtaZcEKn8w61y9zP66417vLb1uOd2/bzFx/8H3PtrKXjaY2BkYGAAYikdjqJ4fpu vdpicdcbw2mhlbbj9/+h/zp4ktsdalgcde0guacgpc+oaaab42mngzgbge/w/mogb5+v/h/8f8cqxaevqqbuauwqh7njavzgxdgfbeib/ 5SJXqESj0JGrRFTiFaiuU6pEKfEISpXoNVRqhZfwBCpRiEQUgpZvdk/iCWzy5ZvNzN1MZqNUM3FyGylKDdfFjyh9g1sS3wOujWd4DmvyN3gRV /CJXAmqxBdch0bIW+ymMIEh92XmBfkzHEOdWS1IoBzuNov9z+p8/fGn/vJjZlUfX3Gc1TCfbOYmbGCbef+/vq4Tdur7ZTvy+3rFq0B+LBVO0t e5nur2uavogacyimkfy+b372k9h8wnw1s+7nqn7dt4px5h5j0yxacsjr993jtraaaaenpjygawgsinde+yfjhymnmy5zf/yjficwipypnfuo FNi+0B+zSOGE42LgYuK+4MniSeCTy7eJ7xCvDa8B7je8T/QWCL4AahHGER4S8i30TzxHjENoi7SHhJukjFSVvIVMmmyHnI3ZO/p5CkmKG4REl IKULpjjKDco3yHJUdqsfUutTbNJw0Xmme0jqj7aL9SKdNV0pPQV/KwMSQzyjA2MpEzmSL6RYzC3M78yrzFxZ6FiuAcIPFDosDFicsLljcsXiBHV pywapz6lmawdpz+gfhmgucegzzvli2we6wxgc5aqcjg07baaabaaaaewbcaaoaqgalaaiaaqacabyaaaeaaeeaawabenp1kl1oak EUhb8FJEBhYWWs5gn4CTSWRCMW2Ag8wBIW2AR3kV0ldNY+ga9A61P4TFaeGYaAJGRy5565P+fcuUCFKUWCUhVYyXY44FKvHS5Q48Pjo ukfhpe44cvjcx759rjmnb8e/5aev9yrsmqjxpgzc3imw1mlw3cmy2una0jeecniodez/izevqsmznqv6wrb3iepc69ippj/1z1rzv+a9zyp1 /ap1jmrg7jwfqwf23h+umwo6roozdk3/a++ppwmzs6lbnumhwk1zz2j3zsemrrbus/nmrrd7lj3sxjnfrritnyj4w8vtz7yd3uod57mz eta9ytsu/td6/7ls+/gegfuq3enptztdoaweuhoh/owbwxjmcri7rxueylwxyzknunhruxierwavoikkdk3echpe+okyafd0mdmr5/mkq/ 3JTreDAiQs3Hrz48BMgSIgwEaLEiJMgSRPNtNBKG+100EkX3fTQSx/9DFTXhxhmhFHGGGcCgxQmFmkyZMmRp8AkU0wzwyxzzFNigTIVFlli mrvwwwoddtbzypsddtljnwmooekye04545wlcxantngjm3seezi68ui9nihxfokxgaqlji0888i7r7zxige++jqitxkvmmqliunp9dwlyrq N25KpWmrhV9MwDDWlmqqlptWMmlVzal792yvamhXbTM2y/lRK9k9VU7XU9A+wf0x3AAB42tvB+L91A2Mvg/cGjoCIjYyMfZEb3di0IxQ3 CER6bxAJAjIaImU3sGnHRDBsYFRw3cCs7cK4gQnC2MCs4LqLgYmJgYFJeyOzWxlQhAUiYggXidwgog0AKqkcQA==') format('woff'), url('../font/lcdmono2ultra-webfont.eot'), url('../font/lcdmono2ultra-webfont.ttf') format('truetype'), url('../font/lcdmono2ultra-webfont.svg#lcdmono2ultra') format('svg'); font-weight: normal; font-style: normal;.ddimgtooltip{ Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 207

209 z-index: 2000; box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/ border-radius: 10px; display: none; position: absolute; border: 1px solid black; background: white; color: black; padding: 0 7px 3px 7px; font-family: sans-serif; font-size: 10px;.tipinfo{ text-align: left; padding: 3px 0 3px 2px;.tipimg{ width: 638px; height: 250px; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 208

210 3 Gaugess 2 vers.2.0. beta-4a Bron: Intall read-me SteelSeries JavaScript gauges ============================= Created by Mark Crossley July 2011 Version 2.0.0beta4 Updated: 30 September Some brief notes for Cumulus users: 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 = <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. 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, 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". Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 209

211 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 "relatimegauges.txt" 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 "<path to cumulus>\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 gauges page on your site, the new page will direct 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 do this in the HTML file itself. In the header section add the following code: <noscript> <meta http-equiv="refresh" content="3; url=index.htm"/> </noscript> 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 19 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 laguage), and editing all the strings. The zip file contains a language.js file with English, French, German, Dutch, Swedish, Danish, Finnish, 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 dymanically, 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 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 texts of the message are being supplied by your weather station/software. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 210

212 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 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 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 %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 gauage 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! 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 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 Farenheit 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. Release History Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 211

213 ======================= * Much of the code rewritten and/or reformatted - Most things now contained in a 'gauges' object to avoid polluting the global namespace with numerous variables etc. - Load orders changed to speed up page load/display * Updated gauges.js - Added ability to select the display units: Temp: C, F Rain: mm, inch Wind: km/h, m/s, mph, knots Baro: hpa, mb, inhg, kpa - Added (optional) cookie handling to preserve end user unit preferences across sessions - Added variables to set the default min/max values for gauges - Changed the temperature gauge scaling logic so both gauges always use the same range (except for the indoor temperature) - Default units are now 'metric': C, mm, hpa, km/h - Fixed bug in getord() routine - Added config.dewdisplaytype setting to control initial 'dew' gauge display * 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 - Added todays dominant wind direction * Added Danish and Italian translations * Changed gauges-sst.html to use <div>'s for the layout rather than tables. * Removed ddimgtooltip.css - now incorporated into gauges-ss.css * Removed ddimgtooltip.js - now incorporated into gauges-ss.js * Removed tween.min.js - now incorporated into steelseries.min.js * Updated realtimegaugest.txt and ccrt.txt files to ver8 - added dominant wind direction * Updated steelseries.js - Updated to v * Combined JQuery, SteelSeries, and Tween files into a combined libraries.min.js file * Updated languages.js - Added Danish translation - thanks Henrik - but no template HTML file - Added Finnish translation - thanks Timo * Updated gauges.js - Fixed the humidty graph being downloaded every realtime update. * Added gauges-sst-fi.htm - Finnish translation * Updated gauges.js - Fixed last rain date calculation - Added g_weatherprogram variable to indentify Cumulus or Weather Display - Added g_tipimgs array for WD using wxgraphs - Fixed temperature gauge not displaying temperature range colour sections on range change. - Fixed WD baro pressure trend - WD is supplying a 3 hour value, so needed to be divided by 3. - Added localisation of baro trend text - Added extended temperature trend strings "slowly/quickly/rapidly" - Added support for kpa pressure units - Change default gauge scale number orientation to horizontal - Changed WindDir gauge labels to NOT be coloured by default: drawdir() -> "usecolorlabels : false" * Updated realtimegaugest.txt - Removed pressure trend text - localised string now derived from trend value * Updated customclientrawlocal.txt - Removed pressure trend text - localised string now derived from trend value - Changed forecast tag to use the Davis VP forecast by default - Changed todays max gust direction to use the new tag %maxgstdirectiondegree% * Updated language.js - Added additional strings for barometer/temperature trends - Fixed some NL translations * Updated steelseries.js (&.min) - Updated to v WindDirection, added initialisation parameter 'usecolorlabels', default = false Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 212

214 * General - Removed any extraneous BOM characters for UTF-8 encoded files (.html.js.css) * Updated gauges.js - Fixed temperature gauges (out & dew) not displaying the min/max shaded area * Updated gauges.js - Fixed wind max. avg. speed - Added g_showpopupdatagraphs variable to switch off graphs from the popup data - Added different graph image options for each gauge option (dew point, apparent, etc., out and in humidity) * Updated language.js - Dutch translations now complete * Updated ddimagestooltip.js (and min) - Removed explicit graph file names, now they are only specified in gauges.js * Updated gauges.js - Fixed max gust today indicator on wind gauge - Fixed baro look-n-feel for 'mb' stations - Fixed Solar gauge area drawing when value > theoretical - Changed Cumulus 'in' pressure units to 'inhg' - Change UV readings to recognise level 0 as unique - Added back links to Cumulus/Weather Display websites * Updated languages.js - French translations now complete - Added additional UV level 0 text * Updated realtimegaugest.txt - fixed typo for SolarRad * Updated gauges.js - Made the script more friendly for Weather Display. It now parses all numeric values before use and strips out non-numeric data such as units etc. - Added support for optional Solar Radiation Gauge - Moved changelang() function to language.js * Added customclientrawlocal.txt - This is the Weather Display equivalent of realtimegaugest.txt * Updated realtimegaugest.txt - Removed temptrendtext - Added Solar values - Updated version to 6 * Updated languages.js - Added strings for rising/falling/steady, these will now appear localised on the pop-up data rather than in the station language - Added strings for Solar gauge - Added changelang() function * Updated gauges-sst.htm (and variants) - Made them more program agnostic - Added Solar Rad. gauge * Updated ddimgtooltip.js - Added support for Solar gauge * Updated steelseries.js - Made WindDirection LCD label colours match the pointer colours * Updated gauges.js - Added WindDirection LCD titles to the changelang() function - Increased default page timeout from 10 to 20 minutes * Updated steelseries.js - Now version ; adds the setlcdtitlestrings() method to the WindDirection gauge Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 213

215 1.5.3 * Updated gauges.js - Setting g_pageupdatelimit = 0 disables the page update time limits - Removed the old redundant no HTML5 support code * Updated gauges.js - Fixes script 'hangs' when the realtimegauges.txt file is zero length (e.g. when it is being updated on the server during the download), and retry after 2 seconds. - Added a page timeout counter, this stops page updates after a specfied time - default 10 minutes You can over ride this with a parameter and password in the URL (default = 'its-me'), for example: - Fixed the browser redirect on no HTML5 Canvas support, it has been broken for a few releases. * Updated language.js - Added page timeout string - Restructured to reduce size a little - Removed canvas features not supported string * Updated gauges-sst.htm - Added 'no script' message * Updated this ReadMe.txt with information about browser redirects for script disabled * Updated SteelSeries library - v fixes sector/area drawing issues with Chrome Dev release 19 * Updated gauges-ss.css - Added references to external ttf, svg, and eot font files for backward compatibility with browsers that do not support the woff font embedded in the css file. - Changed gauge table style so it is centered horizontally on page. * Updated gauges-sst.htm (+ all translations) - Changed html so gauges are always centered horizontally on page * Adds 'font' folder back in to archive - A subset of the original font files included * Updated gauges.js - minor changes to attempt to fix missing zero values on the rain gauges * REQUIRES Cumulus build *1029* or later * Updated gauges.js - Moved popup initialiastion into gauges.js and after gauge initialisation, this speeds up the page display at the expense of the popup images not being available immediately after page load. - Changed launch of init() from onload to ondomready - in supported browsers. * Updated ddimgtooltips.js (+ minimised version) - Moved popup initialiastion into gauges.js * Added Swedish translation - Courtesy of Björn - Updated language.js - Added gauges-sst-se.htm * Updated gauges-sst.htm (+ translations) - Removed onload() from body tag * Removed 'font' folder * Updated gauges.css - Embedded the LCD font in the CSS file to avoid download timing problems * Updated steelseries.js (+ minimised version) - Altered LCD font positioning code to try and ensure consistency across browsers (tested on Chrome, IE and FF) * Updated gauges.js - Reduced the default range for the barometer from to hPa ( to inHg). This should look better on those sites that have very little pressure variation. - Finally(?) at third attempt got the METAR STDY wind calculation correct! - Fixed comma decimal bug with temperature and pressure trends a * Updated steelseries.js (+ minimised) Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 214

216 - Up to version , improved TrendIndicator 'glow' - Bug fix from * Updated gauges.js - Fixed bug in METAR STDY wind calculation - Fixed Wind Direction titles always displaying in English * Updated language.js - Added Dutch translations for UV gauge (thanks to 'Marc') - HTML5 cleanups * Updated gauge-sst.htm (+ translations) - HTML5 cleanups * Updated steelseries.js (+ minimised) - Up to version , improved TrendIndicator 'glow' * Updated gauges.js - Fixed comma decimal bug in UV gauge * Updated steelseries.js (+ minimised) - Up to version , no functional changes from * Updated gauges-sst.htm - I left it using the full steelseries script that I debug with rather then the minimised version - oops! * Updated language.js - Partially translated UV gauge * Updated gauges-sst.htm (plus other languages) - Added UV gauge - Made Cumulus version/build fields dymanically updated by the script * Updated ddimgtooltip.js (plus minimised) - Amended to cope with non-graphic pop-ups for UV gauge * Updated language.js - Added UV entries, English only for now, translations required * Updated steelseries.js (plus minimised) - Uplifted to version a, Cumulus cutdown version * Updated realtimeguagest.txt - Added UV and Cumulus version values * Updated ddimgtooltip.js/ddimgtooltip.min.js - Fixes temperature graph issue * Updated steelseries.js to library version Implements new pointer types TYPE15 & TYPE16 - Implements the TURNED gauge background - Improved Trend Indicator - Improved pointer shadows * Updated steelseries.js to library version Implements trend indicators on Radial gauges - Fixes frame redraw bug in Wind gauge * Updated gauges.js - Implements trend indicators * Updated realtimegaugest.txt - Added temptrend and presstrend values * No functional changes from v1.3.1 * Updated all HTML pages - Moved hidden DIV to start of the body - Moved all the scripts to the end of the document - Made w3c validator compliant * Updated gauges-ss.css - Part of w3c validator compliance changes * Updated ddimgtooltip.js/ddimgtooltip.min.js - Part of w3c validator compliance changes Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 215

217 1.3.1 * Updated this readme - With corrected remote file slashes, and details on configuring the standard Cumulus pages to point to the new SS gauge page * Updated steelseries.js to library version The inch rain gauge exposed a bug in the core library * Updated gauges.js - Made tick label orientation a globally configured item - Made rain gauge colouring configurable from global variables at the top of the script * Updated realtimegaugest.txt - Small changes for future consistency * REQUIRES Cumulus b1025 to function fully (wind direction variation) * Updated steelseries.js - Added WindDirection component, dual pointer for latest & average directions to replace Compass - Switched to a slimed down Cumulus specific version of the library. - For the full library please visit * Updated gauges.js - Now uses new WindDirection component, you can switch off the wind direction variation indication using the g_showwindvariation variable (you have a windmilling Fine Offset station for instance!) - Removed Wind Direction LCD panel handling - now redundant with new gauge. - Default gauge size now 251 (was 250), odd number sizes render better - Fixed IE9 javascript exception when realtime txt fetches timed out * Updated gauges-sst.htm (and other languges) - Removed radio buttons from wind direction gauge - Changed gauge size from 250 to 251 * Switched realtimegauges.txt to JSON format data - Removes the need for the parsereatime.js script * Updated steelseries.js - Minor tweak to stop filled 'areas' overlapping shaded 'sectors' on radial gauges - Minor fix to LED component redraw when changing colour (the halo density used to increase with each colour change) - Added shadows to LCD text for a more 3D effect - Standard LCD colour only. - Optimised the compass rose drawing routines * Added gauges-altt.htm and gauges-alt.css - Alternative minimal page without any gauge option buttons, and a 'compressed' layout * Updated gauges.js - Removed logo's showing by default * Updated gauges.js - Minor: Changed section colours for temperature and rain rates - Changed logo images to use the imgpathurl variable for their path * Updated steelseries.js - Added boolean parameters showdegrees and showrose to the compass component * Updated gauges.js - Added demo gauge background image layers to Temperature and Dew Point gauges * Updated steelseries - Added gauge background image layer * Added "images" folder - Two demo background layer images (logosmall.png, logolarge.png) * Updated gauges.js - Added g_forecast_width variable to easily change the size of the status/forecast display * Updated realtimegaugest.txt - Changed temperature units to use new Cumulus <#tempunitnodeg> web tag. The scripts will still work with Cumulus and the old realtimegaugest.txt * Updated language.js Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 216

218 - added Dutch translation courtesy of Ron "nitrx" * Added gauges-sst-nl.htm - new Dutch template translation courtesy of Ron "nitrx" * Updated gauges.js - added sector colouring to the rainrate gauge based on the descriptions in the wiki ( * Updated gauges.js - fixed incorrect LANG properties.lowest_infof and.highest_infof in the temp gauge popup. * Updated language.js - added German translation courtesy of Martin "sharonna" * Added gauges-sst-de.htm - new German template translation courtesy of Martin "sharonna" * Updated gauges.js - changes to the changelang() function to fix 'flashing' effects * Updated steelseries.js - changes to radial gauge SET methods to better support language switching * Updated.htm files - to remove the calls to changelang() that ran before the gauges were initialised * Updated gauges.js - fixed temperature popup data strings for languages with masculine/feminine * Now works with Cumulus 1.9.1, adds autoscrolling for long forecasts, changes how multiple languages are handled. * Updated steelseries.js - updated to release 'standard release' from Gerrit - fixed logic around LED blinking - fixed singlelcd panel clipping text with long thin displays - added autoscrolling, automatically scrolls long messages that do not fit in the display, short messages are still displayed statically. * Updated gauges.js - added 'hot' scale shading (above 45C, 110F) - added check for Cumulus build number in 'station off-line' code * Updated realtimegaugest.txt - added cumulus build number * Updated parserealtime.js - updated for extra build number field * Updated gauges-sst.htm, gauges-sst-fr.htm - added hidden span to force early.ttf font download from web servers that do serve.woff files - added include for language.js - updated to HTML 5 standards * Added language.js file - contains language translations, default file contains English & French * Updated gauges.js, fixed default windspeed unit. Must be 'mph' 1.0 * Updated gauges.js - Now checks for existance of gauge in HTML before attempting to draw it - Now checks the results of parserealtimegauges() for expected number of values in order to detect incomplete/failed realtime downloads - LED redraws now limited to state changes, stops 'corona' intensity increasing over time - Added changelang() function, call this after updating the LANG object - General code tidy up * Updated parserealtime.js - Now returns the number of Cumulus webtag values found * Updated gauges-ss.htm - Renamed file to gauges-sst.htm as it is intended to be processed by Cumulus - Genernal code tidy up and made to match standard Cumulus templates better * Changed default paths so gauges-ss can be installed in main Cumulus folder on your web site. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 217

219 0.9 * Updated gauges.js - Fixed scale shading for farenheit temperatures - Changed rain and rain rate inches gauges to start range of 0-1 inch - Fixed displaying script version in FireFox * Updated steelseries.js - Added variable decimals to fractionalscale type of radialbargraph gauge 0.8 * Updated ddimgtooltip.js & ddimgtooltip.css - Moved all formating out to the CSS file (courtesy of Ray) - Added rounded corners and slightly large graph image (courtesy of Ray) * Updated realtimegaugest.txt - Added <#timeutc> data * Updated parserealtime.js - Added timeutc handling * Updated gauges.js - Added functionality to display error message, and flash status LED if the data is 'stale' because the realtime file is not updating. - Added string LANG.led_title_offline - Added g_stationofflinetimeout variable to determine offline limit 0.7 * Updated gauges.js: - Reintroduced cache defeat on realtimegauges.txt GET (IE9 requirement) - Added minimum ranges to barometer scale; hpa or inhg - Improved handling/gauge appearance of inhg and inches of rain units - Improved temperature range handling; now C: -40 to +60, F: -30 to +130 * Updated steelseries.js: - fix for small fonts on some browser/os/driver combinations. - added 'blinking' method to the sensor warning led. - added variable number of decimals on factional scales 0.6 * Updated gauges.js: - more tweaking of graph downloads. - added option to put 'status' LCD in 'normal' text mode for accented character display. - all embedded strings now in one section for 'easier' language localisation - English language updates - added redirect to 'old' gauges page for incompatible browsers * Updated steelseries.js: - new version from Gerrit - increased radial/radialbargraph scale font size slightly - improves FF5/Windows appearance(?) - added compass point Symbol customisation * Updated gauges-ss.htm: - now formatted like the 'standard' Cumulus template pages * Minified the ddimgtooltip.js, parserelatime.js, tween.js, and steelseries.js files as these are pretty stable and not much for people to modify in there. 0.5 * Updated parserealtime.js, changes decimal points to match the end users locale * Updated gauges.js, now counts down correctly on http retries. Popup data graphs now only downloaded every 15mins by default. Fixed some remaining comma decimal conversions (hope that is all of them now) 0.4 * Updated gauges.js (added forescast.trim() for Davis forecasts, force barometer scale to match expected) * Updated ddimgtooltip.js (initial img path was hard coded) * Updated realtimegaugest.txt (wrong version included in v0.3) Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 218

220 4 Installeren van Gauges-ss vers Wanneer je het programma hebt gedownload, bestaat deze uit de volgenden bestanden (het *.zip bestand is het origineel, na uitpakken heb je de volgende bestanden): Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 219

221 htm gauges-ss.htm gaugest-ss.htm Txt-bestanden: realtimegauges.txt realtimegaugest.txt CSS Font ddimgtooltip.css gauges-ss.css lcdmono2ultra-webfont.eot lcdmono2ultra-webfont.svg lcdmono2ultra-webfont.ttf lcdmono2ultra-webfont.woff script: ddimgtooltip.js ddimgtooltip.min.js gauges.js language_nl.js parserealtime.js parserealtime.min.js steelseries.js steelseries.min.js tween.min.js Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 220

222 In de ReadMe.txt, kan men lezen hoe het programma geïnstalleerd moet worden. Kopieer "realtimegaugest.txt" naar de Cumulus webmap op de HD (C:\Cumulus\web). Kopieer "gauges-sst.htm" naar de Cumulus webmap op de HD (C:\Cumulus\web). Configureer in het programma Cumulus Configuration Internet en dan tabblad Files, zodat Cumulus de bestanden. gauges-sst.htm en realtimegaugest.txt, automatisch upload als respectivelijk gauges-ss.htm en realtimegauges.txt Kies daarna voor tabblad Files. Configureer de realtimegauges.txt, zoadat deze automaticht via Cumulus wordt geupload. via pulldown Internet Files to: 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) Volgens ReadMe.txt zou je ook gauges-sst.htm kunnen downloaden, via Cumunus. Dat is echter niet nodig, aangezien je dit bestand ook direct kunt uploaden. Dan moet je echter de vertalingen van de locatie van de windmeter met de hand weizigen in klare tekst. LET-OP!! indien de site wordt aangepast (broncode), moet de pagina wel worden geupload via Cumulus!!! Dus deze verwijzing eigenlijk laten staan. 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) Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 221

223 Kopieer de ccs, font en js naar Internet, in de directory /gauges-ss/ welke je zelf hebt aangemaakt op intenet. Omdat de volgende bestanden door mij zelf zijn aangepast, moeten deze apart gekopieerd worden, dan wel aangepast in de nieuwere versie: Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 222

224 Onderstaande is ter info en geeft aan wat er in de ReadMe.txt staat. De help-file - ReadMe.txt (zie eigen HD voor dit bestand) (D:\Handleidingen en data van weerstation\applicaties\05-cumulus\gauges-ss_v1-1-2\gauges-ss_v1-1-2\readme.txt) SteelSeries JavaScript gauges ============================= Created by Mark Crossley July 2011 Version Updated: Updated: 19 August Some brief notes: 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 = <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. 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 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, 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 "relatimegauges.txt" Copy (or move) the folders 'css', 'font' and 'scripts' and their contents (the files that are contained in the ZIP file) to the folder where your "gaugesss.htm" file is located (probably the same folder where all your other Cumulus HTM files are located). Give it whirl. Changing Languages To switch statically, you need to edit the "gauges.js" file, and change the line 25: var LANG = LANG_EN; to var LANG = LANG_XX; (where XX is the desired language code). Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 223

225 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 laguage), and editing all the strings. The zip file contains a language.js file with both English and a French translation to get you going. The French translation has been provided by Ray of Tzouhalem-Maple Bay Weather. To switch languages dymanically, 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 english --> <script> /*<![CDATA[*/ LANG = LANG_EN; changelang(); /*]]>*/ </script> This will re-label all the gauges, and update the radio buttons on the web page. However, changing the language for the gauges DOES NOT translate the displayed forecast as the texts of the message are being supplied by Cumulus. Forecast Messages By default the <#forecast> message is displayed which shows either the Cumulus generated forecast or the external station generated forecase depending on how Cumulus is configured. Starting with version Cumulus has additional forecast message options: <#cumulusforecast> - Always displays the Cumulus generated Zambretti forecast <#wsforecast> - Always displays the external weather station forecast If you wish to use one of these options, then you should edit the "realtimegaugest.txt" file and replace the '<#forecast>' tag with the one of your choice. ===== * Updated gauges.js - changes to the changelang() function to fix 'flashing' effects * Updated steelseries.js - changes to radial gauge SET methods to better support language switching * Updated.htm files - to remove the calls to changelang() that ran before the gauges were initialised * Updated gauges.js - fixed temperature popup data strings for languages with masculine/feminine * Now works with Cumulus 1.9.1, adds autoscrolling for long forecasts, changes how multiple languages are handled. * Updated steelseries.js - updated to release 'standard release' from Gerrit - fixed logic around LED blinking - fixed singlelcd panel clipping text with long thin displays - added autoscrolling, automatically scrolls long messages that do not fit in the display, short messages are still displayed statically. * Updated gauges.js - added 'hot' scale shading (above 45C, 110F) - added check for Cumulus build number in 'station off-line' code * Updated realtimegaugest.txt - added cumulus build number * Updated parserealtime.js - updated for extra build number field * Updated gauges-sst.htm, gauges-sst-fr.htm - added hidden span to force early.ttf font download from web servers that do serve.woff files - added include for language.js - updated to HTML 5 standards * Added language.js file - contains language translations, default file contains English & French * Updated gauges.js, fixed default windspeed unit. Must be 'mph' 1.0 * Updated gauges.js - Now checks for existance of gauge in HTML before attempting to draw it - Now checks the results of parserealtimegauges() for expected number of values in order to detect incomplete/failed realtime downloads - LED redraws now limited to state changes, stops 'corona' intensity increasing over time Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 224

226 - Added changelang() function, call this after updating the LANG object - General code tidy up * Updated parserealtime.js - Now returns the number of Cumulus webtag values found * Updated gauges-ss.htm - Renamed file to gauges-sst.htm as it is intended to be processed by Cumulus - Genernal code tidy up and made to match standard Cumulus templates better * Changed default paths so gauges-ss can be installed in main Cumulus folder on your web site. 0.9 * Updated gauges.js - Fixed scale shading for farenheit temperatures - Changed rain and rain rate inches gauges to start range of 0-1 inch - Fixed displaying script version in FireFox * Updated steelseries.js - Added variable decimals to fractionalscale type of radialbargraph gauge 0.8 * Updated ddimgtooltip.js & ddimgtooltip.css - Moved all formating out to the CSS file (courtesy of Ray) - Added rounded corners and slightly large graph image (courtesy of Ray) * Updated realtimegaugest.txt - Added <#timeutc> data * Updated parserealtime.js - Added timeutc handling * Updated gauges.js - Added functionality to display error message, and flash status LED if the data is 'stale' because the realtime file is not updating. - Added string LANG.led_title_offline - Added g_stationofflinetimeout variable to determine offline limit 0.7 * Updated gauges.js: - Reintroduced cache defeat on realtimegauges.txt GET (IE9 requirement) - Added minimum ranges to barometer scale; hpa or inhg - Improved handling/gauge appearance of inhg and inches of rain units - Improved temperature range handling; now C: -40 to +60, F: -30 to +130 * Updated steelseries.js: - fix for small fonts on some browser/os/driver combinations. - added 'blinking' method to the sensor warning led. - added variable number of decimals on factional scales 0.6 * Updated gauges.js: - more tweaking of graph downloads. - added option to put 'status' LCD in 'normal' text mode for accented character display. - all embedded strings now in one section for 'easier' language localisation - English language updates - added redirect to 'old' gauges page for incompatible browsers * Updated steelseries.js: - new version from Gerrit - increased radial/radialbargraph scale font size slightly - improves FF5/Windows appearance(?) - added compass point Symbol customisation * Updated gauges-ss.htm: - now formatted like the 'standard' Cumulus template pages * Minified the ddimgtooltip.js, parserelatime.js, tween.js, and steelseries.js files as these are pretty stable and not much for people to modify in there. 0.5 * Updated parserealtime.js, changes decimal points to match the end users locale * Updated gauges.js, now counts down correctly on http retries. Popup data graphs now only downloaded every 15mins by default. Fixed some remaining comma decimal conversions (hope that is all of them now) 0.4 * Updated gauges.js (added forescast.trim() for Davis forecasts, force barometer scale to match expected) * Updated ddimgtooltip.js (initial img path was hard coded) * Updated realtimegaugest.txt (wrong version included in v0.3) Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 225

227 4.1 Betekenis/functie van de verschillende bestanden: Gauges-ss vers htm-bestanden gauges-ss.htm gaugest-ss.htm Txt-bestanden realtimegauges.txt realtimegaugest.txt CSS-bestanden ddimgtooltip.css Dit bestand wordt automatisch op intenet gezet door de instelling in Cumulus Configuration Internet (tablad files ). Dit bestand is het moeder exemplaar. Deze wordt via Cumuls gedownload als gauges-ss.htm bestand. Veranderingen op dit bestand dient via dit file-bestand te worden gedownload (via Cumulus) Is dus nodig. Dit bestand is aangepast door Gaike. Dit bestand wordt automatisch op intenet gezet door de instelling in Cumulus Configuration Internet (tablad files ). Dit bestand is het moeder exemplaar. Deze wordt via Cumuls gedownload als realtimegauges.txt bestand. Veranderingen op dit bestand dient via dit file-bestand te worden gedownload (via Cumulus). Dit bestand heb ik met de hand gekopieerd naar C:\Comulus\Web\ realtimegaugest.txt Is dus nodig. Wordt gebruikt om de positie te bepalen waar de grafieken worden weergegegeven. Als men met de muis over een meter gaat, wordt er een grafiek zichtbaar. De plaats van de grafiek wordt bebaald door dit bestand. Tevens wordt hier de grote van de grafieken bepaald, enz. gauges-ss.css Is dus nodig. Het bepalen van de gebruikte fonttype, inc. de grootte, enz. Is dus nodig. Font- bestanden lcdmono2ultra-webfont.eot lcdmono2ultra-webfont.svg lcdmono2ultra-webfont.ttf lcdmono2ultra-webfont.woff Fonttype ttf, welke een digitaal uiterlijk heeft Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 226

228 script-directory (*.js bestanden) ddimgtooltip.js Gebruikt om bij het bewegen van de muis over een link, een plaatje te laten zien. Hier dus een grafiek. In dit bestand wordt bepaald welke fig. bij welke meter behoort. Dus hier moeten de firuren bepaald worden voor bijvoorbeeld zon en UV. Hier heeft Henk dus bepaald welke zon en UV plaatjes zichtbaar worden. ddimgtooltip.min.js Uitgeklede versie van ddimgtooltip.js Heeft echter wel de zelfde functionaliteit als ddimgtooltip.js. gauges.js Hier wordt bepaald hoe de meters er uitzien, update-tijd, enz.: Update tijd: 60 sec. Grootte: 250, Gebruikte font vewijzend naar.. Max. en min. default uitslag van de meters. Enz., Tevens wordt hier aangegeven welke meters zichtmaar worden weergegeven. Het bepaald niet de volgorde op het scherm Bepaalt ook wat de maximale meter-waarde is. Bijvoorbeeld dat de temperatuur tussen 0 de 40 is Hier heeft Henk dus bepaald welke meters er zichtbaar zijn en de uitslagen voor de zon en UV. Is dus nodig. Dit bestand is aangepast door Gaike. language.js Wordt gebruikt om vertalingen van woorden in de site uit te voeren. Ik gebruik het bestand language_nl.js. In gaugesss.htm is de verwijzing ook naar language_nl.js Is dus nodig. Dit bestand is aangepast door Gaike. parserealtime.js Uitlezen van realtime.txt en vertalen naar waarden Is zelfde als parserealtime.js, maar dan waarbij alle remaks, enz verwijderd zijn om het bestand zo klein mogelijk te maken. Heeft echter wel de zelfde functionaliteit. Is dus nodig. parserealtime.min.js Uitgeklede versie van parserealtime.js Heeft echter wel de zelfde functionaliteit als parserealtime.js. steelseries.js Bepalen van type meters en de kleuren van de meters. Als je deze niet upload, worden geen meters weergegeven. steelseries.min.js tween.min.js Is dus nodig. Uitgeklede versie van steelseries.js. Als je dit bestand niet upload, slaan de meters niet uit. Dus dit bestand is nodig. Is dus nodig. e.com/dynamicindex4/im agetooltip.htm /free_gauges/instruction s.html /gauge/ gspot.com/ gspot.com/2011/04/steel series-javascriptedition.html ween.js/examples/03_gr aphs.html Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 227

229 4.1.1 Bron: gaugest-ss.htm Opbouw eigen pagina: Gauges-ssT.htm. De gele tekst heb ik aangepast/toegevoegd. In deze kleur wordt de code van de desbetreffende meter weergegeven. <!DOCTYPE html> <!-- gauges-sst.htm - Updated: 31 July > <html lang="en"> <head> <meta charset="utf-8" /> <meta name="description" content="<#location> weather data" /> <meta name="keywords" content="cumulus, <#location> weather data, weather, data, weather station, steelseries" /> <title> <#location> weather</title> <link rel="stylesheet" href="../weatherstyle.css" /> Verwijst naar opmaak. Onder andere de lichtblauwe achtergrond kleur <!-- Required for the SteelSeries JavaScript gauges --> <link rel="stylesheet" href="css/gauges-ss.css" /> <link rel="stylesheet" href="css/ddimgtooltip.css" /> <script src=" <script src="scripts/tween.min.js"></script> <script src="scripts/language_nl.js"></script> Verwijst naar opmaak. Hierinstaan de vertalingen <script src="scripts/steelseries.min.js"></script> naar Nederlandse woorden. <script src="scripts/gauges.js"></script> <script src="scripts/parserealtime.min.js"></script> <script src="scripts/ddimgtooltip.min.js"></script> <!-- Required for the SteelSeries JavaScript gauges -->.min weggehaald <!-- Dynamic script to change the default language to english --> </head> <body onload="init()"> <div id="content"> <h1 style="text-transform: none;"> Weerinformatie uit <#location></h1> <h2 style="text-align: left; text-transform: none;" > Lengtegraad <#latitude> Breedtegraad <#longitude> Hoogte <#altitude></h2> <div align="center"><table id="gaugetable"> <tr> <td colspan="3" style="text-align: center;"> <canvas id="canvas_led" width="25" height="25"></canvas> <canvas id="canvas_status" width="350" height="25"></canvas> <canvas id="canvas_timer" width="50" height="25"></canvas> </td> </tr> <tr> <td> <div id="temp"> <canvas id="canvas_temp" width="250" height="250" rel="imgtip[0]"></canvas> <br /> <input id="rad_temp1" type="radio" name="rad_temp" value="out" checked onclick="dotemp(this)" /> <label id="lab_temp1" for="rad_temp1">buiten</label> <input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="dotemp(this)" /> <label id="lab_temp2" for="rad_temp2">binnen</label> </div> </td> <td> <div id="dew"> <canvas id="canvas_dew" width="250" height="250" rel="imgtip[1]"></canvas> <br /> <input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="dodew(this)" /> <label id="lab_dew1" for="rad_dew1">dauwpunt</label> <input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="dodew(this)" /> <label id="lab_dew2" for="rad_dew2">apparent</label> <input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="dodew(this)" /> <label id="lab_dew3" for="rad_dew3">wind Chill</label> <br /> <input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="dodew(this)" /> <label id="lab_dew4" for="rad_dew4">heat Index</label> <input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="dodew(this)" /> <label id="lab_dew5" for="rad_dew5">humidex</label> </div> </td> <td> <div id="hum"> <canvas id="canvas_hum" width="250" height="250" rel="imgtip[4]"></canvas> <br /> <input id="rad_hum1" type="radio" name="rad_hum" value="out" checked onclick="dohum(this)" /> <label id="lab_hum1" for="rad_hum1">buiten</label> <input id="rad_hum2" type="radio" name="rad_hum" value="in" onclick="dohum(this)" /> Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 228

230 <label id="lab_hum2" for="rad_hum2">binnen</label> </div> </td> </tr> <tr> <td> <div id="baro"> <canvas id="canvas_baro" width="250" height="250" rel="imgtip[5]"></canvas> </div> </td> <td> <div id="wind"> <canvas id="canvas_wind" width="250" height="250" rel="imgtip[6]"></canvas> </div> </td> <td> <div id="dir"> <canvas id="canvas_dir" width="250" height="250" rel="imgtip[7]"></canvas> <br /> <input id="rad_dir1" type="radio" name="rad_dir" value="lat" checked onclick="dodir(this)" /> <label id="lab_dir1" for="rad_dir1">laatste meting</label> <input id="rad_dir2" type="radio" name="rad_dir" value="avg" onclick="dodir(this)" /> <label id="lab_dir2" for="rad_dir2">gemiddeld</label> </div> </td> </tr> </table> <table id="gaugetable"> <tr> <td> <div id="rain"> <canvas id="canvas_rain" width="250" height="250" rel="imgtip[2]"></canvas> </div> </td> <td> <div id="rrate"> <canvas id="canvas_rrate" width="250" height="250" rel="imgtip[3]"></canvas> </div> </td> </tr> </table> <div style="padding: 0 10px 10px 10px; text-align: left"> <hr /> Scripts by Mark Crossley - version <span id="scriptver"></span> <br /> Gauges drawn using Gerrit Grunwald's <a href=" target="_blank">steelseries</a> JavaScript library </div> </div><!-- align center --> <!-- Start of navigation menus at the bottom --> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="td_navigation_bar"> :<a href="index.htm">now</a>::<a href="gauges-ss.htm">gauges</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="thismonth.htm">this month</a>::<a href="thisyear.htm">this year</a>::<a href="record.htm">records</a>::<a href="trends.htm">trends</a>::<a href=" </td> </tr> </table><!-- End of navigation menus at the bottom --> <!-- Credits --> <p class="credits"> <br /> Page updated :10:03 <br /> powered by <a href=" target="_blank">cumulus</a> v1.9.2 (1017) </p><!-- Credits --> </div><!-- id content --> <!-- Hidden span to force early.ttf font download, required for web servers that do not serve.woff files --> <span style="visibility:hidden; font-family:lcdmono2ultra">dummy</span> </body> </html> Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 229

231 4.1.2 Bron: realtimegaugest.txt Opbouw eigen pagina: Ik heb hier niets aan veranderd. <#date format=hh:nn> <#temp> <#temptl> <#tempth> <#intemp> <#dew> <#dewpointtl> <#dewpointth> <#apptemp> <#apptemptl> <#apptempth > <#wchill> <#wchilltl> <#heatindex> <#heatindexth> <#humidex> <#wlatest> <#wspeed> <#wgust> <#wgusttm> <#bearing> <#avgbearing> < #press> <#presstl> <#pressth> <#pressl> <#pressh> <#rfall> <#rrate> <#rratetm> <#hum> <#humtl> <#humth> <#inhum> <#SensorContactL ost> <#forecast> <#tempunit> <#windunit> <#pressunit> <#rainunit> <#temptrendtext> <#TtempTL> <#TtempTH> <#TdewpointTL> <#Tdewpoint TH> <#TapptempTL> <#TapptempTH> <#TwchillTL> <#TheatindexTH> <#TrrateTM> <#ThourlyrainTH> <#LastRainTipISO> <#hourlyrainth> <#Thu mtl> <#ThumTH> <#TpressTL> <#TpressTH> <#presstrend> <#Tbeaufort> <#TwgustTM> <#windtm> <#bearingtm> <#timeutc format=yyyy,m>- 1,<#timeUTC format=d,h,m,s> <#build> Henk - RealtimegaugesT.txt <#date format=hh:nn> <#temp> <#temptl> <#tempth> <#intemp> <#dew> <#dewpointtl> <#dewpointth> <#apptemp> <#apptemptl> <#apptempth > <#wchill> <#wchilltl> <#heatindex> <#heatindexth> <#humidex> <#wlatest> <#wspeed> <#wgust> <#wgusttm> <#bearing> <#avgbearing> < #press> <#presstl> <#pressth> <#pressl> <#pressh> <#rfall> <#rrate> <#rratetm> <#hum> <#humtl> <#humth> <#inhum> <#SensorContactL ost> <#wsforecast> <#tempunit> km/u <#pressunit> <#rainunit> <#temptrendtext> <#TtempTL> <#TtempTH> <#TdewpointTL> <#TdewpointTH> <#TapptempTL> <#TapptempTH> <#TwchillTL> <#TheatindexTH> <#TrrateTM> <#ThourlyrainTH> <#LastRainTipISO> <#hourlyrainth> <#ThumTL> <#ThumTH> <#TpressTL> <#TpressTH> <#presstrend> <#Tbeaufort> <#TwgustTM> <#windtm> <#bearingtm> <#timeutc format=yyyy,m>- 1,<#timeUTC format=d,h,m,s> <#build> <#UV> <#SolarRad> <#CurrentSolarMax> Bron: realtimegauges.txt 19:15 10,8 5,2 12,1 20,0 6,5 3,3 6,7 6,9 1,7 7,9 6,4 1,1 10,8 12,1 10,8 30,6 16,1 32,2 41, , , ,35 991, , 86 0,0 0,0 0, Occasional precipitation, worsening C km/h mb mm Falling 08:30 15:46 07:45 15:16 07:54 15:48 07:56 15:46 00:00 00: :19 0,0 15:50 07:34 18:34 00:01 Falling F4 13:16 20, ,10-1,24,17,15, Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 230

232 4.2 Vertaling weersverwachting Voorbeeld van site: Voor vertaling van de gegevens zie Broncode parserealtime.js van vers Zie blz.255 Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 231

233 4.2.1 Bron: ddimgtooltip.css Opbouw eigen pagina: Ik heb hier niets aan veranderd..ddimgtooltip{ box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/ -webkit-box-shadow: 3px 3px 5px #818181; -moz-box-shadow: 3px 3px 5px #818181; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; display: none; position: absolute; border: 1px solid black; background: white; color: black; z-index: 2000; padding: 0 7px 3px 7px; font-family: sans-serif; font-size: 10px;.tipinfo{ text-align: left; padding: 3px 0 3px 2px;.tipimg{ width: 438px; height: 175px; Bron: gauges-ss.css Opbouw eigen pagina: Ik heb hier niets aan veranderd. #gaugetable { padding: 5px; font-family: sans-serif; font-size: 0.75em; width: 100%; td { text-align: center; vertical-align: { font-family: 'LCDMono2Ultra'; src: url('../font/lcdmono2ultra-webfont.eot'); src: url('../font/lcdmono2ultra-webfont.eot?#iefix') format('embedded-opentype'), url('../font/lcdmono2ultra-webfont.woff') format('woff'), url('../font/lcdmono2ultra-webfont.ttf') format('truetype'), url('../font/lcdmono2ultra-webfont.svg#lcdmono2ultra') format('svg'); font-weight: normal; font-style: normal; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 232

234 4.2.3 Bron: ddimgtooltip.js Opbouw eigen pagina: Ik heb hier niets aan veranderd. Gaike - gauges-ss_v ddimgtooltip.js /* Image w/ description tooltip v2.0 - For FF1+ IE6+ Opr8+ * Created: April 23rd, This notice must stay intact for usage * Author: Dynamic Drive at * Visit for full source code * Modified: M Crossley June 2011 */ /* Each tooltip's syntax should be as follows: tooltip[x]=['path_to_image', 'optional desc', optional_css_object] Where x should be an sequential integer starting from 0, with the following 1 to 3 components defined: 1. Full path or URL to the tooltip image 2. Description that is displayed beneath the image (optional) 3. Object containing the desired CSS properties to add to the tooltip. The syntax should be: {property1:"cssvalue1", property2:"cssvalue2", etc where "property" should be a valid CSS property, and "value" a valid CSS value. If more than one pair is defined, separate each pair with a comma. */ var ddimgtooltip={ tiparray:function(){ var tooltips=[]; tooltips[0]=[imgpathurl + "temp.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; tooltips[1]=[imgpathurl + "temp.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; tooltips[2]=[imgpathurl + "raint.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; tooltips[3]=[imgpathurl + "rain.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; tooltips[4]=[imgpathurl + "hum.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; tooltips[5]=[imgpathurl + "press.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; tooltips[6]=[imgpathurl + "wind.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; tooltips[7]=[imgpathurl + "windd.png", " ", {background:"#ffffff", color:"black", border:"2px ridge darkblue"]; return tooltips; do not remove/change this line (), UV en Zon gegevens tooltipoffsets: [20, -30], additional x and y offset from mouse cursor for tooltips toegevoegd tipdelay: 1000, ***** NO NEED TO EDIT BEYOND THIS POINT _delaytimer: 0, tipprefix: 'imgtip', tooltip ID prefixes createtip:function($, tipid, tipinfo){ if ($('#'+tipid).length==0){ if this tooltip doesn't exist yet return $('<div id="' + tipid + '" class="ddimgtooltip" />').html( ((tipinfo[1])? '<div class="tipinfo" id="' + tipid + '_txt">' + tipinfo[1] + '</div>' : '') + '<div style="text-align:center"><img class="tipimg" id="' + tipid + '_img" src="' + tipinfo[0] + '" /></div>' ).css(tipinfo[2] {).appendto(document.body) return null;, positiontooltip:function($, $tooltip, e){ var x=e.pagex+this.tooltipoffsets[0], y=e.pagey+this.tooltipoffsets[1]; var tipw=$tooltip.outerwidth(), tiph=$tooltip.outerheight(), x=(x+tipw>$(document).scrollleft()+$(window).width())? x-tipw-(ddimgtooltip. tooltipoffsets[0]*2) : x y=(y+tiph>$(document).scrolltop()+$(window).height())? $(document).scrolltop()+$(window). height()-tiph-10 : y; $tooltip.css({left:x, top:y);, delaybox:function($, $tooltip, e){ if (this.showtips){ ddimgtooltip._delaytimer = settimeout("ddimgtooltip.showbox('"+$tooltip.selector+"')", ddimgtooltip.tipdelay);, showbox:function($, $tooltip, e){ showbox:function(tooltip){ if (this.showtips){ $tooltip.show(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 233

235 this.positiontooltip($, $tooltip, e); $(tooltip).show();, hidebox:function($, $tooltip){ cleartimeout(ddimgtooltip._delaytimer); $tooltip.hide();, showtips: false, init:function(targetselector){ jquery(document).ready(function($){ var tiparray=ddimgtooltip.tiparray; var $targets=$(targetselector); if ($targets.length==0) return; var tipids=[]; $targets.each(function(){ var $target=$(this); $target.attr('rel').match(/\[(\d+)\]/); match d of attribute rel="imgtip[d]" var tipsuffix=parseint(regexp.$1); get d as integer var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix; construct this tip's ID value and remember it var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix]); $target.mouseenter(function(e){ var $tooltip=$("#"+this._tipid); ddimgtooltip.showbox($, $tooltip, e); ddimgtooltip.delaybox($, $tooltip, e); ) $target.mouseleave(function(e){ var $tooltip=$("#"+this._tipid); ddimgtooltip.hidebox($, $tooltip); ) $target.mousemove(function(e){ var $tooltip=$("#"+this._tipid); ddimgtooltip.positiontooltip($, $tooltip, e); ) if ($tooltip){ add mouseenter to this tooltip (only if event hasn't already been added) $tooltip.mouseenter(function(){ ddimgtooltip.hidebox($, $(this)) ); ); ); end dom ready ddimgtooltip.init("targetelementselector") ddimgtooltip.init("*[rel^=imgtip]"); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 234

236 4.2.4 Bron: gauges.js Opbouw eigen pagina: Gauges.js. De gele tekst heb ik aangepast/toegevoegd. D:\Handleidingen en data van weerstation\applicaties\05-cumulus\gauges-ss_v1-1-3\gaugesss\scripts\gauges.js Update = donderdag 29 december :50 /* * A starter gauges page for Cumulus, based on the JavaScript * SteelSeries gauges by Gerrit Grunwald. * * Created by Mark Crossley, June 2011 * * File encoding = UTF-8 */ var g_scriptver = " "; var realtimeurl = "realtimegauges.txt"; *** Change this to your download URL *** var imgpathurl = "../images/"; *** Change this to the relative path for your Cumulus 'Trend' images var oldgauges = "../gauges.htm"; *** Change this to the relative path for your 'old' gauges page. var g_count = 10; download retry counter (secs) var g_size = 250; size of gauges var g_graphupdatetime = 15; period of popup data graph refesh, in minutes var g_stationofflinetimeout = 3; period of no data change before we declare the station offline, in minutes Hier bepaal je het pad voor de plaatjes var g_digitalfont = true; Font control for the gauges & timer Bepalen van de var g_digitalforecast = true; Font control for the status display Nederlandse taal var g_showpopupdata = true; Popup data displayed var LANG = LANG_NL; Set to your default language. Store all the strings in one object, makes the debugger tidier! nothing below this line needs to be modified - unless you really know what you are doing - but remember, if you break it, it's up to you to fix it ;) the trend images to be used for the popup data var g_tipimgs = [["temp.png", "intemp.png"], "temp.png", "raint.png", "rain.png", "hum.png", "press.png", "wind.png", "windd.png"]; var g_numberofrealtimefields = 64; var g_firstrun = true; Used to setup units & scales etc var g_refreshgraphs = false; Flag to signal refesh of the pop data graphs var cumulus = {; Stores all the values from realtime.txt in a more readable format (esp when debugging!) var g_countdowntimer; var count = g_count; countdown tracker var httperror = 0; global to track download errors var objxml; global object to host XMLHttp object var xmlhttptimeout; global to hold XMLHTTP timeout function var g_statusstr = LANG.statusStr; var g_cachedefeat = '?' + (new Date()).getTime().toString(); used to force reload of popup data graphs, var g_units = {; var g_temp = {; var g_dew = {; var g_wind = {; var g_dir = {; var g_rain = {; var g_rrate = {; var g_baro = {; var g_hum = {; var g_led = {; var gauge_temp, gauge_dew, gauge_rain, gauge_rrate, gauge_hum, gauge_baro, gauge_wind, gauge_wdir, gauge_status, gauge_timer, gauges_wdirlcd, gauge_led; Gauge look'n'feel settings var minmaxarea = 'rgba(212, 132, 134, 0.3)'; area sector for todays max/min. (red, green, blue, transparency) var g_framedesign = steelseries.framedesign.tilted_gray; var g_background = steelseries.backgroundcolor.beige; var g_foreground = steelseries.foregroundtype.type3; var g_pointer = steelseries.pointertype.type8; De tijd in sec. waarop de data wordt ververst De plaatjes bij mij op /Cumulus/images Aantal eenheden van RealtimeT.txt UV en Zon gegevens toegevoegd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 235

237 var g_pointercolour = steelseries.colordef.blue; var g_gaugetype = steelseries.gaugetype.type4; var g_lcdcolour = steelseries.lcdcolor.standard; var g_knob = steelseries.knobtype.standard_knob; var g_knobstyle = steelseries.knobstyle.silver; var g_labelformat = steelseries.labelnumberformat.standard; function init() { test for canvas support before we do anything else! var test_canvas = document.createelement('canvas'); if (!test_canvas.getcontext) { document.getelementbyid('content').innerhtml = LANG.canvasnosupport; settimeout(oldbrowsers, 3000); return; test for some canvas features we use that are missing in some browsers var test_ctx = test_canvas.getcontext('2d'); var test1 = typeof test_ctx.linecap === 'string'; var test2 = typeof test_ctx.linejoin === 'string'; var test3 = typeof test_ctx.createlineargradient === 'function'; var test4 = typeof test_ctx.createradialgradient === 'function'; if (!test1!test2!test3!test4) { document.getelementbyid('content').innerhtml = LANG.canvassupport; settimeout(oldbrowsers, 3000); return; define temperature gauge start values g_temp.sections = createtempsections(0, true); g_temp.areas = []; g_temp.minvalue = 0; g_temp.maxvalue = 20; g_temp.title = LANG.temp_title_out; g_temp.value = 0; g_temp.maxminvisible = false; g_temp.selected = 'out'; define dew point gauge start values g_dew.sections = createtempsections(0, true); g_dew.areas = []; g_dew.minvalue = 0; g_dew.maxvalue = 40; g_dew.title = LANG.apptemp_title; g_dew.value = 0; g_dew.selected = 'app'; g_dew.minmeasuredvisible = false; g_dew.maxmeasuredvisible = false; define rain gauge start values g_rain.maxvalue = 10; g_rain.value = 0; g_rain.title = LANG.rain_title; g_rain.lcddecimals = 1; g_rain.scaledecimals = 1; g_rain.labelnumberformat = g_labelformat; define rain rate gauge start values g_rrate.maxmeasured = 0; g_rrate.maxvalue = 10; g_rrate.value = 0; g_rrate.title = LANG.rrate_title; g_rrate.lcddecimals = 1; g_rrate.scaledecimals = 0; g_rrate.labelnumberformat = g_labelformat; define humidity gauge start values g_hum.areas = []; g_hum.value = 0; g_hum.title = LANG.hum_title_out; g_hum.selected = 'out'; define pressure/barometer gauge start values g_baro.sections = []; g_baro.areas = []; g_baro.minvalue = 960; g_baro.maxvalue = 1050; g_baro.value = 960; g_baro.title = LANG.baro_title; g_baro.lcddecimals = 1; g_baro.scaledecimals = 0; g_baro.labelnumberformat = g_labelformat; define wind gauge start values UV en Zon gegevens toegevoegd Gewijzigd van 40 naar 20. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 236

238 g_wind.maxvalue = 20; g_wind.areas = []; g_wind.maxmeasured = 0; g_wind.value = 0; g_wind.title = LANG.wind_title; define wind direction gauge start values g_dir.value = 0; g_dir.selected = 'lat'; define led indicator g_led.on = false; g_led.blink = false; g_led.oldblink = g_led.blink; g_led.title = LANG.led_title; g_led.colour = steelseries.ledcolor.green_led; g_led.oldcolour = g_led.colour; set some default units cumulus.tempunit = ' C'; cumulus.rainunit = 'mm'; cumulus.pressunit = 'hpa'; cumulus.windunit = 'mph'; enable popup data ddimgtooltip.showtips = g_showpopupdata; draw empty gauges drawgauges(); set the script version on the page document.getelementbyid('scriptver').innerhtml = g_scriptver; let's set some values... getrealtime(); function drawgauges() { drawled(); drawstatus(); drawtimer(); drawtemp(); drawdew(); drawrain(); drawrrate(); drawhum(); drawbaro(); drawwind(); drawdir(); function drawled() { create led indicator if (document.getelementbyid('canvas_led')) { gauge_led = new steelseries.led( 'canvas_led', { size : 25, ledcolor : g_led.colour ); if (g_led.on) { gauge_led.toggleled(); document.getelementbyid('canvas_led').title = g_led.title; function drawstatus() { create forecast display if (document.getelementbyid('canvas_status')) { gauge_status = new steelseries.displaysingle( 'canvas_status', { width : 550, height : 25, lcdcolor : g_lcdcolour, unitstringvisible : false, value : g_statusstr, digitalfont : g_digitalforecast, valuesnumeric : false, autoscroll : true ); function drawtimer() { create timer display if (document.getelementbyid('canvas_timer')) { UV en Zon gegevens toegevoegd Verwijders door Henk UV en Zon gegevens toegevoegd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 237

239 gauge_timer = new steelseries.displaysingle( 'canvas_timer', { width : (g_count.tostring().length * 13) + (LANG.timer.length * 6), height : 25, lcdcolor : g_lcdcolour, lcddecimals : 0, unitstring : LANG.timer, unitstringvisible : true, digitalfont : g_digitalfont, value : count ); function drawtemp() { create temperature radial gauge if (document.getelementbyid('canvas_temp')) { gauge_temp = new steelseries.radial( 'canvas_temp', { size : g_size, gaugetype : g_gaugetype, section : g_temp.sections, area : g_temp.areas, minvalue : g_temp.minvalue, maxvalue : g_temp.maxvalue, thresholdvisible : false, minmeasuredvaluevisible : g_temp.maxminvisible, maxmeasuredvaluevisible : g_temp.maxminvisible, ledvisible : false, titlestring : g_temp.title, unitstring : cumulus.tempunit, lcddecimals : 1, framedesign : g_framedesign, backgroundcolor : g_background, foregroundtype : g_foreground, pointertype : g_pointer, pointercolor : g_pointercolour, knobtype : g_knob, knobstyle : g_knobstyle, lcdcolor : g_lcdcolour, digitalfont : g_digitalfont, labelnumberformat : g_labelformat ); gauge_temp.setvalue(g_temp.value); function drawdew() { create dew point radial gauge if (document.getelementbyid('canvas_dew')) { gauge_dew = new steelseries.radial( 'canvas_dew', { size : g_size, gaugetype : g_gaugetype, section : g_dew.sections, area : g_dew.areas, minvalue : g_dew.minvalue, maxvalue : g_dew.maxvalue, minmeasuredvaluevisible : false, maxmeasuredvaluevisible : false, thresholdvisible : false, ledvisible : false, titlestring : g_dew.title, unitstring : cumulus.tempunit, lcddecimals : 1, framedesign : g_framedesign, backgroundcolor : g_background, foregroundtype : g_foreground, pointertype : g_pointer, pointercolor : g_pointercolour, knobtype : g_knob, knobstyle : g_knobstyle, lcdcolor : g_lcdcolour, digitalfont : g_digitalfont, labelnumberformat : g_labelformat ); gauge_dew.setvalue(g_dew.value); Temp Dauwpunt-Temp UV en Zon gegevens toegevoegd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 238

240 function drawrain() { create rain radial bargraph gauge if (document.getelementbyid('canvas_rain')) { gauge_rain = new steelseries.radialbargraph( 'canvas_rain', { size : g_size, gaugetype : g_gaugetype, minvalue : 0, maxvalue : g_rain.maxvalue, titlestring : g_rain.title, unitstring : cumulus.rainunit, thresholdvisible : false, minmeasuredvaluevisible : false, maxmeasuredvaluevisible : false, ledvisible : false, lcddecimals : g_rain.lcddecimals, framedesign : g_framedesign, backgroundcolor : g_background, foregroundtype : g_foreground, valuecolor : g_pointercolour, lcdcolor : g_lcdcolour, digitalfont : g_digitalfont, labelnumberformat : g_rain.labelnumberformat, fractionalscaledecimals : g_rain.scaledecimals ); gauge_rain.setvalue(g_rain.value); function drawrrate() { create rain rate radial gauge if (document.getelementbyid('canvas_rrate')) { gauge_rrate = new steelseries.radial( 'canvas_rrate', { size : g_size, gaugetype : g_gaugetype, minvalue : 0, maxvalue : g_rrate.maxvalue, thresholdvisible : false, maxmeasuredvaluevisible : true, minmeasuredvaluevisible : false, ledvisible : false, titlestring : g_rrate.title, unitstring : cumulus.rainunit + '/h', lcddecimals : g_rrate.lcddecimals, framedesign : g_framedesign, backgroundcolor : g_background, foregroundtype : g_foreground, pointertype : g_pointer, pointercolor : g_pointercolour, knobtype : g_knob, knobstyle : g_knobstyle, lcdcolor : g_lcdcolour, digitalfont : g_digitalfont, labelnumberformat : g_rrate.labelnumberformat, fractionalscaledecimals : g_rrate.scaledecimals ); gauge_rrate.setmaxmeasuredvalue(g_rrate.maxmeasured); gauge_rrate.setvalue(g_rrate.value); function drawhum() { create humidity radial gauge if (document.getelementbyid('canvas_hum')) { gauge_hum = new steelseries.radial( 'canvas_hum', { size : g_size, gaugetype : g_gaugetype, minvalue : 0, maxvalue : 100, section : [ steelseries.section(0, 20, 'rgba(255,255,0,0.3)'), steelseries.section(20, 80, 'rgba(0,255,0,0.3)'), steelseries.section(80, 100, 'rgba(255,0,0,0.3)') Regen Regen snelheid Luchtvotigheid Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 239

241 ], area : g_hum.areas, thresholdvisible : false, minmeasuredvaluevisible : false, maxmeasuredvaluevisible : false, ledvisible : false, titlestring : g_hum.title, unitstring : '%', lcddecimals : 1, framedesign : g_framedesign, backgroundcolor : g_background, foregroundtype : g_foreground, pointertype : g_pointer, pointercolor : g_pointercolour, knobtype : g_knob, knobstyle : g_knobstyle, lcdcolor : g_lcdcolour, digitalfont : g_digitalfont, labelnumberformat : g_labelformat ); gauge_hum.setvalue(g_hum.value); function drawbaro() { create pressure/barometric radial gauge if (document.getelementbyid('canvas_baro')) { gauge_baro = new steelseries.radial( 'canvas_baro', { size : g_size, gaugetype : g_gaugetype, minvalue : g_baro.minvalue, maxvalue : g_baro.maxvalue, nicescale : false, thresholdvisible : false, minmeasuredvaluevisible : false, maxmeasuredvaluevisible : false, section : g_baro.sections, area : g_baro.areas, titlestring : g_baro.title, unitstring : cumulus.pressunit, lcddecimals : g_baro.lcddecimals, ledvisible : false, framedesign : g_framedesign, backgroundcolor : g_background, foregroundtype : g_foreground, pointertype : g_pointer, pointercolor : g_pointercolour, knobtype : g_knob, knobstyle : g_knobstyle, lcdcolor : g_lcdcolour, digitalfont : g_digitalfont, labelnumberformat : g_baro.labelnumberformat, fractionalscaledecimals : g_baro.scaledecimals ); gauge_baro.setvalue(g_baro.value); function drawwind() { create wind speed radial gauge if (document.getelementbyid('canvas_wind')) { gauge_wind = new steelseries.radial( 'canvas_wind', { size : g_size, gaugetype : g_gaugetype, area : g_wind.areas, minvalue : 0, maxvalue : g_wind.maxvalue, section : [], thresholdvisible : false, minmeasuredvaluevisible : false, maxmeasuredvaluevisible : true, ledvisible : false, titlestring : g_wind.title, unitstring : cumulus.windunit, lcddecimals : 1, Luchtvotigheid Barrometer Windsnelheid Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 240

242 framedesign : g_framedesign, backgroundcolor : g_background, foregroundtype : g_foreground, pointertype : g_pointer, pointercolor : g_pointercolour, knobtype : g_knob, knobstyle : g_knobstyle, lcdcolor : g_lcdcolour, digitalfont : g_digitalfont, labelnumberformat : g_labelformat ); gauge_wind.setmaxmeasuredvalue(g_wind.maxmeasured); gauge_wind.setvalue(g_wind.value); function drawdir() { create wind direction/compass radial gauge if (document.getelementbyid('canvas_dir')) { gauge_wdir = new steelseries.compass( 'canvas_dir', { size : g_size, framedesign : g_framedesign, pointercolor : g_pointercolour, knobtype : g_knob, knobstyle : g_knobstyle, backgroundcolor : g_background, foregroundtype : g_foreground, pointsymbols : LANG.compass ); gauge_wdir.setvalue(g_dir.value); create wind direction lcd gauge if (document.getelementbyid('canvas_dirlcd')) { gauges_wdirlcd = new steelseries.displaymulti( 'canvas_dirlcd', { width: 75, height: 40, lcdcolor: g_lcdcolour, lcddecimals: 0, unitstring: ' ', unitstringvisible: true, digitalfont: g_digitalfont, value: g_dir.value ); function doupdate() { first time only, setup units etc if (g_firstrun) { dofirst(); if (g_refreshgraphs) { g_cachedefeat = '?' + (new Date()).getTime().toString(); if (gauge_temp) { dotemp(); if (gauge_dew) { dodew(); if (gauge_baro) { dobaro(); if (gauge_rain) { dorain(); if (gauge_rrate){ dorrate(); if (gauge_hum) { dohum(); if (gauge_wind) { dowind(); if (gauge_wdir) { dodir(); if (g_refreshgraphs) { g_refreshgraphs = false; countdown(); function getrealtime() { setstatus(lang.statusmsg); if (objxml === undefined) { if (window.xmlhttprequest) { object of the current windows objxml = new XMLHttpRequest(); Firefox, Safari, IE7,8... else if (window.activexobject) { ActiveX version - Internet Explorer 5,6 try { objxml = new ActiveXObject('Msxml2.XMLHTTP'); Windsnelheid Wind richting UV en Zon gegevens toegevoegd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 241

243 catch (e) { try { objxml = new ActiveXObject('Microsoft.XMLHTTP'); catch (E) { objxml = false; setstatus(lang.statusnohttpobj); if (objxml) { check response objxml.onreadystatechange = checkrtresp; check for errors objxml.onabort = checkrterror; objxml.onerror = checkrterror; objxml.ontimeout = checkrterror; if (objxml) { use date # as cache defeat objxml.open('get', realtimeurl + '?' + (new Date()).getTime().toString(), true); objxml.send(null); Go get it xmlhttptimeout = settimeout(ajaxtimeout, 10000); set a 10 second timeout function ajaxtimeout() { objxml.abort(); function checkrtresp() { if (objxml.readystate === 4) { complete? stop the timeout function cleartimeout(xmlhttptimeout); if (objxml.status === 200) { httperror = 0; OK, validated so far... get the realtime.txt into a handy Cumulus. object var fields = parserealtimegauges(objxml.responsetext); and check we have the expected number if (fields === g_numberofrealtimefields) { OK, we have the expected number of data fields mainpulate the last rain time into something more friendly var str = cumulus.lastraintipiso.split(' '); var dt = str[0].split('-'); var tm = str[1].split(':'); var today = new Date(); today.sethours(0, 0, 0, 0); var then = new Date(dt[0], dt[1] - 1, dt[2], tm[0], tm[1], 0, 0); if (then.getdate() >= today.getdate()) { cumulus.lastrained = LANG.LastRainedT_info + ' ' + str[1]; else if (then.getdate() + 1 >= today.getdate()) { cumulus.lastrained = LANG.LastRainedY_info + ' ' + str[1]; else { cumulus.lastrained = then.getdate().tostring() + ' ' + LANG.months[then. getmonth()] + ' ' + LANG.at + ' ' + str[1]; clean up temperature units - remove html encoding cumulus.tempunit.replace(' ',' '); Check for station off-line var now = new Date(); if (+cumulus.build < 999) { then = now; Cumulus did not support #timeutc tag before build 999 else { then = eval("date.utc("+cumulus.timeutc+")"); if (now-then > g_stationofflinetimeout * 60 * 1000) { var tm; var elapsedmins = Math.floor((now-then) / (1000 * 60)); the realtimegauges.txt file isn't being updated g_led.colour = steelseries.ledcolor.red_led; g_led.title = LANG.led_title_offline; if (elapsedmins < 120) { up to 2 hours ago tm = elapsedmins.tostring() + " " + LANG.StatusMinsAgo; else if (elapsedmins < 2 * 24 * 60) { up to 48 hours ago tm = Math.floor(elapsedMins/60).toString() + " " + LANG. Henk heeft deze tekst verwijders. Technisch maakt dit niet uit Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 242

244 StatusHoursAgo; else { days ago! tm = Math.floor(elapsedMins/(60*24)).toString() + " " + LANG. StatusDaysAgo; g_led.blink = true; cumulus.forecast = LANG.led_title_offline + " " + LANG.StatusLastUpdate + " " + tm; else if (+cumulus.sensorcontactlost === 1) { Fine Offset sensor status g_led.colour = steelseries.ledcolor.red_led; g_led.title = LANG.led_title_lost; g_led.blink = true; cumulus.forecast = LANG.led_title_lost; else { g_led.colour = steelseries.ledcolor.green_led; g_led.title = LANG.led_title_ok; g_led.blink = false; if (g_led.colour!== g_led.oldcolour) { if (gauge_led) gauge_led.setledcolor(g_led.colour); g_led.oldcolour = g_led.colour; if (g_led.blink!== g_led.oldblink) { if (gauge_led) gauge_led.blink(g_led.blink); g_led.oldblink = g_led.blink; setled(true, g_led.title); setstatus(cumulus.forecast.trim()); doupdate(); else { oh-oh! Thhe number of data fields isn't what we expected set an error message setstatus(lang.realtimecorrupt); setled(false, LANG.led_title_unknown); count = 4; 3 second retry countdown(); else if (objxml.status > 200) { setled(false, LANG.led_title_unknown); httperror = objxml.status; count = 6; 5 seconds countdown(); function checkrterror() { setled(false, LANG.led_title_unknown); httperror = objxml.status; count = 6; 5 seconds countdown(); function setstatus(str) { g_statusstr = str; if (gauge_status) { gauge_status.setvalue(str); function setled(onoff, title) { g_led.title = title; if (gauge_led) { gauge_led.setledonoff(onoff); document.getelementbyid('canvas_led').title = g_led.title; function countdown() { count -= 1; if (gauge_timer) { gauge_timer.setvalue(count); if (count === 0) { getrealtime(); count = g_count; else { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 243

245 g_countdowntimer = settimeout(countdown, 1000); if (httperror!== 0) { setstatus(lang.statushttp + ' ' + httperror + ' ' + LANG.StatusRetryIn); function dotemp(rad) { if rad isn't specified, just use existing value var sel = rad === undefined? g_temp.selected : rad.value; if (sel === 'out') { g_temp.low = +cumulus.temptl.replace(',', '.'); g_temp.high = +cumulus.tempth.replace(',', '.'); g_temp.value = +cumulus.temp.replace(',', '.'); g_temp.title = LANG.temp_title_out; g_temp.loc = LANG.temp_out_info; else { g_temp.low = +cumulus.intemp.replace(',', '.'); g_temp.high = +cumulus.intemp.replace(',', '.'); g_temp.value = +cumulus.intemp.replace(',', '.'); g_temp.title = LANG.temp_title_in; g_temp.loc = LANG.temp_in_info; g_temp.maxminvisible = false; has the gauge type changed? if (g_temp.selected!== sel) { g_temp.selected = sel; Change gauge title gauge_temp.settitlestring(g_temp.title); gauge_temp.setmaxmeasuredvaluevisible(g_temp.maxminvisible); gauge_temp.setminmeasuredvaluevisible(g_temp.maxminvisible); document.getelementbyid('imgtip0_img').src = imgpathurl + g_tipimgs[0][g_temp. selected === 'out'? 0 : 1] + g_cachedefeat; auto scale the ranges var scalestep; if (cumulus.tempunit.indexof('c')!== -1) { scalestep = 10; else { Veranderd van 20 naar 10. scalestep = 30; while (g_temp.low < g_temp.minvalue) { g_temp.minvalue -= scalestep; g_temp.maxvalue -= scalestep; while (g_temp.high > g_temp.maxvalue) { g_temp.minvalue += scalestep; g_temp.maxvalue += scalestep; if (g_temp.minvalue!== gauge_temp.getminvalue()) { g_temp.sections = createtempsections(g_temp.minvalue, (cumulus.tempunit.indexof('c')!== -1)? true : false); gauge_temp.setminvalue(g_temp.minvalue); gauge_temp.setmaxvalue(g_temp.maxvalue); gauge_temp.setsection(g_temp.sections); gauge_temp.setvalue(g_temp.minvalue); if (g_temp.selected === 'out') { g_temp.areas = [steelseries.section(g_temp.low, g_temp.high, minmaxarea)]; else { g_temp.areas = []; gauge_temp.setarea(g_temp.areas); gauge_temp.setvalueanimated(g_temp.value); if (ddimgtooltip.showtips) { update tooltip var tip; if (g_temp.selected === 'out') { tip = g_temp.loc + ' - ' + LANG.lowestF_info + ': ' + cumulus.temptl + cumulus. tempunit + ' ' + LANG.at + ' ' + cumulus.ttemptl + ' ' + LANG.highestF_info + ': ' + cumulus.tempth + cumulus.tempunit + ' ' + LANG. at + ' ' + cumulus.ttempth + '<br />' + LANG.temp_trend_info + ': ' + cumulus.temptrendtext; else { Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 244

246 tip = g_temp.loc + ': ' + cumulus.intemp + cumulus.tempunit; document.getelementbyid('imgtip0_txt').innerhtml = tip; if (g_refreshgraphs) { document.getelementbyid('imgtip0_img').src = imgpathurl + g_tipimgs[0][g_temp. selected === 'out'? 0 : 1] + g_cachedefeat; function dodew(rad) { var tip; if rad isn't specified, just use existing value var sel = rad === undefined? g_dew.selected : rad.value; switch (sel) { case 'dew': dew point g_dew.low = +cumulus.dewpointtl.replace(',', '.'); g_dew.high = +cumulus.dewpointth.replace(',', '.'); g_dew.value = +cumulus.dew.replace(',', '.'); g_dew.areas = [steelseries.section(g_dew.low, g_dew.high, minmaxarea)]; g_dew.title = LANG.dew_title; g_dew.minmeasuredvisible = false; g_dew.maxmeasuredvisible = false; tip = LANG.dew_info + ':' + '<br />' + '- ' + LANG.lowest_info + ': ' + cumulus.dewpointtl + cumulus.tempunit + ' ' + LANG.at + ' ' + cumulus.tdewpointtl + ' ' + LANG.highest_info + ': ' + cumulus.dewpointth + cumulus.tempunit + ' ' + LANG.at + ' ' + cumulus.tdewpointth; case 'app': apparent temperature g_dew.low = +cumulus.apptemptl.replace(',', '.'); g_dew.high = +cumulus.apptempth.replace(',', '.'); g_dew.value = +cumulus.apptemp.replace(',', '.'); g_dew.areas = [steelseries.section(g_dew.low, g_dew.high, minmaxarea)]; g_dew.title = LANG.apptemp_title; g_dew.minmeasuredvisible = false; g_dew.maxmeasuredvisible = false; tip = tip = LANG.apptemp_info + ':' + '<br />' + '- ' + LANG.lowestF_info + ': ' + cumulus.apptemptl + cumulus.tempunit + ' ' + LANG.at + ' ' + cumulus.tapptemptl + ' ' + LANG.highestF_info + ': ' + cumulus.apptempth + cumulus.tempunit + ' ' + LANG.at + ' ' + cumulus.tapptempth; case 'wnd': wind chill g_dew.low = +cumulus.wchilltl.replace(',', '.'); g_dew.high = +cumulus.wchill.replace(',', '.'); g_dew.value = +cumulus.wchill.replace(',', '.'); g_dew.areas = []; g_dew.title = LANG.chill_title; g_dew.minmeasuredvisible = true; g_dew.maxmeasuredvisible = false; tip = LANG.chill_info + ':' + '<br />' + '- ' + LANG.lowest_info + ': ' + cumulus.wchilltl + cumulus.tempunit + ' ' + LANG.at + ' ' + cumulus.twchilltl; case 'hea': heat index g_dew.low = +cumulus.heatindex.replace(',', '.'); g_dew.high = +cumulus.heatindexth.replace(',', '.'); g_dew.value = +cumulus.heatindex.replace(',', '.'); g_dew.areas = []; g_dew.title = LANG.heat_title; g_dew.minmeasuredvisible = false; g_dew.maxmeasuredvisible = true; tip = LANG.heat_info + ':' + '<br />' + '- ' + LANG.highest_info + ': ' + cumulus.heatindexth + cumulus.tempunit + ' ' + LANG.at + ' ' + cumulus.theatindexth; case 'hum': humidex g_dew.low = +cumulus.humidex.replace(',', '.'); g_dew.high = +cumulus.humidex.replace(',', '.'); g_dew.value = +cumulus.humidex.replace(',', '.'); g_dew.areas = []; UV en Zon gegevens toegevoegd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 245

247 g_dew.title = LANG.humdx_title; g_dew.minmeasuredvisible = false; g_dew.maxmeasuredvisible = false; tip = LANG.humdx_info + ': ' + cumulus.humidex + cumulus.tempunit; if (g_dew.selected!== sel) { g_dew.selected = sel; change gauge title gauge_dew.settitlestring(g_dew.title); auto scale the ranges var scalestep; if (cumulus.tempunit.indexof('c')!== -1) { scalestep = 20; else { scalestep = 30; while (g_dew.low < g_dew.minvalue) { g_dew.minvalue -= scalestep; g_dew.maxvalue -= scalestep; while (g_dew.high > g_dew.maxvalue) { g_dew.minvalue += scalestep; g_dew.maxvalue += scalestep; if (g_dew.minvalue!== gauge_dew.getminvalue()) { g_dew.sections = createtempsections(g_dew.minvalue, (cumulus.tempunit.indexof('c')!== -1)? true : false); gauge_dew.setminvalue(g_dew.minvalue); gauge_dew.setmaxvalue(g_dew.maxvalue); gauge_dew.setsection(g_dew.sections); gauge_dew.setvalue(g_dew.minvalue); gauge_dew.setminmeasuredvaluevisible(g_dew.minmeasuredvisible); gauge_dew.setmaxmeasuredvaluevisible(g_dew.maxmeasuredvisible); gauge_dew.setminmeasuredvalue(g_dew.low); gauge_dew.setmaxmeasuredvalue(g_dew.high); gauge_dew.setarea(g_dew.areas); gauge_dew.setvalueanimated(g_dew.value); if (ddimgtooltip.showtips) { update tooltip document.getelementbyid('imgtip1_txt').innerhtml = tip; if (g_refreshgraphs) { document.getelementbyid('imgtip1_img').src = imgpathurl + g_tipimgs[1] + g_cachedefeat; function dorain() { g_rain.value = +cumulus.rfall.replace(',', '.'); if (cumulus.rainunit === 'mm') { 10, 20, g_rain.maxvalue = Math.max(Math.ceil(g_rain.value / 10) * 10, 10); else { inches 0.5, 1.0, 1.5, g_rain.maxvalue = Math.max(Math.ceil(+cumulus.rfall.replace(',', '.') * 2) * 0.5, 0.5); inches 1.0, 2.0, g_rain.maxvalue = Math.max(Math.ceil(g_rain.value), 1.0); if (g_rain.maxvalue!== gauge_rain.getmaxvalue()) { gauge_rain.setmaxvalue(g_rain.maxvalue); gauge_rain.setvalueanimated(g_rain.value); if (ddimgtooltip.showtips) { update tooltip document.getelementbyid('imgtip2_txt').innerhtml = LANG.LastRain_info + ': ' + cumulus.lastrained; if (g_refreshgraphs) { document.getelementbyid('imgtip2_img').src = imgpathurl + g_tipimgs[2] + g_cachedefeat; function dorrate() { Door Henk veranderd van 20 naar 10 Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 246

248 g_rrate.value = +cumulus.rrate.replace(',', '.'); g_rrate.maxmeasured = +cumulus.rratetm.replace(',', '.'); if (cumulus.rainunit === 'mm') { 10, 20, g_rrate.maxvalue = Math.max(Math.ceil(g_rrate.maxMeasured / 10) * 10, 10); else { inches 0.5, 1.0, 1.5, g_rrate.maxvalue = Math.max(Math.ceil(+cumulus.rrateTM.replace(',', '.') * 2) * 0.5, 0.5); inches 1.0, 2.0, g_rrate.maxvalue = Math.max(Math.ceil(g_rrate.maxMeasured), 1.0); if (g_rrate.maxvalue!== gauge_rrate.getmaxvalue()) { gauge_rrate.setmaxvalue(g_rrate.maxvalue); gauge_rrate.setvalueanimated(g_rrate.value); gauge_rrate.setmaxmeasuredvalue(g_rrate.maxmeasured); if (ddimgtooltip.showtips) { update tooltip var tip = LANG.rrate_info + ':' + '<br />' + '- ' + LANG.maximum_info + ': ' + cumulus.rratetm + ' ' + cumulus.rainunit + '/h ' + LANG.at + ' ' + cumulus.trratetm + ' ' + LANG.max_hour_info + ': ' + cumulus.hourlyrainth + ' ' + cumulus.rainunit + ' ' + LANG.at + ' ' + cumulus.thourlyrainth; document.getelementbyid('imgtip3_txt').innerhtml = tip; if (g_refreshgraphs) { document.getelementbyid('imgtip3_img').src = imgpathurl + g_tipimgs[3] + g_cachedefeat; function dohum(rad) { if rad isn't specified, just use existing value var sel = rad === undefined? g_hum.selected : rad.value; if (sel === 'out') { g_hum.value = +cumulus.hum.replace(',', '.'); g_hum.areas = [steelseries.section(+cumulus.humtl.replace(',', '.'), +cumulus.humth. replace(',', '.'), minmaxarea)]; g_hum.title = LANG.hum_title_out; else { g_hum.value = +cumulus.inhum.replace(',', '.'); g_hum.areas = []; g_hum.title = LANG.hum_title_in; if (g_hum.selected!== sel) { g_hum.selected = sel; Change gauge title gauge_hum.settitlestring(g_hum.title); gauge_hum.setarea(g_hum.areas); gauge_hum.setvalueanimated(g_hum.value); if (ddimgtooltip.showtips) { update tooltip var tip; if (g_hum.selected === 'out') { tip = LANG.hum_out_info + ':' + '<br />' + '- ' + LANG.minimum_info + ': ' + cumulus.humtl + '% ' + LANG.at + ' ' + cumulus.thumtl + ' ' + LANG.maximum_info + ': ' + cumulus.humth + '% ' + LANG.at + ' ' + cumulus.thumth; else { tip = LANG.hum_in_info + ': ' + cumulus.inhum + '%'; document.getelementbyid('imgtip4_txt').innerhtml = tip; if (g_refreshgraphs) { document.getelementbyid('imgtip4_img').src = imgpathurl + g_tipimgs[4] + g_cachedefeat; function dobaro() { if (cumulus.pressunit === 'in') { min range g_baro.minvalue = Math.min(Math.floor(+cumulus.pressL.replace(',', '.') * 2) * 0.5, 29.0); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 247

249 g_baro.maxvalue = Math.max(Math.ceil(+cumulus.pressH.replace(',', '.') * 2) * 0.5, 30.5); else { hpa or mb : min range g_baro.minvalue = Math.min(Math.floor(+cumulus.pressL.replace(',', '.') / 10) * 10, 970); g_baro.maxvalue = Math.max(Math.ceil(+cumulus.pressH.replace(',', '.') / 10) * 10, 1040); if (g_baro.minvalue!== gauge_baro.getminvalue() g_baro.maxvalue!== gauge_baro. getmaxvalue()) { gauge_baro.setminvalue(g_baro.minvalue); gauge_baro.setmaxvalue(g_baro.maxvalue); g_baro.areas = [ steelseries.section(g_baro.minvalue, +cumulus.pressl.replace(',', '.'), 'rgba(255,0,0,0.5)'), steelseries.section(+cumulus.pressh.replace(',', '.'), g_baro.maxvalue, 'rgba(255,0,0,0.5)'), steelseries.section(+cumulus.presstl.replace(',', '.'), +cumulus.pressth.replace(',', '.'), minmaxarea) ]; g_baro.value = +cumulus.press.replace(',', '.'); gauge_baro.setarea(g_baro.areas); gauge_baro.setvalueanimated(g_baro.value); if (ddimgtooltip.showtips) { update tooltip var tip = LANG.baro_info + ':' + '<br />' + '- ' + LANG.minimum_info + ': ' + cumulus.presstl + ' ' + cumulus.pressunit + ' ' + LANG.at + ' ' + cumulus.tpresstl + ' ' + LANG.maximum_info + ': ' + cumulus.pressth + ' ' + cumulus.pressunit + ' ' + LANG.at + ' ' + cumulus.tpressth + '<br />' + '- ' + LANG.baro_trend_info + ': ' + cumulus.presstrend; document.getelementbyid('imgtip5_txt').innerhtml = tip; if (g_refreshgraphs) { document.getelementbyid('imgtip5_img').src = imgpathurl + g_tipimgs[5] + g_cachedefeat; function dowind() { g_wind.maxmeasured = +cumulus.wgusttm.replace(',', '.'); g_wind.value = +cumulus.wlatest.replace(',', '.'); switch (cumulus.windunit) { case 'mph': case 'kts': g_wind.maxvalue = Math.max(Math.ceil(g_wind.maxMeasured / 10) * 10, 20); case 'm/s': g_wind.maxvalue = Math.max(Math.ceil(+cumulus.wgustTM.replace(',', '.') / 5) * 5, 10); default: g_wind.maxvalue = Math.max(Math.ceil(+cumulus.wgustTM.replace(',', '.') / 20) * 20, 30); g_wind.areas = [ steelseries.section(0, +cumulus.wspeed.replace(',', '.'), 'rgba(0,200,0,0.2)'), steelseries.section(+cumulus.wspeed.replace(',', '.'), +cumulus.wgust.replace(',', '.'), 'rgba(220,0,0,0.2)') ]; if (g_wind.maxvalue!== gauge_wind.getmaxvalue()) { gauge_wind.setmaxvalue(g_wind.maxvalue); gauge_wind.setarea(g_wind.areas); gauge_wind.setmaxmeasuredvalue(g_wind.maxmeasured); gauge_wind.setvalueanimated(g_wind.value); if (ddimgtooltip.showtips) { update tooltip var tip = LANG.tenminavgwind_info + ': ' + cumulus.wspeed + ' ' + cumulus.windunit + ' ' + LANG.maxavgwind_info + ': ' + cumulus.windtm + ' ' + cumulus.windunit + '<br/>' + LANG.tenmingust_info + ': ' + cumulus.wgust + ' ' + cumulus.windunit + Door Henk veranderd Bauford toevoegingen Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 248

250 ' ' + LANG.maxgust_info + ': ' + cumulus.wgusttm + ' ' + cumulus.windunit + ' ' + LANG. at + ' ' + cumulus.twgusttm; document.getelementbyid('imgtip6_txt').innerhtml = tip; if (g_refreshgraphs) { document.getelementbyid('imgtip6_img').src = imgpathurl + g_tipimgs[6] + g_cachedefeat; function dodir(rad) { if rad is specified, use new value if (rad!== undefined) { g_dir.selected = rad.value; if (g_dir.selected === 'lat') { g_dir.value = +cumulus.bearing.replace(',', '.'); g_dir.title = LANG.latest_title; else { g_dir.value = +cumulus.avgbearing.replace(',', '.'); g_dir.title = LANG.tenminavg_title; gauge_wdir.setvalueanimated(g_dir.value); if (gauges_wdirlcd) gauges_wdirlcd.setvalue(g_dir.value); if (ddimgtooltip.showtips) { update tooltip var tip; if (g_dir.selected === 'lat') { tip = LANG.latestwind_info + ': ' + cumulus.wlatest + ' ' + cumulus.windunit + ' - ' + LANG.bearing_info + ' ' + cumulus.bearing + ' (' + getord(+cumulus. bearing) + ')'; else { tip = LANG.tenminavgwind_info + ': ' + cumulus.wspeed + ' ' + cumulus.windunit + ' - ' + LANG.bearing_info + ' ' + cumulus.avgbearing + ' (' + getord(+ cumulus.avgbearing) + ')'; document.getelementbyid('imgtip7_txt').innerhtml = tip; if (g_refreshgraphs) { document.getelementbyid('imgtip7_img').src = imgpathurl + g_tipimgs[7] + g_cachedefeat; function dofirst() { if (cumulus.tempunit.indexof('f')!== -1) { g_temp.minvalue = 30; g_temp.maxvalue = 100; g_temp.value = 30; g_temp.sections = createtempsections(30, false); drawtemp(); g_dew.minvalue = 30; g_dew.maxvalue = 100; g_dew.value = 30; g_dew.sections = createtempsections(30, false); drawdew(); if (cumulus.pressunit === 'in') { g_baro.minvalue = 29; g_baro.maxvalue = 30.5; g_baro.value = 29; g_baro.lcddecimals = 2; g_baro.scaledecimals = 1; g_baro.labelnumberformat = steelseries.labelnumberformat.fractional; drawbaro(); switch (cumulus.windunit) { case 'mph': case 'kts': drawwind(); case 'm/s': g_wind.maxvalue = 10; drawwind(); Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 249

251 default: g_wind.maxvalue = 30; drawwind(); if (cumulus.rainunit === 'in') { g_rain.maxvalue = 1.0; g_rain.lcddecimals = 2; g_rain.scaledecimals = 1; g_rain.labelnumberformat = steelseries.labelnumberformat.fractional; drawrain(); g_rrate.maxvalue = 1.0; g_rrate.lcddecimals = 2; g_rrate.scaledecimals = 1; g_rrate.labelnumberformat = steelseries.labelnumberformat.fractional; drawrrate(); kick off a timer for graphic updates setinterval(function(){g_refreshgraphs=true;, g_graphupdatetime * 60 * 1000); g_firstrun = false; function createtempsections(min, celcius) { var section; if (celcius) { switch (min) { case - 40: section = [steelseries.section(-40, 0, 'rgba(20, 20, 200, 0.3)')]; case - 30: section = [steelseries.section(-20, -0, 'rgba(20, 20, 200, 0.3)'), steelseries. Section(0, 10, 'rgba(100, 100, 220, 0.3)'), steelseries.section(10, 20, 'rgba(0, 220, 0, 0.3)')]; case - 20: section = [steelseries.section(-20, -10, 'rgba(20, 20, 200, 0.3)'), steelseries. Section(-10, -0, 'rgba(100, 100, 220, 0.3)'), steelseries.section(0, 10, 'rgba(0, 220, 0, 0.3)')]; case - 10: section = [steelseries.section(-10, -0, 'rgba(20, 20, 200, 0.3)'), steelseries. Section(0, 10, 'rgba(100, 100, 220, 0.3)'), ]; case 0: section = [steelseries.section(0, 10, 'rgba(100, 100, 220, 0.3)'), steelseries. Section(10, 20, 'rgba(0, 220, 0, 0.3)'), ]; case 10: section = [steelseries.section(10, 20, 'rgba(0, 220, 0, 0.3)'), steelseries. Section(20, 30, 'rgba(220, 220, 0, 0.3)'), ]; case 20: section = [steelseries.section(20, 30, 'rgba(0, 220, 0, 0.3)'), steelseries. Section(30, 45, 'rgba(220, 220, 0, 0.3)'), steelseries.section(45, 60, 'rgba(255, 0, 0, 0.3)')]; else { switch (min) { case - 30: section = [steelseries.section(-30, 32, 'rgba(20, 20, 200, 0.3)'), steelseries. Section(32, 40, 'rgba(100, 100, 220, 0.3)')]; case 0: section = [steelseries.section(0, 32, 'rgba(20, 20, 200, 0.3)'), steelseries. Section(32, 50, 'rgba(100, 100, 220, 0.3)'), steelseries.section(50, 70, 'rgba(0, 220, 0, 0.3)')]; case 30: section = [steelseries.section(30, 32, 'rgba(20, 20, 200, 0.3)'), steelseries. Section(32, 50, 'rgba(100, 100, 220, 0.3)'), steelseries.section(50, 85, 'rgba(0, 220, 0, 0.3)'), steelseries.section(85, 100, 'rgba(220, 220, 0, 0.3)')]; case 60: section = [steelseries.section(60, 85, 'rgba(0, 220, 0, 0.3)'), steelseries. Section(85, 110, 'rgba(220, 220, 0, 0.3)'), steelseries.section(110, 130, 'rgba(255, 0, 0, 0.3)')]; Toevoeging -30 en de rest van de code Toevoeging -10 en de rest van de code Toevoeging -10 en de rest van de code Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 250

252 return section; ; function changelang() { first reset the LANG object to your desired language, then call this function var i, tmp, sel; reset the globals to the new language temperature if (document.getelementbyid('rad_temp1').checked) { g_temp.title = LANG.temp_title_out; else { g_temp.title = LANG.temp_title_in; dew point etc tmp = document.getelementsbyname('rad_dew'); for (i = 0; i <tmp.length; i++) { if (tmp[i].checked) { sel = tmp[i].value; switch (sel) { case 'dew': g_dew.title = LANG.dew_title; case 'app': g_dew.title = LANG.apptemp_title; case 'wnd': g_dew.title = LANG.chill_title; case 'hea': g_dew.title = LANG.heat_title; case 'hum': g_dew.title = LANG.humdx_title; rain g_rain.title = LANG.rain_title; rrate g_rrate.title = LANG.rrate_title; humidty if (document.getelementbyid('rad_hum1').checked) { g_hum.title = LANG.hum_title_out; else { g_hum.title = LANG.hum_title_in; barometer g_baro.title = LANG.baro_title; wind g_wind.title = LANG.wind_title; wind dir if (document.getelementbyid('rad_temp1').checked) { g_dir.title = LANG.latest_title; else { g_dir.title = LANG.tenminavg_title; can't do anything about the LED and status at the moment :( g_led.title = LANG.led_title; Update all the title string and call all the gauge functions to update popup data if (gauge_temp) { gauge_temp.settitlestring(g_temp.title); dotemp(); if (gauge_dew) { gauge_dew.settitlestring(g_dew.title); dodew(); if (gauge_baro) { gauge_baro.settitlestring(g_baro.title); dobaro(); UV en Zon gegevens toegevoegd UV en Zon gegevens toegevoegd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 251

253 if (gauge_rain) { gauge_rain.settitlestring(g_rain.title); dorain(); if (gauge_rrate){ gauge_rrate.settitlestring(g_rrate.title); dorrate(); if (gauge_hum) { gauge_hum.settitlestring(g_hum.title); dohum(); if (gauge_wind) { gauge_wind.settitlestring(g_wind.title); dowind(); if (gauge_wdir) { gauge_wdir.setpointsymbols(lang.compass); dodir(); update the web page radio buttons if (document.getelementbyid('lab_temp1')) { document.getelementbyid('lab_temp1').innerhtml = LANG.temp_out_web; if (document.getelementbyid('lab_temp2')) { document.getelementbyid('lab_temp2').innerhtml = LANG.temp_in_web; if (document.getelementbyid('lab_dew1')) { document.getelementbyid('lab_dew1').innerhtml = LANG.dew_web; if (document.getelementbyid('lab_dew2')) { document.getelementbyid('lab_dew2').innerhtml = LANG.apptemp_web; if (document.getelementbyid('lab_dew3')) { document.getelementbyid('lab_dew3').innerhtml = LANG.chill_web; if (document.getelementbyid('lab_dew4')) { document.getelementbyid('lab_dew4').innerhtml = LANG.heat_web; if (document.getelementbyid('lab_dew5')) { document.getelementbyid('lab_dew5').innerhtml = LANG.humdx_web; if (document.getelementbyid('lab_hum1')) { document.getelementbyid('lab_hum1').innerhtml = LANG.hum_out_web; if (document.getelementbyid('lab_hum2')) { document.getelementbyid('lab_hum2').innerhtml = LANG.hum_in_web; if (document.getelementbyid('lab_dir1')) { document.getelementbyid('lab_dir1').innerhtml = LANG.latest_web; if (document.getelementbyid('lab_dir2')) { document.getelementbyid('lab_dir2').innerhtml = LANG.tenminavg_web; function getord(d) { convert to range while (d >= 360) { d -= 360; var deg = Math.ceil((d ) / 22.5); return (LANG.coords[deg - 1]); function oldbrowsers() { window.location = oldgauges; String.prototype.trim = function () { return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 252

254 4.2.5 Bron: language_nl.js Opbouw eigen pagina: Ik heb hier niets aan veranderd. Gaike - gauges-ss_v language_nl.js /* * A language file for the starter SteelSeries gauges page for Cumulus * * Created by Mark Crossley, July 2011 * French translation by Ray of Tzouhalem-Maple Bay Weather * * Version: * Updated: 16 August 2011 * * File encoding = UTF-8 */ ====================================================================================================================== Nederlands ====================================================================================================================== var LANG_NL = {; LANG_NL.canvasnosupport = "Geen HTML5 Canvas ondersteuning in uw browser... Sorry..." + "<br />" + "Probeer upgrading your browser to a more recent version - nearly all browsers support Canvas now, even IE9!" + "<br /><br />" + "Redirecting you to an 'old' gauges page..."; LANG_NL.canvassupport = "Sorry! Although your browser supports HTML5 Canvas, it does not support all the canvas features required." + "<br /><br />" + "Redirecting you to an 'old' gauges page..."; LANG_NL.led_title = "Remote sensor status onbekend"; LANG_NL.led_title_ok = "Remote sensor OK"; LANG_NL.led_title_lost = "Remote sensor contact verloren!"; LANG_NL.led_title_unknown = "Remote sensor status onbekend!"; LANG_NL.led_title_offline = "Het weerstation is offline."; LANG_NL.statusStr = "Loading..."; LANG_NL.StatusMsg = "Updating..."; LANG_NL.StatusMsg = "Downloading..."; LANG_NL.StatusHttp = "HTTP Request mislukt"; LANG_NL.StatusRetry = "Opnieuw..."; LANG_NL.StatusRetryIn = "Opnieuw in..."; LANG_NL.StatusNoHttpObj = "Error: Failed to create XMLHttp object"; LANG_NL.StatusLastUpdate = "Laatste update"; LANG_NL.StatusMinsAgo = "minuten geleden"; LANG_NL.StatusHoursAgo = "uren geleden"; LANG_NL.StatusDaysAgo = "dagen geleden"; LANG_NL.realtimeCorrupt = "Text file download corrupted! Retrying..."; LANG_NL.timer = "seconden"; LANG_NL.at = "om"; MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_NL.temp_title_out') 11 characters ====" "==== 11 characters LANG_NL.temp_title_out = "Buiten Temp"; LANG_NL.temp_title_in = "Binnen Temp"; LANG_NL.temp_out_info = "Temperatuur buiten"; LANG_NL.temp_out_web = "Buiten"; LANG_NL.temp_in_info = "Temperatuur binnen"; LANG_NL.temp_in_web = "Binnen"; LANG_NL.temp_trend_info = "Temperatuur verloop"; LANG_NL.dew_title = "Dauwpunt"; LANG_NL.dew_info = "Dauwpunt"; LANG_NL.dew_web = "Dauwpunt"; LANG_NL.apptemp_title = "Apparent"; LANG_NL.apptemp_info = "Apparent (voelt als) Temperatuur"; LANG_NL.apptemp_web = "Apparent"; LANG_NL.chill_title = "Wind Chill"; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 253

255 LANG_NL.chill_info = "Wind Chill"; LANG_NL.chill_web = "Wind Chill"; LANG_NL.heat_title = "Heat Index"; LANG_NL.heat_info = "Heat Index"; LANG_NL.heat_web = "Heat Index"; LANG_NL.humdx_title = "Humidex"; LANG_NL.humdx_info = "Humidex"; LANG_NL.humdx_web = "Humidex"; LANG_NL.rain_title = "Neerslag"; LANG_NL.rrate_title = "Neerslag in"; LANG_NL.rrate_info = "Neerslag in mm/uur"; LANG_NL.LastRain_info = "Laatste neerslag"; LANG_NL.LastRainedT_info = "vandaag om"; LANG_NL.LastRainedY_info = "gisteren om"; LANG_NL.hum_title_out = "Luchtvochtigheid"; LANG_NL.hum_title_in = "Vocht binnen"; LANG_NL.hum_out_info = "Luchtvochtigheid buiten"; LANG_NL.hum_in_info = "Luchtvochtigheid binnen"; LANG_NL.hum_out_web = "Buiten"; LANG_NL.hum_in_web = "Binnen"; LANG_NL.baro_title = "Luchtdruk"; LANG_NL.baro_info = "Luchtdruk"; LANG_NL.baro_trend_info = "Luchtdruk verloop"; LANG_NL.wind_title = "Windsnelheid"; LANG_NL.tenminavg_title = "Gem. windsnelheid"; LANG_NL.tenminavgwind_info = "Gem. windsnelheid (laatste 10 min)"; LANG_NL.maxavgwind_info = "Max. gem. windsnelheid"; LANG_NL.tenmingust_info = "Max. windvlaag (laatste 10 min)"; LANG_NL.maxgust_info = "Max. windvlaag"; LANG_NL.latest_title = "Windsnelheid"; LANG_NL.latestwind_info = "Laatst gemeten windsnelheid"; LANG_NL.bearing_info = "Windrichting"; LANG_NL.latest_web = "Laatst gemeten"; LANG_NL.tenminavg_web = "Gemiddeld"; LANG_NL.lowest_info = "Minimum"; LANG_NL.highest_info = "Max"; LANG_NL.lowestF_info = "Minimum"; for proper translation of feminine words LANG_NL.highestF_info = "Maximum"; for proper translation of feminine words LANG_NL.maximum_info = "Maximum"; LANG_NL.max_hour_info = "Max per uur"; LANG_NL.minimum_info = "Minimum"; LANG_NL.coords = ["N", "NNO", "NO", "ONO", "O", "OZO", "ZO", "ZZO", "Z", "ZZW", "ZW", "WZW", "W", "WNW", "NW", "NNW"]; LANG_NL.compass = ["N", "NO", "O", "ZO", "Z", "ZW", "W", "NW"]; LANG_NL.months = ["jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]; LANG_NL.forecastlong = new Array ( "Uitzonderlijke weersomstandigheden","geregeld fijn","fijn weer","becoming fijn","fijn, steeds minder afgerekend","fine, mogelijk douches", "Vrij goed, het verbeteren van","vrij goed, mogelijk douches vroeg","vrij goed, regenachtig later","regenachtig begin, het verbeteren van", "Verwisselbare, herstellen","vrij goed, douches vermoedelijk","liever onrustig clearing later","onrustig, waarschijnlijk verbeteren", "Regenachtig, heldere intervallen","regenachtig, steeds minder afgerekend","veranderlijk, wat neerslag"," onrustig, korte intervallen fijn", "Ontregeld, neerslag later", "onrustig, wat neerslag", "meestal zeer onrustig", "Af en toe neerslag, de verslechtering", "Neerslag soms erg onrustig","neerslag met grote regelmaat","neerslag, erg onrustig", "Stormy, kunnen verbeteren","stormy, veel neerslag"); LANG_NL.rose_title = "Wind Rose"; LANG_NL.rose_past = "Laatste"; LANG_NL.rose_hour = "uur"; Wat is hier de functie van???? UV en Zon gegevens toegevoegd Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 254

256 4.2.6 Bron: parserealtime.js Opbouw eigen pagina: Ik heb hier niets aan veranderd, wel Henk zie voorspellingen en de vertaling. function parserealtimegauges(str) { var realtime = str.split(" "); var ret = realtime.length; try { cumulus.time = realtime[0]; cumulus.temp = realtime[1]; cumulus.temptl = realtime[2]; cumulus.tempth = realtime[3]; cumulus.intemp = realtime[4]; cumulus.dew = realtime[5]; cumulus.dewpointtl = realtime[6]; cumulus.dewpointth = realtime[7]; cumulus.apptemp = realtime[8]; cumulus.apptemptl = realtime[9]; cumulus.apptempth = realtime[10]; cumulus.wchill = realtime[11]; cumulus.wchilltl = realtime[12]; cumulus.heatindex = realtime[13]; cumulus.heatindexth = realtime[14]; cumulus.humidex = realtime[15]; cumulus.wlatest = realtime[16]; cumulus.wspeed = realtime[17]; cumulus.wgust = realtime[18]; cumulus.wgusttm = realtime[19]; cumulus.bearing = realtime[20]; cumulus.avgbearing = realtime[21]; cumulus.press = realtime[22]; cumulus.presstl = realtime[23]; cumulus.pressth = realtime[24]; cumulus.pressl = realtime[25]; cumulus.pressh = realtime[26]; cumulus.rfall = realtime[27]; cumulus.rrate = realtime[28]; cumulus.rratetm = realtime[29]; cumulus.hum = realtime[30]; cumulus.humtl = realtime[31]; cumulus.humth = realtime[32]; cumulus.inhum = realtime[33]; cumulus.sensorcontactlost = realtime[34]; cumulus.forecast = verwachting(realtime[35]); cumulus.tempunit = realtime[36]; cumulus.windunit = realtime[37]; cumulus.pressunit = realtime[38]; cumulus.rainunit = realtime[39]; cumulus.temptrendtext = realtime[40]; cumulus.ttemptl = realtime[41]; cumulus.ttempth = realtime[42]; cumulus.tdewpointtl = realtime[43]; cumulus.tdewpointth = realtime[44]; cumulus.tapptemptl = realtime[45]; cumulus.tapptempth = realtime[46]; cumulus.twchilltl = realtime[47]; cumulus.theatindexth = realtime[48]; cumulus.trratetm = realtime[49]; cumulus.thourlyrainth = realtime[50]; cumulus.lastraintipiso = realtime[51]; cumulus.hourlyrainth = realtime[52]; cumulus.thumtl = realtime[53]; cumulus.thumth = realtime[54]; cumulus.tpresstl = realtime[55]; cumulus.tpressth = realtime[56]; cumulus.presstrend = realtime[57]; cumulus.tbeaufort = realtime[58].substring(1); cumulus.twgusttm = realtime[59]; cumulus.windtm = realtime[60]; cumulus.bearingtm = realtime[61]; cumulus.timeutc = realtime[62]; cumulus.build = realtime[63]; cumulus.uv = realtime[64]; cumulus.solar = realtime[65]; cumulus.currentsolarmax = realtime[66]; Is veranderd van realtime[35] naar verwachting(realtime[35] Volgende regels toegevoegd door Henk, voor Zon en UV: cumulus.uv = realtime[64]; cumulus.solar = realtime[65]; cumulus.currentsolarmax = realtime[66]; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 255

257 catch (e) { return ret; ; function verwachting(forecast) { verwachtingnl = forecast; forecasteng = doublespace(forecast); if (forecasteng == doublespace(" Partly cloudy and cooler. ")) { verwachtingnl = "Licht bewolkt en wat lagere temperaturen."; ; if (forecasteng == doublespace(" Partly cloudy with little temperature change. ")) { verwachtingnl = "Gedeeltelijk bewolkt, weinig verandering in temperatuur"; ; if (forecasteng == doublespace(" Mostly clear with little temperature change. ")) { verwachtingnl = "Licht bewolkt. Weinig verandering in temperatuur"; ; if (forecasteng == doublespace(" Mostly clear and cooler. ")) { verwachtingnl = "Licht bewolkt en lagere temperaturen"; ; if (forecasteng == doublespace(" Mostly clear and warmer. ")) { verwachtingnl = "Licht bewolkt en hogere temperaturen."; ; if (forecasteng == doublespace(" Mostly clear and warmer. Precipitation possible within 48 hours ")) { verwachtingnl = "Licht bewolkt en hogere temperaturen. Mogelijk wat neerslag in de komende 48 uur."; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen"; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Windy. ")) { verwachtingnl = "Overwegend bewolkt en lagere temperaturen. Veel wind"; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation continuing. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Neerslag houdt aan"; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Veel wind mogelijk draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation ending within 6 hours Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Neerslag eindigt binnen 6 uur. Veel wind die naar W, NW of N draait."; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation possible within 6 to 12 hours Windy. ")) { verwachtingnl = "Over het algemeen bewolkt en lagere temperaturen. Binnen 6 tot 12 uur kans op neerslag. Winderig."; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation possible within 12 hours, possibly heavy at times. Windy. ")) { verwachtingnl = "Overwegend bewolkt en lagere temperaturen. Komende 12 uur is neerslag mogelijk met soms hevige buien en veel wind."; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation possibly heavy at times and ending within 12 hours Windy with possible wind shift to the W, NW, or N. " )) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Neerslag, soms hevig, eindigend binnen 12 uur. Winderig, mogelijk draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation continuing. Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Neerslag duurt voort. Veel wind, mogelijk draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation continuing, possibly heavy at times. Windy. ")) { verwachtingnl = "Voornamelijk bewolkt. Neerslag houdt aan, soms zelfs hevig en veel wind"; ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation likely. Increasing winds. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Grote kans op neerslag. Toenemende wind"; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 256

258 ; if (forecasteng == doublespace(" Mostly cloudy and cooler. Precipitation likely. Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Grote kans op neerslag. Veel wind, mogelijk draaiend naar W, NW of N"; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation continuing. Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bewolkt en weinig verandering in temperatuur. Meer neerslag. Veel wind, mogelijk draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation likely. ")) { verwachtingnl = "Voornamelijk bewolkt met kleine temperatuursverandering en kans op enige neerslag."; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation likely. Increasing winds. ")) { verwachtingnl = "Voornamelijk bewolkt met kleine temperatuurschommelingen en waarschijnlijk enige neerslag. Meer wind."; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation likely. Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bewolkt. Weinig verandering in temperatuur. Grote kans op neerslag. Veel wind, draaiend naar W, NW of N"; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation continuing. ")) { verwachtingnl = "Voornamelijk bewolkt en weinig verandering in temperatuur. Voorlopig nog wat neerslag"; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation possible within 6 to 12 hours, possibly heavy at times. Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bewolkt en lagere temperaturen. Binnen 6 tot 12 uur kans op neerslag, soms met hevige buien. Veel wind, waarschijnlijk draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation possible within 6 to 12 hours Windy. ")) { verwachtingnl = "Voornamelijk bewolkt en weinig verandering in temperatuur. Binnen 6 tot 12 uur grote kans op neerslag met veel wind"; ; if (forecasteng == doublespace(" Mostly cloudy with little temperature change. Precipitation ending within 12 hours Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Voornamelijk bwolkt met weinig verandering in temperatuur. Neerslag eindigt binnen 12 uur. Veel wind draaiend naar W, NW of N"; ; if (forecasteng == doublespace(" Clearing and cooler. Precipitation ending within 6 hours ")) { verwachtingnl = "Opklaringen en lagere temperaturen. Binnen 6 uur einde van de neerslag"; ; if (forecasteng == doublespace(" Increasing clouds with little temperature change. ")) { verwachtingnl = "Toenemende bewolking en weinig verandering in temperatuur."; ; if (forecasteng == doublespace(" Increasing clouds with little temperature change. Precipitation possible within 6 hours. Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Toenemende bewolking en weinig verandering in temperatuur. Binnen 6 uur kans op neerslag. Veel wind, mogelijk draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Increasing clouds with little temperature change. Precipitation possible within 24 to 48 hours ")) { verwachtingnl = "Toenemende bewolking. Weinig verandering in temperatuur. Binnen 24 tot 48 uur kans op regen."; ; if (forecasteng == doublespace(" Increasing clouds with little temperature change. Precipitation possible and windy within 6 hours ")) { verwachtingnl = "Toenemende bewolking. Weinig verandering in temperatuur. De komende 6 uur kans op neerslag en meer wind."; ; if (forecasteng == doublespace(" Increasing clouds with little temperature change. Precipitation possible within 12 hours, possibly heavy at times. Windy. ")) { verwachtingnl = "Toenemende bewolking en weinig verandering in temperatuur. Binnen Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 257

259 12 uur kans op neerslag, soms met hevige buien en veel wind"; ; if (forecasteng == doublespace(" Increasing clouds and cooler. Precipitation possible within 6 hours Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Toenemende bewolking en lagere temperaturen. Binnen 6 uur kans op neerslag. Veel wind, mogelijk draaiend naar W, NW of N"; ; if (forecasteng == doublespace(" Increasing clouds and cooler. Precipitation possible within 6 hours Possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Toenemende bewolking en kouder. Binnen 6 uur kans op neerslag en wind draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Increasing clouds with little temperature change. Precipitation possible within 12 to 24 hours Windy with possible wind shift to the W, NW, or N. ")) { verwachtingnl = "Toenemende bewolking met kleine temperatuurschommelingen. Binnen 12 tot 24 uur kans op neerslag. Veel wind, draaiend naar W, NW of N."; ; if (forecasteng == doublespace(" Increasing clouds and warmer. Precipitation possible within 12 to 24 hours Windy. ")) { verwachtingnl = "Toenemende bewolking en hogere temperaturen. Binnen 12 tot 24 uur kans op regen en veel wind"; ; if (forecasteng == doublespace(" Increasing clouds and warmer. Precipitation possible within 24 to 48 hours ")) { verwachtingnl = "Toenemende bewolking en hogere temperaturen. Binnen 24 tot 48 uur is neerslag te verwachten."; ; if (forecasteng == doublespace(" Increasing clouds and cooler. Precipitation possible and windy within 6 hours ")) { verwachtingnl = "Toenemende bewolking en lagere temperaturen. Binnen 6 uur kans op neerslag met veel wind"; ; if (forecasteng == doublespace(" Clearing, cooler and windy. ")) { verwachtingnl = "Opklaringen, lagere temperaturen en meer wind"; ; if (forecasteng == doublespace(" Clearing, cooler and windy. Precipitation ending within 6 hours ")) { verwachtingnl = "Opklaringen, lagere temperaturen en meer wind. Binnen 6 uur eindigt de neerslag"; ; if (forecasteng == doublespace(" Increasing clouds with little temperature change. Precipitation possible within 24 hours ")) { verwachtingnl = "Toenemende bewolking en weinig verandering in temperatuur. Binnen 24 uur kans op neerslag"; ; return verwachtingnl; ; function doublespace(fctext) { while (fctext.match(/ /)) { fctext = fctext.replace(" ", " "); ; return (fctext); ; Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 258

260 4.2.7 Bron: steelseries.js Opbouw eigen pagina: Ik heb hier niets aan veranderd. /** * Name : steelseries.js * Author : Gerrit Grunwald * Last modified : * Revision : * Modified by : Mark Crossley */ var steelseries = function() { var doc = document; ************************************* C O M P O N O N E N T S************************************************ var radial = function(canvas, parameters) { parameters = parameters {; var gaugetype = 'undefined' === typeof(parameters['gaugetype'])? steelseries.gaugetype.type4 : parameters['gaugetype']; var size = 'undefined' === typeof(parameters['size'])? 200 : parameters['size']; var minvalue = 'undefined' === typeof(parameters['minvalue'])? 0 : parameters['minvalue']; var maxvalue = 'undefined' === typeof(parameters['maxvalue'])? (minvalue + 100) :parameters['maxvalue']; var nicescale = 'undefined' === typeof(parameters['nicescale'])? true : parameters['nicescale']; var threshold = 'undefined' === typeof(parameters['threshold'])? (maxvalue -minvalue) / 2 : parameters['threshold']; var section = 'undefined' === typeof(parameters['section'])? null : parameters['section']; var area = 'undefined' === typeof(parameters['area'])? null : parameters['area']; var titlestring = 'undefined' === typeof(parameters['titlestring'])? "" : parameters['titlestring']; var unitstring = 'undefined' === typeof(parameters['unitstring'])? "" : parameters['unitstring']; var framedesign = 'undefined' === typeof(parameters['framedesign'])? steelseries.framedesign.metal : parameters['framedesign']; var backgroundcolor = 'undefined' === typeof(parameters['backgroundcolor'])?steelseries.backgroundcolor.dark_gray : parameters['backgroundcolor']; var pointertype = 'undefined' === typeof(parameters['pointertype'])? steelseries.pointertype.type1 : parameters['pointertype']; var pointercolor = 'undefined' === typeof(parameters['pointercolor'])? steelseries.colordef.red : parameters['pointercolor']; var knobtype = 'undefined' === typeof(parameters['knobtype'])? steelseries.knobtype.standard_knob : parameters['knobtype']; var knobstyle = 'undefined' === typeof(parameters['knobstyle'])? steelseries.knobstyle.silver : parameters['knobstyle']; var lcdcolor = 'undefined' === typeof(parameters['lcdcolor'])? steelseries.lcdcolor.standard : parameters['lcdcolor']; var lcdvisible = 'undefined' === typeof(parameters['lcdvisible'])? true : parameters['lcdvisible']; var lcddecimals = 'undefined' === typeof(parameters['lcddecimals'])? 2 : parameters['lcddecimals']; var digitalfont = 'undefined' === typeof(parameters['digitalfont'])? false :parameters['digitalfont']; MC var fractionalscaledecimals = undefined === parameters.fractionalscaledecimals? 1 :parameters.fractionalscaledecimals; var ledcolor = 'undefined' === typeof(parameters['ledcolor'])? steelseries.ledcolor.red_led : parameters['ledcolor']; var ledvisible = 'undefined' === typeof(parameters['ledvisible'])? true : parameters['ledvisible']; var thresholdvisible = 'undefined' === typeof(parameters['thresholdvisible'])? true: parameters['thresholdvisible']; var minmeasuredvaluevisible = 'undefined' === typeof(parameters['minmeasuredvaluevisible'])? false : parameters['minmeasuredvaluevisible']; var maxmeasuredvaluevisible = 'undefined' === typeof(parameters['maxmeasuredvaluevisible'])? false : parameters['maxmeasuredvaluevisible']; var foregroundtype = 'undefined' === typeof(parameters['foregroundtype'])?steelseries.foregroundtype.type1 : parameters['foregroundtype']; var labelnumberformat = 'undefined' === typeof(parameters['labelnumberformat'])?steelseries.labelnumberformat.standard : parameters['labelnumberformat']; var playalarm = 'undefined' === typeof(parameters['playalarm'])? false : parameters['playalarm']; var alarmsound = 'undefined' === typeof(parameters['alarmsound'])? false :parameters['alarmsound']; Create audio tag for alarm sound if (playalarm && alarmsound!== false) {var audioelement = doc.createelement('audio'); audioelement.setattribute('src', alarmsound); audioelement.setattribute('src', 'js/alarm.mp3'); audioelement.setattribute('preload', 'auto'); Enz.. is een groot bestand. Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 259

261 4.2.8 Bron: tween.min.js Opbouw eigen pagina: Ik heb hier niets aan veranderd. function Delegate(){Delegate.create=function(e,c){for(var b=[],d=arguments.length,a=2;a<d;a++)b[a-2]=arguments[a];return function(){var a=[].concat(arguments,b);c.apply(e,a);tween=function(g,f,e,d,c,a,b){this.init(g,f,e,d,c,a,b);var t=tween.prototype;t.obj={;t.prop="";t.func=function(d,a,b,c){return b*d/c+a;t.begin=0;t.change=0;t.prevtime=0;t.prevpos=0;t.looping=false;t._duration=0;t._time=0;t._pos=0;t._position=0;t._starttime=0;t._finish=0;t.n ame="";t.suffixe="";t._listeners=[];t.settime=function(a){this.prevtime=this._time;if(a>this.getduration())if(this.looping){this.rewind(athis._duration);this.update();this.broadcastmessage("onmotionlooped",{target:this,type:"onmotionlooped")else{this._time=this._duration;this.upda te();this.stop();this.broadcastmessage("onmotionfinished",{target:this,type:"onmotionfinished")else if(a<0){this.rewind();this.update()else{this._time=a;this.update();t.gettime=function(){return this._time;t.setduration=function(a){this._duration=a==null a<=0?1e5:a;t.getduration=function(){return this._duration;t.setposition=function(a){this.prevpos=this._pos;var b=this.suffixe!=""?this.suffixe:"";this.obj[this.prop]=math.round(a)+b;this._pos=a;this.broadcastmessage("onmotionchanged",{target:this,type:"onmot ionchanged");t.getposition=function(a){if(a==undefined)a=this._time;return this.func(a,this.begin,this.change,this._duration);t.setfinish=function(a){this.change=a-this.begin;t.getfinish=function(){return this.begin+this.change;t.init=function(g,f,a,c,e,d,b){if(!arguments.length)return;this._listeners=[];this.addlistener(this);if(b)this.suffixe=b;this.obj=g;thi s.prop=f;this.begin=c;this._pos=c;this.setduration(d);if(a!=null&&a!="")this.func=a;this.setfinish(e);t.start=function(){this.rewind();this.startenterfram e();this.broadcastmessage("onmotionstarted",{target:this,type:"onmotionstarted");t.rewind=function(a){this.stop();this._time=a==undefined?0:a;thi s.fixtime();this.update();t.fforward=function(){this._time=this._duration;this.fixtime();this.update();t.update=function(){this.setposition(this.getpositi on(this._time));t.startenterframe=function(){this.stopenterframe();this.isplaying=true;this.onenterframe();t.onenterframe=function(){if(this.isplayin g){this.nextframe();settimeout(delegate.create(this,this.onenterframe),25);t.nextframe=function(){this.settime((this.gettimer()- this._starttime)/1e3);t.stop=function(){this.stopenterframe();this.broadcastmessage("onmotionstopped",{target:this,type:"onmotionstopped");t.st openterframe=function(){this.isplaying=false;t.playing=function(){return isplaying();t.continueto=function(b,a){this.begin=this._pos;this.setfinish(b);this._duration!=undefined&&this.setduration(a);this.start();t.resume=fun ction(){this.fixtime();this.startenterframe();this.broadcastmessage("onmotionresumed",{target:this,type:"onmotionresumed");t.yoyo=function(){thi s.continueto(this.begin,this._time);t.addlistener=function(a){this.removelistener(a);return this._listeners.push(a);t.removelistener=function(c){var a=this._listeners,b=a.length;while(b--)if(a[b]==c){a.splice(b,1);return truereturn false;t.broadcastmessage=function(){for(var c=[],a=0;a<arguments.length;a++)c.push(arguments[a]);for(var d=c.shift(),b=this._listeners,e=b.length,a=0;a<e;a++)b[a][d]&&b[a][d].apply(b[a],c);t.fixtime=function(){this._starttime=this.gettimer()- this._time*1e3;t.gettimer=function(){return+new Date-this._time;Tween.backEaseIn=function(b,c,d,e){if(a==undefined)var a= ;return d*(b/=e)*b*((a+1)*b-a)+c;tween.backeaseout=function(a,c,d,e){if(b==undefined)var b= ;return d*((a=a/e- 1)*a*((b+1)*a+b)+1)+c;Tween.backEaseInOut=function(a,c,d,e){if(b==undefined)var b= ;return(a/=e/2)<1?d/2*a*a*(((b*=1.525)+1)*ab)+c:d/2*((a-=2)*a*(((b*=1.525)+1)*a+b)+2)+c;tween.elasticeasein=function(d,e,c,f,a,b){if(d==0)return e;if((d/=f)==1)return e+c;if(!b)b=f*.3;if(!a a<math.abs(c)){a=c;var g=b/4else var g=b/(2*math.pi)*math.asin(c/a);return-(a*math.pow(2,10*(d-=1))*math.sin((d*fg)*2*math.pi/b))+e;tween.elasticeaseout=function(d,e,b,f,a,c){if(d==0)return e;if((d/=f)==1)return e+b;if(!c)c=f*.3;if(!a a<math.abs(b)){a=b;var g=c/4else var g=c/(2*math.pi)*math.asin(b/a);return a*math.pow(2,-10*d)*math.sin((d*fg)*2*math.pi/c)+b+e;tween.elasticeaseinout=function(a,e,c,f,b,d){if(a==0)return e;if((a/=f/2)==2)return e+c;if(!d)var d=f*.3*1.5;if(!b b<math.abs(c))var b=c,g=d/4;else var g=d/(2*math.pi)*math.asin(c/b);return a<1?-.5*b*math.pow(2,10*(a-=1))*math.sin((a*fg)*2*math.pi/d)+e:b*math.pow(2,-10*(a-=1))*math.sin((a*fg)*2*math.pi/d)*.5+c+e;tween.bounceeaseout=function(a,b,c,d){return(a/=d)<1/2.75?c*7.5625*a*a+b:a<2/2.75?c*(7.5625*(a- =1.5/2.75)*a+.75)+b:a<2.5/2.75?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a- =2.625/2.75)*a )+b;Tween.bounceEaseIn=function(d,c,a,b){return a-tween.bounceeaseout(bd,0,a,b)+c;tween.bounceeaseinout=function(c,d,b,a){return c<a/2?tween.bounceeasein(c*2,0,b,a)*.5+d:tween.bounceeaseout(c*2- a,0,b,a)*.5+b*.5+d;tween.strongeaseinout=function(a,b,c,d){return c*(a/=d)*a*a*a*a+b;tween.regulareasein=function(a,b,c,d){return c*(a/=d)*a+b;tween.regulareaseout=function(a,b,c,d){return-c*(a/=d)*(a- 2)+b;Tween.regularEaseInOut=function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b;Tween.strongEaseIn=function(a,b,c,d){return c*(a/=d)*a*a*a*a+b;tween.strongeaseout=function(a,b,c,d){return c*((a=a/d- 1)*a*a*a*a+1)+b;Tween.strongEaseInOut=function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 260

262 4.2.9 Waar kan ik bekijken wat de effecten zijn van de instellingen. Bron voor bekijken van instellingen: Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 261

263 D:\Handleidingen en data van weerstation\applicaties\05-cumulus\gauges-ss_v1-1-3\gauges-ss\scripts\gauges.js Weerstation installeren en op Internet (versie 3 maart 2013) Pagina 262