Add files via upload
This commit is contained in:
kristjan-komlosi
GitHub
178
index.html
Normal file
178
index.html
Normal file
@@ -0,0 +1,178 @@
|
||||
<!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>
|
||||
#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 = 50;
|
||||
|
||||
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;
|
||||
var tmp3 = dataz.light;
|
||||
combo.addRow([new Date(), tmp1, tmp2, tmp3 / 1000]);
|
||||
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>
|
||||
</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">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user