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");
-  }
-  #overlays #cameracount .camera .out::after {
+}
+#overlays #cameracount .camera .out::after {
   content: url("../icons/general/bullet_delete.png");
-  }
-  #overlays #cameracount .camera .total::after {
+}
+#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");
+}

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,6 +56,7 @@ function GetGeoLayer() {
   geogetter.onreadystatechange = function () {
     if (geogetter.readyState === 4 && geogetter.status === 200) {
       var geo = JSON.parse(geogetter.responseText);
+      if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) {
         L.geoJSON(geo, {
           style: function (features) {
             return {
@@ -97,6 +98,7 @@ function GetGeoLayer() {
           }
         }).addTo(mymap);
       }
+    }
   };
   geogetter.open("GET", "http://{%REQUEST_URL_HOST%}/getgeo", true);
   geogetter.send();

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 = "";
@@ -25,3 +29,21 @@ 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;
+  }
+}