schon ein bisschen besser mit location slider...

metrics.go

@@ -8,8 +8,6 @@ import (
 	"io/ioutil"
 	"log"
 	"net/http"
-	"sort"
-	"strconv"
 	"strings"
 	"time"
 )
@@ -95,7 +93,12 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
 		}
 
 		url := "http://localhost:8086/api/v2/query?org=wobischorg"
-		data := []byte(fmt.Sprintf(`from(bucket:"wobischbucket") |> range(start: %s, stop: %s) |> filter(fn: (r) => r._measurement == "measurement") |> filter(fn: (r) => r._field == "lon" or r._field == "lat") |> filter(fn: (r) => r.deveui == "%s")`, mystart, mystop, mydeveui))
+		data := []byte(fmt.Sprintf(`from(bucket:"wobischbucket") 
+                                         |> range(start: %s, stop: %s) 
+                                         |> filter(fn: (r) => r._measurement == "measurement") 
+                                         |> filter(fn: (r) => r._field == "lon" or r._field == "lat" or r._field == "vbat") 
+                                         |> filter(fn: (r) => r.deveui == "%s")
+                                         |> pivot(rowKey:["_time"], columnKey: ["_field"], valueColumn: "_value")`, mystart, mystop, mydeveui))
 
 		req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))
 		if err != nil {
@@ -126,57 +129,33 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
 		}
 		fmt.Println("response Body:", string(body))
 
-		m := make(map[int64][2]float64)
-
 		scanner := bufio.NewScanner(strings.NewReader(string(body)))
+		first := true
+		fmt.Fprintf(response, "[\n")
 		for scanner.Scan() {
 			s := strings.Split(scanner.Text(), ",")
 			fmt.Printf("Scanned Line: %v\n", s)
-			if (len(s) >= 7) && !(strings.HasPrefix(s[5], "_")) {
+			if (len(s) >= 11) && !(strings.HasPrefix(s[3], "_")) {
-				t, err := time.Parse(time.RFC3339, s[5])
+				t, err := time.Parse(time.RFC3339, s[3])
 				if err != nil {
-					fmt.Printf("error converting time: %s\n", s[5])
+					fmt.Printf("error converting time: %s\n", s[3])
 					continue
 				}
 				a := t.Unix()
-				b := s[6]
+				if s[8] == "0" {
-				if b == "0" {
 					fmt.Println("skip 0 value for lon/lat")
 				} else {
-					t := s[7]
-					f, err := strconv.ParseFloat(b, 64)
-					if err == nil {
-						v := m[a]
-						if t == "lon" {
-							v[0] = f
-						}
-						if t == "lat" {
-							v[1] = f
-						}
-						m[a] = v
-					} else {
-						fmt.Printf("error converting string to float64: %s\n", b)
-					}
-				}
-
-			}
-		}
-		first := true
-		fmt.Fprintf(response, "[\n")
-		keys := make([]int64, 0, len(m))
-		for k := range m {
-			keys = append(keys, k)
-		}
-		sort.SliceStable(keys, func(i, j int) bool { return keys[i] < keys[j] })
-
-		for _, k := range keys {
 					if !(first) {
 						fmt.Fprintf(response, ",")
 					} else {
 						first = false
 					}
 
-			fmt.Fprintf(response, "[%d, %f, %f]\n", k, m[k][0], m[k][1])
+					fmt.Fprintf(response, "[%d, %s, %s, %s]\n", a, s[8], s[9], s[10])
+
+				}
+
+			}
 		}
 		fmt.Fprintf(response, "]\n")
 

snippets/map.html

@@ -8,96 +8,33 @@
 
 <link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
 <script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
+<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
+<script src="static/js/map.js"></script>
 
 <div class="columns" id="myselectors">
   <div class="column is-half py-1">
     <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
-      <i class="fa fa-calendar"></i>&nbsp;
+      <i class="fa fa-calendar"></i><span>100 %</span>
-      <span></span> <i class="fa fa-caret-down"></i>
     </div>
   </div>
   <div class="column is-half py-1">
   </div>
 </div>
 
-<script src="static/js/map.js"></script>
-<script src="static/js/graph.js"></script>
-
 <div>
   <section id="chart">
     <!-- Content ... -->
   </section>
 </div>
 
-<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
+<div id="map" class="mapbig">
-<div id="map" class="mapbig"></div>
+</div>
-
-<script>
-var urlParams = new URLSearchParams(window.location.search);
-var deveui = urlParams.get('deveui');
-var lon = urlParams.get('lon');
-var lat = urlParams.get('lat');
-var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
-
-
-var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
-var map = new ga.Map({
-  target: 'map',
-  layers: [layer],
-  view: new ol.View({
-    center: position,
-    resolution: 20
-  })
-});
-
-// Create the layer with the icon
-var vectorLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    features: [new ol.Feature({
-      geometry: new ol.geom.Point(position)
-    })]
-  }),
-  style: new ol.style.Style({
-    image: new ol.style.Icon({
-      anchor: [0.5, 1],
-      anchorXUnits: 'fraction',
-      anchorYUnits: 'fraction',
-      src: '/static/images/marker.png'
-    })
-  })
-});
-map.addLayer(vectorLayer);
-</script>
 
