From de889459bbd9d3a9557fc7184c5fa0632f32a3e4 Mon Sep 17 00:00:00 2001 From: Philip Schell Date: Fri, 14 Jun 2019 13:02:04 +0200 Subject: [PATCH] Display Crowd-Density Data on Map --- Lora-Map/Program.cs | 4 +- Lora-Map/resources/css/global.css | 47 ++++++++++++++---- Lora-Map/resources/index.html | 1 + Lora-Map/resources/js/map.js | 80 ++++++++++++++++--------------- Lora-Map/resources/js/overlays.js | 32 +++++++++++-- 5 files changed, 110 insertions(+), 54 deletions(-) diff --git a/Lora-Map/Program.cs b/Lora-Map/Program.cs index f91ad96..648a4c6 100644 --- a/Lora-Map/Program.cs +++ b/Lora-Map/Program.cs @@ -18,7 +18,9 @@ namespace Fraunhofer.Fit.IoT.LoraMap { return; } InIReader ini = InIReader.GetInstance("settings"); - ADataBackend b = (ADataBackend)ABackend.GetInstance(ini.GetSection("mqtt"), ABackend.BackendType.Data); + Dictionary backenddata = ini.GetSection("mqtt"); + backenddata.Add("topic", "lora/#;camera/#"); + ADataBackend b = (ADataBackend)ABackend.GetInstance(backenddata, ABackend.BackendType.Data); new Server(b, ini.GetSection("webserver"), InIReader.GetInstance("requests")); while(true) { System.Threading.Thread.Sleep(1000); diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css index c615992..a6c775d 100644 --- a/Lora-Map/resources/css/global.css +++ b/Lora-Map/resources/css/global.css @@ -219,12 +219,41 @@ object { #overlays #cameracount .camera .name { font-weight: bold; } - #overlays #cameracount .camera .in::after { - content: url("../icons/general/bullet_add.png"); - } - #overlays #cameracount .camera .out::after { - content: url("../icons/general/bullet_delete.png"); - } - #overlays #cameracount .camera .total::after { - content: url("../icons/general/bullet_star.png"); - } \ No newline at end of file +#overlays #cameracount .camera .in::after { + content: url("../icons/general/bullet_add.png"); +} +#overlays #cameracount .camera .out::after { + content: url("../icons/general/bullet_delete.png"); +} +#overlays #cameracount .camera .total::after { + content: url("../icons/general/bullet_star.png"); +} +#overlays #crwoddensy { + position: absolute; + top: 10px; + right: 90px; + z-index: 50000; + font-size: 11px; + font-family: "Verdana"; + padding: 3px; + max-width: 500px; +} +#overlays #crwoddensy .camera { + background-color: white; + border: rgba(0,0,0,0.3) solid 2px; + border-radius: 5px; + padding: 4px; + float: right; + max-width: 100px; + margin-left: 5px; +} +#overlays #crwoddensy .camera span { + display: block; + text-align: center; +} +#overlays #crwoddensy .camera .name { + font-weight: bold; +} +#overlays #crwoddensy .camera .count::after { + content: url("../icons/general/bullet_star.png"); +} \ No newline at end of file diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html index 9a0a500..b5c2aad 100644 --- a/Lora-Map/resources/index.html +++ b/Lora-Map/resources/index.html @@ -40,6 +40,7 @@
+
diff --git a/Lora-Map/resources/js/map.js b/Lora-Map/resources/js/map.js index 4ab28d3..275dd3e 100644 --- a/Lora-Map/resources/js/map.js +++ b/Lora-Map/resources/js/map.js @@ -56,46 +56,48 @@ function GetGeoLayer() { geogetter.onreadystatechange = function () { if (geogetter.readyState === 4 && geogetter.status === 200) { var geo = JSON.parse(geogetter.responseText); - L.geoJSON(geo, { - style: function (features) { - return { - color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"], - weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"], - opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"], - fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"], - fillOpacity: typeof features.properties["fill-opacity"] === "undefined" ? 1 : features.properties["fill-opacity"] - }; - }, - onEachFeature: function (feature, layer) { - if (feature.geometry.type === "Polygon" || (feature.geometry.type === "Point" && feature.properties.hasOwnProperty("icon"))) { - layer.bindPopup(feature.properties.name); + if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) { + L.geoJSON(geo, { + style: function (features) { + return { + color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"], + weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"], + opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"], + fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"], + fillOpacity: typeof features.properties["fill-opacity"] === "undefined" ? 1 : features.properties["fill-opacity"] + }; + }, + onEachFeature: function (feature, layer) { + if (feature.geometry.type === "Polygon" || (feature.geometry.type === "Point" && feature.properties.hasOwnProperty("icon"))) { + layer.bindPopup(feature.properties.name); + } + }, + pointToLayer: function (geoJsonPoint, latlng) { + if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "snumber" && !geoJsonPoint.properties.hasOwnProperty("icon")) { + var snumbericon = L.marker(latlng, { + icon: new L.DivIcon({ + className: "snumber-icon", + html: geoJsonPoint.properties["name"], + iconSize: [8, 8] + }) + }); + SpecialMarkers.push(snumbericon); + return snumbericon; + } else if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "coord" && !geoJsonPoint.properties.hasOwnProperty("icon")) { + var coordicon = L.marker(latlng, { + icon: new L.DivIcon({ + className: "coord-icon", + html: geoJsonPoint.properties["name"] + }) + }); + SpecialMarkers.push(coordicon); + return coordicon; + } else if (geoJsonPoint.properties.hasOwnProperty("icon")) { + return L.marker(latlng, { icon: L.icon({ iconUrl: "css/icons/cctv.png", iconSize: [32, 32] }) }); + } } - }, - pointToLayer: function (geoJsonPoint, latlng) { - if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "snumber" && !geoJsonPoint.properties.hasOwnProperty("icon")) { - var snumbericon = L.marker(latlng, { - icon: new L.DivIcon({ - className: "snumber-icon", - html: geoJsonPoint.properties["name"], - iconSize: [8, 8] - }) - }); - SpecialMarkers.push(snumbericon); - return snumbericon; - } else if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "coord" && !geoJsonPoint.properties.hasOwnProperty("icon")) { - var coordicon = L.marker(latlng, { - icon: new L.DivIcon({ - className: "coord-icon", - html: geoJsonPoint.properties["name"] - }) - }); - SpecialMarkers.push(coordicon); - return coordicon; - } else if (geoJsonPoint.properties.hasOwnProperty("icon")) { - return L.marker(latlng, { icon: L.icon({ iconUrl: "css/icons/cctv.png", iconSize: [32, 32] }) }); - } - } - }).addTo(mymap); + }).addTo(mymap); + } } }; geogetter.open("GET", "http://{%REQUEST_URL_HOST%}/getgeo", true); diff --git a/Lora-Map/resources/js/overlays.js b/Lora-Map/resources/js/overlays.js index 819fc7e..9aed95c 100644 --- a/Lora-Map/resources/js/overlays.js +++ b/Lora-Map/resources/js/overlays.js @@ -1,12 +1,16 @@ setInterval(overlayrunner, 1000); function overlayrunner() { - var cam = new XMLHttpRequest(); - cam.onreadystatechange = parseAjaxCam; - cam.open("GET", "/cameracount", true); - cam.send(); + var ccount = new XMLHttpRequest(); + ccount.onreadystatechange = parseAjaxCount; + ccount.open("GET", "/cameracount", true); + ccount.send(); + var cdensity = new XMLHttpRequest(); + cdensity.onreadystatechange = parseAjaxDensity; + cdensity.open("GET", "/crowdcount", true); + cdensity.send(); } -function parseAjaxCam() { +function parseAjaxCount() { if (this.readyState === 4 && this.status === 200) { var cameracounts = JSON.parse(this.responseText); var camerastext = ""; @@ -24,4 +28,22 @@ function parseAjaxCam() { } document.getElementById("cameracount").innerHTML = camerastext; } +} + +function parseAjaxDensity() { + if (this.readyState === 4 && this.status === 200) { + var cameradensy = JSON.parse(this.responseText); + var densystext = ""; + for (var densyid in cameradensy) { + if (cameradensy.hasOwnProperty(densyid)) { + var densy = cameradensy[densyid]; + var densytext = "
"; + densytext += "" + densyid + ""; + densytext += "" + densy["DensityCount"] + ""; + densytext += "
"; + densystext += densytext; + } + } + document.getElementById("crwoddensy").innerHTML = densystext; + } } \ No newline at end of file