From 452543e04f8c2ce20f689a061c313e81a67aec7c Mon Sep 17 00:00:00 2001 From: BlubbFish Date: Fri, 8 Mar 2019 16:48:27 +0100 Subject: [PATCH] Working on #1, List with devices now finished --- Lora-Map/Lora-Map.csproj | 26 +++- Lora-Map/Model/Botclient.cs | 8 +- Lora-Map/Program.cs | 2 +- Lora-Map/Properties/AssemblyInfo.cs | 5 +- Lora-Map/{Googlelocation.cs => Server.cs} | 8 +- Lora-Map/resources/css/global.css | 114 ++++++++++-------- Lora-Map/resources/icons/akku/0-4.png | Bin 0 -> 231 bytes Lora-Map/resources/icons/akku/1-4.png | Bin 0 -> 229 bytes Lora-Map/resources/icons/akku/2-4.png | Bin 0 -> 234 bytes Lora-Map/resources/icons/akku/3-4.png | Bin 0 -> 232 bytes Lora-Map/resources/icons/akku/4-4.png | Bin 0 -> 234 bytes .../{ => icons/marker}/map-marker.png | Bin Lora-Map/resources/index.html | 3 + Lora-Map/resources/js/marker.js | 99 +++++++++++++++ Lora-Map/resources/js/menu.js | 15 +++ Lora-Map/resources/js/nav.js | 112 +---------------- 16 files changed, 219 insertions(+), 173 deletions(-) rename Lora-Map/{Googlelocation.cs => Server.cs} (87%) create mode 100644 Lora-Map/resources/icons/akku/0-4.png create mode 100644 Lora-Map/resources/icons/akku/1-4.png create mode 100644 Lora-Map/resources/icons/akku/2-4.png create mode 100644 Lora-Map/resources/icons/akku/3-4.png create mode 100644 Lora-Map/resources/icons/akku/4-4.png rename Lora-Map/resources/{ => icons/marker}/map-marker.png (100%) create mode 100644 Lora-Map/resources/js/marker.js create mode 100644 Lora-Map/resources/js/menu.js diff --git a/Lora-Map/Lora-Map.csproj b/Lora-Map/Lora-Map.csproj index 16279d6..1527cd3 100644 --- a/Lora-Map/Lora-Map.csproj +++ b/Lora-Map/Lora-Map.csproj @@ -45,7 +45,7 @@ - + @@ -74,6 +74,24 @@ PreserveNewest + + PreserveNewest + + + PreserveNewest + + + PreserveNewest + + + PreserveNewest + + + PreserveNewest + + + PreserveNewest + @@ -91,9 +109,15 @@ PreserveNewest + + PreserveNewest + PreserveNewest + + PreserveNewest + PreserveNewest diff --git a/Lora-Map/Model/Botclient.cs b/Lora-Map/Model/Botclient.cs index fd1bee5..bc3633c 100644 --- a/Lora-Map/Model/Botclient.cs +++ b/Lora-Map/Model/Botclient.cs @@ -25,10 +25,14 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model { this.Battery = Math.Round((Double)json["BatteryLevel"], 2); if(this.Battery < 3) { this.Batterysimple = 0; - } else if(this.Battery < 3.5) { + } else if(this.Battery < 3.2) { this.Batterysimple = 1; - } else { + } else if(this.Battery < 3.5) { this.Batterysimple = 2; + } else if(this.Battery < 3.8) { + this.Batterysimple = 3; + } else { + this.Batterysimple = 4; } } if (json.ContainsKey("Gps") && json["Gps"].IsObject) { diff --git a/Lora-Map/Program.cs b/Lora-Map/Program.cs index b3d31ff..f91ad96 100644 --- a/Lora-Map/Program.cs +++ b/Lora-Map/Program.cs @@ -19,7 +19,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap { } InIReader ini = InIReader.GetInstance("settings"); ADataBackend b = (ADataBackend)ABackend.GetInstance(ini.GetSection("mqtt"), ABackend.BackendType.Data); - new Googlelocation(b, ini.GetSection("webserver"), InIReader.GetInstance("requests")); + new Server(b, ini.GetSection("webserver"), InIReader.GetInstance("requests")); while(true) { System.Threading.Thread.Sleep(1000); } diff --git a/Lora-Map/Properties/AssemblyInfo.cs b/Lora-Map/Properties/AssemblyInfo.cs index 8bb39e7..20c474e 100644 --- a/Lora-Map/Properties/AssemblyInfo.cs +++ b/Lora-Map/Properties/AssemblyInfo.cs @@ -34,10 +34,11 @@ using System.Runtime.InteropServices; // Sie können alle Werte angeben oder Standardwerte für die Build- und Revisionsnummern verwenden, // übernehmen, indem Sie "*" eingeben: // [assembly: AssemblyVersion("1.0.*")] -[assembly: AssemblyVersion("1.1.2")] -[assembly: AssemblyFileVersion("1.1.2")] +[assembly: AssemblyVersion("1.1.3")] +[assembly: AssemblyFileVersion("1.1.3")] /* * 1.1.1 Add Debian package config * 1.1.2 #2 Show versions number in Site +* 1.1.3 #1 Click on icon and show details */ diff --git a/Lora-Map/Googlelocation.cs b/Lora-Map/Server.cs similarity index 87% rename from Lora-Map/Googlelocation.cs rename to Lora-Map/Server.cs index 37002b7..863a23e 100644 --- a/Lora-Map/Googlelocation.cs +++ b/Lora-Map/Server.cs @@ -10,13 +10,11 @@ using Fraunhofer.Fit.IoT.LoraMap.Model; using LitJson; namespace Fraunhofer.Fit.IoT.LoraMap { - - - class Googlelocation : Webserver + class Server : Webserver { - private readonly Dictionary locations = new Dictionary(); + private readonly SortedDictionary locations = new SortedDictionary(); - public Googlelocation(ADataBackend backend, Dictionary settings, InIReader requests) : base(backend, settings, requests) { } + public Server(ADataBackend backend, Dictionary settings, InIReader requests) : base(backend, settings, requests) { } protected override void Backend_MessageIncomming(Object sender, BackendEvent e) { try { diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css index 1e5e9aa..3d6adab 100644 --- a/Lora-Map/resources/css/global.css +++ b/Lora-Map/resources/css/global.css @@ -6,76 +6,88 @@ /* Optional: Makes the sample page fill the window. */ html, body { - height: 100%; - margin: 0; - padding: 0; + height: 100%; + margin: 0; + padding: 0; } #menucollumn { - width: 30px; - background-color: white; - position: absolute; - top: 85px; - bottom: 35px; - left: 10px; - z-index: 5000; - border: #707070 2px solid; - border: rgba(0,0,0,0.4) 2px solid; - border-radius: 4px + width: 30px; + background-color: white; + position: absolute; + top: 85px; + bottom: 35px; + left: 10px; + z-index: 5000; + border: #707070 2px solid; + border: rgba(0,0,0,0.4) 2px solid; + border-radius: 4px } - #menucollumn .pos { - display: block; - height: 30px; - width: 30px; - background-image: url("icons/marker.png"); + display: block; + height: 30px; + width: 30px; + background-image: url("icons/marker.png"); } #version { - position: absolute; - bottom: 0; - left: 0; - z-index: 50000; - background-color: white; - border-radius: 5px; - height: 20px; - width: 40px; - border: #707070 2px solid; - border: rgba(0,0,0,0.4) 2px solid; + position: absolute; + bottom: 0; + left: 0; + z-index: 50000; + background-color: white; + border-radius: 5px; + height: 20px; + width: 40px; + border: #707070 2px solid; + border: rgba(0,0,0,0.4) 2px solid; } #pannels { - position: absolute; - top: 85px; - left: 45px; - bottom: 35px; - width: 250px; - z-index: 50000; - background-color: white; - border: #707070 2px solid; - border: rgba(0,0,0,0.4) 2px solid; - border-radius: 4px; - display: none; + position: absolute; + top: 85px; + left: 45px; + bottom: 35px; + width: 250px; + z-index: 50000; + background-color: white; + border: #707070 2px solid; + border: rgba(0,0,0,0.4) 2px solid; + border-radius: 4px; + display: none; } #pannels #pannels_pos { - display: none; + display: none; } #pannels #pannels_pos .item { - margin: 4px; - font-size: 11px; - font-family: Verdana; + margin: 4px; + font-size: 11px; + font-family: Verdana; } #pannels #pannels_pos .item .color { - float: left; - width: 2px; - height: 38px; + float: left; + width: 2px; + height: 38px; } #pannels #pannels_pos .item .icon { - float: left; - height: 38px; - width: 40px; - margin-right: 5px; + float: left; + height: 38px; + width: 40px; + margin-right: 5px; +} +#pannels #pannels_pos .item .icon img { + height: 40px; + width: 40px; + margin-left: 3px; } #pannels #pannels_pos .item .line1 .name { - font-weight: bold; + font-weight: bold; } +#pannels #pannels_pos .item .line1 .akku img { + vertical-align: middle; + margin-left: 5px; +} + +#pannels #pannel_info { + display: none; +} \ No newline at end of file diff --git a/Lora-Map/resources/icons/akku/0-4.png b/Lora-Map/resources/icons/akku/0-4.png new file mode 100644 index 0000000000000000000000000000000000000000..9ba8e93d51a42bf23f76aa04a00c40a8a2e424f6 GIT binary patch literal 231 zcmeAS@N?(olHy`uVBq!ia0vp^!a&T!!3HE7F0?fPDVB6cUq=Rpjs4tz5?O(Kg=CK) zUj~LMHK2+X28LfCl`j|=N(~qoUL`OvSj}Ky5HFasE6@fg!ItFh?gFHN;HUHMdLYGF z;1OBOz`!j8!i<;h*8KqrdV9J!hG?8Wdr48~fB_Hl!QFrUpV#tIe{6JoK^ogF!3hjm z8F51Q-F?M>r{qUn{j;l4%c3c_fJZv_Tf9!E@(sCnP5-WCos)i(!}@{YhP{OH+-JJK PL3Vn&`njxgN@xNA*ZoFL literal 0 HcmV?d00001 diff --git a/Lora-Map/resources/icons/akku/1-4.png b/Lora-Map/resources/icons/akku/1-4.png new file mode 100644 index 0000000000000000000000000000000000000000..a5efa24f73b41eff2b93c28e22958e085378e7c0 GIT binary patch literal 229 zcmeAS@N?(olHy`uVBq!ia0vp^!a&T!!3HE7F0?fPDVB6cUq=Rpjs4tz5?O(Kg=CK) zUj~LMHK2+X28LfCl`j|=N(~qoUL`OvSj}Ky5HFasE6@fg!ItFh?gFHN;HUHMdLYGF z;1OBOz`!j8!i<;h*8KqrdV0DzhG?8WJIRoXL4k+4_}~BYg@TT)P1~Ap8ayrt(hNNR6zUoi<} Nqo=E%%Q~loCICHGMSB1M literal 0 HcmV?d00001 diff --git a/Lora-Map/resources/icons/akku/2-4.png b/Lora-Map/resources/icons/akku/2-4.png new file mode 100644 index 0000000000000000000000000000000000000000..3eae276484a5532ff369f9ec7753456fa477fb96 GIT binary patch literal 234 zcmeAS@N?(olHy`uVBq!ia0vp^!a&T!!3HE7F0?fPDVB6cUq=Rpjs4tz5?O(Kg=CK) zUj~LMHK2+X28LfCl`j|=N(~qoUL`OvSj}Ky5HFasE6@fg!ItFh?gFHN;HUHMdLYGF z;1OBOz`!j8!i<;h*8Kqr`gyuIhG?8WJIRrYL6L{q_}~BYA2*4Wr8?&Fe-raquF2xb zwC3CgZ3*L!m=QI$>Nzna2pbz5N) zi$QzPOtudq-%f?Ct9o`k?{eNhralwS4ZPQ?Zq_Gi{k^(kO4&!z8#V8*v8sQSHC8r{ Q+6}VQ)78&qol`;+0PJ8!bpQYW literal 0 HcmV?d00001 diff --git a/Lora-Map/resources/icons/akku/4-4.png b/Lora-Map/resources/icons/akku/4-4.png new file mode 100644 index 0000000000000000000000000000000000000000..1cebedcc00682a958e200cfb37f41bc091738ab7 GIT binary patch literal 234 zcmeAS@N?(olHy`uVBq!ia0vp^!a&T!!3HE7F0?fPDVB6cUq=Rpjs4tz5?O(Kg=CK) zUj~LMHK2+X28LfCl`j|=N(~qoUL`OvSj}Ky5HFasE6@fg!ItFh?gFHN;HUHMdLYGF z;1OBOz`!j8!i<;h*8Kqr`gyuIhG?8WJIRpmfC3M5?VtbW(;PjPIO(c5+p0RB>q}AL z+@O~_dnd!bR@*$|m5*v~Th`80-muqlzKTxsRJGswXUx7{Ju#*1rtyZK_X5}rJmk&y S+>yQlvewhp&t;ucLK6T)97dS{ literal 0 HcmV?d00001 diff --git a/Lora-Map/resources/map-marker.png b/Lora-Map/resources/icons/marker/map-marker.png similarity index 100% rename from Lora-Map/resources/map-marker.png rename to Lora-Map/resources/icons/marker/map-marker.png diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html index 1ef9998..469e070 100644 --- a/Lora-Map/resources/index.html +++ b/Lora-Map/resources/index.html @@ -15,8 +15,11 @@
vx.x.x
+
+ + \ No newline at end of file diff --git a/Lora-Map/resources/js/marker.js b/Lora-Map/resources/js/marker.js new file mode 100644 index 0000000..66fd1fa --- /dev/null +++ b/Lora-Map/resources/js/marker.js @@ -0,0 +1,99 @@ +var markers = {}; + +setInterval(datarunner, 1000); +function datarunner() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = parsedata; + xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true); + xhttp.send(); +} + +//https://leafletjs.com/reference-1.4.0.html#marker +function parsedata() { + if (this.readyState == 4 && this.status == 200) { + var items = JSON.parse(this.responseText); + for (var key in items) { + if (items.hasOwnProperty(key)) { + var markeritem = items[key]; + if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) { + if (!markers.hasOwnProperty(key)) { + markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']]).addTo(mymap); + } else { + markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]); + } + } + } + } + parseStatus(items); + } +} + +function parseStatus(items) { + document.getElementById("pannels_pos").innerHTML = ""; + for (var name in items) { + if (items.hasOwnProperty(name)) { + var markeritem = items[name]; + var divItem = document.createElement("div"); + divItem.className = "item"; + var spanColor = document.createElement("span"); + spanColor.className = "color"; + if (markeritem["Batterysimple"] == 0) { + spanColor.style.backgroundColor = "red"; + } else if (markeritem["Batterysimple"] == 1 || markeritem["Batterysimple"] == 2) { + spanColor.style.backgroundColor = "yellow"; + } else if (markeritem["Batterysimple"] == 3 || markeritem["Batterysimple"] == 4) { + spanColor.style.backgroundColor = "green"; + } + divItem.appendChild(spanColor); + var spanIcon = document.createElement("span"); + spanIcon.className = "icon"; + var imgIcon = document.createElement("img"); + imgIcon.src = "icons/marker/map-marker.png"; + spanIcon.appendChild(imgIcon); + divItem.appendChild(spanIcon); + var divLine1 = document.createElement("div"); + divLine1.className = "line1"; + var spanName = document.createElement("span"); + spanName.className = "name"; + spanName.innerText = name; + divLine1.appendChild(spanName); + var spanAkku = document.createElement("span"); + spanAkku.className = "akku"; + var imgAkku = document.createElement("img"); + imgAkku.src = "icons/akku/" + markeritem["Batterysimple"] + "-4.png"; + spanAkku.appendChild(imgAkku); + divLine1.appendChild(spanAkku); + divItem.appendChild(divLine1); + var divLine2 = document.createElement("div"); + divLine2.className = "line2"; + if (markeritem["Fix"]) { + divLine2.style.color = "green"; + divLine2.innerText = "GPS-Empfang"; + } else { + divLine2.style.color = "red"; + divLine2.innerText = "kein GPS-Empfang"; + } + divItem.appendChild(divLine2); + var divLine3 = document.createElement("div"); + divLine3.className = "line3"; + divLine3.innerText = "Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]); + divItem.appendChild(divLine3); + document.getElementById("pannels_pos").appendChild(divItem); + } + } +} + +function timeDiffToText(time) { + var diff = Date.now() - Date.parse(time); + diff = Math.round(diff / 1000); + if (diff < 60) { + return diff + " s"; + } + if (diff < (60 * 60)) { + return Math.floor(diff / 60) + " m"; + } + if (diff < (60 * 60 * 24)) { + return Math.floor(diff / (60 * 60)) + " h"; + } + return Math.floor(diff / (60 * 60 * 24)) + " d"; +} \ No newline at end of file diff --git a/Lora-Map/resources/js/menu.js b/Lora-Map/resources/js/menu.js new file mode 100644 index 0000000..d6ae7df --- /dev/null +++ b/Lora-Map/resources/js/menu.js @@ -0,0 +1,15 @@ +var visiblePanel = null; +function showHidePanel(name) { + if (visiblePanel === null) { + document.getElementById("pannels").style.display = "block"; + document.getElementById(name).style.display = "block"; + visiblePanel = name; + } else if (visiblePanel === name) { + document.getElementById("pannels").style.display = "none"; + visiblePanel = null; + } else { + document.getElementById(visiblePanel).style.display = "none"; + document.getElementById(name).style.display = "block"; + visiblePanel = name; + } +} \ No newline at end of file diff --git a/Lora-Map/resources/js/nav.js b/Lora-Map/resources/js/nav.js index dd52428..1d4df22 100644 --- a/Lora-Map/resources/js/nav.js +++ b/Lora-Map/resources/js/nav.js @@ -5,114 +5,4 @@ L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={ maxZoom: 20, id: 'mapbox.streets', accessToken: '{%YOUR_API_KEY%}' -}).addTo(mymap); - -var markers = {}; - -setInterval(datarunner, 1000); -function datarunner() { - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = parsedata; - xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true); - xhttp.send(); -} - -//https://leafletjs.com/reference-1.4.0.html#marker -function parsedata() { - if (this.readyState == 4 && this.status == 200) { - var items = JSON.parse(this.responseText); - for (var key in items) { - if (items.hasOwnProperty(key)) { - var markeritem = items[key]; - if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) { - if (!markers.hasOwnProperty(key)) { - markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']]).addTo(mymap); - } else { - markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]); - } - } - } - } - parseStatus(items); - } -} - -function parseStatus(items) { - document.getElementById("pannels_pos").innerHTML = ""; - for (var name in items) { - if (items.hasOwnProperty(name)) { - var markeritem = items[name]; - var divItem = document.createElement("div"); - divItem.className = "item"; - var spanColor = document.createElement("span"); - spanColor.className = "color"; - if (markeritem["Batterysimple"] == 0) { - spanColor.style.backgroundColor = "red"; - } else if (markeritem["Batterysimple"] == 1) { - spanColor.style.backgroundColor = "yellow"; - } else if (markeritem["Batterysimple"] == 2) { - spanColor.style.backgroundColor = "green"; - } - divItem.appendChild(spanColor); - var spanIcon = document.createElement("span"); - spanIcon.className = "icon"; - divItem.appendChild(spanIcon); - var divLine1 = document.createElement("div"); - divLine1.className = "line1"; - var spanName = document.createElement("span"); - spanName.className = "name"; - spanName.innerText = name; - divLine1.appendChild(spanName); - var spanAkku = document.createElement("span"); - spanAkku.className = "akku"; - divLine1.appendChild(spanAkku); - divItem.appendChild(divLine1); - var divLine2 = document.createElement("div"); - divLine2.className = "line2"; - if (markeritem["Fix"]) { - divLine2.style.color = "green"; - divLine2.innerText = "GPS-Empfang"; - } else { - divLine2.style.color = "red"; - divLine2.innerText = "kein GPS-Empfang"; - } - divItem.appendChild(divLine2); - var divLine3 = document.createElement("div"); - divLine3.className = "line3"; - divLine3.innerText = "Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]); - divItem.appendChild(divLine3); - document.getElementById("pannels_pos").appendChild(divItem); - } - } -} - -function timeDiffToText(time) { - var diff = Date.now() - Date.parse(time); - diff = Math.round(diff / 1000); - if (diff < 60) { - return diff + " s"; - } - if (diff < (60 * 60)) { - return Math.floor(diff / 60) + " m"; - } - if (diff < (60 * 60 * 24)) { - return Math.floor(diff / (60 * 60)) + " h"; - } - return Math.floor(diff / (60 * 60 * 24)) + " d"; -} - -var visiblePanel = null; -function showHidePanel(name) { - if (visiblePanel == null) { - document.getElementById("pannels").style.display = "block"; - document.getElementById(name).style.display = "block"; - visiblePanel = name; - } else if (visiblePanel == name) { - document.getElementById("pannels").style.display = "none"; - visiblePanel = null; - } else { - document.getElementById(visiblePanel).style.display = "none"; - document.getElementById(name).style.display = "block"; - visiblePanel = name; - } -} \ No newline at end of file +}).addTo(mymap); \ No newline at end of file