+<div id="tooltiptext" class="slidecontainer has-text-centered">
+</div>
 
 <div class="slidecontainer">
-      <input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="200000" step="1" value="100000" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
+  <input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="0" step="1" value="" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
-
-<script>
-function updateSlider(c)
-{
-    if(c.value <=  50000)
-  {
-    if(c.step != 1)
-        c.step = 1;
-    alert(c.value);
-  }
-  else
-  {
-     if(c.step != 3)
-        c.step = 3;
-    alert(c.value);
-  }
-}
-
-function updateSliderTooltip(c)
-{
-  $('#tooltiptext').html(c.value);
-}
-</script>
-    </div>
-    <div class="slidecontainer has-textcentered">
-      <span id="tooltiptext">0</span>
 </div>
 {{ else }}
 <h4>Bitte zuerst <a href="login.html">einloggen</a></h4>

static/js/graph.js

@@ -1,105 +0,0 @@
-$(function() {
-
-    var start = moment({hour: 0});
-    var end = moment();
-    var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-    var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-
-    console.log("XXX: "+start.format());
-
-    function change_property(new_property) {
-        if (new_property != property) {
-            property = new_property;
-            
-            if (history.pushState) {
-                var newurl = window.location.href.replace(/property=[a-z]+/,'property='+new_property);
-                window.history.pushState({path:newurl},'',newurl);
-            }
-        }
-    }
-
-    function cb(start, end) {
-        $('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
-        console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
-        s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-        s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-        console.log("Start: " + s_start + ' End: ' + s_end + ' Property: '+ property);
-        drawGraph(deveui, alias, property, s_start,s_end, false);
-    }
-
-    $('#btn_w').on("click", function() {
-      change_property('w');
-      drawGraph(deveui, alias, property, s_start, s_end, false);
-    });
-
-    $('#btn_t').on("click", function() {
-      change_property('t');
-      drawGraph(deveui, alias, property, s_start, s_end, false);
-    });
-
-    $('#btn_h').on("click", function() {
-      change_property('h');
-      drawGraph(deveui, alias, property, s_start, s_end, false);
-    });
-
-    $('#btn_p').on("click", function() {
-      change_property('p');
-      drawGraph(deveui, alias, property, s_start, s_end, false);
-    });
-
-    $('#btn_vp').on("click", function() {
-      change_property('vp');
-      drawGraph(deveui, alias, property, s_start, s_end, false);
-    });
-
-    $('#reportrange').daterangepicker({
-        startDate: start.local(),
-        endDate: end.local(),
-        regional: [ "de" ],
-        "locale": {
-            format: 'DD.MM.YYYY',
-            "separator": " - ",
-            "applyLabel": "Anwenden",
-            "cancelLabel": "Abbrechen",
-            "fromLabel": "Von",
-            "toLabel": "Bis",
-            customRangeLabel: 'Benutzerdefiniert',
-            "weekLabel": "W",
-            "daysOfWeek": [
-                "So",
-                "Mo",
-                "Di",
-                "Mi",
-                "Do",
-                "Fr",
-                "Sa"
-            ],
-            "monthNames": [
-                "Jan",
-                "Feb",
-                "Mär",
-                "Apr",
-                "Mai",
-                "Jun",
-                "Jul",
-                "Aug",
-                "Sep",
-                "Okt",
-                "Nov",
-                "Dez"
-            ],
-            "firstDay": 1
-        },
-        ranges: {
-           'Heute': [moment(), moment()],
-           'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
-           'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
-           'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
-           'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
-           'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
-        }
-    }, cb);
-
-    //cb(start, end);
-
-});

static/js/map.js

@@ -2,6 +2,21 @@ var urlParams = new URLSearchParams(window.location.search);
 var deveui = urlParams.get('deveui');
 var start = urlParams.get('start');
 var stop = urlParams.get('stop');
+var lon = urlParams.get('lon');
+var lat = urlParams.get('lat');
+var map;
+
+if (start == null) {
+  var dstart = moment({hour: 0});
+  var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+}
+
+if (stop == null) {
+  var dstop = moment();
+  var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+}
+
+var datapoints;
 
 function refreshDatapoints(deveui, start, stop) {
   range = ""
@@ -29,20 +44,172 @@ function refreshDatapoints(deveui, start, stop) {
       return;
     }
 
-    alert(mydata);
+    datapoints = mydata;
+    $('#datetimeslider').attr('max', mydata.length - 1);
+    $('#datetimeslider').val(mydata.length - 1);
+    var unix_timestamp = mydata[mydata.length - 1][0];
+    var date = new Date(unix_timestamp * 1000);
+    var myhtml = moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + mydata[mydata.length - 1][3] + '% <i class="fa fa-battery-three-quarters"></i>';
+    $('#tooltiptext').html(myhtml);
   });
 }
 
