Add forecast and stuff to weather lookahead

scripts/remove_bloat.sh

@@ -7,7 +7,7 @@ echo "Removing bloat in node_modules..."
 pwd
 
 cd www/node_modules
-rm -rf {ansicolors,buffer-from,cardinal,concat-stream,core-util-is,csscolorparser}
+rm -rf {ansicolors,buffer-from,cardinal,chartjs-color,chartjs-color-string,color-convert,color-name,concat-stream,core-util-is,csscolorparser}
 rm -rf {dom7,earcut,esprima,geojson-vt,gl-matrix,grid-index,ieee754,inherits,isarray}
 rm -rf {kdbush,leaflet-geometryutil,@mapbox,minimist,murmurhash-js}
 rm -rf {path-to-regexp,pbf,potpack,process-nextick-args}
@@ -25,6 +25,11 @@ rm -rf dist/bwip-js.js
 rm -rf dist/node-bwipjs.js
 cd ..
 
+cd chart.js
+cd dist
+rm {Chart.bundle.js,Chart.css,Chart.js}
+cd ../..
+
 cd @fortawesome/fontawesome-free
 rm -rf {js,less,metadata,scss,sprites,svgs}
 find css -type f -not -name 'all.min.css' -delete

www/assets/images/weather-fog.svg

@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="weather-fog.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-178.85714"
+     inkscape:cy="388.57143"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-161.53332)">
+    <g
+       id="g877"
+       class="fa-group"
+       transform="matrix(0.15119047,0,0,0.15119047,33.866667,216.0375)"
+       style="fill:#8d6e63">
+      <path
+         id="path873"
+         d="m 256,32 32,128 v 112 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 160 L 192,32 Z"
+         class="fa-secondary"
+         inkscape:connector-curvature="0"
+         style="opacity:0.4;fill:#8d6e63;fill-opacity:1" />
+      <path
+         id="path875"
+         d="m 446.7,160 c 0.4,-0.5 0.5,-0.7 0.9,-1.2 L 391.3,53.9 A 32,32 0 0 0 360.9,32 H 256 l 32,128 z M 160,160 192,32 H 87.1 A 32,32 0 0 0 56.7,53.9 L 0.4,158.8 c 0.4,0.5 0.5,0.7 0.9,1.2 z m 128,32 v 80 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 192 H 0 v 256 a 32,32 0 0 0 32,32 h 384 a 32,32 0 0 0 32,-32 V 192 Z"
+         class="fa-primary"
+         inkscape:connector-curvature="0"
+         style="fill:#8d6e63;fill-opacity:1" />
+    </g>
+    <g
+       transform="matrix(0.19282692,0,0,0.19282692,6.0287181,157.15353)"
+       class="fa-group"
+       id="g6"
+       style="stroke-width:1.37212861">
+      <path
+         style="opacity:1;fill:#91a5af;stroke-width:1.37212861;fill-opacity:0.40000001"
+         inkscape:connector-curvature="0"
+         class="fa-secondary"
+         d="M 208,464 H 80 a 16,16 0 0 0 -16,16 v 16 a 16,16 0 0 0 16,16 h 128 a 16,16 0 0 0 16,-16 v -16 a 16,16 0 0 0 -16,-16 z m 416,0 H 288 a 16,16 0 0 0 -16,16 v 16 a 16,16 0 0 0 16,16 h 336 a 16,16 0 0 0 16,-16 V 480 A 16,16 0 0 0 624,464 Z M 576,400 V 384 A 16,16 0 0 0 560,368 H 16 A 16,16 0 0 0 0,384 v 16 a 16,16 0 0 0 16,16 h 544 a 16,16 0 0 0 16,-16 z"
+         id="path2" />
+    </g>
+    <path
+       style="fill:#90a4ae;fill-opacity:1;stroke-width:0.26458335"
+       inkscape:connector-curvature="0"
+       class="fa-primary"
+       d="m 20.713092,200.56399 c 0,-3.93448 2.573616,-7.23944 6.119271,-8.40589 a 10.527733,10.527733 0 0 1 -0.19441,-1.96261 10.362947,10.362947 0 0 1 10.368499,-10.36851 c 4.008539,0 7.443101,2.29588 9.165014,5.62862 1.360867,-1.62008 3.369767,-2.66618 5.647133,-2.66618 a 7.406073,7.406073 0 0 1 7.406074,7.40607 7.2292527,7.2292527 0 0 1 -0.148121,1.49973 c 0.04631,0 0.09262,-0.0186 0.148121,-0.0186 a 8.8872882,8.8872882 0 0 1 0,17.77457 H 29.600378 a 8.8872873,8.8872873 0 0 1 -8.887286,-8.88726 z"
+       id="path4" />
+    <g
+       id="g958-9"
+       class="fa-group"
+       transform="matrix(-0.05876348,0,0,0.05876348,121.21697,162.54441)"
+       style="fill:#90a4ae">
+      <path
+         id="path956-1"
+         d="m 640,416 a 96,96 0 0 1 -96,96 H 224 a 96,96 0 0 1 -96,-96 c 0,-42.5 27.8,-78.2 66.1,-90.8 A 113.72,113.72 0 0 1 192,304 111.94,111.94 0 0 1 304,192 c 43.2,0 80.4,24.9 99,60.8 14.7,-17.5 36.4,-28.8 61,-28.8 a 80,80 0 0 1 80,80 78.09,78.09 0 0 1 -1.6,16.2 c 0.5,0 1,-0.2 1.6,-0.2 a 96,96 0 0 1 96,96 z"
+         class="fa-primary"
+         inkscape:connector-curvature="0"
+         style="opacity:0.4;fill:#90a4ae" />
+    </g>
+  </g>
+</svg>

www/assets/images/weather-hazard.svg

