Displayes menu of receivers

df-aggregator.py

@@ -76,6 +76,8 @@ class receiver:
     power = 0.0
     confidence = 0
     doa_time = 0
+    isMobile = False
+    isActive = True
 
 def plot_polar(lat_a, lon_a, lat_a2, lon_a2):
     # Convert points in great circle 1, degrees to radians
@@ -358,11 +360,9 @@ def cesium():
     'minconf':ms.min_conf,
     'minpoints':ms.min_samp,
     'rx_state':"checked" if ms.receiving == True else "",
-    'intersect_state':"checked" if ms.plotintersects == True else ""})
+    'intersect_state':"checked" if ms.plotintersects == True else "",
+    'receivers':receivers})
 
-# @post('/')
-# @post('/index')
-# @post('/cesium')
 @get('/update')
 def update_cesium():
     ms.eps = float(request.query.eps) if request.query.eps else ms.eps
@@ -403,11 +403,11 @@ def run_receiver(receivers):
             for y in range(x):
                 if x != y:
                     try:
-                        if (receivers[x].confidence > ms.min_conf and
-                        receivers[y].confidence > ms.min_conf and
-                        receivers[x].power > ms.min_power and
-                        receivers[y].power > ms.min_power and
-                        abs(receivers[x].doa_time - receivers[y].doa_time) < max_age and
+                        if (receivers[x].confidence >= ms.min_conf and
+                        receivers[y].confidence >= ms.min_conf and
+                        receivers[x].power >= ms.min_power and
+                        receivers[y].power >= ms.min_power and
+                        abs(receivers[x].doa_time - receivers[y].doa_time) <= max_age and
                         receivers[x].frequency == receivers[y].frequency):
                             intersection = list(plot_intersects(receivers[x].latitude, receivers[x].longitude,
                             receivers[x].doa, receivers[y].latitude, receivers[y].longitude, receivers[y].doa))

static/menu.css

+body {
+  overflow: hidden;
+}
+
+#menuToggle
+{
+  display: block;
+  position: absolute;
+  top: 95px;
+  right: 40px;
+
+  opacity: 0.8;
+
+  z-index: 1;
+}
+
+#menuToggle input
+{
+  display: block;
+  width: 40px;
+  height: 32px;
+  position: absolute;
+  top: -7px;
+  left: -5px;
+
+  cursor: pointer;
+
+  opacity: 0; /* hide this */
+  z-index: 2; /* and place it over the hamburger */
+
+  -webkit-touch-callout: none;
+}
+
+.borger
+{
+  display: block;
+  width: 40px;
+  height: 5px;
+  margin-bottom: 5px;
+  position: relative;
+
+  background: #eee;
+  border-radius: 3px;
+
+  z-index: 1;
+
+  transform-origin: 4px 0px;
+
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              opacity 0.55s ease;
+
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#menuToggle:hover {
+  opacity: 1.0;
+}
+
+.borger:first-child
+{
+  transform-origin: 0% 0%;
+}
+
+.borger:nth-last-child(2)
+{
+  transform-origin: 0% 100%;
+}
+
+#menuToggle input:checked ~ .borger
+{
+  opacity: 1;
+  transform: rotate(45deg) translate(-3px, -2px);
+  /* background: #232323; */
+}
+
+#menuToggle input:checked ~ .borger:nth-last-child(3)
+{
+  opacity: 0;
+  transform: rotate(0deg) scale(0.2, 0.2);
+}
+
+#menuToggle input:checked ~ .borger:nth-last-child(2)
+{
+  transform: rotate(-45deg) translate(0, -0px);
+}
+
+#menu {
+  position: absolute;
+  width: 500px;
+  margin: -75px 0 0 90px;
+  padding: 25px;
+  padding-top: 55px;
+  background-color: rgba(0,0,0,0.5);
+  color: #fff;
+  list-style-type: none;
+  -webkit-font-smoothing: antialiased;
+  /* to stop flickering of text in safari */
+  transform: none;
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+}
+
+#menu li {
+  padding: 10px 0;
+  font-size: 22px;
+}
+
+#menuToggle input:checked ~ ul {
+  transform-origin: 0% 0%;
+  transform: translate(-100%, 0);
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+}
+
+.receiver {
+  background: #d4d4d4;
+  color: #111;
+  font-weight: bold;
+  padding: 5px;
+  margin: 5px;
+  vertical-align: middle;
+}
+.receiver span {
+  display: block;
+}

static/style.css

