219 lines
7.1 KiB
HTML
219 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
To change this license header, choose License Headers in Project Properties.
|
|
To change this template file, choose Tools | Templates
|
|
and open the template in the editor.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>NodeMCU Postaja</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<style>
|
|
.knof_sim {
|
|
cursor : pointer;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding: 5px;
|
|
}
|
|
#celota {
|
|
display : flex;
|
|
}
|
|
|
|
#linki, #funkcije {
|
|
flex : 1;
|
|
}
|
|
|
|
#vsebina {
|
|
flex : 5;
|
|
}
|
|
|
|
table, td, #grafi {
|
|
border: 1px solid;
|
|
}
|
|
|
|
#sensors {
|
|
display : flex;
|
|
}
|
|
|
|
#gauge_temp,#gauge_lux,#gauge_vlaga {
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
#chart_div{
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
body {
|
|
background-color: #333333;
|
|
color: deepskyblue;
|
|
}
|
|
#intro {
|
|
font-size: 28px;
|
|
font-family: sans-serif;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
google.charts.load('current', {'packages': ['gauge', 'corechart']});
|
|
google.charts.setOnLoadCallback(initGraph);
|
|
|
|
var options_temp = {
|
|
width: 100, height: 120,
|
|
redFrom: 25, redTo: 60,
|
|
yellowFrom: 10, yellowTo: 25,
|
|
greenFrom: 0, greenTo: 10,
|
|
minorTicks: 5,
|
|
min: 0, max: 100
|
|
};
|
|
var options_vlaga = {
|
|
width: 100, height: 120,
|
|
redFrom: 70, redTo: 100,
|
|
yellowFrom: 30, yellowTo: 70,
|
|
greenFrom: 0, greenTo: 30,
|
|
minorTicks: 5,
|
|
min: 200, max: 1300
|
|
};
|
|
var options_lux = {
|
|
width: 100, height: 120,
|
|
redFrom: 9000, redTo: 10000,
|
|
greenFrom: 0, greenTo: 1000,
|
|
minorTicks: 5,
|
|
min: 0, max: 1023
|
|
};
|
|
var options2 = {
|
|
title: 'Vrednosti senzorjev',
|
|
curveType: 'function',
|
|
min: 0,
|
|
legend: {position: 'bottom'},
|
|
series: {
|
|
0: {color: 'blue'},
|
|
1: {color: 'red'},
|
|
2: {color: 'green'}
|
|
}
|
|
};
|
|
|
|
var maxPoints = 250;
|
|
|
|
function initGraph() {
|
|
data1 = google.visualization.arrayToDataTable([
|
|
['Label', 'Value'],
|
|
['Temperatura', 80]
|
|
]);
|
|
data2 = google.visualization.arrayToDataTable([
|
|
['Label', 'Value'],
|
|
['Vlaga', 30]
|
|
]);
|
|
data3 = google.visualization.arrayToDataTable([
|
|
['Label', 'Value'],
|
|
['Osvetljenost', 50]
|
|
]);
|
|
|
|
combo = new google.visualization.DataTable();
|
|
combo.addColumn('date', 'Čas');
|
|
combo.addColumn('number', 'Temperatura');
|
|
combo.addColumn('number', 'Vlaga');
|
|
combo.addColumn('number', 'Osvetljenost');
|
|
pogled = new google.visualization.DataView(combo);
|
|
chart1 = new google.visualization.Gauge($("#gauge_vlaga")[0]);
|
|
chart2 = new google.visualization.Gauge($("#gauge_temp")[0]);
|
|
chart3 = new google.visualization.Gauge($("#gauge_lux")[0]);
|
|
chart4 = new google.visualization.LineChart(document.getElementById('chart_div'));
|
|
chart1.draw(data1, options_temp);
|
|
chart2.draw(data2, options_vlaga);
|
|
chart3.draw(data3, options_lux);
|
|
chart4.draw(pogled, options2);
|
|
|
|
updateChart();
|
|
}
|
|
|
|
function updateChart() {
|
|
setInterval(function () {
|
|
while (combo.getNumberOfRows() > maxPoints)
|
|
{
|
|
combo.removeRow(0);
|
|
}
|
|
remoteVal();
|
|
}, 500);
|
|
}
|
|
|
|
function remoteVal() {
|
|
$.get("http://192.168.2.97/", function (dataz) { //tukaj namesto sensor.php napiši lokacijo kam naj se pošlje request
|
|
podatki = dataz;
|
|
dataz = JSON.parse(dataz);
|
|
var tmp1 = dataz.temp;
|
|
var tmp2 = dataz.mois/10;
|
|
var tmp3 = dataz.light/10;
|
|
combo.addRow([new Date(), tmp1, tmp2, tmp3]);
|
|
data1.setValue(0, 1, tmp1);
|
|
data2.setValue(0, 1, tmp2);
|
|
data3.setValue(0, 1, tmp3);
|
|
chart1.draw(data1, options_temp);
|
|
chart2.draw(data2, options_vlaga);
|
|
chart3.draw(data3, options_lux);
|
|
chart4.draw(pogled, options2);
|
|
}, "text");
|
|
}
|
|
</script>
|
|
<script>
|
|
function kaziStevec() {
|
|
$("#gauge_temp,#gauge_lux,#gauge_vlaga").toggle();
|
|
}
|
|
function kaziGraf() {
|
|
$("#chart_div").toggle();
|
|
}
|
|
|
|
function skrijSerijo(x) {
|
|
pogled.hideColumns([x]);
|
|
}
|
|
|
|
function resetPogled() {
|
|
pogled.setColumns([0, 1, 2, 3]);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="celota">
|
|
<div id="linki"></div>
|
|
<div id="vsebina">
|
|
<div id="intro">
|
|
<big><b>Pozdravljeni!</b></big><br> <marquee>To je stran moje senzorske postaje. Deluje s pomočjo NodeMCU in večih senzorjev.
|
|
Poganja jo micropython. Postaja meri temperaturo, vlago in svetlobo.</marquee>
|
|
</div>
|
|
<div id="grafi">
|
|
<div id="sensors">
|
|
<div id="gauge_vlaga"></div>
|
|
<div id="gauge_temp"></div>
|
|
<div id="gauge_lux"></div>
|
|
|
|
<div id="chart_div"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="funkcije">
|
|
Skrij/Prikaži vrednosti
|
|
|
|
|
|
Skrij/Prikaži zogodivno
|
|
|
|
|
|
Skrij temperaturo
|
|
|
|
|
|
Skrij vlago
|
|
|
|
|
|
Skrij tlak
|
|
|
|
|
|
Vrni vrednosti
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|