@@ -0,0 +1,196 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="weather-hazard.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="73.336749"
+     inkscape:cy="274.28572"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-161.53332)">
+    <g
+       id="g877"
+       class="fa-group"
+       transform="matrix(0.15119047,0,0,0.15119047,35.000596,217.17143)"
+       style="fill:#8d6e63">
+      <path
+         id="path873"
+         d="m 256,32 32,128 v 112 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 160 L 192,32 Z"
+         class="fa-secondary"
+         inkscape:connector-curvature="0"
+         style="opacity:0.4;fill:#8d6e63;fill-opacity:1" />
+      <path
+         id="path875"
+         d="m 446.7,160 c 0.4,-0.5 0.5,-0.7 0.9,-1.2 L 391.3,53.9 A 32,32 0 0 0 360.9,32 H 256 l 32,128 z M 160,160 192,32 H 87.1 A 32,32 0 0 0 56.7,53.9 L 0.4,158.8 c 0.4,0.5 0.5,0.7 0.9,1.2 z m 128,32 v 80 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 192 H 0 v 256 a 32,32 0 0 0 32,32 h 384 a 32,32 0 0 0 32,-32 V 192 Z"
+         class="fa-primary"
+         inkscape:connector-curvature="0"
+         style="fill:#8d6e63;fill-opacity:1" />
+    </g>
+    <g
+       transform="matrix(0.0897699,0,0,0.08938396,74.876531,229.03828)"
+       class="fa-group"
+       id="g6"
+       style="fill:#ff9800;stroke-width:2.95370626">
+      <path
+         style="opacity:1;fill:#ff9800;stroke-width:2.95370626"
+         inkscape:connector-curvature="0"
+         class="fa-secondary"
+         d="M 569.52,440 329.58,24 C 311.14,-8 264.89,-8 246.42,24 L 6.48,440 c -18.42,31.94 4.64,72 41.57,72 h 479.89 c 36.87,0 60.06,-40 41.58,-72 z M 288,448 a 32,32 0 1 1 32,-32 32,32 0 0 1 -32,32 z m 38.24,-238.41 -12.8,128 A 16,16 0 0 1 297.52,352 h -19 A 16,16 0 0 1 262.6,337.59 l -12.8,-128 A 16,16 0 0 1 265.68,192 h 44.64 a 16,16 0 0 1 15.92,17.59 z"
+         id="path2" />
+      <path
+         style="fill:#ffe0b2;stroke-width:2.95370626"
+         inkscape:connector-curvature="0"
+         class="fa-primary"
+         d="m 310.32,192 h -44.64 a 16,16 0 0 0 -15.92,17.59 l 12.8,128 A 16,16 0 0 0 278.48,352 h 19 a 16,16 0 0 0 15.92,-14.41 l 12.8,-128 A 16,16 0 0 0 310.32,192 Z M 288,384 a 32,32 0 1 0 32,32 32,32 0 0 0 -32,-32 z"
+         id="path4" />
+    </g>
+    <g
+       id="g1513"
+       transform="translate(-1.6176729)">
+      <g
+         transform="translate(-5.875014)"
+         id="g1483">
+        <g
+           transform="matrix(0.03675131,0,0,0.03675131,38.949062,195.59312)"
+           class="fa-group"
+           id="g6-6"
+           style="fill:#2196f3;stroke-width:7.1992898">
+          <path
+             style="opacity:0.4;fill:#2196f3;stroke-width:7.1992898"
+             inkscape:connector-curvature="0"
+             class="fa-secondary"
+             d="m 562.2,447.85 c -21.51,-2.4 -42.11,-10.5 -57.91,-22.9 a 38.79,38.79 0 0 0 -48.21,0 c -37.91,30.4 -107.22,30.4 -145.73,-1.5 -13.5,-11.2 -33,-9.1 -46.7,1.8 -38,30.1 -106.92,30 -145.23,-1.7 -13.5,-11.2 -33.31,-8.9 -47.11,2 -15.5,12.2 -36,20.1 -57.71,22.4 -7.9,0.8 -13.6,7.8 -13.6,15.7 v 32.2 c 0,9.1 7.6,16.8 16.7,16 28.81,-2.5 56.11,-11.4 79.42,-25.9 56.51,34.6 137,34.1 192,0 56.51,34.6 137,34.1 192,0 a 185,185 0 0 0 79.12,25.8 c 9.1,0.8 16.7,-6.9 16.7,-16 v -31.6 c 0.16,-8 -5.64,-15.4 -13.74,-16.3 z m 0,-144 c -21.51,-2.4 -42.11,-10.5 -57.91,-22.9 a 38.79,38.79 0 0 0 -48.21,0 c -37.91,30.4 -107.22,30.4 -145.73,-1.5 -13.5,-11.2 -33,-9.1 -46.7,1.8 -38,30.1 -106.92,30 -145.23,-1.7 -13.5,-11.2 -33.31,-8.9 -47.11,2 -15.5,12.2 -36,20.1 -57.71,22.4 -7.9,0.8 -13.6,7.8 -13.6,15.7 v 32.2 c 0,9.1 7.6,16.8 16.7,16 28.81,-2.5 56.11,-11.4 79.42,-25.9 56.51,34.6 137,34.1 192,0 56.51,34.6 137,34.1 192,0 a 185,185 0 0 0 79.12,25.8 c 9.1,0.8 16.7,-6.9 16.7,-16 v -31.6 c 0.16,-8 -5.64,-15.4 -13.74,-16.3 z"
+             id="path2-2" />
+          <path
+             style="fill:#2196f3;stroke-width:7.1992898"
+             inkscape:connector-curvature="0"
+             class="fa-primary"
+             d="M 385.19,128 H 320 v 80 a 16,16 0 0 1 -16,16 h -32 a 16,16 0 0 1 -16,-16 v -80 h -65.2 c -14.2,0 -21.4,-17.31 -11.2,-27.31 L 276,5 a 17,17 0 0 1 24,0 l 96.4,95.62 c 10.19,10.05 3.09,27.38 -11.21,27.38 z"
+             id="path4-9" />
+        </g>
+        <g
+           transform="matrix(0.03307292,0,0,0.03307292,90.336308,196.53385)"
+           class="fa-group"
+           id="g6-1"
+           style="fill:#8bc34a;stroke-width:7.99999952">
+          <path
+             style="opacity:0.4;fill:#8bc34a;stroke-width:7.99999952"
+             inkscape:connector-curvature="0"
+             class="fa-secondary"
+             d="m 496,240 c 0,3.14648 -0.30469,6.21484 -0.46875,9.32227 C 441.94531,273.66016 382.79688,288 320,288 257.20312,288 198.05469,273.66016 144.46875,249.32227 144.30469,246.21484 144,243.14648 144,240 a 176,176 0 0 1 352,0 z"
+             id="path2-27" />
+          <path
+             style="fill:#8bc34a;stroke-width:7.99999952"
+             inkscape:connector-curvature="0"
+             class="fa-primary"
+             d="M 493.65234,212.582 A 176.66471,176.66471 0 0 1 496,240 c 0,3.14648 -0.30469,6.21484 -0.46875,9.32227 C 441.94531,273.66016 382.79688,288 320,288 257.20312,288 198.05469,273.66016 144.46875,249.32227 144.30469,246.21484 144,243.14648 144,240 a 176.66471,176.66471 0 0 1 2.34766,-27.418 C 58.35547,235.39062 0,274.93555 0,320 0,390.69141 143.26953,448 320,448 496.73047,448 640,390.69141 640,320 640,274.93555 581.64453,235.39062 493.65234,212.582 Z M 128,360 a 24,24 0 1 1 24,-24 24.00118,24.00118 0 0 1 -24,24 z m 192,32 a 24,24 0 1 1 24,-24 24.00118,24.00118 0 0 1 -24,24 z m 192,-32 a 24,24 0 1 1 24,-24 24.00118,24.00118 0 0 1 -24,24 z"
+             id="path4-0" />
+        </g>
+      </g>
+      <g
+         transform="translate(0,-4.2333332)"
+         id="g1494">
+        <g
+           transform="matrix(0.04133922,0,0,0.04133922,6.7128304,173.07045)"
+           class="fa-group"
+           id="g6-3"
+           style="fill:#9c27b0;stroke-width:6.4002986">
+          <path
+             style="opacity:0.4;fill:#9c27b0;stroke-width:6.4002986"
+             inkscape:connector-curvature="0"
+             class="fa-secondary"
+             d="M 393.42,96 H 11.9 c 9.64,34.16 24.49,62.05 42.71,85.3 H 404.39 C 390.32,158.16 383.71,131.08 393.42,96 Z m 36.31,117.3 H 84.64 c 45.05,40.43 101.1,63.6 150.27,85.3 H 504.52 C 490,266.41 456.82,241.74 429.73,213.3 Z M 429.11,25.2 c 7.4,-10.6 0,-25.2 -12.9,-25.2 h -400 A 16.2,16.2 0 0 0 0,16.5 369.9,369.9 0 0 0 4.76,64 h 401.12 a 302.21,302.21 0 0 1 23.23,-38.8 z m -97.4,463.9 A 16,16 0 0 0 346,512 h 27.4 a 32.82,32.82 0 0 0 21.7,-8.3 c 22.58,-20.2 41.3,-38.69 56.63,-55.7 H 347.4 a 248.42,248.42 0 0 1 -15.69,41.1 z M 512,330.6 H 299 c 33,20.58 54.66,45.71 53.54,85.4 H 478 c 25.13,-34.44 34.53,-62 34,-85.4 z"
+             id="path2-6" />
+          <path
+             style="fill:#9c27b0;stroke-width:6.4002986"
+             inkscape:connector-curvature="0"
+             class="fa-primary"
+             d="M 405.88,64 H 4.76 a 302.42,302.42 0 0 0 7.14,32 h 381.52 a 181.86,181.86 0 0 1 12.46,-32 z m -1.49,117.3 H 54.61 a 250.81,250.81 0 0 0 30,32 h 345.12 c -9.56,-10.03 -18.36,-20.53 -25.34,-32 z M 347.4,448 H 451.74 A 406.12,406.12 0 0 0 478,416 H 352.51 a 135.56,135.56 0 0 1 -5.11,32 z M 504.52,298.6 H 234.91 c 23.6,10.42 45.61,20.5 64.06,32 H 512 a 81.4,81.4 0 0 0 -7.48,-32 z"
+             id="path4-7" />
+        </g>
+        <g
+           transform="matrix(0.04134065,0,0,0.04134065,62.075054,173.06994)"
+           class="fa-group"
+           id="g6-9"
+           style="fill:#009688;stroke-width:6.40007639">
+          <path
+             style="opacity:0.4;fill:#009688;stroke-width:6.40007639"
+             inkscape:connector-curvature="0"
+             class="fa-secondary"
+             d="M 176,96 200.5,21.21 A 16.22,16.22 0 0 0 183.1,0.12 C 80,12.42 0,101.61 0,208 0,322.9 93.1,416 208,416 l -24.5,74.79 a 16.24,16.24 0 0 0 17.4,21.1 C 304,499.58 384,410.39 384,304 384,189.1 290.9,96 176,96 Z m 16,256 a 96,96 0 1 1 96,-96 96,96 0 0 1 -96,96 z"
+             id="path2-3" />
+          <path
+             style="fill:#009688;stroke-width:6.40007639"
+             inkscape:connector-curvature="0"
+             class="fa-primary"
+             d="m 236,256 a 44,44 0 1 1 -44,-44 44,44 0 0 1 44,44 z"
+             id="path4-6" />
+        </g>
+        <g
+           class="fa-group"
+           id="g6-0"
+           transform="matrix(0.04134115,0,0,0.04134115,113.46846,173.06996)"
+           style="fill:#f44336;stroke-width:6.4000001">
+          <path
+             style="opacity:0.4;fill:#f44336;stroke-width:6.4000001"
+             inkscape:connector-curvature="0"
+             class="fa-secondary"
+             d="m 323.56,51.2 a 597.38,597.38 0 0 0 -56.22,60 C 240.08,73.62 206.28,35.53 168,0 69.74,91.17 0,210 0,281.6 0,408.85 100.29,512 224,512 347.71,512 448,408.85 448,281.6 448,228.33 396,118.46 323.56,51.2 Z m -1.12,366.87 A 165.81,165.81 0 0 1 226.86,448 C 182.93,448 142.43,433.11 112.8,406.08 A 146.18,146.18 0 0 1 76.92,355.69 C 68.35,335.82 64,314 64,290.75 c 0,-59.43 42.8,-106.39 104.3,-180.12 30,34.59 18.49,19.78 100.7,124.59 l 62,-70.74 c 24.32,40.25 27.78,45.59 34.84,59.1 a 157.93,157.93 0 0 1 15,104.62 c -7.49,36.85 -28.24,68.8 -58.4,89.87 z"
+             id="path2-62" />
+          <path
+             style="fill:#f44336;stroke-width:6.4000001"
+             inkscape:connector-curvature="0"
+             class="fa-primary"
+             d="M 304.09,391.85 A 134.39,134.39 0 0 1 226.86,416 C 154.71,416 96,368.26 96,290.75 96,252.14 120.31,218.12 168.79,160 c 6.93,8 98.83,125.34 98.83,125.34 l 58.63,-66.88 c 4.14,6.85 7.91,13.55 11.27,20 27.35,52.19 15.81,119 -33.43,153.42 z"
+             id="path4-61" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

