add new Icons
not redraw the icons in the devices list
This commit is contained in:
parent
b53f95efec
commit
c25b6f7ebb
@ -70,15 +70,18 @@
|
||||
<None Include="resources\icons\marker\din1451m.woff">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</None>
|
||||
<None Include="resources\js\leaflet\leaflet-src.esm.js.map" />
|
||||
<None Include="resources\js\leaflet\leaflet-src.js.map" />
|
||||
<None Include="resources\js\leaflet\leaflet.js.map" />
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<Content Include="resources\css\global.css">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\css\icons\marker.png">
|
||||
<Content Include="resources\css\icons\admin-with-cogwheels.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\css\icons\information.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\css\icons\placeholder.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\icons\akku\0-4.png">
|
||||
@ -120,7 +123,6 @@
|
||||
<Content Include="resources\js\leaflet\images\marker-shadow.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\js\leaflet\leaflet-src.esm.js" />
|
||||
<Content Include="resources\js\leaflet\leaflet-src.js" />
|
||||
<Content Include="resources\js\leaflet\leaflet.css">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
|
||||
@ -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<String, Object> ret = new Dictionary<String, Object>();
|
||||
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);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"A": {
|
||||
"R": {
|
||||
"name": "26/91",
|
||||
"marker.svg": {
|
||||
"person": {
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"C": {
|
||||
"L": {
|
||||
"name": "27/92",
|
||||
"marker.svg": {
|
||||
"person": {
|
||||
|
||||
@ -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");
|
||||
}
|
||||
/*<div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>*/
|
||||
/*<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>*/
|
||||
/**<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>*/
|
||||
|
||||
#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;
|
||||
|
||||
BIN
Lora-Map/resources/css/icons/admin-with-cogwheels.png
Normal file
BIN
Lora-Map/resources/css/icons/admin-with-cogwheels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 926 B |
BIN
Lora-Map/resources/css/icons/information.png
Normal file
BIN
Lora-Map/resources/css/icons/information.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
Lora-Map/resources/css/icons/placeholder.png
Normal file
BIN
Lora-Map/resources/css/icons/placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
@ -2,24 +2,27 @@
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Dashboard</title>
|
||||
<link rel="stylesheet" type="text/css" href="js/leaflet/leaflet.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/global.css" />
|
||||
<meta charset="utf-8" />
|
||||
<title>Dashboard</title>
|
||||
<link rel="stylesheet" type="text/css" href="js/leaflet/leaflet.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/global.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="bigmap"></div>
|
||||
<div id="menucollumn">
|
||||
<span class="pos" onclick="showHidePanel('pannels_pos');"></span>
|
||||
</div>
|
||||
<div id="version">vx.x.x</div>
|
||||
<div id="pannels">
|
||||
<div id="pannels_pos"></div>
|
||||
<div id="pannels_info"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/leaflet/leaflet.js"></script>
|
||||
<script type="text/javascript" src="js/nav.js"></script>
|
||||
<script type="text/javascript" src="js/menu.js"></script>
|
||||
<script type="text/javascript" src="js/marker.js"></script>
|
||||
<div id="bigmap"></div>
|
||||
<div id="menucollumn">
|
||||
<span class="pos" onclick="showHidePanel('pannels_pos');"></span>
|
||||
<span class="admin" onclick="showHidePanel('pannels_admin');"></span>
|
||||
<span class="info" onclick="showHidePanel('pannels_info');"></span>
|
||||
</div>
|
||||
<div id="version">vx.x.x</div>
|
||||
<div id="pannels">
|
||||
<div id="pannels_pos"></div>
|
||||
<div id="pannels_info"></div>
|
||||
<div id="pannels_admin"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/leaflet/leaflet.js"></script>
|
||||
<script type="text/javascript" src="js/nav.js"></script>
|
||||
<script type="text/javascript" src="js/menu.js"></script>
|
||||
<script type="text/javascript" src="js/marker.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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";
|
||||
//<object data="'+markeritem['Icon']+'" type="image/svg+xml" style="height:80px; width:56px;"></object>
|
||||
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 = "<span class=\"color\" id=\"overview-color-id-" + id + "\"></span>";
|
||||
if (markeritem['Icon'] !== null) {
|
||||
divItem.innerHTML += "<span class=\"icon\"><object data=\"" + markeritem['Icon'] + "&marker-bg=hidden" + "\" type=\"image/svg+xml\"></object></span>";
|
||||
} else {
|
||||
divItem.innerHTML += "<span class=\"icon\"><img src=\"icons/marker/map-marker.png\"></span>";
|
||||
}
|
||||
divItem.innerHTML += "<div class=\"line1\">" +
|
||||
"<span class=\"name\" id=\"overview-name-id-" + id + "\"></span>" +
|
||||
"<span class=\"akku\"><img id=\"overview-akkuimg-id-" + id + "\" src=\"icons/akku/" + markeritem["Batterysimple"] + "-4.png\"></span>" +
|
||||
"</div>";
|
||||
divItem.innerHTML += "<div class=\"line2\" style=\"color: red;\" id=\"overview-gps-id-" + id + "\">kein GPS-Empfang</div>";
|
||||
divItem.innerHTML += "<div class=\"line3\" id=\"overview-update-id-" + id + "\">Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]) + "</div>";
|
||||
return divItem;
|
||||
}
|
||||
|
||||
function timeDiffToText(time) {
|
||||
var diff = Date.now() - Date.parse(time);
|
||||
diff = Math.round(diff / 1000);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user