diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index d3fcdc6..0000000 --- a/.editorconfig +++ /dev/null @@ -1,8 +0,0 @@ -root = true - -[*] -end_of_line = lf -insert_final_newline = true -indent_style = space -indent_size = 4 -charset = utf-8 diff --git a/css/colours.css b/css/colours.css new file mode 100644 index 0000000..2bfeddc --- /dev/null +++ b/css/colours.css @@ -0,0 +1,40 @@ +/* ------------------------------------------------------------------- + * Colours for the CumulusMX Alternative Interface + * Produced using w3Schools colour generator + * + * Key Colour: #4e5b31 + * + * Theme modified to change font 'color's to either lightest or darkest + * theme colour. Also modified names for text, borders & hover colours. + * I have added a few extras. Not all are used. + * Neil Thomas + ------------------------------------------------------------------*/ + +/* Check that your theme is named as shown below */ + +.w3-theme-white {color:#2e5473; background-color:#FFFFFF;} +.w3-theme-l5 {color:#2e5473; background-color:#f7fafc;} +.w3-theme-l4 {color:#2e5473; background-color:#e4edf4;} +.w3-theme-l3 {color:#2e5473 ; background-color:#c9dbe9;} +.w3-theme-l2 {color:#2e5473 ; background-color:#aec9df;} +.w3-theme-l1 {color:#2e5473 ; background-color:#93b7d4;} +.w3-theme-d1 {color:#f7fafc ; background-color:#6195c0;} +.w3-theme-d2 {color:#f7fafc ; background-color:#4a86b7;} +.w3-theme-d3 {color:#f7fafc ; background-color:#4075a1;} +.w3-theme-d4 {color:#f7fafc ; background-color:#37658a;} +.w3-theme-d5 {color:#f7fafc ; background-color:#2e5473;} + +.w3-theme-light {color:#2e5473 ; background-color:#f7fafc;} +.w3-theme-dark {color:#f7fafc ; background-color:#2e5473;} +.w3-theme-action {color:#f7fafc ; background-color:#2e5473;} + +.w3-theme {color:#f7fafc ; background-color:#78a5c9;} +.w3-theme-txt {color:#78a5c9;} +.w3-theme-bdr {border-color:#78a5c9;} +.w3-theme-d5-bdr {border-color:#2e5473;} +.w3-theme-l1-bdr {border-color:#f7fafc;} + +.w3-theme-hvr:hover {color:#f7fafc; background-color:#78a5c9;} +.w3-theme-d5-hvr:hover {color:#f7fafc; background-color:#2e5473;} +.w3-theme-txt-hvr:hover {color:#78a5c9;} +.w3-theme-bdr-hvr:hover {border-color:#78a5c9;} diff --git a/css/gauges.css b/css/gauges.css index 7d46af7..ed4068b 100644 --- a/css/gauges.css +++ b/css/gauges.css @@ -4,105 +4,98 @@ */ .gauge { - position: relative; + position: relative; } .odo { - position: absolute; - top: 67%; - left: 50%; - transform: translateX(-50%); - -webkit-transform: translateX(-50%); + position: absolute; + top: 67%; + left: 50%; + transform: translateX(-50%); + -webkit-transform: translateX(-50%); } .gaugeSmall { - max-width: 181px; - max-height: 181px; - width: 100%; - height: 100%; + max-width:181px; + max-height: 181px; + width:100%; + height:100%; } .at-gaugeSmall { - width: 221px; - margin-left: 8px; - margin-right: 8px; + width: 221px; + margin-left:8px; + margin-right:8px; } .gaugeMedium { - max-width: 221px; - max-height: 221px; + max-width: 221px; + max-height:221px; } .at-gaugeMedium { - width: 261px; - margin-left: 8px; - margin-right: 8px; + width: 261px; + margin-left:8px; + margin-right:8px; } .gaugeLarge { - max-width: 261px; - max-height: 261px; - width: 100%; - height: 100%; + max-width:261px; + max-height:261px; + width:100%; + height:100%; } .at-gaugeLarge { - width: 301px; - margin-left: 8px; - margin-right: 8px; + width:301px; + margin-left:8px; + margin-right:8px; } -@media screen and (max-width: 550px) { - .at-gaugeSmall { - width: 100%; - } - .at-gaugeMedium { - width: 100%; - } +@media screen and (max-width:550px) { + .at-gaugeSmall { width:100%; } + .at-gaugeMedium{ width:100%;} } -@media screen and (max-width: 640px) { - .at-gaugeLarge { - width: 100%; - } -} +@media screenand (max-width:640px) { + .at-gaugeLarge { width:100%;} + } @font-face { - font-family: "LCDMono2Ultra"; - src: url("data:font/woff;charset=utf-8;base64,d09GRgABAAAAACfoABAAAAAAgPwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABsAAAAcYArYUUdERUYAAAGIAAAAHQAAACAAqAAET1MvMgAAAagAAABLAAAAYJT4XRdjbWFwAAAB9AAAATkAAAH6pXE4cWN2dCAAAAMwAAAAFAAAABQDbQUIZnBnbQAAA0QAAAGxAAACZQ+0L6dnYXNwAAAE+AAAAAgAAAAIAAAAEGdseWYAAAUAAAAeOAAAc2BlVBCpaGVhZAAAIzgAAAAxAAAANgH3tINoaGVhAAAjbAAAACAAAAAkEykMq2htdHgAACOMAAAA3QAAAeod1CXsbG9jYQAAJGwAAADnAAAA+EvuZmZtYXhwAAAlVAAAACAAAAAgAasCam5hbWUAACV0AAABCAAAAeYnykPLcG9zdAAAJnwAAAEOAAAByGYnCSZwcmVwAAAnjAAAAFwAAABkC/ydrHjaY2BgYGQAgpOd+YYg+rTDln4oPQEAQ1oGkQB42mNgZGBg4ANiCQYQYGJgBMIqIGYB8xgACYgArQAAAHjaY2Bh6WecwMDKwMA6i9WYgYFRFUIzL2BIYxJiAAIWTgaswDGnpJjhAIPCbxa2tH9pDAxsjxmWAoUZQXJsaWxAEQYFBkYAGk8L9wB42mNgYGBmgGAZBkYGEPgC5DGC+SwMN4C0EYMCkCXEoMSgwqDDYM8QyxDPUMVQw7CAYRXDZoZdjMEKXAoiCpIKsgpqCvoKVgrxikoPGH6z/P8P1KsA1KPOoMfgCNSTCNWziWEnY5ACg4IwUI8MWI8lVA/j////H/9/9P/B//v/7/2/+//O/9v/d/xf/3/F/8X/eR4kPIh4EPIg6IHXA6cHlg9E7wcrlLGWQd1MImBkY4BrZGQCEkzoCoBBwsLKAFTGzsHJxc3DwMvHLyAoJCwiKiYuISklLSMrxyCvoKikrKKqpq6hqaWto6unb2BoZGxiamZuYWllzWDDYGtn7+Do5Ozi6ubu4enl7ePr5x8QGBQcEhrGEE6Sa0vRBSJjkXkFEUAiLj47Jy+fIRciVFRcXkHIVAA2ElGDAAAAAAAA+gD6APgA/AD0APYBEwCBAQ942l1Ru05bQRDdDQ8DgcTYIDnaFLOZkALvhTZIIK4uwsh2YzlC2o1c5GJcwAdQIFGD9msGaChTpE2DkAskPoFPiJSZNYmiNDs7s3POmTNLypGqd2m956lzFkjhboNmm34npNpFgAfS9Y1GRtrBIy02M3rlun2/j8FmNOVOGkB5z1vKQ0bTTqAW7bl/Mj+D4T7/yzwHg5Zmmp5aZyE9hMB8M25p8DWjWXf9QV+xOlwNBoYU01Tc9cdUyv+W5lxtGbY2M5p3cCEiP5gGaGqtjUDTnzqkej6OYgly+WysDSamrD/JRHBhMl3VVC0zvnZwn+wsOtikSnPgAQ6wVZ6Ch+OjCYX0LYkyS0OEg9gqMULEJIdCTjl3sj8pUD6ShDFvktLOuGGtgXHkNTCozdMcvsxmU9tbhzB+EUfw3S/Gkg4+sqE2RoTYjlgKYAKRkFFVvqHGcy+LAbnU/jMQJWB5+u1fJwKtOzYRL2VtnWOMFYKe3zbf+WXF3apc50Whu3dVNVTplOZDL2ff4xFPj4XhoLHgzed9f6NA7Q2LGw2aA8GQ3o3e/9FadcRV3gsf2W81s7EWAAAAAAEAAf//AA942u1dD5Ab5XXfb3clrf7vrv7/O51Opzvbl5MwAh/rs7H5E5KCfSGuh3Ey4NiEuuTOh6EMf1xQPR7KOIlHp3Ps6QRwnTRlEoZhmF3pjAklYJrSDGk8pPVgQlsmTWmaeJp/dVMu5/jkvvftrrSnk45zmpC0oxtb9+mtdrV633u/93vve9+JYZmDDMO9Zt/FcIyDWctUGYYZmuEJ4+WHVEdhhtARUYWCypyZ4Tkq50XNRoZmOPpMc5Ih5rLVRSkj5TJS5iB39fxN7Mr5N+275h4/aNsC1+PIjfAg0PdwMn6mxlQ5eBeiigXVfUbzsmdVW+8ZSXNwZ1UeBwIM3KLqwrGPO6tJZEhdE39hw47ZIBMacvEqn1e9ebwNwTanekXNDb94sWbj3YEhVRBrDsEbwNusuUyJDyXsCd7mEFxury9v/Kgb40Rz2SRZ5RTVLWnEqSiqIFftrF9RFM3ngCMeBT5ebiTi4AIjEc54JDdWJqauGyyPD5aTm6d231wuwQ85TEKlUv0/Hma/wg6VSvNvPMywzM/5bdx2u52xMW7mMka1wWcuzrCEcYEihcuJ6qGadfKMA3TpJaBPRpI1zq7g2wY2kIif5Ojjz+OfviP1KGFSj94R/zR/6m/uu8/8Bzp2Xfw5w/DbQcf4PkEmzmSZlUyBuZIZZa4h32OqAdC4JpKzqvdyNVtQ00UtSc4S9dqC6jijOWEK7KhtFwycojYEtzEMwxzKBmE2BkV1BY77Qdhf0FbAryFRXYWiPBweFrUROEWBoSKqa1G8Bl6ypqCtZc9q1xnTd+fszfr02fOqM6/aRc3FzeHbObi5xlG1P68O59V+UVsBkwoXHrJZDq7Jq0peXSNqa+GgAu8Kv/rFWq5/CKZ5hVgbXDEMA5CsMiV5lLAbRbvD6erPDa5YNTScXzOirM23/FBLcNgluWpjPTD3qkva6OI5AYwlGIon+iOK2i+rYUV1SmpM0Vbl4JXJbARfOSRV/X0rcbRCrg1EC5fhiwelakb8AArzclUKXImjNZK6WtFGhmF+e6+A52uljc5UWr68eNXouvV4kiJXe66+Bl7KaGJAkms2/8pRlGeljT6GZ93h2EBh9RVXrd9wDUqTck3IfOBqGF62mqMmYljoSDEC/xwZHDiy3EgGHgdhYLFf+oJsguBYNzIPX57kp+3K9LhS2Vre+sCfb50o16/zVLZMTm8RpskL41R29boyHBeUysS6smd6y+7KltxoeUKZHuanx/kyEVKlUqrEFckXwQ92PDw/Wjp4sATPS/rDwwcP/vIJ/VjzRX44WN9iSPkTyVIpWWIIOcbfwM7YPWDPKfQadBknIpEd/UXj+LOagwIPoXdPjiWnx5PT/KvfLJW+uQ9cgTkHmLPD8AeJiTD/wFQlijpR0+RrvNMhDGkMWCpT0Hiw1FirpTLUUhlR4y2W+snZATjqBnGNMA4daDjeCQOQ2E2JCyVVeEHvZ3s/m7X7JFlR7UoVXogjl8KcYAjHo1maJkhqhLO7msaIOGADW1R5qcq6JbQgpzwjeH2iDHMOHz1Bio0J1ec6QB/P3bR3jzIdv2lq9+iRsSllclrZVl43Xh4lApvZD0pmq2wGtb1/fiPo3nYWJgYgpL3ObKbOAme0EOhMDAVAZx7QmaegiRad/eHsDbrOPHk1lFc9oiaCc4ZELWCz6Mwj1ryeAGhIFGt+uNYQSmRTEkZJFV5g0ZmsVOGFOAqDzjxevygHQuGmzrx+OdzQWcAjyTMOl5uT0EFEqSr4qIuGZM0ZpIi6gTT1BJorGvrLniuPTpTXbZtWxsvKLaNH7r9pygWusOnBkqkhNNz989817Hb+u6AvMsLu4BK80NDXRyi+ixTfU4DvgLXugioXZxz68+DlVJWA9yEerRmVp4Vgno9zdqfHT6dVYyEcaR6IP9S2i+DV9GZ1jx2kEjISGDkauvH2yIHR4NHPB4/mAgeyod/7dKTI7jhw7eMF4n2icPTZo9cfePto4YnLYF4PkoPcN/i3GveZpfcZLmoEAkKA3hTeCqMRfG9BwvfWVRTRcYU+6ndwcPrw5PThz0Qqu8OVyyKVyUjFQyXUyZ85um/f0X3smidKpSf2oWOjXRFy6OIB9hXyENxJLwO+1vBlG9UFxzMJ0IWdurMNZsNBDq0pTwb2kgfoFQh5EsDvWTjfggXudligB0rypDg9Lk7vx6nDG2Av/gQm646GXVOOg4EXwy2clR0hRc5JAqToIHIPmd4/WD9Enh0kex7rqd/9Nrup/rP5H3DricRG356fgXPtF9+F691q8ZMUkyWP6fgC1zyrRgpaAKNrf0ElcH8IMBgTeYiPRGxGWk5UnSbxcRQ0J4ciahMJOBrFQ0mQxUS1B8d9IEyIagbHaZCnC1oG2FFuWaBlRtBoXs3k1agIV55TMyJcaG45QAZn1GLRNAySYi2RzOiSHlPShxKIsiakRWOJZE8609cxyrYCGwdm56VRFxxeiwJG1nxiIAIOofXEgIT5FTUtaamwgmGvGoxn8aSEpIV6MVh6JbxiCkQRqca641n0/gBcshct2Rr3aDDMBOgjschdENFGp1yjU+NK+ZYKeWFiqn7DtjL5q92V+g1kWClPGgenidAavyDIWSBi4THgvjHAVAVshWdcjMh8mam6qPVJBdVzRvPxBvESYODGgR+MWTZm9BOzogmpPtV2ktd8ZM6nOk/yqg3mx+YB3TvFmuD0wQAkblPiRwl7wmYXnG6Pz9/ASs3mNKbAjVPAuUBhHkllkfJqDhGe+SXVq+hBlXPo7EB/JDH5Z8P7hC2VybFp5+bp3Zun+YdKp+sv3HXho+zV+/bNv1niXmFXAC5+Zx/4xzvgH3voZxYYH2Wjvcy/6bEE3PysGixQKhovaGF0k0zDTcD8k2D+PWjphplrfYY2ds7GdG0Q0AYD2uDsoA3+JAaXVfqRRF7tyYOPUKvuoTbO0jCL1thUA8MbauAIhAu70+3zo8EkgPE5PF5RCgRD4bjOsIDrgeEdlyNCNNVL4VkMgupYMCw1LlVdHh8aYljW3Ck0tUE0JpLLRHRWolsbZ7G21CfKu0frPyNJ8vKbFy7wlQl+amiavDQxXb/epZvd9aSyFtmVjz0GJnRr/Rfnz9uupaSofpdJo+ofNe3Lxsig6w0LsOicoWkEd6lAAcldAIQETfeYcVyVUb1hQJGAaCANCEOirvYYjGMFRCEt3Youch7VLItw8hyqOga/ZLEWkGNgfGGxFgonYACSqClJooQ9gWEbcWEBFgRkcG5RUaOY6YEmY7IWQbMMSzUh6E/hJGDsjqOXY3BSARCotwdB35rDDZK4glG96dbcIueWp8m74MgucOhfgKbdH5sij4yX6yVyC4R4cOx1MCflRqCf/1srIW26MlhzCh6ubOqaDOiY31BvdDHeg0VjUudHwoQyoEyqX1TDOJbhuFygswCiEIoCOCMFLcQ1idX47McauM41cB2uSxDXd85GKa43WRensy74tQyyxW70oH+00qrG/PDgITXWZnfjTHCS6gD1A8cC/qrKEmUKNFOp+pzIs7SwH44FYa5wZqo2Sr6Qp+opR3NedElqfWViY9k1TV4Eu7+WlMYqE2NT7s1T42Nl7iXyMqj9GpodzH9DT6dL3EtmXm2/eBbm4k46F4irOsZ8i6mKaPmeBrhAXFWlohY0YEY40wlf1AGMTEL+NUYTHPnXqOZve7eOuvWpDgjaJ1UBwvV7oc1xu7OJNUSzm4CbTEgmlgQiPhNLPCLGLQNLgOMYWOKiWGKmdI2oxWVsC4w7YitDzpW6563RP7uZJmj1G0KcWv/3+jXfKgOklOvXkEMUSoy0jK1yiQv123XWb981t9DQgdcwOdDpcAuvuX0Rr1FTyBZ1eoOZFLc4k0LaAcihZWBocpcGUdk+y7USFbtOVOxzjaOoWiAqoNa+BlF5YcOt7/7y15F66UaPRKWVpCyRgwGxkJCh60lYIBLFcY8EPCVGcSpNywN90nNBfzwZ6qUcJCOriQY/Ac6iBSLgF6y7F50llgKbEJTWPK6JYdbJzo3df8/oVHIM0u/DN2OkgOTcVSYvj1fq12F6PjkNRGVoFFK+qfZpXjMJb9AUrM0xwzDnucac9+vsuIFoMs44JAZwDO6bRrvLVhdHkCobdzcSgBxqOE0O7cvWp0pl9p2J8nySvJL8YXB0O5Dnc/Ov6aj67dPkw/WPY63K0Y4/MytJtbOlrfpViPRCA0TCLKr9OMbyVUZUB3GcA3mugEUurHpdApEG+xxs2OegCBdaHpHuEWvpnhwM+sRapm9Ql/SbkhUosRBptE8sW70nkW5YZ5NJa5EoLRmogTZ22i9pQcgx1ZysZZMK2m0t3htaqRutlhhQFpltzc324nFqt5ow0J5acx1icDuC7UH7BZiyXwLRbmPGlhDdGcPcaFmOJiPqlKKxVtOpJTNpwLUo2AhkyEmuPYYtDspLJFvNUsgyMqoqvMCCYT1KFV6Ioz4Tw9olWqQWS/T0NayEgOsC/IGNPMfaHG6PaSbA9IF21QQXTbPALGZ8YthJTSQp1YJxv4FgRo5FuVZKZ19VG03AqFlQLmzG+LY20Kix5Cg83WKgFfDdFzFICWXyNUCxD5K8cnjvWBlmf/fYAxD/O076wioM5PfkEXh4nbueznnOrFk1CuuBNoX1nKWuQR4JlMfFykqxMhEAGvjQQ6USe6NRPGDJvRcPsN+Fa2P+1ssQLOjAZQWe8fBINIY0gV7WRi9LqxfGVe8twvWel6fGxWm9kkFe0y/Kkl3MDPsjW5XeL16zcavuNrdKRiA6ZDksUjjIrvSxTVcFj6bJ6tBVFfaW0z+p72U/c5p8qb73JwzLHANAn+G+RK+btGQBJpo3Sh46X9Zn6BiQhclK/RqX4Y14j1zOqN1c4r3mYLYdBOJZwJElu66qHEvXX7/zquDX0sdmyIGfnK5v5x4gB+rbT8PVDsO9vkT9FNeEQkyC+Uum6sTYYyvgTRM12Vge0leCYOAVtQi8ZQyS5FQrWkcgLQxDWhhzQFoYP8nUwpFYXKdh4bjhCz4w4hM24nAKHr+IWBbxQgbIS3IwhMYeAxgNcAnKzWxAFo47PH4pSIv/RFKjtCqmK85cDQpY6uiHp8gL279Qv2NLebJy/WB5cnD6NjX8aHnr5MgX71fKEAV3l38pLlgmSh49WiKDZP/Bg4he9os/AOwab8Gur+jzqKaKbaCrQyHbQr9MCGN1CLPQMCNz6EDD/mD2is4Qdtssu1watiyY60zVEAEXQ9971pnICaRxJgwuoHOqzag7efSCek3w6ogIKWgA8hUAwpoY9nXEQcQ/s8akA6BeZRoMFC2rK60ASC0kG9u5966xsrDpEJA4sULJ2/VOk7wlNh/Zu7MirK3svumhEvvMfsx31rPpfcjgXA38E9mh/fNbSxQf981/j6F8Cn7x99B6i5PxMQEmxqSZHPkTS8UFsvkQBQLVX9StZ4AWoDJgJVkzG0rBII6DHo5WGnuNJT9tsJkiuT2YInncRopkxEEfrtcyJyG/pAWZhk/G82o2r8ZFuOKcmhW1DEcZvqNpPW7Tejy69bhMiRclcAWwmnhGZ0mpniwMQNJrSvpRAubjtpiPC83HgyMvmIoPTcXljSdSPb2ZbH+LmRzXj1pMJBEHE4kqaq+khQWFzntaViiBEpORHJpCStakPjQFOxYk0ooWiqFJ+JJ4VHNDOgxGahgE1oIcBHO4QHtelL5n712j9XMkSb62uzL/7D1vrD0ssM9jPejUFCRxmBcfwipF2b2uPLmu7OMSQO3rvzgP9rCeS5wH2+BWLlGzaFurZs63r1UvTOY4HU0spOeTsyuXQIzf6rJYVfDKSmsp+Hg0nkxnWovBxfbFYBq09aVQ16YH90CutRlo6JGPLCoGs1i0G+anxtnKEgtqv3yC5tzmeqa9nY+Suy0eanHNXuqaCXBN8MhaNJWA6QhytGwKVBR99lfzxmBeTeXVoAhXmVNTopa4RG+EU2uhYEKH8Eg0pUvipqQHJUs4YxXOxVFcqcLJOqo3HDQYikTRSVscdKNLPxyKxHtasp9EEIioLMTQAKJSVQyncYTOmWw4ZwxmXsJ0xy2ryQ4+aWWonb2RFJQjwE7RC8f2dvDCNuTUxqyGec8s8L+LnfPcns5r0+nO2anFCfWg/r46Ybu6iO6HEGqNFMG9/HLH6k1771IqiU2AdofHdKf7oGeKfAhi5FchUXyRlsjfo8KBtdpBeBiy6P2nBo9qIVHL6AbYOZtYoh6wY1Z+vzTeiboYqEe1jPqmWh7pwEcGd+zdMzZtB/2OHhFBr5CCPW83UrAm7dDV2qAdkFcHQZ/rLfpMMhlyRZs40rckKwXWrvWCbrONkLJqCd3umr2aktAUUPseoPa9HFD79MlfX/kv1ZPuXUgIUOlm/fa9442akp7DdcpoLIke0CvXguGEvzkltgwNRFosoWAM6mD+AfPRBplEjnMEN+3ds5a6APZv6PRwG05RuX7d0TIZq7/z+wNrSfLWpeIPMILzSAjOz+/CRM7WiD8NHCIHDY+ImJnFUviDc2KsTNfCiRgck1l99cKCTUunFIYftVtBMlf3lpdSLGO5aamUAs7FURQCUpgGpKQ1pWhdplqYUgRC0eR7phRgHBIt8MoQoUS9AyUsVYP+FF21xiWrRh4RTNH+rcXZgzVvSO98cM9YRdhRmRg7IhlpOimNHXlwR8U1VpnY+WDTcZ/B9RHquLhqoqcKdNFkK+TyZh8m2sBxS53EaAEkyPc5WjzVGzEt0+8wy61AQLzGdBs5onW6bfp025ZVC2UXgR5VqZ3ooYN3mKDm4iio6QWG5pr0jTeXxzfjghH2Xy5aImJ4yxqRbvPfadYBl9XT1CC8bXuats/a3q+eJs0JBqWKkobGpIaaa2yaTWquFUUWVdwitvJuvuKbgrCJKeZ/rjv8wKaKMFYZ37HXWBTyYUFCMHmLYSmIF4trEUY3mBouLouovBcYxH6LYVOU9A66hW6HpZwNpEgcWScucOjpuu52h8Xy1omprXsf+hTxZUv119nYH/fVt36qnd/ZJ+f//jz3NPvi3Py3Gc5S50I9/mMzYuLiSosSmylXoHPKZYmPt8+mf3spF11maBC9dnHtMMSxdeXUzsr45iPmCqUlZOkqoyHLkh9Za1+lRu3rN1ztMkNT22rXpYSm381qF0VROmUemiwd9/ol2Sz7A2UJGdUuDcv6uGjZ2+ocwCYDjmyRLvYB+raNTE+tC05ld96X/UFodH/PEsHpc+Sp+vPnzpEP17d9bn5jS5DqwFX2NrhKl6T8b0jKQkuQparXR905BkTFbxAV2ltj0JSFVpCg4Nhp/l8fWkuuSx8cWmLqyZNkTf3Av154pXXW2/dUPnlJdaoGDnBLLNwtXcNa1sLd/0Uc6JzBRCWz0xKwoBrWOWpSMnssF9S9zcIaWMYyKmoWHrJ0RU058uBmuuq76cElK2ot1RXbgh4guoZErjZwIlTQJL37x13U/MZqEnOGmgnuGwIzoQtJenstLXoDRqjhghZnzbWldi1BZruVgxbYhAUFNjWcV2N58G4tDiwxJmoRZIm3vXuxjdUILVbjREk7ixBw5ITZp4Uwu9Nc1LIEamezW4vBnMLlxqUtcOQZv7mwFZFVHzYZzXgC3qi+viWFsKPDlcBExeGnRe+ms7erV0d2PnDXWNl+9xvKYYF9bhIr1Hoqci3wStwV0nD2lrq0uZL/cNvejyTTx6wg/2LxdJgp09lXLunsUZjBfvg/AMczA/1wPMXRWhq2Ra9ahsPTGU5GcYYBMfUZnpj9pF5DjYpq7CR4q5qw1lBTeXUgj8XTDCDDgKj1XyoypAAHUv0wyIi13syALsmakkGULIUMcC6OskoVTsbRINiGbCJDzFjmGBjML/ohG10GPPRmB1s7Sd6jyDGDEBHXN0EBRvRRZACMSK/A0QBgRK6JEXBUiyTp0ogakDQhtxRKUNYYWSZUPD1Y3FCILQ8uLmwj0XvrXxYW9wvYF+MGkyGbDOSIF9uAR18reGAdK623FPWa3bPJgqW0dcngkcyr6TyYm9YL4JEWtdRvADySKWu5aynwSEonKHiEKVqoKYofvdJzgB/xWE+GIkhI78dVJTAZV6aBIz0dccQxYtCHJdHE7f8x2ed595ElMeWPts8/t63RJIK4Yt3/2Owp61uyp6zN1keDQGB/WB9dCsUGsgLtXxy6pH2Mzf5Fm04hbHPsidaWw3a7Dp1016Ek6w2GHdq3+uB1Zp9hTl+friYGVioL2rYgUptdpRCtsekQXLmaG1ypMz6zh2vB1sH2PVyLtwjeUtZrCq4KLpXoPYgwe9eT4aX3A7bt4DJXybAfcRs8nId51HcOvMFUfeiVQkHli3pbSKigus7Qag3t+aP9IaLqp93TWMIR9d52bLQWC5gAaOFW5g+zBvweZsxLm9dpz7QTANopgkN5xZrHK5s7KQxJACXsCadLL9YsmD+/S6LuIWJ7tOoFTQfpxgrNLuF0COCPuojoIqOLBLdkWrdYbCuzT0+U/+6BY9/sH5seHysLtC2dYtnBg7jub9S3GjZvu/gjsPldC/KkP7XWF3qW7M9tSZQaveiNRKmxo6/DLshVnROlS1gU+Z1LlDpUOrDf3SfqjoOZUkuiZHhdpH2ss3Lh4E20ur+zbFRFaPPHT9fS3jeszD3QvkSyuEiHu2sY/kbL/B8zYpinaFnYwhkL4D7DdktajrxPtZ/kwUjmfKrrJBY1ef1IAI7IcCSER8InmROmOpvhw+6ylCmdDopiboo20nGe8/ikiLF/Q/Tru9lHigEua+4AILRTDDUi+P/7yeHb6xd2lCe3DX+5QIb+y1fP1reVJ3e+wb56BwxnjATy89df+DrZRN6+Y36U28/eaRQMurWj96N2VBM8XknvkzruAwwMhvVopIVSytK1I6wX4BDbGCMdVjWuHd2/M/PDC9kd20bl6BIFhPkaeerQufpXyYfOHapvu3dR8Yhv2esZgRiid7SLxcY2V33LpwOdMkD3AgcctL/SQeQ+sudYtl5emX38jcyxcubY6ezjapbc+1hf/dAFdhib2ccvzL92rn7+3PzpC9z6c+zIhfnTNG6NwPsmGu9b1lcaLDXexvKJyl3eKO82LKsdlfjrkz++m1oWB67IntRszjngjcwJhuVsC6q1VYa1Nf6YBbhhjRfcHkoejO18xkc0Ohbxg45E3qimXoyNlSdvLu9Lk21vRuqP2r7xhfmnT2NFTo8060+zt3xh/n7AmQJ8tqxFpysX7TBrbiGWcMeQXZCDdF1LbzSlFkDMZU5sZC2UyYWJcp33FV7dn63XlWkyC0/tj2UIf3PhVfrHNHxk7NS5+pv8P9HdA+fIynr1FNzL06Dspyx9NM8afu4uEDVIG2dCHftjDG62oD9mOY0vS3WYLWghW9xQxmhuGypEkgNUISN6B0qx0YHiJ9mn77l/j1L/KUltfdJVv/WuN5ESu4S3tjTaTF4ebRLg0ZdoXy4zA3o41tzT7F64p1mHWr0Rdyb9+Fu5/btz+3+Uftz2mbfnf1j/af2fiTg/8zbTRp9/YfiLr0j16VqgT58L9enyteoTCJh4UvWJqnQSxjW3C2mTD7Tnk2AAEr8pkVFShRdY9OlXsAypL4wxx93AsCTZ1Kf1GdXnZauLuIef4Go5goqbBHJc9mlQ15v10y7WXX9n66hyeO9d9ykkdc/9oy+ftw+NztHa0YXvcyr54vkL38c96cwp+NyPMudBfz1Na24McG+5salcN2HITl4BfrvB2FPe7dXt9up2e3W7vbrdXt1ur263V7fbq9vt1e326nZ7dbu9ut1e3W6vbrdXt9ur2+3V7fbqdnt1u+st3V7dLknp9up2e3W7vbrdXt1ur263V7fbq9vt1e326nZ7dbu9ut1e3W6vbrdXt9ur260ddXt1u726/x97dVmiXHyEi9nfoffyPGNZvqpx1LcJ/h3vwqUsY+2aXfd+L2NlrMtYCoSC7ZXUdrD3MvsU6H5biR/VB5gyX7xorsXIdmY9fW58Fwo8l/C5+X0d8FzG5+b3w8Bzkb7eyLnh+U3mc+Fe+y5xkMnyWxhGtONfbF8gv8aQ36T3tbIMhJ1TYOUr6HctEfrVU8YvovIFjcHvbtS/b9CmNwtfmQmdYnexzKlTjHkNh36NVIdrWE60GyfCZzG+sw3u3UE/q/HdhzJ++2Gb5/i9Tu4t5CH4DF7hSfgM8Nv4LF563Pjbw/D6RMvzFL0e8E/h61QHQ8Z5l9P7x0Bzp/1OuH9GykgZ+51zn8f/9JxBSEA+Ts/5oHHOtaZcEKn8w61y9zP66417vLb1uOd2/bzFx/8H3PtrKXjaY2BkYGAAYikdjqJ4fpuvDPIcDCBw2mHLBBj9/+H/Zp4ktsdALgcDE0gUACGpC+oAAAB42mNgZGBge/w/moGB5+v/h/8f8CQxAEVQQBUAuwQH7njavZGxDgFBEIb/5SJXqESj0JGrRFTiFaiuU6pEKfEISpXoNVRqhZfwBCpRiEQUgpZvdk/iCWzy5ZvNzN1MZqNUM3FyGylKDdfFjyh9g1sS3wOujWd4DmvyN3gRV/CJXAmqxBdch0bIW+ymMIEh92XmBfkzHEOdWS1IoBzuNov9z+p8/fGn/vJjZlUfX3Gc1TCfbOYmbGCbef+/vq4Tdur7ZTvy+3rFq0B+LBVO0te5nuR2UAvogAcYImkfy+b372K9H8WnW1s+7NQN7dt4pX5h5J0YxacSJR993JtrAAAAeNpjYGAwgsINDE+YfJhymNmY5zF/YjFiCWIpYpnFuoFNi+0B+zSOGE42LgYuK+4MniSeCTy7eJ7xCvDa8B7je8T/QWCL4AahHGER4S8i30TzxHjENoi7SHhJukjFSVvIVMmmyHnI3ZO/p5CkmKG4RElIKULpjjKDco3yHJUdqsfUutTbNJw0Xmme0jqj7aL9SKdNV0pPQV/KwMSQzyjA2MpEzmSL6RYzC3M78yrzFxZ6FiuAcIPFDosDFicsLljcsXiBHVpyWapZ6lmaWdpZ+gFhmGUcEGZZVli2WE6wXGC5AQCjG07BAAABAAAAewBCAAoAQgALAAIAAQACABYAAAEAAeEAAwABeNp1kL1OAkEUhb8FJEBhYWWs5gn4CTSWRCMW2Ag8wBIW2AR3kV0ldNY+ga9A61P4TFaeGYaAJGRy5565P+fcuUCFKUWCUhVYyXY44FKvHS5Q48PjouKfHpe44cvjCx759rjMNb8e/5AEV9yRsmQjxpgZc3IMW1mLW3cMY2UNA0JeeCNiodez/IZEvQsmZNQV6wrb3IEpc69IPpJ/1z1RZV+a9zyp1/aP1JMrG7JWfqwf23h+UmWO6roOZdK3/A++PpWmzS6lbNUMHWk1ZZ2j3zSEmrrbus/NMRRD7Lj3sxjNFrrITNyJ4w8Vt//Z7yd3uod57MZeta9YtSu/td6/7lS+/geGfUq3eNptzTdOAwEUhOH/OWBwxJmcRI7rXUeyLWxyzknUNHRUXIErwAVoiKKDK3EChPE+OkYafd0MDmr5/mKQ/3JTreDAiQs3Hrz48BMgSIgwEaLEiJMgSRPNtNBKG+100EkX3fTQSx/9DFTXhxhmhFHGGGcCgxQmFmkyZMmRp8AkU0wzwyxzzFNigTIVFllimRVWWWOdDTbZYpsddtljnwMOOeKYE04545wLcXAnTnGJm3seeZI68Ui9NIhXfOKXgAQlJI0888I7r7zxIGE++JQItxKVmMQlIUnP9dWlYRQN25KpWmrhV9MwDDWlmqqlptWMmlVzal792yvamhXbTM2y/lRK9k9VU7XU9A+wf0x3AAB42tvB+L91A2Mvg/cGjoCIjYyMfZEb3di0IxQ3CER6bxAJAjIaImU3sGnHRDBsYFRw3cCs7cK4gQnC2MCs4LqLgYmJgYFJeyOzWxlQhAUiYggXidwgog0AKqkcQA==") - format("woff"), - url("../fonts/lcdmono2ultra-webfont.eot"), - url("../fonts/lcdmono2ultra-webfont.ttf") format("truetype"), - url("../fonts/lcdmono2ultra-webfont.svg#LCDMono2Ultra") format("svg"); - font-weight: normal; - font-style: normal; + font-family: 'LCDMono2Ultra'; + src: url('data:font/woff;charset=utf-8;base64,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') format('woff'), + url('../fonts/lcdmono2ultra-webfont.eot'), + url('../fonts/lcdmono2ultra-webfont.ttf') format('truetype'), + url('../fonts/lcdmono2ultra-webfont.svg#LCDMono2Ultra') format('svg'); + font-weight: normal; + font-style: normal; } -.ddimgtooltip { - z-index: 2000; - box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/ - border-radius: 8px; - display: none; - position: absolute; - border: 2px solid #2e5473 !important; /* Changed to match d5 of theme */ - background: #f7fafc !important; /* Changed to match l1 of theme */ - color: #2e5473 !important; /* Changed to match d5 of theme */ - padding: 0 7px 3px 7px; - /*font-family: sans-serif; */ - font-size: 86% !important; - max-width: 300px; +.ddimgtooltip{ + z-index: 2000; + box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/ + border-radius: 8px; + display: none; + position: absolute; + border: 2px solid #2e5473!important; /* Changed to match d5 of theme */ + background: #f7fafc!important; /* Changed to match l1 of theme */ + color: #2e5473!important; /* Changed to match d5 of theme */ + padding: 0 7px 3px 7px; + /*font-family: sans-serif; */ + font-size: 86%!important; + max-width: 300px; } -.tipinfo { - text-align: left; - padding: 3px 0 3px 2px; +.tipinfo{ + text-align: left; + padding: 3px 0 3px 2px; } -.tipinfo h5, -.tipinfo h6 { - line-height: 1.2em; - margin: 0; - padding: 0; +.tipinfo h5, .tipinfo h6 { + + line-height:1.2em; + margin:0; + padding:0; } -.tipimg { - width: 438px; /* suggest 380 for wxgraphs */ - height: 175px; /* suggest 260 for wxgraphs */ +.tipimg{ + width: 438px; /* suggest 380 for wxgraphs */ + height: 175px; /* suggest 260 for wxgraphs */ } diff --git a/css/mx-templates.css b/css/mx-templates.css new file mode 100644 index 0000000..906ff38 --- /dev/null +++ b/css/mx-templates.css @@ -0,0 +1,249 @@ +/* ----------------------------------- + * Styles for CumulusMX Templates + Last modified: 2021/03/19 09:23:15 + * ----------------------------------*/ + +html, +body, +p, +h1, +h2, +h3, +h4, +h5, +h6, +li, +td, +th { + font-family: "Rosario", sans-serif; +} + +p { + font-size: 15px; +} + +#Header { + border-style: solid; + border-width: 0 0 10px 0; +} + +.site-width { + max-width: 1140px; + margin: auto; +} + +.graph-width { + max-width: 1250px; + margin: auto; +} + +#Footer { + border-width: 5px 0 0 0; + border-style: solid; +} + +.logo { + max-width: 250px; + margin: 5px 0 5px 16px; +} + +.subText { + font-size: 80% !important; + font-weight: 400; +} + +body { + background-image: url("../images/picture.jpg"); + background-position: bottom left; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.statusPanel h5 { + margin-bottom: -5px; +} +/* ------------------------------------- + * Flex boxes + * -------------------------------------*/ +.at-flex-start { + display: flex; +} +.at-flex-end { + display: flex; + justify-content: flex-end; + flex-wrap: wrap; +} + +.at-flex-justify { + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +.at-flex-between { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.at-flex-bottom, +.at-flex-items-bottom { + align-items: flex-end; +} + +.at-flex-items-center { + align-items: center; +} + +/* -------------------------------------------------- + * Menu enhancements + * --------------------------------------------------*/ +#Main_Menu { + margin-bottom: 4px; + border-width: 2px 0 0 0; + border-style: solid; + min-height: 32px; +} + +.at-slim { + padding: 4px 14px !important; +} + +.at-divider { + margin: 0 5px; + color: #f80; +} + +.at-spacer { + min-height: 2em; +} + +.at-menu-lable { + display: block; + width: 100%; + font-size: 13px; + font-style: italic; + padding-bottom: 2px !important; + padding-top: 4px !important; + border-bottom: 1px dotted #c2cfa5 !important; +} + +.at-menu-bar { + display: block; + height: 2px; + padding: 0 2px !important; +} + +.at-indent { + padding-left: 40px !important; +} + +/* ------------------------------- + * Model enhancements + * ------------------------------*/ + +.w3-modal-content { + margin-top: 10%; + border-radius: 8px; +} + +.w3-modal header { + border-radius: 8px 8px 0 0; +} +.w3-modal footer { + border-radius: 0 0 8px 8px; +} +.w3-modal .w3-btn { + border-radius: 0 8px; +} + +/* ---------------------------------------- + * Media enhancements + * ---------------------------------------*/ +@media screen and (max-width: 780px) { + #Footer { + position: unset; + } + #Content { + /*margin-top: 170px!important;*/ + margin-bottom: 5px !important; + } + + .statusPanel { + text-align: center !important; + margin: auto !important; + } +} + +@media screen and (max-height: 768px) { + #Footer { + position: unset; + item: center; + } + #Content { + margin-bottom: 5px !important; + } +} + +/* -------------------------------------- + * LED enhancements + * -------------------------------------*/ +.at-led-round { + display: inline-block; + height: 1.2em; + width: 1.2em; + margin: 0 0.5em -3px 0.5em; + border-radius: 50%; + background-color: #888; + box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), + inset -2px -2px 2px rgba(32, 32, 32, 0.6); +} + +.at-led-block { + display: inline-block; + height: 1.2em; + width: 1.2em; + margin: 0 0.5em -3px 0.5em; + background-color: #888; + box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), + inset -2px -2px 2px rgba(32, 32, 32, 0.6); +} + +.at-led-brick { + display: inline-block; + height: 0.8em; + width: 1.6em; + margin: 0 0.5em -3px 0.5em; + background-color: #888; + box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), + inset -2px -2px 2px rgba(32, 32, 32, 0.6); +} +.at-led-oval { + display: inline-block; + height: 1em; + width: 2em; + margin: 0 0.5em -3px 0.5em; + border-radius: 50%; + background-color: #888; + box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), + inset -2px -2px 2px rgba(32, 32, 32, 0.6); +} + +.at-led-green { + background-color: #0b0; +} + +.at-led-flash-red { + animation: flashR 1s infinite; +} + +@keyframes flashR { + 0%, + 60% { + background-color: #f00; + } + 61%, + 100% { + background-color: #800; + } +} diff --git a/css/w3Pro.css b/css/w3Pro.css new file mode 100644 index 0000000..b8b5b0f --- /dev/null +++ b/css/w3Pro.css @@ -0,0 +1,247 @@ +/* W3PRO.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */ +html { + box-sizing: border-box; +} +*, +*:before, +*:after { + box-sizing: inherit; +} +/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section { + display: block; +} +summary { + display: list-item; +} +audio, +canvas, +progress, +video { + display: inline-block; +} +progress { + vertical-align: baseline; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden], +template { + display: none; +} +a { + background-color: transparent; +} +a:active, +a:hover { + outline-width: 0; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} +b, +strong { + font-weight: bolder; +} +dfn { + font-style: italic; +} +mark { + background: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +figure { + margin: 1em 40px; +} +img { + border-style: none; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +button, +input, +select, +textarea, +optgroup { + font: inherit; + margin: 0; +} +optgroup { + font-weight: bold; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"] { + padding: 0; +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +/* End extract */ +html, +body { + font-family: Verdana, sans-serif; + font-size: 15px; + line-height: 1.5; +} +html { + overflow-x: hidden; +} +h1 { + font-size: 36px; +} +h2 { + font-size: 30px; +} +h3 { + font-size: 24px; +} +h4 { + font-size: 20px; +} +h5 { + font-size: 18px; +} +h6 { + font-size: 16px; +} +.w3-serif { + font-family: serif; +} +.w3-sans-serif { + font-family: sans-serif; +} +.w3-cursive { + font-family: cursive; +} +.w3-monospace { + font-family: monospace; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Segoe UI", Arial, sans-serif; + font-weight: 400; + margin: 10px 0; +} +.w3-wide { + letter-spacing: 4px; +} +hr { + border: 0; + border-top: 1px solid #eee; + margin: 20px 0; +} +.w3-image { + max-width: 100%; + height: auto; +} +img { + vertical-align: middle; +} +a { + color: inherit; +} diff --git a/css/wah.css b/css/wah.css index 2f75a36..8de105d 100644 --- a/css/wah.css +++ b/css/wah.css @@ -1,44 +1,44 @@ :root { - --background: #f2efbd; - --background-dim: #d2d0a4; - --foreground: #2a271c; - --border-color: #f27405; - --border: var(--border-color) 2px solid; - --shadow-color: hsla(11, 96%, 43%, 0.4); - --shadow: drop-shadow(8px 8px var(--shadow-color)); - --shadow-small: drop-shadow(3px 3px var(--shadow-color)); - --links: hsl(183, 93%, 27%); - --links-hover: hsl(183, 93%, 15%); - --table-header: hsla(11, 96%, 43%, 0.2); + --background: #f2efbd; + --background-dim: #d2d0a4; + --foreground: #2a271c; + --border-color: #f27405; + --border: var(--border-color) 2px solid; + --shadow-color: hsla(11, 96%, 43%, 0.4); + --shadow: drop-shadow(8px 8px var(--shadow-color)); + --shadow-small: drop-shadow(3px 3px var(--shadow-color)); + --links: hsl(183, 93%, 27%); + --links-hover: hsl(183, 93%, 15%); + --table-header: hsla(11, 96%, 43%, 0.2); } html { - height: 100%; - color-scheme: light; + height: 100%; + color-scheme: light; } body { - color: var(--foreground); - min-height: 100%; - background-color: hsla(0, 0%, 0%, 0); - padding: 10px; - font-family: serif; + color: var(--foreground); + min-height: 100%; + background-color: hsla(0, 0%, 0%, 0); + padding: 10px; + font-family: serif; } /*noinspection CssUnknownTarget*/ body::before { - content: ""; - position: fixed; - top: 0; - left: 0; - background-image: url("/images/background.jpg"); - width: 100%; - height: 100%; - z-index: -1; - opacity: 0.8; - background-size: cover; - background-attachment: fixed; - overflow: hidden; + content: ""; + position: fixed; + top: 0; + left: 0; + background-image: url("/images/background.jpg"); + width: 100%; + height: 100%; + z-index: -1; + opacity: 0.8; + background-size: cover; + background-attachment: fixed; + overflow: hidden; } h1, @@ -47,7 +47,7 @@ h3, h4, h5, h6 { - margin: 0; + margin: 0; } p, @@ -56,136 +56,129 @@ ol, dl, menu, dir { - margin: 0; + margin: 0; } hr { - border: none; - border-top: var(--border); + border: none; + border-top: var(--border); } a { - color: var(--links); - text-decoration: underline dotted; + color: var(--links); + text-decoration: underline dotted; } a:hover { - color: var(--links-hover); - text-decoration: underline solid; + color: var(--links-hover); + text-decoration: underline solid; } div.page-container { - /* width: 1000px; */ - width: 800px; - margin: 5px auto; + /* width: 1000px; */ + width: 800px; + margin: 5px auto; } div.page-container > div { - background-color: var(--background); - filter: var(--shadow); - padding: 10px; - border: var(--border); - margin-bottom: 20px; - /* temporary */ - /* height: 600px; */ + background-color: var(--background); + filter: var(--shadow); + padding: 10px; + border: var(--border); + margin-bottom: 20px; + /* temporary */ + /* height: 600px; */ } div.page-container > div:last-child { - margin-bottom: 0; -} - -div#header { - display: grid; - grid-template-columns: 66px 1fr; - grid-template-rows: 1fr; - grid-column-gap: 15px; - grid-row-gap: 0px; -} - -div#header img { - filter: drop-shadow(2px 2px hsl(0, 0%, 66%)); - margin-right: 10px; - image-rendering: pixelated; + margin-bottom: 0; } div#header h1 { - margin: 0; - font-style: italic; + margin: 0; + font-style: italic; } div#header h1, div#header p { - display: inline; + display: inline; } div#content { - position: relative; + position: relative; } div#content::after { - display: block; - content: ""; - clear: both; + display: block; + content: ""; + clear: both; } div#footer { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: 1fr; - grid-column-gap: 0; - grid-row-gap: 0; - align-items: center; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 1fr; + grid-column-gap: 0px; + grid-row-gap: 0px; + align-items: center; } div#footer div:last-child { - text-align: right; + text-align: right; +} + +div#footer div:last-child img { + image-rendering: pixelated; + margin: 0; + padding: 0; + width: 88px; + height: 31px; } /* -------------------------------------------------------------------------- */ table.almanac td:nth-child(odd) { - font-weight: bold; + font-weight: bold; } table.almanac td { - padding: 0 10px; + padding: 0 10px; } table.almanac td:nth-child(even) { - padding: 0 15px; + padding: 0 15px; } table.almanac { - min-width: 100%; + min-width: 100%; } -table.mx-datatable { - width: 100%; - border-collapse: collapse; - border: var(--border); - filter: var(--shadow-small); - background-color: var(--background); +table.conditions-now { + border-collapse: collapse; + border: var(--border); + filter: var(--shadow-small); + background-color: var(--background); } -table.mx-datatable th { - text-align: left; - background-color: var(--background-dim); - border-top: var(--border); +table.conditions-now th { + text-align: left; + background-color: var(--background-dim); + border-top: var(--border); } -table.mx-datatable tr td, -table.mx-datatable tr th { - padding: 5px 10px 5px 5px; +table.conditions-now tr td, +table.conditions-now tr th { + padding: 5px 10px 5px 5px; } -table.mx-datatable tr td:nth-child(2) { - padding-right: 40px; +table.conditions-now tr td:nth-child(2) { + padding-right: 40px; } -table.current-conditions tr td:nth-child(odd) { - font-weight: bold; +table.conditions-now tr td:nth-child(odd) { + font-weight: bold; } -table.current-conditions tr:last-child td:nth-child(3) { - font-weight: normal; - font-style: italic; +table.conditions-now tr:last-child td:nth-child(3) { + font-weight: normal; + font-style: italic; } diff --git a/images/CumulusMX-Logo.png b/images/CumulusMX-Logo.png new file mode 100644 index 0000000..ecf0246 Binary files /dev/null and b/images/CumulusMX-Logo.png differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000..26f009f Binary files /dev/null and b/images/favicon.png differ diff --git a/images/logo.png b/images/logo.png deleted file mode 100644 index bbd099b..0000000 Binary files a/images/logo.png and /dev/null differ diff --git a/images/picture.jpg b/images/picture.jpg new file mode 100644 index 0000000..2336b37 Binary files /dev/null and b/images/picture.jpg differ diff --git a/includes/footer.inc.php b/includes/footer.inc.php deleted file mode 100644 index 18d9835..0000000 --- a/includes/footer.inc.php +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/includes/head.inc.php b/includes/head.inc.php deleted file mode 100644 index a2b1f32..0000000 --- a/includes/head.inc.php +++ /dev/null @@ -1,14 +0,0 @@ - - - - -Cumulus MX - - - - - - - - - diff --git a/includes/header.inc.php b/includes/header.inc.php deleted file mode 100644 index a6b546d..0000000 --- a/includes/header.inc.php +++ /dev/null @@ -1,19 +0,0 @@ - \ No newline at end of file diff --git a/index.php b/index.php index 3ce658a..f62fb4f 100644 --- a/index.php +++ b/index.php @@ -2,164 +2,198 @@ - - + + + + + Cumulus MX + + + + + + + + + + -
- -
-

Almanac

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Dawn:Sun Rise:Moon Rise:MoonVisible - % -
Dusk:Sun Set:Moon Set:
Daylight:Day Length:Moon Phase:
-

-

Conditions at local time

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Temperature and Humidity
Temperature  - Dew Point  -
Windchill  - Humidity %
Heat Index Feels - Like  -
Temp change last hour  -
Rainfall
Rainfall Today  - Rainfall Rate /hr -
Rainfall This Month  - Rainfall This Year  -
Rainfall Last Hour  - Last rainfall
Rainfall Since Midnight Rainfall Last 24 Hours  -
Wind
Wind Speed (gust)  - Wind Speed (avg)  -
Wind Bearing° - Beaufort
Wind Variation (last 10 minutes)From ° to °
Pressure (sea - level)
Barometer  -  /hr -
- Page data updated -
- -
+
+ +
+

Almanac

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dawn:Sun Rise:Moon Rise:MoonVisible % +
Dusk:Sun Set:Moon Set:
Daylight:Day Length:Moon Phase:
+

+

Conditions at local time

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Temperature and Humidity
Temperature  + Dew Point  +
Windchill  + Humidity %
Heat Index Feels + Like  +
Temp change last hour 
Rainfall
Rainfall Today  + Rainfall Rate /hr +
Rainfall This Month  + Rainfall This Year  +
Rainfall Last Hour  + Last rainfall
Rainfall Since Midnight Rainfall Last 24 Hours  +
Wind
Wind Speed (gust)  + Wind Speed (avg)  +
Wind Bearing° + Beaufort
Wind Variation (last 10 minutes)From ° to °
Pressure (sea + level)
Barometer  +  /hr
+
+ +
- \ No newline at end of file + diff --git a/js/menuSample.js b/js/menuSample.js index bdeff7f..87c644e 100644 --- a/js/menuSample.js +++ b/js/menuSample.js @@ -38,7 +38,7 @@ menuSrc = [ { title: "Cumulus Forum", menu: "w", url: "#", forum: true, new_window: true }, { title: "Webcam", menu: "b", url: "#", webcam: true, new_window: true }, { title: "My Cat", menu: "b", url: "mycatpage.htm" }, - { title: "Some Cat", menu: "b", url: "https://pixnio.com/free-/images/2020/07/26/2020-07-26-08-52-19-1200x1200.jpg", new_window: true } + { title: "Some Cat", menu: "b", url: "https://pixnio.com/free-images/2020/07/26/2020-07-26-08-52-19-1200x1200.jpg", new_window: true } ] } ]; diff --git a/js/setpagedata.js b/js/setpagedata.js index 56d567d..999a118 100644 --- a/js/setpagedata.js +++ b/js/setpagedata.js @@ -14,7 +14,7 @@ let fixedHeader = false; // Use only true or false let fixedFooter = true; // Use only true or false let headerMargin = 20; // Gap between the header and the main body let footerMargin = 10; // Gap between the body and the footer -let load_menu = "/js/menu.js"; // menu file to load - path is relative to the page +let load_menu = "js/menu.js"; // menu file to load - path is relative to the page // Thats the only changes you should make unless you know better! diff --git a/lib/steelseries/scripts/RGraph.rose.min.js b/lib/steelseries/scripts/RGraph.rose.min.js index 1038289..4e21f88 100644 --- a/lib/steelseries/scripts/RGraph.rose.min.js +++ b/lib/steelseries/scripts/RGraph.rose.min.js @@ -1 +1 @@ -typeof RGraph == "undefined" && (RGraph = {}), RGraph.Rose = function (n, t) { var r, i; for (this.id = n, this.canvas = document.getElementById(n), this.context = this.canvas.getContext("2d"), this.data = t, this.canvas.__object__ = this, this.type = "rose", this.isRGraph = !0, this.uid = RGraph.CreateUID(), this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID(), this.colorsParsed = !1, RGraph.OldBrowserCompat(this.context), this.centerx = 0, this.centery = 0, this.radius = 0, this.max = 0, this.angles = [], this.properties = { "chart.background.axes": !0, "chart.background.axes.color": "black", "chart.background.grid": !0, "chart.background.grid.color": "#ccc", "chart.background.grid.size": null, "chart.background.grid.spokes": null, "chart.background.grid.count": 5, "chart.centerx": null, "chart.centery": null, "chart.radius": null, "chart.colors": ["rgba(255,0,0,0.5)", "rgba(255,255,0,0.5)", "rgba(0,255,255,0.5)", "rgb(0,255,0)", "gray", "blue", "rgb(255,128,255)", "green", "pink", "gray", "aqua"], "chart.colors.sequential": !1, "chart.colors.alpha": null, "chart.margin": 0, "chart.strokestyle": "#aaa", "chart.gutter.left": 25, "chart.gutter.right": 25, "chart.gutter.top": 25, "chart.gutter.bottom": 25, "chart.title": "", "chart.title.background": null, "chart.title.hpos": null, "chart.title.vpos": null, "chart.title.bold": !0, "chart.title.font": null, "chart.title.x": null, "chart.title.y": null, "chart.title.halign": null, "chart.title.valign": null, "chart.labels": null, "chart.labels.position": "center", "chart.labels.axes": "nsew", "chart.labels.offset": 0, "chart.text.color": "black", "chart.text.font": "Arial", "chart.text.size": 10, "chart.key": null, "chart.key.background": "white", "chart.key.position": "graph", "chart.key.halign": "right", "chart.key.shadow": !1, "chart.key.shadow.color": "#666", "chart.key.shadow.blur": 3, "chart.key.shadow.offsetx": 2, "chart.key.shadow.offsety": 2, "chart.key.position.gutter.boxed": !0, "chart.key.position.x": null, "chart.key.position.y": null, "chart.key.color.shape": "square", "chart.key.rounded": !0, "chart.key.linewidth": 1, "chart.key.colors": null, "chart.contextmenu": null, "chart.tooltips": null, "chart.tooltips.event": "onclick", "chart.tooltips.effect": "fade", "chart.tooltips.css.class": "RGraph_tooltip", "chart.tooltips.highlight": !0, "chart.highlight.stroke": "rgba(0,0,0,0)", "chart.highlight.fill": "rgba(255,255,255,0.7)", "chart.annotatable": !1, "chart.annotate.color": "black", "chart.zoom.factor": 1.5, "chart.zoom.fade.in": !0, "chart.zoom.fade.out": !0, "chart.zoom.hdir": "right", "chart.zoom.vdir": "down", "chart.zoom.frames": 25, "chart.zoom.delay": 16.666, "chart.zoom.shadow": !0, "chart.zoom.background": !0, "chart.zoom.action": "zoom", "chart.resizable": !1, "chart.resize.handle.adjust": [0, 0], "chart.resize.handle.background": null, "chart.adjustable": !1, "chart.ymax": null, "chart.ymin": 0, "chart.scale.decimals": null, "chart.scale.point": ".", "chart.scale.thousand": ",", "chart.variant": "stacked", "chart.exploded": 0, "chart.events.mousemove": null, "chart.events.click": null, "chart.animation.roundrobin.factor": 1, "chart.animation.roundrobin.radius": !0, "chart.animation.grow.multiplier": 1 }, r = RGraph.array_linearize(this.data), i = 0; i < r.length; ++i)this["$" + i] = {}; this.canvas.__rgraph_aa_translated__ || (this.context.translate(.5, .5), this.canvas.__rgraph_aa_translated__ = !0), RGraph.Register(this) }, RGraph.Rose.prototype.Set = function (n, t) { n.substr(0, 6) != "chart." && (n = "chart." + n), this.properties[n.toLowerCase()] = t }, RGraph.Rose.prototype.Get = function (n) { return n.substr(0, 6) != "chart." && (n = "chart." + n), this.properties[n.toLowerCase()] }, RGraph.Rose.prototype.Draw = function () { RGraph.FireCustomEvent(this, "onbeforedraw"), this.gutterLeft = this.Get("chart.gutter.left"), this.gutterRight = this.Get("chart.gutter.right"), this.gutterTop = this.Get("chart.gutter.top"), this.gutterBottom = this.Get("chart.gutter.bottom"), this.radius = Math.min(this.canvas.width - this.gutterLeft - this.gutterRight, this.canvas.height - this.gutterTop - this.gutterBottom) / 2, this.centerx = (this.canvas.width - this.gutterLeft - this.gutterRight) / 2 + this.gutterLeft, this.centery = (this.canvas.height - this.gutterTop - this.gutterBottom) / 2 + this.gutterTop, this.angles = [], this.total = 0, this.startRadians = 0, this.Get("chart.key") && this.Get("chart.key").length > 0 && this.Get("chart.key").length >= 3 && (this.centerx = this.centerx - this.Get("chart.gutter.right") + 5), typeof this.Get("chart.centerx") == "number" && (this.centerx = this.Get("chart.centerx")), typeof this.Get("chart.centery") == "number" && (this.centery = this.Get("chart.centery")), typeof this.Get("chart.radius") == "number" && (this.radius = this.Get("chart.radius")), this.colorsParsed || (this.parseColors(), this.colorsParsed = !0), this.DrawBackground(), this.DrawRose(), this.DrawLabels(), this.Get("chart.contextmenu") && RGraph.ShowContext(this), this.Get("chart.resizable") && RGraph.AllowResizing(this), this.Get("chart.adjustable") && RGraph.AllowAdjusting(this), RGraph.InstallEventListeners(this), RGraph.FireCustomEvent(this, "ondraw") }, RGraph.Rose.prototype.DrawBackground = function () { var t, n; if (this.context.lineWidth = 1, this.properties["chart.background.grid"]) { for (typeof this.properties["chart.background.grid.count"] == "number" && (this.properties["chart.background.grid.size"] = this.radius / this.properties["chart.background.grid.count"]), this.context.beginPath(), this.context.strokeStyle = this.properties["chart.background.grid.color"], n = this.properties["chart.background.grid.size"]; n <= this.radius; n += this.properties["chart.background.grid.size"])this.context.arc(this.centerx, this.centery, n, 0, TWOPI, !1); if (this.context.stroke(), this.context.beginPath(), typeof this.properties["chart.background.grid.spokes"] == "number") for (t = 360 / this.properties["chart.background.grid.spokes"], n = t; n <= 360; n += t)this.context.arc(this.centerx, this.centery, this.radius, n / (180 / PI) - HALFPI, (n + .0001) / (180 / PI) - HALFPI, 0), this.context.lineTo(this.centerx, this.centery); else for (n = 15; n <= 360; n += 15)this.context.arc(this.centerx, this.centery, this.radius, n / (180 / PI) - HALFPI, (n + .0001) / (180 / PI) - HALFPI, !1), this.context.lineTo(this.centerx, this.centery); this.context.stroke() } if (this.Get("chart.background.axes")) { for (this.context.beginPath(), this.context.strokeStyle = this.Get("chart.background.axes.color"), this.context.moveTo(this.centerx - this.radius, Math.round(this.centery)), this.context.lineTo(this.centerx + this.radius, Math.round(this.centery)), this.context.moveTo(Math.round(this.centerx - this.radius), this.centery - 5), this.context.lineTo(Math.round(this.centerx - this.radius), this.centery + 5), this.context.moveTo(Math.round(this.centerx + this.radius), this.centery - 5), this.context.lineTo(Math.round(this.centerx + this.radius), this.centery + 5), n = this.centerx - this.radius; n < this.centerx + this.radius; n += this.radius / 5)this.context.moveTo(Math.round(n), this.centery - 3), this.context.lineTo(Math.round(n), this.centery + 3.5); for (n = this.centery - this.radius; n < this.centery + this.radius; n += this.radius / 5)this.context.moveTo(this.centerx - 3, Math.round(n)), this.context.lineTo(this.centerx + 3, Math.round(n)); this.context.moveTo(Math.round(this.centerx), this.centery - this.radius), this.context.lineTo(Math.round(this.centerx), this.centery + this.radius), this.context.moveTo(this.centerx - 5, Math.round(this.centery - this.radius)), this.context.lineTo(this.centerx + 5, Math.round(this.centery - this.radius)), this.context.moveTo(this.centerx - 5, Math.round(this.centery + this.radius)), this.context.lineTo(this.centerx + 5, Math.round(this.centery + this.radius)), this.context.closePath(), this.context.stroke() } }, RGraph.Rose.prototype.DrawRose = function () { var p = 0, h = this.data, c = RGraph.degrees2Radians(this.Get("chart.margin")), v, s, w, b, n, o, f, a, y, e; if (this.Get("chart.ymax")) v = this.Get("chart.ymax"), s = this.Get("chart.ymin"), this.scale = [(v - s) * .2 + s, (v - s) * .4 + s, (v - s) * .6 + s, (v - s) * .8 + s, (v - s) * 1 + s], this.max = this.scale[4]; else { for (n = 0; n < h.length; ++n)p = typeof h[n] == "number" ? Math.max(p, h[n]) : typeof h[n] == "object" && this.Get("chart.variant") == "non-equi-angular" ? Math.max(p, h[n][0]) : Math.max(p, RGraph.array_sum(h[n])); this.scale = RGraph.getScale(p, this), this.max = this.scale[4] } if (this.sum = RGraph.array_sum(h), this.context.moveTo(this.centerx, this.centery), this.context.stroke(), this.Get("chart.colors.alpha") && (this.context.globalAlpha = this.Get("chart.colors.alpha")), typeof this.Get("chart.variant") == "string" && this.Get("chart.variant") == "non-equi-angular") { for (w = 0, n = 0; n < h.length; ++n)w += h[n][1]; for (n = 0; n < this.data.length; ++n) { o = this.data[n][1] / w * TWOPI, f = (this.data[n][0] - this.Get("chart.ymin")) / (this.max - this.Get("chart.ymin")) * this.radius, f = f * this.properties["chart.animation.grow.multiplier"], this.context.strokeStyle = this.Get("chart.strokestyle"), this.context.fillStyle = this.Get("chart.colors")[0], this.Get("chart.colors.sequential") && (this.context.fillStyle = this.Get("chart.colors")[n]), this.context.beginPath(); var i = this.startRadians * this.Get("chart.animation.roundrobin.factor") - HALFPI + c - o / 2, t = (this.startRadians + o) * this.Get("chart.animation.roundrobin.factor") - HALFPI - c - o / 2, l = this.getexploded(n, i, t, this.Get("chart.exploded")), r = l[0], u = l[1]; this.context.arc(this.centerx + r, this.centery + u, this.Get("chart.animation.roundrobin.radius") ? f * this.Get("chart.animation.roundrobin.factor") : f, i, t, 0), this.context.lineTo(this.centerx + r, this.centery + u), this.context.closePath(), this.context.stroke(), this.context.fill(), this.angles.push(gg = [i, t, 0, f, this.centerx + r, this.centery + u]), this.startRadians += o } } else for (b = 0, n = 0; n < this.data.length; ++n) { if (this.context.strokeStyle = this.Get("chart.strokestyle"), this.context.fillStyle = this.Get("chart.colors")[0], this.Get("chart.colors.sequential") && (this.context.fillStyle = this.Get("chart.colors")[n]), o = 1 / this.data.length * TWOPI, typeof this.data[n] == "number") { this.context.beginPath(), f = (this.data[n] - this.Get("chart.ymin")) / (this.max - this.Get("chart.ymin")) * this.radius, f = f * this.properties["chart.animation.grow.multiplier"]; var i = this.startRadians * this.Get("chart.animation.roundrobin.factor") - HALFPI + c - o / 2, t = this.startRadians * this.Get("chart.animation.roundrobin.factor") + o * this.Get("chart.animation.roundrobin.factor") - HALFPI - c - o / 2, l = this.getexploded(n, i, t, this.Get("chart.exploded")), r = l[0], u = l[1]; this.context.arc(this.centerx + r, this.centery + u, this.Get("chart.animation.roundrobin.radius") ? f * this.Get("chart.animation.roundrobin.factor") : f, i, t, 0), this.context.lineTo(this.centerx + r, this.centery + u), this.context.closePath(), this.context.stroke(), this.context.fill(), t == 0, this.angles.push([i, t, 0, f * this.Get("chart.animation.roundrobin.factor"), this.centerx + r, this.centery + u]) } else if (typeof this.data[n] == "object") for (c = this.Get("chart.margin") / (180 / PI), a = 0; a < this.data[n].length; ++a) { var i = this.startRadians * this.Get("chart.animation.roundrobin.factor") - HALFPI + c, t = this.startRadians * this.Get("chart.animation.roundrobin.factor") + o * this.Get("chart.animation.roundrobin.factor") - HALFPI - c, l = this.getexploded(n, i, t, this.Get("chart.exploded")), r = l[0], u = l[1]; this.context.fillStyle = this.Get("chart.colors")[a], this.Get("chart.colors.sequential") && (this.context.fillStyle = this.Get("chart.colors")[b++]), a == 0 ? (this.context.beginPath(), y = 0, e = (this.data[n][a] - this.Get("chart.ymin")) / (this.max - this.Get("chart.ymin")) * this.radius, e = e * this.properties["chart.animation.grow.multiplier"], this.context.arc(this.centerx + r, this.centery + u, this.Get("chart.animation.roundrobin.radius") ? e * this.Get("chart.animation.roundrobin.factor") : e, i, t, 0), this.context.lineTo(this.centerx + r, this.centery + u), this.context.closePath(), this.context.stroke(), this.context.fill(), this.angles.push([i, t, 0, e * this.Get("chart.animation.roundrobin.factor"), this.centerx + r, this.centery + u])) : (this.context.beginPath(), y = e, e = (this.data[n][a] - this.Get("chart.ymin")) / (this.max - this.Get("chart.ymin")) * this.radius + y, e = e * this.properties["chart.animation.grow.multiplier"], this.context.arc(this.centerx + r, this.centery + u, y * this.Get("chart.animation.roundrobin.factor"), i, t, 0), this.context.arc(this.centerx + r, this.centery + u, e * this.Get("chart.animation.roundrobin.factor"), t, i, !0), this.context.closePath(), this.context.stroke(), this.context.fill(), this.angles.push([i, t, y * this.Get("chart.animation.roundrobin.factor"), e * this.Get("chart.animation.roundrobin.factor"), this.centerx + r, this.centery + u])) } this.startRadians += o } this.Get("chart.colors.alpha") && (this.context.globalAlpha = 1), this.Get("chart.title") && RGraph.DrawTitle(this, this.Get("chart.title"), this.canvas.height / 2 - this.radius, this.centerx, this.Get("chart.title.size") ? this.Get("chart.title.size") : this.Get("chart.text.size") + 2) }, RGraph.Rose.prototype.DrawLabels = function () { var h, r; this.context.lineWidth = 1, h = this.Get("chart.key"), h && h.length && RGraph.DrawKey(this, h, this.Get("chart.colors")), this.context.fillStyle = this.properties["chart.text.color"], this.context.strokeStyle = "black"; var u = this.radius, t = this.Get("chart.text.font"), n = this.Get("chart.text.size"), i = this.context, s = this.Get("chart.labels.axes").toLowerCase(), o = this.Get("chart.scale.decimals"), f = this.Get("chart.units.pre"), e = this.Get("chart.units.post"); typeof this.Get("chart.labels") == "object" && this.Get("chart.labels") && this.DrawCircularLabels(i, this.Get("chart.labels"), t, n, u + 10), typeof this.properties["chart.text.size.scale"] == "number" && (n = this.properties["chart.text.size.scale"]), r = "rgba(255,255,255,0.8)", s.indexOf("n") > -1 && (RGraph.Text(i, t, n, this.centerx, this.centery - u * .2, RGraph.number_format(this, Number(this.scale[0]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery - u * .4, RGraph.number_format(this, Number(this.scale[1]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery - u * .6, RGraph.number_format(this, Number(this.scale[2]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery - u * .8, RGraph.number_format(this, Number(this.scale[3]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery - u, RGraph.number_format(this, Number(this.scale[4]).toFixed(o), f, e), "center", "center", !0, !1, r)), s.indexOf("s") > -1 && (RGraph.Text(i, t, n, this.centerx, this.centery + u * .2, RGraph.number_format(this, Number(this.scale[0]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery + u * .4, RGraph.number_format(this, Number(this.scale[1]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery + u * .6, RGraph.number_format(this, Number(this.scale[2]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery + u * .8, RGraph.number_format(this, Number(this.scale[3]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx, this.centery + u, RGraph.number_format(this, Number(this.scale[4]).toFixed(o), f, e), "center", "center", !0, !1, r)), s.indexOf("e") > -1 && (RGraph.Text(i, t, n, this.centerx + u * .2, this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx + u * .4, this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx + u * .6, this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx + u * .8, this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx + u, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(o), f, e), "center", "center", !0, !1, r)), s.indexOf("w") > -1 && (RGraph.Text(i, t, n, this.centerx - u * .2, this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx - u * .4, this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx - u * .6, this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx - u * .8, this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(o), f, e), "center", "center", !0, !1, r), RGraph.Text(i, t, n, this.centerx - u, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(o), f, e), "center", "center", !0, !1, r)), s.length > 0 && RGraph.Text(i, t, n, this.centerx, this.centery, typeof this.Get("chart.ymin") == "number" ? RGraph.number_format(this, Number(this.Get("chart.ymin")).toFixed(this.Get("chart.scale.decimals")), f, e) : "0", "center", "center", !0, !1, r) }, RGraph.Rose.prototype.DrawCircularLabels = function (n, t, i, r, u) { for (var s = this.Get("chart.variant"), c = this.Get("chart.labels.position"), u = u + 5 + this.Get("chart.labels.offset"), e, o, h, f = 0; f < this.angles.length; ++f)typeof s == "string" && s == "non-equi-angular" ? e = Number(this.angles[f][0]) + (this.angles[f][1] - this.angles[f][0]) / 2 : (e = TWOPI / t.length * (f + 1) - TWOPI / (t.length * 2), e = e - HALFPI + (this.Get("chart.labels.position") == "edge" ? TWOPI / t.length / 2 : 0)), o = this.centerx + Math.cos(e) * u, h = this.centery + Math.sin(e) * u, halign = o > this.centerx ? "left" : o == this.centerx ? "center" : "right", RGraph.Text(n, i, r, o, h, String(t[f]), "center", halign) }, RGraph.Rose.prototype.getShape = RGraph.Rose.prototype.getSegment = function (n) { var t, e; RGraph.FixEventObject(n); var a = this.canvas, c = this.context, i = this.angles; for (t = 0; t < i.length; ++t) { var o = i[t][0], s = i[t][1], h = i[t][2], l = i[t][3], u = i[t][4], f = i[t][5], r = RGraph.getMouseXY(n), v = r[0] - u, y = r[1] - f; if (this.context.beginPath(), this.context.arc(u, f, h ? h : .01, o, s, !1), this.context.arc(u, f, l, s, o, !0), this.context.closePath(), c.isPointInPath(r[0], r[1])) return i[t][6] = t, RGraph.parseTooltipText && (e = RGraph.parseTooltipText(this.Get("chart.tooltips"), i[t][6])), i[t].object = this, i[t].x = i[t][4], i[t].y = i[t][5], i[t]["angle.start"] = i[t][0], i[t]["angle.end"] = i[t][1], i[t]["radius.start"] = i[t][2], i[t]["radius.end"] = i[t][3], i[t].index = i[t][6], i[t].tooltip = e ? e : null, i[t] } return null }, RGraph.Rose.prototype.getexploded = function (n, t, i, r) { var u, f; return typeof r == "object" && typeof r[n] == "number" ? (u = Math.cos((i - t) / 2 + t) * r[n], f = Math.sin((i - t) / 2 + t) * r[n]) : typeof r == "number" ? (u = Math.cos((i - t) / 2 + t) * r, f = Math.sin((i - t) / 2 + t) * r) : (u = 0, f = 0), [u, f] }, RGraph.Rose.prototype.AllowTooltips = function () { RGraph.PreLoadTooltip / images(this), RGraph.InstallWindowMousedownTooltipListener(this), RGraph.InstallCanvasMousemoveTooltipListener(this), RGraph.InstallCanvasMouseupTooltipListener(this) }, RGraph.Rose.prototype.Highlight = function (n) { this.Get("chart.tooltips.highlight") && (this.context.beginPath(), this.context.strokeStyle = this.Get("chart.highlight.stroke"), this.context.fillStyle = this.Get("chart.highlight.fill"), this.context.arc(n.x, n.y, n["radius.end"], n["angle.start"], n["angle.end"], !1), n["radius.start"] > 0 ? this.context.arc(n.x, n.y, n["radius.start"], n["angle.end"], n["angle.start"], !0) : this.context.lineTo(n.x, n.y), this.context.closePath(), this.context.stroke(), this.context.fill()) }, RGraph.Rose.prototype.getObjectByXY = function (n) { var t = RGraph.getMouseXY(n), i = RGraph.getHypLength(this.centerx, this.centery, t[0], t[1]); if (t[0] > this.centerx - this.radius && t[0] < this.centerx + this.radius && t[1] > this.centery - this.radius && t[1] < this.centery + this.radius && i <= this.radius) return this }, RGraph.Rose.prototype.positionTooltip = function (n, t, i, r, u) { var c = n.angles[u][4], l = n.angles[u][5], v = n.angles[u][0], y = n.angles[u][1], e = (n.angles[u][3] - n.angles[u][2]) / 2 + n.angles[u][2], o = (y - v) / 2 + v, s = RGraph.getCanvasXY(n.canvas), p = n.Get("chart.gutter.left"), w = n.Get("chart.gutter.top"), h = r.offsetWidth, a = r.offsetHeight, f; r.style.overflow = "", f = new Image, f.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC", f.style.position = "absolute", f.id = "__rgraph_tooltip_pointer__", f.style.top = r.offsetHeight - 2 + "px", r.appendChild(f), s[0] + c + Math.cos(o) * e - h / 2 < 10 ? (r.style.left = s[0] + c + Math.cos(o) * e - h * .1 + "px", r.style.top = s[1] + l + Math.sin(o) * e - a - 5 + "px", f.style.left = h * .1 - 8.5 + "px") : s[0] + c + Math.cos(o) * e + h / 2 > document.body.offsetWidth - 10 ? (r.style.left = s[0] + c + Math.cos(o) * e - h * .9 + "px", r.style.top = s[1] + l + Math.sin(o) * e - a - 5 + "px", f.style.left = h * .9 - 8.5 + "px") : (r.style.left = s[0] + c + Math.cos(o) * e - h / 2 + "px", r.style.top = s[1] + l + Math.sin(o) * e - a - 5 + "px", f.style.left = h * .5 - 8.5 + "px") }, RGraph.Rose.prototype.getRadius = function (n) { if (n < 0 || n > this.max) return null; return n / this.max * this.radius }, RGraph.Rose.prototype.parseColors = function () { for (var n = 0; n < this.properties["chart.colors"].length; ++n)this.properties["chart.colors"][n] = this.parseSingleColorForGradient(this.properties["chart.colors"][n]); if (!RGraph.is_null(this.properties["chart.key.colors"])) for (n = 0; n < this.properties["chart.key.colors"].length; ++n)this.properties["chart.key.colors"][n] = this.parseSingleColorForGradient(this.properties["chart.key.colors"][n]); this.properties["chart.text.color"] = this.parseSingleColorForGradient(this.properties["chart.text.color"]), this.properties["chart.title.color"] = this.parseSingleColorForGradient(this.properties["chart.title.color"]), this.properties["chart.highlight.fill"] = this.parseSingleColorForGradient(this.properties["chart.highlight.fill"]), this.properties["chart.highlight.stroke"] = this.parseSingleColorForGradient(this.properties["chart.highlight.stroke"]) }, RGraph.Rose.prototype.parseSingleColorForGradient = function (n) { var e = this.canvas, u = this.context, t; if (!n || typeof n != "string") return n; if (n.match(/^gradient\((.*)\)$/i)) { var i = RegExp.$1.split(":"), r = u.createRadialGradient(this.centerx, this.centery, 0, this.centerx, this.centery, this.radius), f = 1 / (i.length - 1); for (r.addColorStop(0, RGraph.trim(i[0])), t = 1; t < i.length; ++t)r.addColorStop(t * f, RGraph.trim(i[t])) } return r ? r : n } +typeof RGraph=="undefined"&&(RGraph={}),RGraph.Rose=function(n,t){var r,i;for(this.id=n,this.canvas=document.getElementById(n),this.context=this.canvas.getContext("2d"),this.data=t,this.canvas.__object__=this,this.type="rose",this.isRGraph=!0,this.uid=RGraph.CreateUID(),this.canvas.uid=this.canvas.uid?this.canvas.uid:RGraph.CreateUID(),this.colorsParsed=!1,RGraph.OldBrowserCompat(this.context),this.centerx=0,this.centery=0,this.radius=0,this.max=0,this.angles=[],this.properties={"chart.background.axes":!0,"chart.background.axes.color":"black","chart.background.grid":!0,"chart.background.grid.color":"#ccc","chart.background.grid.size":null,"chart.background.grid.spokes":null,"chart.background.grid.count":5,"chart.centerx":null,"chart.centery":null,"chart.radius":null,"chart.colors":["rgba(255,0,0,0.5)","rgba(255,255,0,0.5)","rgba(0,255,255,0.5)","rgb(0,255,0)","gray","blue","rgb(255,128,255)","green","pink","gray","aqua"],"chart.colors.sequential":!1,"chart.colors.alpha":null,"chart.margin":0,"chart.strokestyle":"#aaa","chart.gutter.left":25,"chart.gutter.right":25,"chart.gutter.top":25,"chart.gutter.bottom":25,"chart.title":"","chart.title.background":null,"chart.title.hpos":null,"chart.title.vpos":null,"chart.title.bold":!0,"chart.title.font":null,"chart.title.x":null,"chart.title.y":null,"chart.title.halign":null,"chart.title.valign":null,"chart.labels":null,"chart.labels.position":"center","chart.labels.axes":"nsew","chart.labels.offset":0,"chart.text.color":"black","chart.text.font":"Arial","chart.text.size":10,"chart.key":null,"chart.key.background":"white","chart.key.position":"graph","chart.key.halign":"right","chart.key.shadow":!1,"chart.key.shadow.color":"#666","chart.key.shadow.blur":3,"chart.key.shadow.offsetx":2,"chart.key.shadow.offsety":2,"chart.key.position.gutter.boxed":!0,"chart.key.position.x":null,"chart.key.position.y":null,"chart.key.color.shape":"square","chart.key.rounded":!0,"chart.key.linewidth":1,"chart.key.colors":null,"chart.contextmenu":null,"chart.tooltips":null,"chart.tooltips.event":"onclick","chart.tooltips.effect":"fade","chart.tooltips.css.class":"RGraph_tooltip","chart.tooltips.highlight":!0,"chart.highlight.stroke":"rgba(0,0,0,0)","chart.highlight.fill":"rgba(255,255,255,0.7)","chart.annotatable":!1,"chart.annotate.color":"black","chart.zoom.factor":1.5,"chart.zoom.fade.in":!0,"chart.zoom.fade.out":!0,"chart.zoom.hdir":"right","chart.zoom.vdir":"down","chart.zoom.frames":25,"chart.zoom.delay":16.666,"chart.zoom.shadow":!0,"chart.zoom.background":!0,"chart.zoom.action":"zoom","chart.resizable":!1,"chart.resize.handle.adjust":[0,0],"chart.resize.handle.background":null,"chart.adjustable":!1,"chart.ymax":null,"chart.ymin":0,"chart.scale.decimals":null,"chart.scale.point":".","chart.scale.thousand":",","chart.variant":"stacked","chart.exploded":0,"chart.events.mousemove":null,"chart.events.click":null,"chart.animation.roundrobin.factor":1,"chart.animation.roundrobin.radius":!0,"chart.animation.grow.multiplier":1},r=RGraph.array_linearize(this.data),i=0;i0&&this.Get("chart.key").length>=3&&(this.centerx=this.centerx-this.Get("chart.gutter.right")+5),typeof this.Get("chart.centerx")=="number"&&(this.centerx=this.Get("chart.centerx")),typeof this.Get("chart.centery")=="number"&&(this.centery=this.Get("chart.centery")),typeof this.Get("chart.radius")=="number"&&(this.radius=this.Get("chart.radius")),this.colorsParsed||(this.parseColors(),this.colorsParsed=!0),this.DrawBackground(),this.DrawRose(),this.DrawLabels(),this.Get("chart.contextmenu")&&RGraph.ShowContext(this),this.Get("chart.resizable")&&RGraph.AllowResizing(this),this.Get("chart.adjustable")&&RGraph.AllowAdjusting(this),RGraph.InstallEventListeners(this),RGraph.FireCustomEvent(this,"ondraw")},RGraph.Rose.prototype.DrawBackground=function(){var t,n;if(this.context.lineWidth=1,this.properties["chart.background.grid"]){for(typeof this.properties["chart.background.grid.count"]=="number"&&(this.properties["chart.background.grid.size"]=this.radius/this.properties["chart.background.grid.count"]),this.context.beginPath(),this.context.strokeStyle=this.properties["chart.background.grid.color"],n=this.properties["chart.background.grid.size"];n<=this.radius;n+=this.properties["chart.background.grid.size"])this.context.arc(this.centerx,this.centery,n,0,TWOPI,!1);if(this.context.stroke(),this.context.beginPath(),typeof this.properties["chart.background.grid.spokes"]=="number")for(t=360/this.properties["chart.background.grid.spokes"],n=t;n<=360;n+=t)this.context.arc(this.centerx,this.centery,this.radius,n/(180/PI)-HALFPI,(n+.0001)/(180/PI)-HALFPI,0),this.context.lineTo(this.centerx,this.centery);else for(n=15;n<=360;n+=15)this.context.arc(this.centerx,this.centery,this.radius,n/(180/PI)-HALFPI,(n+.0001)/(180/PI)-HALFPI,!1),this.context.lineTo(this.centerx,this.centery);this.context.stroke()}if(this.Get("chart.background.axes")){for(this.context.beginPath(),this.context.strokeStyle=this.Get("chart.background.axes.color"),this.context.moveTo(this.centerx-this.radius,Math.round(this.centery)),this.context.lineTo(this.centerx+this.radius,Math.round(this.centery)),this.context.moveTo(Math.round(this.centerx-this.radius),this.centery-5),this.context.lineTo(Math.round(this.centerx-this.radius),this.centery+5),this.context.moveTo(Math.round(this.centerx+this.radius),this.centery-5),this.context.lineTo(Math.round(this.centerx+this.radius),this.centery+5),n=this.centerx-this.radius;n-1&&(RGraph.Text(i,t,n,this.centerx,this.centery-u*.2,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u*.4,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u*.6,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u*.8,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.indexOf("s")>-1&&(RGraph.Text(i,t,n,this.centerx,this.centery+u*.2,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u*.4,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u*.6,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u*.8,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.indexOf("e")>-1&&(RGraph.Text(i,t,n,this.centerx+u*.2,this.centery,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u*.4,this.centery,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u*.6,this.centery,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u*.8,this.centery,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u,this.centery,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.indexOf("w")>-1&&(RGraph.Text(i,t,n,this.centerx-u*.2,this.centery,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u*.4,this.centery,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u*.6,this.centery,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u*.8,this.centery,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u,this.centery,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.length>0&&RGraph.Text(i,t,n,this.centerx,this.centery,typeof this.Get("chart.ymin")=="number"?RGraph.number_format(this,Number(this.Get("chart.ymin")).toFixed(this.Get("chart.scale.decimals")),f,e):"0","center","center",!0,!1,r)},RGraph.Rose.prototype.DrawCircularLabels=function(n,t,i,r,u){for(var s=this.Get("chart.variant"),c=this.Get("chart.labels.position"),u=u+5+this.Get("chart.labels.offset"),e,o,h,f=0;fthis.centerx?"left":o==this.centerx?"center":"right",RGraph.Text(n,i,r,o,h,String(t[f]),"center",halign)},RGraph.Rose.prototype.getShape=RGraph.Rose.prototype.getSegment=function(n){var t,e;RGraph.FixEventObject(n);var a=this.canvas,c=this.context,i=this.angles;for(t=0;t0?this.context.arc(n.x,n.y,n["radius.start"],n["angle.end"],n["angle.start"],!0):this.context.lineTo(n.x,n.y),this.context.closePath(),this.context.stroke(),this.context.fill())},RGraph.Rose.prototype.getObjectByXY=function(n){var t=RGraph.getMouseXY(n),i=RGraph.getHypLength(this.centerx,this.centery,t[0],t[1]);if(t[0]>this.centerx-this.radius&&t[0]this.centery-this.radius&&t[1]document.body.offsetWidth-10?(r.style.left=s[0]+c+Math.cos(o)*e-h*.9+"px",r.style.top=s[1]+l+Math.sin(o)*e-a-5+"px",f.style.left=h*.9-8.5+"px"):(r.style.left=s[0]+c+Math.cos(o)*e-h/2+"px",r.style.top=s[1]+l+Math.sin(o)*e-a-5+"px",f.style.left=h*.5-8.5+"px")},RGraph.Rose.prototype.getRadius=function(n){if(n<0||n>this.max)return null;return n/this.max*this.radius},RGraph.Rose.prototype.parseColors=function(){for(var n=0;n&pageUpdate=its-me - digitalFont: false, // Font control for the gauges & timer - digitalForecast: false, // Font control for the status display, set this to false for languages that use accented characters in the forecasts - showPopupData: true, // Pop-up data displayed - showPopupGraphs: false, // If pop-up data is displayed, show the graphs? - mobileShowGraphs: false, // If false, on a mobile/narrow display, always disable the graphs - showWindVariation: true, // Show variation in wind direction over the last 10 minutes on the direction gauge - showWindMetar: false, // Show the METAR substring for wind speed/direction over the last 10 minutes on the direction gauge popup - showIndoorTempHum: true, // Show the indoor temperature/humidity options - showCloudGauge: true, // Display the Cloud Base gauge - showUvGauge: true, // Display the UV Index gauge - showSolarGauge: true, // Display the Solar gauge - showSunshineLed: true, // Show 'sun shining now' LED on solar gauge - showRoseGauge: true, // Show the optional Wind Rose gauge - showRoseGaugeOdo: true, // Show the optional Wind Rose gauge wind run Odometer - showRoseOnDirGauge: true, // Show the rose data as sectors on the direction gauge - showGaugeShadow: true, // Show a drop shadow outside the gauges - roundCloudbaseVal: true, // Round the value shown on the cloud base gauge to make it easier to read - // The realtime files should be absolute paths, "/xxx.txt" refers to the public root of your web server + scriptVer : '2.7.7', + weatherProgram : 0, // Set 0=Cumulus, 1=Weather Display, 2=VWS, 3=WeatherCat, 4=Meteobridge, 5=WView, 6=WeeWX, 7=WLCOM + 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. + realtimeInterval : 15, // *** Download data interval, set to your realtime data update interval in seconds + longPoll : false, // if enabled, use long polling and PHP generated data !!only enable if you understand how this is implemented!! + gaugeMobileScaling : 0.85, // scaling factor to apply when displaying the gauges mobile devices, set to 1 to disable (default 0.85) + graphUpdateTime : 15, // period of pop-up data graph refresh, in minutes (default 15) + stationTimeout : 3, // period of no data change before we declare the station off-line, 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 time-out, do not set to blank even if you do not use a password - http://&pageUpdate=its-me + digitalFont : false, // Font control for the gauges & timer + digitalForecast : false, // Font control for the status display, set this to false for languages that use accented characters in the forecasts + showPopupData : true, // Pop-up data displayed + showPopupGraphs : false, // If pop-up data is displayed, show the graphs? + mobileShowGraphs : false, // If false, on a mobile/narrow display, always disable the graphs + showWindVariation : true, // Show variation in wind direction over the last 10 minutes on the direction gauge + showWindMetar : false, // Show the METAR substring for wind speed/direction over the last 10 minutes on the direction gauge popup + showIndoorTempHum : true, // Show the indoor temperature/humidity options + showCloudGauge : true, // Display the Cloud Base gauge + showUvGauge : true, // Display the UV Index gauge + showSolarGauge : true, // Display the Solar gauge + showSunshineLed : true, // Show 'sun shining now' LED on solar gauge + showRoseGauge : true, // Show the optional Wind Rose gauge + showRoseGaugeOdo : true, // Show the optional Wind Rose gauge wind run Odometer + showRoseOnDirGauge : true, // Show the rose data as sectors on the direction gauge + showGaugeShadow : true, // Show a drop shadow outside the gauges + roundCloudbaseVal : true, // Round the value shown on the cloud base gauge to make it easier to read + // The realtime files should be absolute paths, "/xxx.txt" refers to the public root of your web server realTimeUrlLongPoll: 'realtimegauges-longpoll.php', // *** ALL Users: If using long polling, change to your location of the PHP long poll realtime file *** - // *** the supplied file is for Cumulus only - realTimeUrlCumulus: 'realtimegauges.txt', // *** Cumulus Users: Change to your location of the realtime file *** - realTimeUrlWD: 'customclientraw.txt', // *** WD Users: Change to your location of the ccr file *** - realTimeUrlVWS: 'steelseriesVWSjson.php', // *** VWS Users: Change to your location of the JSON script generator *** - realTimeUrlWC: 'realtimegaugesWC.txt', // *** WeatherCat Users: Change to your location of the JSON script generator *** - realTimeUrlMB: 'MBrealtimegauges.txt', // *** Meteobridge Users: Change to the location of the JSON file - realTimeUrlWView: 'customclientraw.txt', // *** WView Users: Change to your location of the customclientraw.txt file *** - realTimeUrlWeewx: 'gauge-data.txt', // *** WeeWX Users: Change to your location of the gauge data file *** - realTimeUrlWLCOM: 'WLrealtimegauges.php', // *** WLCOM Users: change to location of WLCOMtags.php file *** - useCookies: true, // Persistently store user preferences in a cookie? - tip/ images : [], - dashboardMode: false, // Used by Cumulus MX dashboard - SET TO FALSE OTHERWISE - dewDisplayType: 'dew' // Initial 'scale' to display on the 'dew point' gauge. - // 'dew' - Dewpoint - // 'app' - Apparent temperature - // 'wnd' - Wind Chill - // 'feel' - Feels Like - // 'hea' - Heat Index - // 'hum' - Humidex -}, + // *** the supplied file is for Cumulus only + realTimeUrlCumulus : 'realtimegauges.txt', // *** Cumulus Users: Change to your location of the realtime file *** + realTimeUrlWD : 'customclientraw.txt', // *** WD Users: Change to your location of the ccr file *** + realTimeUrlVWS : 'steelseriesVWSjson.php', // *** VWS Users: Change to your location of the JSON script generator *** + realTimeUrlWC : 'realtimegaugesWC.txt', // *** WeatherCat Users: Change to your location of the JSON script generator *** + realTimeUrlMB : 'MBrealtimegauges.txt', // *** Meteobridge Users: Change to the location of the JSON file + realTimeUrlWView : 'customclientraw.txt', // *** WView Users: Change to your location of the customclientraw.txt file *** + realTimeUrlWeewx : 'gauge-data.txt', // *** WeeWX Users: Change to your location of the gauge data file *** + realTimeUrlWLCOM : 'WLrealtimegauges.php', // *** WLCOM Users: change to location of WLCOMtags.php file *** + useCookies : true, // Persistently store user preferences in a cookie? + tipImages : [], + dashboardMode : false, // Used by Cumulus MX dashboard - SET TO FALSE OTHERWISE + dewDisplayType : 'dew' // Initial 'scale' to display on the 'dew point' gauge. + // 'dew' - Dewpoint + // 'app' - Apparent temperature + // 'wnd' - Wind Chill + // 'feel' - Feels Like + // 'hea' - Heat Index + // 'hum' - Humidex + }, - // Gauge global look'n'feel settings - gaugeGlobals = { - minMaxArea: 'rgba(212,132,134,0.3)', // area sector for today's max/min. (red, green, blue, transparency) - windAvgArea: 'rgba(132,212,134,0.3)', - windVariationSector: 'rgba(120,200,120,0.7)', // only used when rose data is shown on direction gauge - frameDesign: steelseries.FrameDesign.TILTED_GRAY, - background: steelseries.BackgroundColor.BEIGE, - foreground: steelseries.ForegroundType.TYPE1, - pointer: steelseries.PointerType.TYPE8, - pointerColour: steelseries.ColorDef.RED, - dirAvgPointer: steelseries.PointerType.TYPE8, - dirAvgPointerColour: steelseries.ColorDef.BLUE, - 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, - // sunshine threshold values - sunshineThreshold: 50, // the value in W/m² above which we can consider the Sun to be shining, *if* the current value exceeds... - sunshineThresholdPct: 75, // the percentage of theoretical solar irradiance above which we consider the Sun to be shining - // 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, - rainScaleDefMaxmm: 10, - rainScaleDefMaxIn: 0.5, - rainRateScaleDefMaxmm: 10, - rainRateScaleDefMaxIn: 0.5, - uvScaleDefMax: 10, // Northern Europe may be lower - max. value recorded in the UK is 8, so use a scale of 10 for UK - solarGaugeScaleMax: 1000, // Max value to be shown on the solar gauge - theoretical max without atmosphere ~ 1374 W/m² - // - but Davis stations can read up to 1800, use 1000 for Northern Europe? - cloudScaleDefMaxft: 3000, - cloudScaleDefMaxm: 1000, - shadowColour: 'rgba(0,0,0,0.3)' // Colour to use for gauge shadows - default 30% transparent black - }, + // Gauge global look'n'feel settings + gaugeGlobals = { + minMaxArea : 'rgba(212,132,134,0.3)', // area sector for today's max/min. (red, green, blue, transparency) + windAvgArea : 'rgba(132,212,134,0.3)', + windVariationSector : 'rgba(120,200,120,0.7)', // only used when rose data is shown on direction gauge + frameDesign : steelseries.FrameDesign.TILTED_GRAY, + background : steelseries.BackgroundColor.BEIGE, + foreground : steelseries.ForegroundType.TYPE1, + pointer : steelseries.PointerType.TYPE8, + pointerColour : steelseries.ColorDef.RED, + dirAvgPointer : steelseries.PointerType.TYPE8, + dirAvgPointerColour : steelseries.ColorDef.BLUE, + 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, + // sunshine threshold values + sunshineThreshold : 50, // the value in W/m² above which we can consider the Sun to be shining, *if* the current value exceeds... + sunshineThresholdPct : 75, // the percentage of theoretical solar irradiance above which we consider the Sun to be shining + // 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, + rainScaleDefMaxmm : 10, + rainScaleDefMaxIn : 0.5, + rainRateScaleDefMaxmm : 10, + rainRateScaleDefMaxIn : 0.5, + uvScaleDefMax : 10, // Northern Europe may be lower - max. value recorded in the UK is 8, so use a scale of 10 for UK + solarGaugeScaleMax : 1000, // Max value to be shown on the solar gauge - theoretical max without atmosphere ~ 1374 W/m² + // - but Davis stations can read up to 1800, use 1000 for Northern Europe? + cloudScaleDefMaxft : 3000, + cloudScaleDefMaxm : 1000, + shadowColour : 'rgba(0,0,0,0.3)' // Colour to use for gauge shadows - default 30% transparent black + }, - commonParams = { - // Common parameters for all the SteelSeries gauges - fullScaleDeflectionTime: 4, // Bigger numbers (seconds) slow the gauge pointer movements more - gaugeType: gaugeGlobals.gaugeType, - minValue: 0, - niceScale: true, - ledVisible: false, - frameDesign: gaugeGlobals.frameDesign, - backgroundColor: gaugeGlobals.background, - foregroundType: gaugeGlobals.foreground, - pointerType: gaugeGlobals.pointer, - pointerColor: gaugeGlobals.pointerColour, - knobType: gaugeGlobals.knob, - knobStyle: gaugeGlobals.knobStyle, - lcdColor: gaugeGlobals.lcdColour, - lcdDecimals: 1, - digitalFont: config.digitalFont, - tickLabelOrientation: gaugeGlobals.tickLabelOrientation, - labelNumberFormat: gaugeGlobals.labelFormat - }, - firstRun = true, // Used to set-up units & scales etc - userUnitsSet = false, // Tracks if the display units have been set by a user preference - data = {}, // Stores all the values from realtime.txt - tickTockInterval, // The 1s clock interval timer + commonParams = { + // Common parameters for all the SteelSeries gauges + fullScaleDeflectionTime: 4, // Bigger numbers (seconds) slow the gauge pointer movements more + gaugeType : gaugeGlobals.gaugeType, + minValue : 0, + niceScale : true, + ledVisible : false, + frameDesign : gaugeGlobals.frameDesign, + backgroundColor : gaugeGlobals.background, + foregroundType : gaugeGlobals.foreground, + pointerType : gaugeGlobals.pointer, + pointerColor : gaugeGlobals.pointerColour, + knobType : gaugeGlobals.knob, + knobStyle : gaugeGlobals.knobStyle, + lcdColor : gaugeGlobals.lcdColour, + lcdDecimals : 1, + digitalFont : config.digitalFont, + tickLabelOrientation : gaugeGlobals.tickLabelOrientation, + labelNumberFormat : gaugeGlobals.labelFormat + }, + firstRun = true, // Used to set-up units & scales etc + userUnitsSet = false, // Tracks if the display units have been set by a user preference + data = {}, // Stores all the values from realtime.txt + tickTockInterval, // The 1s clock interval timer - // ajaxDelay, used by long polling, the delay between getting a response and queueing the next request, as the default PHP - // script runtime timout is 30 seconds, we do not want the PHP task to run for more than 20 seconds. So queue the next - // request half of the realtime interval, or 20 seconds before it is due, which ever is the larger. - ajaxDelay = config.longPoll ? Math.max(config.realtimeInterval - 20, 0) : config.realtimeInterval, - downloadTimer, // Stores a reference to the ajax download setTimout() timer - timestamp = 0, // the timestamp of last data update on the server. - jqXHR = null, // handle to the jQuery web request - displayUnits = null, // Stores the display units cookie settings - sampleDate, - realtimeVer, // minimum version of the realtime JSON file required - programLink = [ - 'Cumulus', - 'Weather Display', - 'Virtual Weather Station', - 'WeatherCat', - 'Meteobridge', - 'Wview', - 'weewx', - 'Weatherlink.com' - ], + // ajaxDelay, used by long polling, the delay between getting a response and queueing the next request, as the default PHP + // script runtime timout is 30 seconds, we do not want the PHP task to run for more than 20 seconds. So queue the next + // request half of the realtime interval, or 20 seconds before it is due, which ever is the larger. + ajaxDelay = config.longPoll ? Math.max(config.realtimeInterval - 20, 0) : config.realtimeInterval, + downloadTimer, // Stores a reference to the ajax download setTimout() timer + timestamp = 0, // the timestamp of last data update on the server. + jqXHR = null, // handle to the jQuery web request + displayUnits = null, // Stores the display units cookie settings + sampleDate, + realtimeVer, // minimum version of the realtime JSON file required + programLink = [ + 'Cumulus', + 'Weather Display', + 'Virtual Weather Station', + 'WeatherCat', + 'Meteobridge', + 'Wview', + 'weewx', + 'Weatherlink.com' + ], - ledIndicator, statusScroller, statusTimer, + ledIndicator, statusScroller, statusTimer, - gaugeTemp, gaugeDew, gaugeRain, gaugeRRate, - gaugeHum, gaugeBaro, gaugeWind, gaugeDir, - gaugeUV, gaugeSolar, gaugeCloud, gaugeRose, + gaugeTemp, gaugeDew, gaugeRain, gaugeRRate, + gaugeHum, gaugeBaro, gaugeWind, gaugeDir, + gaugeUV, gaugeSolar, gaugeCloud, gaugeRose, - /* _imgBackground, // Uncomment if using a background image on the gauges */ + /* _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 ;-) - // ================================================================================================================== + // ================================================================================================================== + // 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 deferred until - // the Ajax data is available as a 'speed up'. - // - init = function (dashboard) { - // Cumulus, Weather Display, VWS, WeatherCat? - switch (config.weatherProgram) { + // + // 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 deferred until + // the Ajax data is available as a 'speed up'. + // + init = function (dashboard) { + // Cumulus, Weather Display, VWS, WeatherCat? + switch (config.weatherProgram) { case 0: // Cumulus realtimeVer = 12; // minimum version of the realtime JSON file required config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlCumulus; - // the trend /images to be used for the pop-up data, used in conjunction with config.imgPathURL + // the trend images to be used for the pop-up data, used in conjunction 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 you specify one image in a sub-array, then you MUST provide images for all the other sub-elements config.tipImgs = [ // config.tipImgs for Cumulus users using the 'default' weather site ['temp.png', 'intemp.png'], // Temperature: outdoor, indoor // Temperature: dewpoint, apparent, windChill, heatIndex, humidex @@ -253,9 +253,8 @@ gauges = (function () { ]; // WD useer generally use wxgraphs - tweak the CSS to accomadate the different aspect ratio $('.tipimg').css({ - width: '360px', - height: '260px' - }); + width : '360px', + height: '260px'}); break; case 2: // WVS @@ -303,10 +302,10 @@ gauges = (function () { // Meteobridge realtimeVer = 10; // minimum version of the realtime JSON file required config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlMB; - config.showPopupGraphs = false; // config.tipImgs - no Meteobridge /images available + config.showPopupGraphs = false; // config.tipImgs - no Meteobridge images available config.showRoseGauge = false; // no windrose data from MB config.showCloudGauge = false; - config.tipImgs = null; // config.tipImgs - no Meteobridge /images available + config.tipImgs = null; // config.tipImgs - no Meteobridge images available config.showWindVariation = false; // no wind variation data from MB break; case 5: @@ -359,10 +358,10 @@ gauges = (function () { // WLCOM realtimeVer = 10; // minimum version of the realtime JSON file required config.realTimeURL = config.realTimeUrlWLCOM; - config.showPopupGraphs = false; // config.tipImgs - no WL /images available + config.showPopupGraphs = false; // config.tipImgs - no WL images available config.showRoseGauge = false; // no windrose data from WL config.showCloudGauge = false; - config.tipImgs = null; // config.tipImgs - no WL /images available + config.tipImgs = null; // config.tipImgs - no WL images available config.showWindVariation = false; // no wind variation data from WL break; default: @@ -371,594 +370,594 @@ gauges = (function () { config.realtimeURL = null; config.showPopupGraphs = false; config.tipImgs = null; // config.tipImgs - unknown - } - - // Are we running on a phone device (or really low res screen)? - if ($(window).width() < 480) { - // Change the gauge scaling - config.gaugeScaling = config.gaugeMobileScaling; - // Switch off graphs? - config.showPopupGraphs = config.mobileShowGraphs; - } else { - config.gaugeScaling = 1; - } - - // Logo /images are used to 'personalise' the gauge backgrounds - // To add a logo to a gauge, add the parameter: - // params.customLayer = _imgBackground; - // 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 - - // Get the display units the user last used when they visited before - if present - displayUnits = getCookie('units'); - // Set 'units' radio buttons to match preferred 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); - // cloud base - setRadioCheck('rad_unitsCloud', displayUnits.cloud); - data.cloudunit = displayUnits.cloud; - } else { - // Set the defaults to metric ) - // 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 cookie - displayUnits = { - temp: 'C', - rain: 'mm', - press: 'hPa', - wind: 'km/h', - windrun: 'km', - cloud: 'm' - }; - - data.tempunit = '°C'; - data.rainunit = 'mm'; - data.pressunit = 'hPa'; - data.windunit = 'km/h'; - data.cloudunit = 'm'; - } - - // enable popup data - if (config.showPopupData) { - 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 : ''); - ddimgtooltip.tiparray[11][0] = (config.tipImgs[11] === null ? null : ''); - } - - // draw the status gadgets first, they will display any errors in the initial set-up - ledIndicator = singleLed.getInstance(); - statusScroller = singleStatus.getInstance(); - statusTimer = singleTimer.getInstance(); - - gaugeTemp = singleTemp.getInstance(); - // Export gaugeTemp.update() so it can be called from the HTML code - if (gaugeTemp) { gauges.doTemp = gaugeTemp.update; } - - gaugeDew = singleDew.getInstance(); - // Export gaugeDew.update() so it can be called from the HTML code - if (gaugeDew) { gauges.doDew = gaugeDew.update; } - - gaugeHum = singleHum.getInstance(); - // Export gaugeHum.update() so it can be called from the HTML code - if (gaugeHum) { gauges.doHum = gaugeHum.update; } - - gaugeBaro = singleBaro.getInstance(); - - gaugeWind = singleWind.getInstance(); - gaugeDir = singleDir.getInstance(); - - gaugeRain = singleRain.getInstance(); - gaugeRRate = singleRRate.getInstance(); - - // remove the UV gauge? - if (!config.showUvGauge) { - $('#canvas_uv').parent().remove(); - } else { - gaugeUV = singleUV.getInstance(); - } - - // remove the Solar gauge? - if (!config.showSolarGauge) { - $('#canvas_solar').parent().remove(); - } else { - gaugeSolar = singleSolar.getInstance(); - } - - // remove the Wind Rose? - if (!config.showRoseGauge) { - $('#canvas_rose').parent().remove(); - } else { - gaugeRose = singleRose.getInstance(); - } - - // remove the cloud base gauge? - if (!config.showCloudGauge) { - $('#canvas_cloud').parent().remove(); - // and remove cloudbase unit selection options - $('#cloud').parent().remove(); - } else { - gaugeCloud = singleCloudBase.getInstance(); - } - - // Set the language - changeLang(strings, false); - - if (!dashboard) { - // Go do get the data! - getRealtime(); - - // start a timer to update the status time - tickTockInterval = setInterval( - function () { - $.publish('gauges.clockTick', null); - }, - 1000); - - // start a timer to stop the page updates after the timeout period - if (config.pageUpdateLimit > 0 && getUrlParam('pageUpdate') !== config.pageUpdatePswd) { - setTimeout(pageTimeout, config.pageUpdateLimit * 60 * 1000); - } - } - }, - - // - // singleXXXX functions define a singleton for each of the gauges - // - - // - // Singleton for the LED Indicator - // - singleLed = (function () { - var instance; // Stores a reference to the Singleton - var led; // Stores a reference to the SS LED - - function init() { - // create led indicator - if ($('#canvas_led').length) { - led = new steelseries.Led( - 'canvas_led', { - ledColor: steelseries.LedColor.GREEN_LED, - size: $('#canvas_led').width() - }); - - setTitle(strings.led_title); } - function setTitle(newTitle) { - $('#canvas_led').attr('title', newTitle); - } - - function setLedColor(newColour) { - if (led) { - led.setLedColor(newColour); - } - } - - function setLedOnOff(onState) { - if (led) { - led.setLedOnOff(onState); - } - } - - function blink(blinkState) { - if (led) { - led.blink(blinkState); - } - } - - return { - setTitle: setTitle, - setLedColor: setLedColor, - setLedOnOff: setLedOnOff, - blink: blink - }; - } - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), - - // - // Singleton for the Status Scroller - // - singleStatus = (function () { - var instance; // Stores a reference to the Singleton - var scroller; // Stores a reference to the SS scrolling display - - function init() { - // create forecast display - if ($('#canvas_status').length) { - scroller = new steelseries.DisplaySingle( - 'canvas_status', { - width: $('#canvas_status').width(), - height: $('#canvas_status').height(), - lcdColor: gaugeGlobals.lcdColour, - unitStringVisible: false, - value: strings.statusStr, - digitalFont: config.digitalForecast, - valuesNumeric: false, - autoScroll: true, - alwaysScroll: false - }); - } - - function setValue(newTxt) { - if (scroller) { - scroller.setValue(newTxt); - } - } - - return { setText: setValue }; - } - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), - - // - // Singleton for the Status Timer - // - singleTimer = (function () { - var instance, // Stores a reference to the Singleton - lcd, // Stores a reference to the SS LED - count = 1; - - function init() { - function tick() { - if (lcd) { - lcd.setValue(count); - count += config.longPoll ? 1 : -1; - } - } - - function reset(val) { - count = val; - } - - function setValue(newVal) { - if (lcd) { - lcd.setValue(newVal); - } - } - - // create timer display - if ($('#canvas_timer').length) { - lcd = new steelseries.DisplaySingle( - 'canvas_timer', { - width: $('#canvas_timer').width(), - height: $('#canvas_timer').height(), - lcdColor: gaugeGlobals.lcdColour, - lcdDecimals: 0, - unitString: strings.timer, - unitStringVisible: true, - digitalFont: config.digitalFont, - value: count - }); - // subscribe to data updates - $.subscribe('gauges.clockTick', tick); - } - - return { - reset: reset, - setValue: setValue - }; - } - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), - - // - // Singleton for the Temperature Gauge - // - singleTemp = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters - - function init() { - var params = $.extend(true, {}, commonParams); - - // define temperature gauge start values - cache.sections = createTempSections(true); - cache.areas = []; - cache.minValue = gaugeGlobals.tempScaleDefMinC; - cache.maxValue = gaugeGlobals.tempScaleDefMaxC; - cache.title = strings.temp_title_out; - cache.value = gaugeGlobals.tempScaleDefMinC + 0.0001; - cache.maxMinVisible = false; - cache.selected = 'out'; - - // create temperature radial gauge - if ($('#canvas_temp').length) { - params.size = Math.ceil($('#canvas_temp').width() * config.gaugeScaling); - params.section = cache.sections; - params.area = cache.areas; - params.minValue = cache.minValue; - params.maxValue = cache.maxValue; - params.thresholdVisible = false; - params.minMeasuredValueVisible = cache.maxMinVisible; - params.maxMeasuredValueVisible = cache.maxMinVisible; - params.titleString = cache.title; - params.unitString = data.tempunit; - params.trendVisible = gaugeGlobals.tempTrendVisible; - // params.customLayer = _imgBackground; // uncomment to add a background image - See Logo /images above - - ssGauge = new steelseries.Radial('canvas_temp', params); - ssGauge.setValue(cache.value); - - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_temp').css({ width: params.size + 'px', height: params.size + 'px' }); - } - - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_temp').css(gaugeShadow(params.size)); - } - - // 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(); - } - - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); + // Are we running on a phone device (or really low res screen)? + if ($(window).width() < 480) { + // Change the gauge scaling + config.gaugeScaling = config.gaugeMobileScaling; + // Switch off graphs? + config.showPopupGraphs = config.mobileShowGraphs; } else { - // cannot draw gauge, return null - return null; + config.gaugeScaling = 1; } - function update() { - var sel = cache.selected; + // Logo images are used to 'personalise' the gauge backgrounds + // To add a logo to a gauge, add the parameter: + // params.customLayer = _imgBackground; + // 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 - // Argument length === 1 when called from radio input - // Argument length === 2 when called from event handler - if (arguments.length === 1) { - sel = arguments[0].value; + // Get the display units the user last used when they visited before - if present + displayUnits = getCookie('units'); + // Set 'units' radio buttons to match preferred 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); + // cloud base + setRadioCheck('rad_unitsCloud', displayUnits.cloud); + data.cloudunit = displayUnits.cloud; + } else { + // Set the defaults to metric ) + // 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 cookie + displayUnits = { + temp : 'C', + rain : 'mm', + press : 'hPa', + wind : 'km/h', + windrun: 'km', + cloud : 'm' + }; + + data.tempunit = '°C'; + data.rainunit = 'mm'; + data.pressunit = 'hPa'; + data.windunit = 'km/h'; + data.cloudunit = 'm'; + } + + // enable popup data + if (config.showPopupData) { + 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 : ''); + ddimgtooltip.tiparray[11][0] = (config.tipImgs[11] === null ? null : ''); + } + + // draw the status gadgets first, they will display any errors in the initial set-up + ledIndicator = singleLed.getInstance(); + statusScroller = singleStatus.getInstance(); + statusTimer = singleTimer.getInstance(); + + gaugeTemp = singleTemp.getInstance(); + // Export gaugeTemp.update() so it can be called from the HTML code + if (gaugeTemp) {gauges.doTemp = gaugeTemp.update;} + + gaugeDew = singleDew.getInstance(); + // Export gaugeDew.update() so it can be called from the HTML code + if (gaugeDew) {gauges.doDew = gaugeDew.update;} + + gaugeHum = singleHum.getInstance(); + // Export gaugeHum.update() so it can be called from the HTML code + if (gaugeHum) {gauges.doHum = gaugeHum.update;} + + gaugeBaro = singleBaro.getInstance(); + + gaugeWind = singleWind.getInstance(); + gaugeDir = singleDir.getInstance(); + + gaugeRain = singleRain.getInstance(); + gaugeRRate = singleRRate.getInstance(); + + // remove the UV gauge? + if (!config.showUvGauge) { + $('#canvas_uv').parent().remove(); + } else { + gaugeUV = singleUV.getInstance(); + } + + // remove the Solar gauge? + if (!config.showSolarGauge) { + $('#canvas_solar').parent().remove(); + } else { + gaugeSolar = singleSolar.getInstance(); + } + + // remove the Wind Rose? + if (!config.showRoseGauge) { + $('#canvas_rose').parent().remove(); + } else { + gaugeRose = singleRose.getInstance(); + } + + // remove the cloud base gauge? + if (!config.showCloudGauge) { + $('#canvas_cloud').parent().remove(); + // and remove cloudbase unit selection options + $('#cloud').parent().remove(); + } else { + gaugeCloud = singleCloudBase.getInstance(); + } + + // Set the language + changeLang(strings, false); + + if (!dashboard) { + // Go do get the data! + getRealtime(); + + // start a timer to update the status time + tickTockInterval = setInterval( + function () { + $.publish('gauges.clockTick', null); + }, + 1000); + + // start a timer to stop the page updates after the timeout period + if (config.pageUpdateLimit > 0 && getUrlParam('pageUpdate') !== config.pageUpdatePswd) { + setTimeout(pageTimeout, config.pageUpdateLimit * 60 * 1000); + } + } + }, + + // + // singleXXXX functions define a singleton for each of the gauges + // + + // + // Singleton for the LED Indicator + // + singleLed = (function () { + var instance; // Stores a reference to the Singleton + var led; // Stores a reference to the SS LED + + function init() { + // create led indicator + if ($('#canvas_led').length) { + led = new steelseries.Led( + 'canvas_led', { + ledColor: steelseries.LedColor.GREEN_LED, + size : $('#canvas_led').width() + }); + + setTitle(strings.led_title); } - // if rad isn't specified, just use existing value - var t1, scaleStep, tip; + function setTitle(newTitle) { + $('#canvas_led').attr('title', newTitle); + } - cache.minValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMinC : gaugeGlobals.tempScaleDefMinF; - cache.maxValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMaxC : gaugeGlobals.tempScaleDefMaxF; - - if (sel === 'out') { - cache.low = extractDecimal(data.tempTL); - cache.high = extractDecimal(data.tempTH); - cache.lowScale = getMinTemp(cache.minValue); - cache.highScale = getMaxTemp(cache.maxValue); - cache.value = extractDecimal(data.temp); - cache.title = strings.temp_title_out; - cache.loc = strings.temp_out_info; - cache.trendVal = extractDecimal(data.temptrend); - cache.popupImg = 0; - if (gaugeGlobals.tempTrendVisible) { - t1 = tempTrend(+cache.trendVal, data.tempunit, false); - if (t1 === -9999) { - // trend value isn't currently available - cache.trend = steelseries.TrendState.OFF; - } else if (t1 > 0) { - cache.trend = steelseries.TrendState.UP; - } else if (t1 < 0) { - cache.trend = steelseries.TrendState.DOWN; - } else { - cache.trend = steelseries.TrendState.STEADY; - } + function setLedColor(newColour) { + if (led) { + led.setLedColor(newColour); } + } + + function setLedOnOff(onState) { + if (led) { + led.setLedOnOff(onState); + } + } + + function blink(blinkState) { + if (led) { + led.blink(blinkState); + } + } + + return { + setTitle : setTitle, + setLedColor: setLedColor, + setLedOnOff: setLedOnOff, + blink : blink + }; + } + + return { + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } + }; + })(), + + // + // Singleton for the Status Scroller + // + singleStatus = (function () { + var instance; // Stores a reference to the Singleton + var scroller; // Stores a reference to the SS scrolling display + + function init() { + // create forecast display + if ($('#canvas_status').length) { + scroller = new steelseries.DisplaySingle( + 'canvas_status', { + width : $('#canvas_status').width(), + height : $('#canvas_status').height(), + lcdColor : gaugeGlobals.lcdColour, + unitStringVisible: false, + value : strings.statusStr, + digitalFont : config.digitalForecast, + valuesNumeric : false, + autoScroll : true, + alwaysScroll : false + }); + } + + function setValue(newTxt) { + if (scroller) { + scroller.setValue(newTxt); + } + } + + return {setText: setValue}; + } + + return { + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } + }; + })(), + + // + // Singleton for the Status Timer + // + singleTimer = (function () { + var instance, // Stores a reference to the Singleton + lcd, // Stores a reference to the SS LED + count = 1; + + function init() { + function tick() { + if (lcd) { + lcd.setValue(count); + count += config.longPoll ? 1 : -1; + } + } + + function reset(val) { + count = val; + } + + function setValue(newVal) { + if (lcd) { + lcd.setValue(newVal); + } + } + + // create timer display + if ($('#canvas_timer').length) { + lcd = new steelseries.DisplaySingle( + 'canvas_timer', { + width : $('#canvas_timer').width(), + height : $('#canvas_timer').height(), + lcdColor : gaugeGlobals.lcdColour, + lcdDecimals : 0, + unitString : strings.timer, + unitStringVisible: true, + digitalFont : config.digitalFont, + value : count + }); + // subscribe to data updates + $.subscribe('gauges.clockTick', tick); + } + + return { + reset : reset, + setValue: setValue + }; + } + + return { + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } + }; + })(), + + // + // Singleton for the Temperature Gauge + // + singleTemp = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters + + function init() { + var params = $.extend(true, {}, commonParams); + + // define temperature gauge start values + cache.sections = createTempSections(true); + cache.areas = []; + cache.minValue = gaugeGlobals.tempScaleDefMinC; + cache.maxValue = gaugeGlobals.tempScaleDefMaxC; + cache.title = strings.temp_title_out; + cache.value = gaugeGlobals.tempScaleDefMinC + 0.0001; + cache.maxMinVisible = false; + cache.selected = 'out'; + + // create temperature radial gauge + if ($('#canvas_temp').length) { + params.size = Math.ceil($('#canvas_temp').width() * config.gaugeScaling); + params.section = cache.sections; + params.area = cache.areas; + params.minValue = cache.minValue; + params.maxValue = cache.maxValue; + params.thresholdVisible = false; + params.minMeasuredValueVisible = cache.maxMinVisible; + params.maxMeasuredValueVisible = cache.maxMinVisible; + params.titleString = cache.title; + params.unitString = data.tempunit; + params.trendVisible = gaugeGlobals.tempTrendVisible; + // params.customLayer = _imgBackground; // uncomment to add a background image - See Logo Images above + + ssGauge = new steelseries.Radial('canvas_temp', params); + ssGauge.setValue(cache.value); + + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_temp').css({width: params.size + 'px', height: params.size + 'px'}); + } + + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_temp').css(gaugeShadow(params.size)); + } + + // 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(); + } + + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); } else { - // Indoor - cache.title = strings.temp_title_in; - cache.loc = strings.temp_in_info; - cache.value = extractDecimal(data.intemp); - cache.popupImg = 1; - if (data.intempTL && data.intempTH) { - // Indoor - and Max/Min values supplied - cache.low = extractDecimal(data.intempTL); - cache.high = extractDecimal(data.intempTH); + // cannot draw gauge, return null + return null; + } + + function update() { + var sel = cache.selected; + + // Argument length === 1 when called from radio input + // Argument length === 2 when called from event handler + if (arguments.length === 1) { + sel = arguments[0].value; + } + + // if rad isn't specified, just use existing value + var t1, scaleStep, tip; + + cache.minValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMinC : gaugeGlobals.tempScaleDefMinF; + cache.maxValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMaxC : gaugeGlobals.tempScaleDefMaxF; + + if (sel === 'out') { + cache.low = extractDecimal(data.tempTL); + cache.high = extractDecimal(data.tempTH); cache.lowScale = getMinTemp(cache.minValue); cache.highScale = getMaxTemp(cache.maxValue); + cache.value = extractDecimal(data.temp); + cache.title = strings.temp_title_out; + cache.loc = strings.temp_out_info; + cache.trendVal = extractDecimal(data.temptrend); + cache.popupImg = 0; + if (gaugeGlobals.tempTrendVisible) { + t1 = tempTrend(+cache.trendVal, data.tempunit, false); + if (t1 === -9999) { + // trend value isn't currently available + cache.trend = steelseries.TrendState.OFF; + } else if (t1 > 0) { + cache.trend = steelseries.TrendState.UP; + } else if (t1 < 0) { + cache.trend = steelseries.TrendState.DOWN; + } else { + cache.trend = steelseries.TrendState.STEADY; + } + } } else { - // Indoor - no Max/Min values supplied - cache.low = cache.value; - cache.lowScale = cache.value; - cache.high = cache.value; - cache.highScale = cache.value; + // Indoor + cache.title = strings.temp_title_in; + cache.loc = strings.temp_in_info; + cache.value = extractDecimal(data.intemp); + cache.popupImg = 1; + if (data.intempTL && data.intempTH) { + // Indoor - and Max/Min values supplied + cache.low = extractDecimal(data.intempTL); + cache.high = extractDecimal(data.intempTH); + cache.lowScale = getMinTemp(cache.minValue); + cache.highScale = getMaxTemp(cache.maxValue); + } else { + // Indoor - no Max/Min values supplied + cache.low = cache.value; + cache.lowScale = cache.value; + cache.high = cache.value; + cache.highScale = cache.value; + } + if (gaugeGlobals.tempTrendVisible) { + cache.trend = steelseries.TrendState.OFF; + } } - if (gaugeGlobals.tempTrendVisible) { - cache.trend = steelseries.TrendState.OFF; - } - } - // has the gauge type changed? - if (cache.selected !== sel) { - cache.selected = sel; - // Change gauge title - ssGauge.setTitleString(cache.title); - ssGauge.setMaxMeasuredValueVisible(cache.maxMinVisible); - ssGauge.setMinMeasuredValueVisible(cache.maxMinVisible); - if (config.showPopupGraphs && config.tipImgs[0][cache.popupImg] !== null) { - var cacheDefeat = '?' + $('#imgtip0_img').attr('src').split('?')[1]; + // has the gauge type changed? + if (cache.selected !== sel) { + cache.selected = sel; + // Change gauge title + ssGauge.setTitleString(cache.title); + ssGauge.setMaxMeasuredValueVisible(cache.maxMinVisible); + ssGauge.setMinMeasuredValueVisible(cache.maxMinVisible); + if (config.showPopupGraphs && config.tipImgs[0][cache.popupImg] !== null) { + var cacheDefeat = '?' + $('#imgtip0_img').attr('src').split('?')[1]; + $('#imgtip0_img').attr('src', config.imgPathURL + config.tipImgs[0][cache.popupImg] + cacheDefeat); + } + } + + // auto scale the ranges + scaleStep = data.tempunit[1] === 'C' ? 10 : 20; + while (cache.lowScale < cache.minValue) { + cache.minValue -= scaleStep; + if (cache.highScale <= cache.maxValue - scaleStep) { + cache.maxValue -= scaleStep; + } + } + while (cache.highScale > cache.maxValue) { + cache.maxValue += scaleStep; + if (cache.minValue >= cache.minValue + scaleStep) { + cache.minValue += scaleStep; + } + } + + if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) { + ssGauge.setMinValue(cache.minValue); + ssGauge.setMaxValue(cache.maxValue); + ssGauge.setValue(cache.minValue); + } + if (cache.selected === 'out') { + cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)]; + } else if (data.intempTL && data.intempTH) { + // Indoor and min/max avaiable + cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)]; + } else { + // Indoor no min/max avaiable + cache.areas = []; + } + + if (gaugeGlobals.tempTrendVisible) { + ssGauge.setTrend(cache.trend); + } + ssGauge.setArea(cache.areas); + ssGauge.setValueAnimated(+cache.value); + + if (ddimgtooltip.showTips) { + // update tooltip + if (cache.selected === 'out') { + tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TtempTL + + ' | ' + + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TtempTH; + if (cache.trendVal !== -9999) { + tip += '
' + + strings.temp_trend_info + ': ' + tempTrend(cache.trendVal, data.tempunit, true) + + ' ' + cache.trendVal + data.tempunit + '/h'; + } + } else if (data.TintempTL && data.TintempTH) { + // Indoor and min/max available + tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TintempTL + + ' | ' + + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TintempTH; + } else { + // Indoor no min/max + tip = cache.loc + ': ' + data.intemp + data.tempunit; + } + $('#imgtip0_txt').html(tip); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[0][cache.popupImg] !== null) { $('#imgtip0_img').attr('src', config.imgPathURL + config.tipImgs[0][cache.popupImg] + cacheDefeat); } } - // auto scale the ranges - scaleStep = data.tempunit[1] === 'C' ? 10 : 20; - while (cache.lowScale < cache.minValue) { - cache.minValue -= scaleStep; - if (cache.highScale <= cache.maxValue - scaleStep) { - cache.maxValue -= scaleStep; - } - } - while (cache.highScale > cache.maxValue) { - cache.maxValue += scaleStep; - if (cache.minValue >= cache.minValue + scaleStep) { - cache.minValue += scaleStep; - } - } - - if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) { - ssGauge.setMinValue(cache.minValue); - ssGauge.setMaxValue(cache.maxValue); - ssGauge.setValue(cache.minValue); - } - if (cache.selected === 'out') { - cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)]; - } else if (data.intempTL && data.intempTH) { - // Indoor and min/max avaiable - cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)]; - } else { - // Indoor no min/max avaiable - cache.areas = []; - } - - if (gaugeGlobals.tempTrendVisible) { - ssGauge.setTrend(cache.trend); - } - ssGauge.setArea(cache.areas); - ssGauge.setValueAnimated(+cache.value); - - if (ddimgtooltip.showTips) { - // update tooltip - if (cache.selected === 'out') { - tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TtempTL + - ' | ' + - strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TtempTH; - if (cache.trendVal !== -9999) { - tip += '
' + - strings.temp_trend_info + ': ' + tempTrend(cache.trendVal, data.tempunit, true) + - ' ' + cache.trendVal + data.tempunit + '/h'; - } - } else if (data.TintempTL && data.TintempTH) { - // Indoor and min/max available - tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TintempTL + - ' | ' + - strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TintempTH; - } else { - // Indoor no min/max - tip = cache.loc + ': ' + data.intemp + data.tempunit; - } - $('#imgtip0_txt').html(tip); - } - } // End of update() - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[0][cache.popupImg] !== null) { - $('#imgtip0_img').attr('src', config.imgPathURL + config.tipImgs[0][cache.popupImg] + cacheDefeat); - } - } + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge - }; - } // End of init() - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; } - return instance; - } - }; - })(), // End singleTemp() + }; + })(), // End singleTemp() - // - // Singleton for the Dewpoint Gauge - // - singleDew = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters + // + // Singleton for the Dewpoint Gauge + // + singleDew = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters - function init() { - var params = $.extend(true, {}, commonParams); - var tmp; + function init() { + var params = $.extend(true, {}, commonParams); + var tmp; - // define dew point gauge start values - cache.sections = createTempSections(true); - cache.areas = []; - cache.minValue = gaugeGlobals.tempScaleDefMinC; - cache.maxValue = gaugeGlobals.tempScaleDefMaxC; - cache.value = gaugeGlobals.tempScaleDefMinC + 0.0001; - // Has the end user selected a preferred 'scale' before - tmp = getCookie('dewGauge'); - cache.selected = tmp !== null ? tmp : config.dewDisplayType; - setRadioCheck('rad_dew', cache.selected); - switch (cache.selected) { + // define dew point gauge start values + cache.sections = createTempSections(true); + cache.areas = []; + cache.minValue = gaugeGlobals.tempScaleDefMinC; + cache.maxValue = gaugeGlobals.tempScaleDefMaxC; + cache.value = gaugeGlobals.tempScaleDefMinC + 0.0001; + // Has the end user selected a preferred 'scale' before + tmp = getCookie('dewGauge'); + cache.selected = tmp !== null ? tmp : config.dewDisplayType; + setRadioCheck('rad_dew', cache.selected); + switch (cache.selected) { case 'dew': cache.title = strings.dew_title; cache.popupImg = 0; @@ -983,62 +982,62 @@ gauges = (function () { cache.title = strings.humdx_title; cache.popupImg = 4; // no default - } - cache.minMeasuredVisible = false; - cache.maxMeasuredVisible = false; + } + cache.minMeasuredVisible = false; + cache.maxMeasuredVisible = false; - // create dew point radial gauge - if ($('#canvas_dew').length) { - params.size = Math.ceil($('#canvas_dew').width() * config.gaugeScaling); - params.section = cache.sections; - params.area = cache.areas; - params.minValue = cache.minValue; - params.maxValue = cache.maxValue; - params.thresholdVisible = false; - params.titleString = cache.title; - params.unitString = data.tempunit; + // create dew point radial gauge + if ($('#canvas_dew').length) { + params.size = Math.ceil($('#canvas_dew').width() * config.gaugeScaling); + params.section = cache.sections; + params.area = cache.areas; + params.minValue = cache.minValue; + params.maxValue = cache.maxValue; + params.thresholdVisible = false; + params.titleString = cache.title; + params.unitString = data.tempunit; - ssGauge = new steelseries.Radial('canvas_dew', params); - ssGauge.setValue(cache.value); + ssGauge = new steelseries.Radial('canvas_dew', params); + ssGauge.setValue(cache.value); - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_dew').css({ width: params.size + 'px', height: params.size + 'px' }); + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_dew').css({width: params.size + 'px', height: params.size + 'px'}); + } + + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_dew').css(gaugeShadow(params.size)); + } + + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); + } else { + // cannot draw gauge, return null + return null; } - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_dew').css(gaugeShadow(params.size)); - } + function update() { + // if rad isn't specified, just use existing value + var sel = cache.selected; - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } + // Argument length === 2 when called from event handler + if (arguments.length === 1) { + sel = arguments[0].value; + // save the choice in a cookie + setCookie('dewGauge', sel); + } - function update() { - // if rad isn't specified, just use existing value - var sel = cache.selected; + var tip, scaleStep; - // Argument length === 2 when called from event handler - if (arguments.length === 1) { - sel = arguments[0].value; - // save the choice in a cookie - setCookie('dewGauge', sel); - } + cache.minValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMinC : gaugeGlobals.tempScaleDefMinF; + cache.maxValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMaxC : gaugeGlobals.tempScaleDefMaxF; - var tip, scaleStep; + cache.lowScale = getMinTemp(cache.minValue); + cache.highScale = getMaxTemp(cache.maxValue); - cache.minValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMinC : gaugeGlobals.tempScaleDefMinF; - cache.maxValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMaxC : gaugeGlobals.tempScaleDefMaxF; - - cache.lowScale = getMinTemp(cache.minValue); - cache.highScale = getMaxTemp(cache.maxValue); - - switch (sel) { + switch (sel) { case 'dew': // dew point cache.low = extractDecimal(data.dewpointTL); cache.high = extractDecimal(data.dewpointTH); @@ -1049,9 +1048,9 @@ gauges = (function () { cache.maxMeasuredVisible = false; cache.popupImg = 0; tip = strings.dew_info + ':' + - '
' + - '- ' + strings.lowest_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TdewpointTL + - ' | ' + strings.highest_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TdewpointTH; + '
' + + '- ' + strings.lowest_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TdewpointTL + + ' | ' + strings.highest_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TdewpointTH; break; case 'app': // apparent temperature cache.low = extractDecimal(data.apptempTL); @@ -1063,9 +1062,9 @@ gauges = (function () { cache.maxMeasuredVisible = false; cache.popupImg = 1; tip = tip = strings.apptemp_info + ':' + - '
' + - '- ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TapptempTL + - ' | ' + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TapptempTH; + '
' + + '- ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TapptempTL + + ' | ' + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TapptempTH; break; case 'feel': // feels like cache.low = extractDecimal(data.feelslikeTL); @@ -1077,9 +1076,9 @@ gauges = (function () { cache.maxMeasuredVisible = false; cache.popupImg = 1; tip = tip = strings.feel_info + ':' + - '
' + - '- ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TfeelslikeTL + - ' | ' + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TfeelslikeTH; + '
' + + '- ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TfeelslikeTL + + ' | ' + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TfeelslikeTH; break; case 'wnd': // wind chill cache.low = extractDecimal(data.wchillTL); @@ -1119,683 +1118,683 @@ gauges = (function () { tip = strings.humdx_info + ': ' + cache.value + data.tempunit; break; // no default + } + + if (cache.selected !== sel) { + cache.selected = sel; + // change gauge title + ssGauge.setTitleString(cache.title); + // and graph image + if (config.showPopupGraphs && config.tipImgs[1][cache.popupImg] !== null) { + var cacheDefeat = '?' + $('#imgtip1_img').attr('src').split('?')[1]; + $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][cache.popupImg] + cacheDefeat); + } + } + + // auto scale the ranges + scaleStep = data.tempunit[1] === 'C' ? 10 : 20; + while (cache.lowScale < cache.minValue) { + cache.minValue -= scaleStep; + if (cache.highScale <= cache.maxValue - scaleStep) { + cache.maxValue -= scaleStep; + } + } + while (cache.highScale > cache.maxValue) { + cache.maxValue += scaleStep; + if (cache.minValue >= cache.minValue + scaleStep) { + cache.minValue += scaleStep; + } + } + + if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) { + ssGauge.setMinValue(cache.minValue); + ssGauge.setMaxValue(cache.maxValue); + ssGauge.setValue(cache.minValue); + } + ssGauge.setMinMeasuredValueVisible(cache.minMeasuredVisible); + ssGauge.setMaxMeasuredValueVisible(cache.maxMeasuredVisible); + ssGauge.setMinMeasuredValue(+cache.low); + ssGauge.setMaxMeasuredValue(+cache.high); + ssGauge.setArea(cache.areas); + ssGauge.setValueAnimated(+cache.value); + + if (ddimgtooltip.showTips) { + // update tooltip + $('#imgtip1_txt').html(tip); + } } - if (cache.selected !== sel) { - cache.selected = sel; - // change gauge title - ssGauge.setTitleString(cache.title); - // and graph image - if (config.showPopupGraphs && config.tipImgs[1][cache.popupImg] !== null) { - var cacheDefeat = '?' + $('#imgtip1_img').attr('src').split('?')[1]; + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[1][cache.popupImg] !== null) { $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][cache.popupImg] + cacheDefeat); } } - // auto scale the ranges - scaleStep = data.tempunit[1] === 'C' ? 10 : 20; - while (cache.lowScale < cache.minValue) { - cache.minValue -= scaleStep; - if (cache.highScale <= cache.maxValue - scaleStep) { - cache.maxValue -= scaleStep; - } - } - while (cache.highScale > cache.maxValue) { - cache.maxValue += scaleStep; - if (cache.minValue >= cache.minValue + scaleStep) { - cache.minValue += scaleStep; - } - } - - if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) { - ssGauge.setMinValue(cache.minValue); - ssGauge.setMaxValue(cache.maxValue); - ssGauge.setValue(cache.minValue); - } - ssGauge.setMinMeasuredValueVisible(cache.minMeasuredVisible); - ssGauge.setMaxMeasuredValueVisible(cache.maxMeasuredVisible); - ssGauge.setMinMeasuredValue(+cache.low); - ssGauge.setMaxMeasuredValue(+cache.high); - ssGauge.setArea(cache.areas); - ssGauge.setValueAnimated(+cache.value); - - if (ddimgtooltip.showTips) { - // update tooltip - $('#imgtip1_txt').html(tip); - } - } - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[1][cache.popupImg] !== null) { - $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][cache.popupImg] + cacheDefeat); - } - } + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge - }; - } // End of init() - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), // End of singleDew() - - // - // Singleton for the Rainfall Gauge - // - singleRain = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters - - function init() { - var params = $.extend(true, {}, commonParams); - - // define rain gauge start values - cache.maxValue = gaugeGlobals.rainScaleDefMaxmm; - cache.value = 0.0001; - cache.title = strings.rain_title; - cache.lcdDecimals = 1; - cache.scaleDecimals = 1; - cache.labelNumberFormat = gaugeGlobals.labelFormat; - cache.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(true) : []); - cache.valGrad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(true) : null); - - // create rain radial bargraph gauge - if ($('#canvas_rain').length) { - params.size = Math.ceil($('#canvas_rain').width() * config.gaugeScaling); - params.maxValue = cache.maxValue; - params.thresholdVisible = false; - params.titleString = cache.title; - params.unitString = data.rainunit; - params.valueColor = steelseries.ColorDef.BLUE; - params.valueGradient = cache.valGrad; - params.useValueGradient = gaugeGlobals.rainUseGradientColours; - params.useSectionColors = gaugeGlobals.rainUseSectionColour; - params.useSectionColors = gaugeGlobals.rainUseSectionColours; - params.labelNumberFormat = cache.labelNumberFormat; - params.fractionalScaleDecimals = cache.scaleDecimals; - params.niceScale = false; - - ssGauge = new steelseries.RadialBargraph('canvas_rain', params); - ssGauge.setValue(cache.value); - - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_rain').css({ width: params.size + 'px', height: params.size + 'px' }); - } - - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_rain').css(gaugeShadow(params.size)); - } - - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - function update() { - cache.value = extractDecimal(data.rfall); - if (data.rainunit === 'mm') { // 10, 20, 30... - cache.maxValue = Math.max(nextHighest(cache.value, 10), gaugeGlobals.rainScaleDefMaxmm); - } else { - // inches 0.5, 1.0, 2.0, 3.0 ... 10.0, 12.0, 14.0 - if (cache.value <= 1) { - cache.maxValue = Math.max(nextHighest(cache.value, 0.5), gaugeGlobals.rainScaleDefMaxIn); - } else if (cache.value <= 6) { - cache.maxValue = Math.max(nextHighest(cache.value, 1), gaugeGlobals.rainScaleDefMaxIn); - } else { - cache.maxValue = Math.max(nextHighest(cache.value, 2), gaugeGlobals.rainScaleDefMaxIn); + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); } - cache.scaleDecimals = cache.maxValue < 1 ? 2 : 1; + return instance; + } + }; + })(), // End of singleDew() + + // + // Singleton for the Rainfall Gauge + // + singleRain = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters + + function init() { + var params = $.extend(true, {}, commonParams); + + // define rain gauge start values + cache.maxValue = gaugeGlobals.rainScaleDefMaxmm; + cache.value = 0.0001; + cache.title = strings.rain_title; + cache.lcdDecimals = 1; + cache.scaleDecimals = 1; + cache.labelNumberFormat = gaugeGlobals.labelFormat; + cache.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(true) : []); + cache.valGrad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(true) : null); + + // create rain radial bargraph gauge + if ($('#canvas_rain').length) { + params.size = Math.ceil($('#canvas_rain').width() * config.gaugeScaling); + params.maxValue = cache.maxValue; + params.thresholdVisible = false; + params.titleString = cache.title; + params.unitString = data.rainunit; + params.valueColor = steelseries.ColorDef.BLUE; + params.valueGradient = cache.valGrad; + params.useValueGradient = gaugeGlobals.rainUseGradientColours; + params.useSectionColors = gaugeGlobals.rainUseSectionColour; + params.useSectionColors = gaugeGlobals.rainUseSectionColours; + params.labelNumberFormat = cache.labelNumberFormat; + params.fractionalScaleDecimals = cache.scaleDecimals; + params.niceScale = false; + + ssGauge = new steelseries.RadialBargraph('canvas_rain', params); + ssGauge.setValue(cache.value); + + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_rain').css({width: params.size + 'px', height: params.size + 'px'}); + } + + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_rain').css(gaugeShadow(params.size)); + } + + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); + } else { + // cannot draw gauge, return null + return null; } - if (cache.maxValue !== ssGauge.getMaxValue()) { - // Gauge scale is too low, increase it. - // First set the pointer back to zero so we get a nice animation - ssGauge.setValue(0); - // and redraw the gauge with the new scale - ssGauge.setFractionalScaleDecimals(cache.scaleDecimals); - ssGauge.setMaxValue(cache.maxValue); - } - ssGauge.setValueAnimated(cache.value); + function update() { + cache.value = extractDecimal(data.rfall); + if (data.rainunit === 'mm') { // 10, 20, 30... + cache.maxValue = Math.max(nextHighest(cache.value, 10), gaugeGlobals.rainScaleDefMaxmm); + } else { + // inches 0.5, 1.0, 2.0, 3.0 ... 10.0, 12.0, 14.0 + if (cache.value <= 1) { + cache.maxValue = Math.max(nextHighest(cache.value, 0.5), gaugeGlobals.rainScaleDefMaxIn); + } else if (cache.value <= 6) { + cache.maxValue = Math.max(nextHighest(cache.value, 1), gaugeGlobals.rainScaleDefMaxIn); + } else { + cache.maxValue = Math.max(nextHighest(cache.value, 2), gaugeGlobals.rainScaleDefMaxIn); + } + cache.scaleDecimals = cache.maxValue < 1 ? 2 : 1; + } - if (ddimgtooltip.showTips) { - // update tooltip - $('#imgtip2_txt').html(strings.LastRain_info + ': ' + data.LastRained); - } - } // End of update() + if (cache.maxValue !== ssGauge.getMaxValue()) { + // Gauge scale is too low, increase it. + // First set the pointer back to zero so we get a nice animation + ssGauge.setValue(0); + // and redraw the gauge with the new scale + ssGauge.setFractionalScaleDecimals(cache.scaleDecimals); + ssGauge.setMaxValue(cache.maxValue); + } + ssGauge.setValueAnimated(cache.value); - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[2] !== null) { - $('#imgtip2_img').attr('src', config.imgPathURL + config.tipImgs[2] + cacheDefeat); + if (ddimgtooltip.showTips) { + // update tooltip + $('#imgtip2_txt').html(strings.LastRain_info + ': ' + data.LastRained); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[2] !== null) { + $('#imgtip2_img').attr('src', config.imgPathURL + config.tipImgs[2] + cacheDefeat); + } } - } + + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } }; - } // End of init() + })(), - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), + // + // Singleton for the Rainfall Rate Gauge + // + singleRRate = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters - // - // Singleton for the Rainfall Rate Gauge - // - singleRRate = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters + function init() { + var params = $.extend(true, {}, commonParams); - function init() { - var params = $.extend(true, {}, commonParams); + // define rain rate gauge start values + cache.maxMeasured = 0; + cache.maxValue = gaugeGlobals.rainRateScaleDefMaxmm; + cache.value = 0.0001; + cache.title = strings.rrate_title; + cache.lcdDecimals = 1; + cache.scaleDecimals = 0; + cache.labelNumberFormat = gaugeGlobals.labelFormat; + cache.sections = createRainRateSections(true); - // define rain rate gauge start values - cache.maxMeasured = 0; - cache.maxValue = gaugeGlobals.rainRateScaleDefMaxmm; - cache.value = 0.0001; - cache.title = strings.rrate_title; - cache.lcdDecimals = 1; - cache.scaleDecimals = 0; - cache.labelNumberFormat = gaugeGlobals.labelFormat; - cache.sections = createRainRateSections(true); + // create rain rate radial gauge + if ($('#canvas_rrate').length) { + params.size = Math.ceil($('#canvas_rrate').width() * config.gaugeScaling); + params.section = cache.sections; + params.maxValue = cache.maxValue; + params.thresholdVisible = false; + params.maxMeasuredValueVisible = true; + params.titleString = cache.title; + params.unitString = data.rainunit + '/h'; + params.lcdDecimals = cache.lcdDecimals; + params.labelNumberFormat = cache.labelNumberFormat; + params.fractionalScaleDecimals = cache.scaleDecimals; + params.niceScale = false; - // create rain rate radial gauge - if ($('#canvas_rrate').length) { - params.size = Math.ceil($('#canvas_rrate').width() * config.gaugeScaling); - params.section = cache.sections; - params.maxValue = cache.maxValue; - params.thresholdVisible = false; - params.maxMeasuredValueVisible = true; - params.titleString = cache.title; - params.unitString = data.rainunit + '/h'; - params.lcdDecimals = cache.lcdDecimals; - params.labelNumberFormat = cache.labelNumberFormat; - params.fractionalScaleDecimals = cache.scaleDecimals; - params.niceScale = false; + ssGauge = new steelseries.Radial('canvas_rrate', params); + ssGauge.setMaxMeasuredValue(cache.maxMeasured); + ssGauge.setValue(cache.value); - ssGauge = new steelseries.Radial('canvas_rrate', params); - ssGauge.setMaxMeasuredValue(cache.maxMeasured); - ssGauge.setValue(cache.value); + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_rrate').css({width: params.size + 'px', height: params.size + 'px'}); + } - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_rrate').css({ width: params.size + 'px', height: params.size + 'px' }); - } + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_rrate').css(gaugeShadow(params.size)); + } - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_rrate').css(gaugeShadow(params.size)); - } - - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - function update() { - var tip; - - cache.value = extractDecimal(data.rrate); - cache.maxMeasured = extractDecimal(data.rrateTM); - cache.overallMax = Math.max(cache.maxMeasured, cache.value); // workaround for VWS bug, not supplying correct max value today - - if (data.rainunit === 'mm') { // 10, 20, 30... - cache.maxValue = nextHighest(cache.overallMax, 10); + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); } else { - // inches 0.5, 1.0, 2.0, 3.0 ... 10, 20, 30... - if (cache.overallMax <= 0.5) { - cache.maxValue = 0.5; - } else if (cache.overallMax <= 10) { - cache.maxValue = nextHighest(cache.overallMax, 1); - } else { + // cannot draw gauge, return null + return null; + } + + function update() { + var tip; + + cache.value = extractDecimal(data.rrate); + cache.maxMeasured = extractDecimal(data.rrateTM); + cache.overallMax = Math.max(cache.maxMeasured, cache.value); // workaround for VWS bug, not supplying correct max value today + + if (data.rainunit === 'mm') { // 10, 20, 30... cache.maxValue = nextHighest(cache.overallMax, 10); - } - cache.scaleDecimals = cache.maxValue < 1 ? 2 : (cache.maxValue < 7 ? 1 : 0); - } - - if (cache.maxValue !== ssGauge.getMaxValue()) { - ssGauge.setValue(0); - ssGauge.setFractionalScaleDecimals(cache.scaleDecimals); - ssGauge.setMaxValue(cache.maxValue); - } - - ssGauge.setValueAnimated(cache.value); - ssGauge.setMaxMeasuredValue(cache.maxMeasured); - - if (ddimgtooltip.showTips) { - // update tooltip - tip = strings.rrate_info + ':
' + - '- ' + 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); - } - } // End of update() - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[3] !== null) { - $('#imgtip3_img').attr('src', config.imgPathURL + config.tipImgs[3] + cacheDefeat); - } - } - return { - data: cache, - update: update, - gauge: ssGauge - }; - } // End of init() - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), - - // - // Singleton for the Humidity Gauge - // - singleHum = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters - - function init() { - var params = $.extend(true, {}, commonParams); - - // define humidity gauge start values - cache.areas = []; - cache.value = 0.0001; - cache.title = strings.hum_title_out; - cache.selected = 'out'; - - // create humidity radial gauge - if ($('#canvas_hum').length) { - params.size = Math.ceil($('#canvas_hum').width() * config.gaugeScaling); - 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 = cache.areas; - params.maxValue = 100; - params.thresholdVisible = false; - params.titleString = cache.title; - params.unitString = 'RH%'; - - ssGauge = new steelseries.Radial('canvas_hum', params); - ssGauge.setValue(cache.value); - - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_hum').css({ width: params.size + 'px', height: params.size + 'px' }); - } - - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_hum').css(gaugeShadow(params.size)); - } - - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - function update() { - var radio; - // Argument length === 2 when called from event handler - if (arguments.length === 1) { - radio = arguments[0]; - } - - // if rad isn't specified, just use existing value - var sel = (typeof radio === 'undefined' ? cache.selected : radio.value), - tip; - - if (sel === 'out') { - cache.value = extractDecimal(data.hum); - cache.areas = [steelseries.Section(+extractDecimal(data.humTL), +extractDecimal(data.humTH), gaugeGlobals.minMaxArea)]; - cache.title = strings.hum_title_out; - cache.popupImg = 0; - } else { - cache.value = extractDecimal(data.inhum); - if (data.inhumTL && data.inhumTH) { - cache.areas = [steelseries.Section(+extractDecimal(data.inhumTL), +extractDecimal(data.inhumTH), gaugeGlobals.minMaxArea)]; } else { - cache.areas = []; + // inches 0.5, 1.0, 2.0, 3.0 ... 10, 20, 30... + if (cache.overallMax <= 0.5) { + cache.maxValue = 0.5; + } else if (cache.overallMax <= 10) { + cache.maxValue = nextHighest(cache.overallMax, 1); + } else { + cache.maxValue = nextHighest(cache.overallMax, 10); + } + cache.scaleDecimals = cache.maxValue < 1 ? 2 : (cache.maxValue < 7 ? 1 : 0); } - cache.title = strings.hum_title_in; - cache.popupImg = 1; + + if (cache.maxValue !== ssGauge.getMaxValue()) { + ssGauge.setValue(0); + ssGauge.setFractionalScaleDecimals(cache.scaleDecimals); + ssGauge.setMaxValue(cache.maxValue); + } + + ssGauge.setValueAnimated(cache.value); + ssGauge.setMaxMeasuredValue(cache.maxMeasured); + + if (ddimgtooltip.showTips) { + // update tooltip + tip = strings.rrate_info + ':
' + + '- ' + 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); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[3] !== null) { + $('#imgtip3_img').attr('src', config.imgPathURL + config.tipImgs[3] + cacheDefeat); + } + } + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() + + return { + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } + }; + })(), + + // + // Singleton for the Humidity Gauge + // + singleHum = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters + + function init() { + var params = $.extend(true, {}, commonParams); + + // define humidity gauge start values + cache.areas = []; + cache.value = 0.0001; + cache.title = strings.hum_title_out; + cache.selected = 'out'; + + // create humidity radial gauge + if ($('#canvas_hum').length) { + params.size = Math.ceil($('#canvas_hum').width() * config.gaugeScaling); + 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 = cache.areas; + params.maxValue = 100; + params.thresholdVisible = false; + params.titleString = cache.title; + params.unitString = 'RH%'; + + ssGauge = new steelseries.Radial('canvas_hum', params); + ssGauge.setValue(cache.value); + + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_hum').css({width: params.size + 'px', height: params.size + 'px'}); + } + + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_hum').css(gaugeShadow(params.size)); + } + + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); + } else { + // cannot draw gauge, return null + return null; } - if (cache.selected !== sel) { - cache.selected = sel; - // Change gauge title - ssGauge.setTitleString(cache.title); - if (config.showPopupGraphs && config.tipImgs[4][cache.popupImg] !== null) { - var cacheDefeat = '?' + $('#imgtip4_img').attr('src').split('?')[1]; + function update() { + var radio; + // Argument length === 2 when called from event handler + if (arguments.length === 1) { + radio = arguments[0]; + } + + // if rad isn't specified, just use existing value + var sel = (typeof radio === 'undefined' ? cache.selected : radio.value), + tip; + + if (sel === 'out') { + cache.value = extractDecimal(data.hum); + cache.areas = [steelseries.Section(+extractDecimal(data.humTL), +extractDecimal(data.humTH), gaugeGlobals.minMaxArea)]; + cache.title = strings.hum_title_out; + cache.popupImg = 0; + } else { + cache.value = extractDecimal(data.inhum); + if (data.inhumTL && data.inhumTH) { + cache.areas = [steelseries.Section(+extractDecimal(data.inhumTL), +extractDecimal(data.inhumTH), gaugeGlobals.minMaxArea)]; + } else { + cache.areas = []; + } + cache.title = strings.hum_title_in; + cache.popupImg = 1; + } + + if (cache.selected !== sel) { + cache.selected = sel; + // Change gauge title + ssGauge.setTitleString(cache.title); + if (config.showPopupGraphs && config.tipImgs[4][cache.popupImg] !== null) { + var cacheDefeat = '?' + $('#imgtip4_img').attr('src').split('?')[1]; + $('#imgtip4_img').attr('src', config.imgPathURL + config.tipImgs[4][cache.popupImg] + cacheDefeat); + } + } + + ssGauge.setArea(cache.areas); + ssGauge.setValueAnimated(cache.value); + + if (ddimgtooltip.showTips) { + // update tooltip + if (cache.selected === 'out') { + tip = strings.hum_out_info + ':' + + '
' + + '- ' + strings.minimum_info + ': ' + extractDecimal(data.humTL) + '% ' + strings.at + ' ' + data.ThumTL + + ' | ' + strings.maximum_info + ': ' + extractDecimal(data.humTH) + '% ' + strings.at + ' ' + data.ThumTH; + } else if (data.inhumTL && data.inhumTH) { + // we have indoor high/low data + tip = strings.hum_in_info + ':' + + '
' + + '- ' + strings.minimum_info + ': ' + extractDecimal(data.inhumTL) + '% ' + strings.at + ' ' + data.TinhumTL + + ' | ' + strings.maximum_info + ': ' + extractDecimal(data.inhumTH) + '% ' + strings.at + ' ' + data.TinhumTH; + } else { + // no indoor high/low data + tip = strings.hum_in_info + ': ' + extractDecimal(data.inhum) + '%'; + } + $('#imgtip4_txt').html(tip); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[4][cache.popupImg] !== null) { $('#imgtip4_img').attr('src', config.imgPathURL + config.tipImgs[4][cache.popupImg] + cacheDefeat); } } - ssGauge.setArea(cache.areas); - ssGauge.setValueAnimated(cache.value); - - if (ddimgtooltip.showTips) { - // update tooltip - if (cache.selected === 'out') { - tip = strings.hum_out_info + ':' + - '
' + - '- ' + strings.minimum_info + ': ' + extractDecimal(data.humTL) + '% ' + strings.at + ' ' + data.ThumTL + - ' | ' + strings.maximum_info + ': ' + extractDecimal(data.humTH) + '% ' + strings.at + ' ' + data.ThumTH; - } else if (data.inhumTL && data.inhumTH) { - // we have indoor high/low data - tip = strings.hum_in_info + ':' + - '
' + - '- ' + strings.minimum_info + ': ' + extractDecimal(data.inhumTL) + '% ' + strings.at + ' ' + data.TinhumTL + - ' | ' + strings.maximum_info + ': ' + extractDecimal(data.inhumTH) + '% ' + strings.at + ' ' + data.TinhumTH; - } else { - // no indoor high/low data - tip = strings.hum_in_info + ': ' + extractDecimal(data.inhum) + '%'; - } - $('#imgtip4_txt').html(tip); - } - } // End of update() - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[4][cache.popupImg] !== null) { - $('#imgtip4_img').attr('src', config.imgPathURL + config.tipImgs[4][cache.popupImg] + cacheDefeat); - } - } + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } }; - } // End of init() + })(), - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), + // + // Singleton for the Barometer Gauge + // + singleBaro = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters - // - // Singleton for the Barometer Gauge - // - singleBaro = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters + function init() { + var params = $.extend(true, {}, commonParams); - function init() { - var params = $.extend(true, {}, commonParams); + // define pressure/barometer gauge start values + cache.sections = []; + cache.areas = []; + cache.minValue = gaugeGlobals.baroScaleDefMinhPa; + cache.maxValue = gaugeGlobals.baroScaleDefMaxhPa; + cache.value = cache.minValue + 0.0001; + cache.title = strings.baro_title; + cache.lcdDecimals = 1; + cache.scaleDecimals = 0; + cache.labelNumberFormat = gaugeGlobals.labelFormat; - // define pressure/barometer gauge start values - cache.sections = []; - cache.areas = []; - cache.minValue = gaugeGlobals.baroScaleDefMinhPa; - cache.maxValue = gaugeGlobals.baroScaleDefMaxhPa; - cache.value = cache.minValue + 0.0001; - cache.title = strings.baro_title; - cache.lcdDecimals = 1; - cache.scaleDecimals = 0; - cache.labelNumberFormat = gaugeGlobals.labelFormat; + // create pressure/barometric radial gauge + if ($('#canvas_baro').length) { + params.size = Math.ceil($('#canvas_baro').width() * config.gaugeScaling); + params.section = cache.sections; + params.area = cache.areas; + params.minValue = cache.minValue; + params.maxValue = cache.maxValue; + params.niceScale = false; + params.thresholdVisible = false; + params.titleString = cache.title; + params.unitString = data.pressunit; + params.lcdDecimals = cache.lcdDecimals; + params.trendVisible = gaugeGlobals.pressureTrendVisible; + params.labelNumberFormat = cache.labelNumberFormat; + params.fractionalScaleDecimals = cache.scaleDecimals; - // create pressure/barometric radial gauge - if ($('#canvas_baro').length) { - params.size = Math.ceil($('#canvas_baro').width() * config.gaugeScaling); - params.section = cache.sections; - params.area = cache.areas; - params.minValue = cache.minValue; - params.maxValue = cache.maxValue; - params.niceScale = false; - params.thresholdVisible = false; - params.titleString = cache.title; - params.unitString = data.pressunit; - params.lcdDecimals = cache.lcdDecimals; - params.trendVisible = gaugeGlobals.pressureTrendVisible; - params.labelNumberFormat = cache.labelNumberFormat; - params.fractionalScaleDecimals = cache.scaleDecimals; + ssGauge = new steelseries.Radial('canvas_baro', params); + ssGauge.setValue(cache.value); - ssGauge = new steelseries.Radial('canvas_baro', params); - ssGauge.setValue(cache.value); + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_baro').css({width: params.size + 'px', height: params.size + 'px'}); + } - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_baro').css({ width: params.size + 'px', height: params.size + 'px' }); - } + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_baro').css(gaugeShadow(params.size)); + } - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_baro').css(gaugeShadow(params.size)); - } - - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - function update() { - var tip, t1, dps; - - cache.recLow = +extractDecimal(data.pressL); - cache.recHigh = +extractDecimal(data.pressH); - cache.todayLow = +extractDecimal(data.pressTL); - cache.todayHigh = +extractDecimal(data.pressTH); - cache.value = +extractDecimal(data.press); - // Convert the WD change over 3 hours to an hourly rate - cache.trendVal = +extractDecimal(data.presstrendval) / (config.weatherProgram === 2 ? 3 : 1); - - if (data.pressunit === 'hPa' || data.pressunit === 'mb') { - // default min range 990-1030 - steps of 10 hPa - cache.minValue = Math.min(nextLowest(cache.recLow - 2, 10), gaugeGlobals.baroScaleDefMinhPa); - cache.maxValue = Math.max(nextHighest(cache.recHigh + 2, 10), gaugeGlobals.baroScaleDefMaxhPa); - dps = 1; // 1 decimal place - } else if (data.pressunit === 'kPa') { - // default min range 99-105 - steps of 1 kPa - cache.minValue = Math.min(nextLowest(cache.recLow - 0.2, 1), gaugeGlobals.baroScaleDefMinkPa); - cache.maxValue = Math.max(nextHighest(cache.recHigh + 0.2, 1), gaugeGlobals.baroScaleDefMaxkPa); - dps = 2; + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); } else { - // inHg: default min range 29.5-30.5 - steps of 0.5 inHg - cache.minValue = Math.min(nextLowest(cache.recLow - 0.1, 0.5), gaugeGlobals.baroScaleDefMininHg); - cache.maxValue = Math.max(nextHighest(cache.recHigh + 0.1, 0.5), gaugeGlobals.baroScaleDefMaxinHg); - dps = 3; - } - cache.trendValRnd = cache.trendVal.toFixed(dps); - cache.todayLowRnd = cache.todayLow.toFixed(dps); - cache.todayHighRnd = cache.todayHigh.toFixed(dps); - - if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) { - ssGauge.setMinValue(cache.minValue); - ssGauge.setMaxValue(cache.maxValue); - ssGauge.setValue(cache.minValue); - } - if (cache.recHigh === cache.todayHigh && cache.recLow === cache.todayLow) { - // VWS does not provide record hi/lo values - cache.sections = []; - cache.areas = [steelseries.Section(cache.todayLow, cache.todayHigh, gaugeGlobals.minMaxArea)]; - } else { - cache.sections = [ - steelseries.Section(cache.minValue, cache.recLow, 'rgba(255,0,0,0.5)'), - steelseries.Section(cache.recHigh, cache.maxValue, 'rgba(255,0,0,0.5)') - ]; - cache.areas = [ - steelseries.Section(cache.minValue, cache.recLow, 'rgba(255,0,0,0.5)'), - steelseries.Section(cache.recHigh, cache.maxValue, 'rgba(255,0,0,0.5)'), - steelseries.Section(cache.todayLow, cache.todayHigh, gaugeGlobals.minMaxArea) - ]; + // cannot draw gauge, return null + return null; } - if (gaugeGlobals.pressureTrendVisible) { - // Use the baroTrend rather than simple arithmetic test - steady is more/less than zero! - t1 = baroTrend(cache.trendVal, data.pressunit, false); - if (t1 === -9999) { - // trend value isn't currently available - cache.trend = steelseries.TrendState.OFF; - } else if (t1 > 0) { - cache.trend = steelseries.TrendState.UP; - } else if (t1 < 0) { - cache.trend = steelseries.TrendState.DOWN; + function update() { + var tip, t1, dps; + + cache.recLow = +extractDecimal(data.pressL); + cache.recHigh = +extractDecimal(data.pressH); + cache.todayLow = +extractDecimal(data.pressTL); + cache.todayHigh = +extractDecimal(data.pressTH); + cache.value = +extractDecimal(data.press); + // Convert the WD change over 3 hours to an hourly rate + cache.trendVal = +extractDecimal(data.presstrendval) / (config.weatherProgram === 2 ? 3 : 1); + + if (data.pressunit === 'hPa' || data.pressunit === 'mb') { + // default min range 990-1030 - steps of 10 hPa + cache.minValue = Math.min(nextLowest(cache.recLow - 2, 10), gaugeGlobals.baroScaleDefMinhPa); + cache.maxValue = Math.max(nextHighest(cache.recHigh + 2, 10), gaugeGlobals.baroScaleDefMaxhPa); + dps = 1; // 1 decimal place + } else if (data.pressunit === 'kPa') { + // default min range 99-105 - steps of 1 kPa + cache.minValue = Math.min(nextLowest(cache.recLow - 0.2, 1), gaugeGlobals.baroScaleDefMinkPa); + cache.maxValue = Math.max(nextHighest(cache.recHigh + 0.2, 1), gaugeGlobals.baroScaleDefMaxkPa); + dps = 2; } else { - cache.trend = steelseries.TrendState.STEADY; + // inHg: default min range 29.5-30.5 - steps of 0.5 inHg + cache.minValue = Math.min(nextLowest(cache.recLow - 0.1, 0.5), gaugeGlobals.baroScaleDefMininHg); + cache.maxValue = Math.max(nextHighest(cache.recHigh + 0.1, 0.5), gaugeGlobals.baroScaleDefMaxinHg); + dps = 3; } - ssGauge.setTrend(cache.trend); - } + cache.trendValRnd = cache.trendVal.toFixed(dps); + cache.todayLowRnd = cache.todayLow.toFixed(dps); + cache.todayHighRnd = cache.todayHigh.toFixed(dps); - ssGauge.setArea(cache.areas); - ssGauge.setSection(cache.sections); - ssGauge.setValueAnimated(cache.value); - - if (ddimgtooltip.showTips) { - // update tooltip - tip = strings.baro_info + ':' + - '
' + - '- ' + strings.minimum_info + ': ' + cache.todayLowRnd + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTL + - ' | ' + strings.maximum_info + ': ' + cache.todayHighRnd + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTH; - if (cache.trendVal !== -9999) { - tip += '
' + - '- ' + strings.baro_trend_info + ': ' + baroTrend(cache.trendVal, data.pressunit, true) + ' ' + - (cache.trendValRnd > 0 ? '+' : '') + cache.trendValRnd + ' ' + data.pressunit + '/h'; + if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) { + ssGauge.setMinValue(cache.minValue); + ssGauge.setMaxValue(cache.maxValue); + ssGauge.setValue(cache.minValue); + } + if (cache.recHigh === cache.todayHigh && cache.recLow === cache.todayLow) { + // VWS does not provide record hi/lo values + cache.sections = []; + cache.areas = [steelseries.Section(cache.todayLow, cache.todayHigh, gaugeGlobals.minMaxArea)]; + } else { + cache.sections = [ + steelseries.Section(cache.minValue, cache.recLow, 'rgba(255,0,0,0.5)'), + steelseries.Section(cache.recHigh, cache.maxValue, 'rgba(255,0,0,0.5)') + ]; + cache.areas = [ + steelseries.Section(cache.minValue, cache.recLow, 'rgba(255,0,0,0.5)'), + steelseries.Section(cache.recHigh, cache.maxValue, 'rgba(255,0,0,0.5)'), + steelseries.Section(cache.todayLow, cache.todayHigh, gaugeGlobals.minMaxArea) + ]; } - $('#imgtip5_txt').html(tip); - } - } // End of update() - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[5] !== null) { - $('#imgtip5_img').attr('src', config.imgPathURL + config.tipImgs[5] + cacheDefeat); + if (gaugeGlobals.pressureTrendVisible) { + // Use the baroTrend rather than simple arithmetic test - steady is more/less than zero! + t1 = baroTrend(cache.trendVal, data.pressunit, false); + if (t1 === -9999) { + // trend value isn't currently available + cache.trend = steelseries.TrendState.OFF; + } else if (t1 > 0) { + cache.trend = steelseries.TrendState.UP; + } else if (t1 < 0) { + cache.trend = steelseries.TrendState.DOWN; + } else { + cache.trend = steelseries.TrendState.STEADY; + } + ssGauge.setTrend(cache.trend); + } + + ssGauge.setArea(cache.areas); + ssGauge.setSection(cache.sections); + ssGauge.setValueAnimated(cache.value); + + if (ddimgtooltip.showTips) { + // update tooltip + tip = strings.baro_info + ':' + + '
' + + '- ' + strings.minimum_info + ': ' + cache.todayLowRnd + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTL + + ' | ' + strings.maximum_info + ': ' + cache.todayHighRnd + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTH; + if (cache.trendVal !== -9999) { + tip += '
' + + '- ' + strings.baro_trend_info + ': ' + baroTrend(cache.trendVal, data.pressunit, true) + ' ' + + (cache.trendValRnd > 0 ? '+' : '') + cache.trendValRnd + ' ' + data.pressunit + '/h'; + } + $('#imgtip5_txt').html(tip); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[5] !== null) { + $('#imgtip5_img').attr('src', config.imgPathURL + config.tipImgs[5] + cacheDefeat); + } } - } + + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } }; - } // End of init() + })(), - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), + // + // Singleton for the Wind Speed Gauge + // + singleWind = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters - // - // Singleton for the Wind Speed Gauge - // - singleWind = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters + function init() { + var params = $.extend(true, {}, commonParams); - function init() { - var params = $.extend(true, {}, commonParams); + // define wind gauge start values + cache.maxValue = gaugeGlobals.windScaleDefMaxKph; + cache.areas = []; + cache.maxMeasured = 0; + cache.value = 0.0001; + cache.title = strings.wind_title; - // define wind gauge start values - cache.maxValue = gaugeGlobals.windScaleDefMaxKph; - cache.areas = []; - cache.maxMeasured = 0; - cache.value = 0.0001; - cache.title = strings.wind_title; + // create wind speed radial gauge + if ($('#canvas_wind').length) { + params.size = Math.ceil($('#canvas_wind').width() * config.gaugeScaling); + params.area = cache.areas; + params.maxValue = cache.maxValue; + params.niceScale = false; + params.thresholdVisible = false; + params.maxMeasuredValueVisible = true; + params.titleString = cache.title; + params.unitString = data.windunit; - // create wind speed radial gauge - if ($('#canvas_wind').length) { - params.size = Math.ceil($('#canvas_wind').width() * config.gaugeScaling); - params.area = cache.areas; - params.maxValue = cache.maxValue; - params.niceScale = false; - params.thresholdVisible = false; - params.maxMeasuredValueVisible = true; - params.titleString = cache.title; - params.unitString = data.windunit; + ssGauge = new steelseries.Radial('canvas_wind', params); + ssGauge.setMaxMeasuredValue(cache.maxMeasured); + ssGauge.setValue(cache.value); - ssGauge = new steelseries.Radial('canvas_wind', params); - ssGauge.setMaxMeasuredValue(cache.maxMeasured); - ssGauge.setValue(cache.value); + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_wind').css({width: params.size + 'px', height: params.size + 'px'}); + } - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_wind').css({ width: params.size + 'px', height: params.size + 'px' }); + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_wind').css(gaugeShadow(params.size)); + } + + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); + } else { + // cannot draw gauge, return null + return null; } - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_wind').css(gaugeShadow(params.size)); - } + function update() { + var tip; - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } + cache.value = extractDecimal(data.wlatest); + cache.average = extractDecimal(data.wspeed); + cache.gust = extractDecimal(data.wgust); + cache.maxGustToday = extractDecimal(data.wgustTM); + cache.maxAvgToday = extractDecimal(data.windTM); - function update() { - var tip; - - cache.value = extractDecimal(data.wlatest); - cache.average = extractDecimal(data.wspeed); - cache.gust = extractDecimal(data.wgust); - cache.maxGustToday = extractDecimal(data.wgustTM); - cache.maxAvgToday = extractDecimal(data.windTM); - - switch (data.windunit) { + switch (data.windunit) { case 'mph': case 'kts': cache.maxValue = Math.max(nextHighest(cache.maxGustToday, 10), gaugeGlobals.windScaleDefMaxMph); @@ -1805,129 +1804,129 @@ gauges = (function () { break; default: cache.maxValue = Math.max(nextHighest(cache.maxGustToday, 20), gaugeGlobals.windScaleDefMaxKmh); - } - cache.areas = [ - steelseries.Section(0, +cache.average, gaugeGlobals.windAvgArea), - steelseries.Section(+cache.average, +cache.gust, gaugeGlobals.minMaxArea) - ]; - if (cache.maxValue !== ssGauge.getMaxValue()) { - ssGauge.setValue(0); - ssGauge.setMaxValue(cache.maxValue); + } + cache.areas = [ + steelseries.Section(0, +cache.average, gaugeGlobals.windAvgArea), + steelseries.Section(+cache.average, +cache.gust, gaugeGlobals.minMaxArea) + ]; + if (cache.maxValue !== ssGauge.getMaxValue()) { + ssGauge.setValue(0); + ssGauge.setMaxValue(cache.maxValue); + } + + ssGauge.setArea(cache.areas); + ssGauge.setMaxMeasuredValue(cache.maxGustToday); + ssGauge.setValueAnimated(cache.value); + + if (ddimgtooltip.showTips) { + // update tooltip + tip = strings.tenminavgwind_info + ': ' + cache.average + ' ' + data.windunit + ' | ' + + strings.maxavgwind_info + ': ' + cache.maxAvgToday + ' ' + data.windunit + '
' + + strings.tenmingust_info + ': ' + cache.gust + ' ' + data.windunit + ' | ' + + strings.maxgust_info + ': ' + cache.maxGustToday + ' ' + data.windunit + ' ' + + strings.at + ' ' + data.TwgustTM + ' ' + strings.bearing_info + ': ' + data.bearingTM + + (isNaN(parseFloat(data.bearingTM)) ? '' : '° (' + getord(+data.bearingTM) + ')'); + $('#imgtip6_txt').html(tip); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[6] !== null) { + $('#imgtip6_img').attr('src', config.imgPathURL + config.tipImgs[6] + cacheDefeat); + } } - ssGauge.setArea(cache.areas); - ssGauge.setMaxMeasuredValue(cache.maxGustToday); - ssGauge.setValueAnimated(cache.value); - - if (ddimgtooltip.showTips) { - // update tooltip - tip = strings.tenminavgwind_info + ': ' + cache.average + ' ' + data.windunit + ' | ' + - strings.maxavgwind_info + ': ' + cache.maxAvgToday + ' ' + data.windunit + '
' + - strings.tenmingust_info + ': ' + cache.gust + ' ' + data.windunit + ' | ' + - strings.maxgust_info + ': ' + cache.maxGustToday + ' ' + data.windunit + ' ' + - strings.at + ' ' + data.TwgustTM + ' ' + strings.bearing_info + ': ' + data.bearingTM + - (isNaN(parseFloat(data.bearingTM)) ? '' : '° (' + getord(+data.bearingTM) + ')'); - $('#imgtip6_txt').html(tip); - } - } // End of update() - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[6] !== null) { - $('#imgtip6_img').attr('src', config.imgPathURL + config.tipImgs[6] + cacheDefeat); - } - } + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } }; - } // End of init() + })(), // End of singleWind() - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), // End of singleWind() + // + // Singleton for the Wind Direction Gauge + // + singleDir = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters - // - // Singleton for the Wind Direction Gauge - // - singleDir = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters + function init() { + var params = $.extend(true, {}, commonParams); - function init() { - var params = $.extend(true, {}, commonParams); + // define wind direction gauge start values + cache.valueLatest = 0; + cache.valueAverage = 0; + cache.titles = [strings.latest_web, strings.tenminavg_web]; - // define wind direction gauge start values - cache.valueLatest = 0; - cache.valueAverage = 0; - cache.titles = [strings.latest_web, strings.tenminavg_web]; + // create wind direction/compass radial gauge + if ($('#canvas_dir').length) { + params.size = Math.ceil($('#canvas_dir').width() * config.gaugeScaling); + params.pointerTypeLatest = gaugeGlobals.pointer; // default TYPE8, + params.pointerTypeAverage = gaugeGlobals.dirAvgPointer; // default TYPE8 + params.pointerColorAverage = gaugeGlobals.dirAvgPointerColour; + params.degreeScale = true; // Show degree scale rather than ordinal directions + params.pointSymbols = strings.compass; + params.roseVisible = false; + params.lcdTitleStrings = cache.titles; + params.useColorLabels = false; - // create wind direction/compass radial gauge - if ($('#canvas_dir').length) { - params.size = Math.ceil($('#canvas_dir').width() * config.gaugeScaling); - params.pointerTypeLatest = gaugeGlobals.pointer; // default TYPE8, - params.pointerTypeAverage = gaugeGlobals.dirAvgPointer; // default TYPE8 - params.pointerColorAverage = gaugeGlobals.dirAvgPointerColour; - params.degreeScale = true; // Show degree scale rather than ordinal directions - params.pointSymbols = strings.compass; - params.roseVisible = false; - params.lcdTitleStrings = cache.titles; - params.useColorLabels = false; + ssGauge = new steelseries.WindDirection('canvas_dir', params); + ssGauge.setValueAverage(+cache.valueAverage); + ssGauge.setValueLatest(+cache.valueLatest); - ssGauge = new steelseries.WindDirection('canvas_dir', params); - ssGauge.setValueAverage(+cache.valueAverage); - ssGauge.setValueLatest(+cache.valueLatest); + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_dir').css({width: params.size + 'px', height: params.size + 'px'}); + } - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_dir').css({ width: params.size + 'px', height: params.size + 'px' }); + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_dir').css(gaugeShadow(params.size)); + } + + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); + } else { + // cannot draw gauge, return null + return null; } - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_dir').css(gaugeShadow(params.size)); - } + function update() { + var windSpd, windGst, range, tip, i, + rosePoints = 0, + roseMax = 0, + roseSectionAngle = 0, + roseAreas = []; - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } + cache.valueLatest = extractInteger(data.bearing); + cache.valueAverage = extractInteger(data.avgbearing); + cache.bearingFrom = extractInteger(data.BearingRangeFrom10); + cache.bearingTo = extractInteger(data.BearingRangeTo10); - function update() { - var windSpd, windGst, range, tip, i, - rosePoints = 0, - roseMax = 0, - roseSectionAngle = 0, - roseAreas = []; + ssGauge.setValueAnimatedAverage(+cache.valueAverage); + if (cache.valueAverage === 0) { + cache.valueLatest = 0; + } + ssGauge.setValueAnimatedLatest(+cache.valueLatest); - cache.valueLatest = extractInteger(data.bearing); - cache.valueAverage = extractInteger(data.avgbearing); - cache.bearingFrom = extractInteger(data.BearingRangeFrom10); - cache.bearingTo = extractInteger(data.BearingRangeTo10); - - ssGauge.setValueAnimatedAverage(+cache.valueAverage); - if (cache.valueAverage === 0) { - cache.valueLatest = 0; - } - ssGauge.setValueAnimatedLatest(+cache.valueLatest); - - if (config.showWindVariation) { - windSpd = +extractDecimal(data.wspeed); - windGst = +extractDecimal(data.wgust); - switch (data.windunit.toLowerCase()) { + if (config.showWindVariation) { + windSpd = +extractDecimal(data.wspeed); + windGst = +extractDecimal(data.wgust); + switch (data.windunit.toLowerCase()) { case 'mph': cache.avgKnots = 0.868976242 * windSpd; cache.gstKnots = 0.868976242 * windGst; @@ -1945,387 +1944,181 @@ gauges = (function () { cache.gstKnots = 0.539956803 * windGst; break; // no default - } - cache.avgKnots = Math.round(cache.avgKnots); - cache.gstKnots = Math.round(cache.gstKnots); - if (config.showWindMetar) { - ssGauge.VRB = ' - METAR: ' + ('0' + data.avgbearing).slice(-3) + ('0' + cache.avgKnots).slice(-2) + - 'G' + ('0' + cache.gstKnots).slice(-2) + 'KT '; + } + cache.avgKnots = Math.round(cache.avgKnots); + cache.gstKnots = Math.round(cache.gstKnots); + if (config.showWindMetar) { + ssGauge.VRB = ' - METAR: ' + ('0' + data.avgbearing).slice(-3) + ('0' + cache.avgKnots).slice(-2) + + 'G' + ('0' + cache.gstKnots).slice(-2) + 'KT '; + } else { + ssGauge.VRB = ''; + } + if (windSpd > 0) { + // If variation less than 60 degrees, then METAR = Steady + // Unless range = 0 and from/to direction = avg + 180 + range = (+cache.bearingTo < +cache.bearingFrom ? 360 + (+cache.bearingTo) : +cache.bearingTo) - (+cache.bearingFrom); + + if (cache.avgKnots < 3) { // Europe uses 3kts, USA 6kts as the threshold + if (config.showRoseOnDirGauge) { + ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.windVariationSector)]); + ssGauge.setSection([]); + } else { + ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.minMaxArea)]); + ssGauge.setArea([]); + } + } else if (config.showRoseOnDirGauge) { + ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.windVariationSector)]); + } else { + ssGauge.setSection([]); + ssGauge.setArea([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.minMaxArea)]); + } + if (config.showWindMetar) { + if ((range < 60 && range > 0) || range === 0 && cache.bearingFrom === cache.valueAverage) { + ssGauge.VRB += ' STDY'; + } else if (cache.avgKnots < 3) { // Europe uses 3kts, USA 6kts as the threshold + ssGauge.VRB += ' VRB'; + } else { + ssGauge.VRB += ' ' + cache.bearingFrom + 'V' + cache.bearingTo; + } + } + } else { + // Zero wind speed, calm + if (config.showWindMetar) { + ssGauge.VRB = ' - METAR: 00000KT'; + } + ssGauge.setSection([]); + if (!config.showRoseOnDirGauge) { + ssGauge.setArea([]); + } + } } else { ssGauge.VRB = ''; } - if (windSpd > 0) { - // If variation less than 60 degrees, then METAR = Steady - // Unless range = 0 and from/to direction = avg + 180 - range = (+cache.bearingTo < +cache.bearingFrom ? 360 + (+cache.bearingTo) : +cache.bearingTo) - (+cache.bearingFrom); - if (cache.avgKnots < 3) { // Europe uses 3kts, USA 6kts as the threshold - if (config.showRoseOnDirGauge) { - ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.windVariationSector)]); - ssGauge.setSection([]); - } else { - ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.minMaxArea)]); - ssGauge.setArea([]); - } - } else if (config.showRoseOnDirGauge) { - ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.windVariationSector)]); - } else { - ssGauge.setSection([]); - ssGauge.setArea([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.minMaxArea)]); - } - if (config.showWindMetar) { - if ((range < 60 && range > 0) || range === 0 && cache.bearingFrom === cache.valueAverage) { - ssGauge.VRB += ' STDY'; - } else if (cache.avgKnots < 3) { // Europe uses 3kts, USA 6kts as the threshold - ssGauge.VRB += ' VRB'; - } else { - ssGauge.VRB += ' ' + cache.bearingFrom + 'V' + cache.bearingTo; - } - } - } else { - // Zero wind speed, calm - if (config.showWindMetar) { - ssGauge.VRB = ' - METAR: 00000KT'; - } - ssGauge.setSection([]); - if (!config.showRoseOnDirGauge) { - ssGauge.setArea([]); - } - } - } else { - ssGauge.VRB = ''; - } - - // optional rose data on direction gauge - if (config.showRoseOnDirGauge && data.WindRoseData) { - // Process rose data - rosePoints = data.WindRoseData.length; - roseSectionAngle = 360 / rosePoints; - // Find total for all directions - for (i = 0; i < rosePoints; i++) { - roseMax = Math.max(roseMax, data.WindRoseData[i]); - } - // Check we actually have some data, bad things happen if roseMax=0! - if (roseMax > 0) { - // Find relative value for each point, and create a gauge area for it + // optional rose data on direction gauge + if (config.showRoseOnDirGauge && data.WindRoseData) { + // Process rose data + rosePoints = data.WindRoseData.length; + roseSectionAngle = 360 / rosePoints; + // Find total for all directions for (i = 0; i < rosePoints; i++) { - roseAreas[i] = steelseries.Section( - i * roseSectionAngle - roseSectionAngle / 2, - (i + 1) * roseSectionAngle - roseSectionAngle / 2, - 'rgba(' + gradient('2020D0', 'D04040', data.WindRoseData[i] / roseMax) + ',' + - (data.WindRoseData[i] / roseMax).toFixed(2) + ')' - ); + roseMax = Math.max(roseMax, data.WindRoseData[i]); } + // Check we actually have some data, bad things happen if roseMax=0! + if (roseMax > 0) { + // Find relative value for each point, and create a gauge area for it + for (i = 0; i < rosePoints; i++) { + roseAreas[i] = steelseries.Section( + i * roseSectionAngle - roseSectionAngle / 2, + (i + 1) * roseSectionAngle - roseSectionAngle / 2, + 'rgba(' + gradient('2020D0', 'D04040', data.WindRoseData[i] / roseMax) + ',' + + (data.WindRoseData[i] / roseMax).toFixed(2) + ')' + ); + } + } + ssGauge.setArea(roseAreas); + } + + if (ddimgtooltip.showTips) { + // update tooltip + tip = strings.latest_title + ' ' + strings.bearing_info + ': ' + cache.valueLatest + '° (' + getord(+cache.valueLatest) + ')' + + ssGauge.VRB + '
' + strings.tenminavg_web + ' ' + strings.bearing_info + ': ' + cache.valueAverage + '° (' + + getord(+cache.valueAverage) + '), ' + strings.dominant_bearing + ': ' + data.domwinddir; + if (!config.showRoseGauge) { + // Wind run is shown on the wind rose if it is available + tip += '
' + strings.windruntoday + ': ' + data.windrun + ' ' + displayUnits.windrun; + } + $('#imgtip7_txt').html(tip); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[7] !== null) { + $('#imgtip7_img').attr('src', config.imgPathURL + config.tipImgs[7] + cacheDefeat); } - ssGauge.setArea(roseAreas); } - if (ddimgtooltip.showTips) { - // update tooltip - tip = strings.latest_title + ' ' + strings.bearing_info + ': ' + cache.valueLatest + '° (' + getord(+cache.valueLatest) + ')' + - ssGauge.VRB + '
' + strings.tenminavg_web + ' ' + strings.bearing_info + ': ' + cache.valueAverage + '° (' + - getord(+cache.valueAverage) + '), ' + strings.dominant_bearing + ': ' + data.domwinddir; - if (!config.showRoseGauge) { - // Wind run is shown on the wind rose if it is available - tip += '
' + strings.windruntoday + ': ' + data.windrun + ' ' + displayUnits.windrun; - } - $('#imgtip7_txt').html(tip); - } - } // End of update() - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[7] !== null) { - $('#imgtip7_img').attr('src', config.imgPathURL + config.tipImgs[7] + cacheDefeat); - } - } + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } }; - } // End of init() + })(), - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), + // + // Singleton for the Wind Rose Gauge + // + singleRose = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge - // - // Singleton for the Wind Rose Gauge - // - singleRose = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge + var buffers = {}; // Stores references to the various canvas buffers + var cache = {}; // various parameters to store for the life time of gauge + var ctxRoseCanvas; // 2D context for the plotted gauge - var buffers = {}; // Stores references to the various canvas buffers - var cache = {}; // various parameters to store for the life time of gauge - var ctxRoseCanvas; // 2D context for the plotted gauge + cache.firstRun = true; + cache.odoDigits = 5; // Total number of odometer digits including the decimal - cache.firstRun = true; - cache.odoDigits = 5; // Total number of odometer digits including the decimal + function init() { + var div, roseCanvas; + // Get the context of the gauge canvas on the HTML page + if ($('#canvas_rose').length) { + cache.gaugeSize = Math.ceil($('#canvas_rose').width() * config.gaugeScaling); + cache.gaugeSize2 = cache.gaugeSize / 2; + cache.showOdo = config.showRoseGaugeOdo || false; - function init() { - var div, roseCanvas; - // Get the context of the gauge canvas on the HTML page - if ($('#canvas_rose').length) { - cache.gaugeSize = Math.ceil($('#canvas_rose').width() * config.gaugeScaling); - cache.gaugeSize2 = cache.gaugeSize / 2; - cache.showOdo = config.showRoseGaugeOdo || false; + cache.compassStrings = strings.compass; + cache.titleString = strings.windrose; + cache.gaugeOdoTitle = strings.km; - cache.compassStrings = strings.compass; - cache.titleString = strings.windrose; - cache.gaugeOdoTitle = strings.km; + // Create a hidden div to host the Rose plot + div = document.createElement('div'); + div.style.display = 'none'; + document.body.appendChild(div); - // Create a hidden div to host the Rose plot - div = document.createElement('div'); - div.style.display = 'none'; - document.body.appendChild(div); + // Calcuate the size of the gauge background and so the size of rose plot required + cache.plotSize = Math.floor(cache.gaugeSize * 0.68); + cache.plotSize2 = cache.plotSize / 2; - // Calcuate the size of the gauge background and so the size of rose plot required - cache.plotSize = Math.floor(cache.gaugeSize * 0.68); - cache.plotSize2 = cache.plotSize / 2; + // rose plot canvas buffer + buffers.plot = document.createElement('canvas'); + buffers.plot.width = cache.plotSize; + buffers.plot.height = cache.plotSize; + buffers.plot.id = 'rosePlot'; + buffers.ctxPlot = buffers.plot.getContext('2d'); + div.appendChild(buffers.plot); - // rose plot canvas buffer - buffers.plot = document.createElement('canvas'); - buffers.plot.width = cache.plotSize; - buffers.plot.height = cache.plotSize; - buffers.plot.id = 'rosePlot'; - buffers.ctxPlot = buffers.plot.getContext('2d'); - div.appendChild(buffers.plot); + // Create a steelseries gauge frame + buffers.frame = document.createElement('canvas'); + buffers.frame.width = cache.gaugeSize; + buffers.frame.height = cache.gaugeSize; + buffers.ctxFrame = buffers.frame.getContext('2d'); + steelseries.drawFrame( + buffers.ctxFrame, + gaugeGlobals.frameDesign, + cache.gaugeSize2, + cache.gaugeSize2, + cache.gaugeSize, + cache.gaugeSize + ); - // Create a steelseries gauge frame - buffers.frame = document.createElement('canvas'); - buffers.frame.width = cache.gaugeSize; - buffers.frame.height = cache.gaugeSize; - buffers.ctxFrame = buffers.frame.getContext('2d'); - steelseries.drawFrame( - buffers.ctxFrame, - gaugeGlobals.frameDesign, - cache.gaugeSize2, - cache.gaugeSize2, - cache.gaugeSize, - cache.gaugeSize - ); - - // Create a steelseries gauge background - buffers.background = document.createElement('canvas'); - buffers.background.width = cache.gaugeSize; - buffers.background.height = cache.gaugeSize; - buffers.ctxBackground = buffers.background.getContext('2d'); - steelseries.drawBackground( - buffers.ctxBackground, - gaugeGlobals.background, - cache.gaugeSize2, - cache.gaugeSize2, - cache.gaugeSize, - cache.gaugeSize - ); - - // Optional - add a background image - /* - if (g_imgSmall !== null) { - var drawSize = g_size * 0.831775; - var x = (g_size - drawSize) / 2; - buffers.ctxBackground.drawImage(g_imgSmall, x, x, cache.gaugeSize, cache.gaugeSize); - } - */ - // Add the compass points - drawCompassPoints(buffers.ctxBackground, cache.gaugeSize); - - // Create a steelseries gauge foreground - buffers.foreground = document.createElement('canvas'); - buffers.foreground.width = cache.gaugeSize; - buffers.foreground.height = cache.gaugeSize; - buffers.ctxForeground = buffers.foreground.getContext('2d'); - steelseries.drawForeground( - buffers.ctxForeground, - gaugeGlobals.foreground, - cache.gaugeSize, - cache.gaugeSize, - false - ); - - roseCanvas = document.getElementById('canvas_rose'); - ctxRoseCanvas = roseCanvas.getContext('2d'); - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_rose').css({ width: cache.gaugeSize + 'px', height: cache.gaugeSize + 'px' }); - } - // resize canvas on main page - roseCanvas.width = cache.gaugeSize; - roseCanvas.height = cache.gaugeSize; - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_rose').css(gaugeShadow(cache.gaugeSize)); - } - - // Render an empty gauge, looks better than just the shadow background and odometer ;) - // Paint the gauge frame - ctxRoseCanvas.drawImage(buffers.frame, 0, 0); - - // Paint the gauge background - ctxRoseCanvas.drawImage(buffers.background, 0, 0); - - // Paint the gauge foreground - ctxRoseCanvas.drawImage(buffers.foreground, 0, 0); - - // Create an odometer - if (cache.showOdo) { - cache.odoHeight = Math.ceil(cache.gaugeSize * 0.08); // Sets the size of the odometer - cache.odoWidth = Math.ceil(Math.floor(cache.odoHeight * 0.68) * cache.odoDigits); // 'Magic' number, do not alter - // Create a new canvas for the oodometer - buffers.Odo = document.createElement('canvas'); - $(buffers.Odo).attr({ - id: 'canvas_odo', - width: cache.odoWidth, - height: cache.odoHeight - }); - // Position it - $(buffers.Odo).attr('class', 'odo'); - // Insert it into the DOM before the Rose gauge - $(buffers.Odo).insertBefore('#canvas_rose'); - // Create the odometer - ssGauge = new steelseries.Odometer('canvas_odo', { - height: cache.odoHeight, - digits: cache.odoDigits - 1, - decimals: 1 - }); - } - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - cache.firstRun = false; - - function update() { - var rose, offset; - - if (ctxRoseCanvas && !cache.firstRun) { - // Clear the gauge - ctxRoseCanvas.clearRect(0, 0, cache.gaugeSize, cache.gaugeSize); - - // Clear the existing rose plot - buffers.ctxPlot.clearRect(0, 0, cache.plotSize, cache.plotSize); - - // Create a new rose plot - rose = new RGraph.Rose('rosePlot', data.WindRoseData); - rose.Set('chart.strokestyle', 'black'); - rose.Set('chart.background.axes.color', 'gray'); - rose.Set('chart.colors.alpha', 0.5); - rose.Set('chart.colors', ['Gradient(#408040:red:#7070A0)']); - rose.Set('chart.margin', Math.ceil(40 / data.WindRoseData.length)); - - rose.Set('chart.title', cache.titleString); - rose.Set('chart.title.size', Math.ceil(0.05 * cache.plotSize)); - rose.Set('chart.title.bold', false); - rose.Set('chart.title.color', gaugeGlobals.background.labelColor.getRgbColor()); - rose.Set('chart.gutter.top', 0.2 * cache.plotSize); - rose.Set('chart.gutter.bottom', 0.2 * cache.plotSize); - - rose.Set('chart.tooltips.effect', 'snap'); - rose.Set('chart.labels.axes', ''); - rose.Set('chart.background.circles', true); - rose.Set('chart.background.grid.spokes', 16); - rose.Set('chart.radius', cache.plotSize2); - rose.Draw(); - - // Add title to windrun odometer to the plot - if (cache.showOdo) { - drawOdoTitle(buffers.ctxPlot); - } - - // Paint the gauge frame - ctxRoseCanvas.drawImage(buffers.frame, 0, 0); - - // Paint the gauge background - ctxRoseCanvas.drawImage(buffers.background, 0, 0); - - // Paint the rose plot - offset = Math.floor(cache.gaugeSize2 - cache.plotSize2); - ctxRoseCanvas.drawImage(buffers.plot, offset, offset); - - // Paint the gauge foreground - ctxRoseCanvas.drawImage(buffers.foreground, 0, 0); - - // update the odometer - if (cache.showOdo) { - ssGauge.setValueAnimated(extractDecimal(data.windrun)); - } - - // update tooltip - if (ddimgtooltip.showTips) { - $('#imgtip10_txt').html( - strings.dominant_bearing + ': ' + data.domwinddir + '
' + - strings.windruntoday + ': ' + data.windrun + ' ' + displayUnits.windrun - ); - } - } - } // End of update() - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[10] !== null) { - $('#imgtip10_img').attr('src', config.imgPathURL + config.tipImgs[10] + cacheDefeat); - } - } - - // Helper function to put the compass points on the background - function drawCompassPoints(ctx, size) { - ctx.save(); - // set the font - ctx.font = 0.08 * size + 'px serif'; - ctx.strokeStyle = gaugeGlobals.background.labelColor.getRgbaColor(); - ctx.fillStyle = gaugeGlobals.background.labelColor.getRgbColor(); - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - - // Draw the compass points - for (var i = 0; i < 4; i++) { - ctx.translate(size / 2, size * 0.125); - ctx.fillText(cache.compassStrings[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(); - } - - function drawOdoTitle(ctx) { - ctx.save(); - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.font = 0.05 * cache.gaugeSize + 'px Arial,Verdana,sans-serif'; - ctx.strokeStyle = gaugeGlobals.background.labelColor.getRgbaColor(); - ctx.fillStyle = gaugeGlobals.background.labelColor.getRgbaColor(); - ctx.fillText(cache.gaugeOdoTitle, cache.plotSize2, cache.plotSize * 0.75, cache.plotSize * 0.5); - ctx.restore(); - } - - function setTitle(newTitle) { - cache.titleString = newTitle; - } - - function setOdoTitle(newTitle) { - cache.gaugeOdoTitle = newTitle; - } - - function setCompassStrings(newArray) { - cache.compassStrings = newArray; - if (!cache.firstRun) { - // Redraw the background + // Create a steelseries gauge background + buffers.background = document.createElement('canvas'); + buffers.background.width = cache.gaugeSize; + buffers.background.height = cache.gaugeSize; + buffers.ctxBackground = buffers.background.getContext('2d'); steelseries.drawBackground( buffers.ctxBackground, gaugeGlobals.background, @@ -2334,1293 +2127,1499 @@ gauges = (function () { cache.gaugeSize, cache.gaugeSize ); + + // Optional - add a background image + /* + if (g_imgSmall !== null) { + var drawSize = g_size * 0.831775; + var x = (g_size - drawSize) / 2; + buffers.ctxBackground.drawImage(g_imgSmall, x, x, cache.gaugeSize, cache.gaugeSize); + } + */ // Add the compass points drawCompassPoints(buffers.ctxBackground, cache.gaugeSize); - } - } - return { - update: update, - gauge: ssGauge, - drawCompassPoints: drawCompassPoints, - setTitle: setTitle, - setCompassStrings: setCompassStrings, - setOdoTitle: setOdoTitle - }; - } // End of init() - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), - - // - // Singleton for the UV-Index Gauge - // - singleUV = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters - - function init() { - var params = $.extend(true, {}, commonParams); - - // define UV start values - cache.value = 0.0001; - cache.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') - ]; - // Define value gradient for UV - cache.gradient = new steelseries.gradientWrapper(0, 16, - [0, 0.1, 0.19, 0.31, 0.45, 0.625, 1], - [ - new steelseries.rgbaColor(0, 200, 0, 1), - new steelseries.rgbaColor(0, 200, 0, 1), - new steelseries.rgbaColor(255, 255, 0, 1), - new steelseries.rgbaColor(248, 89, 0, 1), - new steelseries.rgbaColor(255, 0, 0, 1), - new steelseries.rgbaColor(255, 0, 144, 1), - new steelseries.rgbaColor(153, 140, 255, 1) - ] - ); - cache.useSections = false; - cache.useValueGradient = true; - - // create UV bargraph gauge - if ($('#canvas_uv').length) { - params.size = Math.ceil($('#canvas_uv').width() * config.gaugeScaling); - params.gaugeType = steelseries.GaugeType.TYPE3; - params.maxValue = gaugeGlobals.uvScaleDefMax; - params.titleString = strings.uv_title; - params.niceScale = false; - params.section = cache.sections; - params.useSectionColors = cache.useSections; - params.valueGradient = cache.gradient; - params.useValueGradient = cache.useValueGradient; - params.lcdDecimals = gaugeGlobals.uvLcdDecimals; - - ssGauge = new steelseries.RadialBargraph('canvas_uv', params); - ssGauge.setValue(cache.value); - - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_uv').css({ width: params.size + 'px', height: params.size + 'px' }); - } - - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_uv').css(gaugeShadow(params.size)); - } - - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - function update() { - var tip, indx; - - cache.value = extractDecimal(data.UV); - - if (+cache.value === 0) { - indx = 0; - } else if (cache.value < 2.5) { - indx = 1; - } else if (cache.value < 5.5) { - indx = 2; - } else if (cache.value < 7.5) { - indx = 3; - } else if (cache.value < 10.5) { - indx = 4; - } else { - indx = 5; - } - - cache.maxValue = Math.max(nextHighest(cache.value, 2), gaugeGlobals.uvScaleDefMax); - if (cache.maxValue !== ssGauge.getMaxValue()) { - ssGauge.setValue(0); - ssGauge.setMaxValue(cache.maxValue); - } - - cache.risk = strings.uv_levels[indx]; - cache.headLine = strings.uv_headlines[indx]; - cache.detail = strings.uv_details[indx]; - ssGauge.setUnitString(cache.risk); - ssGauge.setValueAnimated(cache.value); - - if (ddimgtooltip.showTips) { - // update tooltip - tip = '' + strings.uv_title + ': ' + cache.value + ' - ' + strings.solar_maxToday + ': ' + data.UVTH + '
'; - tip += '' + cache.headLine + '
'; - tip += cache.detail; - $('#imgtip8_txt').html(tip); - } - } // End of update() - - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[8] !== null) { - $('#imgtip8_img').attr('src', config.imgPathURL + config.tipImgs[8] + cacheDefeat); - } - } - - return { - update: update, - gauge: ssGauge - }; - } // End of init() - - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), - - // - // Singleton for the Solar Irradiation Gauge - // - singleSolar = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters - - function init() { - var params = $.extend(true, {}, commonParams); - - // define Solar start values - cache.value = 0.0001; - cache.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)') - ]; - - // create Solar gauge - if ($('#canvas_solar').length) { - params.size = Math.ceil($('#canvas_solar').width() * config.gaugeScaling); - params.section = cache.sections; - params.maxValue = gaugeGlobals.solarGaugeScaleMax; - params.titleString = strings.solar_title; - params.unitString = 'W/m\u00B2'; - params.niceScale = false; - params.thresholdVisible = false; - params.lcdDecimals = 0; - - if (config.showSunshineLed) { - params.userLedVisible = true; - params.userLedColor = steelseries.LedColor.YELLOW_LED; - } - - ssGauge = new steelseries.Radial('canvas_solar', params); - ssGauge.setValue(cache.value); - - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_solar').css({ width: params.size + 'px', height: params.size + 'px' }); - } - - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_solar').css(gaugeShadow(params.size)); - } - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - function update() { - var tip, percent; - - cache.value = +extractInteger(data.SolarRad); - cache.maxToday = extractInteger(data.SolarTM); - cache.currMaxValue = +extractInteger(data.CurrentSolarMax); - percent = (+cache.currMaxValue === 0 ? '--' : Math.round(+cache.value / +cache.currMaxValue * 100)); - - // Need to rescale the gauge? - cache.maxValue = Math.max(cache.value, cache.currMaxValue, cache.maxToday, gaugeGlobals.solarGaugeScaleMax); - cache.maxValue = nextHighest(cache.maxValue, 100); - if (cache.maxValue !== ssGauge.getMaxValue()) { - ssGauge.setValue(0); - ssGauge.setMaxValue(cache.maxValue); - } - - // Set a section (15% of maxScale wide) to show current theoretical max value - if (data.CurrentSolarMax !== 'N/A') { - ssGauge.setArea([ - // Sunshine threshold - steelseries.Section( - Math.max(cache.currMaxValue * gaugeGlobals.sunshineThresholdPct / 100, gaugeGlobals.sunshineThreshold), - cache.currMaxValue, - 'rgba(255,255,50,0.4)' - ), - // Over max threshold - steelseries.Section( - cache.currMaxValue, - Math.min(cache.currMaxValue + cache.maxValue * 0.15, cache.maxValue), - 'rgba(220,0,0,0.5)' - ) - ]); - } - - // Set the values - ssGauge.setMaxMeasuredValue(cache.maxToday); - ssGauge.setValueAnimated(cache.value); - - if (config.showSunshineLed) { - ssGauge.setUserLedOnOff( - percent !== '--' && - percent >= gaugeGlobals.sunshineThresholdPct && - +cache.value >= gaugeGlobals.sunshineThreshold + // Create a steelseries gauge foreground + buffers.foreground = document.createElement('canvas'); + buffers.foreground.width = cache.gaugeSize; + buffers.foreground.height = cache.gaugeSize; + buffers.ctxForeground = buffers.foreground.getContext('2d'); + steelseries.drawForeground( + buffers.ctxForeground, + gaugeGlobals.foreground, + cache.gaugeSize, + cache.gaugeSize, + false ); - } - if (ddimgtooltip.showTips) { - // update tooltip - tip = '' + strings.solar_title + ': ' + cache.value + ' W/m² - ' + - '' + percent + '% ' + strings.solar_ofMax + '
' + - strings.solar_currentMax + ': ' + cache.currMaxValue + ' W/m²'; - if (typeof data.SolarTM !== 'undefined') { - tip += '
' + strings.solar_maxToday + ': ' + cache.maxToday + ' W/m²'; + roseCanvas = document.getElementById('canvas_rose'); + ctxRoseCanvas = roseCanvas.getContext('2d'); + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_rose').css({width: cache.gaugeSize + 'px', height: cache.gaugeSize + 'px'}); + } + // resize canvas on main page + roseCanvas.width = cache.gaugeSize; + roseCanvas.height = cache.gaugeSize; + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_rose').css(gaugeShadow(cache.gaugeSize)); } - $('#imgtip9_txt').html(tip); - } - } // End of update() - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[9] !== null) { - $('#imgtip9_img').attr('src', config.imgPathURL + config.tipImgs[9] + cacheDefeat); + // Render an empty gauge, looks better than just the shadow background and odometer ;) + // Paint the gauge frame + ctxRoseCanvas.drawImage(buffers.frame, 0, 0); + + // Paint the gauge background + ctxRoseCanvas.drawImage(buffers.background, 0, 0); + + // Paint the gauge foreground + ctxRoseCanvas.drawImage(buffers.foreground, 0, 0); + + // Create an odometer + if (cache.showOdo) { + cache.odoHeight = Math.ceil(cache.gaugeSize * 0.08); // Sets the size of the odometer + cache.odoWidth = Math.ceil(Math.floor(cache.odoHeight * 0.68) * cache.odoDigits); // 'Magic' number, do not alter + // Create a new canvas for the oodometer + buffers.Odo = document.createElement('canvas'); + $(buffers.Odo).attr({ + id : 'canvas_odo', + width : cache.odoWidth, + height: cache.odoHeight + }); + // Position it + $(buffers.Odo).attr('class', 'odo'); + // Insert it into the DOM before the Rose gauge + $(buffers.Odo).insertBefore('#canvas_rose'); + // Create the odometer + ssGauge = new steelseries.Odometer('canvas_odo', { + height : cache.odoHeight, + digits : cache.odoDigits - 1, + decimals: 1 + }); + } + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); + } else { + // cannot draw gauge, return null + return null; } - } + + cache.firstRun = false; + + function update() { + var rose, offset; + + if (ctxRoseCanvas && !cache.firstRun) { + // Clear the gauge + ctxRoseCanvas.clearRect(0, 0, cache.gaugeSize, cache.gaugeSize); + + // Clear the existing rose plot + buffers.ctxPlot.clearRect(0, 0, cache.plotSize, cache.plotSize); + + // Create a new rose plot + rose = new RGraph.Rose('rosePlot', data.WindRoseData); + rose.Set('chart.strokestyle', 'black'); + rose.Set('chart.background.axes.color', 'gray'); + rose.Set('chart.colors.alpha', 0.5); + rose.Set('chart.colors', ['Gradient(#408040:red:#7070A0)']); + rose.Set('chart.margin', Math.ceil(40 / data.WindRoseData.length)); + + rose.Set('chart.title', cache.titleString); + rose.Set('chart.title.size', Math.ceil(0.05 * cache.plotSize)); + rose.Set('chart.title.bold', false); + rose.Set('chart.title.color', gaugeGlobals.background.labelColor.getRgbColor()); + rose.Set('chart.gutter.top', 0.2 * cache.plotSize); + rose.Set('chart.gutter.bottom', 0.2 * cache.plotSize); + + rose.Set('chart.tooltips.effect', 'snap'); + rose.Set('chart.labels.axes', ''); + rose.Set('chart.background.circles', true); + rose.Set('chart.background.grid.spokes', 16); + rose.Set('chart.radius', cache.plotSize2); + rose.Draw(); + + // Add title to windrun odometer to the plot + if (cache.showOdo) { + drawOdoTitle(buffers.ctxPlot); + } + + // Paint the gauge frame + ctxRoseCanvas.drawImage(buffers.frame, 0, 0); + + // Paint the gauge background + ctxRoseCanvas.drawImage(buffers.background, 0, 0); + + // Paint the rose plot + offset = Math.floor(cache.gaugeSize2 - cache.plotSize2); + ctxRoseCanvas.drawImage(buffers.plot, offset, offset); + + // Paint the gauge foreground + ctxRoseCanvas.drawImage(buffers.foreground, 0, 0); + + // update the odometer + if (cache.showOdo) { + ssGauge.setValueAnimated(extractDecimal(data.windrun)); + } + + // update tooltip + if (ddimgtooltip.showTips) { + $('#imgtip10_txt').html( + strings.dominant_bearing + ': ' + data.domwinddir + '
' + + strings.windruntoday + ': ' + data.windrun + ' ' + displayUnits.windrun + ); + } + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[10] !== null) { + $('#imgtip10_img').attr('src', config.imgPathURL + config.tipImgs[10] + cacheDefeat); + } + } + + // Helper function to put the compass points on the background + function drawCompassPoints(ctx, size) { + ctx.save(); + // set the font + ctx.font = 0.08 * size + 'px serif'; + ctx.strokeStyle = gaugeGlobals.background.labelColor.getRgbaColor(); + ctx.fillStyle = gaugeGlobals.background.labelColor.getRgbColor(); + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + + // Draw the compass points + for (var i = 0; i < 4; i++) { + ctx.translate(size / 2, size * 0.125); + ctx.fillText(cache.compassStrings[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(); + } + + function drawOdoTitle(ctx) { + ctx.save(); + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.font = 0.05 * cache.gaugeSize + 'px Arial,Verdana,sans-serif'; + ctx.strokeStyle = gaugeGlobals.background.labelColor.getRgbaColor(); + ctx.fillStyle = gaugeGlobals.background.labelColor.getRgbaColor(); + ctx.fillText(cache.gaugeOdoTitle, cache.plotSize2, cache.plotSize * 0.75, cache.plotSize * 0.5); + ctx.restore(); + } + + function setTitle(newTitle) { + cache.titleString = newTitle; + } + + function setOdoTitle(newTitle) { + cache.gaugeOdoTitle = newTitle; + } + + function setCompassStrings(newArray) { + cache.compassStrings = newArray; + if (!cache.firstRun) { + // Redraw the background + steelseries.drawBackground( + buffers.ctxBackground, + gaugeGlobals.background, + cache.gaugeSize2, + cache.gaugeSize2, + cache.gaugeSize, + cache.gaugeSize + ); + // Add the compass points + drawCompassPoints(buffers.ctxBackground, cache.gaugeSize); + } + } + + return { + update : update, + gauge : ssGauge, + drawCompassPoints: drawCompassPoints, + setTitle : setTitle, + setCompassStrings: setCompassStrings, + setOdoTitle : setOdoTitle + }; + } // End of init() return { - update: update, - gauge: ssGauge + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } }; - } // End of init() + })(), - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), + // + // Singleton for the UV-Index Gauge + // + singleUV = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters - // - // Singleton for the Cloudbase Gauge - // - singleCloudBase = (function () { - var instance; // Stores a reference to the Singleton - var ssGauge; // Stores a reference to the SS Gauge - var cache = {}; // Stores various config values and parameters + function init() { + var params = $.extend(true, {}, commonParams); - function init() { - var params = $.extend(true, {}, commonParams); + // define UV start values + cache.value = 0.0001; + cache.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') + ]; + // Define value gradient for UV + cache.gradient = new steelseries.gradientWrapper(0, 16, + [0, 0.1, 0.19, 0.31, 0.45, 0.625, 1], + [ + new steelseries.rgbaColor(0, 200, 0, 1), + new steelseries.rgbaColor(0, 200, 0, 1), + new steelseries.rgbaColor(255, 255, 0, 1), + new steelseries.rgbaColor(248, 89, 0, 1), + new steelseries.rgbaColor(255, 0, 0, 1), + new steelseries.rgbaColor(255, 0, 144, 1), + new steelseries.rgbaColor(153, 140, 255, 1) + ] + ); + cache.useSections = false; + cache.useValueGradient = true; - cache.sections = createCloudBaseSections(true); - cache.value = 0.0001; - cache.maxValue = gaugeGlobals.cloudScaleDefMaxm; + // create UV bargraph gauge + if ($('#canvas_uv').length) { + params.size = Math.ceil($('#canvas_uv').width() * config.gaugeScaling); + params.gaugeType = steelseries.GaugeType.TYPE3; + params.maxValue = gaugeGlobals.uvScaleDefMax; + params.titleString = strings.uv_title; + params.niceScale = false; + params.section = cache.sections; + params.useSectionColors = cache.useSections; + params.valueGradient = cache.gradient; + params.useValueGradient = cache.useValueGradient; + params.lcdDecimals = gaugeGlobals.uvLcdDecimals; - // create Cloud base radial gauge - if ($('#canvas_cloud').length) { - params.size = Math.ceil($('#canvas_cloud').width() * config.gaugeScaling); - params.section = cache.sections; - params.maxValue = cache.maxValue; - params.titleString = strings.cloudbase_title; - params.unitString = strings.metres; - params.thresholdVisible = false; - params.lcdDecimals = 0; + ssGauge = new steelseries.RadialBargraph('canvas_uv', params); + ssGauge.setValue(cache.value); - ssGauge = new steelseries.Radial('canvas_cloud', params); - ssGauge.setValue(cache.value); - - // over-ride CSS applied size? - if (config.gaugeScaling !== 1) { - $('#canvas_cloud').css({ width: params.size + 'px', height: params.size + 'px' }); - } - - // add a shadow to the gauge - if (config.showGaugeShadow) { - $('#canvas_cloud').css(gaugeShadow(params.size)); - } - // subscribe to data updates - $.subscribe('gauges.dataUpdated', update); - $.subscribe('gauges.graphUpdate', updateGraph); - } else { - // cannot draw gauge, return null - return null; - } - - function update() { - cache.value = extractInteger(data.cloudbasevalue); - - if (data.cloudbaseunit === 'm') { - // adjust metre gauge in jumps of 1000 metres, don't downscale during the session - cache.maxValue = Math.max(nextHighest(cache.value, 1000), gaugeGlobals.cloudScaleDefMaxm, cache.maxValue); - if (cache.value <= 1000 && config.roundCloudbaseVal) { - // and round the value to the nearest 10 m - cache.value = Math.round(cache.value / 10) * 10; - } else if (config.roundCloudbaseVal) { - // and round the value to the nearest 50 m - cache.value = Math.round(cache.value / 50) * 50; + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_uv').css({width: params.size + 'px', height: params.size + 'px'}); } + + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_uv').css(gaugeShadow(params.size)); + } + + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); } else { - // adjust feet gauge in jumps of 2000 ft, don't downscale during the session - cache.maxValue = Math.max(nextHighest(cache.value, 2000), gaugeGlobals.cloudScaleDefMaxft, cache.maxValue); - if (cache.value <= 2000 && config.roundCloudbaseVal) { - // and round the value to the nearest 50 ft - cache.value = Math.round(cache.value / 50) * 50; - } else if (config.roundCloudbaseVal) { - // and round the value to the nearest 100 ft - cache.value = Math.round(cache.value / 100) * 100; - } + // cannot draw gauge, return null + return null; } - if (cache.maxValue !== ssGauge.getMaxValue()) { - if (ssGauge.getMaxValue() > cache.maxValue) { - // Gauge currently showing more than our max (nice scale effct), - // so reset our max to match - cache.maxValue = ssGauge.getMaxValue(); + function update() { + var tip, indx; + + cache.value = extractDecimal(data.UV); + + if (+cache.value === 0) { + indx = 0; + } else if (cache.value < 2.5) { + indx = 1; + } else if (cache.value < 5.5) { + indx = 2; + } else if (cache.value < 7.5) { + indx = 3; + } else if (cache.value < 10.5) { + indx = 4; } else { - // Gauge scale is too low, increase it. - // First set the pointer back to zero so we get a nice animation + indx = 5; + } + + cache.maxValue = Math.max(nextHighest(cache.value, 2), gaugeGlobals.uvScaleDefMax); + if (cache.maxValue !== ssGauge.getMaxValue()) { ssGauge.setValue(0); - // and redraw the gauge with teh new scale ssGauge.setMaxValue(cache.maxValue); } - } - ssGauge.setValueAnimated(cache.value); - if (config.showPopupData) { - // static tooltip on cloud gauge - $('#imgtip11_txt').html('' + strings.cloudbase_popup_title + '
' + strings.cloudbase_popup_text); - } - } // End of update() + cache.risk = strings.uv_levels[indx]; + cache.headLine = strings.uv_headlines[indx]; + cache.detail = strings.uv_details[indx]; + ssGauge.setUnitString(cache.risk); + ssGauge.setValueAnimated(cache.value); - function updateGraph(evnt, cacheDefeat) { - if (config.tipImgs[11] !== null) { - $('#imgtip11_img').attr('src', config.imgPathURL + config.tipImgs[11] + cacheDefeat); + if (ddimgtooltip.showTips) { + // update tooltip + tip = '' + strings.uv_title + ': ' + cache.value + ' - ' + strings.solar_maxToday + ': ' + data.UVTH + '
'; + tip += '' + cache.headLine + '
'; + tip += cache.detail; + $('#imgtip8_txt').html(tip); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[8] !== null) { + $('#imgtip8_img').attr('src', config.imgPathURL + config.tipImgs[8] + cacheDefeat); + } } - } + + return { + update: update, + gauge : ssGauge + }; + } // End of init() return { - data: cache, - update: update, - gauge: ssGauge + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } }; - } // End of init() + })(), - return { - // Get the Singleton instance if one exists - // or create one if it doesn't - getInstance: function () { - if (!instance) { - instance = init(); - } - return instance; - } - }; - })(), + // + // Singleton for the Solar Irradiation Gauge + // + singleSolar = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters - // - // getRealtime() fetches the realtimegauges JSON data from the server - // - getRealtime = function () { - var url = config.realTimeURL; - if ($.active > 0 && undefined != jqXHR) { - // kill any outstanding requests - jqXHR.abort(); - } - if (config.longPoll) { - url += '?timestamp=' + timestamp; - } - jqXHR = $.ajax({ - url: url, - cache: (config.longPoll), - dataType: 'json', - timeout: config.longPoll ? (Math.min(config.realtimeInterval, 20) + 21) * 1000 : 21000 // 21 second time-out by default - }).done(function (data) { - checkRtResp(data); - }).fail(function (xhr, status, err) { - checkRtError(xhr, status, err); - }); - }, + function init() { + var params = $.extend(true, {}, commonParams); - // - // checkRtResp() called by the Ajax fetch once data has been downloaded - // - checkRtResp = function (response) { - var delay; - statusTimer.reset(config.longPoll ? 1 : config.realtimeInterval); - if (config.longPoll && response.status !== 'OK') { - checkRtError(null, 'PHP Error', response.status); - } else { - if (processData(response)) { - delay = ajaxDelay; - } else { - delay = 5; - } - if (delay > 0) { - downloadTimer = setTimeout(getRealtime, delay * 1000); - } else { - getRealtime(); - } - } - }, + // define Solar start values + cache.value = 0.0001; + cache.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)') + ]; - // - // checkRtError() called by the Ajax fetch if an error occurs during the fetching realtimegauges.txt - // - checkRtError = function (xhr, status, error) { - if (xhr == null || xhr.statusText !== 'abort') { - // Clear any existing download timer - clearTimeout(downloadTimer); - // Set the status LED to off - ledIndicator.setLedOnOff(false); - ledIndicator.setTitle(strings.led_title_unknown); - statusScroller.setText(status + ': ' + error); - // wait 5 seconds, then try again... - downloadTimer = setTimeout(getRealtime, 5000); - } - }, + // create Solar gauge + if ($('#canvas_solar').length) { + params.size = Math.ceil($('#canvas_solar').width() * config.gaugeScaling); + params.section = cache.sections; + params.maxValue = gaugeGlobals.solarGaugeScaleMax; + params.titleString = strings.solar_title; + params.unitString = 'W/m\u00B2'; + params.niceScale = false; + params.thresholdVisible = false; + params.lcdDecimals = 0; - // - // processData() massages the data returned in realtimegauges.txt, and posts a gauges.dataUpdated event to update the page - // - processData = function (dataObj) { - var str, dt, tm, today, now, then, tmp, elapsedMins, retVal; - // copy the realtime fields into the global 'data' object - if (config.longPoll) { - timestamp = dataObj.timestamp; - data = dataObj.data; - } else { - // normal polling - data = dataObj; - } + if (config.showSunshineLed) { + params.userLedVisible = true; + params.userLedColor = steelseries.LedColor.YELLOW_LED; + } - // and check we have the expected version number - if (typeof data.ver !== 'undefined' && data.ver >= realtimeVer) { - // manpulate the last rain time into something more friendly - try { - str = data.LastRainTipISO.split(' '); - dt = str[0].replace(/\//g, '-').split('-'); // WD uses dd/mm/yyyy, we use a '-' - tm = str[1].split(':'); - today = new Date(); - today.setHours(0, 0, 0, 0); - if (typeof data.dateFormat === 'undefined') { - data.dateFormat = 'y/m/d'; + ssGauge = new steelseries.Radial('canvas_solar', params); + ssGauge.setValue(cache.value); + + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_solar').css({width: params.size + 'px', height: params.size + 'px'}); + } + + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_solar').css(gaugeShadow(params.size)); + } + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); } else { - // frig for WD bug which leaves a trailing % character from the tag - data.dateFormat = data.dateFormat.replace('%', ''); + // cannot draw gauge, return null + return null; } - 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); + + function update() { + var tip, percent; + + cache.value = +extractInteger(data.SolarRad); + cache.maxToday = extractInteger(data.SolarTM); + cache.currMaxValue = +extractInteger(data.CurrentSolarMax); + percent = (+cache.currMaxValue === 0 ? '--' : Math.round(+cache.value / +cache.currMaxValue * 100)); + + // Need to rescale the gauge? + cache.maxValue = Math.max(cache.value, cache.currMaxValue, cache.maxToday, gaugeGlobals.solarGaugeScaleMax); + cache.maxValue = nextHighest(cache.maxValue, 100); + if (cache.maxValue !== ssGauge.getMaxValue()) { + ssGauge.setValue(0); + ssGauge.setMaxValue(cache.maxValue); + } + + // Set a section (15% of maxScale wide) to show current theoretical max value + if (data.CurrentSolarMax !== 'N/A') { + ssGauge.setArea([ + // Sunshine threshold + steelseries.Section( + Math.max(cache.currMaxValue * gaugeGlobals.sunshineThresholdPct / 100, gaugeGlobals.sunshineThreshold), + cache.currMaxValue, + 'rgba(255,255,50,0.4)' + ), + // Over max threshold + steelseries.Section( + cache.currMaxValue, + Math.min(cache.currMaxValue + cache.maxValue * 0.15, cache.maxValue), + 'rgba(220,0,0,0.5)' + ) + ]); + } + + // Set the values + ssGauge.setMaxMeasuredValue(cache.maxToday); + ssGauge.setValueAnimated(cache.value); + + if (config.showSunshineLed) { + ssGauge.setUserLedOnOff( + percent !== '--' && + percent >= gaugeGlobals.sunshineThresholdPct && + +cache.value >= gaugeGlobals.sunshineThreshold + ); + } + + if (ddimgtooltip.showTips) { + // update tooltip + tip = '' + strings.solar_title + ': ' + cache.value + ' W/m² - ' + + '' + percent + '% ' + strings.solar_ofMax + '
' + + strings.solar_currentMax + ': ' + cache.currMaxValue + ' W/m²'; + if (typeof data.SolarTM !== 'undefined') { + tip += '
' + strings.solar_maxToday + ': ' + cache.maxToday + ' W/m²'; + } + $('#imgtip9_txt').html(tip); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[9] !== null) { + $('#imgtip9_img').attr('src', config.imgPathURL + config.tipImgs[9] + cacheDefeat); + } } - if (then.getTime() >= today.getTime()) { - data.LastRained = strings.LastRainedT_info + ' ' + str[1]; - } else if (then.getTime() + 86400000 >= today.getTime()) { - data.LastRained = strings.LastRainedY_info + ' ' + str[1]; + + return { + update: update, + gauge : ssGauge + }; + } // End of init() + + return { + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } + }; + })(), + + // + // Singleton for the Cloudbase Gauge + // + singleCloudBase = (function () { + var instance; // Stores a reference to the Singleton + var ssGauge; // Stores a reference to the SS Gauge + var cache = {}; // Stores various config values and parameters + + function init() { + var params = $.extend(true, {}, commonParams); + + cache.sections = createCloudBaseSections(true); + cache.value = 0.0001; + cache.maxValue = gaugeGlobals.cloudScaleDefMaxm; + + // create Cloud base radial gauge + if ($('#canvas_cloud').length) { + params.size = Math.ceil($('#canvas_cloud').width() * config.gaugeScaling); + params.section = cache.sections; + params.maxValue = cache.maxValue; + params.titleString = strings.cloudbase_title; + params.unitString = strings.metres; + params.thresholdVisible = false; + params.lcdDecimals = 0; + + ssGauge = new steelseries.Radial('canvas_cloud', params); + ssGauge.setValue(cache.value); + + // over-ride CSS applied size? + if (config.gaugeScaling !== 1) { + $('#canvas_cloud').css({width: params.size + 'px', height: params.size + 'px'}); + } + + // add a shadow to the gauge + if (config.showGaugeShadow) { + $('#canvas_cloud').css(gaugeShadow(params.size)); + } + // subscribe to data updates + $.subscribe('gauges.dataUpdated', update); + $.subscribe('gauges.graphUpdate', updateGraph); } else { - data.LastRained = then.getDate().toString() + ' ' + strings.months[then.getMonth()] + ' ' + strings.at + ' ' + str[1]; + // cannot draw gauge, return null + return null; } - } catch (e) { - data.LastRained = data.LastRainTipISO; - } - if (data.tempunit.length > 1) { - // clean up temperature units - remove html encoded degree symbols - data.tempunit = data.tempunit.replace(/&\S*;/, '°'); // old Cumulus versions uses °, WeatherCat uses ° - } else { - // using new realtimegaugesT.txt with Cumulus > 1.9.2 - data.tempunit = '°' + data.tempunit; - } - // Check for station off-line - now = Date.now(); - 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 - ledIndicator.setLedColor(steelseries.LedColor.RED_LED); - ledIndicator.setTitle(strings.led_title_offline); - ledIndicator.blink(true); - 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; + function update() { + cache.value = extractInteger(data.cloudbasevalue); + + if (data.cloudbaseunit === 'm') { + // adjust metre gauge in jumps of 1000 metres, don't downscale during the session + cache.maxValue = Math.max(nextHighest(cache.value, 1000), gaugeGlobals.cloudScaleDefMaxm, cache.maxValue); + if (cache.value <= 1000 && config.roundCloudbaseVal) { + // and round the value to the nearest 10 m + cache.value = Math.round(cache.value / 10) * 10; + } else if (config.roundCloudbaseVal) { + // and round the value to the nearest 50 m + cache.value = Math.round(cache.value / 50) * 50; + } + } else { + // adjust feet gauge in jumps of 2000 ft, don't downscale during the session + cache.maxValue = Math.max(nextHighest(cache.value, 2000), gaugeGlobals.cloudScaleDefMaxft, cache.maxValue); + if (cache.value <= 2000 && config.roundCloudbaseVal) { + // and round the value to the nearest 50 ft + cache.value = Math.round(cache.value / 50) * 50; + } else if (config.roundCloudbaseVal) { + // and round the value to the nearest 100 ft + cache.value = Math.round(cache.value / 100) * 100; + } + } + + if (cache.maxValue !== ssGauge.getMaxValue()) { + if (ssGauge.getMaxValue() > cache.maxValue) { + // Gauge currently showing more than our max (nice scale effct), + // so reset our max to match + cache.maxValue = ssGauge.getMaxValue(); + } else { + // Gauge scale is too low, increase it. + // First set the pointer back to zero so we get a nice animation + ssGauge.setValue(0); + // and redraw the gauge with teh new scale + ssGauge.setMaxValue(cache.maxValue); + } + } + ssGauge.setValueAnimated(cache.value); + + if (config.showPopupData) { + // static tooltip on cloud gauge + $('#imgtip11_txt').html('' + strings.cloudbase_popup_title + '
' + strings.cloudbase_popup_text); + } + } // End of update() + + function updateGraph(evnt, cacheDefeat) { + if (config.tipImgs[11] !== null) { + $('#imgtip11_img').attr('src', config.imgPathURL + config.tipImgs[11] + cacheDefeat); + } + } + + return { + data : cache, + update: update, + gauge : ssGauge + }; + } // End of init() + + return { + // Get the Singleton instance if one exists + // or create one if it doesn't + getInstance: function () { + if (!instance) { + instance = init(); + } + return instance; + } + }; + })(), + + // + // getRealtime() fetches the realtimegauges JSON data from the server + // + getRealtime = function () { + var url = config.realTimeURL; + if ($.active > 0 && undefined != jqXHR) { + // kill any outstanding requests + jqXHR.abort(); + } + if (config.longPoll) { + url += '?timestamp=' + timestamp; + } + jqXHR = $.ajax({ + url : url, + cache : (config.longPoll), + dataType: 'json', + timeout : config.longPoll ? (Math.min(config.realtimeInterval, 20) + 21) * 1000 : 21000 // 21 second time-out by default + }).done(function (data) { + checkRtResp(data); + }).fail(function (xhr, status, err) { + checkRtError(xhr, status, err); + }); + }, + + // + // checkRtResp() called by the Ajax fetch once data has been downloaded + // + checkRtResp = function (response) { + var delay; + statusTimer.reset(config.longPoll ? 1 : config.realtimeInterval); + if (config.longPoll && response.status !== 'OK') { + checkRtError(null, 'PHP Error', response.status); + } else { + if (processData(response)) { + delay = ajaxDelay; } else { - // days ago! - tm = Math.floor(elapsedMins / (60 * 24)).toString() + ' ' + strings.StatusDaysAgo; + delay = 5; } - data.forecast = strings.led_title_offline + ' ' + strings.StatusLastUpdate + ' ' + tm; - } else if (+data.SensorContactLost === 1) { - // Fine Offset sensor status - ledIndicator.setLedColor(steelseries.LedColor.RED_LED); - ledIndicator.setTitle(strings.led_title_lost); - ledIndicator.blink(true); - data.forecast = strings.led_title_lost; - } else { - ledIndicator.setLedColor(steelseries.LedColor.GREEN_LED); - ledIndicator.setTitle(strings.led_title_ok + '. ' + strings.StatusLastUpdate + ': ' + data.date); - ledIndicator.blink(false); - ledIndicator.setLedOnOff(true); - } - - // de-encode the forecast string if required (Cumulus support for extended characters) - data.forecast = $('
').html(data.forecast).text(); - data.forecast = data.forecast.trim(); - - data.pressunit = data.pressunit.trim(); // WView sends ' in', ' mb', or ' hPa' - if (data.pressunit === 'in') { // Cumulus and WView send 'in' - data.pressunit = 'inHg'; - } - - data.windunit = data.windunit.trim(); // WView sends ' kmh' etc - data.windunit = data.windunit.toLowerCase(); // WeatherCat sends "MPH" - if (data.windunit === 'knots') { // WeatherCat/weewx send "Knots", we use "kts" - data.windunit = 'kts'; - } - - if (data.windunit === 'kmh' || data.windunit === 'kph') { // WD wind unit omits '/', weewx sends 'kph' - data.windunit = 'km/h'; - } - - data.rainunit = data.rainunit.trim(); // WView sends ' mm' etc - - // take a look at the cloud base data... - // change WeatherCat units from Metres/Feet to m/ft - try { - if (data.cloudbaseunit.toLowerCase() === 'metres') { - data.cloudbaseunit = 'm'; - } else if (data.cloudbaseunit.toLowerCase() === 'feet') { - data.cloudbaseunit = 'ft'; - } - } catch (e) { - data.cloudbaseunit = ''; - } - if (config.showCloudGauge && ( - (config.weatherProgram === 4 || config.weatherProgram === 5) || - data.cloudbasevalue === '')) { - // WeatherCat and VWS (and WView?) do not provide a cloud base value, so we have to calculate it... - // assume if the station uses an imperial wind speed they want cloud base in feet, otherwise metres - data.cloudbaseunit = (data.windunit === 'mph' || data.windunit === 'kts') ? 'ft' : 'm'; - data.cloudbasevalue = calcCloudbase(data.temp, data.tempunit, data.dew, data.cloudbaseunit); - } - - // Temperature data conversion for display required? - if (data.tempunit[1] !== displayUnits.temp && userUnitsSet) { - // temp needs converting - if (data.tempunit[1] === 'C') { - convTempData(c2f); + if (delay > 0) { + downloadTimer = setTimeout(getRealtime, delay * 1000); } else { - convTempData(f2c); + getRealtime(); } - } else if (firstRun) { - displayUnits.temp = data.tempunit[1]; - 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); + // + // checkRtError() called by the Ajax fetch if an error occurs during the fetching realtimegauges.txt + // + checkRtError = function (xhr, status, error) { + if (xhr == null || xhr.statusText !== 'abort') { + // Clear any existing download timer + clearTimeout(downloadTimer); + // Set the status LED to off + ledIndicator.setLedOnOff(false); + ledIndicator.setTitle(strings.led_title_unknown); + statusScroller.setText(status + ': ' + error); + // wait 5 seconds, then try again... + downloadTimer = setTimeout(getRealtime, 5000); } + }, - // Wind data conversion for display required? - if (data.windunit !== displayUnits.wind && userUnitsSet) { - // wind 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); - } - - // Cloud height data conversion for display required? - if (data.cloudbaseunit !== displayUnits.cloud && userUnitsSet) { - // Cloud height needs converting - convCloudBaseData(displayUnits.cloud === 'm' ? ft2m : m2ft); - } else if (firstRun) { - displayUnits.cloud = data.cloudbaseunit; - setRadioCheck('rad_unitsCloud', displayUnits.cloud); - } - - statusScroller.setText(data.forecast); - - // first time only, setup units etc - if (firstRun) { - doFirst(); - } - - // publish the update, use the shared data object rather than transferring it - $.publish('gauges.dataUpdated', {}); - - retVal = true; - } else { - // set an error message - if (data.ver < realtimeVer) { - statusTimer.setValue(0); - statusScroller.setText('Your ' + config.realTimeURL.substr(config.realTimeURL.lastIndexOf('/') + 1) + ' file template needs updating!'); - return false; + // + // processData() massages the data returned in realtimegauges.txt, and posts a gauges.dataUpdated event to update the page + // + processData = function (dataObj) { + var str, dt, tm, today, now, then, tmp, elapsedMins, retVal; + // copy the realtime fields into the global 'data' object + if (config.longPoll) { + timestamp = dataObj.timestamp; + data = dataObj.data; } else { - // oh-oh! The number of data fields isn't what we expected - statusScroller.setText(strings.realtimeCorrupt); + // normal polling + data = dataObj; } - ledIndicator.setLedOnOff(false); - ledIndicator.setTitle(strings.led_title_unknown); - retVal = false; - } - return retVal; - }, - - // - // pagetimeout() called once every config.pageUpdateLimit minutes to stop updates and prevent page 'sitters' - // - pageTimeout = function () { - statusScroller.setText(strings.StatusPageLimit); - ledIndicator.setLedColor(steelseries.LedColor.RED_LED); - ledIndicator.setTitle(strings.StatusPageLimit); - ledIndicator.blink(true); - ledIndicator.setTitle(strings.StatusTimeout); - - // stop any pending download - clearTimeout(downloadTimer); - - // stop any long polling in progress - if ($.active > 0) { - jqXHR.abort(); - } - - // stop the clock - clearInterval(tickTockInterval); - - // clear the timer display - statusTimer.setValue(0); - - // set an onclick event on the LED to restart everything - $('#canvas_led').click( - function click() { - // disable the onClick event again - $('#canvas_led').unbind('click'); - // reset the timer count to 1 - statusTimer.reset(1); - // restart the timer to update the status time - tickTockInterval = setInterval( - function tick() { - $.publish('gauges.clockTick', null); - }, - 1000 - ); - - // restart the page timeout timer, so we hit this code again - setTimeout(pageTimeout, config.pageUpdateLimit * 60 * 1000); - - // refresh the page data - getRealtime(); - } - ); - }, - - // - // doFirst() called by doUpdate() the first time the page is updated to set-up various things that are - // only known when the realtimegauges.txt data is available - // - doFirst = function () { - var cacheDefeat = '?' + (new Date()).getTime().toString(); - - if (data.tempunit[1] === 'F') { - displayUnits.temp = 'F'; - setRadioCheck('rad_unitsTemp', 'F'); - setTempUnits(false); - } - - if (data.pressunit !== 'hPa') { - displayUnits.press = data.pressunit; - setRadioCheck('rad_unitsPress', data.pressunit); - setBaroUnits(data.pressunit); - } - - if (data.windunit !== 'km/h') { - displayUnits.wind = data.windunit; - setRadioCheck('rad_unitsWind', data.windunit); - setWindUnits(data.windunit); - } - - if (data.rainunit !== 'mm') { - displayUnits.rain = data.rainunit; - setRadioCheck('rad_unitsRain', data.rainunit); - setRainUnits(false); - } - - if (config.showSolarGauge && typeof data.SolarTM !== 'undefined' && gaugeSolar) { - gaugeSolar.gauge.setMaxMeasuredValueVisible(true); - } - - if (config.showCloudGauge && data.cloudbaseunit !== 'm') { - displayUnits.cloud = data.cloudbaseunit; - setRadioCheck('rad_unitsCloud', data.cloudbaseunit); - setCloudBaseUnits(false); - } - - // set the script version on the page - $('#scriptVer').html(config.scriptVer); - // set the version information from the station - $('#programVersion').html(data.version); - $('#programBuild').html(data.build); - $('#programName').html(programLink[config.weatherProgram]); - - 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_"]'); - // Are we running on a phone device (or really low res screen)? - if ($(window).width() < 480) { - $('.ddimgtooltip').filter(':hidden').width('200px'); - } - } - - if (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); - if (gaugeDew) { - $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][gaugeDew.data.popupImg] + 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); - $('#imgtip11_img').attr('src', config.imgPathURL + config.tipImgs[11] + cacheDefeat); - // start a timer for popup graphic updates - setInterval( - function timeout() { - $.publish('gauges.graphUpdate', '?' + (new Date()).getTime().toString()); - }, - config.graphUpdateTime * 60 * 1000 - ); - } - - firstRun = false; - }, - - // - // createTempSections() creates an array of gauge sections appropriate for Celsius or Fahrenheit 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 - < 0.001 - 0.001 to 0.05 - 0.05 to 0.20 - 0.20 to 0.60 - 0.60 to 2.0 - > 2.0 - */ - createRainRateSections = function (metric) { - var factor = metric ? 1 : 1 / 25; - return [ - steelseries.Section(0, 0.25 * factor, 'rgba(0, 140, 0, 0.5)'), - steelseries.Section(0.25 * factor, 1 * factor, 'rgba(80, 192, 80, 0.5)'), - steelseries.Section(1 * factor, 4 * factor, 'rgba(150, 203, 150, 0.5)'), - steelseries.Section(4 * factor, 16 * factor, 'rgba(212, 203, 109, 0.5)'), - steelseries.Section(16 * factor, 50 * factor, 'rgba(225, 155, 105, 0.5)'), - steelseries.Section(50 * factor, 1000 * factor, 'rgba(245, 86, 59, 0.5)') - ]; - }, - - // - // createRainFallSections()returns an array of section highlights for total rainfall in mm or inches - // - createRainfallSections = function (metric) { - var factor = metric ? 1 : 1 / 25; - return [ - steelseries.Section(0, 5 * factor, 'rgba(0, 250, 0, 1)'), - steelseries.Section(5 * factor, 10 * factor, 'rgba(0, 250, 117, 1)'), - steelseries.Section(10 * factor, 25 * factor, 'rgba(218, 246, 0, 1)'), - steelseries.Section(25 * factor, 40 * factor, 'rgba(250, 186, 0, 1)'), - steelseries.Section(40 * factor, 50 * factor, 'rgba(250, 95, 0, 1)'), - steelseries.Section(50 * factor, 65 * factor, 'rgba(250, 0, 0, 1)'), - steelseries.Section(65 * factor, 75 * factor, 'rgba(250, 6, 80, 1)'), - steelseries.Section(75 * factor, 100 * factor, 'rgba(205, 18, 158, 1)'), - steelseries.Section(100 * factor, 125 * factor, 'rgba(0, 0, 250, 1)'), - steelseries.Section(125 * factor, 500 * factor, 'rgba(0, 219, 212, 1)') - ]; - }, - - // - // createRainfallGradient() returns an array of SS colours for continuous 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) - ] - ); - return grad; - }, - - // - // createClousBaseSections() returns an array of section highlights for the Cloud Base gauge - // - createCloudBaseSections = function (metric) { - var section; - if (metric) { - section = [ - steelseries.Section(0, 150, 'rgba(245, 86, 59, 0.5)'), - steelseries.Section(150, 300, 'rgba(225, 155, 105, 0.5)'), - steelseries.Section(300, 750, 'rgba(212, 203, 109, 0.5)'), - steelseries.Section(750, 1000, 'rgba(150, 203, 150, 0.5)'), - steelseries.Section(1000, 1500, 'rgba(80, 192, 80, 0.5)'), - steelseries.Section(1500, 2500, 'rgba(0, 140, 0, 0.5)'), - steelseries.Section(2500, 5500, 'rgba(19, 103, 186, 0.5)') - ]; - } else { - section = [ - steelseries.Section(0, 500, 'rgba(245, 86, 59, 0.5)'), - steelseries.Section(500, 1000, 'rgba(225, 155, 105, 0.5)'), - steelseries.Section(1000, 2500, 'rgba(212, 203, 109, 0.5)'), - steelseries.Section(2500, 3500, 'rgba(150, 203, 150, 0.5)'), - steelseries.Section(3500, 5500, 'rgba(80, 192, 80, 0.5)'), - steelseries.Section(5500, 8500, 'rgba(0, 140, 0, 0.5)'), - steelseries.Section(8500, 18000, 'rgba(19, 103, 186, 0.5)') - ]; - } - return section; - }, - - // - // --------------- 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 + 11.25) / 22.5) % 16]); - } - }, - - // - // getUrlParam() extracts the named parameter from the current page URL - // - getUrlParam = function (paramName) { - var name, regexS, regex, results; - name = paramName.replace(/(\[|\])/g, '\\$1'); - regexS = '[\\?&]' + name + '=([^&#]*)'; - 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, errVal) { - try { - return (/[-+]?[0-9]+\.?[0-9]*/).exec(str.replace(',', '.'))[0]; - } catch (e) { - // error condition - return errVal || -9999; - } - }, - - // - // extractInteger() returns an integer from a string - // it ignores any text such as pre/appended units - // - extractInteger = function (str, errVal) { - try { - return (/[-+]?[0-9]+/).exec(str)[0]; - } catch (e) { - // error condition - return errVal || -9999; - } - }, - - // - // 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 Celsius - var val = trend * 3 * (units[1] === 'C' ? 1 : (5 / 9)), - ret; - if (trend === -9999) { - ret = (bTxt ? '--' : trend); - } else 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) { - 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 === 'inHg') { - val *= 33.8639; - } else if (units === 'kPa') { - val *= 10; - // assume everything else is hPa or mb, could be dangerous! - } - if (trend === -9999) { - ret = (bTxt ? '--' : trend); - } else 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 (deflt) { - return Math.min( - extractDecimal(data.tempTL, deflt), - extractDecimal(data.dewpointTL, deflt), - extractDecimal(data.apptempTL, deflt), - extractDecimal(data.feelslikeTL, deflt), - extractDecimal(data.wchillTL, deflt)); - }, - - // - // getMaxTemp() returns the highest temperature today for gauge scaling - // - getMaxTemp = function (deflt) { - return Math.max( - extractDecimal(data.tempTH, deflt), - extractDecimal(data.apptempTH, deflt), - extractDecimal(data.feelslikeTH, deflt), - extractDecimal(data.heatindexTH, deflt), - extractDecimal(data.humidex, deflt)); - }, - - // Celsius to Fahrenheit - c2f = function (val) { - return (extractDecimal(val) * 9 / 5 + 32).toFixed(1); - }, - // Fahrenheit to Celsius - f2c = function (val) { - return ((extractDecimal(val) - 32) * 5 / 9).toFixed(1); - }, - // kph to ms - kmh2ms = function (val) { - return (extractDecimal(val) * 0.2778).toFixed(1); - }, - // ms to kph - ms2kmh = function (val) { - return (extractDecimal(val) * 3.6).toFixed(1); - }, - kmh2ms = 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) * 1.609344).toFixed(1); - }, - // nautical miles to km - nmiles2km = function (val) { - return (extractDecimal(val) * 1.85200).toFixed(1); - }, - // km to miles - km2miles = function (val) { - return (extractDecimal(val) / 1.609344).toFixed(1); - }, - // km to nautical miles - km2nmiles = function (val) { - return (extractDecimal(val) / 1.85200).toFixed(1); - }, - // hPa to inHg (@0°C) - hpa2inhg = function (val, decimals) { - return (extractDecimal(val) * 0.029528744).toFixed(decimals || 3); - }, - // inHg to hPa (@0°C) - inhg2hpa = function (val) { - return (extractDecimal(val) / 0.029528744).toFixed(1); - }, - // kPa to hPa - kpa2hpa = function (val) { - return (extractDecimal(val) * 10).toFixed(1); - }, - // hPa to kPa - hpa2kpa = function (val, decimals) { - return (extractDecimal(val) / 10).toFixed(decimals || 2); - }, - // m to ft - m2ft = function (val) { - return (val * 3.2808399).toFixed(0); - }, - // ft to m - ft2m = function (val) { - return (val / 3.2808399).toFixed(0); - }, - - // - // setCookie() writes the 'obj' in cookie 'name' for persistent 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 persistent 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) { + // and check we have the expected version number + if (typeof data.ver !== 'undefined' && data.ver >= realtimeVer) { + // manpulate the last rain time into something more friendly try { - y = decodeURIComponent(x[1]); + str = data.LastRainTipISO.split(' '); + dt = str[0].replace(/\//g, '-').split('-'); // WD uses dd/mm/yyyy, we use a '-' + tm = str[1].split(':'); + today = new Date(); + today.setHours(0, 0, 0, 0); + if (typeof data.dateFormat === 'undefined') { + data.dateFormat = 'y/m/d'; + } 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() + 86400000 >= 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) { - y = x[1]; + data.LastRained = data.LastRainTipISO; } - ret = JSON.parse(unescape(y)); - break; + if (data.tempunit.length > 1) { + // clean up temperature units - remove html encoded degree symbols + data.tempunit = data.tempunit.replace(/&\S*;/, '°'); // old Cumulus versions uses °, WeatherCat uses ° + } else { + // using new realtimegaugesT.txt with Cumulus > 1.9.2 + data.tempunit = '°' + data.tempunit; + } + + // Check for station off-line + now = Date.now(); + 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 + ledIndicator.setLedColor(steelseries.LedColor.RED_LED); + ledIndicator.setTitle(strings.led_title_offline); + ledIndicator.blink(true); + 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; + } + data.forecast = strings.led_title_offline + ' ' + strings.StatusLastUpdate + ' ' + tm; + } else if (+data.SensorContactLost === 1) { + // Fine Offset sensor status + ledIndicator.setLedColor(steelseries.LedColor.RED_LED); + ledIndicator.setTitle(strings.led_title_lost); + ledIndicator.blink(true); + data.forecast = strings.led_title_lost; + } else { + ledIndicator.setLedColor(steelseries.LedColor.GREEN_LED); + ledIndicator.setTitle(strings.led_title_ok + '. ' + strings.StatusLastUpdate + ': ' + data.date); + ledIndicator.blink(false); + ledIndicator.setLedOnOff(true); + } + + // de-encode the forecast string if required (Cumulus support for extended characters) + data.forecast = $('
').html(data.forecast).text(); + data.forecast = data.forecast.trim(); + + data.pressunit = data.pressunit.trim(); // WView sends ' in', ' mb', or ' hPa' + if (data.pressunit === 'in') { // Cumulus and WView send 'in' + data.pressunit = 'inHg'; + } + + data.windunit = data.windunit.trim(); // WView sends ' kmh' etc + data.windunit = data.windunit.toLowerCase(); // WeatherCat sends "MPH" + if (data.windunit === 'knots') { // WeatherCat/weewx send "Knots", we use "kts" + data.windunit = 'kts'; + } + + if (data.windunit === 'kmh' || data.windunit === 'kph') { // WD wind unit omits '/', weewx sends 'kph' + data.windunit = 'km/h'; + } + + data.rainunit = data.rainunit.trim(); // WView sends ' mm' etc + + // take a look at the cloud base data... + // change WeatherCat units from Metres/Feet to m/ft + try { + if (data.cloudbaseunit.toLowerCase() === 'metres') { + data.cloudbaseunit = 'm'; + } else if (data.cloudbaseunit.toLowerCase() === 'feet') { + data.cloudbaseunit = 'ft'; + } + } catch (e) { + data.cloudbaseunit = ''; + } + if (config.showCloudGauge && ( + (config.weatherProgram === 4 || config.weatherProgram === 5) || + data.cloudbasevalue === '')) { + // WeatherCat and VWS (and WView?) do not provide a cloud base value, so we have to calculate it... + // assume if the station uses an imperial wind speed they want cloud base in feet, otherwise metres + data.cloudbaseunit = (data.windunit === 'mph' || data.windunit === 'kts') ? 'ft' : 'm'; + data.cloudbasevalue = calcCloudbase(data.temp, data.tempunit, data.dew, data.cloudbaseunit); + } + + // Temperature data conversion for display required? + if (data.tempunit[1] !== displayUnits.temp && userUnitsSet) { + // temp needs converting + if (data.tempunit[1] === 'C') { + convTempData(c2f); + } else { + convTempData(f2c); + } + } else if (firstRun) { + displayUnits.temp = data.tempunit[1]; + 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) { + // wind 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); + } + + // Cloud height data conversion for display required? + if (data.cloudbaseunit !== displayUnits.cloud && userUnitsSet) { + // Cloud height needs converting + convCloudBaseData(displayUnits.cloud === 'm' ? ft2m : m2ft); + } else if (firstRun) { + displayUnits.cloud = data.cloudbaseunit; + setRadioCheck('rad_unitsCloud', displayUnits.cloud); + } + + statusScroller.setText(data.forecast); + + // first time only, setup units etc + if (firstRun) { + doFirst(); + } + + // publish the update, use the shared data object rather than transferring it + $.publish('gauges.dataUpdated', {}); + + retVal = true; + } else { + // set an error message + if (data.ver < realtimeVer) { + statusTimer.setValue(0); + statusScroller.setText('Your ' + config.realTimeURL.substr(config.realTimeURL.lastIndexOf('/') + 1) + ' file template needs updating!'); + return false; + } else { + // oh-oh! The number of data fields isn't what we expected + statusScroller.setText(strings.realtimeCorrupt); + } + ledIndicator.setLedOnOff(false); + ledIndicator.setTitle(strings.led_title_unknown); + + retVal = false; } - } - return ret; - }, + return retVal; + }, - // - // setRadioCheck() sets the desired value of the HTML radio buttons to be selected - // - setRadioCheck = function (obj, val) { - $('input:radio[name="' + obj + '"]').filter('[value="' + val + '"]').prop('checked', true); - }, + // + // pagetimeout() called once every config.pageUpdateLimit minutes to stop updates and prevent page 'sitters' + // + pageTimeout = function () { + statusScroller.setText(strings.StatusPageLimit); + ledIndicator.setLedColor(steelseries.LedColor.RED_LED); + ledIndicator.setTitle(strings.StatusPageLimit); + ledIndicator.blink(true); + ledIndicator.setTitle(strings.StatusTimeout); - // - // 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.feelslike = convFunc(data.feelslike); - data.feelslikeTH = convFunc(data.feelslikeTH); - data.feelslikeTL = convFunc(data.feelslikeTL); - 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); - if (data.intempTL && data.intempTH) { - data.intempTL = convFunc(data.intempTL); - data.intempTH = convFunc(data.intempTH); - } - data.temp = convFunc(data.temp); - 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'; - } - }, + // stop any pending download + clearTimeout(downloadTimer); - // - // 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.hourlyrainTH = convFunc(data.hourlyrainTH); - data.rainunit = convFunc === mm2in ? 'in' : 'mm'; - }, + // stop any long polling in progress + if ($.active > 0) { + jqXHR.abort(); + } - // - // convWindData() converts all the wind values using the supplied conversion function - // - convWindData = function (from, to) { - var fromFunc1, toFunc1, - fromFunc2, toFunc2, - dummy = function (val) { - return val; - }; + // stop the clock + clearInterval(tickTockInterval); - // convert to km/h & km - switch (from) { + // clear the timer display + statusTimer.setValue(0); + + // set an onclick event on the LED to restart everything + $('#canvas_led').click( + function click() { + // disable the onClick event again + $('#canvas_led').unbind('click'); + // reset the timer count to 1 + statusTimer.reset(1); + // restart the timer to update the status time + tickTockInterval = setInterval( + function tick() { + $.publish('gauges.clockTick', null); + }, + 1000 + ); + + // restart the page timeout timer, so we hit this code again + setTimeout(pageTimeout, config.pageUpdateLimit * 60 * 1000); + + // refresh the page data + getRealtime(); + } + ); + }, + + // + // doFirst() called by doUpdate() the first time the page is updated to set-up various things that are + // only known when the realtimegauges.txt data is available + // + doFirst = function () { + var cacheDefeat = '?' + (new Date()).getTime().toString(); + + if (data.tempunit[1] === 'F') { + displayUnits.temp = 'F'; + setRadioCheck('rad_unitsTemp', 'F'); + setTempUnits(false); + } + + if (data.pressunit !== 'hPa') { + displayUnits.press = data.pressunit; + setRadioCheck('rad_unitsPress', data.pressunit); + setBaroUnits(data.pressunit); + } + + if (data.windunit !== 'km/h') { + displayUnits.wind = data.windunit; + setRadioCheck('rad_unitsWind', data.windunit); + setWindUnits(data.windunit); + } + + if (data.rainunit !== 'mm') { + displayUnits.rain = data.rainunit; + setRadioCheck('rad_unitsRain', data.rainunit); + setRainUnits(false); + } + + if (config.showSolarGauge && typeof data.SolarTM !== 'undefined' && gaugeSolar) { + gaugeSolar.gauge.setMaxMeasuredValueVisible(true); + } + + if (config.showCloudGauge && data.cloudbaseunit !== 'm') { + displayUnits.cloud = data.cloudbaseunit; + setRadioCheck('rad_unitsCloud', data.cloudbaseunit); + setCloudBaseUnits(false); + } + + // set the script version on the page + $('#scriptVer').html(config.scriptVer); + // set the version information from the station + $('#programVersion').html(data.version); + $('#programBuild').html(data.build); + $('#programName').html(programLink[config.weatherProgram]); + + 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_"]'); + // Are we running on a phone device (or really low res screen)? + if ($(window).width() < 480) { + $('.ddimgtooltip').filter(':hidden').width('200px'); + } + } + + if (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); + if (gaugeDew) { + $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][gaugeDew.data.popupImg] + 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); + $('#imgtip11_img').attr('src', config.imgPathURL + config.tipImgs[11] + cacheDefeat); + // start a timer for popup graphic updates + setInterval( + function timeout() { + $.publish('gauges.graphUpdate', '?' + (new Date()).getTime().toString()); + }, + config.graphUpdateTime * 60 * 1000 + ); + } + + firstRun = false; + }, + + // + // createTempSections() creates an array of gauge sections appropriate for Celsius or Fahrenheit 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 + < 0.001 + 0.001 to 0.05 + 0.05 to 0.20 + 0.20 to 0.60 + 0.60 to 2.0 + > 2.0 + */ + createRainRateSections = function (metric) { + var factor = metric ? 1 : 1 / 25; + return [ + steelseries.Section(0, 0.25 * factor, 'rgba(0, 140, 0, 0.5)'), + steelseries.Section(0.25 * factor, 1 * factor, 'rgba(80, 192, 80, 0.5)'), + steelseries.Section(1 * factor, 4 * factor, 'rgba(150, 203, 150, 0.5)'), + steelseries.Section(4 * factor, 16 * factor, 'rgba(212, 203, 109, 0.5)'), + steelseries.Section(16 * factor, 50 * factor, 'rgba(225, 155, 105, 0.5)'), + steelseries.Section(50 * factor, 1000 * factor, 'rgba(245, 86, 59, 0.5)') + ]; + }, + + // + // createRainFallSections()returns an array of section highlights for total rainfall in mm or inches + // + createRainfallSections = function (metric) { + var factor = metric ? 1 : 1 / 25; + return [ + steelseries.Section(0, 5 * factor, 'rgba(0, 250, 0, 1)'), + steelseries.Section(5 * factor, 10 * factor, 'rgba(0, 250, 117, 1)'), + steelseries.Section(10 * factor, 25 * factor, 'rgba(218, 246, 0, 1)'), + steelseries.Section(25 * factor, 40 * factor, 'rgba(250, 186, 0, 1)'), + steelseries.Section(40 * factor, 50 * factor, 'rgba(250, 95, 0, 1)'), + steelseries.Section(50 * factor, 65 * factor, 'rgba(250, 0, 0, 1)'), + steelseries.Section(65 * factor, 75 * factor, 'rgba(250, 6, 80, 1)'), + steelseries.Section(75 * factor, 100 * factor, 'rgba(205, 18, 158, 1)'), + steelseries.Section(100 * factor, 125 * factor, 'rgba(0, 0, 250, 1)'), + steelseries.Section(125 * factor, 500 * factor, 'rgba(0, 219, 212, 1)') + ]; + }, + + // + // createRainfallGradient() returns an array of SS colours for continuous 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) + ] + ); + return grad; + }, + + // + // createClousBaseSections() returns an array of section highlights for the Cloud Base gauge + // + createCloudBaseSections = function (metric) { + var section; + if (metric) { + section = [ + steelseries.Section(0, 150, 'rgba(245, 86, 59, 0.5)'), + steelseries.Section(150, 300, 'rgba(225, 155, 105, 0.5)'), + steelseries.Section(300, 750, 'rgba(212, 203, 109, 0.5)'), + steelseries.Section(750, 1000, 'rgba(150, 203, 150, 0.5)'), + steelseries.Section(1000, 1500, 'rgba(80, 192, 80, 0.5)'), + steelseries.Section(1500, 2500, 'rgba(0, 140, 0, 0.5)'), + steelseries.Section(2500, 5500, 'rgba(19, 103, 186, 0.5)') + ]; + } else { + section = [ + steelseries.Section(0, 500, 'rgba(245, 86, 59, 0.5)'), + steelseries.Section(500, 1000, 'rgba(225, 155, 105, 0.5)'), + steelseries.Section(1000, 2500, 'rgba(212, 203, 109, 0.5)'), + steelseries.Section(2500, 3500, 'rgba(150, 203, 150, 0.5)'), + steelseries.Section(3500, 5500, 'rgba(80, 192, 80, 0.5)'), + steelseries.Section(5500, 8500, 'rgba(0, 140, 0, 0.5)'), + steelseries.Section(8500, 18000, 'rgba(19, 103, 186, 0.5)') + ]; + } + return section; + }, + + // + // --------------- 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 + 11.25) / 22.5) % 16]); + } + }, + + // + // getUrlParam() extracts the named parameter from the current page URL + // + getUrlParam = function (paramName) { + var name, regexS, regex, results; + name = paramName.replace(/(\[|\])/g, '\\$1'); + regexS = '[\\?&]' + name + '=([^&#]*)'; + 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, errVal) { + try { + return (/[-+]?[0-9]+\.?[0-9]*/).exec(str.replace(',', '.'))[0]; + } catch (e) { + // error condition + return errVal || -9999; + } + }, + + // + // extractInteger() returns an integer from a string + // it ignores any text such as pre/appended units + // + extractInteger = function (str, errVal) { + try { + return (/[-+]?[0-9]+/).exec(str)[0]; + } catch (e) { + // error condition + return errVal || -9999; + } + }, + + // + // 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 Celsius + var val = trend * 3 * (units[1] === 'C' ? 1 : (5 / 9)), + ret; + if (trend === -9999) { + ret = (bTxt ? '--' : trend); + } else 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) { + 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 === 'inHg') { + val *= 33.8639; + } else if (units === 'kPa') { + val *= 10; + // assume everything else is hPa or mb, could be dangerous! + } + if (trend === -9999) { + ret = (bTxt ? '--' : trend); + } else 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 (deflt) { + return Math.min( + extractDecimal(data.tempTL, deflt), + extractDecimal(data.dewpointTL, deflt), + extractDecimal(data.apptempTL, deflt), + extractDecimal(data.feelslikeTL, deflt), + extractDecimal(data.wchillTL, deflt)); + }, + + // + // getMaxTemp() returns the highest temperature today for gauge scaling + // + getMaxTemp = function (deflt) { + return Math.max( + extractDecimal(data.tempTH, deflt), + extractDecimal(data.apptempTH, deflt), + extractDecimal(data.feelslikeTH, deflt), + extractDecimal(data.heatindexTH, deflt), + extractDecimal(data.humidex, deflt)); + }, + + // Celsius to Fahrenheit + c2f = function (val) { + return (extractDecimal(val) * 9 / 5 + 32).toFixed(1); + }, + // Fahrenheit to Celsius + f2c = function (val) { + return ((extractDecimal(val) - 32) * 5 / 9).toFixed(1); + }, + // kph to ms + kmh2ms = function (val) { + return (extractDecimal(val) * 0.2778).toFixed(1); + }, + // ms to kph + ms2kmh = function (val) { + return (extractDecimal(val) * 3.6).toFixed(1); + }, + kmh2ms = 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) * 1.609344).toFixed(1); + }, + // nautical miles to km + nmiles2km = function (val) { + return (extractDecimal(val) * 1.85200).toFixed(1); + }, + // km to miles + km2miles = function (val) { + return (extractDecimal(val) / 1.609344).toFixed(1); + }, + // km to nautical miles + km2nmiles = function (val) { + return (extractDecimal(val) / 1.85200).toFixed(1); + }, + // hPa to inHg (@0°C) + hpa2inhg = function (val, decimals) { + return (extractDecimal(val) * 0.029528744).toFixed(decimals || 3); + }, + // inHg to hPa (@0°C) + inhg2hpa = function (val) { + return (extractDecimal(val) / 0.029528744).toFixed(1); + }, + // kPa to hPa + kpa2hpa = function (val) { + return (extractDecimal(val) * 10).toFixed(1); + }, + // hPa to kPa + hpa2kpa = function (val, decimals) { + return (extractDecimal(val) / 10).toFixed(decimals || 2); + }, + // m to ft + m2ft = function (val) { + return (val * 3.2808399).toFixed(0); + }, + // ft to m + ft2m = function (val) { + return (val / 3.2808399).toFixed(0); + }, + + // + // setCookie() writes the 'obj' in cookie 'name' for persistent 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 persistent 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)); + break; + } + } + 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 + '"]').prop('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.feelslike = convFunc(data.feelslike); + data.feelslikeTH = convFunc(data.feelslikeTH); + data.feelslikeTL = convFunc(data.feelslikeTL); + 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); + if (data.intempTL && data.intempTH) { + data.intempTL = convFunc(data.intempTL); + data.intempTH = convFunc(data.intempTH); + } + data.temp = convFunc(data.temp); + 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.hourlyrainTH = convFunc(data.hourlyrainTH); + data.rainunit = convFunc === mm2in ? 'in' : 'mm'; + }, + + // + // convWindData() converts all the wind values using the supplied conversion function + // + convWindData = function (from, to) { + var fromFunc1, toFunc1, + fromFunc2, toFunc2, + dummy = function (val) { + return val; + }; + + // convert to km/h & km + switch (from) { case 'mph': fromFunc1 = miles2km; fromFunc2 = miles2km; @@ -3638,9 +3637,9 @@ gauges = (function () { default: fromFunc1 = dummy; fromFunc2 = dummy; - } - // conversion function from km to required units - switch (to) { + } + // conversion function from km to required units + switch (to) { case 'mph': toFunc1 = km2miles; toFunc2 = km2miles; @@ -3662,28 +3661,28 @@ gauges = (function () { 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; - }, + } + // 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 conversion function - // - convBaroData = function (from, to) { - var fromFunc, toFunc, - dummy = function (val) { - return val; - }; + // + // convBaroData() converts all the pressure values using the supplied conversion function + // + convBaroData = function (from, to) { + var fromFunc, toFunc, + dummy = function (val) { + return val; + }; - // convert to hPa - switch (from) { + // convert to hPa + switch (from) { case 'hPa': // falls through case 'mb': @@ -3696,9 +3695,9 @@ gauges = (function () { fromFunc = kpa2hpa; break; // no default - } - // convert to required units - switch (to) { + } + // convert to required units + switch (to) { case 'hPa': // falls through case 'mb': @@ -3711,42 +3710,42 @@ gauges = (function () { toFunc = hpa2kpa; break; // no default - } + } - 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; - }, + 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; + }, - // - // convCloudBaseData() converts all the cloud base data units using the supplied conversion function - // - convCloudBaseData = function (convFunc) { - data.cloudbasevalue = convFunc(data.cloudbasevalue); - data.cloudbaseunit = convFunc === m2ft ? 'ft' : 'm'; - }, + // + // convCloudBaseData() converts all the cloud base data units using the supplied conversion function + // + convCloudBaseData = function (convFunc) { + data.cloudbasevalue = convFunc(data.cloudbasevalue); + data.cloudbaseunit = convFunc === m2ft ? 'ft' : 'm'; + }, - // - // setUnits() Main data conversion routine, calls all the setXXXX() sub-routines - // - setUnits = function (radio) { - var sel = radio.value; + // + // setUnits() Main data conversion routine, calls all the setXXXX() sub-routines + // + setUnits = function (radio) { + var sel = radio.value; - userUnitsSet = true; + userUnitsSet = true; - switch (sel) { + switch (sel) { // == Temperature == case 'C': displayUnits.temp = sel; if (data.tempunit[1] !== sel) { setTempUnits(true); convTempData(f2c); - if (gaugeTemp) { gaugeTemp.update(); } - if (gaugeDew) { gaugeDew.update(); } + if (gaugeTemp) {gaugeTemp.update();} + if (gaugeDew) {gaugeDew.update();} } break; case 'F': @@ -3754,8 +3753,8 @@ gauges = (function () { if (data.tempunit[1] !== sel) { setTempUnits(false); convTempData(c2f); - if (gaugeTemp) { gaugeTemp.update(); } - if (gaugeDew) { gaugeDew.update(); } + if (gaugeTemp) {gaugeTemp.update();} + if (gaugeDew) {gaugeDew.update();} } break; // == Rainfall == @@ -3764,8 +3763,8 @@ gauges = (function () { if (data.rainunit !== sel) { setRainUnits(true); convRainData(in2mm); - if (gaugeRain) { gaugeRain.update(); } - if (gaugeRRate) { gaugeRRate.update(); } + if (gaugeRain) {gaugeRain.update();} + if (gaugeRRate) {gaugeRRate.update();} } break; case 'in': @@ -3773,8 +3772,8 @@ gauges = (function () { if (data.rainunit !== sel) { setRainUnits(false); convRainData(mm2in); - if (gaugeRain) { gaugeRain.update(); } - if (gaugeRRate) { gaugeRRate.update(); } + if (gaugeRain) {gaugeRain.update();} + if (gaugeRRate) {gaugeRRate.update();} } break; // == Pressure == @@ -3789,7 +3788,7 @@ gauges = (function () { if (data.pressunit !== sel) { convBaroData(data.pressunit, sel); setBaroUnits(sel); - if (gaugeBaro) { gaugeBaro.update(); } + if (gaugeBaro) {gaugeBaro.update();} } break; // == Wind speed == @@ -3804,9 +3803,9 @@ gauges = (function () { if (data.windunit !== sel) { convWindData(data.windunit, sel); setWindUnits(sel); - if (gaugeWind) { gaugeWind.update(); } - if (gaugeDir) { gaugeDir.update(); } - if (gaugeRose) { gaugeRose.update(); } + if (gaugeWind) {gaugeWind.update();} + if (gaugeDir) {gaugeDir.update();} + if (gaugeRose) {gaugeRose.update();} } break; // == CloudBase == @@ -3815,7 +3814,7 @@ gauges = (function () { if (data.cloudbaseunit !== sel) { setCloudBaseUnits(true); convCloudBaseData(ft2m); - if (gaugeCloud) { gaugeCloud.update(); } + if (gaugeCloud) {gaugeCloud.update();} } break; case 'ft': @@ -3823,117 +3822,117 @@ gauges = (function () { if (data.cloudbaseunit !== sel) { setCloudBaseUnits(false); convCloudBaseData(m2ft); - if (gaugeCloud) { gaugeCloud.update(); } + if (gaugeCloud) {gaugeCloud.update();} } break; // no default - } - if (config.useCookies) { - setCookie('units', displayUnits); - } - }, + } + if (config.useCookies) { + setCookie('units', displayUnits); + } + }, - setTempUnits = function (celsius) { - if (celsius) { - data.tempunit = '°C'; + setTempUnits = function (celsius) { + if (celsius) { + data.tempunit = '°C'; + if (gaugeTemp) { + gaugeTemp.data.sections = createTempSections(true); + gaugeTemp.data.minValue = gaugeGlobals.tempScaleDefMinC; + gaugeTemp.data.maxValue = gaugeGlobals.tempScaleDefMaxC; + } + if (gaugeDew) { + gaugeDew.data.sections = createTempSections(true); + gaugeDew.data.minValue = gaugeGlobals.tempScaleDefMinC; + gaugeDew.data.maxValue = gaugeGlobals.tempScaleDefMaxC; + } + } else { + data.tempunit = '°F'; + if (gaugeTemp) { + gaugeTemp.data.sections = createTempSections(false); + gaugeTemp.data.minValue = gaugeGlobals.tempScaleDefMinF; + gaugeTemp.data.maxValue = gaugeGlobals.tempScaleDefMaxF; + } + if (gaugeDew) { + gaugeDew.data.sections = createTempSections(false); + gaugeDew.data.minValue = gaugeGlobals.tempScaleDefMinF; + gaugeDew.data.maxValue = gaugeGlobals.tempScaleDefMaxF; + } + } if (gaugeTemp) { - gaugeTemp.data.sections = createTempSections(true); - gaugeTemp.data.minValue = gaugeGlobals.tempScaleDefMinC; - gaugeTemp.data.maxValue = gaugeGlobals.tempScaleDefMaxC; + gaugeTemp.gauge.setUnitString(data.tempunit); + gaugeTemp.gauge.setSection(gaugeTemp.data.sections); } if (gaugeDew) { - gaugeDew.data.sections = createTempSections(true); - gaugeDew.data.minValue = gaugeGlobals.tempScaleDefMinC; - gaugeDew.data.maxValue = gaugeGlobals.tempScaleDefMaxC; + gaugeDew.gauge.setUnitString(data.tempunit); + gaugeDew.gauge.setSection(gaugeTemp.data.sections); } - } else { - data.tempunit = '°F'; - if (gaugeTemp) { - gaugeTemp.data.sections = createTempSections(false); - gaugeTemp.data.minValue = gaugeGlobals.tempScaleDefMinF; - gaugeTemp.data.maxValue = gaugeGlobals.tempScaleDefMaxF; - } - if (gaugeDew) { - gaugeDew.data.sections = createTempSections(false); - gaugeDew.data.minValue = gaugeGlobals.tempScaleDefMinF; - gaugeDew.data.maxValue = gaugeGlobals.tempScaleDefMaxF; - } - } - if (gaugeTemp) { - gaugeTemp.gauge.setUnitString(data.tempunit); - gaugeTemp.gauge.setSection(gaugeTemp.data.sections); - } - if (gaugeDew) { - gaugeDew.gauge.setUnitString(data.tempunit); - gaugeDew.gauge.setSection(gaugeTemp.data.sections); - } - }, + }, - setRainUnits = function (mm) { - if (mm) { - data.rainunit = 'mm'; + setRainUnits = function (mm) { + if (mm) { + data.rainunit = 'mm'; + if (gaugeRain) { + gaugeRain.data.lcdDecimals = 1; + gaugeRain.data.scaleDecimals = 1; + gaugeRain.data.labelNumberFormat = gaugeGlobals.labelFormat; + gaugeRain.data.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(true) : []); + gaugeRain.data.maxValue = gaugeGlobals.rainScaleDefMaxmm; + gaugeRain.data.grad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(true) : null); + } + if (gaugeRRate) { + gaugeRRate.data.lcdDecimals = 1; + gaugeRRate.data.scaleDecimals = 0; + gaugeRRate.data.labelNumberFormat = gaugeGlobals.labelFormat; + gaugeRRate.data.sections = createRainRateSections(true); + gaugeRRate.data.maxValue = gaugeGlobals.rainRateScaleDefMaxmm; + } + } else { + data.rainunit = 'in'; + if (gaugeRain) { + gaugeRain.data.lcdDecimals = 2; + gaugeRain.data.scaleDecimals = gaugeGlobals.rainScaleDefMaxIn < 1 ? 2 : 1; + gaugeRain.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL; + gaugeRain.data.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(false) : []); + gaugeRain.data.maxValue = gaugeGlobals.rainScaleDefMaxIn; + gaugeRain.data.grad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(false) : null); + } + if (gaugeRRate) { + gaugeRRate.data.lcdDecimals = 2; + gaugeRRate.data.scaleDecimals = gaugeGlobals.rainRateScaleDefMaxIn < 1 ? 2 : 1; + gaugeRRate.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL; + gaugeRRate.data.sections = createRainRateSections(false); + gaugeRRate.data.maxValue = gaugeGlobals.rainRateScaleDefMaxIn; + } + } if (gaugeRain) { - gaugeRain.data.lcdDecimals = 1; - gaugeRain.data.scaleDecimals = 1; - gaugeRain.data.labelNumberFormat = gaugeGlobals.labelFormat; - gaugeRain.data.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(true) : []); - gaugeRain.data.maxValue = gaugeGlobals.rainScaleDefMaxmm; - gaugeRain.data.grad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(true) : null); + gaugeRain.data.value = 0; + gaugeRain.gauge.setUnitString(data.rainunit); + gaugeRain.gauge.setSection(gaugeRain.data.sections); + gaugeRain.gauge.setGradient(gaugeRain.data.grad); + gaugeRain.gauge.setFractionalScaleDecimals(gaugeRain.data.scaleDecimals); + gaugeRain.gauge.setLabelNumberFormat(gaugeRain.data.labelNumberFormat); + gaugeRain.gauge.setLcdDecimals(gaugeRain.data.lcdDecimals); + gaugeRain.gauge.setValue(0); + gaugeRain.gauge.setMaxValue(gaugeRain.data.maxValue); } if (gaugeRRate) { - gaugeRRate.data.lcdDecimals = 1; - gaugeRRate.data.scaleDecimals = 0; - gaugeRRate.data.labelNumberFormat = gaugeGlobals.labelFormat; - gaugeRRate.data.sections = createRainRateSections(true); - gaugeRRate.data.maxValue = gaugeGlobals.rainRateScaleDefMaxmm; + gaugeRRate.data.value = 0; + gaugeRRate.gauge.setUnitString(data.rainunit + '/h'); + gaugeRRate.gauge.setSection(gaugeRRate.data.sections); + gaugeRRate.gauge.setFractionalScaleDecimals(gaugeRRate.data.scaleDecimals); + gaugeRRate.gauge.setLabelNumberFormat(gaugeRRate.data.labelNumberFormat); + gaugeRRate.gauge.setLcdDecimals(gaugeRRate.data.lcdDecimals); + gaugeRRate.gauge.setValue(0); + gaugeRRate.gauge.setMaxValue(gaugeRRate.data.maxValue); } - } else { - data.rainunit = 'in'; - if (gaugeRain) { - gaugeRain.data.lcdDecimals = 2; - gaugeRain.data.scaleDecimals = gaugeGlobals.rainScaleDefMaxIn < 1 ? 2 : 1; - gaugeRain.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL; - gaugeRain.data.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(false) : []); - gaugeRain.data.maxValue = gaugeGlobals.rainScaleDefMaxIn; - gaugeRain.data.grad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(false) : null); - } - if (gaugeRRate) { - gaugeRRate.data.lcdDecimals = 2; - gaugeRRate.data.scaleDecimals = gaugeGlobals.rainRateScaleDefMaxIn < 1 ? 2 : 1; - gaugeRRate.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL; - gaugeRRate.data.sections = createRainRateSections(false); - gaugeRRate.data.maxValue = gaugeGlobals.rainRateScaleDefMaxIn; - } - } - if (gaugeRain) { - gaugeRain.data.value = 0; - gaugeRain.gauge.setUnitString(data.rainunit); - gaugeRain.gauge.setSection(gaugeRain.data.sections); - gaugeRain.gauge.setGradient(gaugeRain.data.grad); - gaugeRain.gauge.setFractionalScaleDecimals(gaugeRain.data.scaleDecimals); - gaugeRain.gauge.setLabelNumberFormat(gaugeRain.data.labelNumberFormat); - gaugeRain.gauge.setLcdDecimals(gaugeRain.data.lcdDecimals); - gaugeRain.gauge.setValue(0); - gaugeRain.gauge.setMaxValue(gaugeRain.data.maxValue); - } - if (gaugeRRate) { - gaugeRRate.data.value = 0; - gaugeRRate.gauge.setUnitString(data.rainunit + '/h'); - gaugeRRate.gauge.setSection(gaugeRRate.data.sections); - gaugeRRate.gauge.setFractionalScaleDecimals(gaugeRRate.data.scaleDecimals); - gaugeRRate.gauge.setLabelNumberFormat(gaugeRRate.data.labelNumberFormat); - gaugeRRate.gauge.setLcdDecimals(gaugeRRate.data.lcdDecimals); - gaugeRRate.gauge.setValue(0); - gaugeRRate.gauge.setMaxValue(gaugeRRate.data.maxValue); - } - }, + }, - setWindUnits = function (to) { - var maxVal; - data.windunit = to; - if (gaugeWind) { - // conversion function to required units - switch (to) { + setWindUnits = function (to) { + var maxVal; + data.windunit = to; + if (gaugeWind) { + // conversion function to required units + switch (to) { case 'mph': maxVal = gaugeGlobals.windScaleDefMaxMph; break; @@ -3947,24 +3946,24 @@ gauges = (function () { maxVal = gaugeGlobals.windScaleDefMaxMs; break; // no default + } + // set the gauges + gaugeWind.data.maxValue = maxVal; + gaugeWind.gauge.setUnitString(data.windunit); + gaugeWind.gauge.setValue(0); } - // set the gauges - gaugeWind.data.maxValue = maxVal; - gaugeWind.gauge.setUnitString(data.windunit); - gaugeWind.gauge.setValue(0); - } - if (gaugeRose) { - gaugeRose.setOdoTitle(strings[getWindrunUnits(data.windunit)]); - } - }, + if (gaugeRose) { + gaugeRose.setOdoTitle(strings[getWindrunUnits(data.windunit)]); + } + }, - setBaroUnits = function (to) { - var minVal, maxVal; + setBaroUnits = function (to) { + var minVal, maxVal; - if (!gaugeBaro) { return; } + if (!gaugeBaro) {return;} - // set to the required units - switch (to) { + // set to the required units + switch (to) { case 'hPa': // falls through case 'mb': @@ -3989,56 +3988,56 @@ gauges = (function () { gaugeBaro.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL; break; // no default - } - - data.pressunit = to; - gaugeBaro.gauge.setUnitString(to); - gaugeBaro.gauge.setLcdDecimals(gaugeBaro.data.lcdDecimals); - gaugeBaro.gauge.setFractionalScaleDecimals(gaugeBaro.data.scaleDecimals); - gaugeBaro.gauge.setLabelNumberFormat(gaugeBaro.data.labelNumberFormat); - gaugeBaro.data.minValue = minVal; - gaugeBaro.data.maxValue = maxVal; - gaugeBaro.data.value = gaugeBaro.data.minValue; - }, - - setCloudBaseUnits = function (m) { - if (!gaugeCloud) { return; } - - if (m) { - gaugeCloud.data.sections = createCloudBaseSections(true); - gaugeCloud.data.maxValue = gaugeGlobals.cloudScaleDefMaxm; - } else { - gaugeCloud.data.sections = createCloudBaseSections(false); - gaugeCloud.data.maxValue = gaugeGlobals.cloudScaleDefMaxft; - } - gaugeCloud.data.value = 0; - gaugeCloud.gauge.setUnitString(m ? strings.metres : strings.feet); - gaugeCloud.gauge.setSection(gaugeCloud.data.sections); - }, - - // - // 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 (gaugeTemp) { - if (config.showIndoorTempHum) { - if ($('#rad_temp1').is(':checked')) { - gaugeTemp.data.title = strings.temp_title_out; - } else { - gaugeTemp.data.title = strings.temp_title_in; - } - } else { - gaugeTemp.data.title = strings.temp_title_out; } - gaugeTemp.gauge.setTitleString(gaugeTemp.data.title); - if (data.ver) { gaugeTemp.update(); } - } - if (gaugeDew) { - switch ($('input[name="rad_dew"]:checked').val()) { + + data.pressunit = to; + gaugeBaro.gauge.setUnitString(to); + gaugeBaro.gauge.setLcdDecimals(gaugeBaro.data.lcdDecimals); + gaugeBaro.gauge.setFractionalScaleDecimals(gaugeBaro.data.scaleDecimals); + gaugeBaro.gauge.setLabelNumberFormat(gaugeBaro.data.labelNumberFormat); + gaugeBaro.data.minValue = minVal; + gaugeBaro.data.maxValue = maxVal; + gaugeBaro.data.value = gaugeBaro.data.minValue; + }, + + setCloudBaseUnits = function (m) { + if (!gaugeCloud) {return;} + + if (m) { + gaugeCloud.data.sections = createCloudBaseSections(true); + gaugeCloud.data.maxValue = gaugeGlobals.cloudScaleDefMaxm; + } else { + gaugeCloud.data.sections = createCloudBaseSections(false); + gaugeCloud.data.maxValue = gaugeGlobals.cloudScaleDefMaxft; + } + gaugeCloud.data.value = 0; + gaugeCloud.gauge.setUnitString(m ? strings.metres : strings.feet); + gaugeCloud.gauge.setSection(gaugeCloud.data.sections); + }, + + // + // 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 (gaugeTemp) { + if (config.showIndoorTempHum) { + if ($('#rad_temp1').is(':checked')) { + gaugeTemp.data.title = strings.temp_title_out; + } else { + gaugeTemp.data.title = strings.temp_title_in; + } + } else { + gaugeTemp.data.title = strings.temp_title_out; + } + gaugeTemp.gauge.setTitleString(gaugeTemp.data.title); + if (data.ver) {gaugeTemp.update();} + } + if (gaugeDew) { + switch ($('input[name="rad_dew"]:checked').val()) { case 'dew': gaugeDew.data.title = strings.dew_title; break; @@ -4058,83 +4057,83 @@ gauges = (function () { gaugeDew.data.title = strings.humdx_title; break; // no default - } - gaugeDew.gauge.setTitleString(gaugeDew.data.title); - if (data.ver) { gaugeDew.update(); } - } - // rain - if (gaugeRain) { - gaugeRain.data.title = strings.rain_title; - gaugeRain.gauge.setTitleString(gaugeRain.data.title); - if (data.ver) { gaugeRain.update(); } - } - // rrate - if (gaugeRRate) { - gaugeRRate.data.title = strings.rrate_title; - gaugeRRate.gauge.setTitleString(gaugeRRate.data.title); - if (data.ver) { gaugeRRate.update(); } - } - // humidity - if (gaugeHum) { - if (config.showIndoorTempHum) { - if ($('#rad_hum1').is(':checked')) { - gaugeHum.data.title = strings.hum_title_out; - } else { - gaugeHum.data.title = strings.hum_title_in; } - } else { - gaugeHum.data.title = strings.hum_title_out; + gaugeDew.gauge.setTitleString(gaugeDew.data.title); + if (data.ver) {gaugeDew.update();} } - gaugeHum.gauge.setTitleString(gaugeHum.data.title); - if (data.ver) { gaugeHum.update(); } - } - // barometer - if (gaugeBaro) { - gaugeBaro.data.title = strings.baro_title; - gaugeBaro.gauge.setTitleString(gaugeBaro.data.title); - if (data.ver) { gaugeBaro.update(); } - } - // wind - if (gaugeWind) { - gaugeWind.data.title = strings.wind_title; - gaugeWind.gauge.setTitleString(gaugeWind.data.title); - if (data.ver) { gaugeWind.update(); } - } - if (gaugeDir) { - gaugeDir.gauge.setPointSymbols(strings.compass); - gaugeDir.data.titles = [strings.latest_web, strings.tenminavg_web]; - gaugeDir.gauge.setLcdTitleStrings(gaugeDir.data.titles); - if (data.ver) { gaugeDir.update(); } - } - if (gaugeUV) { - gaugeUV.gauge.setTitleString(strings.uv_title); - if (data.ver) { gaugeUV.update(); } - } - if (gaugeSolar) { - gaugeSolar.gauge.setTitleString(strings.solar_title); - if (data.ver) { gaugeSolar.update(); } - } - if (gaugeRose) { - gaugeRose.setTitle(strings.windrose); - gaugeRose.setCompassStrings(strings.compass); - gaugeRose.setOdoTitle(strings[getWindrunUnits(displayUnits.wind)]); - if (data.ver) { gaugeRose.update(); } - } - if (gaugeCloud) { - // Cloudbase - gaugeCloud.data.units = data.cloudunit === 'm' ? strings.metres : strings.feet; - gaugeCloud.gauge.setTitleString(strings.cloudbase_title); - gaugeCloud.gauge.setUnitString(gaugeCloud.data.units); - if (data.ver) { gaugeCloud.update(); } - } - }, + // rain + if (gaugeRain) { + gaugeRain.data.title = strings.rain_title; + gaugeRain.gauge.setTitleString(gaugeRain.data.title); + if (data.ver) {gaugeRain.update();} + } + // rrate + if (gaugeRRate) { + gaugeRRate.data.title = strings.rrate_title; + gaugeRRate.gauge.setTitleString(gaugeRRate.data.title); + if (data.ver) {gaugeRRate.update();} + } + // humidity + if (gaugeHum) { + if (config.showIndoorTempHum) { + if ($('#rad_hum1').is(':checked')) { + gaugeHum.data.title = strings.hum_title_out; + } else { + gaugeHum.data.title = strings.hum_title_in; + } + } else { + gaugeHum.data.title = strings.hum_title_out; + } + gaugeHum.gauge.setTitleString(gaugeHum.data.title); + if (data.ver) {gaugeHum.update();} + } + // barometer + if (gaugeBaro) { + gaugeBaro.data.title = strings.baro_title; + gaugeBaro.gauge.setTitleString(gaugeBaro.data.title); + if (data.ver) {gaugeBaro.update();} + } + // wind + if (gaugeWind) { + gaugeWind.data.title = strings.wind_title; + gaugeWind.gauge.setTitleString(gaugeWind.data.title); + if (data.ver) {gaugeWind.update();} + } + if (gaugeDir) { + gaugeDir.gauge.setPointSymbols(strings.compass); + gaugeDir.data.titles = [strings.latest_web, strings.tenminavg_web]; + gaugeDir.gauge.setLcdTitleStrings(gaugeDir.data.titles); + if (data.ver) {gaugeDir.update();} + } + if (gaugeUV) { + gaugeUV.gauge.setTitleString(strings.uv_title); + if (data.ver) {gaugeUV.update();} + } + if (gaugeSolar) { + gaugeSolar.gauge.setTitleString(strings.solar_title); + if (data.ver) {gaugeSolar.update();} + } + if (gaugeRose) { + gaugeRose.setTitle(strings.windrose); + gaugeRose.setCompassStrings(strings.compass); + gaugeRose.setOdoTitle(strings[getWindrunUnits(displayUnits.wind)]); + if (data.ver) {gaugeRose.update();} + } + if (gaugeCloud) { + // Cloudbase + gaugeCloud.data.units = data.cloudunit === 'm' ? strings.metres : strings.feet; + gaugeCloud.gauge.setTitleString(strings.cloudbase_title); + gaugeCloud.gauge.setUnitString(gaugeCloud.data.units); + if (data.ver) {gaugeCloud.update();} + } + }, - // - // return windrun units based on the windspeed units - // - getWindrunUnits = function (spdUnits) { - var retVal; - switch (spdUnits) { + // + // return windrun units based on the windspeed units + // + getWindrunUnits = function (spdUnits) { + var retVal; + switch (spdUnits) { case 'mph': retVal = 'miles'; break; @@ -4148,119 +4147,119 @@ gauges = (function () { default: retVal = 'km'; break; - } - return retVal; - }, + } + return retVal; + }, - // - // performs a simple cloudbase calculation for those weather programs that don't supply it - // - calcCloudbase = function (temp, tempunit, dew, cloudbaseunit) { - var sprd = temp - dew; - var cb = sprd * (tempunit[1] === 'C' ? 400 : 227.3); // cloud base in feet - if (cloudbaseunit === 'm') { - cb = ft2m(cb); - } - return cb; - }, + // + // performs a simple cloudbase calculation for those weather programs that don't supply it + // + calcCloudbase = function (temp, tempunit, dew, cloudbaseunit) { + var sprd = temp - dew; + var cb = sprd * (tempunit[1] === 'C' ? 400 : 227.3); // cloud base in feet + if (cloudbaseunit === 'm') { + cb = ft2m(cb); + } + return cb; + }, - // - // create a shadow effect for the gauge using CSS - // - gaugeShadow = function (size) { - var offset = Math.floor(size * 0.015); - return { - 'box-shadow': offset + 'px ' + offset + 'px ' + offset + 'px ' + gaugeGlobals.shadowColour, - 'border-radius': Math.floor(size / 2) + 'px' + // + // create a shadow effect for the gauge using CSS + // + gaugeShadow = function (size) { + var offset = Math.floor(size * 0.015); + return { + 'box-shadow' : offset + 'px ' + offset + 'px ' + offset + 'px ' + gaugeGlobals.shadowColour, + 'border-radius': Math.floor(size / 2) + 'px' + }; + }, + + // + // generate a colour gradient based on start and end values + // + gradient = function (startCol, endCol, fraction) { + var redOrigin, grnOrigin, bluOrigin, + gradientSizeRed, gradientSizeGrn, gradientSizeBlu; + + redOrigin = parseInt(startCol.substr(0, 2), 16); + grnOrigin = parseInt(startCol.substr(2, 2), 16); + bluOrigin = parseInt(startCol.substr(4, 2), 16); + + gradientSizeRed = parseInt(endCol.substr(0, 2), 16) - redOrigin; // Graduation Size Red + gradientSizeGrn = parseInt(endCol.substr(2, 2), 16) - grnOrigin; + gradientSizeBlu = parseInt(endCol.substr(4, 2), 16) - bluOrigin; + + return (redOrigin + (gradientSizeRed * fraction)).toFixed(0) + ',' + + (grnOrigin + (gradientSizeGrn * fraction)).toFixed(0) + ',' + + (bluOrigin + (gradientSizeBlu * fraction)).toFixed(0); + }, + // + // returns the next highest number in the step sequence + // + nextHighest = function (value, step) { + return +value == 0 ? step : Math.ceil(+value / step) * step; + }, + // + // returns the next lowest number in the step sequence + // + nextLowest = function (value, step) { + return +value == 0 ? -step : Math.floor(+value / step) * step; }; - }, + // ######################################################## + // End of gauges() var declarations + // ######################################################## // - // generate a colour gradient based on start and end values + // Execution starts here // - gradient = function (startCol, endCol, fraction) { - var redOrigin, grnOrigin, bluOrigin, - gradientSizeRed, gradientSizeGrn, gradientSizeBlu; - redOrigin = parseInt(startCol.substr(0, 2), 16); - grnOrigin = parseInt(startCol.substr(2, 2), 16); - bluOrigin = parseInt(startCol.substr(4, 2), 16); + // test for canvas support before we do anything else, especially reference steelseries which will cause the script to abort! + if (!document.createElement('canvas').getContext) { + // failed, no canvas support detected + $('body').html(strings.canvasnosupport); + setTimeout(function () { + window.location = config.oldGauges; + }, 3000); + return false; + } else { + // + // Called when the document object has loaded + // This starts the whole script. + // + $(document).ready(function () { + // Kick it all off - false for web page, true for dashboard + init(config.dashboardMode); + }); + } - gradientSizeRed = parseInt(endCol.substr(0, 2), 16) - redOrigin; // Graduation Size Red - gradientSizeGrn = parseInt(endCol.substr(2, 2), 16) - grnOrigin; - gradientSizeBlu = parseInt(endCol.substr(4, 2), 16) - bluOrigin; - - return (redOrigin + (gradientSizeRed * fraction)).toFixed(0) + ',' + - (grnOrigin + (gradientSizeGrn * fraction)).toFixed(0) + ',' + - (bluOrigin + (gradientSizeBlu * fraction)).toFixed(0); - }, - // - // returns the next highest number in the step sequence - // - nextHighest = function (value, step) { - return +value == 0 ? step : Math.ceil(+value / step) * step; - }, - // - // returns the next lowest number in the step sequence - // - nextLowest = function (value, step) { - return +value == 0 ? -step : Math.floor(+value / step) * step; + return { + setLang : setLang, + setUnits : setUnits, + processData: processData, + config : config, + init : init }; -// ######################################################## -// End of gauges() var declarations -// ######################################################## - -// -// Execution starts here -// - -// test for canvas support before we do anything else, especially reference steelseries which will cause the script to abort! -if (!document.createElement('canvas').getContext) { - // failed, no canvas support detected - $('body').html(strings.canvasnosupport); - setTimeout(function () { - window.location = config.oldGauges; - }, 3000); - return false; -} else { - // - // Called when the document object has loaded - // This starts the whole script. - // - $(document).ready(function () { - // Kick it all off - false for web page, true for dashboard - init(config.dashboardMode); - }); -} - -return { - setLang: setLang, - setUnits: setUnits, - processData: processData, - config: config, - init: init -}; }()); // =============================================================================================================================== // =============================================================================================================================== // =============================================================================================================================== -/*! -* Image w/ description tooltip v2.0 - For FF1+ IE6+ Opr8+ -* Created: April 23rd, 2010. This notice must stay intact for usage -* Author: Dynamic Drive at http://www.dynamicdrive.com/ -* Visit http://www.dynamicdrive.com/ for full source code -* Modified: M Crossley June 2011, January 2012 -* v2.- -*/ + /*! + * Image w/ description tooltip v2.0 - For FF1+ IE6+ Opr8+ + * Created: April 23rd, 2010. This notice must stay intact for usage + * Author: Dynamic Drive at http://www.dynamicdrive.com/ + * Visit http://www.dynamicdrive.com/ for full source code + * Modified: M Crossley June 2011, January 2012 + * v2.- + */ var ddimgtooltip; ddimgtooltip = { tiparray: (function () { - var style = { background: '#FFFFFF', color: 'black', border: '2px ridge darkblue' }, + var style = {background: '#FFFFFF', color: 'black', border: '2px ridge darkblue'}, i = 12, // set to number of tooltips required tooltips = []; - for (; i--;) { + for (;i--;) { tooltips[i] = [null, ' ', style]; } return tooltips; @@ -4280,7 +4279,7 @@ ddimgtooltip = { .html( ((tipinfo[1]) ? '
' + tipinfo[1] + '
' : '') + (tipinfo[0] !== null ? '
' : '') + '_img" src="' + tipinfo[0] + '" />
' : '') ) .css(tipinfo[2] || {}) .appendTo(document.body); @@ -4302,11 +4301,11 @@ ddimgtooltip = { // last ditch attempt to keep the graphs 'on page' x = Math.max(x, 0); if (tipw >= wWidth) { - $($tooltip.attr('id') + '_img').css({ width: wWidth - 20 }); - $('#' + $tooltip.attr('id') + '_img').css({ width: wWidth - 20 }); + $($tooltip.attr('id') + '_img').css({width: wWidth - 20}); + $('#' + $tooltip.attr('id') + '_img').css({width: wWidth - 20}); y = e.pageY + 5; } - $tooltip.css({ left: x, top: y }); + $tooltip.css({left: x, top: y}); }, delaybox: function ($, $tooltip) { diff --git a/lib/steelseries/scripts/src/RGraph.rose.js b/lib/steelseries/scripts/src/RGraph.rose.js index bef134d..2e2c176 100644 --- a/lib/steelseries/scripts/src/RGraph.rose.js +++ b/lib/steelseries/scripts/src/RGraph.rose.js @@ -1,824 +1,833 @@ -/** -* o------------------------------------------------------------------------------o -* | This file is part of the RGraph package - you can learn more at: | -* | | -* | http://www.rgraph.net | -* | | -* | This package is licensed under the RGraph license. For all kinds of business | -* | purposes there is a small one-time licensing fee to pay and for non | -* | commercial purposes it is free to use. You can read the full license here: | -* | | -* | http://www.rgraph.net/LICENSE.txt | -* o------------------------------------------------------------------------------o -*/ - -if (typeof (RGraph) == 'undefined') RGraph = {}; - -/** -* The rose chart constuctor -* -* @param object canvas -* @param array data -*/ -RGraph.Rose = function (id, data) { - this.id = id; - this.canvas = document.getElementById(id); - this.context = this.canvas.getContext('2d'); - this.data = data; - this.canvas.__object__ = this; - this.type = 'rose'; - this.isRGraph = true; - this.uid = RGraph.CreateUID(); - this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID(); - this.colorsParsed = false; + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + if (typeof(RGraph) == 'undefined') RGraph = {}; /** - * Compatibility with older browsers + * The rose chart constuctor + * + * @param object canvas + * @param array data */ - RGraph.OldBrowserCompat(this.context); + RGraph.Rose = function (id, data) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.data = data; + this.canvas.__object__ = this; + this.type = 'rose'; + this.isRGraph = true; + this.uid = RGraph.CreateUID(); + this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID(); + this.colorsParsed = false; - this.centerx = 0; - this.centery = 0; - this.radius = 0; - this.max = 0; - this.angles = []; - - this.properties = { - 'chart.background.axes': true, - 'chart.background.axes.color': 'black', - 'chart.background.grid': true, - 'chart.background.grid.color': '#ccc', - 'chart.background.grid.size': null, - 'chart.background.grid.spokes': null, - 'chart.background.grid.count': 5, - 'chart.centerx': null, - 'chart.centery': null, - 'chart.radius': null, - 'chart.colors': ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)', 'rgba(0,255,255,0.5)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)', 'green', 'pink', 'gray', 'aqua'], - 'chart.colors.sequential': false, - 'chart.colors.alpha': null, - 'chart.margin': 0, - 'chart.strokestyle': '#aaa', - 'chart.gutter.left': 25, - 'chart.gutter.right': 25, - 'chart.gutter.top': 25, - 'chart.gutter.bottom': 25, - 'chart.title': '', - 'chart.title.background': null, - 'chart.title.hpos': null, - 'chart.title.vpos': null, - 'chart.title.bold': true, - 'chart.title.font': null, - 'chart.title.x': null, - 'chart.title.y': null, - 'chart.title.halign': null, - 'chart.title.valign': null, - 'chart.labels': null, - 'chart.labels.position': 'center', - 'chart.labels.axes': 'nsew', - 'chart.labels.offset': 0, - 'chart.text.color': 'black', - 'chart.text.font': 'Arial', - 'chart.text.size': 10, - 'chart.key': null, - 'chart.key.background': 'white', - 'chart.key.position': 'graph', - 'chart.key.halign': 'right', - 'chart.key.shadow': false, - 'chart.key.shadow.color': '#666', - 'chart.key.shadow.blur': 3, - 'chart.key.shadow.offsetx': 2, - 'chart.key.shadow.offsety': 2, - 'chart.key.position.gutter.boxed': true, - 'chart.key.position.x': null, - 'chart.key.position.y': null, - 'chart.key.color.shape': 'square', - 'chart.key.rounded': true, - 'chart.key.linewidth': 1, - 'chart.key.colors': null, - 'chart.contextmenu': null, - 'chart.tooltips': null, - 'chart.tooltips.event': 'onclick', - 'chart.tooltips.effect': 'fade', - 'chart.tooltips.css.class': 'RGraph_tooltip', - 'chart.tooltips.highlight': true, - 'chart.highlight.stroke': 'rgba(0,0,0,0)', - 'chart.highlight.fill': 'rgba(255,255,255,0.7)', - 'chart.annotatable': false, - 'chart.annotate.color': 'black', - 'chart.zoom.factor': 1.5, - 'chart.zoom.fade.in': true, - 'chart.zoom.fade.out': true, - 'chart.zoom.hdir': 'right', - 'chart.zoom.vdir': 'down', - 'chart.zoom.frames': 25, - 'chart.zoom.delay': 16.666, - 'chart.zoom.shadow': true, - 'chart.zoom.background': true, - 'chart.zoom.action': 'zoom', - 'chart.resizable': false, - 'chart.resize.handle.adjust': [0, 0], - 'chart.resize.handle.background': null, - 'chart.adjustable': false, - 'chart.ymax': null, - 'chart.ymin': 0, - 'chart.scale.decimals': null, - 'chart.scale.point': '.', - 'chart.scale.thousand': ',', - 'chart.variant': 'stacked', - 'chart.exploded': 0, - 'chart.events.mousemove': null, - 'chart.events.click': null, - 'chart.animation.roundrobin.factor': 1, - 'chart.animation.roundrobin.radius': true, - 'chart.animation.grow.multiplier': 1 - } + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + this.centerx = 0; + this.centery = 0; + this.radius = 0; + this.max = 0; + this.angles = []; - /** - * Create the $ objects. In the case of non-equi-angular rose charts it actually creates too many $ objects, - * but it doesn't matter. - */ - var linear_data = RGraph.array_linearize(this.data); - for (var i = 0; i < linear_data.length; ++i) { - this["$" + i] = {} - } - - - /** - * Translate half a pixel for antialiasing purposes - but only if it hasn't beeen - * done already - */ - if (!this.canvas.__rgraph_aa_translated__) { - this.context.translate(0.5, 0.5); - - this.canvas.__rgraph_aa_translated__ = true; - } - - - - /** - * Register this object - */ - RGraph.Register(this); -} - - -/** -* A simple setter -* -* @param string name The name of the property to set -* @param string value The value of the property -*/ -RGraph.Rose.prototype.Set = function (name, value) { - /** - * This should be done first - prepend the propertyy name with "chart." if necessary - */ - if (name.substr(0, 6) != 'chart.') { - name = 'chart.' + name; - } - - this.properties[name.toLowerCase()] = value; - -} - - -/** -* A simple getter -* -* @param string name The name of the property to get -*/ -RGraph.Rose.prototype.Get = function (name) { - /** - * This should be done first - prepend the property name with "chart." if necessary - */ - if (name.substr(0, 6) != 'chart.') { - name = 'chart.' + name; - } - - return this.properties[name.toLowerCase()]; -} - - -/** -* This method draws the rose chart -*/ -RGraph.Rose.prototype.Draw = function () { - /** - * Fire the onbeforedraw event - */ - RGraph.FireCustomEvent(this, 'onbeforedraw'); - - - - /** - * This doesn't affect the chart, but is used for compatibility - */ - this.gutterLeft = this.Get('chart.gutter.left'); - this.gutterRight = this.Get('chart.gutter.right'); - this.gutterTop = this.Get('chart.gutter.top'); - this.gutterBottom = this.Get('chart.gutter.bottom'); - - // Calculate the radius - this.radius = (Math.min(this.canvas.width - this.gutterLeft - this.gutterRight, this.canvas.height - this.gutterTop - this.gutterBottom) / 2); - this.centerx = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft; - this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; - this.angles = []; - this.total = 0; - this.startRadians = 0; - - /** - * Change the centerx marginally if the key is defined - */ - if (this.Get('chart.key') && this.Get('chart.key').length > 0 && this.Get('chart.key').length >= 3) { - this.centerx = this.centerx - this.Get('chart.gutter.right') + 5; - } - - - - // User specified radius, centerx and centery - if (typeof (this.Get('chart.centerx')) == 'number') this.centerx = this.Get('chart.centerx'); - if (typeof (this.Get('chart.centery')) == 'number') this.centery = this.Get('chart.centery'); - if (typeof (this.Get('chart.radius')) == 'number') this.radius = this.Get('chart.radius'); - - /** - * Parse the colors for gradients. Its down here so that the center X/Y can be used - */ - if (!this.colorsParsed) { - - this.parseColors(); - - // Don't want to do this again - this.colorsParsed = true; - } - - this.DrawBackground(); - this.DrawRose(); - this.DrawLabels(); - - /** - * Setup the context menu if required - */ - if (this.Get('chart.contextmenu')) { - RGraph.ShowContext(this); - } - - - /** - * This function enables resizing - */ - if (this.Get('chart.resizable')) { - RGraph.AllowResizing(this); - } - - - /** - * This function enables adjusting - */ - if (this.Get('chart.adjustable')) { - RGraph.AllowAdjusting(this); - } - - - /** - * This installs the event listeners - */ - RGraph.InstallEventListeners(this); - - - /** - * Fire the RGraph ondraw event - */ - RGraph.FireCustomEvent(this, 'ondraw'); -} - -/** -* This method draws the rose charts background -*/ -RGraph.Rose.prototype.DrawBackground = function () { - this.context.lineWidth = 1; - - - - - - // Draw the background grey circles/spokes - if (this.properties['chart.background.grid']) { - if (typeof (this.properties['chart.background.grid.count']) == 'number') { - this.properties['chart.background.grid.size'] = this.radius / this.properties['chart.background.grid.count']; + this.properties = { + 'chart.background.axes': true, + 'chart.background.axes.color': 'black', + 'chart.background.grid': true, + 'chart.background.grid.color': '#ccc', + 'chart.background.grid.size': null, + 'chart.background.grid.spokes': null, + 'chart.background.grid.count': 5, + 'chart.centerx': null, + 'chart.centery': null, + 'chart.radius': null, + 'chart.colors': ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)', 'rgba(0,255,255,0.5)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua'], + 'chart.colors.sequential': false, + 'chart.colors.alpha': null, + 'chart.margin': 0, + 'chart.strokestyle': '#aaa', + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.title.x': null, + 'chart.title.y': null, + 'chart.title.halign': null, + 'chart.title.valign': null, + 'chart.labels': null, + 'chart.labels.position': 'center', + 'chart.labels.axes': 'nsew', + 'chart.labels.offset': 0, + 'chart.text.color': 'black', + 'chart.text.font': 'Arial', + 'chart.text.size': 10, + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.key.colors': null, + 'chart.contextmenu': null, + 'chart.tooltips': null, + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'rgba(0,0,0,0)', + 'chart.highlight.fill': 'rgba(255,255,255,0.7)', + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.adjustable': false, + 'chart.ymax': null, + 'chart.ymin': 0, + 'chart.scale.decimals': null, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.variant': 'stacked', + 'chart.exploded': 0, + 'chart.events.mousemove': null, + 'chart.events.click': null, + 'chart.animation.roundrobin.factor': 1, + 'chart.animation.roundrobin.radius': true, + 'chart.animation.grow.multiplier': 1 } - this.context.beginPath(); - this.context.strokeStyle = this.properties['chart.background.grid.color']; - // Radius must be greater than 0 for Opera to work - for (var i = this.properties['chart.background.grid.size']; i <= this.radius; i += this.properties['chart.background.grid.size']) { - //this.context.moveTo(this.centerx + i, this.centery); - - // Radius must be greater than 0 for Opera to work - this.context.arc(this.centerx, - this.centery, - i, - 0, - TWOPI, - false); + /** + * Create the $ objects. In the case of non-equi-angular rose charts it actually creates too many $ objects, + * but it doesn't matter. + */ + var linear_data = RGraph.array_linearize(this.data); + for (var i=0; i 0 && this.Get('chart.key').length >= 3) { + this.centerx = this.centerx - this.Get('chart.gutter.right') + 5; + } + + + + // User specified radius, centerx and centery + if (typeof(this.Get('chart.centerx')) == 'number') this.centerx = this.Get('chart.centerx'); + if (typeof(this.Get('chart.centery')) == 'number') this.centery = this.Get('chart.centery'); + if (typeof(this.Get('chart.radius')) == 'number') this.radius = this.Get('chart.radius'); + + /** + * Parse the colors for gradients. Its down here so that the center X/Y can be used + */ + if (!this.colorsParsed) { + + this.parseColors(); + + // Don't want to do this again + this.colorsParsed = true; + } + + this.DrawBackground(); + this.DrawRose(); + this.DrawLabels(); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * This function enables adjusting + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + + /** + * This installs the event listeners + */ + RGraph.InstallEventListeners(this); + + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + /** + * This method draws the rose charts background + */ + RGraph.Rose.prototype.DrawBackground = function () + { + this.context.lineWidth = 1; + // Draw the background grey circles/spokes + if (this.properties['chart.background.grid']) { + if (typeof(this.properties['chart.background.grid.count']) == 'number') { + this.properties['chart.background.grid.size'] = this.radius / this.properties['chart.background.grid.count']; + } - // Draw the background lines that go from the center outwards - this.context.beginPath(); - if (typeof (this.properties['chart.background.grid.spokes']) == 'number') { - - var num = (360 / this.properties['chart.background.grid.spokes']); - - for (var i = num; i <= 360; i += num) { + this.context.beginPath(); + this.context.strokeStyle = this.properties['chart.background.grid.color']; // Radius must be greater than 0 for Opera to work - this.context.arc(this.centerx, - this.centery, - this.radius, - (i / (180 / PI)) - HALFPI, - ((i + 0.0001) / (180 / PI)) - HALFPI, - 0); + for (var i=this.properties['chart.background.grid.size']; i<=this.radius; i+=this.properties['chart.background.grid.size']) { - this.context.lineTo(this.centerx, this.centery); - } - } else { - for (var i = 15; i <= 360; i += 15) { + //this.context.moveTo(this.centerx + i, this.centery); - // Radius must be greater than 0 for Opera to work - this.context.arc(this.centerx, - this.centery, - this.radius, - (i / (180 / PI)) - HALFPI, - ((i + 0.0001) / (180 / PI)) - HALFPI, - false); + // Radius must be greater than 0 for Opera to work + this.context.arc(this.centerx, + this.centery, + i, + 0, + TWOPI, + false); + } + this.context.stroke(); - this.context.lineTo(this.centerx, this.centery); - } + + + + + + // Draw the background lines that go from the center outwards + this.context.beginPath(); + if (typeof(this.properties['chart.background.grid.spokes']) == 'number') { + + var num = (360 / this.properties['chart.background.grid.spokes']); + + for (var i=num; i<=360; i+=num) { + + // Radius must be greater than 0 for Opera to work + this.context.arc(this.centerx, + this.centery, + this.radius, + (i / (180 / PI)) - HALFPI, + ((i + 0.0001) / (180 / PI)) - HALFPI, + 0); + + this.context.lineTo(this.centerx, this.centery); + } + } else { + for (var i=15; i<=360; i+=15) { + + // Radius must be greater than 0 for Opera to work + this.context.arc(this.centerx, + this.centery, + this.radius, + (i / (180/ PI)) - HALFPI, + ((i + 0.0001) / (180/ PI)) - HALFPI, + false); + + this.context.lineTo(this.centerx, this.centery); + } + } + this.context.stroke(); + } + + + + if (this.Get('chart.background.axes')) { + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.background.axes.color'); + + // Draw the X axis + this.context.moveTo(this.centerx - this.radius, Math.round(this.centery) ); + this.context.lineTo(this.centerx + this.radius, Math.round(this.centery) ); + + // Draw the X ends + this.context.moveTo(Math.round(this.centerx - this.radius), this.centery - 5); + this.context.lineTo(Math.round(this.centerx - this.radius), this.centery + 5); + this.context.moveTo(Math.round(this.centerx + this.radius), this.centery - 5); + this.context.lineTo(Math.round(this.centerx + this.radius), this.centery + 5); + + // Draw the X check marks + for (var i=(this.centerx - this.radius); i<(this.centerx + this.radius); i+=(this.radius / 5)) { + this.context.moveTo(Math.round(i), this.centery - 3); + this.context.lineTo(Math.round(i), this.centery + 3.5); + } + + // Draw the Y check marks + for (var i=(this.centery - this.radius); i<(this.centery + this.radius); i+=(this.radius / 5)) { + this.context.moveTo(this.centerx - 3, Math.round(i)); + this.context.lineTo(this.centerx + 3, Math.round(i)); + } + + // Draw the Y axis + this.context.moveTo(Math.round(this.centerx), this.centery - this.radius); + this.context.lineTo(Math.round(this.centerx), this.centery + this.radius); + + // Draw the Y ends + this.context.moveTo(this.centerx - 5, Math.round(this.centery - this.radius)); + this.context.lineTo(this.centerx + 5, Math.round(this.centery - this.radius)); + + this.context.moveTo(this.centerx - 5, Math.round(this.centery + this.radius)); + this.context.lineTo(this.centerx + 5, Math.round(this.centery + this.radius)); + + // Stroke it + this.context.closePath(); + this.context.stroke(); } - this.context.stroke(); } - if (this.Get('chart.background.axes')) { - this.context.beginPath(); - this.context.strokeStyle = this.Get('chart.background.axes.color'); + /** + * This method draws the data on the graph + */ + RGraph.Rose.prototype.DrawRose = function () + { + var max = 0; + var data = this.data; + var margin = RGraph.degrees2Radians(this.Get('chart.margin')); - // Draw the X axis - this.context.moveTo(this.centerx - this.radius, Math.round(this.centery)); - this.context.lineTo(this.centerx + this.radius, Math.round(this.centery)); + // Must be at least two data points + //if (data.length < 2) { + // alert('[ROSE] Must be at least two data points! [' + data + ']'); + // return; + //} - // Draw the X ends - this.context.moveTo(Math.round(this.centerx - this.radius), this.centery - 5); - this.context.lineTo(Math.round(this.centerx - this.radius), this.centery + 5); - this.context.moveTo(Math.round(this.centerx + this.radius), this.centery - 5); - this.context.lineTo(Math.round(this.centerx + this.radius), this.centery + 5); - - // Draw the X check marks - for (var i = (this.centerx - this.radius); i < (this.centerx + this.radius); i += (this.radius / 5)) { - this.context.moveTo(Math.round(i), this.centery - 3); - this.context.lineTo(Math.round(i), this.centery + 3.5); - } - - // Draw the Y check marks - for (var i = (this.centery - this.radius); i < (this.centery + this.radius); i += (this.radius / 5)) { - this.context.moveTo(this.centerx - 3, Math.round(i)); - this.context.lineTo(this.centerx + 3, Math.round(i)); - } - - // Draw the Y axis - this.context.moveTo(Math.round(this.centerx), this.centery - this.radius); - this.context.lineTo(Math.round(this.centerx), this.centery + this.radius); - - // Draw the Y ends - this.context.moveTo(this.centerx - 5, Math.round(this.centery - this.radius)); - this.context.lineTo(this.centerx + 5, Math.round(this.centery - this.radius)); - - this.context.moveTo(this.centerx - 5, Math.round(this.centery + this.radius)); - this.context.lineTo(this.centerx + 5, Math.round(this.centery + this.radius)); - - // Stroke it - this.context.closePath(); - this.context.stroke(); - } -} - - - -/** -* This method draws the data on the graph -*/ -RGraph.Rose.prototype.DrawRose = function () { - var max = 0; - var data = this.data; - var margin = RGraph.degrees2Radians(this.Get('chart.margin')); - - // Must be at least two data points - //if (data.length < 2) { - // alert('[ROSE] Must be at least two data points! [' + data + ']'); - // return; - //} - - // Work out the maximum value and the sum - if (!this.Get('chart.ymax')) { - // Work out the max - for (var i = 0; i < data.length; ++i) { - if (typeof (data[i]) == 'number') { - max = Math.max(max, data[i]); - } else if (typeof (data[i]) == 'object' && this.Get('chart.variant') == 'non-equi-angular') { - max = Math.max(max, data[i][0]); + // Work out the maximum value and the sum + if (!this.Get('chart.ymax')) { + // Work out the max + for (var i=0; i -1) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.2), RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + } + + // The "South" axis labels + if (axes.indexOf('s') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + } + + // The "East" axis labels + if (axes.indexOf('e') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + } + + // The "West" axis labels + if (axes.indexOf('w') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); + } + + if (axes.length > 0) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery, typeof(this.Get('chart.ymin')) == 'number' ? RGraph.number_format(this, Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post) : '0', 'center', 'center', true, false, color); + } + } + + + /** + * Draws the circular labels that go around the charts + * + * @param labels array The labels that go around the chart + */ + RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r) + { + var variant = this.Get('chart.variant'); + var position = this.Get('chart.labels.position'); + var r = r + 5 + this.Get('chart.labels.offset'); + + for (var i=0; i this.centerx) { + halign = 'left'; + } else if (x == this.centerx) { + halign = 'center'; + } else { + halign = 'right'; + } + + RGraph.Text(context, font_face, font_size, x, y, String(labels[i]), 'center', halign); } } - // Turn off the transparency - if (this.Get('chart.colors.alpha')) { - this.context.globalAlpha = 1; - } - - // Draw the title if any has been set - if (this.Get('chart.title')) { - RGraph.DrawTitle(this, - this.Get('chart.title'), - (this.canvas.height / 2) - this.radius, - this.centerx, - this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); - } -} - - -/** -* Unsuprisingly, draws the labels -*/ -RGraph.Rose.prototype.DrawLabels = function () { - this.context.lineWidth = 1; - var key = this.Get('chart.key'); - - if (key && key.length) { - RGraph.DrawKey(this, key, this.Get('chart.colors')); - } - - // Set the color to black - this.context.fillStyle = this.properties['chart.text.color']; - this.context.strokeStyle = 'black'; - - var r = this.radius; - var font_face = this.Get('chart.text.font'); - var font_size = this.Get('chart.text.size'); - var context = this.context; - var axes = this.Get('chart.labels.axes').toLowerCase(); - var decimals = this.Get('chart.scale.decimals'); - var units_pre = this.Get('chart.units.pre'); - var units_post = this.Get('chart.units.post'); - - // Draw any circular labels - if (typeof (this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) { - this.DrawCircularLabels(context, this.Get('chart.labels'), font_face, font_size, r + 10); - } - - - // Size can be specified seperately for the scale now - if (typeof (this.properties['chart.text.size.scale']) == 'number') { - font_size = this.properties['chart.text.size.scale']; - } - - - var color = 'rgba(255,255,255,0.8)'; - - // The "North" axis labels - if (axes.indexOf('n') > -1) { - RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.2), RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - } - - // The "South" axis labels - if (axes.indexOf('s') > -1) { - RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - } - - // The "East" axis labels - if (axes.indexOf('e') > -1) { - RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - } - - // The "West" axis labels - if (axes.indexOf('w') > -1) { - RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color); - } - - if (axes.length > 0) { - RGraph.Text(context, font_face, font_size, this.centerx, this.centery, typeof (this.Get('chart.ymin')) == 'number' ? RGraph.number_format(this, Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post) : '0', 'center', 'center', true, false, color); - } -} - - -/** -* Draws the circular labels that go around the charts -* -* @param labels array The labels that go around the chart -*/ -RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r) { - var variant = this.Get('chart.variant'); - var position = this.Get('chart.labels.position'); - var r = r + 5 + this.Get('chart.labels.offset'); - - for (var i = 0; i < this.angles.length; ++i) { - if (typeof (variant) == 'string' && variant == 'non-equi-angular') { - var a = Number(this.angles[i][0]) + ((this.angles[i][1] - this.angles[i][0]) / 2); - } else { - var a = (TWOPI / labels.length) * (i + 1) - (TWOPI / (labels.length * 2)); - var a = a - HALFPI + (this.Get('chart.labels.position') == 'edge' ? ((TWOPI / labels.length) / 2) : 0); - } - - var x = this.centerx + (Math.cos(a) * r); - var y = this.centery + (Math.sin(a) * r); - - // Horizontal alignment - if (x > this.centerx) { - halign = 'left'; - } else if (x == this.centerx) { - halign = 'center'; - } else { - halign = 'right'; - } - - RGraph.Text(context, font_face, font_size, x, y, String(labels[i]), 'center', halign); - } -} @@ -844,45 +853,45 @@ RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, - -/** -* This function is for use with circular graph types, eg the Pie or Rose. Pass it your event object -* and it will pass you back the corresponding segment details as an array: -* -* [x, y, r, startAngle, endAngle] -* -* Angles are measured in degrees, and are measured from the "east" axis (just like the canvas). -* -* @param object e Your event object -*/ -RGraph.Rose.prototype.getShape = - RGraph.Rose.prototype.getSegment = function (e) { + /** + * This function is for use with circular graph types, eg the Pie or Rose. Pass it your event object + * and it will pass you back the corresponding segment details as an array: + * + * [x, y, r, startAngle, endAngle] + * + * Angles are measured in degrees, and are measured from the "east" axis (just like the canvas). + * + * @param object e Your event object + */ + RGraph.Rose.prototype.getShape = + RGraph.Rose.prototype.getSegment = function (e) + { RGraph.FixEventObject(e); - var canvas = this.canvas; + var canvas = this.canvas; var context = this.context; - var angles = this.angles; - var ret = []; + var angles = this.angles; + var ret = []; /** * Go through all of the angles checking each one */ - for (var i = 0; i < angles.length; ++i) { + for (var i=0; i 0) { - this.context.arc(shape['x'], shape['y'], shape['radius.start'], shape['angle.end'], shape['angle.start'], true); } else { - this.context.lineTo(shape['x'], shape['y']); + explodedx = 0; + explodedy = 0; } - this.context.closePath(); - this.context.stroke(); - this.context.fill(); + return [explodedx, explodedy]; } -} -/** -* The getObjectByXY() worker method. Don't call this call: -* -* RGraph.ObjectRegistry.getObjectByXY(e) -* -* @param object e The event object -*/ -RGraph.Rose.prototype.getObjectByXY = function (e) { - var mouseXY = RGraph.getMouseXY(e); + /** + * This function facilitates the installation of tooltip event listeners if + * tooltips are defined. + */ + RGraph.Rose.prototype.AllowTooltips = function () + { + // Preload any tooltip images that are used in the tooltips + RGraph.PreLoadTooltipImages(this); - // Work out the radius - var radius = RGraph.getHypLength(this.centerx, this.centery, mouseXY[0], mouseXY[1]); - if ( - mouseXY[0] > (this.centerx - this.radius) - && mouseXY[0] < (this.centerx + this.radius) - && mouseXY[1] > (this.centery - this.radius) - && mouseXY[1] < (this.centery + this.radius) - && radius <= this.radius - ) { + /** + * This installs the window mousedown event listener that lears any + * highlight that may be visible. + */ + RGraph.InstallWindowMousedownTooltipListener(this); - return this; + + /** + * This installs the canvas mousemove event listener. This function + * controls the pointer shape. + */ + RGraph.InstallCanvasMousemoveTooltipListener(this); + + + /** + * This installs the canvas mouseup event listener. This is the + * function that actually shows the appropriate tooltip (if any). + */ + RGraph.InstallCanvasMouseupTooltipListener(this); } -} -/** -* This function positions a tooltip when it is displayed -* -* @param obj object The chart object -* @param int x The X coordinate specified for the tooltip -* @param int y The Y coordinate specified for the tooltip -* @param objec tooltip The tooltips DIV element -*/ -RGraph.Rose.prototype.positionTooltip = function (obj, x, y, tooltip, idx) { + /** + * Each object type has its own Highlight() function which highlights the appropriate shape + * + * @param object shape The shape to highlight + */ + RGraph.Rose.prototype.Highlight = function (shape) + { + if (this.Get('chart.tooltips.highlight')) { + // Add the new segment highlight + this.context.beginPath(); - var coordX = obj.angles[idx][4]; - var coordY = obj.angles[idx][5]; - var angleStart = obj.angles[idx][0]; - var angleEnd = obj.angles[idx][1]; - var radius = ((obj.angles[idx][3] - obj.angles[idx][2]) / 2) + obj.angles[idx][2]; + this.context.strokeStyle = this.Get('chart.highlight.stroke'); + this.context.fillStyle = this.Get('chart.highlight.fill'); - var angleCenter = ((angleEnd - angleStart) / 2) + angleStart; - var canvasXY = RGraph.getCanvasXY(obj.canvas); - var gutterLeft = obj.Get('chart.gutter.left'); - var gutterTop = obj.Get('chart.gutter.top'); - var width = tooltip.offsetWidth; - var height = tooltip.offsetHeight; + this.context.arc(shape['x'], shape['y'], shape['radius.end'], shape['angle.start'], shape['angle.end'], false); + + if (shape['radius.start'] > 0) { + this.context.arc(shape['x'], shape['y'], shape['radius.start'], shape['angle.end'], shape['angle.start'], true); + } else { + this.context.lineTo(shape['x'], shape['y']); + } + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + } + } - // By default any overflow is hidden - tooltip.style.overflow = ''; - // The arrow - var img = new Image(); - img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC'; - img.style.position = 'absolute'; - img.id = '__rgraph_tooltip_pointer__'; - img.style.top = (tooltip.offsetHeight - 2) + 'px'; - tooltip.appendChild(img); + /** + * The getObjectByXY() worker method. Don't call this call: + * + * RGraph.ObjectRegistry.getObjectByXY(e) + * + * @param object e The event object + */ + RGraph.Rose.prototype.getObjectByXY = function (e) + { + var mouseXY = RGraph.getMouseXY(e); - // Reposition the tooltip if at the edges: + // Work out the radius + var radius = RGraph.getHypLength(this.centerx, this.centery, mouseXY[0], mouseXY[1]); - // LEFT edge - if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width / 2)) < 10) { - tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width * 0.1)) + 'px'; - tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius) - height - 5) + 'px'; - img.style.left = ((width * 0.1) - 8.5) + 'px'; + if ( + mouseXY[0] > (this.centerx - this.radius) + && mouseXY[0] < (this.centerx + this.radius) + && mouseXY[1] > (this.centery - this.radius) + && mouseXY[1] < (this.centery + this.radius) + && radius <= this.radius + ) { + + return this; + } + } + + + + /** + * This function positions a tooltip when it is displayed + * + * @param obj object The chart object + * @param int x The X coordinate specified for the tooltip + * @param int y The Y coordinate specified for the tooltip + * @param objec tooltip The tooltips DIV element + */ + RGraph.Rose.prototype.positionTooltip = function (obj, x, y, tooltip, idx) + { + + var coordX = obj.angles[idx][4]; + var coordY = obj.angles[idx][5]; + var angleStart = obj.angles[idx][0]; + var angleEnd = obj.angles[idx][1]; + var radius = ((obj.angles[idx][3] - obj.angles[idx][2]) / 2) + obj.angles[idx][2]; + + var angleCenter = ((angleEnd - angleStart) / 2) + angleStart; + var canvasXY = RGraph.getCanvasXY(obj.canvas); + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterTop = obj.Get('chart.gutter.top'); + var width = tooltip.offsetWidth; + var height = tooltip.offsetHeight; + + + // By default any overflow is hidden + tooltip.style.overflow = ''; + + // The arrow + var img = new Image(); + img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC'; + img.style.position = 'absolute'; + img.id = '__rgraph_tooltip_pointer__'; + img.style.top = (tooltip.offsetHeight - 2) + 'px'; + tooltip.appendChild(img); + + // Reposition the tooltip if at the edges: + + // LEFT edge + if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width / 2)) < 10) { + tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius)- (width * 0.1)) + 'px'; + tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px'; + img.style.left = ((width * 0.1) - 8.5) + 'px'; // RIGHT edge - } else if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) + (width / 2)) > (document.body.offsetWidth - 10)) { - tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width * 0.9)) + 'px'; - tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius) - height - 5) + 'px'; - img.style.left = ((width * 0.9) - 8.5) + 'px'; + } else if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) + (width / 2)) > (document.body.offsetWidth - 10) ) { + tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width * 0.9)) + 'px'; + tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px'; + img.style.left = ((width * 0.9) - 8.5) + 'px'; // Default positioning - CENTERED - } else { - tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width / 2)) + 'px'; - tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius) - height - 5) + 'px'; - img.style.left = ((width * 0.5) - 8.5) + 'px'; - } -} - - - -/** -* This method gives you the relevant radius for a particular value -* -* @param number value The relevant value to get the radius for -*/ -RGraph.Rose.prototype.getRadius = function (value) { - // Range checking (the Rose minimum is always 0) - if (value < 0 || value > this.max) { - return null; + } else { + tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius)- (width / 2)) + 'px'; + tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px'; + img.style.left = ((width * 0.5) - 8.5) + 'px'; + } } - var r = (value / this.max) * this.radius; - return r; -} - - - -/** -* This allows for easy specification of gradients -*/ -RGraph.Rose.prototype.parseColors = function () { - for (var i = 0; i < this.properties['chart.colors'].length; ++i) { - this.properties['chart.colors'][i] = this.parseSingleColorForGradient(this.properties['chart.colors'][i]); - } /** - * Key colors + * This method gives you the relevant radius for a particular value + * + * @param number value The relevant value to get the radius for */ - if (!RGraph.is_null(this.properties['chart.key.colors'])) { - for (var i = 0; i < this.properties['chart.key.colors'].length; ++i) { - this.properties['chart.key.colors'][i] = this.parseSingleColorForGradient(this.properties['chart.key.colors'][i]); + RGraph.Rose.prototype.getRadius = function (value) + { + // Range checking (the Rose minimum is always 0) + if (value < 0 || value > this.max) { + return null; } + + var r = (value / this.max) * this.radius; + + return r; } - this.properties['chart.text.color'] = this.parseSingleColorForGradient(this.properties['chart.text.color']); - this.properties['chart.title.color'] = this.parseSingleColorForGradient(this.properties['chart.title.color']); - this.properties['chart.highlight.fill'] = this.parseSingleColorForGradient(this.properties['chart.highlight.fill']); - this.properties['chart.highlight.stroke'] = this.parseSingleColorForGradient(this.properties['chart.highlight.stroke']); -} - -/** -* This parses a single color value -*/ -RGraph.Rose.prototype.parseSingleColorForGradient = function (color) { - var canvas = this.canvas; - var context = this.context; - - if (!color || typeof (color) != 'string') { - return color; - } - - if (color.match(/^gradient\((.*)\)$/i)) { - - var parts = RegExp.$1.split(':'); - - // Create the gradient - //var grad = context.createLinearGradient(0,0,canvas.width,0); - var grad = context.createRadialGradient(this.centerx, this.centery, 0, this.centerx, this.centery, this.radius); - - var diff = 1 / (parts.length - 1); - - grad.addColorStop(0, RGraph.trim(parts[0])); - - for (var j = 1; j < parts.length; ++j) { - grad.addColorStop(j * diff, RGraph.trim(parts[j])); + /** + * This allows for easy specification of gradients + */ + RGraph.Rose.prototype.parseColors = function () + { + for (var i=0; i threshold && ledBlinking && !thresholdRising)) { + (value > threshold && ledBlinking && !thresholdRising)) { ledBlinking = false; blink(ledBlinking); if (playAlarm) { @@ -898,7 +898,7 @@ var steelseries = (function () { audioElement.play(); } } else if ((value < threshold && ledBlinking && thresholdRising) || - (value > threshold && ledBlinking && !thresholdRising)) { + (value > threshold && ledBlinking && !thresholdRising)) { ledBlinking = false; blink(ledBlinking); if (playAlarm) { @@ -919,7 +919,7 @@ var steelseries = (function () { }; // do we have a callback function to process? - if (callback && typeof (callback) === "function") { + if (callback && typeof(callback) === "function") { tween.onMotionFinished = callback; } @@ -969,30 +969,26 @@ var steelseries = (function () { this.setTitleString = function (title) { titleString = title; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setUnitString = function (unit) { unitString = unit; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setMinValue = function (value) { minValue = parseFloat(value); - resetBuffers({ - frame: true, - background: true - }); - init({ - frame: true, - background: true - }); + resetBuffers({frame: true, + background: true}); + init({frame: true, + background: true}); this.repaint(); return this; }; @@ -1003,14 +999,10 @@ var steelseries = (function () { this.setMaxValue = function (value) { maxValue = parseFloat(value); - resetBuffers({ - frame: true, - background: true - }); - init({ - frame: true, - background: true - }); + resetBuffers({frame: true, + background: true}); + init({frame: true, + background: true}); this.repaint(); return this; }; @@ -1023,36 +1015,30 @@ var steelseries = (function () { newValue = parseFloat(newValue); var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue); threshold = targetValue; - resetBuffers({ background: true }); - init({ background: true }); + 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 - }); + 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 - }); + resetBuffers({background: true, + foreground: true}); + init({background: true, + foreground: true + }); this.repaint(); return this; }; @@ -1079,69 +1065,65 @@ var steelseries = (function () { }; this.setFrameDesign = function (newFrameDesign) { - resetBuffers({ frame: true }); + resetBuffers({frame: true}); frameDesign = newFrameDesign; - init({ frame: true }); + init({frame: true}); this.repaint(); return this; }; this.setBackgroundColor = function (newBackgroundColor) { - resetBuffers({ - background: true, - pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false) // type2 & 13 depend on background - }); + resetBuffers({background: true, + pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false) // type2 & 13 depend on background + }); backgroundColor = newBackgroundColor; - init({ - background: true, // type2 & 13 depend on background - pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false) - }); + init({background: true, // type2 & 13 depend on background + pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false) + }); this.repaint(); return this; }; this.setForegroundType = function (newForegroundType) { - resetBuffers({ foreground: true }); + resetBuffers({foreground: true}); foregroundType = newForegroundType; - init({ foreground: true }); + init({foreground: true}); this.repaint(); return this; }; this.setPointerType = function (newPointerType) { - resetBuffers({ - pointer: true, - foreground: true - }); + resetBuffers({pointer: true, + foreground: true + }); pointerType = newPointerType; - init({ - pointer: true, - foreground: true - }); + init({pointer: true, + foreground: true + }); this.repaint(); return this; }; this.setPointerColor = function (newPointerColor) { - resetBuffers({ pointer: true }); + resetBuffers({pointer: true}); pointerColor = newPointerColor; - init({ pointer: true }); + init({pointer: true}); this.repaint(); return this; }; this.setLedColor = function (newLedColor) { - resetBuffers({ led: true }); + resetBuffers({led: true}); ledColor = newLedColor; - init({ led: true }); + init({led: true}); this.repaint(); return this; }; this.setUserLedColor = function (newLedColor) { - resetBuffers({ userLed: true }); + resetBuffers({userLed: true}); userLedColor = newLedColor; - init({ userLed: true }); + init({userLed: true}); this.repaint(); return this; }; @@ -1195,8 +1177,8 @@ var steelseries = (function () { this.setLcdColor = function (newLcdColor) { lcdColor = newLcdColor; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; @@ -1215,32 +1197,30 @@ var steelseries = (function () { this.setFractionalScaleDecimals = function (decimals) { fractionalScaleDecimals = parseInt(decimals, 10); - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setLabelNumberFormat = function (format) { labelNumberFormat = format; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.repaint = function () { if (!initialized) { - init({ - frame: true, - background: true, - led: true, - userLed: true, - pointer: true, - trend: true, - foreground: true, - odo: true - }); + init({frame: true, + background: true, + led: true, + userLed: true, + pointer: true, + trend: true, + foreground: true, + odo: true}); } mainCtx.clearRect(0, 0, size, size); @@ -1275,18 +1255,18 @@ var steelseries = (function () { // Draw the trend indicator if (trendVisible) { switch (trendIndicator.state) { - case 'up': - mainCtx.drawImage(trendUpBuffer, trendPosX, trendPosY); - break; - case 'steady': - mainCtx.drawImage(trendSteadyBuffer, trendPosX, trendPosY); - break; - case 'down': - mainCtx.drawImage(trendDownBuffer, trendPosX, trendPosY); - break; - case 'off': - mainCtx.drawImage(trendOffBuffer, trendPosX, trendPosY); - break; + case 'up': + mainCtx.drawImage(trendUpBuffer, trendPosX, trendPosY); + break; + case 'steady': + mainCtx.drawImage(trendSteadyBuffer, trendPosX, trendPosY); + break; + case 'down': + mainCtx.drawImage(trendDownBuffer, trendPosX, trendPosY); + break; + case 'off': + mainCtx.drawImage(trendOffBuffer, trendPosX, trendPosY); + break; } } @@ -1347,7 +1327,7 @@ var steelseries = (function () { 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 + minValue : parameters.threshold), + threshold = (undefined === parameters.threshold ? (maxValue - minValue) / 2 + minValue: parameters.threshold), thresholdRising = (undefined === parameters.thresholdRising ? true : parameters.thresholdRising), section = (undefined === parameters.section ? null : parameters.section), useSectionColors = (undefined === parameters.useSectionColors ? false : parameters.useSectionColors), @@ -1453,47 +1433,47 @@ var steelseries = (function () { 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; - break; + case 'type1': + freeAreaAngle = 0; + rotationOffset = PI; + bargraphOffset = 0; + tickmarkOffset = HALF_PI; + angleRange = HALF_PI; + degAngleRange = angleRange * DEG_FACTOR; + angleStep = angleRange / range; + break; - case 'type2': - freeAreaAngle = 0; - rotationOffset = PI; - bargraphOffset = 0; - tickmarkOffset = HALF_PI; - angleRange = PI; - degAngleRange = angleRange * DEG_FACTOR; - angleStep = angleRange / range; - break; + case 'type2': + freeAreaAngle = 0; + rotationOffset = PI; + bargraphOffset = 0; + tickmarkOffset = HALF_PI; + angleRange = PI; + degAngleRange = angleRange * DEG_FACTOR; + angleStep = angleRange / range; + break; - case 'type3': - freeAreaAngle = 0; - rotationOffset = HALF_PI; - bargraphOffset = -HALF_PI; - tickmarkOffset = 0; - angleRange = 1.5 * PI; - degAngleRange = angleRange * DEG_FACTOR; - angleStep = angleRange / range; - break; + case 'type3': + freeAreaAngle = 0; + rotationOffset = HALF_PI; + bargraphOffset = -HALF_PI; + tickmarkOffset = 0; + angleRange = 1.5 * PI; + degAngleRange = angleRange * DEG_FACTOR; + angleStep = angleRange / range; + break; - 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; - break; + 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; + break; } // Buffer for the frame @@ -1576,39 +1556,39 @@ var steelseries = (function () { } switch (gaugeType.type) { - case 'type1': - freeAreaAngle = 0; - rotationOffset = PI; - tickmarkOffset = HALF_PI; - angleRange = HALF_PI; - angleStep = angleRange / range; - break; + case 'type1': + freeAreaAngle = 0; + rotationOffset = PI; + tickmarkOffset = HALF_PI; + angleRange = HALF_PI; + angleStep = angleRange / range; + break; - case 'type2': - freeAreaAngle = 0; - rotationOffset = PI; - tickmarkOffset = HALF_PI; - angleRange = PI; - angleStep = angleRange / range; - break; + case 'type2': + freeAreaAngle = 0; + rotationOffset = PI; + tickmarkOffset = HALF_PI; + angleRange = PI; + angleStep = angleRange / range; + break; - case 'type3': - freeAreaAngle = 0; - rotationOffset = HALF_PI; - tickmarkOffset = 0; - angleRange = 1.5 * PI; - angleStep = angleRange / range; - break; + case 'type3': + freeAreaAngle = 0; + rotationOffset = HALF_PI; + tickmarkOffset = 0; + angleRange = 1.5 * PI; + angleStep = angleRange / range; + break; - 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; - break; + 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; + break; } angle = rotationOffset + (value - minValue) * angleStep; }; @@ -1621,7 +1601,7 @@ var steelseries = (function () { var drawBackground = (undefined === parameters.background ? false : parameters.background); var drawLed = (undefined === parameters.led ? false : parameters.led); var drawUserLed = (undefined === parameters.userLed ? false : parameters.userLed); - var drawValue = (undefined === parameters.value ? false : parameters.value); + var drawValue = (undefined === parameters.value ? false : parameters.value); var drawForeground = (undefined === parameters.foreground ? false : parameters.foreground); var drawTrend = (undefined === parameters.trend ? false : parameters.trend); @@ -1667,7 +1647,7 @@ var steelseries = (function () { } // Create tickmarks in background buffer (backgroundBuffer) - if (drawBackground && backgroundVisible) { + if (drawBackground && backgroundVisible) { drawTickmarksImage(backgroundContext, labelNumberFormat); // Create title in background buffer (backgroundBuffer) @@ -1688,11 +1668,9 @@ var steelseries = (function () { 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) - }); + 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); } @@ -1926,36 +1904,36 @@ var steelseries = (function () { ctx.translate(TEXT_TRANSLATE_X, 0); switch (tickLabelOrientation.type) { - case 'horizontal': - textRotationAngle = -alpha; - break; + case 'horizontal': + textRotationAngle = -alpha; + break; - case 'tangent': - textRotationAngle = (alpha <= HALF_PI + PI ? PI : 0); - break; + case 'tangent': + textRotationAngle = (alpha <= HALF_PI + PI ? PI : 0); + break; - case 'normal': - /* falls through */ - default: - textRotationAngle = HALF_PI; - break; + case 'normal': + /* falls through */ + default: + textRotationAngle = HALF_PI; + break; } ctx.rotate(textRotationAngle); switch (labelNumberFormat.format) { - case 'fractional': - ctx.fillText((valueCounter.toFixed(fractionalScaleDecimals)), 0, 0, TEXT_WIDTH); - break; + case 'fractional': + ctx.fillText((valueCounter.toFixed(fractionalScaleDecimals)), 0, 0, TEXT_WIDTH); + break; - case 'scientific': - ctx.fillText((valueCounter.toPrecision(2)), 0, 0, TEXT_WIDTH); - break; + case 'scientific': + ctx.fillText((valueCounter.toPrecision(2)), 0, 0, TEXT_WIDTH); + break; - case 'standard': - /* falls through */ - default: - ctx.fillText((valueCounter.toFixed(0)), 0, 0, TEXT_WIDTH); - break; + case 'standard': + /* falls through */ + default: + ctx.fillText((valueCounter.toFixed(0)), 0, 0, TEXT_WIDTH); + break; } ctx.translate(-TEXT_TRANSLATE_X, 0); ctx.restore(); @@ -2034,7 +2012,7 @@ var steelseries = (function () { audioElement.play(); } } else if ((value < threshold && ledBlinking && thresholdRising) || - (value > threshold && ledBlinking && !thresholdRising)) { + (value > threshold && ledBlinking && !thresholdRising)) { ledBlinking = false; blink(ledBlinking); if (playAlarm) { @@ -2077,7 +2055,7 @@ var steelseries = (function () { audioElement.play(); } } else if ((value < threshold && ledBlinking && thresholdRising) || - (value > threshold && ledBlinking && !thresholdRising)) { + (value > threshold && ledBlinking && !thresholdRising)) { ledBlinking = false; blink(ledBlinking); if (playAlarm) { @@ -2091,7 +2069,7 @@ var steelseries = (function () { }; // do we have a callback function to process? - if (callback && typeof (callback) === "function") { + if (callback && typeof(callback) === "function") { tween.onMotionFinished = callback; } @@ -2101,55 +2079,51 @@ var steelseries = (function () { }; this.setFrameDesign = function (newFrameDesign) { - resetBuffers({ frame: true }); + resetBuffers({frame: true}); frameDesign = newFrameDesign; - init({ frame: true }); + init({frame: true}); this.repaint(); return this; }; this.setBackgroundColor = function (newBackgroundColor) { - resetBuffers({ - background: true, - led: true - }); + resetBuffers({background: true, + led: true}); backgroundColor = newBackgroundColor; - init({ - background: true, - led: true - }); + init({background: true, + led: true}); this.repaint(); return this; }; this.setForegroundType = function (newForegroundType) { - resetBuffers({ foreground: true }); + resetBuffers({foreground: true}); foregroundType = newForegroundType; - init({ foreground: true }); + init({foreground: true}); this.repaint(); return this; }; this.setValueColor = function (newValueColor) { - resetBuffers({ value: true }); + resetBuffers({value: true}); valueColor = newValueColor; - init({ value: true }); + init({value: true}); this.repaint(); return this; }; this.setLedColor = function (newLedColor) { - resetBuffers({ led: true }); + resetBuffers({led: true}); ledColor = newLedColor; - init({ led: true }); + init({led: true}); this.repaint(); return this; }; this.setUserLedColor = function (newLedColor) { - resetBuffers({ userLed: true }); + resetBuffers({userLed: true}); userLedColor = newLedColor; - init({ userLed: true }); + init({userLed: true}); this.repaint(); return this; }; @@ -2203,8 +2177,8 @@ var steelseries = (function () { this.setLcdColor = function (newLcdColor) { lcdColor = newLcdColor; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; @@ -2245,8 +2219,8 @@ var steelseries = (function () { this.setMinValue = function (value) { minValue = value; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; @@ -2257,8 +2231,8 @@ var steelseries = (function () { this.setMaxValue = function (value) { maxValue = value; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; @@ -2271,8 +2245,8 @@ var steelseries = (function () { newValue = parseFloat(newValue); var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue); threshold = targetValue; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; @@ -2288,16 +2262,16 @@ var steelseries = (function () { this.setTitleString = function (title) { titleString = title; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setUnitString = function (unit) { unitString = unit; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; @@ -2316,15 +2290,15 @@ var steelseries = (function () { this.setFractionalScaleDecimals = function (decimals) { fractionalScaleDecimals = parseInt(decimals, 10); - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); }; this.setLabelNumberFormat = function (format) { labelNumberFormat = format; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; @@ -2339,15 +2313,13 @@ var steelseries = (function () { fraction; if (!initialized) { - init({ - frame: true, - background: true, - led: true, - userLed: true, - value: true, - trend: true, - foreground: true - }); + init({frame: true, + background: true, + led: true, + userLed: true, + value: true, + trend: true, + foreground: true}); } mainCtx.clearRect(0, 0, size, size); @@ -2411,18 +2383,18 @@ var steelseries = (function () { // Draw the trend indicator if (trendVisible) { switch (trendIndicator.state) { - case 'up': - mainCtx.drawImage(trendUpBuffer, trendPosX, trendPosY); - break; - case 'steady': - mainCtx.drawImage(trendSteadyBuffer, trendPosX, trendPosY); - break; - case 'down': - mainCtx.drawImage(trendDownBuffer, trendPosX, trendPosY); - break; - case 'off': - mainCtx.drawImage(trendOffBuffer, trendPosX, trendPosY); - break; + case 'up': + mainCtx.drawImage(trendUpBuffer, trendPosX, trendPosY); + break; + case 'steady': + mainCtx.drawImage(trendSteadyBuffer, trendPosX, trendPosY); + break; + case 'down': + mainCtx.drawImage(trendDownBuffer, trendPosX, trendPosY); + break; + case 'off': + mainCtx.drawImage(trendOffBuffer, trendPosX, trendPosY); + break; } } @@ -2508,7 +2480,7 @@ var steelseries = (function () { mainCtx.clip(); if ((lcdColor === steelseries.LcdColor.STANDARD || lcdColor === steelseries.LcdColor.STANDARD_GREEN) && - section === null) { + section === null) { mainCtx.shadowColor = 'gray'; mainCtx.shadowOffsetX = imageHeight * 0.035; mainCtx.shadowOffsetY = imageHeight * 0.035; @@ -2666,7 +2638,7 @@ var steelseries = (function () { lcdBuffer = createLcdBackgroundImage(width, height, lcdColor); if (null !== section && 0 < section.length) { - for (sectionIndex = 0; sectionIndex < section.length; sectionIndex++) { + for (sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) { sectionBuffer[sectionIndex] = createLcdSectionImage(width, height, section[sectionIndex].color, lcdColor); sectionForegroundColor[sectionIndex] = createSectionForegroundColor(section[sectionIndex].color); } @@ -2692,7 +2664,7 @@ var steelseries = (function () { this.setSection = function (newSection) { section = newSection; - init({ background: true, foreground: true }); + init({background: true, foreground: true}); this.repaint(); return this; }; @@ -2724,7 +2696,7 @@ var steelseries = (function () { var sectionIndex; // Draw sections if (null !== section && 0 < section.length) { - for (sectionIndex = 0; sectionIndex < section.length; sectionIndex++) { + for (sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) { if (value >= section[sectionIndex].start && value <= section[sectionIndex].stop) { lcdBackgroundBuffer = sectionBuffer[sectionIndex]; lcdTextColor = sectionForegroundColor[sectionIndex]; @@ -2827,7 +2799,7 @@ var steelseries = (function () { // Buffer for LCD displays var lcdBuffer; - // Buffer for latest pointer /images painting code + // Buffer for latest pointer images painting code var pointerBufferLatest = createBuffer(size, size); var pointerContextLatest = pointerBufferLatest.getContext('2d'); @@ -2947,62 +2919,62 @@ var steelseries = (function () { // 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); - break; - 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); - break; - 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); - break; - case 135: //SW - ctx.translate(imageWidth * 0.29, 0); - ctx.rotate(HALF_PI); - ctx.font = smlFont; - ctx.fillText(pointSymbols[5], 0, 0); - ctx.translate(-imageWidth * 0.29, 0); - break; - 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); - break; - 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); - break; - 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); - break; - 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); - break; + 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); + break; + 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); + break; + 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); + break; + case 135: //SW + ctx.translate(imageWidth * 0.29, 0); + ctx.rotate(HALF_PI); + ctx.font = smlFont; + ctx.fillText(pointSymbols[5], 0, 0); + ctx.translate(-imageWidth * 0.29, 0); + break; + 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); + break; + 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); + break; + 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); + break; + 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); + break; } ctx.restore(); @@ -3034,69 +3006,69 @@ var steelseries = (function () { if (pointSymbolsVisible) { 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); - ctx.translate(-CARDINAL_TRANSLATE_X, 0); - break; - 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); - break; - 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); - break; - 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); - break; + case 360: + ctx.translate(CARDINAL_TRANSLATE_X, 0); + ctx.rotate(HALF_PI); + ctx.font = stdFont; + ctx.fillText(pointSymbols[2], 0, 0, TEXT_WIDTH); + ctx.translate(-CARDINAL_TRANSLATE_X, 0); + break; + 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); + break; + 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); + break; + 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); + break; - case 5: - case 85: - case 95: - case 175: - case 185: - case 265: - case 275: - case 355: - //leave room for ordinal labels - break; + case 5: + case 85: + case 95: + case 175: + case 185: + case 265: + case 275: + case 355: + //leave room for ordinal labels + break; - default: - if ((i + 90) % 20) { - ctx.lineWidth = ((i + 90) % 5) ? 1.5 : 1; - ctx.beginPath(); - ctx.moveTo(OUTER_POINT, 0); - 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(); - 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); - } + default: + if ((i + 90) % 20) { + ctx.lineWidth = ((i + 90) % 5) ? 1.5 : 1; + ctx.beginPath(); + ctx.moveTo(OUTER_POINT, 0); + 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(); + 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); + } } } else { @@ -3327,7 +3299,7 @@ var steelseries = (function () { requestAnimFrame(gauge.repaint); } // do we have a callback function to process? - if (callback && typeof (callback) === "function") { + if (callback && typeof(callback) === "function") { callback(); } }; @@ -3379,7 +3351,7 @@ var steelseries = (function () { requestAnimFrame(gauge.repaint); } // do we have a callback function to process? - if (callback && typeof (callback) === "function") { + if (callback && typeof(callback) === "function") { callback(); } }; @@ -3399,121 +3371,115 @@ var steelseries = (function () { this.setArea = function (areaVal) { area = areaVal; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setSection = function (areaSec) { section = areaSec; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setFrameDesign = function (newFrameDesign) { frameDesign = newFrameDesign; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setBackgroundColor = function (newBackgroundColor) { backgroundColor = newBackgroundColor; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setForegroundType = function (newForegroundType) { - resetBuffers({ foreground: true }); + resetBuffers({foreground: true}); foregroundType = newForegroundType; - init({ foreground: true }); + init({foreground: true}); this.repaint(); return this; }; this.setPointerColor = function (newPointerColor) { - resetBuffers({ pointer: true }); + resetBuffers({pointer: true}); pointerColor = newPointerColor; - init({ pointer: true }); + init({pointer: true}); this.repaint(); return this; }; this.setPointerColorAverage = function (newPointerColor) { - resetBuffers({ pointer: true }); + resetBuffers({pointer: true}); pointerColorAverage = newPointerColor; - init({ pointer: true }); + init({pointer: true}); this.repaint(); return this; }; this.setPointerType = function (newPointerType) { pointerTypeLatest = newPointerType; - resetBuffers({ - pointer: true, - foreground: true - }); - init({ - pointer: true, - foreground: true - }); + 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 - }); + 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 }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setLcdColor = function (newLcdColor) { lcdColor = newLcdColor; - resetBuffers({ background: true }); - init({ background: true }); + resetBuffers({background: true}); + init({background: true}); this.repaint(); return this; }; this.setLcdTitleStrings = function (titles) { lcdTitleStrings = titles; - resetBuffers({ background: true }); - init({ background: true }); + 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 - }); + init({frame: true, + background: true, + led: true, + pointer: true, + foreground: true}); } mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height); @@ -3547,7 +3513,7 @@ var steelseries = (function () { // Draw the pointer mainCtx.drawImage(pointerBufferAverage, 0, 0); // Define rotation angle difference for average pointer - angleLatest = valueLatest * angleStep - angleAverage; + angleLatest = valueLatest * angleStep - angleAverage; mainCtx.translate(centerX, centerY); mainCtx.rotate(angleLatest); mainCtx.translate(-centerX, -centerY); @@ -3703,7 +3669,7 @@ var steelseries = (function () { foregroundBuffer, foregroundContext, digitBuffer, digitContext, decimalBuffer, decimalContext; - // End of variables + // End of variables // Get the canvas context and clear it if (_context) { @@ -3825,7 +3791,7 @@ var steelseries = (function () { function drawDigits() { var pos = 1, - val = value, i, num, numb, frac, prevNum; + val = value, i, num, numb, frac, prevNum; // do not use Math.pow() - rounding errors! for (i = 0; i < decimals; i++) { @@ -3874,7 +3840,7 @@ var steelseries = (function () { }; // do we have a callback function to process? - if (callback && typeof (callback) === "function") { + if (callback && typeof(callback) === "function") { tween.onMotionFinished = callback; } @@ -3945,151 +3911,151 @@ var steelseries = (function () { ctx.translate(-centerX, -centerY); - /* - // PATH1_2 - ctx.save(); - ctx.beginPath(); - ctx.moveTo(imageWidth * 0.560747, imageHeight * 0.584112); - ctx.lineTo(imageWidth * 0.640186, imageHeight * 0.644859); - ctx.lineTo(imageWidth * 0.584112, imageHeight * 0.560747); - ctx.lineTo(imageWidth * 0.560747, imageHeight * 0.584112); - ctx.closePath(); - ctx.fillStyle = fillColorPath; - ctx.fill(); - ctx.stroke(); - - // PATH2_2 - ctx.save(); - ctx.beginPath(); - ctx.moveTo(imageWidth * 0.411214, imageHeight * 0.560747); - ctx.lineTo(imageWidth * 0.355140, imageHeight * 0.644859); - ctx.lineTo(imageWidth * 0.439252, imageHeight * 0.588785); - ctx.lineTo(imageWidth * 0.411214, imageHeight * 0.560747); - ctx.closePath(); - ctx.fillStyle = fillColorPath; - ctx.fill(); - ctx.stroke(); - - // PATH3_2 - ctx.save(); - ctx.beginPath(); - ctx.moveTo(imageWidth * 0.584112, imageHeight * 0.443925); - ctx.lineTo(imageWidth * 0.640186, imageHeight * 0.359813); - ctx.lineTo(imageWidth * 0.560747, imageHeight * 0.420560); - ctx.lineTo(imageWidth * 0.584112, imageHeight * 0.443925); - ctx.closePath(); - ctx.fillStyle = fillColorPath; - ctx.fill(); - ctx.stroke(); - - // PATH4_2 - ctx.save(); - ctx.beginPath(); - ctx.moveTo(imageWidth * 0.439252, imageHeight * 0.415887); - ctx.lineTo(imageWidth * 0.355140, imageHeight * 0.359813); - ctx.lineTo(imageWidth * 0.415887, imageHeight * 0.439252); - ctx.lineTo(imageWidth * 0.439252, imageHeight * 0.415887); - ctx.closePath(); - ctx.fillStyle = fillColorPath; - ctx.fill(); - ctx.stroke(); - - // PATH5_2 - ctx.save(); - ctx.beginPath(); - ctx.moveTo(imageWidth * 0.523364, imageHeight * 0.397196); - ctx.lineTo(imageWidth * 0.5, imageHeight * 0.196261); - ctx.lineTo(imageWidth * 0.471962, imageHeight * 0.397196); - ctx.lineTo(imageWidth * 0.523364, imageHeight * 0.397196); - ctx.closePath(); - var PATH5_2_GRADIENT = ctx.createLinearGradient(0.476635 * imageWidth, 0, 0.518691 * 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 * 0.471962, imageHeight * 0.607476); - ctx.lineTo(imageWidth * 0.5, imageHeight * 0.813084); - ctx.lineTo(imageWidth * 0.523364, imageHeight * 0.607476); - ctx.lineTo(imageWidth * 0.471962, imageHeight * 0.607476); - ctx.closePath(); - var PATH6_2_GRADIENT = ctx.createLinearGradient(0.518691 * imageWidth, 0, (0.518691 + -0.037383) * 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'; - ctx.strokeStyle = backgroundColor.symbolColor.getRgbaColor(); - ctx.fill(); - ctx.stroke(); - - // PATH7_2 - ctx.save(); - ctx.beginPath(); - ctx.moveTo(imageWidth * 0.602803, imageHeight * 0.528037); - ctx.lineTo(imageWidth * 0.803738, imageHeight * 0.5); - ctx.lineTo(imageWidth * 0.602803, imageHeight * 0.476635); - ctx.lineTo(imageWidth * 0.602803, imageHeight * 0.528037); - ctx.closePath(); - var PATH7_2_GRADIENT = ctx.createLinearGradient(0, 0.485981 * imageHeight, 0, 0.514018 * 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 * 0.392523, imageHeight * 0.476635); - ctx.lineTo(imageWidth * 0.191588, imageHeight * 0.5); - ctx.lineTo(imageWidth * 0.392523, imageHeight * 0.528037); - ctx.lineTo(imageWidth * 0.392523, imageHeight * 0.476635); - ctx.closePath(); - var PATH8_2_GRADIENT = ctx.createLinearGradient(0, 0.528037 * imageHeight, 0, 0.485981 * 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 * 0.406542, imageHeight * 0.504672); - ctx.bezierCurveTo(imageWidth * 0.406542, imageHeight * 0.453271, imageWidth * 0.448598, imageHeight * 0.411214, imageWidth * 0.5, imageHeight * 0.411214); - ctx.bezierCurveTo(imageWidth * 0.546728, imageHeight * 0.411214, imageWidth * 0.588785, imageHeight * 0.453271, imageWidth * 0.588785, imageHeight * 0.504672); - ctx.bezierCurveTo(imageWidth * 0.588785, imageHeight * 0.551401, imageWidth * 0.546728, imageHeight * 0.593457, imageWidth * 0.5, imageHeight * 0.593457); - ctx.bezierCurveTo(imageWidth * 0.448598, imageHeight * 0.593457, imageWidth * 0.406542, imageHeight * 0.551401, imageWidth * 0.406542, imageHeight * 0.504672); - ctx.closePath(); - ctx.moveTo(imageWidth * 0.387850, imageHeight * 0.504672); - ctx.bezierCurveTo(imageWidth * 0.387850, imageHeight * 0.560747, imageWidth * 0.439252, imageHeight * 0.612149, imageWidth * 0.5, imageHeight * 0.612149); - ctx.bezierCurveTo(imageWidth * 0.556074, imageHeight * 0.612149, imageWidth * 0.607476, imageHeight * 0.560747, imageWidth * 0.607476, imageHeight * 0.504672); - ctx.bezierCurveTo(imageWidth * 0.607476, imageHeight * 0.443925, imageWidth * 0.556074, imageHeight * 0.392523, imageWidth * 0.5, imageHeight * 0.392523); - ctx.bezierCurveTo(imageWidth * 0.439252, imageHeight * 0.392523, imageWidth * 0.387850, imageHeight * 0.443925, imageWidth * 0.387850, imageHeight * 0.504672); - ctx.closePath(); - ctx.fillStyle = fillColorPath; - ctx.lineWidth = 1; - ctx.lineCap = 'square'; - ctx.lineJoin = 'miter'; - ctx.strokeStyle = backgroundColor.symbolColor.getRgbaColor(); - ctx.fill(); - ctx.stroke(); - ctx.restore(); - */ +/* + // PATH1_2 + ctx.save(); + ctx.beginPath(); + ctx.moveTo(imageWidth * 0.560747, imageHeight * 0.584112); + ctx.lineTo(imageWidth * 0.640186, imageHeight * 0.644859); + ctx.lineTo(imageWidth * 0.584112, imageHeight * 0.560747); + ctx.lineTo(imageWidth * 0.560747, imageHeight * 0.584112); + ctx.closePath(); + ctx.fillStyle = fillColorPath; + ctx.fill(); + ctx.stroke(); + + // PATH2_2 + ctx.save(); + ctx.beginPath(); + ctx.moveTo(imageWidth * 0.411214, imageHeight * 0.560747); + ctx.lineTo(imageWidth * 0.355140, imageHeight * 0.644859); + ctx.lineTo(imageWidth * 0.439252, imageHeight * 0.588785); + ctx.lineTo(imageWidth * 0.411214, imageHeight * 0.560747); + ctx.closePath(); + ctx.fillStyle = fillColorPath; + ctx.fill(); + ctx.stroke(); + + // PATH3_2 + ctx.save(); + ctx.beginPath(); + ctx.moveTo(imageWidth * 0.584112, imageHeight * 0.443925); + ctx.lineTo(imageWidth * 0.640186, imageHeight * 0.359813); + ctx.lineTo(imageWidth * 0.560747, imageHeight * 0.420560); + ctx.lineTo(imageWidth * 0.584112, imageHeight * 0.443925); + ctx.closePath(); + ctx.fillStyle = fillColorPath; + ctx.fill(); + ctx.stroke(); + + // PATH4_2 + ctx.save(); + ctx.beginPath(); + ctx.moveTo(imageWidth * 0.439252, imageHeight * 0.415887); + ctx.lineTo(imageWidth * 0.355140, imageHeight * 0.359813); + ctx.lineTo(imageWidth * 0.415887, imageHeight * 0.439252); + ctx.lineTo(imageWidth * 0.439252, imageHeight * 0.415887); + ctx.closePath(); + ctx.fillStyle = fillColorPath; + ctx.fill(); + ctx.stroke(); + + // PATH5_2 + ctx.save(); + ctx.beginPath(); + ctx.moveTo(imageWidth * 0.523364, imageHeight * 0.397196); + ctx.lineTo(imageWidth * 0.5, imageHeight * 0.196261); + ctx.lineTo(imageWidth * 0.471962, imageHeight * 0.397196); + ctx.lineTo(imageWidth * 0.523364, imageHeight * 0.397196); + ctx.closePath(); + var PATH5_2_GRADIENT = ctx.createLinearGradient(0.476635 * imageWidth, 0, 0.518691 * 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 * 0.471962, imageHeight * 0.607476); + ctx.lineTo(imageWidth * 0.5, imageHeight * 0.813084); + ctx.lineTo(imageWidth * 0.523364, imageHeight * 0.607476); + ctx.lineTo(imageWidth * 0.471962, imageHeight * 0.607476); + ctx.closePath(); + var PATH6_2_GRADIENT = ctx.createLinearGradient(0.518691 * imageWidth, 0, (0.518691 + -0.037383) * 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'; + ctx.strokeStyle = backgroundColor.symbolColor.getRgbaColor(); + ctx.fill(); + ctx.stroke(); + + // PATH7_2 + ctx.save(); + ctx.beginPath(); + ctx.moveTo(imageWidth * 0.602803, imageHeight * 0.528037); + ctx.lineTo(imageWidth * 0.803738, imageHeight * 0.5); + ctx.lineTo(imageWidth * 0.602803, imageHeight * 0.476635); + ctx.lineTo(imageWidth * 0.602803, imageHeight * 0.528037); + ctx.closePath(); + var PATH7_2_GRADIENT = ctx.createLinearGradient(0, 0.485981 * imageHeight, 0, 0.514018 * 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 * 0.392523, imageHeight * 0.476635); + ctx.lineTo(imageWidth * 0.191588, imageHeight * 0.5); + ctx.lineTo(imageWidth * 0.392523, imageHeight * 0.528037); + ctx.lineTo(imageWidth * 0.392523, imageHeight * 0.476635); + ctx.closePath(); + var PATH8_2_GRADIENT = ctx.createLinearGradient(0, 0.528037 * imageHeight, 0, 0.485981 * 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 * 0.406542, imageHeight * 0.504672); + ctx.bezierCurveTo(imageWidth * 0.406542, imageHeight * 0.453271, imageWidth * 0.448598, imageHeight * 0.411214, imageWidth * 0.5, imageHeight * 0.411214); + ctx.bezierCurveTo(imageWidth * 0.546728, imageHeight * 0.411214, imageWidth * 0.588785, imageHeight * 0.453271, imageWidth * 0.588785, imageHeight * 0.504672); + ctx.bezierCurveTo(imageWidth * 0.588785, imageHeight * 0.551401, imageWidth * 0.546728, imageHeight * 0.593457, imageWidth * 0.5, imageHeight * 0.593457); + ctx.bezierCurveTo(imageWidth * 0.448598, imageHeight * 0.593457, imageWidth * 0.406542, imageHeight * 0.551401, imageWidth * 0.406542, imageHeight * 0.504672); + ctx.closePath(); + ctx.moveTo(imageWidth * 0.387850, imageHeight * 0.504672); + ctx.bezierCurveTo(imageWidth * 0.387850, imageHeight * 0.560747, imageWidth * 0.439252, imageHeight * 0.612149, imageWidth * 0.5, imageHeight * 0.612149); + ctx.bezierCurveTo(imageWidth * 0.556074, imageHeight * 0.612149, imageWidth * 0.607476, imageHeight * 0.560747, imageWidth * 0.607476, imageHeight * 0.504672); + ctx.bezierCurveTo(imageWidth * 0.607476, imageHeight * 0.443925, imageWidth * 0.556074, imageHeight * 0.392523, imageWidth * 0.5, imageHeight * 0.392523); + ctx.bezierCurveTo(imageWidth * 0.439252, imageHeight * 0.392523, imageWidth * 0.387850, imageHeight * 0.443925, imageWidth * 0.387850, imageHeight * 0.504672); + ctx.closePath(); + ctx.fillStyle = fillColorPath; + ctx.lineWidth = 1; + ctx.lineCap = 'square'; + ctx.lineJoin = 'miter'; + ctx.strokeStyle = backgroundColor.symbolColor.getRgbaColor(); + ctx.fill(); + ctx.stroke(); + ctx.restore(); +*/ // Replacement code, not quite the same but much smaller! for (i = 0; 360 >= i; i += 90) { @@ -4147,354 +4113,354 @@ var steelseries = (function () { ptrCtx = ptrBuffer.getContext('2d'); switch (ptrType.type) { - case 'type2': - grad = ptrCtx.createLinearGradient(0, size * 0.471962, 0, size * 0.130841); - grad.addColorStop(0, lblColor.getRgbaColor()); - grad.addColorStop(0.36, lblColor.getRgbaColor()); - grad.addColorStop(0.361, ptrColor.light.getRgbaColor()); - grad.addColorStop(1, ptrColor.light.getRgbaColor()); - ptrCtx.fillStyle = grad; - ptrCtx.beginPath(); - ptrCtx.moveTo(size * 0.518691, size * 0.471962); - ptrCtx.lineTo(size * 0.509345, size * 0.462616); - ptrCtx.lineTo(size * 0.509345, size * 0.341121); - ptrCtx.lineTo(size * 0.504672, size * 0.130841); - ptrCtx.lineTo(size * 0.495327, size * 0.130841); - ptrCtx.lineTo(size * 0.490654, size * 0.341121); - ptrCtx.lineTo(size * 0.490654, size * 0.462616); - ptrCtx.lineTo(size * 0.481308, size * 0.471962); - ptrCtx.closePath(); - ptrCtx.fill(); - break; + case 'type2': + grad = ptrCtx.createLinearGradient(0, size * 0.471962, 0, size * 0.130841); + grad.addColorStop(0, lblColor.getRgbaColor()); + grad.addColorStop(0.36, lblColor.getRgbaColor()); + grad.addColorStop(0.361, ptrColor.light.getRgbaColor()); + grad.addColorStop(1, ptrColor.light.getRgbaColor()); + ptrCtx.fillStyle = grad; + ptrCtx.beginPath(); + ptrCtx.moveTo(size * 0.518691, size * 0.471962); + ptrCtx.lineTo(size * 0.509345, size * 0.462616); + ptrCtx.lineTo(size * 0.509345, size * 0.341121); + ptrCtx.lineTo(size * 0.504672, size * 0.130841); + ptrCtx.lineTo(size * 0.495327, size * 0.130841); + ptrCtx.lineTo(size * 0.490654, size * 0.341121); + ptrCtx.lineTo(size * 0.490654, size * 0.462616); + ptrCtx.lineTo(size * 0.481308, size * 0.471962); + ptrCtx.closePath(); + ptrCtx.fill(); + break; - case 'type3': - ptrCtx.beginPath(); - ptrCtx.rect(size * 0.495327, size * 0.130841, size * 0.009345, size * 0.373831); - ptrCtx.closePath(); - ptrCtx.fillStyle = ptrColor.light.getRgbaColor(); - ptrCtx.fill(); - break; + case 'type3': + ptrCtx.beginPath(); + ptrCtx.rect(size * 0.495327, size * 0.130841, size * 0.009345, size * 0.373831); + ptrCtx.closePath(); + ptrCtx.fillStyle = ptrColor.light.getRgbaColor(); + ptrCtx.fill(); + break; - case 'type4': - grad = ptrCtx.createLinearGradient(0.467289 * size, 0, 0.528036 * 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 * 0.126168); - ptrCtx.lineTo(size * 0.514018, size * 0.135514); - ptrCtx.lineTo(size * 0.532710, size * 0.5); - ptrCtx.lineTo(size * 0.523364, size * 0.602803); - ptrCtx.lineTo(size * 0.476635, size * 0.602803); - ptrCtx.lineTo(size * 0.467289, size * 0.5); - ptrCtx.lineTo(size * 0.485981, size * 0.135514); - ptrCtx.lineTo(size * 0.5, size * 0.126168); - ptrCtx.closePath(); - ptrCtx.fill(); - break; + case 'type4': + grad = ptrCtx.createLinearGradient(0.467289 * size, 0, 0.528036 * 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 * 0.126168); + ptrCtx.lineTo(size * 0.514018, size * 0.135514); + ptrCtx.lineTo(size * 0.532710, size * 0.5); + ptrCtx.lineTo(size * 0.523364, size * 0.602803); + ptrCtx.lineTo(size * 0.476635, size * 0.602803); + ptrCtx.lineTo(size * 0.467289, size * 0.5); + ptrCtx.lineTo(size * 0.485981, size * 0.135514); + ptrCtx.lineTo(size * 0.5, size * 0.126168); + ptrCtx.closePath(); + ptrCtx.fill(); + break; - case 'type5': - grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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 * 0.495327); - ptrCtx.lineTo(size * 0.528037, size * 0.495327); - ptrCtx.lineTo(size * 0.5, size * 0.149532); - ptrCtx.lineTo(size * 0.471962, size * 0.495327); - ptrCtx.lineTo(size * 0.5, size * 0.495327); - ptrCtx.closePath(); - ptrCtx.fill(); + case 'type5': + grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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 * 0.495327); + ptrCtx.lineTo(size * 0.528037, size * 0.495327); + ptrCtx.lineTo(size * 0.5, size * 0.149532); + ptrCtx.lineTo(size * 0.471962, size * 0.495327); + ptrCtx.lineTo(size * 0.5, size * 0.495327); + ptrCtx.closePath(); + ptrCtx.fill(); - ptrCtx.lineWidth = 1; - ptrCtx.lineCap = 'square'; - ptrCtx.lineJoin = 'miter'; - ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor(); - ptrCtx.stroke(); - break; + ptrCtx.lineWidth = 1; + ptrCtx.lineCap = 'square'; + ptrCtx.lineJoin = 'miter'; + ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor(); + ptrCtx.stroke(); + break; - case 'type6': - ptrCtx.fillStyle = ptrColor.medium.getRgbaColor(); - ptrCtx.beginPath(); - ptrCtx.moveTo(size * 0.481308, size * 0.485981); - ptrCtx.lineTo(size * 0.481308, size * 0.392523); - ptrCtx.lineTo(size * 0.485981, size * 0.317757); - ptrCtx.lineTo(size * 0.495327, size * 0.130841); - ptrCtx.lineTo(size * 0.504672, size * 0.130841); - ptrCtx.lineTo(size * 0.514018, size * 0.317757); - ptrCtx.lineTo(size * 0.518691, size * 0.387850); - ptrCtx.lineTo(size * 0.518691, size * 0.485981); - ptrCtx.lineTo(size * 0.504672, size * 0.485981); - ptrCtx.lineTo(size * 0.504672, size * 0.387850); - ptrCtx.lineTo(size * 0.5, size * 0.317757); - ptrCtx.lineTo(size * 0.495327, size * 0.392523); - ptrCtx.lineTo(size * 0.495327, size * 0.485981); - ptrCtx.lineTo(size * 0.481308, size * 0.485981); - ptrCtx.closePath(); - ptrCtx.fill(); - break; + case 'type6': + ptrCtx.fillStyle = ptrColor.medium.getRgbaColor(); + ptrCtx.beginPath(); + ptrCtx.moveTo(size * 0.481308, size * 0.485981); + ptrCtx.lineTo(size * 0.481308, size * 0.392523); + ptrCtx.lineTo(size * 0.485981, size * 0.317757); + ptrCtx.lineTo(size * 0.495327, size * 0.130841); + ptrCtx.lineTo(size * 0.504672, size * 0.130841); + ptrCtx.lineTo(size * 0.514018, size * 0.317757); + ptrCtx.lineTo(size * 0.518691, size * 0.387850); + ptrCtx.lineTo(size * 0.518691, size * 0.485981); + ptrCtx.lineTo(size * 0.504672, size * 0.485981); + ptrCtx.lineTo(size * 0.504672, size * 0.387850); + ptrCtx.lineTo(size * 0.5, size * 0.317757); + ptrCtx.lineTo(size * 0.495327, size * 0.392523); + ptrCtx.lineTo(size * 0.495327, size * 0.485981); + ptrCtx.lineTo(size * 0.481308, size * 0.485981); + ptrCtx.closePath(); + ptrCtx.fill(); + break; - case 'type7': - grad = ptrCtx.createLinearGradient(0.481308 * size, 0, 0.518691 * size, 0); - grad.addColorStop(0, ptrColor.dark.getRgbaColor()); - grad.addColorStop(1, ptrColor.medium.getRgbaColor()); - ptrCtx.fillStyle = grad; - ptrCtx.beginPath(); - ptrCtx.moveTo(size * 0.490654, size * 0.130841); - ptrCtx.lineTo(size * 0.481308, size * 0.5); - ptrCtx.lineTo(size * 0.518691, size * 0.5); - ptrCtx.lineTo(size * 0.504672, size * 0.130841); - ptrCtx.lineTo(size * 0.490654, size * 0.130841); - ptrCtx.closePath(); - ptrCtx.fill(); - break; + case 'type7': + grad = ptrCtx.createLinearGradient(0.481308 * size, 0, 0.518691 * size, 0); + grad.addColorStop(0, ptrColor.dark.getRgbaColor()); + grad.addColorStop(1, ptrColor.medium.getRgbaColor()); + ptrCtx.fillStyle = grad; + ptrCtx.beginPath(); + ptrCtx.moveTo(size * 0.490654, size * 0.130841); + ptrCtx.lineTo(size * 0.481308, size * 0.5); + ptrCtx.lineTo(size * 0.518691, size * 0.5); + ptrCtx.lineTo(size * 0.504672, size * 0.130841); + ptrCtx.lineTo(size * 0.490654, size * 0.130841); + ptrCtx.closePath(); + ptrCtx.fill(); + break; - case 'type8': - grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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 * 0.532710); - ptrCtx.lineTo(size * 0.532710, size * 0.5); - ptrCtx.bezierCurveTo(size * 0.532710, size * 0.5, size * 0.509345, size * 0.457943, size * 0.5, size * 0.149532); - ptrCtx.bezierCurveTo(size * 0.490654, size * 0.457943, size * 0.467289, size * 0.5, size * 0.467289, size * 0.5); - ptrCtx.lineTo(size * 0.5, size * 0.532710); - ptrCtx.closePath(); - ptrCtx.fill(); - ptrCtx.stroke(); - break; + case 'type8': + grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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 * 0.532710); + ptrCtx.lineTo(size * 0.532710, size * 0.5); + ptrCtx.bezierCurveTo(size * 0.532710, size * 0.5, size * 0.509345, size * 0.457943, size * 0.5, size * 0.149532); + ptrCtx.bezierCurveTo(size * 0.490654, size * 0.457943, size * 0.467289, size * 0.5, size * 0.467289, size * 0.5); + ptrCtx.lineTo(size * 0.5, size * 0.532710); + ptrCtx.closePath(); + ptrCtx.fill(); + ptrCtx.stroke(); + break; - case 'type9': - grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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 * 0.495327, size * 0.233644); - ptrCtx.lineTo(size * 0.504672, size * 0.233644); - ptrCtx.lineTo(size * 0.514018, size * 0.439252); - ptrCtx.lineTo(size * 0.485981, size * 0.439252); - ptrCtx.lineTo(size * 0.495327, size * 0.233644); - ptrCtx.closePath(); - ptrCtx.moveTo(size * 0.490654, size * 0.130841); - ptrCtx.lineTo(size * 0.471962, size * 0.471962); - ptrCtx.lineTo(size * 0.471962, size * 0.528037); - ptrCtx.bezierCurveTo(size * 0.471962, size * 0.528037, size * 0.476635, size * 0.602803, size * 0.476635, size * 0.602803); - ptrCtx.bezierCurveTo(size * 0.476635, size * 0.607476, size * 0.481308, size * 0.607476, size * 0.5, size * 0.607476); - ptrCtx.bezierCurveTo(size * 0.518691, size * 0.607476, size * 0.523364, size * 0.607476, size * 0.523364, size * 0.602803); - ptrCtx.bezierCurveTo(size * 0.523364, size * 0.602803, size * 0.528037, size * 0.528037, size * 0.528037, size * 0.528037); - ptrCtx.lineTo(size * 0.528037, size * 0.471962); - ptrCtx.lineTo(size * 0.509345, size * 0.130841); - ptrCtx.lineTo(size * 0.490654, size * 0.130841); - ptrCtx.closePath(); - ptrCtx.fill(); + case 'type9': + grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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 * 0.495327, size * 0.233644); + ptrCtx.lineTo(size * 0.504672, size * 0.233644); + ptrCtx.lineTo(size * 0.514018, size * 0.439252); + ptrCtx.lineTo(size * 0.485981, size * 0.439252); + ptrCtx.lineTo(size * 0.495327, size * 0.233644); + ptrCtx.closePath(); + ptrCtx.moveTo(size * 0.490654, size * 0.130841); + ptrCtx.lineTo(size * 0.471962, size * 0.471962); + ptrCtx.lineTo(size * 0.471962, size * 0.528037); + ptrCtx.bezierCurveTo(size * 0.471962, size * 0.528037, size * 0.476635, size * 0.602803, size * 0.476635, size * 0.602803); + ptrCtx.bezierCurveTo(size * 0.476635, size * 0.607476, size * 0.481308, size * 0.607476, size * 0.5, size * 0.607476); + ptrCtx.bezierCurveTo(size * 0.518691, size * 0.607476, size * 0.523364, size * 0.607476, size * 0.523364, size * 0.602803); + ptrCtx.bezierCurveTo(size * 0.523364, size * 0.602803, size * 0.528037, size * 0.528037, size * 0.528037, size * 0.528037); + ptrCtx.lineTo(size * 0.528037, size * 0.471962); + ptrCtx.lineTo(size * 0.509345, size * 0.130841); + ptrCtx.lineTo(size * 0.490654, size * 0.130841); + ptrCtx.closePath(); + ptrCtx.fill(); - ptrCtx.beginPath(); - ptrCtx.moveTo(size * 0.495327, size * 0.219626); - ptrCtx.lineTo(size * 0.504672, size * 0.219626); - ptrCtx.lineTo(size * 0.504672, size * 0.135514); - ptrCtx.lineTo(size * 0.495327, size * 0.135514); - ptrCtx.lineTo(size * 0.495327, size * 0.219626); - ptrCtx.closePath(); + ptrCtx.beginPath(); + ptrCtx.moveTo(size * 0.495327, size * 0.219626); + ptrCtx.lineTo(size * 0.504672, size * 0.219626); + ptrCtx.lineTo(size * 0.504672, size * 0.135514); + ptrCtx.lineTo(size * 0.495327, size * 0.135514); + ptrCtx.lineTo(size * 0.495327, size * 0.219626); + ptrCtx.closePath(); - ptrCtx.fillStyle = ptrColor.medium.getRgbaColor(); - ptrCtx.fill(); - break; + ptrCtx.fillStyle = ptrColor.medium.getRgbaColor(); + ptrCtx.fill(); + break; - case 'type10': - // POINTER_TYPE10 - ptrCtx.beginPath(); - ptrCtx.moveTo(size * 0.5, size * 0.149532); - ptrCtx.bezierCurveTo(size * 0.5, size * 0.149532, size * 0.443925, size * 0.490654, size * 0.443925, size * 0.5); - ptrCtx.bezierCurveTo(size * 0.443925, size * 0.532710, size * 0.467289, size * 0.556074, size * 0.5, size * 0.556074); - ptrCtx.bezierCurveTo(size * 0.532710, size * 0.556074, size * 0.556074, size * 0.532710, size * 0.556074, size * 0.5); - ptrCtx.bezierCurveTo(size * 0.556074, size * 0.490654, size * 0.5, size * 0.149532, size * 0.5, size * 0.149532); - ptrCtx.closePath(); - grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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(); - break; + case 'type10': + // POINTER_TYPE10 + ptrCtx.beginPath(); + ptrCtx.moveTo(size * 0.5, size * 0.149532); + ptrCtx.bezierCurveTo(size * 0.5, size * 0.149532, size * 0.443925, size * 0.490654, size * 0.443925, size * 0.5); + ptrCtx.bezierCurveTo(size * 0.443925, size * 0.532710, size * 0.467289, size * 0.556074, size * 0.5, size * 0.556074); + ptrCtx.bezierCurveTo(size * 0.532710, size * 0.556074, size * 0.556074, size * 0.532710, size * 0.556074, size * 0.5); + ptrCtx.bezierCurveTo(size * 0.556074, size * 0.490654, size * 0.5, size * 0.149532, size * 0.5, size * 0.149532); + ptrCtx.closePath(); + grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * 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(); + break; - case 'type11': - // POINTER_TYPE11 - ptrCtx.beginPath(); - ptrCtx.moveTo(0.5 * size, 0.168224 * size); - ptrCtx.lineTo(0.485981 * size, 0.5 * size); - ptrCtx.bezierCurveTo(0.485981 * size, 0.5 * size, 0.481308 * size, 0.584112 * size, 0.5 * size, 0.584112 * size); - ptrCtx.bezierCurveTo(0.514018 * size, 0.584112 * size, 0.509345 * size, 0.5 * size, 0.509345 * size, 0.5 * size); - ptrCtx.lineTo(0.5 * size, 0.168224 * size); - ptrCtx.closePath(); - grad = ptrCtx.createLinearGradient(0, 0.168224 * size, 0, 0.584112 * 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(); - break; + case 'type11': + // POINTER_TYPE11 + ptrCtx.beginPath(); + ptrCtx.moveTo(0.5 * size, 0.168224 * size); + ptrCtx.lineTo(0.485981 * size, 0.5 * size); + ptrCtx.bezierCurveTo(0.485981 * size, 0.5 * size, 0.481308 * size, 0.584112 * size, 0.5 * size, 0.584112 * size); + ptrCtx.bezierCurveTo(0.514018 * size, 0.584112 * size, 0.509345 * size, 0.5 * size, 0.509345 * size, 0.5 * size); + ptrCtx.lineTo(0.5 * size, 0.168224 * size); + ptrCtx.closePath(); + grad = ptrCtx.createLinearGradient(0, 0.168224 * size, 0, 0.584112 * 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(); + break; - case 'type12': - // POINTER_TYPE12 - ptrCtx.beginPath(); - ptrCtx.moveTo(0.5 * size, 0.168224 * size); - ptrCtx.lineTo(0.485981 * size, 0.5 * size); - ptrCtx.lineTo(0.5 * size, 0.504672 * size); - ptrCtx.lineTo(0.509345 * size, 0.5 * size); - ptrCtx.lineTo(0.5 * size, 0.168224 * size); - ptrCtx.closePath(); - grad = ptrCtx.createLinearGradient(0, 0.168224 * size, 0, 0.504672 * 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(); - break; + case 'type12': + // POINTER_TYPE12 + ptrCtx.beginPath(); + ptrCtx.moveTo(0.5 * size, 0.168224 * size); + ptrCtx.lineTo(0.485981 * size, 0.5 * size); + ptrCtx.lineTo(0.5 * size, 0.504672 * size); + ptrCtx.lineTo(0.509345 * size, 0.5 * size); + ptrCtx.lineTo(0.5 * size, 0.168224 * size); + ptrCtx.closePath(); + grad = ptrCtx.createLinearGradient(0, 0.168224 * size, 0, 0.504672 * 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(); + break; - case 'type13': + case 'type13': // POINTER_TYPE13 - case 'type14': - // POINTER_TYPE14 (same shape as 13) - ptrCtx.beginPath(); - ptrCtx.moveTo(0.485981 * size, 0.168224 * size); - ptrCtx.lineTo(0.5 * size, 0.130841 * size); - ptrCtx.lineTo(0.509345 * size, 0.168224 * size); - ptrCtx.lineTo(0.509345 * size, 0.509345 * size); - ptrCtx.lineTo(0.485981 * size, 0.509345 * size); - ptrCtx.lineTo(0.485981 * size, 0.168224 * size); - ptrCtx.closePath(); - if (ptrType.type === 'type13') { - // TYPE13 - grad = ptrCtx.createLinearGradient(0, 0.5 * size, 0, 0.130841 * 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(0.485981 * size, 0, 0.509345 * 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(); - break; - - case 'type15': - // POINTER TYPE15 - Classic with crescent - case 'type16': - // POINTER TYPE16 - Classic without crescent - ptrCtx.beginPath(); - ptrCtx.moveTo(size * 0.509345, size * 0.457943); - ptrCtx.lineTo(size * 0.5015, size * 0.13); - ptrCtx.lineTo(size * 0.4985, size * 0.13); - ptrCtx.lineTo(size * 0.490654, size * 0.457943); - ptrCtx.bezierCurveTo(size * 0.490654, size * 0.457943, size * 0.490654, size * 0.457943, size * 0.490654, size * 0.457943); - ptrCtx.bezierCurveTo(size * 0.471962, size * 0.462616, size * 0.457943, size * 0.481308, size * 0.457943, size * 0.5); - ptrCtx.bezierCurveTo(size * 0.457943, size * 0.518691, size * 0.471962, size * 0.537383, size * 0.490654, size * 0.542056); - ptrCtx.bezierCurveTo(size * 0.490654, size * 0.542056, size * 0.490654, size * 0.542056, size * 0.490654, size * 0.542056); - if (ptrType.type === 'type15') { - ptrCtx.lineTo(size * 0.490654, size * 0.57); - ptrCtx.bezierCurveTo(size * 0.46, size * 0.58, size * 0.46, size * 0.62, size * 0.490654, 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 * 0.509345, size * 0.63); - ptrCtx.bezierCurveTo(size * 0.54, size * 0.62, size * 0.54, size * 0.58, size * 0.509345, size * 0.57); - ptrCtx.lineTo(size * 0.509345, size * 0.57); - } else { - ptrCtx.lineTo(size * 0.490654, size * 0.621495); - ptrCtx.lineTo(size * 0.509345, size * 0.621495); - } - ptrCtx.lineTo(size * 0.509345, size * 0.542056); - ptrCtx.bezierCurveTo(size * 0.509345, size * 0.542056, size * 0.509345, size * 0.542056, size * 0.509345, size * 0.542056); - ptrCtx.bezierCurveTo(size * 0.528037, size * 0.537383, size * 0.542056, size * 0.518691, size * 0.542056, size * 0.5); - ptrCtx.bezierCurveTo(size * 0.542056, size * 0.481308, size * 0.528037, size * 0.462616, size * 0.509345, size * 0.457943); - ptrCtx.bezierCurveTo(size * 0.509345, size * 0.457943, size * 0.509345, size * 0.457943, size * 0.509345, size * 0.457943); - ptrCtx.closePath(); - if (ptrType.type === 'type15') { - grad = ptrCtx.createLinearGradient(0, 0, 0, size * 0.63); - } else { - grad = ptrCtx.createLinearGradient(0, 0, 0, size * 0.621495); - } - grad.addColorStop(0, ptrColor.medium.getRgbaColor()); - grad.addColorStop(0.388888, ptrColor.medium.getRgbaColor()); - grad.addColorStop(0.5, ptrColor.light.getRgbaColor()); - grad.addColorStop(0.611111, ptrColor.medium.getRgbaColor()); + case 'type14': + // POINTER_TYPE14 (same shape as 13) + ptrCtx.beginPath(); + ptrCtx.moveTo(0.485981 * size, 0.168224 * size); + ptrCtx.lineTo(0.5 * size, 0.130841 * size); + ptrCtx.lineTo(0.509345 * size, 0.168224 * size); + ptrCtx.lineTo(0.509345 * size, 0.509345 * size); + ptrCtx.lineTo(0.485981 * size, 0.509345 * size); + ptrCtx.lineTo(0.485981 * size, 0.168224 * size); + ptrCtx.closePath(); + if (ptrType.type === 'type13') { + // TYPE13 + grad = ptrCtx.createLinearGradient(0, 0.5 * size, 0, 0.130841 * 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; - ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor(); - ptrCtx.fill(); - ptrCtx.stroke(); - // Draw the rings - ptrCtx.beginPath(); - radius = size * 0.065420 / 2; - ptrCtx.arc(size * 0.5, size * 0.5, radius, 0, TWO_PI); - grad = ptrCtx.createLinearGradient(size * 0.5 - radius, size * 0.5 + radius, 0, size * 0.5 + 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 * 0.046728 / 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(); - break; - - case 'type1': - /* falls through */ - default: - grad = ptrCtx.createLinearGradient(0, size * 0.471962, 0, size * 0.130841); + } else { + // TYPE14 + grad = ptrCtx.createLinearGradient(0.485981 * size, 0, 0.509345 * size, 0); grad.addColorStop(0, ptrColor.veryDark.getRgbaColor()); - grad.addColorStop(0.3, ptrColor.medium.getRgbaColor()); - grad.addColorStop(0.59, ptrColor.medium.getRgbaColor()); + grad.addColorStop(0.5, ptrColor.light.getRgbaColor()); grad.addColorStop(1, ptrColor.veryDark.getRgbaColor()); ptrCtx.fillStyle = grad; - ptrCtx.beginPath(); - ptrCtx.moveTo(size * 0.518691, size * 0.471962); - ptrCtx.bezierCurveTo(size * 0.514018, size * 0.457943, size * 0.509345, size * 0.415887, size * 0.509345, size * 0.401869); - ptrCtx.bezierCurveTo(size * 0.504672, size * 0.383177, size * 0.5, size * 0.130841, size * 0.5, size * 0.130841); - ptrCtx.bezierCurveTo(size * 0.5, size * 0.130841, size * 0.490654, size * 0.383177, size * 0.490654, size * 0.397196); - ptrCtx.bezierCurveTo(size * 0.490654, size * 0.415887, size * 0.485981, size * 0.457943, size * 0.481308, size * 0.471962); - ptrCtx.bezierCurveTo(size * 0.471962, size * 0.481308, size * 0.467289, size * 0.490654, size * 0.467289, size * 0.5); - ptrCtx.bezierCurveTo(size * 0.467289, size * 0.518691, size * 0.481308, size * 0.532710, size * 0.5, size * 0.532710); - ptrCtx.bezierCurveTo(size * 0.518691, size * 0.532710, size * 0.532710, size * 0.518691, size * 0.532710, size * 0.5); - ptrCtx.bezierCurveTo(size * 0.532710, size * 0.490654, size * 0.528037, size * 0.481308, size * 0.518691, size * 0.471962); - ptrCtx.closePath(); - ptrCtx.fill(); - break; + } + ptrCtx.fill(); + break; + + case 'type15': + // POINTER TYPE15 - Classic with crescent + case 'type16': + // POINTER TYPE16 - Classic without crescent + ptrCtx.beginPath(); + ptrCtx.moveTo(size * 0.509345, size * 0.457943); + ptrCtx.lineTo(size * 0.5015, size * 0.13); + ptrCtx.lineTo(size * 0.4985, size * 0.13); + ptrCtx.lineTo(size * 0.490654, size * 0.457943); + ptrCtx.bezierCurveTo(size * 0.490654, size * 0.457943, size * 0.490654, size * 0.457943, size * 0.490654, size * 0.457943); + ptrCtx.bezierCurveTo(size * 0.471962, size * 0.462616, size * 0.457943, size * 0.481308, size * 0.457943, size * 0.5); + ptrCtx.bezierCurveTo(size * 0.457943, size * 0.518691, size * 0.471962, size * 0.537383, size * 0.490654, size * 0.542056); + ptrCtx.bezierCurveTo(size * 0.490654, size * 0.542056, size * 0.490654, size * 0.542056, size * 0.490654, size * 0.542056); + if (ptrType.type === 'type15') { + ptrCtx.lineTo(size * 0.490654, size * 0.57); + ptrCtx.bezierCurveTo(size * 0.46, size * 0.58, size * 0.46, size * 0.62, size * 0.490654, 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 * 0.509345, size * 0.63); + ptrCtx.bezierCurveTo(size * 0.54, size * 0.62, size * 0.54, size * 0.58, size * 0.509345, size * 0.57); + ptrCtx.lineTo(size * 0.509345, size * 0.57); + } else { + ptrCtx.lineTo(size * 0.490654, size * 0.621495); + ptrCtx.lineTo(size * 0.509345, size * 0.621495); + } + ptrCtx.lineTo(size * 0.509345, size * 0.542056); + ptrCtx.bezierCurveTo(size * 0.509345, size * 0.542056, size * 0.509345, size * 0.542056, size * 0.509345, size * 0.542056); + ptrCtx.bezierCurveTo(size * 0.528037, size * 0.537383, size * 0.542056, size * 0.518691, size * 0.542056, size * 0.5); + ptrCtx.bezierCurveTo(size * 0.542056, size * 0.481308, size * 0.528037, size * 0.462616, size * 0.509345, size * 0.457943); + ptrCtx.bezierCurveTo(size * 0.509345, size * 0.457943, size * 0.509345, size * 0.457943, size * 0.509345, size * 0.457943); + ptrCtx.closePath(); + if (ptrType.type === 'type15') { + grad = ptrCtx.createLinearGradient(0, 0, 0, size * 0.63); + } else { + grad = ptrCtx.createLinearGradient(0, 0, 0, size * 0.621495); + } + grad.addColorStop(0, ptrColor.medium.getRgbaColor()); + grad.addColorStop(0.388888, ptrColor.medium.getRgbaColor()); + grad.addColorStop(0.5, ptrColor.light.getRgbaColor()); + grad.addColorStop(0.611111, 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 * 0.065420 / 2; + ptrCtx.arc(size * 0.5, size * 0.5, radius, 0, TWO_PI); + grad = ptrCtx.createLinearGradient(size * 0.5 - radius, size * 0.5 + radius, 0, size * 0.5 + 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 * 0.046728 / 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(); + break; + + case 'type1': + /* falls through */ + default: + grad = ptrCtx.createLinearGradient(0, size * 0.471962, 0, size * 0.130841); + 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 * 0.518691, size * 0.471962); + ptrCtx.bezierCurveTo(size * 0.514018, size * 0.457943, size * 0.509345, size * 0.415887, size * 0.509345, size * 0.401869); + ptrCtx.bezierCurveTo(size * 0.504672, size * 0.383177, size * 0.5, size * 0.130841, size * 0.5, size * 0.130841); + ptrCtx.bezierCurveTo(size * 0.5, size * 0.130841, size * 0.490654, size * 0.383177, size * 0.490654, size * 0.397196); + ptrCtx.bezierCurveTo(size * 0.490654, size * 0.415887, size * 0.485981, size * 0.457943, size * 0.481308, size * 0.471962); + ptrCtx.bezierCurveTo(size * 0.471962, size * 0.481308, size * 0.467289, size * 0.490654, size * 0.467289, size * 0.5); + ptrCtx.bezierCurveTo(size * 0.467289, size * 0.518691, size * 0.481308, size * 0.532710, size * 0.5, size * 0.532710); + ptrCtx.bezierCurveTo(size * 0.518691, size * 0.532710, size * 0.532710, size * 0.518691, size * 0.532710, size * 0.5); + ptrCtx.bezierCurveTo(size * 0.532710, size * 0.490654, size * 0.528037, size * 0.481308, size * 0.518691, size * 0.471962); + ptrCtx.closePath(); + ptrCtx.fill(); + break; } // cache buffer drawPointerImage.cache[cacheKey] = ptrBuffer; @@ -4530,255 +4496,255 @@ var steelseries = (function () { // main gradient frame switch (frameDesign.design) { - case 'metal': - grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); - 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(); - break; + case 'metal': + grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); + 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(); + break; - case 'brass': - grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); - 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(); - break; + case 'brass': + grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); + 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(); + break; - case 'steel': - grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); - 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(); - break; + case 'steel': + grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); + 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(); + break; - case 'gold': - grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); - 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(); - break; + case 'gold': + grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654); + 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(); + break; - case 'anthracite': - grad = radFCtx.createLinearGradient(0, 0.004672 * imageHeight, 0, 0.995326 * 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(); - break; + case 'anthracite': + grad = radFCtx.createLinearGradient(0, 0.004672 * imageHeight, 0, 0.995326 * 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(); + break; - case 'tiltedGray': - grad = radFCtx.createLinearGradient(0.233644 * imageWidth, 0.084112 * imageHeight, 0.81258 * imageWidth, 0.910919 * 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(); - break; + case 'tiltedGray': + grad = radFCtx.createLinearGradient(0.233644 * imageWidth, 0.084112 * imageHeight, 0.81258 * imageWidth, 0.910919 * 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(); + break; - case 'tiltedBlack': - grad = radFCtx.createLinearGradient(0.228971 * imageWidth, 0.079439 * imageHeight, 0.802547 * imageWidth, 0.898591 * 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(); - break; + case 'tiltedBlack': + grad = radFCtx.createLinearGradient(0.228971 * imageWidth, 0.079439 * imageHeight, 0.802547 * imageWidth, 0.898591 * 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(); + break; - case 'glossyMetal': - grad = radFCtx.createRadialGradient(0.5 * imageWidth, 0.5 * imageHeight, 0, 0.5 * imageWidth, 0.5 * imageWidth, 0.5 * imageWidth); - 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, 0.973962 * imageWidth / 2, 0, TWO_PI); - radFCtx.closePath(); - grad = radFCtx.createLinearGradient(0, imageHeight - 0.971962 * imageHeight, 0, 0.971962 * 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(); + case 'glossyMetal': + grad = radFCtx.createRadialGradient(0.5 * imageWidth, 0.5 * imageHeight, 0, 0.5 * imageWidth, 0.5 * imageWidth, 0.5 * imageWidth); + 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, 0.973962 * imageWidth / 2, 0, TWO_PI); + radFCtx.closePath(); + grad = radFCtx.createLinearGradient(0, imageHeight - 0.971962 * imageHeight, 0, 0.971962 * 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, 0.869158 * imageWidth / 2, 0, TWO_PI); - radFCtx.closePath(); - radFCtx.fillStyle = '#f6f6f6'; - radFCtx.fill(); + radFCtx.beginPath(); + radFCtx.arc(0.5 * imageWidth, 0.5 * imageHeight, 0.869158 * 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(); - break; + radFCtx.beginPath(); + radFCtx.arc(0.5 * imageWidth, 0.5 * imageHeight, 0.85 * imageWidth / 2, 0, TWO_PI); + radFCtx.closePath(); + radFCtx.fillStyle = '#333333'; + radFCtx.fill(); + break; - case 'blackMetal': - fractions = [0, - 0.125, - 0.347222, - 0.5, - 0.680555, - 0.875, - 1]; + case 'blackMetal': + fractions = [0, + 0.125, + 0.347222, + 0.5, + 0.680555, + 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)]; + 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.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true); - radFCtx.clip(); - outerX = imageWidth * 0.495327; - innerX = imageWidth * 0.420560; - 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(); - break; + radFCtx.save(); + radFCtx.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true); + radFCtx.clip(); + outerX = imageWidth * 0.495327; + innerX = imageWidth * 0.420560; + 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(); + break; - case 'shinyMetal': - fractions = [0, - 0.125, - 0.25, - 0.347222, - 0.5, - 0.652777, - 0.75, - 0.875, - 1]; + case 'shinyMetal': + fractions = [0, + 0.125, + 0.25, + 0.347222, + 0.5, + 0.652777, + 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)]; + 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.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true); - radFCtx.clip(); - outerX = imageWidth * 0.495327; - innerX = imageWidth * 0.420560; - 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(); - break; + radFCtx.save(); + radFCtx.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true); + radFCtx.clip(); + outerX = imageWidth * 0.495327; + innerX = imageWidth * 0.420560; + 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(); + break; - 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]; + 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), - 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)]; + 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), + 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.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true); - radFCtx.clip(); - outerX = imageWidth * 0.495327; - innerX = imageWidth * 0.420560; - 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(); + radFCtx.save(); + radFCtx.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true); + radFCtx.clip(); + outerX = imageWidth * 0.495327; + innerX = imageWidth * 0.420560; + 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(); - break; + break; } // inner bright frame @@ -4859,37 +4825,37 @@ var steelseries = (function () { } 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]; + 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')]; + 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')]; grad = new ConicalGradient(fractions, colors); grad.fillCircle(radBCtx, centerX, centerY, 0, backgroundOffsetX); @@ -4911,7 +4877,7 @@ var steelseries = (function () { radBCtx.lineWidth = 0.5; end = TWO_PI - stepSize * 0.3; // Step the engine round'n'round - for (i = 0; i < end; i += stepSize) { + for (i = 0 ; i < end; i += stepSize) { // draw a 'turn' radBCtx.strokeStyle = 'rgba(240, 240, 255, 0.25)'; radBCtx.beginPath(); @@ -4993,7 +4959,7 @@ var steelseries = (function () { shadowOffset = imageWidth * 0.008, gradHighlight, gradHighlight2, cacheKey = foregroundType.type + imageWidth + imageHeight + withCenterKnob + (knob !== undefined ? knob.type : '-') + - (style !== undefined ? style.style : '-') + (orientation !== undefined ? orientation.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]) { @@ -5029,97 +4995,97 @@ var steelseries = (function () { // highlight switch (foregroundType.type) { - case 'type2': - radFgCtx.beginPath(); - radFgCtx.moveTo(imageWidth * 0.135514, imageHeight * 0.696261); - radFgCtx.bezierCurveTo(imageWidth * 0.214953, imageHeight * 0.588785, imageWidth * 0.317757, imageHeight * 0.5, imageWidth * 0.462616, imageHeight * 0.425233); - radFgCtx.bezierCurveTo(imageWidth * 0.612149, imageHeight * 0.345794, imageWidth * 0.733644, imageHeight * 0.317757, imageWidth * 0.873831, imageHeight * 0.322429); - radFgCtx.bezierCurveTo(imageWidth * 0.766355, imageHeight * 0.112149, imageWidth * 0.528037, imageHeight * 0.023364, imageWidth * 0.313084, imageHeight * 0.130841); - radFgCtx.bezierCurveTo(imageWidth * 0.098130, imageHeight * 0.238317, imageWidth * 0.028037, imageHeight * 0.485981, imageWidth * 0.135514, imageHeight * 0.696261); - radFgCtx.closePath(); - gradHighlight = radFgCtx.createLinearGradient(0.313084 * imageWidth, 0.135514 * imageHeight, 0.495528 * imageWidth, 0.493582 * imageHeight); - gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); - gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); - break; + case 'type2': + radFgCtx.beginPath(); + radFgCtx.moveTo(imageWidth * 0.135514, imageHeight * 0.696261); + radFgCtx.bezierCurveTo(imageWidth * 0.214953, imageHeight * 0.588785, imageWidth * 0.317757, imageHeight * 0.5, imageWidth * 0.462616, imageHeight * 0.425233); + radFgCtx.bezierCurveTo(imageWidth * 0.612149, imageHeight * 0.345794, imageWidth * 0.733644, imageHeight * 0.317757, imageWidth * 0.873831, imageHeight * 0.322429); + radFgCtx.bezierCurveTo(imageWidth * 0.766355, imageHeight * 0.112149, imageWidth * 0.528037, imageHeight * 0.023364, imageWidth * 0.313084, imageHeight * 0.130841); + radFgCtx.bezierCurveTo(imageWidth * 0.098130, imageHeight * 0.238317, imageWidth * 0.028037, imageHeight * 0.485981, imageWidth * 0.135514, imageHeight * 0.696261); + radFgCtx.closePath(); + gradHighlight = radFgCtx.createLinearGradient(0.313084 * imageWidth, 0.135514 * imageHeight, 0.495528 * imageWidth, 0.493582 * imageHeight); + gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); + gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); + break; - case 'type3': - radFgCtx.beginPath(); - radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.509345); - radFgCtx.bezierCurveTo(imageWidth * 0.210280, imageHeight * 0.556074, imageWidth * 0.462616, imageHeight * 0.560747, imageWidth * 0.5, imageHeight * 0.560747); - radFgCtx.bezierCurveTo(imageWidth * 0.537383, imageHeight * 0.560747, imageWidth * 0.794392, imageHeight * 0.560747, imageWidth * 0.915887, imageHeight * 0.509345); - radFgCtx.bezierCurveTo(imageWidth * 0.915887, imageHeight * 0.275700, imageWidth * 0.738317, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112); - radFgCtx.bezierCurveTo(imageWidth * 0.261682, imageHeight * 0.084112, imageWidth * 0.084112, imageHeight * 0.275700, imageWidth * 0.084112, imageHeight * 0.509345); - radFgCtx.closePath(); - gradHighlight = radFgCtx.createLinearGradient(0, 0.093457 * imageHeight, 0, 0.556073 * imageHeight); - gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); - gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); - break; + case 'type3': + radFgCtx.beginPath(); + radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.509345); + radFgCtx.bezierCurveTo(imageWidth * 0.210280, imageHeight * 0.556074, imageWidth * 0.462616, imageHeight * 0.560747, imageWidth * 0.5, imageHeight * 0.560747); + radFgCtx.bezierCurveTo(imageWidth * 0.537383, imageHeight * 0.560747, imageWidth * 0.794392, imageHeight * 0.560747, imageWidth * 0.915887, imageHeight * 0.509345); + radFgCtx.bezierCurveTo(imageWidth * 0.915887, imageHeight * 0.275700, imageWidth * 0.738317, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112); + radFgCtx.bezierCurveTo(imageWidth * 0.261682, imageHeight * 0.084112, imageWidth * 0.084112, imageHeight * 0.275700, imageWidth * 0.084112, imageHeight * 0.509345); + radFgCtx.closePath(); + gradHighlight = radFgCtx.createLinearGradient(0, 0.093457 * imageHeight, 0, 0.556073 * imageHeight); + gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); + gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); + break; - case 'type4': - radFgCtx.beginPath(); - radFgCtx.moveTo(imageWidth * 0.677570, imageHeight * 0.242990); - radFgCtx.bezierCurveTo(imageWidth * 0.771028, imageHeight * 0.308411, imageWidth * 0.822429, imageHeight * 0.411214, imageWidth * 0.813084, imageHeight * 0.528037); - radFgCtx.bezierCurveTo(imageWidth * 0.799065, imageHeight * 0.654205, imageWidth * 0.719626, imageHeight * 0.757009, imageWidth * 0.593457, imageHeight * 0.799065); - radFgCtx.bezierCurveTo(imageWidth * 0.485981, imageHeight * 0.831775, imageWidth * 0.369158, imageHeight * 0.808411, imageWidth * 0.285046, imageHeight * 0.728971); - radFgCtx.bezierCurveTo(imageWidth * 0.275700, imageHeight * 0.719626, imageWidth * 0.252336, imageHeight * 0.714953, imageWidth * 0.233644, imageHeight * 0.728971); - radFgCtx.bezierCurveTo(imageWidth * 0.214953, imageHeight * 0.747663, imageWidth * 0.219626, imageHeight * 0.771028, imageWidth * 0.228971, imageHeight * 0.775700); - radFgCtx.bezierCurveTo(imageWidth * 0.331775, imageHeight * 0.878504, imageWidth * 0.476635, imageHeight * 0.915887, imageWidth * 0.616822, imageHeight * 0.869158); - radFgCtx.bezierCurveTo(imageWidth * 0.771028, imageHeight * 0.822429, imageWidth * 0.873831, imageHeight * 0.691588, imageWidth * 0.887850, imageHeight * 0.532710); - radFgCtx.bezierCurveTo(imageWidth * 0.897196, imageHeight * 0.387850, imageWidth * 0.836448, imageHeight * 0.257009, imageWidth * 0.719626, imageHeight * 0.182242); - radFgCtx.bezierCurveTo(imageWidth * 0.705607, imageHeight * 0.172897, imageWidth * 0.682242, imageHeight * 0.163551, imageWidth * 0.663551, imageHeight * 0.186915); - radFgCtx.bezierCurveTo(imageWidth * 0.654205, imageHeight * 0.205607, imageWidth * 0.668224, imageHeight * 0.238317, imageWidth * 0.677570, imageHeight * 0.242990); - radFgCtx.closePath(); - gradHighlight = radFgCtx.createRadialGradient((0.5) * imageWidth, ((0.5) * imageHeight), 0, ((0.5) * imageWidth), ((0.5) * imageHeight), 0.387850 * 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)'); - gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.15)'); + case 'type4': + radFgCtx.beginPath(); + radFgCtx.moveTo(imageWidth * 0.677570, imageHeight * 0.242990); + radFgCtx.bezierCurveTo(imageWidth * 0.771028, imageHeight * 0.308411, imageWidth * 0.822429, imageHeight * 0.411214, imageWidth * 0.813084, imageHeight * 0.528037); + radFgCtx.bezierCurveTo(imageWidth * 0.799065, imageHeight * 0.654205, imageWidth * 0.719626, imageHeight * 0.757009, imageWidth * 0.593457, imageHeight * 0.799065); + radFgCtx.bezierCurveTo(imageWidth * 0.485981, imageHeight * 0.831775, imageWidth * 0.369158, imageHeight * 0.808411, imageWidth * 0.285046, imageHeight * 0.728971); + radFgCtx.bezierCurveTo(imageWidth * 0.275700, imageHeight * 0.719626, imageWidth * 0.252336, imageHeight * 0.714953, imageWidth * 0.233644, imageHeight * 0.728971); + radFgCtx.bezierCurveTo(imageWidth * 0.214953, imageHeight * 0.747663, imageWidth * 0.219626, imageHeight * 0.771028, imageWidth * 0.228971, imageHeight * 0.775700); + radFgCtx.bezierCurveTo(imageWidth * 0.331775, imageHeight * 0.878504, imageWidth * 0.476635, imageHeight * 0.915887, imageWidth * 0.616822, imageHeight * 0.869158); + radFgCtx.bezierCurveTo(imageWidth * 0.771028, imageHeight * 0.822429, imageWidth * 0.873831, imageHeight * 0.691588, imageWidth * 0.887850, imageHeight * 0.532710); + radFgCtx.bezierCurveTo(imageWidth * 0.897196, imageHeight * 0.387850, imageWidth * 0.836448, imageHeight * 0.257009, imageWidth * 0.719626, imageHeight * 0.182242); + radFgCtx.bezierCurveTo(imageWidth * 0.705607, imageHeight * 0.172897, imageWidth * 0.682242, imageHeight * 0.163551, imageWidth * 0.663551, imageHeight * 0.186915); + radFgCtx.bezierCurveTo(imageWidth * 0.654205, imageHeight * 0.205607, imageWidth * 0.668224, imageHeight * 0.238317, imageWidth * 0.677570, imageHeight * 0.242990); + radFgCtx.closePath(); + gradHighlight = radFgCtx.createRadialGradient((0.5) * imageWidth, ((0.5) * imageHeight), 0, ((0.5) * imageWidth), ((0.5) * imageHeight), 0.387850 * 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)'); + gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.15)'); - radFgCtx.beginPath(); - radFgCtx.moveTo(imageWidth * 0.261682, imageHeight * 0.224299); - radFgCtx.bezierCurveTo(imageWidth * 0.285046, imageHeight * 0.238317, imageWidth * 0.252336, imageHeight * 0.285046, imageWidth * 0.242990, imageHeight * 0.317757); - radFgCtx.bezierCurveTo(imageWidth * 0.242990, imageHeight * 0.350467, imageWidth * 0.271028, imageHeight * 0.383177, imageWidth * 0.271028, imageHeight * 0.397196); - radFgCtx.bezierCurveTo(imageWidth * 0.275700, imageHeight * 0.415887, imageWidth * 0.261682, imageHeight * 0.457943, imageWidth * 0.238317, imageHeight * 0.509345); - radFgCtx.bezierCurveTo(imageWidth * 0.224299, imageHeight * 0.542056, imageWidth * 0.177570, imageHeight * 0.612149, imageWidth * 0.158878, imageHeight * 0.612149); - radFgCtx.bezierCurveTo(imageWidth * 0.144859, imageHeight * 0.612149, imageWidth * 0.088785, imageHeight * 0.546728, imageWidth * 0.130841, imageHeight * 0.369158); - radFgCtx.bezierCurveTo(imageWidth * 0.140186, imageHeight * 0.336448, imageWidth * 0.214953, imageHeight * 0.200934, imageWidth * 0.261682, imageHeight * 0.224299); - radFgCtx.closePath(); - gradHighlight2 = radFgCtx.createLinearGradient(0.130841 * imageWidth, 0.369158 * imageHeight, 0.273839 * imageWidth, 0.412877 * imageHeight); - gradHighlight2.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); - gradHighlight2.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); - radFgCtx.fillStyle = gradHighlight2; - radFgCtx.fill(); - break; + radFgCtx.beginPath(); + radFgCtx.moveTo(imageWidth * 0.261682, imageHeight * 0.224299); + radFgCtx.bezierCurveTo(imageWidth * 0.285046, imageHeight * 0.238317, imageWidth * 0.252336, imageHeight * 0.285046, imageWidth * 0.242990, imageHeight * 0.317757); + radFgCtx.bezierCurveTo(imageWidth * 0.242990, imageHeight * 0.350467, imageWidth * 0.271028, imageHeight * 0.383177, imageWidth * 0.271028, imageHeight * 0.397196); + radFgCtx.bezierCurveTo(imageWidth * 0.275700, imageHeight * 0.415887, imageWidth * 0.261682, imageHeight * 0.457943, imageWidth * 0.238317, imageHeight * 0.509345); + radFgCtx.bezierCurveTo(imageWidth * 0.224299, imageHeight * 0.542056, imageWidth * 0.177570, imageHeight * 0.612149, imageWidth * 0.158878, imageHeight * 0.612149); + radFgCtx.bezierCurveTo(imageWidth * 0.144859, imageHeight * 0.612149, imageWidth * 0.088785, imageHeight * 0.546728, imageWidth * 0.130841, imageHeight * 0.369158); + radFgCtx.bezierCurveTo(imageWidth * 0.140186, imageHeight * 0.336448, imageWidth * 0.214953, imageHeight * 0.200934, imageWidth * 0.261682, imageHeight * 0.224299); + radFgCtx.closePath(); + gradHighlight2 = radFgCtx.createLinearGradient(0.130841 * imageWidth, 0.369158 * imageHeight, 0.273839 * imageWidth, 0.412877 * imageHeight); + gradHighlight2.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); + gradHighlight2.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); + radFgCtx.fillStyle = gradHighlight2; + radFgCtx.fill(); + break; - case 'type5': - radFgCtx.beginPath(); - radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.5); - radFgCtx.bezierCurveTo(imageWidth * 0.084112, imageHeight * 0.271028, imageWidth * 0.271028, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112); - radFgCtx.bezierCurveTo(imageWidth * 0.700934, imageHeight * 0.084112, imageWidth * 0.864485, imageHeight * 0.224299, imageWidth * 0.906542, imageHeight * 0.411214); - radFgCtx.bezierCurveTo(imageWidth * 0.911214, imageHeight * 0.439252, imageWidth * 0.911214, imageHeight * 0.518691, imageWidth * 0.845794, imageHeight * 0.537383); - radFgCtx.bezierCurveTo(imageWidth * 0.794392, imageHeight * 0.546728, imageWidth * 0.551401, imageHeight * 0.411214, imageWidth * 0.392523, imageHeight * 0.457943); - radFgCtx.bezierCurveTo(imageWidth * 0.168224, imageHeight * 0.509345, imageWidth * 0.135514, imageHeight * 0.775700, imageWidth * 0.093457, imageHeight * 0.593457); - radFgCtx.bezierCurveTo(imageWidth * 0.088785, imageHeight * 0.560747, imageWidth * 0.084112, imageHeight * 0.532710, imageWidth * 0.084112, imageHeight * 0.5); - radFgCtx.closePath(); - gradHighlight = radFgCtx.createLinearGradient(0, 0.084112 * imageHeight, 0, 0.644859 * imageHeight); - gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); - gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); - break; + case 'type5': + radFgCtx.beginPath(); + radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.5); + radFgCtx.bezierCurveTo(imageWidth * 0.084112, imageHeight * 0.271028, imageWidth * 0.271028, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112); + radFgCtx.bezierCurveTo(imageWidth * 0.700934, imageHeight * 0.084112, imageWidth * 0.864485, imageHeight * 0.224299, imageWidth * 0.906542, imageHeight * 0.411214); + radFgCtx.bezierCurveTo(imageWidth * 0.911214, imageHeight * 0.439252, imageWidth * 0.911214, imageHeight * 0.518691, imageWidth * 0.845794, imageHeight * 0.537383); + radFgCtx.bezierCurveTo(imageWidth * 0.794392, imageHeight * 0.546728, imageWidth * 0.551401, imageHeight * 0.411214, imageWidth * 0.392523, imageHeight * 0.457943); + radFgCtx.bezierCurveTo(imageWidth * 0.168224, imageHeight * 0.509345, imageWidth * 0.135514, imageHeight * 0.775700, imageWidth * 0.093457, imageHeight * 0.593457); + radFgCtx.bezierCurveTo(imageWidth * 0.088785, imageHeight * 0.560747, imageWidth * 0.084112, imageHeight * 0.532710, imageWidth * 0.084112, imageHeight * 0.5); + radFgCtx.closePath(); + gradHighlight = radFgCtx.createLinearGradient(0, 0.084112 * imageHeight, 0, 0.644859 * imageHeight); + gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); + gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); + break; - case 'type1': - /* falls through */ - default: - radFgCtx.beginPath(); - radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.509345); - radFgCtx.bezierCurveTo(imageWidth * 0.205607, imageHeight * 0.448598, imageWidth * 0.336448, imageHeight * 0.415887, imageWidth * 0.5, imageHeight * 0.415887); - radFgCtx.bezierCurveTo(imageWidth * 0.672897, imageHeight * 0.415887, imageWidth * 0.789719, imageHeight * 0.443925, imageWidth * 0.915887, imageHeight * 0.509345); - radFgCtx.bezierCurveTo(imageWidth * 0.915887, imageHeight * 0.275700, imageWidth * 0.738317, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112); - radFgCtx.bezierCurveTo(imageWidth * 0.261682, imageHeight * 0.084112, imageWidth * 0.084112, imageHeight * 0.275700, imageWidth * 0.084112, imageHeight * 0.509345); - radFgCtx.closePath(); - gradHighlight = radFgCtx.createLinearGradient(0, 0.088785 * imageHeight, 0, 0.490654 * imageHeight); - gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); - gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); - break; + case 'type1': + /* falls through */ + default: + radFgCtx.beginPath(); + radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.509345); + radFgCtx.bezierCurveTo(imageWidth * 0.205607, imageHeight * 0.448598, imageWidth * 0.336448, imageHeight * 0.415887, imageWidth * 0.5, imageHeight * 0.415887); + radFgCtx.bezierCurveTo(imageWidth * 0.672897, imageHeight * 0.415887, imageWidth * 0.789719, imageHeight * 0.443925, imageWidth * 0.915887, imageHeight * 0.509345); + radFgCtx.bezierCurveTo(imageWidth * 0.915887, imageHeight * 0.275700, imageWidth * 0.738317, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112); + radFgCtx.bezierCurveTo(imageWidth * 0.261682, imageHeight * 0.084112, imageWidth * 0.084112, imageHeight * 0.275700, imageWidth * 0.084112, imageHeight * 0.509345); + radFgCtx.closePath(); + gradHighlight = radFgCtx.createLinearGradient(0, 0.088785 * imageHeight, 0, 0.490654 * imageHeight); + gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)'); + gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)'); + break; } radFgCtx.fillStyle = gradHighlight; radFgCtx.fill(); @@ -5145,158 +5111,158 @@ var steelseries = (function () { knobCtx = knobBuffer.getContext('2d'); switch (knob.type) { - case 'metalKnob': - // METALKNOB_FRAME - knobCtx.beginPath(); - knobCtx.moveTo(0, size * 0.5); - knobCtx.bezierCurveTo(0, size * 0.222222, size * 0.222222, 0, size * 0.5, 0); - knobCtx.bezierCurveTo(size * 0.777777, 0, size, size * 0.222222, size, size * 0.5); - knobCtx.bezierCurveTo(size, size * 0.777777, size * 0.777777, size, size * 0.5, size); - knobCtx.bezierCurveTo(size * 0.222222, size, 0, size * 0.777777, 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(); + case 'metalKnob': + // METALKNOB_FRAME + knobCtx.beginPath(); + knobCtx.moveTo(0, size * 0.5); + knobCtx.bezierCurveTo(0, size * 0.222222, size * 0.222222, 0, size * 0.5, 0); + knobCtx.bezierCurveTo(size * 0.777777, 0, size, size * 0.222222, size, size * 0.5); + knobCtx.bezierCurveTo(size, size * 0.777777, size * 0.777777, size, size * 0.5, size); + knobCtx.bezierCurveTo(size * 0.222222, size, 0, size * 0.777777, 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 * 0.055555, size * 0.5); - knobCtx.bezierCurveTo(size * 0.055555, size * 0.277777, size * 0.277777, size * 0.055555, size * 0.5, size * 0.055555); - knobCtx.bezierCurveTo(size * 0.722222, size * 0.055555, size * 0.944444, size * 0.277777, size * 0.944444, size * 0.5); - knobCtx.bezierCurveTo(size * 0.944444, size * 0.722222, size * 0.722222, size * 0.944444, size * 0.5, size * 0.944444); - knobCtx.bezierCurveTo(size * 0.277777, size * 0.944444, size * 0.055555, size * 0.722222, size * 0.055555, size * 0.5); - knobCtx.closePath(); - grad = knobCtx.createLinearGradient(0, 0.055555 * size, 0, 0.944443 * size); - switch (style.style) { - case 'black': - grad.addColorStop(0, 'rgb(43, 42, 47)'); - grad.addColorStop(1, 'rgb(26, 27, 32)'); - break; - - case 'brass': - grad.addColorStop(0, 'rgb(150, 110, 54)'); - grad.addColorStop(1, 'rgb(124, 95, 61)'); - break; - - case 'silver': - /* falls through */ - default: - grad.addColorStop(0, 'rgb(204, 204, 204)'); - grad.addColorStop(1, 'rgb(87, 92, 98)'); - break; - } - knobCtx.fillStyle = grad; - knobCtx.fill(); - - // METALKNOB_LOWERHL - knobCtx.beginPath(); - knobCtx.moveTo(size * 0.777777, size * 0.833333); - knobCtx.bezierCurveTo(size * 0.722222, size * 0.722222, size * 0.611111, size * 0.666666, size * 0.5, size * 0.666666); - knobCtx.bezierCurveTo(size * 0.388888, size * 0.666666, size * 0.277777, size * 0.722222, size * 0.222222, size * 0.833333); - knobCtx.bezierCurveTo(size * 0.277777, size * 0.888888, size * 0.388888, size * 0.944444, size * 0.5, size * 0.944444); - knobCtx.bezierCurveTo(size * 0.611111, size * 0.944444, size * 0.722222, size * 0.888888, size * 0.777777, size * 0.833333); - knobCtx.closePath(); - grad = knobCtx.createRadialGradient((0.555555) * size, ((0.944444) * size), 0, ((0.555555) * size), ((0.944444) * size), 0.388888 * 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 * 0.944444, size * 0.277777); - knobCtx.bezierCurveTo(size * 0.833333, size * 0.111111, size * 0.666666, 0, size * 0.5, 0); - knobCtx.bezierCurveTo(size * 0.333333, 0, size * 0.166666, size * 0.111111, size * 0.055555, size * 0.277777); - knobCtx.bezierCurveTo(size * 0.166666, size * 0.333333, size * 0.333333, size * 0.388888, size * 0.5, size * 0.388888); - knobCtx.bezierCurveTo(size * 0.666666, size * 0.388888, size * 0.833333, size * 0.333333, size * 0.944444, size * 0.277777); - knobCtx.closePath(); - grad = knobCtx.createRadialGradient(0.5 * size, 0, 0, ((0.5) * size), 0, 0.583333 * size); - grad.addColorStop(0, 'rgba(255, 255, 255, 0.749019)'); - grad.addColorStop(1, 'rgba(255, 255, 255, 0)'); - knobCtx.fillStyle = grad; - knobCtx.fill(); - - // METALKNOB_INNERFRAME - knobCtx.beginPath(); - knobCtx.moveTo(size * 0.277777, size * 0.555555); - knobCtx.bezierCurveTo(size * 0.277777, size * 0.388888, size * 0.388888, size * 0.277777, size * 0.5, size * 0.277777); - knobCtx.bezierCurveTo(size * 0.611111, size * 0.277777, size * 0.777777, size * 0.388888, size * 0.777777, size * 0.555555); - knobCtx.bezierCurveTo(size * 0.777777, size * 0.666666, size * 0.611111, size * 0.777777, size * 0.5, size * 0.777777); - knobCtx.bezierCurveTo(size * 0.388888, size * 0.777777, size * 0.277777, size * 0.666666, size * 0.277777, size * 0.555555); - knobCtx.closePath(); - grad = knobCtx.createLinearGradient(0, 0.277777 * size, 0, 0.722221 * size); - grad.addColorStop(0, '#000000'); - grad.addColorStop(1, 'rgb(204, 204, 204)'); - knobCtx.fillStyle = grad; - knobCtx.fill(); - - // METALKNOB_INNERBACKGROUND - knobCtx.beginPath(); - knobCtx.moveTo(size * 0.333333, size * 0.555555); - knobCtx.bezierCurveTo(size * 0.333333, size * 0.444444, size * 0.388888, size * 0.333333, size * 0.5, size * 0.333333); - knobCtx.bezierCurveTo(size * 0.611111, size * 0.333333, size * 0.722222, size * 0.444444, size * 0.722222, size * 0.555555); - knobCtx.bezierCurveTo(size * 0.722222, size * 0.611111, size * 0.611111, size * 0.722222, size * 0.5, size * 0.722222); - knobCtx.bezierCurveTo(size * 0.388888, size * 0.722222, size * 0.333333, size * 0.611111, size * 0.333333, size * 0.555555); - knobCtx.closePath(); - grad = knobCtx.createLinearGradient(0, 0.333333 * size, 0, 0.666666 * size); - grad.addColorStop(0, 'rgb(10, 9, 1)'); - grad.addColorStop(1, 'rgb(42, 41, 37)'); - knobCtx.fillStyle = grad; - knobCtx.fill(); + // METALKNOB_MAIN + knobCtx.beginPath(); + knobCtx.moveTo(size * 0.055555, size * 0.5); + knobCtx.bezierCurveTo(size * 0.055555, size * 0.277777, size * 0.277777, size * 0.055555, size * 0.5, size * 0.055555); + knobCtx.bezierCurveTo(size * 0.722222, size * 0.055555, size * 0.944444, size * 0.277777, size * 0.944444, size * 0.5); + knobCtx.bezierCurveTo(size * 0.944444, size * 0.722222, size * 0.722222, size * 0.944444, size * 0.5, size * 0.944444); + knobCtx.bezierCurveTo(size * 0.277777, size * 0.944444, size * 0.055555, size * 0.722222, size * 0.055555, size * 0.5); + knobCtx.closePath(); + grad = knobCtx.createLinearGradient(0, 0.055555 * size, 0, 0.944443 * size); + switch (style.style) { + case 'black': + grad.addColorStop(0, 'rgb(43, 42, 47)'); + grad.addColorStop(1, 'rgb(26, 27, 32)'); break; - 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); - knobCtx.closePath(); - knobCtx.fill(); - grad = knobCtx.createLinearGradient(0, size - size * 0.77, 0, size - size * 0.77 + 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)'); - break; - - case 'brass': - grad.addColorStop(0, 'rgb(223, 208, 174)'); - grad.addColorStop(0.5, 'rgb(123, 95, 63)'); - grad.addColorStop(1, 'rgb(207, 190, 157)'); - break; - - 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)'); - break; - } - knobCtx.fillStyle = grad; - knobCtx.beginPath(); - knobCtx.arc(maxPostCenterX, maxPostCenterY, size * 0.77 / 2, 0, TWO_PI, true); - knobCtx.closePath(); - knobCtx.fill(); - - grad = knobCtx.createRadialGradient(maxPostCenterX, maxPostCenterY, 0, maxPostCenterX, maxPostCenterY, size * 0.77 / 2); - 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(); + case 'brass': + grad.addColorStop(0, 'rgb(150, 110, 54)'); + grad.addColorStop(1, 'rgb(124, 95, 61)'); break; + + case 'silver': + /* falls through */ + default: + grad.addColorStop(0, 'rgb(204, 204, 204)'); + grad.addColorStop(1, 'rgb(87, 92, 98)'); + break; + } + knobCtx.fillStyle = grad; + knobCtx.fill(); + + // METALKNOB_LOWERHL + knobCtx.beginPath(); + knobCtx.moveTo(size * 0.777777, size * 0.833333); + knobCtx.bezierCurveTo(size * 0.722222, size * 0.722222, size * 0.611111, size * 0.666666, size * 0.5, size * 0.666666); + knobCtx.bezierCurveTo(size * 0.388888, size * 0.666666, size * 0.277777, size * 0.722222, size * 0.222222, size * 0.833333); + knobCtx.bezierCurveTo(size * 0.277777, size * 0.888888, size * 0.388888, size * 0.944444, size * 0.5, size * 0.944444); + knobCtx.bezierCurveTo(size * 0.611111, size * 0.944444, size * 0.722222, size * 0.888888, size * 0.777777, size * 0.833333); + knobCtx.closePath(); + grad = knobCtx.createRadialGradient((0.555555) * size, ((0.944444) * size), 0, ((0.555555) * size), ((0.944444) * size), 0.388888 * 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 * 0.944444, size * 0.277777); + knobCtx.bezierCurveTo(size * 0.833333, size * 0.111111, size * 0.666666, 0, size * 0.5, 0); + knobCtx.bezierCurveTo(size * 0.333333, 0, size * 0.166666, size * 0.111111, size * 0.055555, size * 0.277777); + knobCtx.bezierCurveTo(size * 0.166666, size * 0.333333, size * 0.333333, size * 0.388888, size * 0.5, size * 0.388888); + knobCtx.bezierCurveTo(size * 0.666666, size * 0.388888, size * 0.833333, size * 0.333333, size * 0.944444, size * 0.277777); + knobCtx.closePath(); + grad = knobCtx.createRadialGradient(0.5 * size, 0, 0, ((0.5) * size), 0, 0.583333 * size); + grad.addColorStop(0, 'rgba(255, 255, 255, 0.749019)'); + grad.addColorStop(1, 'rgba(255, 255, 255, 0)'); + knobCtx.fillStyle = grad; + knobCtx.fill(); + + // METALKNOB_INNERFRAME + knobCtx.beginPath(); + knobCtx.moveTo(size * 0.277777, size * 0.555555); + knobCtx.bezierCurveTo(size * 0.277777, size * 0.388888, size * 0.388888, size * 0.277777, size * 0.5, size * 0.277777); + knobCtx.bezierCurveTo(size * 0.611111, size * 0.277777, size * 0.777777, size * 0.388888, size * 0.777777, size * 0.555555); + knobCtx.bezierCurveTo(size * 0.777777, size * 0.666666, size * 0.611111, size * 0.777777, size * 0.5, size * 0.777777); + knobCtx.bezierCurveTo(size * 0.388888, size * 0.777777, size * 0.277777, size * 0.666666, size * 0.277777, size * 0.555555); + knobCtx.closePath(); + grad = knobCtx.createLinearGradient(0, 0.277777 * size, 0, 0.722221 * size); + grad.addColorStop(0, '#000000'); + grad.addColorStop(1, 'rgb(204, 204, 204)'); + knobCtx.fillStyle = grad; + knobCtx.fill(); + + // METALKNOB_INNERBACKGROUND + knobCtx.beginPath(); + knobCtx.moveTo(size * 0.333333, size * 0.555555); + knobCtx.bezierCurveTo(size * 0.333333, size * 0.444444, size * 0.388888, size * 0.333333, size * 0.5, size * 0.333333); + knobCtx.bezierCurveTo(size * 0.611111, size * 0.333333, size * 0.722222, size * 0.444444, size * 0.722222, size * 0.555555); + knobCtx.bezierCurveTo(size * 0.722222, size * 0.611111, size * 0.611111, size * 0.722222, size * 0.5, size * 0.722222); + knobCtx.bezierCurveTo(size * 0.388888, size * 0.722222, size * 0.333333, size * 0.611111, size * 0.333333, size * 0.555555); + knobCtx.closePath(); + grad = knobCtx.createLinearGradient(0, 0.333333 * size, 0, 0.666666 * size); + grad.addColorStop(0, 'rgb(10, 9, 1)'); + grad.addColorStop(1, 'rgb(42, 41, 37)'); + knobCtx.fillStyle = grad; + knobCtx.fill(); + break; + + 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); + knobCtx.closePath(); + knobCtx.fill(); + grad = knobCtx.createLinearGradient(0, size - size * 0.77, 0, size - size * 0.77 + 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)'); + break; + + case 'brass': + grad.addColorStop(0, 'rgb(223, 208, 174)'); + grad.addColorStop(0.5, 'rgb(123, 95, 63)'); + grad.addColorStop(1, 'rgb(207, 190, 157)'); + break; + + 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)'); + break; + } + knobCtx.fillStyle = grad; + knobCtx.beginPath(); + knobCtx.arc(maxPostCenterX, maxPostCenterY, size * 0.77 / 2, 0, TWO_PI, true); + knobCtx.closePath(); + knobCtx.fill(); + + grad = knobCtx.createRadialGradient(maxPostCenterX, maxPostCenterY, 0, maxPostCenterX, maxPostCenterY, size * 0.77 / 2); + 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(); + break; } // cache the buffer @@ -5320,94 +5286,94 @@ var steelseries = (function () { ledCtx = ledBuffer.getContext('2d'); switch (state) { - case 0: // LED OFF - // OFF Gradient - grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size * 0.5 / 2); - grad.addColorStop(0, ledColor.innerColor1_OFF); - grad.addColorStop(0.2, ledColor.innerColor2_OFF); - grad.addColorStop(1, ledColor.outerColor_OFF); - ledCtx.fillStyle = grad; + case 0: // LED OFF + // OFF Gradient + grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size * 0.5 / 2); + 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(); + 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; + // 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(); + 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 + 0.15 * size); - grad.addColorStop(0, 'rgba(255, 255, 255, 0.4)'); - grad.addColorStop(1, 'rgba(255, 255, 255, 0)'); - ledCtx.fillStyle = grad; + // LightReflex + grad = ledCtx.createLinearGradient(0, 0.35 * size, 0, 0.35 * size + 0.15 * 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 + 0.2 * size / 2, size * 0.2, 0, TWO_PI, true); - ledCtx.closePath(); - ledCtx.fill(); - break; + ledCtx.beginPath(); + ledCtx.arc(ledCenterX, 0.35 * size + 0.2 * size / 2, size * 0.2, 0, TWO_PI, true); + ledCtx.closePath(); + ledCtx.fill(); + break; - 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; + 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(); + 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; + // 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(); + 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 + 0.15 * size); - grad.addColorStop(0, 'rgba(255, 255, 255, 0.4)'); - grad.addColorStop(1, 'rgba(255, 255, 255, 0)'); - ledCtx.fillStyle = grad; + // LightReflex + grad = ledCtx.createLinearGradient(0, 0.35 * size, 0, 0.35 * size + 0.15 * 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 + 0.2 * size / 2, size * 0.2, 0, TWO_PI, true); - ledCtx.closePath(); - ledCtx.fill(); + ledCtx.beginPath(); + ledCtx.arc(ledCenterX, 0.35 * size + 0.2 * size / 2, size * 0.2, 0, TWO_PI, true); + ledCtx.closePath(); + ledCtx.fill(); - // Corona - grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size / 2); - grad.addColorStop(0, setAlpha(ledColor.coronaColor, 0)); - grad.addColorStop(0.6, setAlpha(ledColor.coronaColor, 0.4)); - grad.addColorStop(0.7, setAlpha(ledColor.coronaColor, 0.25)); - grad.addColorStop(0.8, setAlpha(ledColor.coronaColor, 0.15)); - grad.addColorStop(0.85, setAlpha(ledColor.coronaColor, 0.05)); - grad.addColorStop(1, setAlpha(ledColor.coronaColor, 0)); - ledCtx.fillStyle = grad; + // Corona + grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size / 2); + grad.addColorStop(0, setAlpha(ledColor.coronaColor, 0)); + grad.addColorStop(0.6, setAlpha(ledColor.coronaColor, 0.4)); + grad.addColorStop(0.7, setAlpha(ledColor.coronaColor, 0.25)); + grad.addColorStop(0.8, setAlpha(ledColor.coronaColor, 0.15)); + grad.addColorStop(0.85, setAlpha(ledColor.coronaColor, 0.05)); + grad.addColorStop(1, setAlpha(ledColor.coronaColor, 0)); + ledCtx.fillStyle = grad; - ledCtx.beginPath(); - ledCtx.arc(ledCenterX, ledCenterY, size / 2, 0, TWO_PI, true); - ledCtx.closePath(); - ledCtx.fill(); - break; + ledCtx.beginPath(); + ledCtx.arc(ledCenterX, ledCenterY, size / 2, 0, TWO_PI, true); + ledCtx.closePath(); + ledCtx.fill(); + break; } // cache the buffer createLedImage.cache[cacheKey] = ledBuffer; @@ -5714,23 +5680,23 @@ var steelseries = (function () { 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(); - break; - case 'steady': - drawDownArrow(); - drawUpArrow(); - drawEquals(); - break; - case 'down': - /* falls through */ - default: - drawUpArrow(); - drawEquals(); - drawDownArrow(); - break; + case 'up': + drawDownArrow(); + drawEquals(); + drawUpArrow(); + break; + case 'steady': + drawDownArrow(); + drawUpArrow(); + drawEquals(); + break; + case 'down': + /* falls through */ + default: + drawUpArrow(); + drawEquals(); + drawDownArrow(); + break; } // cache the buffer createTrendIndicator.cache[cacheKey] = trendBuffer; @@ -5791,127 +5757,127 @@ var steelseries = (function () { //***************************************** T E X T U R E S **************************************************** var carbonBuffer = drawToBuffer(12, 12, function (ctx) { - var imageWidth = ctx.canvas.width, - imageHeight = ctx.canvas.height, - offsetX = 0, - offsetY = 0, - grad; + var imageWidth = ctx.canvas.width, + imageHeight = ctx.canvas.height, + offsetX = 0, + offsetY = 0, + grad; - ctx.save(); + ctx.save(); - // RULB - ctx.save(); - ctx.beginPath(); - ctx.rect(0, 0, imageWidth * 0.5, imageHeight * 0.5); - ctx.closePath(); - ctx.restore(); + // 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(); + 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.083333, 0, imageWidth * 0.333333, imageHeight * 0.416666); - ctx.closePath(); - ctx.restore(); - offsetX = 0.083333; - offsetY = 0; - grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight); - grad.addColorStop(0, 'rgb(38, 38, 38)'); - grad.addColorStop(1, 'rgb(30, 30, 30)'); - ctx.fillStyle = grad; - ctx.fill(); + // RULF + ctx.save(); + ctx.beginPath(); + ctx.rect(imageWidth * 0.083333, 0, imageWidth * 0.333333, imageHeight * 0.416666); + ctx.closePath(); + ctx.restore(); + offsetX = 0.083333; + offsetY = 0; + grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * 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(); + // 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 * 0.583333, imageHeight * 0.5, imageWidth * 0.333333, imageHeight * 0.416666); - ctx.closePath(); - ctx.restore(); - offsetX = 0.583333; - offsetY = 0.5; - grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight); - grad.addColorStop(0, 'rgb(38, 38, 38)'); - grad.addColorStop(1, 'rgb(30, 30, 30)'); - ctx.fillStyle = grad; - ctx.fill(); + // RLRF + ctx.save(); + ctx.beginPath(); + ctx.rect(imageWidth * 0.583333, imageHeight * 0.5, imageWidth * 0.333333, imageHeight * 0.416666); + ctx.closePath(); + ctx.restore(); + offsetX = 0.583333; + offsetY = 0.5; + grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * 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(); - 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(); + // RURB + ctx.save(); + ctx.beginPath(); + 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 * 0.583333, imageHeight * 0.083333, imageWidth * 0.333333, imageHeight * 0.416666); - ctx.closePath(); - ctx.restore(); - offsetX = 0.583333; - offsetY = 0.083333; - grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight); - grad.addColorStop(0, 'rgb(53, 53, 53)'); - grad.addColorStop(1, 'rgb(45, 45, 45)'); - ctx.fillStyle = grad; - ctx.fill(); + // RURF + ctx.save(); + ctx.beginPath(); + ctx.rect(imageWidth * 0.583333, imageHeight * 0.083333, imageWidth * 0.333333, imageHeight * 0.416666); + ctx.closePath(); + ctx.restore(); + offsetX = 0.583333; + offsetY = 0.083333; + grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * 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(); + // 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 * 0.083333, imageHeight * 0.583333, imageWidth * 0.333333, imageHeight * 0.416666); - ctx.closePath(); - ctx.restore(); - offsetX = 0.083333; - offsetY = 0.583333; - grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight); - grad.addColorStop(0, '#353535'); - grad.addColorStop(1, '#2d2d2d'); - ctx.fillStyle = grad; - ctx.fill(); + // RLLF + ctx.save(); + ctx.beginPath(); + ctx.rect(imageWidth * 0.083333, imageHeight * 0.583333, imageWidth * 0.333333, imageHeight * 0.416666); + ctx.closePath(); + ctx.restore(); + offsetX = 0.083333; + offsetY = 0.583333; + grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight); + grad.addColorStop(0, '#353535'); + grad.addColorStop(1, '#2d2d2d'); + ctx.fillStyle = grad; + ctx.fill(); - ctx.restore(); - }); + ctx.restore(); + }); var punchedSheetBuffer = drawToBuffer(15, 15, function (ctx) { var imageWidth = ctx.canvas.width, @@ -6033,7 +5999,7 @@ var steelseries = (function () { if (radius !== 0) { totR = totG = totB = 0; } - for (x = 0; x < width; x++) { + for (x = 0; x < width; x ++) { indx = (y * width * 4) + (x * 4); tr = red; tg = green; @@ -6047,12 +6013,12 @@ var steelseries = (function () { if (monochrome) { n = ((2 * Math.random() - 1) * variation) | 0; - inPixels.data[indx] = clamp(tr + n); + 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] = random(tr, variation); inPixels.data[indx + 1] = random(tg, variation); inPixels.data[indx + 2] = random(tb, variation); inPixels.data[indx + 3] = alpha; @@ -6090,7 +6056,7 @@ var steelseries = (function () { indx = 0; for (y = 0; y < height; y++) { totR = totG = totB = 0; - for (x = 0; x < radius; x++) { + for (x = 0; x < radius ; x++) { i = (indx + x) * 4; totR += inPix.data[i]; totG += inPix.data[i + 1]; @@ -6208,35 +6174,35 @@ var steelseries = (function () { 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 +// 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); @@ -6257,7 +6223,7 @@ var steelseries = (function () { } // 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] = pixColor[0]; pixels.data[indx + 1] = pixColor[1]; pixels.data[indx + 2] = pixColor[2]; pixels.data[indx + 3] = alpha; @@ -6313,7 +6279,7 @@ var steelseries = (function () { } // 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]; + pixels.data[indx] = pixColor[0]; pixels.data[indx + 1] = pixColor[0]; pixels.data[indx + 2] = pixColor[0]; pixels.data[indx + 3] = alpha; @@ -6404,11 +6370,9 @@ var steelseries = (function () { } function section(start, stop, color) { - return { - start: start, - stop: stop, - color: color - }; + return {start : start, + stop : stop, + color : color}; } Math.log10 = function (value) { @@ -6458,7 +6422,7 @@ var steelseries = (function () { ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.closePath(); - // ctx.stroke(); +// ctx.stroke(); } function createBuffer(width, height) { @@ -6534,15 +6498,15 @@ var steelseries = (function () { 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); - break; - case green: - hue = (blue - red) / delta + 2; - break; - case blue: - hue = (red - green) / delta + 4; - break; + case red: + hue = (green - blue) / delta + (green < blue ? 6 : 0); + break; + case green: + hue = (blue - red) / delta + 2; + break; + case blue: + hue = (red - green) / delta + 4; + break; } hue /= 6; } @@ -6558,36 +6522,36 @@ var steelseries = (function () { t = brightness * (1 - (1 - f) * saturation); switch (i % 6) { - case 0: - r = brightness; - g = t; - b = p; - break; - case 1: - r = q; - g = brightness; - b = p; - break; - case 2: - r = p; - g = brightness; - b = t; - break; - case 3: - r = p; - g = q; - b = brightness; - break; - case 4: - r = t; - g = p; - b = brightness; - break; - case 5: - r = brightness; - g = p; - b = q; - break; + case 0: + r = brightness; + g = t; + b = p; + break; + case 1: + r = q; + g = brightness; + b = p; + break; + case 2: + r = p; + g = brightness; + b = t; + break; + case 3: + r = p; + g = q; + b = brightness; + break; + case 4: + r = t; + g = p; + b = brightness; + break; + case 5: + r = brightness; + g = p; + b = q; + break; } return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]; @@ -6609,15 +6573,15 @@ var steelseries = (function () { hue = 0; // achromatic } else { switch (max) { - case r: - hue = (g - b) / delta + (g < b ? 6 : 0); - break; - case g: - hue = (b - r) / delta + 2; - break; - case b: - hue = (r - g) / delta + 4; - break; + case r: + hue = (g - b) / delta + (g < b ? 6 : 0); + break; + case g: + hue = (b - r) / delta + 2; + break; + case b: + hue = (r - g) / delta + 4; + break; } hue /= 6; } @@ -6670,11 +6634,11 @@ var steelseries = (function () { // shim layer var requestAnimFrame = (function () { - return window.requestAnimationFrame || + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 16); }; @@ -6969,42 +6933,42 @@ var steelseries = (function () { //********************************** E X P O R T F U N C T I O N S ******************************************* return { // Components EXTERNAL : INTERNAL - Radial: radial, - RadialBargraph: radialBargraph, + Radial : radial, + RadialBargraph : radialBargraph, DisplaySingle: displaySingle, - WindDirection: windDirection, - Led: led, + WindDirection : windDirection, + Led : led, Odometer: odometer, - // /images - drawFrame: drawRadialFrameImage, - drawBackground: drawRadialBackgroundImage, - drawForeground: drawRadialForegroundImage, + // Images + drawFrame : drawRadialFrameImage, + drawBackground : drawRadialBackgroundImage, + drawForeground : drawRadialForegroundImage, // Tools - rgbaColor: RgbaColor, - ConicalGradient: ConicalGradient, - setAlpha: setAlpha, - getColorFromFraction: getColorFromFraction, - gradientWrapper: GradientWrapper, + rgbaColor : RgbaColor, + ConicalGradient : ConicalGradient, + setAlpha : setAlpha, + getColorFromFraction : getColorFromFraction, + gradientWrapper : GradientWrapper, // Constants - BackgroundColor: backgroundColor, - LcdColor: lcdColor, - ColorDef: color, - LedColor: ledColor, - GaugeType: gaugeType, + BackgroundColor : backgroundColor, + LcdColor : lcdColor, + ColorDef : color, + LedColor : ledColor, + GaugeType : gaugeType, Orientation: orientation, - FrameDesign: frameDesign, - PointerType: pointerType, - ForegroundType: foregroundType, - KnobType: knobType, + FrameDesign : frameDesign, + PointerType : pointerType, + ForegroundType : foregroundType, + KnobType : knobType, KnobStyle: knobStyle, LabelNumberFormat: labelNumberFormat, TickLabelOrientation: tickLabelOrientation, TrendState: trendState, // Other - Section: section + Section : section }; }()); diff --git a/oldindex.htm b/oldindex.htm new file mode 100644 index 0000000..c031d80 --- /dev/null +++ b/oldindex.htm @@ -0,0 +1,242 @@ + +
+ +
+ +
+

Weather

+
+
+
+ +
+ +
+ +
+ +
+

Almanac

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dawn:Sun Rise:Moon Rise:MoonVisible % +
Dusk:Sun Set:Moon Set:
Daylight:Day Length:Moon Phase:
Current conditions:
+
+
+
+
+
+ +
+ +
+

Conditions at local time

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Temperature and Humidity
Temperature  + Dew Point  +
Windchill  + Humidity %
Heat Index Apparent TemperatureFeels Like 
Temp change last hour 
Rainfall
Rainfall Today  + Rainfall Rate /hr +
Rainfall This Month  + Rainfall This Year  +
Rainfall Last Hour  + Last rainfall
Rainfall Since Midnight Rainfall Last 24 Hours  +
Wind
Wind Speed (gust)  + Wind Speed (avg)  +
Wind Bearing° + Beaufort
Wind Variation (last 10 minutes)From ° to °
Pressure (sea + level)
Barometer  +  /hr
Solar
Solar Radiation W/m²Evapotranspiration Today  +
UV Index
+
+

Page updated .

+
+
+
+
+
+ +
+
+
+

Welcome to

+

The weather station in use is the
+ This page is updated every minutes. The + meteorological day used at this station ends at . +

+

Forecast:

+
+
+
+
+
+
+ diff --git a/today.htm b/today.htm new file mode 100644 index 0000000..30eb1b6 --- /dev/null +++ b/today.htm @@ -0,0 +1,239 @@ + + + + + + + + + Cumulus MX + + + + + + + + + + + + + + + + + + + +
+
+
+

Today

+
+
+
+
+
+
+
+

Today's data

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Temperature and Humidity
High Temperature at
Low Temperature at
Temperature Range 
High Apparent Temperature at
Low Apparent Temperature at
High Feels Like at
Low Feels Like at
Low Wind Chill at
High Heat Index at
High Humidity %at
Low Humidity %at
Rainfall
Rainfall Today 
Rainfall Rate Max /hrat
High Hourly Rainfall at
High 24 Hour Rainfall at
Days Since Last Dry Day
Days Since It Last Rained
Wind
High Gust at
High Speed (10 minute average)  ()at
Wind Run 
Dominant Direction°
Pressure (sea level)
High Pressure at
Low Pressure at
Solar
High Solar Radiation W/m2at
Hours of Sunshine hrs
High UV Indexat
+

Page data updated .

+
+
+
+
+
+
+
+
+
+

Welcome to

+

This page shows the highs, lows and current values for today.
+ This page is updated every minutes. The meteorological day used at this station ends at + . +

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/today/index.php b/today/index.php deleted file mode 100644 index 1edd33a..0000000 --- a/today/index.php +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - - - - -
- -
-

Data for today ()

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Temperature and Humidity
High Temperature at
Low Temperature at
Temperature Range 
High Feels Like at
Low Feels Like at
Low Wind Chill at
High Heat Index at
High Humidity %at
Low Humidity %at
Rainfall
Rainfall Today 
Rainfall Rate Max /hrat
High Hourly Rainfall at
High 24 Hour Rainfall at
Days Since Last Dry Day
Days Since It Last Rained
Wind
High Gust at
High Speed (10 minute average)  ()at
Wind Run 
Dominant Direction°
Pressure (sea level)
High Pressure at
Low Pressure at
- Page data updated -
- -
- - - \ No newline at end of file diff --git a/yesterday.htm b/yesterday.htm new file mode 100644 index 0000000..f04923a --- /dev/null +++ b/yesterday.htm @@ -0,0 +1,225 @@ + + + + + + + + + Cumulus MX + + + + + + + + + + + + + + + + + + + +
+
+
+

Yesterday

+
+
+
+
+
+
+
+

Yesterday's data

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Temperature and Humidity
High Temperature at
Low Temperature at
Temperature Range 
High Apparent Temperature at
Low Apparent Temperature at
High Feels Like at
Low Feels Like at
Low Wind Chill at
High Heat Index at
High Humidity %at
Low Humidity %at
Rainfall
Rainfall Yesterday 
Rainfall Rate Max /hrat
High Hourly Rainfall at
High 24 Hour Rainfall at
Wind
High Gust at
High Speed (10 minute average)  ()at
Wind Run 
Dominant Direction°
Pressure (sea level)
High Pressure at
Low Pressure at
Solar
High Solar Radiation W/m²at
Hours of Sunshine hrs
High UV Indexat
+

Page updated .

+
+
+
+
+
+
+
+
+
+

Welcome to

+

This page shows a summary of the data for the 24 hrs up to local time.

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/yesterday/index.php b/yesterday/index.php deleted file mode 100644 index b93257a..0000000 --- a/yesterday/index.php +++ /dev/null @@ -1,149 +0,0 @@ - - - - - - - - - -
- -
-

Data for today ()

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Temperature and Humidity
High Temperature at
Low Temperature at
Temperature Range 
High Feels Like at
Low Feels Like at
Low Wind Chill at
High Heat Index at
High Humidity %at
Low Humidity %at
Rainfall
Rainfall Today 
Rainfall Rate Max /hrat
High Hourly Rainfall at
High 24 Hour Rainfall at
Days Since Last Dry Day
Days Since It Last Rained
Wind
High Gust at
High Speed (10 minute average)  ()at
Wind Run 
Dominant Direction° -
Pressure (sea level)
High Pressure at
Low Pressure at
- Page data updated -
- -
- - - \ No newline at end of file