www/assets/images/weather-heat.svg

@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="weather-heat.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="185.98306"
+     inkscape:cy="204.76"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-161.53332)">
+    <g
+       id="g877"
+       class="fa-group"
+       transform="matrix(0.15119047,0,0,0.15119047,33.866667,216.0375)"
+       style="fill:#8d6e63">
+      <path
+         id="path873"
+         d="m 256,32 32,128 v 112 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 160 L 192,32 Z"
+         class="fa-secondary"
+         inkscape:connector-curvature="0"
+         style="opacity:0.4;fill:#8d6e63;fill-opacity:1" />
+      <path
+         id="path875"
+         d="m 446.7,160 c 0.4,-0.5 0.5,-0.7 0.9,-1.2 L 391.3,53.9 A 32,32 0 0 0 360.9,32 H 256 l 32,128 z M 160,160 192,32 H 87.1 A 32,32 0 0 0 56.7,53.9 L 0.4,158.8 c 0.4,0.5 0.5,0.7 0.9,1.2 z m 128,32 v 80 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 192 H 0 v 256 a 32,32 0 0 0 32,32 h 384 a 32,32 0 0 0 32,-32 V 192 Z"
+         class="fa-primary"
+         inkscape:connector-curvature="0"
+         style="fill:#8d6e63;fill-opacity:1" />
+    </g>
+    <path
+       id="path941"
+       d="m 33.226771,181.53848 c -4.35002,0 -7.894177,3.54415 -7.894177,7.89418 0,4.35002 3.544157,7.89418 7.894177,7.89418 4.350022,0 7.894179,-3.54416 7.894179,-7.89418 0,-4.35003 -3.544157,-7.89418 -7.894179,-7.89418 z m 20.261728,6.61959 -7.787281,-3.88952 2.754742,-8.25599 c 0.370039,-1.11835 -0.69074,-2.17913 -1.800861,-1.80086 l -8.255996,2.75473 -3.89775,-7.79549 c -0.526279,-1.05257 -2.022884,-1.05257 -2.549162,0 l -3.889528,7.78727 -8.264218,-2.75473 c -1.11834,-0.37005 -2.179122,0.69073 -1.80086,1.80085 l 2.75474,8.256 -7.78728,3.89774 c -1.052558,0.52628 -1.052558,2.02289 0,2.54917 l 7.78728,3.88954 -2.75474,8.26421 c -0.370038,1.11834 0.690742,2.17911 1.80086,1.80085 l 8.255994,-2.75473 3.889529,7.78727 c 0.526278,1.05256 2.022883,1.05256 2.549161,0 l 3.889529,-7.78727 8.255994,2.75473 c 1.118344,0.37004 2.179122,-0.69073 1.80086,-1.80085 l -2.754738,-8.256 7.787278,-3.88952 c 1.069002,-0.53451 1.069002,-2.03112 0.01644,-2.5574 z m -12.819819,8.7165 c -4.103328,4.10333 -10.780488,4.10333 -14.883816,0 -4.103328,-4.10332 -4.103328,-10.78048 0,-14.88382 4.103328,-4.10333 10.780488,-4.10333 14.883816,0 4.103327,4.10334 4.103327,10.7805 0,14.88382 z"
+       inkscape:connector-curvature="0"
+       style="fill:#ff9800;stroke-width:0.08223102" />
+    <g
+       id="g2261"
+       transform="matrix(1.0404313,0,0,1.0404313,3.576078,-34.645711)"
+       style="stroke-width:0.96113992">
+      <g
+         id="g830"
+         transform="translate(35.151785,9.4494046)"
+         style="stroke-width:0.96113992">
+        <path
+           inkscape:connector-curvature="0"
+           style="fill:#ff0000;fill-opacity:0.58823529;stroke-width:0.25430158"
+           d="m 75.115703,283.73301 c 0,3.38829 -2.74674,6.13503 -6.13502,6.13503 -3.38829,0 -6.135032,-2.74674 -6.135032,-6.13503 0,-2.44721 1.43319,-4.55909 3.505732,-5.54387 v -26.00768 c 0,-1.45213 1.17716,-2.62929 2.6293,-2.62929 1.45213,0 2.62929,1.17716 2.62929,2.62929 v 26.00768 c 2.07254,0.98478 3.50573,3.09666 3.50573,5.54387 z"
+           id="path2-5"
+           sodipodi:nodetypes="ssscssscs" />
+        <path
+           id="path2257"
+           d="m 79.497845,252.18146 c 0,-5.80844 -4.70874,-10.51718 -10.51718,-10.51718 -5.80845,0 -10.51719,4.70874 -10.51719,10.51718 v 22.27748 c -2.16643,2.45499 -3.48754,5.67369 -3.50551,9.20099 -0.0393,7.70198 6.22124,14.0422 13.92311,14.09567 0.0328,2.2e-4 0.0668,3.2e-4 0.0996,3.2e-4 7.74525,0 14.0229,-6.27788 14.0229,-14.02291 0,-3.55601 -1.32429,-6.80221 -3.50572,-9.27407 z m -10.51718,41.1923 -0.0692,-2.2e-4 c -5.28883,-0.0367 -9.59847,-4.40078 -9.57141,-9.69125 0.0206,-4.02972 2.30305,-6.2035 3.50562,-7.56624 v -23.93459 c 0,-3.38281 2.75211,-6.13502 6.13503,-6.13502 3.3828,0 6.13502,2.75221 6.13502,6.13502 v 23.93459 c 1.18844,1.34664 3.50573,3.54528 3.50573,7.61696 -1.1e-4,5.31589 -4.32487,9.64075 -9.64087,9.64075 z"
+           style="fill:#90a4ae;fill-opacity:1;stroke-width:0.25430158"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ssscccsscsccccssscccc" />
+      </g>
+    </g>
+  </g>
+</svg>

