Initital commit

2023-07-04 19:57:54 +03:00
commit 4d96d3ca60
6 changed files with 300 additions and 0 deletions
--- a/webserver.html
+++ b/webserver.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Kyiv Radioactive!</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <style>
+        #app > div {
+          margin: 5px auto;
+          width: 80%;
+          text-align: center;
+          padding: 5px;
+          border: 1px #aaa dashed;
+        }
+        #app fieldset {
+          display: inline-block;
+          border: 0;
+          padding: 0;
+          margin-left: 20px;
+        }
+        </style>
+  </head>
+  <body>
+  <section class="section">
+    <div class="container">
+      <h1 class="title">
+        неРадіоактивна ситуація в Києві.
+      </h1>
+      <h2 class="subtitle">В реальному часі.</h2>
+      <div id="app">
+        <div>
+          <apexchart type="bar" height="350" :options="spectrumChartOptions" :series="spectrum_series"></apexchart>
+          <div>
+            <fieldset>
+              <input type="checkbox" id="spectrum_x_accum" v-model="spectrum_accum">
+              <label for="spectrum_x_accum">Акумульований</label>
+            </fieldset>
+            <fieldset>
+              <input type="radio" id="spectrum_x_channel" v-bind:value="false" v-model="spectrum_energy">
+              <label for="spectrum_x_channel">Канал</label>
+      
+              <input type="radio" id="spectrum_x_energy" v-bind:value="true" v-model="spectrum_energy">
+              <label for="spectrum_x_energy">Енергія</label>
+            </fieldset>
+            <fieldset>
+              <input type="radio" id="spectrum_linear" v-bind:value="false" v-model="spectrum_logarithmic">
+              <label for="spectrum_linear">Лінійне</label>
+              <input type="radio" id="spectrum_log" v-bind:value="true" v-model="spectrum_logarithmic">
+              <label for="spectrum_log">Логарифмічне</label>
+            </fieldset>
+          </div>
+          <button @click="updateSpectrum">Оновити спектр</button>
+        </div>
+        <div>
+          <apexchart type="line" height="350" :options="ratesChartOptions" :series="rates_series"></apexchart>
+          <button @click="rates_autoupdate = !rates_autoupdate">Автооновлення: {{ rates_autoupdate ? "ВКЛ" : "ВИКЛ" }}</button>
+        </div>
+      </div>
+    </div>
+  </section>
+  <script>
+    const common_options = {
+      chart: {
+        animations: {enabled: false},
+        zoom: {autoScaleYaxis: true},
+      },
+      tooltip: {intersect: false},
+      grid: {xaxis: {lines: {show: true}}},
+      dataLabels: {enabled: false},
+    };
+    var app = new Vue({
+      el: '#app',
+      components: {
+        apexchart: VueApexCharts,
+      },
+      data: function() {
+        return {
+          ws: null,
+          spectrum_duration: 0,
+          rates_autoupdate: true,
+          rates_series: [],
+          spectrum_accum: false,
+          spectrum_series: [],
+          spectrum_coef: [0, 0, 0],
+          spectrum_logarithmic: true,
+          spectrum_energy: true,
+          ratesChartOptions: {
+            ...common_options,
+            title: {text: 'Активнсть подій (подій в секунду) і доза'},
+            xaxis: {type: 'datetime'},
+            yaxis: [
+              {seriesName: 'Подій', title: {text: 'ПНС'}, labels: {formatter:(v) => v.toFixed(2) + ' ПНС'}},
+              {seriesName: 'Доза',  title: {text: 'мк3в/г'}, labels: {formatter:(v) => v.toFixed(4) + ' мк3в/г'}, opposite: true},
+            ],
+          },
+        };
+      },
+      watch: {
+        spectrum_accum() {
+          this.updateSpectrum();
+        }
+      },
+      computed: {
+        spectrumChartOptions() {
+          const a0 = this.spectrum_coef[0], a1 = this.spectrum_coef[1], a2 = this.spectrum_coef[2];
+          const fmt = this.spectrum_energy ? ((c) => (a0 + a1*c + a2*c*c).toFixed(0)) : undefined;
+          const title = this.spectrum_energy ? 'кеВ' : 'канал';
+          return{
+            ...common_options,
+            title: {text: `Спектр, ${this.spectrum_duration} секунд`},
+            xaxis: {type: 'numeric', title: {text: title}, tickAmount: 25, labels: {formatter:fmt}},
+            yaxis: {logarithmic: this.spectrum_logarithmic, decimalsInFloat: 0},
+            plotOptions: {bar: {columnWidth: '95%'}},
+          };
+        },
+      },
+      created() {
+        this.ws = new WebSocket('wss://' + window.location.host + '/ws')
+        this.ws.onmessage = this.onmessage;
+        this.updateSpectrum();
+      },
+      beforeDestroy: function() {
+        this.ws.close();
+      },
+      methods: {
+        onmessage(ev) {
+          if (!this.rates_autoupdate) {
+            return;
+          }
+          const d = JSON.parse(ev.data);
+          this.rates_series = d.series;
+        },
+        updateSpectrum() {
+          fetch(`/spectrum?accum=${this.spectrum_accum}`)
+            .then(response => response.json())
+            .then(data => (this.spectrum_duration=data.duration, this.spectrum_coef=data.coef, this.spectrum_series=data.series));
+        },
+      },
+    });
+    </script>
+  </body>
+</html>