Add support to display camera values that counts people. needs to be on a mqtt toipc camera/counting

Lora-Map/Lora-Map.csproj

@@ -67,6 +67,7 @@
     <Compile Include="Helper\GeoFence.cs" />
     <Compile Include="Model\Admin\AdminModel.cs" />
     <Compile Include="Model\Admin\AdminSession.cs" />
+    <Compile Include="Model\Camera.cs" />
     <Compile Include="Model\Marker.cs" />
     <Compile Include="Model\AlarmItem.cs" />
     <Compile Include="Model\UTMData.cs" />
@@ -139,6 +140,15 @@
     <Content Include="resources\icons\general\add.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\icons\general\bullet_add.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\general\bullet_delete.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\general\bullet_star.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\icons\general\edit.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
@@ -235,5 +245,10 @@
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="resources\js\overlays.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
 </Project>

Lora-Map/Model/Camera.cs

@@ -0,0 +1,41 @@
+using LitJson;
+using System;
+using System.Globalization;
+
+namespace Fraunhofer.Fit.IoT.LoraMap.Model
+{
+  class Camera
+  {
+    public DateTime Lastcameradata { get; private set; }
+    public String Name { get; private set; }
+    public Int32 Total { get; private set; }
+    public Int32 Incoming { get; private set; }
+    public Int32 Outgoing { get; private set; }
+
+    public Camera(JsonData json) => this.Update(json);
+
+    internal static String GetId(JsonData json) => (String)json["camera_id"];
+
+    internal static Boolean CheckJson(JsonData json) => json.ContainsKey("camera_id") && json["camera_id"].IsString
+      && json.ContainsKey("count") && json["count"].IsString
+      && json.ContainsKey("name") && json["name"].IsString
+      && json.ContainsKey("timestamp") && json["timestamp"].IsString;
+
+    internal void Update(JsonData json)
+    {
+      if(Int32.TryParse((String)json["count"], out Int32 count)) {
+        if((String)json["name"] == "total") {
+          this.Total = count;
+        } else if((String)json["name"] == "incoming") {
+          this.Incoming = count;
+        } else if((String)json["name"] == "outgoing") {
+          this.Outgoing = count * -1;
+        }
+      }
+      if (DateTime.TryParse((String)json["timestamp"], DateTimeFormatInfo.InvariantInfo, DateTimeStyles.AssumeUniversal, out DateTime updatetime)) {
+        this.Lastcameradata = updatetime.ToUniversalTime();
+      }
+      this.Name = (String)json["name"];
+    }
+  }
+}

Lora-Map/Model/PositionItem.cs

@@ -55,7 +55,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
       && json["Gps"].ContainsKey("Longitude") && json["Gps"]["Longitude"].IsDouble
       && json["Gps"].ContainsKey("LastLatitude") && json["Gps"]["LastLatitude"].IsDouble
       && json["Gps"].ContainsKey("LastLongitude") && json["Gps"]["LastLongitude"].IsDouble
-      && json["Gps"].ContainsKey("LastLongitude") && json["Gps"]["LastGPSPos"].IsString
+      && json["Gps"].ContainsKey("LastGPSPos") && json["Gps"]["LastGPSPos"].IsString
       && json["Gps"].ContainsKey("Hdop") && json["Gps"]["Hdop"].IsDouble
       && json["Gps"].ContainsKey("Fix") && json["Gps"]["Fix"].IsBoolean
       && json["Gps"].ContainsKey("Height") && json["Gps"]["Height"].IsDouble

Lora-Map/Server.cs

@@ -15,6 +15,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
   class Server : Webserver {
     private readonly SortedDictionary<String, PositionItem> positions = new SortedDictionary<String, PositionItem>();
     private readonly SortedDictionary<String, AlarmItem> alarms = new SortedDictionary<String, AlarmItem>();
+    private readonly SortedDictionary<String, Camera> cameras = new SortedDictionary<String, Camera>();
     private JsonData marker;
     private readonly Dictionary<String, Marker> markertable = new Dictionary<String, Marker>();
     private readonly AdminModel admin;
@@ -72,6 +73,13 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
             this.positions.Add(name, new PositionItem(d, this.marker));
           }
           Console.WriteLine("PANIC erhalten!");
+        } else if(Camera.CheckJson(d) && ((String)e.From).Contains("camera/count")) {
+          String cameraid = Camera.GetId(d);
+          if(this.cameras.ContainsKey(cameraid)) {
+            this.cameras[cameraid].Update(d);
+          } else {
+            this.cameras.Add(cameraid, new Camera(d));
+          }
         }
       } catch(Exception ex) {
         Helper.WriteError(ex.Message);
@@ -109,6 +117,8 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
           cont.Response.OutputStream.Write(buf, 0, buf.Length);
           Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery);
           return true;
+        } else if(cont.Request.Url.PathAndQuery.StartsWith("/cameracount")) {
+          return SendJsonResponse(this.cameras, cont);
         }
       } catch(Exception e) {
         Helper.WriteError("500 - " + e.Message);

Lora-Map/resources/css/global.css

@@ -196,3 +196,35 @@ object {
   width: auto;
   margin-left: 70px;
 }
+
+#overlays #cameracount {
+  position: absolute;
+  top: 10px;
+  left: 61px;
+  z-index: 50000;
+  font-size: 11px;
+  font-family: "Verdana";
+  padding: 3px;
+}
+#overlays #cameracount .camera {
+  background-color: white;
+  border: rgba(0,0,0,0.3) solid 2px;
+  border-radius: 5px;
+  padding: 4px;
+}
+#overlays #cameracount .camera span {
+  display: block;
+  text-align: center;
+}
+#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");
+  }

Lora-Map/resources/index.html

@@ -38,10 +38,14 @@
       </div>
     </div>
   </div>
+  <div id="overlays">
+    <div id="cameracount"></div>
+  </div>
   <script type="text/javascript" src="js/leaflet/leaflet.js"></script>
   <script type="text/javascript" src="js/functions.js"></script>
   <script type="text/javascript" src="js/map.js"></script>
   <script type="text/javascript" src="js/menu.js"></script>
   <script type="text/javascript" src="js/marker.js"></script>
+  <script type="text/javascript" src="js/overlays.js"></script>
 </body>
 </html>

Lora-Map/resources/js/overlays.js

@@ -0,0 +1,27 @@
+setInterval(overlayrunner, 1000);
+function overlayrunner() {
+  var cam = new XMLHttpRequest();
+  cam.onreadystatechange = parseAjaxCam;
+  cam.open("GET", "/cameracount", true);
+  cam.send();
+}
+
+function parseAjaxCam() {
+  if (this.readyState === 4 && this.status === 200) {
+    var cameracounts = JSON.parse(this.responseText);
+    var camerastext = "";
+    for (var cameraid in cameracounts) {
+      if (cameracounts.hasOwnProperty(cameraid)) {
+        var camera = cameracounts[cameraid];
+        var cameratext = "<div class='camera'>";
+        cameratext += "<span class='name'>" + cameraid + "</span>";
+        cameratext += "<span class='in'>" + camera["Incoming"] + "</span>";
+        cameratext += "<span class='out'>" + camera["Outgoing"] + "</span>";
+        cameratext += "<span class='total'>" + camera["Total"] + "</span>";
+        cameratext += "</div>";
+        camerastext += cameratext;
+      }
+    }
+    document.getElementById("cameracount").innerHTML = camerastext;
+  }
+}