www/assets/images/weather-mostly-sunny.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="weather-mostly-sunny.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-72.224488"
+     inkscape:cy="287.2296"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-161.53332)">
+    <g
+       id="g877"
+       class="fa-group"
+       transform="matrix(0.15119047,0,0,0.15119047,33.866667,216.0375)"
+       style="fill:#8d6e63">
+      <path
+         id="path873"
+         d="m 256,32 32,128 v 112 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 160 L 192,32 Z"
+         class="fa-secondary"
+         inkscape:connector-curvature="0"
+         style="opacity:0.4;fill:#8d6e63;fill-opacity:1" />
+      <path
+         id="path875"
+         d="m 446.7,160 c 0.4,-0.5 0.5,-0.7 0.9,-1.2 L 391.3,53.9 A 32,32 0 0 0 360.9,32 H 256 l 32,128 z M 160,160 192,32 H 87.1 A 32,32 0 0 0 56.7,53.9 L 0.4,158.8 c 0.4,0.5 0.5,0.7 0.9,1.2 z m 128,32 v 80 a 16,16 0 0 1 -16,16 H 176 A 16,16 0 0 1 160,272 V 192 H 0 v 256 a 32,32 0 0 0 32,32 h 384 a 32,32 0 0 0 32,-32 V 192 Z"
+         class="fa-primary"
+         inkscape:connector-curvature="0"
+         style="fill:#8d6e63;fill-opacity:1" />
+    </g>
+    <g
+       id="g958"
+       class="fa-group"
+       transform="matrix(-0.05876348,0,0,0.05876348,121.12338,164.9729)"
+       style="fill:#90a4ae">
+      <path
+         id="path956"
+         d="m 640,416 a 96,96 0 0 1 -96,96 H 224 a 96,96 0 0 1 -96,-96 c 0,-42.5 27.8,-78.2 66.1,-90.8 A 113.72,113.72 0 0 1 192,304 111.94,111.94 0 0 1 304,192 c 43.2,0 80.4,24.9 99,60.8 14.7,-17.5 36.4,-28.8 61,-28.8 a 80,80 0 0 1 80,80 78.09,78.09 0 0 1 -1.6,16.2 c 0.5,0 1,-0.2 1.6,-0.2 a 96,96 0 0 1 96,96 z"
+         class="fa-primary"
+         inkscape:connector-curvature="0"
+         style="opacity:0.4;fill:#90a4ae" />
+    </g>
+    <path
+       id="path941"
+       d="m 38.713321,182.43253 c -3.998547,0 -7.256342,3.25779 -7.256342,7.25635 0,3.99854 3.257795,7.25634 7.256342,7.25634 3.998547,0 7.256344,-3.2578 7.256344,-7.25634 0,-3.99856 -3.257797,-7.25635 -7.256344,-7.25635 z m 18.624618,6.08474 -7.158083,-3.57525 2.532163,-7.58892 c 0.34014,-1.02799 -0.634929,-2.00307 -1.655354,-1.65536 l -7.588928,2.53215 -3.582819,-7.16562 c -0.483756,-0.96753 -1.859438,-0.96753 -2.343194,0 l -3.575262,7.15807 -7.596484,-2.53215 c -1.027981,-0.34016 -2.003053,0.63492 -1.655354,1.65534 l 2.532162,7.58893 -7.158083,3.58281 c -0.967513,0.48376 -0.967513,1.85945 0,2.3432 l 7.158083,3.57528 -2.532162,7.59647 c -0.34014,1.02798 0.634931,2.00304 1.655354,1.65535 l 7.588925,-2.53216 3.575262,7.15808 c 0.483757,0.96751 1.859438,0.96751 2.343195,0 l 3.575261,-7.15808 7.588926,2.53216 c 1.027984,0.34014 2.003053,-0.63492 1.655354,-1.65535 l -2.53216,-7.58893 7.158079,-3.57525 c 0.982629,-0.49132 0.982629,-1.86701 0.0151,-2.35077 z m -11.784002,8.01222 c -3.771786,3.77179 -9.909445,3.77179 -13.681231,0 -3.771788,-3.77178 -3.771788,-9.90943 0,-13.68123 3.771786,-3.77179 9.909445,-3.77179 13.681231,0 3.771787,3.7718 3.771787,9.90945 0,13.68123 z"
+       inkscape:connector-curvature="0"
+       style="fill:#ff9800;stroke-width:0.08223102" />
+  </g>
+</svg>

