Significant UI Improvements

df-aggregator.py

@@ -310,6 +310,7 @@ def write_czml(best_point, all_the_points, ellipsedata):
             if x[0] >= x[1]:
                 semiMajorAxis = x[0]
                 semiMinorAxis = x[1]
+                # rotation = x[2]
                 rotation = 2 * np.pi - x[2]
                 rotation += np.pi/2
             else:
@@ -372,28 +373,47 @@ def cesium():
     write_czml(*process_data(database_name, geofile))
     return template('cesium.tpl',
     {'access_token':access_token,
-    'epsilon':ms.eps*100,
+    'epsilon':ms.eps,
     'minpower':ms.min_power,
     'minconf':ms.min_conf,
     'minpoints':ms.min_samp,
     'rx_state':"checked" if ms.receiving == True else "",
     'intersect_state':"checked" if ms.plotintersects == True else ""})
 
-@post('/')
-@post('/index')
-@post('/cesium')
+# @post('/')
+# @post('/index')
+# @post('/cesium')
+@get('/update')
 def update_cesium():
-    ms.eps = float(request.forms.get('epsilonValue'))/100
-    ms.min_conf = float(request.forms.get('confValue'))
-    ms.min_power = float(request.forms.get('powerValue'))
-    ms.min_samp = float(request.forms.get('minpointValue'))
-    ms.receiving = True if request.forms.get('rx_en') == "on" else False
-    ms.plotintersects = True if request.forms.get('intersect_en') == "on" else False
+    # ms.eps = float(request.forms.get('epsilonValue'))/100
+    # ms.min_conf = float(request.forms.get('confValue'))
+    # ms.min_power = float(request.forms.get('powerValue'))
+    # ms.min_samp = float(request.forms.get('minpointValue'))
+    # ms.receiving = True if request.forms.get('rx_en') == "on" else False
+    # ms.plotintersects = True if request.forms.get('intersect_en') == "on" else False
+    ms.eps = float(request.query.eps) if request.query.eps else ms.eps
+    # print(request.query.eps, ms.eps)
+    ms.min_conf = float(request.query.minconf) if request.query.minconf else ms.min_conf
+    # print(request.query.minconf, ms.min_conf)
+    ms.min_power = float(request.query.minpower) if request.query.minpower else ms.min_power
+    # print(request.query.minpower, ms.min_power)
+    ms.min_samp = float(request.query.minpts) if request.query.minpts else ms.min_samp
+
+    if request.query.rx == "true":
+        ms.receiving = True
+    elif request.query.rx == "false":
+        ms.receiving = False
+    if request.query.plotpts == "true":
+        ms.plotintersects = True
+    elif request.query.plotpts == "false":
+        ms.plotintersects = False
 
-    return redirect('cesium')
+    write_czml(*process_data(database_name, geofile))
+    return "OK"
+    # return redirect('cesium')
 
 def start_server(ipaddr = "127.0.0.1", port=8080):
-    run(host=ipaddr, port=port, quiet=True, debug=True)
+    run(host=ipaddr, port=port, quiet=True, server="paste", debug=True)
 
 def run_receiver(receivers):
     clear(debugging)

static/style.css

