From c25b6f7ebb51de94cd6201f634a1bb4f39c3b9f1 Mon Sep 17 00:00:00 2001 From: Philip Schell Date: Wed, 27 Mar 2019 15:45:11 +0100 Subject: [PATCH] add new Icons not redraw the icons in the devices list --- Lora-Map/Lora-Map.csproj | 12 +- Lora-Map/Server.cs | 32 ++--- Lora-Map/names.json | 4 +- Lora-Map/resources/css/global.css | 28 ++++- .../css/icons/admin-with-cogwheels.png | Bin 0 -> 926 bytes Lora-Map/resources/css/icons/information.png | Bin 0 -> 1101 bytes Lora-Map/resources/css/icons/marker.png | Bin 1486 -> 0 bytes Lora-Map/resources/css/icons/placeholder.png | Bin 0 -> 948 bytes Lora-Map/resources/index.html | 37 +++--- Lora-Map/resources/js/menu.js | 114 ++++++++---------- 10 files changed, 120 insertions(+), 107 deletions(-) create mode 100644 Lora-Map/resources/css/icons/admin-with-cogwheels.png create mode 100644 Lora-Map/resources/css/icons/information.png delete mode 100644 Lora-Map/resources/css/icons/marker.png create mode 100644 Lora-Map/resources/css/icons/placeholder.png diff --git a/Lora-Map/Lora-Map.csproj b/Lora-Map/Lora-Map.csproj index c6dac2c..f0baca8 100644 --- a/Lora-Map/Lora-Map.csproj +++ b/Lora-Map/Lora-Map.csproj @@ -70,15 +70,18 @@ PreserveNewest - - - PreserveNewest - + + PreserveNewest + + + PreserveNewest + + PreserveNewest @@ -120,7 +123,6 @@ PreserveNewest - PreserveNewest diff --git a/Lora-Map/Server.cs b/Lora-Map/Server.cs index 4901f79..cbf1d31 100644 --- a/Lora-Map/Server.cs +++ b/Lora-Map/Server.cs @@ -50,30 +50,30 @@ namespace Fraunhofer.Fit.IoT.LoraMap { } protected override void SendResponse(HttpListenerContext cont) { - if (cont.Request.Url.PathAndQuery.StartsWith("/loc")) { - try { + try { + if (cont.Request.Url.PathAndQuery.StartsWith("/loc")) { Dictionary ret = new Dictionary(); Byte[] buf = Encoding.UTF8.GetBytes(JsonMapper.ToJson(this.locations)); cont.Response.ContentLength64 = buf.Length; cont.Response.OutputStream.Write(buf, 0, buf.Length); Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery); return; - } catch (Exception e) { - Helper.WriteError("500 - " + e.Message); - cont.Response.StatusCode = 500; + } + if (cont.Request.Url.PathAndQuery.StartsWith("/icons/marker/Marker.svg") && cont.Request.Url.PathAndQuery.Contains("?")) { + String hash = cont.Request.Url.PathAndQuery.Substring(cont.Request.Url.PathAndQuery.IndexOf('?') + 1); + if (!this.markertable.ContainsKey(hash)) { + this.markertable.Add(hash, new Marker(hash)); + } + cont.Response.ContentType = "image/svg+xml"; + Byte[] buf = Encoding.UTF8.GetBytes(this.markertable[hash].ToString()); + cont.Response.ContentLength64 = buf.Length; + cont.Response.OutputStream.Write(buf, 0, buf.Length); + Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery); return; } - } - if(cont.Request.Url.PathAndQuery.StartsWith("/icons/marker/Marker.svg") && cont.Request.Url.PathAndQuery.Contains("?")) { - String hash = cont.Request.Url.PathAndQuery.Substring(cont.Request.Url.PathAndQuery.IndexOf('?')+1); - if(!this.markertable.ContainsKey(hash)) { - this.markertable.Add(hash, new Marker(hash)); - } - cont.Response.ContentType = "image/svg+xml"; - Byte[] buf = Encoding.UTF8.GetBytes(this.markertable[hash].ToString()); - cont.Response.ContentLength64 = buf.Length; - cont.Response.OutputStream.Write(buf, 0, buf.Length); - Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery); + } catch (Exception e) { + Helper.WriteError("500 - " + e.Message); + cont.Response.StatusCode = 500; return; } base.SendResponse(cont); diff --git a/Lora-Map/names.json b/Lora-Map/names.json index 65ce723..5b506ee 100644 --- a/Lora-Map/names.json +++ b/Lora-Map/names.json @@ -1,5 +1,5 @@ { - "A": { + "R": { "name": "26/91", "marker.svg": { "person": { @@ -10,7 +10,7 @@ } } }, - "C": { + "L": { "name": "27/92", "marker.svg": { "person": { diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css index 502bdd4..2698765 100644 --- a/Lora-Map/resources/css/global.css +++ b/Lora-Map/resources/css/global.css @@ -11,8 +11,12 @@ html, body { padding: 0; } +object { + pointer-events: none; +} + #menucollumn { - width: 30px; + width: 32px; background-color: white; position: absolute; top: 85px; @@ -23,12 +27,24 @@ html, body { border: rgba(0,0,0,0.4) 2px solid; border-radius: 4px } -#menucollumn .pos { +#menucollumn span { display: block; - height: 30px; - width: 30px; - background-image: url("icons/marker.png"); + height: 32px; + width: 32px; + margin-bottom: 5px; } +#menucollumn .pos { + background-image: url("icons/placeholder.png"); +} +#menucollumn .admin { + background-image: url("icons/admin-with-cogwheels.png"); +} +#menucollumn .info { + background-image: url("icons/information.png"); +} +/*
Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY
*/ +/*
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
*/ +/**
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
*/ #version { position: absolute; @@ -46,7 +62,7 @@ html, body { #pannels { position: absolute; top: 85px; - left: 45px; + left: 47px; bottom: 35px; width: 250px; z-index: 50000; diff --git a/Lora-Map/resources/css/icons/admin-with-cogwheels.png b/Lora-Map/resources/css/icons/admin-with-cogwheels.png new file mode 100644 index 0000000000000000000000000000000000000000..629ebfbdec819d419bb3ce757a9688bf85c28364 GIT binary patch literal 926 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4UEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-GzZ+Rj;xUkjGiz z5n0T@z;^_M8K-LVNdpDhOFVsD*&j1Y^J{9?OL>Fqq_$zBWgm4%b#M ziH_jJPQ%GTLKa>oE00c{C4KeGtJL#v@4UWPo&I+ERanhQS+oMIY-lYYh?{h5jyz z^!#z!Z_BNe1Ke^eV-NBq#OxM`JJen0ce7sh%D)7M*|%Rdms-De-jifi%>QuCv#3y! z9}@&S_>DZ)y8O%Pku=969zR_n>gt zIS=UraoY{vTE8>ib60KB_4kqS(i?Xc9p+jb$2Pr4JL2)mRX!(;FHB)r9Hx@5w7rQ_ z_M675t!MX?RIi>pJ5w?H{*x2=lIHKaCNWpdVOQTXyI%Qqv6MyEmyg z1U#?4aYrS62R&riw!-_w` z9@nOSu6eirU6ro(KmJOCMYq2=xh)1JMb#45h?11Vl2ohYqEsNoU}RuuscT@YYh)f` zXkukzXk}uoZD43+U=U~|?1iEsH$NpatrE8eh5XgufEpx0HU#IVm6RtIr81P4m+NKb eWfvzW7NqLs7p2dBXCnnv#Ng@b=d#Wzp$PyYJ&Qa5 literal 0 HcmV?d00001 diff --git a/Lora-Map/resources/css/icons/information.png b/Lora-Map/resources/css/icons/information.png new file mode 100644 index 0000000000000000000000000000000000000000..7a97beb69af7dbe087941cf7de32e0b03dbac718 GIT binary patch literal 1101 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4UEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-GzZ+Rj;xUkjGiz z5m^kh={g8AI%&+V01C2~c>21sKW3KZ*Wta8VEKlDfmzzq#WBR=_|&VX^QWYWuzk4y z-7s}ZH22#nM>1cfNi_!S5?ISPwLtrd+r(W)YC?gH|6Av_WteMla*M|aO_;F7m2s{b zOIXH~-lgI~O}Q)II^}cdDK&L_3Br`(~Az7M)rTTj+phEf7#QRPxIQ8!lY#ikF+hi z{z|sg^W2p8In}HFWIq11?)A2P8gH!TOHBB-vDEe2*S=j^`FCC(?b@&7Rm(?%aN*V@a=m@UDu`-z{4_di!Qf zKYHfp-ICVe2bFJkJiOnfHmm6NoEdX_PD*dw`|5RdO6uE{rxsmZv4?#jFH>@=m44R_ zSD!P}xCG~4$?#cVrZa&z#5tfuuld3h59iA1>lsXil!6x~R&r){SLLg6tev_cL8HXm z?+)MA|Jn{~%~tE~kbE^&^hW44_VZ57u}qP*3%7Vy{@$YVIdzrdx}$NG!fZ~-db1~9 zSz39NaaO74tiqcW8b#M^ODq)vABoLu?W(_#uwQRtV0>rT!$!5}y$OqdyPegyWOLG& zEW20B?S1X*H|xaq_I-tQhF{F?hf8K2*}HVJ%j~MVtrNekU3+wk6_@kZ@a5B{8m~Kg z@=(Cr;s>3Dp%04!!kiXQ37h>yU}pR&+mPiawe3n`X1nKEynd84&)?YY#S-&e5fQP| zxyH{n-jd2KySdsk<&vrGFY)H-W~a=K?^(QZ!>wmN6%A)!9pzq~dxiD+pPe9_7v^?&(1B*zVG0rIXS?b zqgvt`QIe8al4_M)lnSI6j0_Adbq$Pljm$#~O{`2ztPG8{4GgUe4F3PVmW84rH$Npa ztrE9}zGZpWfEpx0HU#IVm6RtIr81P4m+NKbWfvzW7NqLs7p2dBXCnnv#Ng@b=d#Wz Gp$Pz03*g`Y literal 0 HcmV?d00001 diff --git a/Lora-Map/resources/css/icons/marker.png b/Lora-Map/resources/css/icons/marker.png deleted file mode 100644 index 4135182ed670d715e18bc2bd7872ea817aee5fbc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1486 zcmV;<1u^=GP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY4#NNd4#NS*Z>VGd00lBhL_t(Y$DNkXZ`))T z$3OlN$Bmo1Ym=^{j4h=DCQX}GAvo-UKxn5)^ulEq5Qpxv{{V4BToM1r0Ks91frPX} z)rqapPP9dBU}#NCY2qYy>iBhR4t9#;y4l1lSxWr+eZJ50eV+Guz7o&3a`W@^=PQ-U zhl--S8w9~zx7!_a97nP&t6Q(vZOgKD+U@qEUaz+SY{k!0pbmIxgX%K?-rg_02Bvg0^SU>#Tm9sv)4O`r_~eZ$Hy(8a~Y zg>&c5-OcCo^SE~ z;joC6+qZ8oj*pLj?)$##I1aU1jqUAis?{o%Wet2RNfIL?BZOg?d_4|a0j7W#;{QJa zJ3ucBSh{uV)_bQ;o%+J}eYw$Su)e;|^71mBPAAjLFbq%H%g3MvU?hI`J+OO>>g(69 z&r~XvZ-O8gZ8RFJtgLYV{(XcH{LiJt%udD*>;tuQ#JNhP@>v*$W!tvd*w|ocY3W#i zK(C)GK#Gk^L%>yF6u3%M={p0!*REZg({=rQ*LB(5-DP=sIc=Z^WQFd>#!svnKqe}* zH-QZ~xq0TynGb{znr+)ut5qDwc^=RtxDSxa<%Usy7Py-9uprCwJFe?uSr*l5HBE0C zQ~*uDiucEXaaC1EP1BTmy&jE5Bl&$l$WdS}32X*I@N%cq!Llss^?LG9kOJ)xb*7(* znnOr*Z(lbI<4UPiDhMIc!2KFffzt!P-EOz&c^E|E@jMU1Fw*(ydr}0>6SYDu@r`=(=FLxv#p1LOf?BPX z1|F!BBp*(z)moKh`LZm_Syc7gs|n1FMd*!otGG6B833IgZ2L-X2?9Tj}$? z#P3ehdP@lL*tTs)Q4~W}RSd&OHxWfuRijueUeYve!ZgjdXJ=>Sxw*M{!!XQFr^DXf z9;>UXS9*`(2Eu(r0wlP6Eoz<%oY-vd+w)i4YnhGF=c=Xsjvd1#tOKA%UDBs5J!*L4&{ zAqWCo*F};f+U+)uUXqrY41bCizG<#jw zMNt&`LuG$|pNu6^PV50|=?eOXNGGij$(I6f6rJz;2qEZpyR_SFWLZWCaZHhrh#4HcOrrIDsYK}F7ti=NL%$C8nS|n-2MeD1Djc5&x;RD12cd@YRHFSnATV6 zl{L-kz)!%pz*ZKp4;%tI@DkDR&M{nJq(QwD#UAh&_zGA8?33iJ2Xy0Tr-`~%j^|q< z1uB3laF|dTY0w8Ta|74lUo6jLDK21_SO5S307*qoM6N<$f)}i~N&o-= diff --git a/Lora-Map/resources/css/icons/placeholder.png b/Lora-Map/resources/css/icons/placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..687f3e5a3a98eb417014837163a3ba2fa4906d96 GIT binary patch literal 948 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dy%*9TgAsieWw;%dH0CG7CJR*x3 z7}ytsFr$I~rlUYX$r9IylHmNblJdl&REF~Ma=pyF?Be9af>gcyqV(DCY@`?%81n*r zLR|lYK*OrgRSgaMXQs{kf5v!K!>UQS+vYdS?<-vO_*m%7hRu^2mb^XTIjv&p%&Nt+ z%a+WnTsE_O)%1$xGb@)*EnhyPZ28oR6*DT9y*=wS4a8mX;hg96a-hh{Y2_>5o%Nnp zw(|XXujxQ8NEuMX3&{9z&KoE@y<)}m@|82nR?aA2F|8cPUh(dn*W0t+)62kIkSqj& z6oA+jDwJjUCBzsuu&fH+LoiNuXnZB+%+vRZD@4`}?ARB+y@v4}}BG0kVP41CmdVghIG8 z%9lSo8Z^CpIZzO$0OT;B39nB20~v2l`vOTg0(u|L2CCnEY5Npl^i-4t`2{mDF|)9; zvaxe;a&qzU2};Un=o*?^IlFmycn5_YZ$+H(PUc7q!`pvud zA3uHm^5xt2A3uNn{`2?Wt>RCSz}PqOba4!kkgPq(8ht20g6+a}r#J8Pa*n=x=eJ?^ z?yrCU?Y(`sVfV|!mKUCyf0K{lGoOCsar{i@Eo+}Vkl*^9=XcJh18ckZ))t)HvGj1c z+#I$So8GqSbx-@g@}P0lsRgSSZko=!q$D`AdEI0$MV?N_Sz-&K7r)dLTUIv9ZqJ3B zOJANfuI%;_GD!|OmFQu+@Fn9eIW6;}4$m~EDwODMnY*s`vJqeGHU7I=4=%V*pKD?9 z{#n``wdvcsqME zYediAa;D=FL-eQC2(=YwI-e>@ip{^V&n#odF0tACUWYceyxBit&h!b7S!S$KO`0@k zT1S>d64Rnco0@4I4m=G(7w4|;UMF&3lgmaP5zi3U8B - - Dashboard - - + + Dashboard + + -
- -
vx.x.x
-
-
-
-
- - - - +
+ +
vx.x.x
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Lora-Map/resources/js/menu.js b/Lora-Map/resources/js/menu.js index 45e7d01..e886ce3 100644 --- a/Lora-Map/resources/js/menu.js +++ b/Lora-Map/resources/js/menu.js @@ -1,12 +1,14 @@ var visiblePanel = null; function showHidePanel(name) { - if (visiblePanel === null) { + if (visiblePanel === null && name !== null) { document.getElementById("pannels").style.display = "block"; document.getElementById(name).style.display = "block"; visiblePanel = name; } else if (visiblePanel === name && name !== "pannels_info" || name === null) { document.getElementById("pannels").style.display = "none"; - document.getElementById(visiblePanel).style.display = "none"; + if (visiblePanel !== null) { + document.getElementById(visiblePanel).style.display = "none"; + } visiblePanel = null; } else { document.getElementById(visiblePanel).style.display = "none"; @@ -48,71 +50,61 @@ function updateDeviceStatus() { } } +var overviewStatus = new Array(); + function updateStatus() { - document.getElementById("pannels_pos").innerHTML = ""; - for (var name in serverLocation) { - if (serverLocation.hasOwnProperty(name)) { - var markeritem = serverLocation[name]; - var divItem = document.createElement("div"); - divItem.className = "item"; - divItem.onclick = showMarkerInfoMenu; - divItem.setAttribute("rel", name); - 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"; + for (var id in serverLocation) { + if (serverLocation.hasOwnProperty(id)) { + var markeritem = serverLocation[id]; + if (typeof (overviewStatus[id]) == "undefined") { + overviewStatus[id] = createOverviewElement(markeritem, id); + document.getElementById("pannels_pos").appendChild(overviewStatus[id]); } - divItem.appendChild(spanColor); - var spanIcon = document.createElement("span"); - spanIcon.className = "icon"; - if (markeritem['Icon'] !== null) { - var objectIcon = document.createElement("object"); - objectIcon.data = markeritem['Icon'] + "&marker-bg=hidden"; - objectIcon.type = "image/svg+xml"; - // - spanIcon.appendChild(objectIcon); - } else { - 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 = markeritem["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); + updateOverviewElement(markeritem, id); } } } +function updateOverviewElement(markeritem, id) { + if (markeritem["Batterysimple"] === 0) { + document.getElementById("overview-color-id-" + id).style.backgroundColor = "red"; + } else if (markeritem["Batterysimple"] === 1 || markeritem["Batterysimple"] === 2) { + document.getElementById("overview-color-id-" + id).style.backgroundColor = "yellow"; + } else if (markeritem["Batterysimple"] === 3 || markeritem["Batterysimple"] === 4) { + document.getElementById("overview-color-id-" + id).style.backgroundColor = "green"; + } + document.getElementById("overview-name-id-" + id).innerText = markeritem["Name"]; + document.getElementById("overview-akkuimg-id-" + id).src = "icons/akku/" + markeritem["Batterysimple"] + "-4.png"; + if (markeritem["Fix"]) { + document.getElementById("overview-gps-id-" + id).innerText = "GPS-Empfang"; + document.getElementById("overview-gps-id-" + id).style.color = "green"; + } else { + document.getElementById("overview-gps-id-" + id).innerText = "kein GPS-Empfang"; + document.getElementById("overview-gps-id-" + id).style.color = "red"; + } + document.getElementById("overview-update-id-" + id).innerText = "Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]); +} + +function createOverviewElement(markeritem, id) { + var divItem = document.createElement("div"); + divItem.className = "item"; + divItem.onclick = showMarkerInfoMenu; + divItem.setAttribute("rel", id); + divItem.innerHTML = ""; + if (markeritem['Icon'] !== null) { + divItem.innerHTML += ""; + } else { + divItem.innerHTML += ""; + } + divItem.innerHTML += "
" + + "" + + "" + + "
"; + divItem.innerHTML += "
kein GPS-Empfang
"; + divItem.innerHTML += "
Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]) + "
"; + return divItem; +} + function timeDiffToText(time) { var diff = Date.now() - Date.parse(time); diff = Math.round(diff / 1000);