www/assets/js/toolbox_weather.js

@@ -40,25 +40,189 @@ function loadWeather(reload) {
             }
             requestfinished = true;
             if (resp.status == "OK") {
-                var mintemp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.temp.min)) + " °C" : Math.round(resp.temp.min) + " °F");
-                var maxtemp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.temp.max)) + " °C" : Math.round(resp.temp.max) + " °F");
-                $("#lowtemp").html(mintemp);
-                $("#hightemp").html(maxtemp);
-                $("#precipchance").text(Math.round(resp.precipitation.chance * 100.0) + "% chance");
+                //
+                // Summary tab
+                //
+                var mintemp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.summary.temp.min)) + " °C" : Math.round(resp.summary.temp.min) + " °F");
+                var maxtemp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.summary.temp.max)) + " °C" : Math.round(resp.summary.temp.max) + " °F");
+                $("#summarylowtemp").html(mintemp);
+                $("#summaryhightemp").html(maxtemp);
+                $("#summaryprecipchance").text(Math.round(resp.summary.precipitation.chance * 100.0) + "% chance");
                 if (getStorage("units") == "metric") {
-                    $("#windspeed").text(Math.round(resp.windspeed * 1.609344) + " km/h");
+                    $("#summarywindspeed").text(Math.round(resp.summary.windspeed * 1.609344) + " km/h");
                 } else {
-                    $("#windspeed").text(Math.round(resp.windspeed) + " mph");
+                    $("#summarywindspeed").text(Math.round(resp.summary.windspeed) + " mph");
                 }