@@ -123,6 +123,17 @@ span {
 /*Slider Stuff*/
 .slidecontainer {
   width: 100%; /* Width of the outside container */
+  max-width: 800px;
+  color: white;
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+
+    position: fixed;
+    top: 10px;
+    left: 10px;
 }
 
 .slidespan {
@@ -138,8 +149,9 @@ span {
 }
 
 .slidevalue {
-  width: 10%;
+  width: 40px;
   text-align: left;
+  font-weight: bold;
 }
 /* The slider itself */
 .slider {
@@ -239,3 +251,45 @@ input:checked + .switchslider:before {
 .switchslider.round:before {
   border-radius: 50%;
 }
+
+.tooltip {
+  position: relative;
+  display: block;
+  z-index: 1;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 240px;
+  background-color: rgba(0,0,0,0.5);
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 10;
+  top: -5px;
+  right: 100%;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+.cesium-viewer {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    margin: 0;
+}
+
+#cesiumContainer {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    z-index: 0;
+    overflow: hidden;
+}

views/cesium.tpl

@@ -8,22 +8,41 @@
   <link href="/static/style.css" rel="stylesheet">
 </head>
 <body>
-  <h2>DF Aggregator</h2>
-  <div id="cesiumContainer" style="height: 800px">
+  <div id="cesiumContainer">
 
   </div>
   <script>
     // Your access token can be found at: https://cesium.com/ion/tokens.
     Cesium.Ion.defaultAccessToken = '{{access_token}}';
     var viewer = new Cesium.Viewer('cesiumContainer', {
-      terrainProvider: Cesium.createWorldTerrain()
+      terrainProvider: Cesium.createWorldTerrain(),
+      homeButton: false,
+      timeline: false
     });
     viewer.clock.shouldAnimate = true;
+    viewer.zoomTo(loadCzml());
 
+    function updateParams(parameter) {
+      var xmlHttp = new XMLHttpRequest();
+      xmlHttp.open( "GET", "/update?"+parameter, true ); // false for synchronous request
+      xmlHttp.send( null );
+      xmlHttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+          clearOld();
+          loadCzml();
+        };
+      }
+    }
 
+    function loadCzml() {
       var dataSourcePromise = Cesium.CzmlDataSource.load('/static/output.czml');
       viewer.dataSources.add(dataSourcePromise);
-    viewer.zoomTo(dataSourcePromise);
+      return dataSourcePromise;
+    }
+
+    function clearOld() {
+      viewer.dataSources.removeAll(true);
+    }
 
     // Add Cesium OSM Buildings, a global 3D buildings layer.
     // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
@@ -31,37 +50,49 @@
   </script>
   <div class="slidecontainer">
     <form action="/" method="post">
-    <div><span class="slidetitle"><h4>Min Power*:</h4></span>
+      <div class="tooltip">
+        <span class="slidetitle"><h4>Min Power:</h4></span>
+        <span class="tooltiptext">Does not affect historical data.</span>
         <span class="slidespan"><input name="powerValue" type="range" min="0" max="100" value="{{minpower}}" class="slider" id="powerRange"></span>
-    <span class="slidevalue" id="power"></span></div>
-    <div><span class="slidetitle"><h4>Min Confidence*:</h4></span>
+        <span class="slidevalue" id="power"></span>
+      </div>
+      <div class="tooltip">
+        <span class="slidetitle"><h4>Min Confidence:</h4></span>
+        <span class="tooltiptext">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><span class="slidetitle"><h4>epsilon:</h4></span>
-    <span class="slidespan"><input name="epsilonValue" type="range" min="0" max="100" value="{{epsilon}}" class="slider" id="epsilonRange"></span>
-    <span class="slidevalue" id="epsilon"></span></div>
-    <div><span class="slidetitle"><h4>Min Points per Cluster:</h4></span>
-    <span class="slidespan"><input name="minpointValue" type="range" min="0" max="200" value="{{minpoints}}" class="slider" id="minpointRange"></span>
-    <span class="slidevalue" id="minpoints"></span></div>
-    <div><span class="slidetitle"><h4>Receiver Enable:</h4></span>
+        <span class="slidevalue" id="confidence"></span>
+      </div>
+      <div>
+        <span class="slidetitle"><h4>epsilon:</h4></span>
+        <span class="slidespan"><input name="epsilonValue" type="range" min="0" max="1" step="0.01" value="{{epsilon}}" class="slider" id="epsilonRange"></span>
+        <span class="slidevalue" id="epsilon"></span>
+      </div>
+        <div>
+        <span class="slidetitle"><h4>Min Points per Cluster:</h4></span>
+        <span class="slidespan"><input name="minpointValue" type="range" min="0" max="200" step="5" value="{{minpoints}}" class="slider" id="minpointRange"></span>
+        <span class="slidevalue" id="minpoints"></span>
+      </div>
+      <div>
+        <span class="slidetitle"><h4>Receiver Enable:</h4></span>
         <span class="slidespan" style="text-align:left; width: 80px;">
         <!-- Rounded switch -->
         <label class="switch">
-    <input name="rx_en" {{rx_state}} type="checkbox">
+        <input id="rx_en" name="rx_en" {{rx_state}} type="checkbox">
         <span class="switchslider round"></span>
         </label></span>
-    <span class="slidetitle"><h4>Plot All intersect Points**:</h4></span>
+        <div class="tooltip">
+          <span class="slidetitle"><h4>Plot All intersect Points:</h4></span>
           <span class="slidespan" style="text-align:left; width: 80px;">
           <!-- Rounded switch -->
           <label class="switch">
-    <input name="intersect_en" {{intersect_state}} type="checkbox">
+            <input id="intersect_en" name="intersect_en" {{intersect_state}} type="checkbox">
             <span class="switchslider round"></span>
-    </label></span><span>Enabling this can cause longer load times.</span></div>
-    <div style="width:15%; text-align:right;"><input value="Update" type="submit" style="height:40px;"/></div>
+          </label></span><span class="tooltiptext" style="width: 360px;">This setting does not apply if clustering is turned off (epsilon = 0).
+            Enabling this can cause longer load times.</span>
+        </div>
+      </div>
+      <!-- <div style="width:15%; text-align:right;"><input onclick="loadCzml()" value="Update" type="button" style="height:40px;"/></div> -->
     </form>
-
-    <p>* Does not affect historical data.</p>
-    <p>** This setting does not apply if clustering is turned off (epsilon = 0).</p>
   </div>
   <script>
     var powerslider = document.getElementById("powerRange");
@@ -74,25 +105,50 @@
 
     var epsslider = document.getElementById("epsilonRange");
     var epsoutput = document.getElementById("epsilon");
-    epsoutput.innerHTML = epsslider.value/100;
+    epsoutput.innerHTML = epsslider.value;
 
     var minpointslider = document.getElementById("minpointRange");
     var minpointoutput = document.getElementById("minpoints");
     minpointoutput.innerHTML = minpointslider.value;
 
+    var rx_enable = document.getElementById("rx_en");
+
+    var intersect_en = document.getElementById("intersect_en");
+
     // Update the current slider value (each time you drag the slider handle)
     epsslider.oninput = function() {
-      epsoutput.innerHTML = this.value/100;
+      epsoutput.innerHTML = this.value;
+      updateParams("eps="+this.value);
     }
     powerslider.oninput = function() {
       poweroutput.innerHTML = this.value;
+      updateParams("minpower="+this.value);
     }
     confslider.oninput = function() {
       confoutput.innerHTML = this.value;
+      updateParams("minconf="+this.value);
     }
     minpointslider.oninput = function() {
       minpointoutput.innerHTML = this.value;
+      updateParams("minpts="+this.value);
+    }
+
+    rx_enable.onchange = function() {
+      if (rx_enable.checked) {
+        updateParams("rx=true");
+      } else {
+        updateParams("rx=false");
       }
+    }
+
+    intersect_en.onchange = function() {
+      if (intersect_en.checked) {
+        updateParams("plotpts=true");
+      } else {
+        updateParams("plotpts=false");
+      }
+    }
+
   </script>
 </body>
 </html>