You've already forked radiacode_docker_usb
design update and socket time to 2s
This commit is contained in:
313
webserver.html
313
webserver.html
@@ -1,105 +1,218 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
#app > .notification {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GBWL3K2WMQ"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-GBWL3K2WMQ');
|
||||
</script>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Київ неРадіоактивний! Проект dead.guru</title>
|
||||
<meta name="description" content="неРадіоактивна ситуація в Києві в реальному часі. Спектр, події, радіаційний фон.">
|
||||
<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="shortcut icon" href="https://kmr.gov.ua/sites/default/files/favicon-kyiv.ico"
|
||||
type="image/vnd.microsoft.icon" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
|
||||
integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc"
|
||||
crossorigin="anonymous"></script>
|
||||
<style>
|
||||
#app>div {
|
||||
margin: 5px auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#app fieldset {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#app>.notification {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 180px;
|
||||
width: 80%;
|
||||
margin: 5px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section class="section">
|
||||
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
неРадіоактивна ситуація в Києві.
|
||||
</h1>
|
||||
<h2 class="subtitle">В реальному часі.</h2>
|
||||
<div class="notification is-warning">
|
||||
Використовуйте ландшавтну орієнтацію екрану для зручного перегляду. Або планшет чи компьютер.
|
||||
</div>
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://kyiv.dead.guru">
|
||||
<img src="/logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
<div><span style="opacity: .9; color: #17914a; font-size: x-small;">не</span><span
|
||||
style="font-size: x-small;">Радіоактивний!</span></div>
|
||||
|
||||
</a>
|
||||
<div class="navbar-burger" data-target="navbarExampleTransparentExample">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navbarExampleTransparentExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="https://www.saveecobot.com/radiation-maps">
|
||||
Мапа датчиків
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link" href="#nav">
|
||||
Корисні посилання
|
||||
</a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="https://www.windy.com/?50.321,30.504,9">
|
||||
Мапа вітрів
|
||||
</a>
|
||||
<a class="navbar-item" href="https://bit.ly/3efbPmc">
|
||||
Мапа укриттів
|
||||
</a>
|
||||
</a>
|
||||
<a class="navbar-item" href="https://alerts.in.ua/">
|
||||
Мапа тривог
|
||||
</a>
|
||||
<a class="navbar-item" href="https://bit.ly/3egOosD">
|
||||
Поради від РНБО
|
||||
</a>
|
||||
<a class="navbar-item"
|
||||
href="https://dmbk.kyivcity.gov.ua/content/dii-u-vypadku-zagrozy-vynyknennya-avarii-z-vykydom-rozlyvom-radioaktyvnyh-rechovyn.html">
|
||||
Поради від департаменту муніципальної безпеки
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet"
|
||||
data-social-target="https://bulma.io" target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Київ неРадіоактивний! Перевірити можна на &hashtags=КиївНеРадіоактивний&url=https://kyiv.dead.guru">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
Tweet
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="app">
|
||||
<div>
|
||||
<div v-if="al" class="notification is-warning">
|
||||
<button class="delete" @click="al = !al"></button>
|
||||
Використовуйте ландшафтну орієнтацію екрану для зручного перегляду. Ще краще — планшет чи комп'ютер.
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<apexchart type="line" height="350" :options="ratesChartOptions" :series="rates_series"></apexchart>
|
||||
<button @click="rates_autoupdate = !rates_autoupdate" class="button">Автооновлення: {{ rates_autoupdate ? "ВКЛ" : "ВИКЛ" }}</button>
|
||||
<button @click="rates_autoupdate = !rates_autoupdate" class="button">Автооновлення: {{ rates_autoupdate ?
|
||||
"ВКЛ" : "ВИКЛ" }}</button>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<strong>До 0,3 мк3в/г - нормальний радіаційний фон.</strong>
|
||||
<p>
|
||||
Швидкість дози в мікрозівертах на годину вказує, скільки мікрозівертів (одиниця виміру еквівалентної дози) радіації поглинається організмом або матеріалом за одну годину. Ця величина може використовуватися для оцінки рівня радіаційного впливу на людей, а також для моніторингу і контролю радіаційної безпеки в радіаційних зонах, ядерних установках або природному середовищі.
|
||||
</p>
|
||||
<p>
|
||||
Наприклад, якщо швидкість дози становить 10 μSv/h, це означає, що організм або матеріал отримує дозу 10 мікрозівертів радіації за кожну годину. Це може вказувати на наявність джерела радіації в цьому місці або на необхідність заходів з радіаційного захисту.
|
||||
</p>
|
||||
<strong>До 0,3 мк3в/г — нормальний радіаційний фон.</strong>
|
||||
<p>
|
||||
Швидкість дози в мікрозівертах на годину вказує, скільки мікрозівертів (одиниця виміру еквівалентної дози)
|
||||
радіації поглинається організмом або матеріалом за одну годину. Ця величина може використовуватися для
|
||||
оцінки рівня радіаційного впливу на людей, а також для моніторингу і контролю радіаційної безпеки в
|
||||
радіаційних зонах, ядерних установках або природному середовищі.
|
||||
</p>
|
||||
<p>
|
||||
Наприклад, якщо швидкість дози становить 10 μSv/h, це означає, що організм або матеріал отримує дозу 10
|
||||
мікрозівертів радіації за кожну годину. Це може вказувати на наявність джерела радіації в цьому місці або на
|
||||
необхідність заходів з радіаційного захисту.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<apexchart type="bar" height="350" :options="spectrumChartOptions" :series="spectrum_series"></apexchart>
|
||||
<div>
|
||||
<fieldset>
|
||||
|
||||
<label class="checkbox" for="spectrum_x_accum"><input type="checkbox" id="spectrum_x_accum"
|
||||
v-model="spectrum_accum"> Акумульований</label>
|
||||
</fieldset>
|
||||
<fieldset class="control">
|
||||
|
||||
<label class="radio" for="spectrum_x_channel"><input type="radio" id="spectrum_x_channel"
|
||||
v-bind:value="false" v-model="spectrum_energy"> Канал</label>
|
||||
|
||||
|
||||
<label class="radio" for="spectrum_x_energy"><input type="radio" id="spectrum_x_energy"
|
||||
v-bind:value="true" v-model="spectrum_energy"> Енергія</label>
|
||||
</fieldset>
|
||||
<fieldset class="control">
|
||||
|
||||
<label class="radio" for="spectrum_linear"><input type="radio" id="spectrum_linear" v-bind:value="false"
|
||||
v-model="spectrum_logarithmic"> Лінійне</label>
|
||||
|
||||
<label class="radio" for="spectrum_log"><input type="radio" id="spectrum_log" v-bind:value="true"
|
||||
v-model="spectrum_logarithmic"> Логарифмічне</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div>
|
||||
<apexchart type="bar" height="350" :options="spectrumChartOptions" :series="spectrum_series"></apexchart>
|
||||
<div>
|
||||
<fieldset>
|
||||
|
||||
<label class="checkbox" for="spectrum_x_accum"><input type="checkbox" id="spectrum_x_accum" v-model="spectrum_accum"> Акумульований</label>
|
||||
</fieldset>
|
||||
<fieldset class="control">
|
||||
|
||||
<label class="radio" for="spectrum_x_channel"><input type="radio" id="spectrum_x_channel" v-bind:value="false" v-model="spectrum_energy"> Канал</label>
|
||||
|
||||
|
||||
<label class="radio" for="spectrum_x_energy"><input type="radio" id="spectrum_x_energy" v-bind:value="true" v-model="spectrum_energy"> Енергія</label>
|
||||
</fieldset>
|
||||
<fieldset class="control">
|
||||
|
||||
<label class="radio" for="spectrum_linear"><input type="radio" id="spectrum_linear" v-bind:value="false" v-model="spectrum_logarithmic"> Лінійне</label>
|
||||
|
||||
<label class="radio" for="spectrum_log"><input type="radio" id="spectrum_log" v-bind:value="true" v-model="spectrum_logarithmic"> Логарифмічне</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<button @click="updateSpectrum" class="button">Оновити спектр</button>
|
||||
</div>
|
||||
<button @click="updateSpectrum" class="button">Оновити спектр</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="subtitle">(Частина проекту <a href="https://dead.guru/">dead.guru</a>)</h2>
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>Важливо зазначити що явище радіоактивності не можна застосувати(вживати в контексті) до міста. Прочитати більше можна на <a href="https://uk.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B4%D1%96%D0%BE%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%96%D1%81%D1%82%D1%8C">Вікі</a>!</p>
|
||||
<p>
|
||||
Частина проекту <a href="https://dead.guru/"><strong>dead.guru</strong></a>. Код ліцензований
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Вміст сайту
|
||||
має ліцензію <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
const common_options = {
|
||||
chart: {
|
||||
animations: {enabled: false},
|
||||
zoom: {autoScaleYaxis: true},
|
||||
animations: { enabled: false },
|
||||
zoom: { autoScaleYaxis: true },
|
||||
},
|
||||
tooltip: {intersect: false},
|
||||
grid: {xaxis: {lines: {show: true}}},
|
||||
dataLabels: {enabled: false},
|
||||
tooltip: { intersect: false },
|
||||
grid: { xaxis: { lines: { show: true } } },
|
||||
dataLabels: { enabled: false },
|
||||
};
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
components: {
|
||||
apexchart: VueApexCharts,
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
ws: null,
|
||||
spectrum_duration: 0,
|
||||
rates_autoupdate: true,
|
||||
al: true,
|
||||
rates_series: [],
|
||||
spectrum_accum: false,
|
||||
spectrum_series: [],
|
||||
@@ -108,11 +221,11 @@
|
||||
spectrum_energy: true,
|
||||
ratesChartOptions: {
|
||||
...common_options,
|
||||
title: {text: 'Активнсть подій (подій в секунду) і доза'},
|
||||
xaxis: {type: 'datetime'},
|
||||
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},
|
||||
{ seriesName: 'Подій', title: { text: 'ПНС' }, labels: { formatter: (v) => v.toFixed(2) + ' ПНС' } },
|
||||
{ seriesName: 'Доза', title: { text: 'мк3в/г' }, labels: { formatter: (v) => v.toFixed(4) + ' мк3в/г' }, opposite: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -120,19 +233,22 @@
|
||||
watch: {
|
||||
spectrum_accum() {
|
||||
this.updateSpectrum();
|
||||
},
|
||||
al(newAl) {
|
||||
localStorage.al = newAl === true ? "ok!" : "no";
|
||||
}
|
||||
},
|
||||
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 fmt = this.spectrum_energy ? ((c) => (a0 + a1 * c + a2 * c * c).toFixed(0)) : undefined;
|
||||
const title = this.spectrum_energy ? 'кеВ' : 'канал';
|
||||
return{
|
||||
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%'}},
|
||||
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%' } },
|
||||
};
|
||||
},
|
||||
},
|
||||
@@ -140,10 +256,30 @@
|
||||
this.ws = new WebSocket('wss://' + window.location.host + '/ws')
|
||||
this.ws.onmessage = this.onmessage;
|
||||
this.updateSpectrum();
|
||||
var map = L.map('map').setView([50.51847778550632, 30.508852993206236], 10);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 10,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
var circle = L.circle([50.51847778550632, 30.508852993206236], {
|
||||
color: '#164299',
|
||||
weight: 1,
|
||||
opacity: 0.7,
|
||||
fillColor: '#256FFF',
|
||||
fillOpacity: 0.2,
|
||||
radius: 5000
|
||||
}).addTo(map);
|
||||
circle.bindPopup("Зона виміру");
|
||||
},
|
||||
beforeDestroy: function() {
|
||||
beforeDestroy: function () {
|
||||
this.ws.close();
|
||||
},
|
||||
mounted() {
|
||||
if (localStorage.al) {
|
||||
this.al = localStorage.al === "ok!";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onmessage(ev) {
|
||||
if (!this.rates_autoupdate) {
|
||||
@@ -155,10 +291,11 @@
|
||||
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));
|
||||
.then(data => (this.spectrum_duration = data.duration, this.spectrum_coef = data.coef, this.spectrum_series = data.series));
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user