-                if (SETTINGS.weathericons.includes(resp.icon)) {
-                    $("#weathericon").attr("src", "assets/images/weather-" + resp.icon + ".svg");
+                if (SETTINGS.weathericons.includes(resp.summary.icon)) {
+                    $("#summaryweathericon").attr("src", "assets/images/weather-" + resp.summary.icon + ".svg");
                 } else {
-                    $("#weathericon").attr("src", "assets/images/weather-none.svg");
+                    $("#summaryweathericon").attr("src", "assets/images/weather-none.svg");
                 }
-                $("#forecast-location").text(resp.location_name);
-                $("#forecast-info").text("Forecast covers the next " + resp.forecast_hours + " hours (until " + timestampToTimeString(resp.forecast_until) + ").");
-                $("#forecast-creditlink").text(resp.source.text);
-                $("#forecast-creditlink").attr("onclick", "openExternalBrowser('" + resp.source.url + "')");
+                $("#summary-forecast-location").text(resp.location_name);
+                $("#summary-forecast-info").text("Forecast covers the next " + resp.summary.forecast_hours + " hours (until " + timestampToTimeString(resp.summary.forecast_until) + ").");
+                $("#summary-forecast-creditlink").text(resp.source.text);
+                $("#summary-forecast-creditlink").attr("onclick", "openExternalBrowser('" + resp.source.url + "')");
+
+
+                //
+                // Now tab
+                //
+                var temp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.now.temp)) + " °C" : Math.round(resp.now.temp) + " °F");
+                var feelslike = (getStorage("units") == "metric" ? Math.round(ftoc(resp.now.feelslike)) + " °C" : Math.round(resp.now.feelslike) + " °F");
+                $("#nowtemp").html(temp);
+                $("#nowfeelslike").html(feelslike);
+                if (SETTINGS.weathericons.includes(resp.now.icon)) {
+                    $("#nowweathericon").attr("src", "assets/images/weather-" + resp.now.icon + ".svg");
+                } else {
+                    $("#nowweathericon").attr("src", "assets/images/weather-none.svg");
+                }
+
+                var uvcolor = "#4CAF50";
+                if (resp.now.uv_index > 10) {
+                    uvcolor = "#673AB7";
+                } else if (resp.now.uv_index > 7) {
+                    uvcolor = "#F44336";
+                } else if (resp.now.uv_index > 5) {
+                    uvcolor = "#FF9800";
+                } else if (resp.now.uv_index > 2) {
+                    uvcolor = "#FFEB3B";
+                }
+                app.gauge.get('#nowuvindexgauge').update({
+                    value: Math.max(resp.now.uv_index / 11, 0.05),
+                    valueText: resp.now.uv_index,
+                    borderColor: uvcolor,
+                });
+
+                if (getStorage("units") == "metric") {
+                    $("#nowwindspeed").text(Math.round(resp.now.windspeed * 1.609344) + " km/h");
+                } else {
+                    $("#nowwindspeed").text(Math.round(resp.now.windspeed) + " mph");
+                }
+
+                $("#nowwinddirection").text(degreesToCardinal(resp.now.winddirection));
+
+                var minutelydata = [];
+                var maxprecip = 0;
+                for (var i = 0; i < resp.today.minutely.length; i++) {
+                    precip = resp.today.minutely[i].precip;
+                    if (getStorage("units") == "metric") {
+                        precip = precip * 25.4;
+                    }
+
+                    minutelydata[i] = {
+                        x: new Date(resp.today.minutely[i].time * 1000),
+                        y: precip
+                    };
+                    if (precip > maxprecip) {
+                        maxprecip = precip;
+                    }
+                }
+
+                if (maxprecip > 0) {
+                    // only make rain chart if there's rain
+                    var precipChart = new Chart(document.getElementById('precipchart'), {
+                        type: "line",
+                        data: {
+                            datasets: [
+                                {
+                                    fill: true,
+                                    data: minutelydata,
+                                    borderWidth: 0,
+                                    spanGaps: true,
+                                    backgroundColor: "#03A9F4",
+                                    borderColor: "#03A9F4"
+                                }
+                            ]
+                        },
+                        options: {
+                            responsive: true,
+                            elements: {
+                                point: {
+                                    radius: 0
+                                }
+                            },
+                            scales: {
+                                xAxes: [{
+                                        type: 'time',
+                                        display: true,
+                                        scaleLabel: {
+                                            display: false
+                                        },
+                                        gridLines: {
+                                            display: true,
+                                            drawBorder: false
+                                        },
+                                        time: {
+                                            unit: 'minute',
+                                            stepSize: 5,
+                                            displayFormats: {
+                                                minute: 'h:mm',
+                                                hour: 'hA'
+                                            }
+                                        }
+                                    }],
+                                yAxes: [{
+                                        display: true,
+                                        scaleLabel: {
+                                            display: true
+                                        },
+                                        gridLines: {
+                                            display: false,
+                                            drawBorder: false
+                                        },
+                                        ticks: {
+                                            min: 0,
+                                            max: Math.round(maxprecip),
+                                            stepSize: (Math.round(maxprecip) / 2),
+                                            callback: function (value, index, values) {
+                                                if (getStorage("units") == "metric") {
+                                                    return value + ' mm';
+                                                } else {
+                                                    return value + ' in';
+                                                }
+                                            }
+                                        }
+                                    }]
+                            },
+                            legend: {
+                                display: false
+                            },
+                            tooltips: {
+                                enabled: false
+                            }
+                        }
+                    });
+                }
+
+                forecastItems = [];
+
+                for (var i = 1; i < resp.forecast.length; i++) {
+                    var low = (getStorage("units") == "metric" ? Math.round(ftoc(resp.forecast[i].temp.min)) : Math.round(resp.forecast[i].temp.min));
+                    var high = (getStorage("units") == "metric" ? Math.round(ftoc(resp.forecast[i].temp.max)) + " &deg;C" : Math.round(resp.forecast[i].temp.max) + " &deg;F");
+                    forecastItems.push({
+                        day: formatTimestamp('l', resp.forecast[i].date),
+                        temps: low + " to " + high,
+                        uv_index: resp.forecast[i].uv_index
+                    });
+                }
+
+                forecastItemTemplate = '<li>'
+                        + '<div class="item-content">'
+                        + '  <div class="item-inner">'
+                        + '    <div class="item-title">'
+                        + '    <div class="item-header">{{day}}</div>'
+                        + '        {{temps}}'
+                        + '        <br>UV Index: {{uv_index}}'
+                        + '    </div>'
+                        + '  </div>'
+                        + '</div>'
+                        + '</li>';
+
+                forecastVirtualList = app.virtualList.create({
+                    el: "#forecast-list",
+                    items: forecastItems,
+                    itemTemplate: forecastItemTemplate
+                });
             } else {
                 app.dialog.alert(resp.message, "Error");
             }

www/assets/js/util.js

@@ -272,4 +272,46 @@ function time() {
  */
 function timeDiff(compareto) {
     return time() - compareto;
+}
+
+/**
+ * Convert decimal degrees to cardinal/compass directions.
+ * https://gist.github.com/felipeskroski/8aec22f01dabdbf8fb6b
+ * @param {type} deg
+ * @returns {String}
+ */
+function degreesToCardinal(deg) {
+    if (deg > 11.25 && deg < 33.75) {
+        return "NNE";
+    } else if (deg > 33.75 && deg < 56.25) {
+        return "ENE";
+    } else if (deg > 56.25 && deg < 78.75) {
+        return "E";
+    } else if (deg > 78.75 && deg < 101.25) {
+        return "ESE";
+    } else if (deg > 101.25 && deg < 123.75) {
+        return "ESE";
+    } else if (deg > 123.75 && deg < 146.25) {
+        return "SE";
+    } else if (deg > 146.25 && deg < 168.75) {
+        return "SSE";
+    } else if (deg > 168.75 && deg < 191.25) {
+        return "S";
+    } else if (deg > 191.25 && deg < 213.75) {
+        return "SSW";
+    } else if (deg > 213.75 && deg < 236.25) {
+        return "SW";
+    } else if (deg > 236.25 && deg < 258.75) {
+        return "WSW";
+    } else if (deg > 258.75 && deg < 281.25) {
+        return "W";
+    } else if (deg > 281.25 && deg < 303.75) {
+        return "WNW";
+    } else if (deg > 303.75 && deg < 326.25) {
+        return "NW";
+    } else if (deg > 326.25 && deg < 348.75) {
+        return "NNW";
+    } else {
+        return "N";
+    }
 }

www/index.html

@@ -15,6 +15,7 @@
 <link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css" />
 <link rel="stylesheet" href="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
 <link rel="stylesheet" href="node_modules/mapbox-gl/dist/mapbox-gl.css">
+<link rel="stylesheet" href="node_modules/chart.js/dist/Chart.min.css">
 <link rel="stylesheet" href="assets/css/app.css" />
 <link rel="stylesheet" href="assets/css/backdrop.css" />
 <link rel="stylesheet" href="assets/css/oled.css" />
@@ -46,6 +47,7 @@
 <script src="node_modules/bwip-js/dist/bwip-js-min.js"></script>
 <script src="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
 <script src="node_modules/onscan.js/onscan.min.js"></script>
+<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
 
 <script src="settings.js"></script>
 

www/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "PackageHelper",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -20,7 +20,7 @@
     "@mapbox/geojson-rewind": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.4.1.tgz",
-      "integrity": "sha512-mxo2MEr7izA1uOXcDsw99Kgg6xW3P4H2j4n1lmldsgviIelpssvP+jQDivFKOHrOVJDpTTi5oZJvRcHtU9Uufw==",
+      "integrity": "sha1-NX15MArbf+x8HwkVEpiLymRY8Gg=",
       "requires": {
         "@mapbox/geojson-area": "0.2.2",
         "concat-stream": "~1.6.0",
@@ -31,14 +31,14 @@
         "minimist": {
           "version": "1.2.5",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+          "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
         }
       }
     },
     "@mapbox/geojson-types": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
