one step better...

metrics.go

@@ -8,6 +8,7 @@ import (
 	"io/ioutil"
 	"log"
 	"net/http"
+	"strconv"
 	"strings"
 	"time"
 )
@@ -151,7 +152,7 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
 						first = false
 					}
 
-					fmt.Fprintf(response, "[%d, %s, %s, %s]\n", a, s[8], s[9], s[10])
+					fmt.Fprintf(response, "[%d, %s, %s, %s, %d]\n", a, s[8], s[9], s[10], vbat2percent(s[10]))
 
 				}
 
@@ -164,6 +165,27 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
 	}
 }
 
+func vbat2percent(vbat string) int {
+	res := 0
+	i, err := strconv.Atoi(vbat)
+	if err == nil {
+		if i < 3400 {
+			res = 1
+		} else if i < 3700 {
+			res = 2
+		} else if i < 3850 {
+			res = 3
+		} else if i < 4000 {
+			res = 4
+		} else {
+			res = 5
+		}
+
+	}
+
+	return res
+}
+
 func CalcDaysUntil(mydate string) int {
 	var days int
 	layout := "02.01.2006"

minify-fa.sh

@@ -1 +1 @@
-cat /home/appuser/wo-bisch-web/static/js/fontawesome-5.11.2/all.js |/home/appuser/wo-bisch-web/minify-fa-js.py home,address-card,balance-scale,sign-out-alt,sign-in-alt,calendar,globe,tint,battery-three-quarters,envelope,check,lock,exclamation-triangle,cog,plus,shopping-cart,minus,arrow-right,caret-down,map-marked-alt >/home/appuser/wo-bisch-web/static/js/fontawesome-5.11.2/all-minified.js
+cat /home/appuser/wo-bisch-web/static/js/fontawesome-5.11.2/all.js |/home/appuser/wo-bisch-web/minify-fa-js.py home,address-card,balance-scale,sign-out-alt,sign-in-alt,calendar,globe,tint,battery-empty,battery-quarter,battery-half,battery-three-quarters,battery-full,battery-slash,envelope,check,lock,exclamation-triangle,cog,plus,shopping-cart,minus,arrow-right,caret-down,map-marked-alt >/home/appuser/wo-bisch-web/static/js/fontawesome-5.11.2/all-minified.js

snippets/map.html

@@ -14,7 +14,8 @@
 <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><span>100 %</span>
+      <i class="fa fa-calendar"></i>&nbsp;
+      <span></span> <i class="fa fa-caret-down"></i>
     </div>
   </div>
   <div class="column is-half py-1">

static/js/fontawesome-5.11.2/all-minified.js

@@ -748,6 +748,14 @@
 
     "balance-scale": [640, 512, [], "f24e", "M256 336h-.02c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0C-2.06 328.75.02 320.33.02 336H0c0 44.18 57.31 80 128 80s128-35.82 128-80zM128 176l72 144H56l72-144zm511.98 160c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0-87.12 174.26-85.04 165.84-85.04 181.51H384c0 44.18 57.31 80 128 80s128-35.82 128-80h-.02zM440 320l72-144 72 144H440zm88 128H352V153.25c23.51-10.29 41.16-31.48 46.39-57.25H528c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H383.64C369.04 12.68 346.09 0 320 0s-49.04 12.68-63.64 32H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h129.61c5.23 25.76 22.87 46.96 46.39 57.25V448H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"],
 
+    "battery-empty": [640, 512, [], "f244", "M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48z"],
+
+    "battery-full": [640, 512, [], "f240", "M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-48 96H96v128h416V192z"],
+
+    "battery-half": [640, 512, [], "f242", "M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-240 96H96v128h224V192z"],
+
+    "battery-quarter": [640, 512, [], "f243", "M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-336 96H96v128h128V192z"],
+
     "battery-three-quarters": [640, 512, [], "f241", "M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-144 96H96v128h320V192z"],
 
     "calendar": [448, 512, [], "f133", "M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"],

static/js/map.js

@@ -19,6 +19,36 @@ if (stop == null) {
 
 var datapoints;
 
+function vbat2icon(level) {
+    switch (level) {
+      case 1:
+        fa_battery_string = "fa-battery-empty";
+        icon_color = "has-text-danger";
+        break;
+      case 2:
+        fa_battery_string = "fa-battery-quarter";
+        icon_color = "has-text-warning";
+        break;
+      case 3:
+        fa_battery_string = "fa-battery-half";
+        icon_color = "has-text-info";
+        break;
+      case 4:
+        fa_battery_string = "fa-battery-three-quarters";
+        icon_color = "has-text-link";
+        break;
+      case 5:
+        fa_battery_string = "fa-battery-full";
+        icon_color = "has-text-success";
+        break;
+      default:
+        fa_battery_string = "fa-battery-slash";
+        icon_color = "has-text-danger";
+    }
+
+    return '<span class="icon ' + icon_color + '"><i class="fas ' + fa_battery_string + '"></i></span>';
+}
+
 function refreshDatapoints(deveui, start, stop) {
   range = ""
   range = range + "&start=" + start;
@@ -51,11 +81,15 @@ function refreshDatapoints(deveui, start, stop) {
     last_slider_position = 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>';
+    
+    var myhtml = moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + vbat2icon(mydata[mydata.length - 1][4]) + ' (' + mydata[mydata.length - 1][3] + ' mV)';
+    console.log(myhtml);
     $('#tooltiptext').html(myhtml);
   });
 }
 
+var myfeature;
+
 $(document).ready(function() {
   var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
   
@@ -70,11 +104,12 @@ $(document).ready(function() {
   });
   
   // Create the layer with the icon
+  myfeature = new ol.Feature({
+        geometry: new ol.geom.Point(position)
+      })
   var vectorLayer = new ol.layer.Vector({
     source: new ol.source.Vector({
-      features: [new ol.Feature({
+      features: [myfeature]
-        geometry: new ol.geom.Point(position)
-      })]
     }),
     style: new ol.style.Style({
       image: new ol.style.Icon({
@@ -167,6 +202,9 @@ $(function() {
 
 function updateSliderTooltip(c)
 {
+  if (datapoints.length == 0) {
+     return
+  }
   if (c.value == last_slider_position) {
     // we don't do anything if slider position did not change...
     return
@@ -176,27 +214,11 @@ function updateSliderTooltip(c)
   console.log("Slider position changed...");
   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>';
+  var myhtml = '<p>' + moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + vbat2icon(datapoints[c.value][4]) + ' (' + datapoints[c.value][3] + ' mV)</p>';
   $('#tooltiptext').html(myhtml);
+  console.log(myhtml);
 
   var position = ol.proj.fromLonLat([datapoints[c.value][2], datapoints[c.value][1]], "EPSG:2056");
-
+  console.log(position);
-  // Create the layer with the icon
+  myfeature.setGeometry(new ol.geom.Point(position));
-  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);
-
 }