From 7e79d2e968f0c4ec6e960145722f0752a4ab2064 Mon Sep 17 00:00:00 2001
From: kristjan-komlosi <kristjan.komlosi@gmail.com>
Date: Wed, 28 Jun 2017 13:00:07 +0200
Subject: [PATCH] Add files via upload

---
 index.html | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c6af447
--- /dev/null
+++ b/index.html
@@ -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>