-      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+      "integrity": "sha1-muz2QssA6rEIClfE+UmmW0pYRtY="
     },
     "@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
@@ -48,7 +48,7 @@
     "@mapbox/mapbox-gl-supported": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
-      "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg=="
+      "integrity": "sha1-9gtqVaXY5e6Qg0fSzkJQsVED3I4="
     },
     "@mapbox/point-geometry": {
       "version": "0.1.0",
@@ -58,7 +58,7 @@
     "@mapbox/tiny-sdf": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.1.tgz",
-      "integrity": "sha512-Ihn1nZcGIswJ5XGbgFAvVumOgWpvIjBX9jiRlIl46uQG9vJOF51ViBYHF95rEZupuyQbEmhLaDPLQlU7fUTsBg=="
+      "integrity": "sha1-FqIMRwdBv+kZHeszb0bhlNpKkf8="
     },
     "@mapbox/unitbezier": {
       "version": "0.0.0",
@@ -68,7 +68,7 @@
     "@mapbox/vector-tile": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
-      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "integrity": "sha1-06dMkEAtBuiexm3knsgX/1NAlmY=",
       "requires": {
         "@mapbox/point-geometry": "~0.1.0"
       }
@@ -76,7 +76,7 @@
     "@mapbox/whoots-js": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
-      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+      "integrity": "sha1-SXxnoc71DRokWbpg8xXkSNKth/4="
     },
     "@zxing/library": {
       "version": "0.15.2",
@@ -95,7 +95,7 @@
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+      "integrity": "sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8="
     },
     "bwip-js": {
       "version": "2.0.6",
@@ -111,10 +111,56 @@
         "redeyed": "~0.4.0"
       }
     },
+    "chart.js": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+        }
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "concat-stream": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "integrity": "sha1-kEvfGUzTEi/Gdcd/xKw9T/D9GjQ=",
       "requires": {
         "buffer-from": "^1.0.0",
         "inherits": "^2.0.3",
@@ -143,7 +189,7 @@
     "earcut": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz",
-      "integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ=="
+      "integrity": "sha1-QbC8NfY+D+gNp83f8oUR5+LoDRE="
     },
     "esprima": {
       "version": "1.0.4",
@@ -164,7 +210,7 @@
     "geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
-      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+      "integrity": "sha1-+K22FNLB0/bufEJlytS7861gyLc="
     },
     "gl-matrix": {
       "version": "3.2.1",
@@ -174,17 +220,17 @@
     "grid-index": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
-      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+      "integrity": "sha1-l/giHt7BAmyDd7hkRqfHHnlSLqc="
     },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
+      "integrity": "sha1-7BaFWOlaoYH9h9N/VcMrvLZwi4Q="
     },
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w="
     },
     "isarray": {
       "version": "1.0.0",
@@ -204,7 +250,7 @@
     "kdbush": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
-      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+      "integrity": "sha1-+EhHlNRwBMwthe06eTU9vgq8K/A="
     },
     "leaflet": {
       "version": "1.6.0",
@@ -269,6 +315,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "murmurhash-js": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
@@ -277,12 +328,12 @@
     "path-to-regexp": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.1.0.tgz",
-      "integrity": "sha512-h9DqehX3zZZDCEm+xbfU0ZmwCGFCAAraPJWMXJ4+v32NjZJilVg3k1TcKsRgIb8IQ/izZSaydDc1OhJCZvs2Dw=="
+      "integrity": "sha1-Cxj4i3oM4L+uaiWZDJCauG9RJCc="
     },
     "pbf": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
-      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "integrity": "sha1-tMG55yr5Zs2CxlMWkRFcwECf/io=",
       "requires": {
         "ieee754": "^1.1.12",
         "resolve-protobuf-schema": "^2.1.0"
@@ -291,27 +342,27 @@
     "potpack": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz",
-      "integrity": "sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw=="
+      "integrity": "sha1-0bGv2J5Mj3dihl7DC9ESq3Z+Lr8="
     },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+      "integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I="
     },
     "protocol-buffers-schema": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz",
-      "integrity": "sha512-G/2kcamPF2S49W5yaMGdIpkG6+5wZF0fzBteLKgEHjbNzqjZQ85aAs1iJGto31EJaSTkNvHs5IXuHSaTLWBAiA=="
+      "integrity": "sha1-Lw6jHKlmJ9aAvy/vrn6/orZFPq4="
     },
     "quickselect": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+      "integrity": "sha1-8ZaApIal7vtYEwPgI+mPqvJd0Bg="
     },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "integrity": "sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=",
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -333,7 +384,7 @@
     "resolve-protobuf-schema": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
-      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "integrity": "sha1-nKmp5pzxkrva8QBuwZc5SKpKN1g=",
       "requires": {
         "protocol-buffers-schema": "^3.3.1"
       }
@@ -346,12 +397,12 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
     },
     "sharkdown": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/sharkdown/-/sharkdown-0.1.1.tgz",
-      "integrity": "sha512-exwooSpmo5s45lrexgz6Q0rFQM574wYIX3iDZ7RLLqOb7IAoQZu9nxlZODU972g19sR69OIpKP2cpHTzU+PHIg==",
+      "integrity": "sha1-ZEhL0PCPNH+DGen/lHpnD2tIsbI=",
       "requires": {
         "cardinal": "~0.4.2",
         "minimist": "0.0.5",
@@ -376,12 +427,12 @@
     "ssr-window": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
-      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+      "integrity": "sha1-MHUqakZm53Z/C35qpvwv29DZs2k="
     },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -389,7 +440,7 @@
     "supercluster": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.0.0.tgz",
-      "integrity": "sha512-8VuHI8ynylYQj7Qf6PBMWy1PdgsnBiIxujOgc9Z83QvJ8ualIYWNx2iMKyKeC4DZI5ntD9tz/CIwwZvIelixsA==",
+      "integrity": "sha1-ddR0+vsKBV21Uu1717vaWD9qsyE=",
       "requires": {
         "kdbush": "^3.0.0"
       }
@@ -397,12 +448,12 @@
     "template7": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/template7/-/template7-1.4.2.tgz",
-      "integrity": "sha512-eoKnScBMDk7lyj7+iCzKbxGiSLLlQk0DNvmclyJuMCUKxy9JrFuAB+GD5iplF4WiQPtMdI06CHHks3avL22JXA=="
+      "integrity": "sha1-YvMpWTYeRV7Bce+e8z0pynEw4Ak="
     },
     "text-encoding": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.7.0.tgz",