-if (start == null) {
+function updateSlider(c)
-  var dstart = moment({hour: 0});
+{
-  var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+    if(c.value <=  50000)
+  {
+    if(c.step != 1)
+        c.step = 1;
+    //alert(c.value);
+  }
+  else
+  {
+     if(c.step != 3)
+        c.step = 3;
+    //alert(c.value);
+  }
 }
 
-if (stop == null) {
+
-  var dstop = moment();
+$(document).ready(function() {
-  var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+  var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
-}
+  console.log("Document Ready Position:");
+  console.log(position);
+  
+  var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
+  map = new ga.Map({
+    target: 'map',
+    layers: [layer],
+    view: new ol.View({
+      center: position,
+      resolution: 20
+    })
+  });
+  
+  // Create the layer with the icon
+  var vectorLayer = new ol.layer.Vector({
+    source: new ol.source.Vector({
+      features: [new ol.Feature({
+        geometry: new ol.geom.Point(position)
+      })]
+    }),
+    style: new ol.style.Style({
+      image: new ol.style.Icon({
+        anchor: [0.5, 1],
+        anchorXUnits: 'fraction',
+        anchorYUnits: 'fraction',
+        src: '/static/images/marker.png'
+      })
+    })
+  });
+  map.addLayer(vectorLayer);
 
   $('#reportrange span').html(moment(start).locale('de').format('D. MMM YYYY') + ' - ' + moment(stop).locale('de').format('D. MMM YYYY'));
 
   refreshDatapoints(deveui,start,stop);
+  console.log("End of document ready...");
+});
+
+
+$(function() {
+    var start = moment({hour: 0});
+    var end = moment();
+    var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+    var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+
+    console.log("XXX: "+start.format());
+
+    function cb(start, end) {
+        $('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
+        console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
+        s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+        s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+        console.log("Start: " + s_start + ' End: ' + s_end);
+        //drawGraph(deveui, alias, property, s_start,s_end, false);
+        refreshDatapoints(deveui, s_start, s_end);
+    }
+
+    $('#reportrange').daterangepicker({
+        startDate: start.local(),
+        endDate: end.local(),
+        regional: [ "de" ],
+        "locale": {
+            format: 'DD.MM.YYYY',
+            "separator": " - ",
+            "applyLabel": "Anwenden",
+            "cancelLabel": "Abbrechen",
+            "fromLabel": "Von",
+            "toLabel": "Bis",
+            customRangeLabel: 'Benutzerdefiniert',
+            "weekLabel": "W",
+            "daysOfWeek": [
+                "So",
+                "Mo",
+                "Di",
+                "Mi",
+                "Do",
+                "Fr",
+                "Sa"
+            ],
+            "monthNames": [
+                "Jan",
+                "Feb",
+                "M&auml;r",
+                "Apr",
+                "Mai",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Okt",
+                "Nov",
+                "Dez"
+            ],
+            "firstDay": 1
+        },
+        ranges: {
+           'Heute': [moment(), moment()],
+           'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+           'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
+           'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
+           'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
+           'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        }
+    }, cb);
+
+    //cb(start, end);
+
+});
+
+
+function updateSliderTooltip(c)
+{
+  var unix_timestamp = datapoints[c.value][0];
+  var date = new Date(unix_timestamp * 1000);
+  var myhtml = moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + datapoints[c.value][3] + '% <i class="fa fa-battery-three-quarters"></i>';
+  $('#tooltiptext').html(myhtml);
+
+  var position = ol.proj.fromLonLat([datapoints[c.value][2], datapoints[c.value][1]], "EPSG:2056");
+
+  console.log("updateSliderTooltip Position:");
+  console.log(position);
+
+  // Create the layer with the icon
+  var vectorLayer2 = new ol.layer.Vector({
+    source: new ol.source.Vector({
+      features: [new ol.Feature({
+        geometry: new ol.geom.Point(position)
+      })]
+    }),
+    style: new ol.style.Style({
+      image: new ol.style.Icon({
+        anchor: [0.5, 1],
+        anchorXUnits: 'fraction',
+        anchorYUnits: 'fraction',
+        src: '/static/images/marker.png'
+      })
+    })
+  });
+  map.addLayer(vectorLayer2);
+
+}