Display Crowd-Density Data on Map

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<String, String> 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);

Lora-Map/resources/css/global.css

@@ -219,12 +219,41 @@ object {
 #overlays #cameracount .camera .name {
   font-weight: bold;
 }
-  #overlays #cameracount .camera .in::after {
+#overlays #cameracount .camera .in::after {
-    content: url("../icons/general/bullet_add.png");
+  content: url("../icons/general/bullet_add.png");
-  }
+}
-  #overlays #cameracount .camera .out::after {
+#overlays #cameracount .camera .out::after {
-    content: url("../icons/general/bullet_delete.png");
+  content: url("../icons/general/bullet_delete.png");
-  }
+}
-  #overlays #cameracount .camera .total::after {
+#overlays #cameracount .camera .total::after {
-    content: url("../icons/general/bullet_star.png");
+  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");
+}

Lora-Map/resources/index.html

@@ -40,6 +40,7 @@
   </div>
   <div id="overlays">
     <div id="cameracount"></div>
+    <div id="crwoddensy"></div>
   </div>
   <script type="text/javascript" src="js/leaflet/leaflet.js"></script>
   <script type="text/javascript" src="js/functions.js"></script>

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, {
+      if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) {
-        style: function (features) {
+        L.geoJSON(geo, {
-          return {
+          style: function (features) {
-            color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"],
+            return {
-            weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"],
+              color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"],
-            opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"],
+              weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"],
-            fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"],
+              opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"],
-            fillOpacity: typeof features.properties["fill-opacity"] === "undefined" ? 1 : features.properties["fill-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"))) {
+          onEachFeature: function (feature, layer) {
-            layer.bindPopup(feature.properties.name);
+            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] }) });
+            }
           }
-        },
+        }).addTo(mymap);
-        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);
     }
   };
   geogetter.open("GET", "http://{%REQUEST_URL_HOST%}/getgeo", true);

Lora-Map/resources/js/overlays.js

@@ -1,12 +1,16 @@
 setInterval(overlayrunner, 1000);
 function overlayrunner() {
-  var cam = new XMLHttpRequest();
+  var ccount = new XMLHttpRequest();
-  cam.onreadystatechange = parseAjaxCam;
+  ccount.onreadystatechange = parseAjaxCount;
-  cam.open("GET", "/cameracount", true);
+  ccount.open("GET", "/cameracount", true);
-  cam.send();
+  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 = "<div class='camera'>";
+        densytext += "<span class='name'>" + densyid + "</span>";
+        densytext += "<span class='count'>" + densy["DensityCount"] + "</span>";
+        densytext += "</div>";
+        densystext += densytext;
+      }
+    }
+    document.getElementById("crwoddensy").innerHTML = densystext;
+  }
 }