-      "integrity": "sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==",
+      "integrity": "sha1-+JXoNuRZkGJAhmAXmOqY6PNu5kM=",
       "optional": true
     },
     "through": {
@@ -413,12 +464,12 @@
     "tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
-      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+      "integrity": "sha1-ZNhJLr8554Ade9NAYuKbRbIDXwg="
     },
     "ts-custom-error": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.1.1.tgz",
-      "integrity": "sha512-f/syoy+pTE4z82qaiRuthEeZtCGNKzlfs0Zc8jpQFcz/CYMaFSwFSdfFt1sSFnPlDLOEm7RCROdIxZ44N8UlwA=="
+      "integrity": "sha1-0wx0FUYdrJPcLMnp6y2ukuZCOQE="
     },
     "typedarray": {
       "version": "0.0.6",
@@ -433,7 +484,7 @@
     "vt-pbf": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.1.tgz",
-      "integrity": "sha512-pHjWdrIoxurpmTcbfBWXaPwSmtPAHS105253P1qyEfSTV2HJddqjM+kIHquaT/L6lVJIk9ltTGc0IxR/G47hYA==",
+      "integrity": "sha1-sPYn45oQzpHZQ7iY7SNj0hiZ+4I=",
       "requires": {
         "@mapbox/point-geometry": "0.1.0",
         "@mapbox/vector-tile": "^1.3.1",

www/package.json

@@ -7,6 +7,7 @@
     "@fortawesome/fontawesome-free": "^5.12.1",
     "@zxing/library": "^0.15.2",
     "bwip-js": "^2.0.6",
+    "chart.js": "^2.9.3",
     "framework7": "^5.5.1",
     "jquery": "^3.4.1",
     "jsbarcode": "^3.11.0",

www/pages/toolbox/weather.html

@@ -21,34 +21,94 @@
         </div>
     </div>
 
-    <div class="page-content noselect">
-        <div class="row justify-content-center">
-            <div class="col-100 small-80 medium-60 large-50 xlarge-40">
-                <div class="block text-align-center">
-                    <img id="weathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
-
-                    <div class="row">
-                        <div class="col-50">
-                            <h2>Low: <span id="lowtemp">...</span></h2>
-                        </div>
-                        <div class="col-50">
-                            <h2>High: <span id="hightemp">...</span></h2>
-                        </div>
-                        <div class="col-100">
-                            <h3>Precipitation: <span id="precipchance">...</span></h3>
-                            <h3>Wind speed: <span id="windspeed">...</span></h3>
+    <div class="toolbar tabbar toolbar-top">
+        <div class="toolbar-inner">
+            <a href="#weather-summary" class="tab-link tab-link-active">Summary</a>
+            <a href="#weather-now" class="tab-link">Now</a>
+            <a href="#weather-forecast" class="tab-link">Forecast</a>
+        </div>
+    </div>
+    <div class="tabs-swipeable-wrap">
+        <div class="tabs">
+            <div id="weather-summary" class="page-content tab tab-active">
+                <div class="row justify-content-center noselect">
+                    <div class="col-100 small-80 medium-60 large-50 xlarge-40">
+                        <div class="block text-align-center">
+                            <img id="summaryweathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
+
+                            <div class="row">
+                                <div class="col-50">
+                                    <h2>Low: <span id="summarylowtemp">...</span></h2>
+                                </div>
+                                <div class="col-50">
+                                    <h2>High: <span id="summaryhightemp">...</span></h2>
+                                </div>
+                                <div class="col-100">
+                                    <h3>Precipitation: <span id="summaryprecipchance">...</span></h3>
+                                    <h3>Wind speed: <span id="summarywindspeed">...</span></h3>
+                                </div>
+                            </div>
+
+                            <div class="block-footer">
+                                <span id="summary-forecast-location"></span>
+                                <br />
+                                <span id="summary-forecast-info"></span>
+                                <br />
+                                <a id="summary-forecast-creditlink" href="" onclick=""></a>
+                            </div>
                         </div>
                     </div>
+                </div>
+            </div>
+            <div id="weather-now" class="page-content tab">
+                <div class="row justify-content-center noselect">
+                    <div class="col-100 small-80 medium-60 large-50 xlarge-40">
+                        <div class="block text-align-center">
+                            <div class="row align-items-center">
+                                <div class="col-50">
+                                    <img id="nowweathericon" style="width: 90%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" />
+                                </div>
+                                <div class="col-50">
+                                    <h1 id="nowtemp">...</h1>
+                                    <h3>Feels like <span id="nowfeelslike">...</span></h3>
+                                </div>
+                            </div>
+
+                            <div class="row margin-vertical">
+                                <div class="col-50">
+                                    <div
+                                        id="nowuvindexgauge"
+                                        class="gauge gauge-init"
+                                        data-type="semicircle"
+                                        data-value="0.0"
+                                        data-value-text="..."
+                                        data-label-text="UV Index"
+                                        data-value-text-color="#2196f3"
+                                        data-border-color="#4CAF50"
+                                        ></div>
+                                </div>
+                                <div class="col-50">
+                                    <h3>
+                                        Wind: <span id="nowwindspeed">...</span>
+                                        <br />
+                                        <span id="nowwinddirection">...</span>
+                                    </h3>
+                                </div>
+                            </div>
 
-                    <div class="block-footer">
-                        <span id="forecast-location"></span>
-                        <br />
-                        <span id="forecast-info"></span>
-                        <br />
-                        <a id="forecast-creditlink" href="" onclick=""></a>
+                            <div class="row margin-vertical">
+                                <div class="col-100">
+                                    <canvas id="precipchart" width="300" height="50"></canvas>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
+            <div id="weather-forecast" class="page-content tab">
+                <div class="list virtual-list no-hairlines" id="forecast-list">
+                </div>
+            </div>
         </div>
     </div>
 

www/settings.js

@@ -115,9 +115,13 @@ var SETTINGS = {
         "clear",
         "cloudy",
         "partly-cloudy",
+        "mostly-sunny",
         "rain",
         "snow",
+        "fog",
+        "heat",
         "windy",
+        "hazard",
         "none"
     ],
     scannerevents: [
@@ -357,7 +361,7 @@ var SETTINGS = {
     geocodeapi: "https://apis.netsyms.net/packagehelper/geocode.php",
     geocodebarcodeapi: "https://apis.netsyms.net/packagehelper/geocode_barcode.php",
     trackingapi: "https://apis.netsyms.net/packagehelper/track.php",
-    weatherapi: "https://apis.netsyms.net/packagehelper/weather.php",
+    weatherapi: "http://localhost/packagehelperapi/weather.php",
     geoipapi: "https://apis.netsyms.net/packagehelper/geoip.php",
     sharelistapi: "https://apis.netsyms.net/packagehelper/sharepackagelist.php",
     loginurl: "https://apis.netsyms.net/packagehelper/login/",