add widget

btomala · Apr 24, 2024 · ea9aa60 · ea9aa60
1 parent 808e54e
commit ea9aa60
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 5 deletions.
diff --git a/index.css b/index.css
@@ -92,4 +92,13 @@ h1 {
         display: inline-block;
         width: calc( 100% - var(--size) - 10px);        
     }
+}
+.windrose_widget {
+    vertical-align: top;
+    display: inline-block;
+    width: 300px;        
+}
+.charts_widget {
+    display: inline-block;
+    width: 600px;
 }
diff --git a/index.html b/index.html
@@ -4,6 +4,9 @@
       <meta charset="utf-8" />
       <link rel="stylesheet" href="index.css">
       <title>Stacja pogodowa</title>
+      <script>
+        const chartHeight = 300;
+      </script>
       <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
       <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
       <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

diff --git a/index.js b/index.js
@@ -75,7 +75,9 @@ async function fetchThingspeakData(id, n) {
 
 function setStationName(stationName) {
   const stationNameElem = document.getElementById('station-name');
-  stationNameElem.innerText = stationName;
+  if(stationNameElem) {
+    stationNameElem.innerText = stationName;
+  }
   document.title = "Stacja pogodowa " + stationName;
 }
 
@@ -187,7 +189,7 @@ function getDirection(feed) {
 var speedSpec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
     width: "container",
-    height: 300,
+    height: chartHeight,
     autosize: { type: "fit", resize: true},
     data: {
       name: "fetched",
@@ -237,7 +239,7 @@ var speedSpec = {
         axis: {
           tickCount: 10,
           format: ".1f",
-          title: 'Avg. wind & Gust m/s',
+          title: 'Avg&Gust m/s',
           titleFontSize: 15,
           labelFontSize: 18
         }
@@ -248,7 +250,7 @@ var speedSpec = {
   var directionSpec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
     width: "container",
-    height: 300,
+    height: chartHeight,
     autosize: { type: "fit", resize: true},
     data: {
       name: "fetched",
@@ -287,7 +289,7 @@ var speedSpec = {
   var tempSpec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
     width: "container",
-    height: 300,
+    height: chartHeight,
     autosize: { type: "fit", resize: true},
     data: {
       name: "fetched",

diff --git a/widget.html b/widget.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+    <head>
+      <meta charset="utf-8" />
+      <link rel="stylesheet" href="index.css">
+      <title>Stacja pogodowa</title>
+      <script>
+        const chartHeight = 150;
+      </script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+      <script src="index.js"></script>
+      </head>
+<body onload="start(false);" onhashchange="start(true);">
+
+<div>
+  <div class="windrose_widget">
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" transform="scale(1)">
+      <circle class="outer" stroke-dasharray="75 3.55" transform="rotate(1 200,200)"/>
+      <circle id="greey" class="inner" stroke="lightgray" />
+      <circle id="possible" class="inner" stroke="yellow"/>
+      <circle id="recommended" class="inner" stroke="green"/>
+      <circle class="dot"/>
+
+      <polygon id="arrow" points="200,160 185,120 200,130 215,120"/>
+      <text id="updated" class="text"  x="300" y="30" fill="red" onclick="start(true)">&#x27F3</text>
+      <text class="text" x="50%" y="9%" >N</text>
+      <text class="text" x="50%" y="94%">S</text>
+      <text class="text" x="7%" y="52%" >W</text>
+      <text class="text" x="93%" y="52%">E</text>
+    </svg>
+    <div class="boxes">
+      <div id="wind" class="box">
+        <div class="indicator"></div>
+        <div class="name">WIND</div>
+        <div class="value">? m/s</div>
+      </div>
+      <div id="gust" class="box">
+        <div class="indicator"></div>
+        <div class="name">GUST</div>
+        <div class="value">? m/s</div>
+      </div>
+      <div id="direction" class="box">
+        <div class="indicator"></div>
+        <div class="name">DIRECTION</div>
+        <div class="value">? &#x00B0</div>
+      </div>
+      <div id="temperature" class="box">
+        <div class="indicator"></div>
+        <div class="name">TEMP</div>
+        <div class="value">? &#x2103</div>
+      </div>
+    </div>
+  </div>
+  <div class="charts_widget">
+    <div class="chart" id="speedChart"></div>
+    <div class="chart" id="directionChart"></div>
+    <div class="chart" id="tempChart"></div>
+  </div>
+</div>
+
+</body>
+</html>