@@ -277,7 +277,7 @@ input:checked + .switchslider:before {
   color: #fff;
   text-align: center;
   border-radius: 6px;
-  padding: 5px 0;
+  padding: 8px;
 
   /* Position the tooltip */
   position: absolute;

views/cesium.tpl

@@ -6,6 +6,7 @@
   <script src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js"></script>
   <link href="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
   <link href="/static/style.css" rel="stylesheet">
+  <link href="/static/menu.css" rel="stylesheet">
 </head>
 <body>
   <div id="cesiumContainer">
@@ -55,13 +56,39 @@
     // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
 
   </script>
+  <div id="menuToggle">
+
+    <input type="checkbox" />
+
+    <span class="borger"></span>
+    <span class="borger"></span>
+    <span class="borger"></span>
+
+    <ul id="menu">
+      <h2 style="color: #eee;">Receivers</h2>
+      % for x in receivers:
+      <div class="receiver">
+        <span>Station ID: <a href="{{x.station_url}}" target="_blank">{{x.station_id}}</a></span>
+        <span>Location: {{x.latitude}}, {{x.longitude}}</span>
+        <span>Heading: {{x.heading}}&#176;</span>
+        <span>Tuned to {{x.frequency}} MHz</span>
+      </div>
+      % end
+    </ul>
+  </div>
+  <!-- <span>Location:</span>
+  <span>Mobile Receiver:
+  <label class="switch">
+  <input id="isMobile" name="isMobile" type="checkbox">
+  <span class="switchslider round"></span>
+</label></span>
+</span> -->
+
   <div class="slidecontainer">
-    <!-- <form action="/" method="post"> -->
     <div class="tooltip">
       <span>
       <span class="slidetitle"><h4>Enable Receiver:</h4></span>
       <span class="slidespan" style="text-align:left;width: 100px;margin: 5px;">
-        <!-- Rounded switch -->
       <label class="switch">
       <input id="rx_en" name="rx_en" {{rx_state}} type="checkbox">
       <span class="switchslider round"></span>
@@ -70,21 +97,18 @@
       <span class="tooltiptext">Enables or disables capturing intersections.</span>
     </div>
     <div class="tooltip">
-        <!-- <span class="slidetitle"><h4>Min Power:</h4></span> -->
       <span class="tooltiptext">Minimum Power: <br>
         Minimun power level to record an intersection.Does not affect historical data.</span>
       <span class="slidespan"><input name="powerValue" type="range" min="0" max="50" value="{{minpower}}" class="slider" id="powerRange"></span>
       <span class="slidevalue" id="power"></span>
     </div>
     <div class="tooltip">
-        <!-- <span class="slidetitle"><h4>Min Confidence:</h4></span> -->
       <span class="tooltiptext">Minimum Confidence:<br>
         Minimum confidence level to record an intersection. Does not affect historical data.</span>
       <span class="slidespan"><input name="confValue" type="range" min="0" max="100" value="{{minconf}}" class="slider" id="confRange"></span>
       <span class="slidevalue" id="confidence"></span>
     </div>
     <div class="tooltip">
-        <!-- <span class="slidetitle"><h4>epsilon:</h4></span> -->
       <span class="tooltiptext">Epsilon:<br>
         Maximum distance between neighboring points in a cluster. Set to 0 to disable clustering.<br>
         Disabling clustering will plot all intersections and may cause longer load times.</span>
@@ -93,7 +117,6 @@
     </div>
     <div class="tooltip">
       <span class="tooltiptext">Minimum points per cluster</span>
-        <!-- <span class="slidetitle"><h4>Min Points per Cluster:</h4></span> -->
       <span class="slidespan"><input name="minpointValue" type="range" min="0" max="300" step="5" value="{{minpoints}}" class="slider" id="minpointRange"></span>
       <span class="slidevalue" id="minpoints"></span>
     </div>
@@ -101,7 +124,6 @@
       <span class="tooltip">
         <span class="slidetitle"><h4>Plot All Intersect Points:</h4></span>
         <span class="slidespan" style="text-align:left; width: 100px;margin: 5px;">
-          <!-- Rounded switch -->
         <label class="switch">
           <input id="intersect_en" name="intersect_en" {{intersect_state}} type="checkbox">
           <span class="switchslider round"></span>
@@ -110,8 +132,6 @@
           Enabling this can cause longer load times.</span>
       </span>
     </div>
-      <!-- <div style="width:15%; text-align:right;"><input onclick="loadCzml()" value="Update" type="button" style="height:40px;"/></div> -->
-    <!-- </form> -->
   </div>
   <script>
     var powerslider = document.getElementById("powerRange");