Create and delete receivers on the fly. Still has bugs.

df-aggregator.py

@@ -17,7 +17,7 @@ from geojson import Point, MultiPoint, Feature, FeatureCollection
 from czml3 import Packet, Document, Preamble
 import json
 
-from bottle import route, run, request, get, post, redirect, template, static_file
+from bottle import route, run, request, get, post, put, response, redirect, template, static_file
 
 d = 40000 #meters
 
@@ -331,7 +331,7 @@ def write_czml(best_point, all_the_points, ellipsedata):
             ellipse={**ellipse_properties, **ellipse_info},
             position={"cartographicDegrees": [ x[3], x[4], 15 ]}))
 
-    for x in receivers:
+    for index, x in enumerate(receivers):
         if x.isMobile == True:
             rx_icon = {"image":{"uri":"/static/flipped_car.svg"}}
             # if x.heading > 0 or x.heading < 180:
@@ -340,7 +340,7 @@ def write_czml(best_point, all_the_points, ellipsedata):
             #     rx_icon = {"image":{"uri":"/static/car.svg"}, "rotation":math.radians(360 - x.heading - 90)}
         else:
             rx_icon = {"image":{"uri":"/static/tower.svg"}}
-        receiver_point_packets.append(Packet(id=x.station_id,
+        receiver_point_packets.append(Packet(id=f"{x.station_id}-{index}",
         billboard={**rx_properties, **rx_icon},
         position={"cartographicDegrees": [ x.longitude, x.latitude, 15 ]}))
 
@@ -414,17 +414,6 @@ def update_cesium():
     elif request.query.plotpts == "false":
         ms.plotintersects = False
 
-    try:
-        if request.query.ismobile:
-            rx_index = int(request.query.ismobile)
-            receivers[rx_index].isMobile = True
-
-        if request.query.isnotmobile:
-            rx_index = int(request.query.isnotmobile)
-            receivers[rx_index].isMobile = False
-    except IndexError:
-        print("I got some bad data. Doing nothing out of spite.")
-
     write_czml(*process_data(database_name, geofile))
     return "OK"
 
@@ -437,8 +426,26 @@ def rx_params():
         rx['uid'] = index
         rx_properties.append(rx)
     all_rx['receivers'] = rx_properties
+    response.headers['Content-Type'] = 'application/json'
     return json.dumps(all_rx)
 
+@put('/rx_params/<uid>')
+def update_rx(uid):
+    data = json.load(request.body)
+    if uid == "new":
+        receivers.append(receiver(data['station_url'].replace('\n', '')))
+        print("Created new DF Station at " + data['station_url'])
+    elif uid == "del":
+        del receivers[int(data['uid'])]
+    else:
+        uid = int(uid)
+        try:
+            receivers[uid].isMobile = data['mobile']
+            receivers[uid].station_url = data['station_url']
+            receivers[uid].update()
+        except IndexError:
+            print("I got some bad data. Doing nothing out of spite.")
+    return redirect('/rx_params')
 
 def start_server(ipaddr = "127.0.0.1", port=8080):
     run(host=ipaddr, port=port, quiet=True, server="paste", debug=True)

static/menu.css

@@ -142,6 +142,15 @@ body {
   cursor: pointer;
   opacity: 0; /* hide this */
   z-index: 2; /* and place it on top */
+  width: 20px;
+  height: 20px;
+}
+
+.delete-icon {
+  display: block;
+  position: absolute;
+  top: 5px;
+  right: 30px;
 }
 
 .no-select {

static/receiver_configurator.js

+function updateRx(callBack, id) {
+  fetch("/rx_params")
+  .then(data=>{return data.json()})
+  .then(res=>{callBack(res, id)})
+}
+
+function editReceivers(rx_json, id) {
+  const receivers = rx_json['receivers'];
+  var stationUrlHtml =
+  "<input type=\"hidden\" id=\"url_" + id + "\"/>";
+
+  var stationIDhtml =
+  "Station ID: <a href=\"" + receivers[id].station_url + "\" target=\"_blank\">" + receivers[id].station_id + "</a>";
+
+  var manualInfo =
+  "<input type=\"hidden\" id=\"manual_toggle_" + receivers[id].uid + "\"/>";
+
+  var locationHtml =
+  "Location: " + receivers[id].latitude + "&#176;, " + receivers[id].longitude + "&#176;";
+
+  var heading =
+  "Heading: " + receivers[id].heading + "&#176;";
+
+  var freqHtml =
+  "Tuned to " + receivers[id].frequency + " MHz";
+
+  var edit_stationUrlHtml =
+  "Station URL:<input style=\"width: 300px;\" type=\"text\" value=\"" + receivers[id].station_url + "\" name=\"station_url_" + id + "\" />";
+
+  var edit_stationIDhtml =
+  "Station ID:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].station_id + "\" name=\"station_id_" + id + "\" />";
+
+  var edit_manualInfo =
+  "Manually input receiver info: <input id=\"manual_toggle_" + id + "\" type=\"checkbox\" />";
+
+  var edit_locationHtml =
+  "Latitude:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].latitude + "\" name=\"station_lat_" + id + "\" />"
+  + " Longitude:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].longitude + "\" name=\"station_lon_" + id + "\" />";
+
+  var edit_heading =
+  "Heading:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].heading + "\" name=\"station_heading_" + id + "\" />";
+
+  var edit_freqHtml =
+  "Frequency:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].frequency + "\" name=\"frequency_" + id + "\" />";
+
+  var mobile = id + "-mobile";
+  var editButton = document.getElementById(id + "-edit");
+  var isMobileCheck = document.getElementById("mobilerx_toggle_" + id);
+  if (editButton.checked) {
+    let isMobile = "";
+    if (receivers[id].mobile) isMobile = "checked";
+    document.getElementById(id + "-editicon").innerHTML = "save";
+    document.getElementById(mobile).innerHTML =
+    "Mobile Receiver: <input " + isMobile + " id=\"mobilerx_toggle_" + id + "\" type=\"checkbox\" />";
+    document.getElementById(id + "-manual").innerHTML = edit_manualInfo;
+    document.getElementById(id + "-url").innerHTML = edit_stationUrlHtml;
+    document.getElementById("manual_toggle_" + id).onchange = function() {
+      if (document.getElementById("manual_toggle_" + id).checked) {
+        document.getElementById(id + "-id").innerHTML = edit_stationIDhtml;
+        document.getElementById(id + "-location").innerHTML = edit_locationHtml;
+        document.getElementById(id + "-heading").innerHTML = edit_heading;
+        document.getElementById(id + "-freq").innerHTML = edit_freqHtml;
+      } else {
+        document.getElementById(id + "-id").innerHTML = stationIDhtml;
+        document.getElementById(id + "-location").innerHTML = locationHtml;
+        document.getElementById(id + "-heading").innerHTML = heading;
+        document.getElementById(id + "-freq").innerHTML = freqHtml;
+      }
+    }
+  } else {
+    isMobileCheck = document.getElementById("mobilerx_toggle_" + id);
+    if (isMobileCheck.checked) {
+      receivers[id].mobile = true;
+    } else {
+      receivers[id].mobile = false;
+    }
+    const otherParams = {
+      headers:{
+        "content-type":"application/json"
+      },
+      body: JSON.stringify(receivers[id]),
+      method: "PUT"
+    };
+    clearOld();
+    fetch("/rx_params/" + id, otherParams)
+    .then(data=>{return data.json()})
+    .then(res=>{updateRx(showReceivers, id)})
+    .then(res=>{loadCzml()})
+    //.catch(error=>{console.log(error)})
+    // updateRx(showReceivers, id);
+    // loadCzml();
+  }
+}
+
+function makeNewRx(url) {
+  const new_rx = {"station_url":url};
+  // console.log(new_rx);
+  const otherParams = {
+    headers:{
+      "content-type":"application/json"
+    },
+    body: JSON.stringify(new_rx),
+    method: "PUT"
+  };
+  clearOld();
+  fetch("/rx_params/new", otherParams)
+  .then(data=>{return data.json()})
+  .then(res=>{updateRx(createReceivers, true)})
+  .then(res=>{loadCzml()})
+  //.catch(error=>{console.log(error)})
+  //.then(updateRx(createReceivers, true));
+  // loadCzml();
+}
+
+function removerx(uid) {
+  const rxcard = document.getElementById("rx-" + uid);
+  rxcard.remove();
+}
+
+function deleteReceiver(uid) {
+  const del_rx = {"uid":uid};
+  // console.log(new_rx);
+  const otherParams = {
+    headers:{
+      "content-type":"application/json"
+    },
+    body: JSON.stringify(del_rx),
+    method: "PUT"
+  };
+  clearOld();
+  fetch("/rx_params/del", otherParams)
+  .then(data=>{return data.json()})
+  .then(res=>{removerx(uid)})
+  .then(res=>{loadCzml()})
+  //.catch(error=>{console.log(error)})
+  //.then(updateRx(createReceivers, true));
+  // loadCzml();
+}
+
+function showReceivers(rx_json, id) {
+  const receivers = rx_json['receivers'];
+
+  var stationUrlHtml =
+  "<input type=\"hidden\" id=\"url_" + id + "\"/>";
+
+  var stationIDhtml =
+  "Station ID: <a href=\"" + receivers[id].station_url + "\" target=\"_blank\">" + receivers[id].station_id + "</a>";
+
+  var manualInfo =
+  "<input type=\"hidden\" id=\"manual_toggle_" + receivers[id].uid + "\"/>";
+
+  var locationHtml =
+  "Location: " + receivers[id].latitude + "&#176;, " + receivers[id].longitude + "&#176;";
+
+  var heading =
+  "Heading: " + receivers[id].heading + "&#176;";
+
+  var freqHtml =
+  "Tuned to " + receivers[id].frequency + " MHz";
+
+  const urlspan = document.getElementById(id + "-url");
+  const mobilespan = document.getElementById(id + "-mobile");
+  const manualspan = document.getElementById(id + "-manual");
+  const idspan = document.getElementById(id + "-id");
+  const locationspan =document.getElementById(id + "-location");
+  const headingspan = document.getElementById(id + "-heading");
+  const freqspan = document.getElementById(id + "-freq");
+
+  document.getElementById(id + "-mobile").innerHTML = "";
+  document.getElementById(id + "-editicon").innerHTML = "create";
+  document.getElementById(id + "-manual").innerHTML = manualInfo;
+  document.getElementById(id + "-url").innerHTML = stationUrlHtml;
+  document.getElementById(id + "-id").innerHTML = stationIDhtml;
+  document.getElementById(id + "-location").innerHTML = locationHtml;
+  document.getElementById(id + "-heading").innerHTML = heading;
+  document.getElementById(id + "-freq").innerHTML = freqHtml;
+
+}
+
+function createReceivers(rx_json, id) {
+  var receivers
+  if (id == true) {
+    receivers = [rx_json['receivers'][Object.keys(rx_json['receivers']).length - 1]];
+  } else {
+    receivers = rx_json['receivers'];
+  }
+  console.log(receivers);
+  for (let i = 0; i < Object.keys(receivers).length; i++) {
+
+    const rxcard = document.createElement('div');
+    rxcard.className = "receiver";
+    rxcard.id = "rx-" + receivers[i].uid;
+
+    const urlspan = document.createElement('span');
+    const mobilespan = document.createElement('span');
+    const manualspan = document.createElement('span');
+    const idspan = document.createElement('span');
+    const locationspan =document.createElement('span');
+    const headingspan = document.createElement('span');
+    const freqspan = document.createElement('span');
+
+    const editiconspan = document.createElement('span');
+    editiconspan.classList.add("material-icons", "edit-icon", "no-select");
+    editiconspan.innerHTML = "create";
+
+    const editcheck = document.createElement('input');
+    editcheck.classList.add("edit-checkbox", "edit-icon");
+    editcheck.type = 'checkbox';
+    editcheck.id = receivers[i].uid + "-edit";
+    editcheck.setAttribute('onclick',"updateRx(editReceivers, " + receivers[i].uid + ")");
+
+    const deleteiconspan = document.createElement('span');
+    deleteiconspan.classList.add("material-icons", "delete-icon", "no-select");
+    deleteiconspan.innerHTML = "delete";
+
+    const deletecheck = document.createElement('input');
+    deletecheck.classList.add("edit-checkbox", "delete-icon");
+    deletecheck.type = 'checkbox';
+    deletecheck.id = receivers[i].uid + "-delete";
+    deletecheck.setAttribute('onclick',"deleteReceiver(" + receivers[i].uid + ")");
+
+    urlspan.id = receivers[i].uid + "-url";
+    mobilespan.id = receivers[i].uid + "-mobile";
+    manualspan.id = receivers[i].uid + "-manual";
+    idspan.id = receivers[i].uid + "-id";
+    locationspan.id = receivers[i].uid + "-location";
+    headingspan.id = receivers[i].uid + "-heading";
+    freqspan.id = receivers[i].uid + "-freq";
+    editiconspan.id = receivers[i].uid + "-editicon";
+
+    document.getElementById("menu").insertBefore(rxcard, document.getElementById("add_station"));
+
+    rxcard.appendChild(urlspan);
+    rxcard.appendChild(mobilespan);
+    rxcard.appendChild(manualspan);
+    rxcard.appendChild(idspan);
+    rxcard.appendChild(locationspan);
+    rxcard.appendChild(headingspan);
+    rxcard.appendChild(freqspan);
+    rxcard.appendChild(editiconspan);
+    rxcard.appendChild(deleteiconspan);
+    rxcard.appendChild(editcheck);
+    rxcard.appendChild(deletecheck);
+
+    showReceivers(rx_json, receivers[i].uid);
+  }
+}
+
+function refreshRx(rx_json, id) {
+  const receivers = rx_json['receivers'];
+  for (let i = 0; i < Object.keys(receivers).length; i++) {
+    showReceivers(rx_json, receivers[i].uid);
+  }
+}
+
+function loadRx(action) {
+  updateRx(action, null);
+}

views/cesium.tpl

@@ -5,12 +5,13 @@
   <meta charset="utf-8">
   <!-- Include the CesiumJS JavaScript and CSS files -->
   <script src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js"></script>
+  <script src="/static/receiver_configurator.js"></script>
   <link href="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="/static/style.css" rel="stylesheet">
   <link href="/static/menu.css" rel="stylesheet">
 </head>
-<body onload="showReceivers()">
+<body onload="loadRx(createReceivers)">
   <div id="cesiumContainer">
 
   </div>
@@ -34,24 +35,12 @@
       xmlHttp.open( "GET", "/update?"+parameter, true ); // false for synchronous request
       xmlHttp.send( null );
       xmlHttp.onload = function() {
+        loadRx(refreshRx);
         clearOld();
         loadCzml();
       }
     }
 
-    function updateRx() {
-      return new Promise(function(myResolve, myReject) {
-        let request = new XMLHttpRequest();
-        request.open( "GET", "/rx_params", true );
-        // request.responseType = 'json';
-        request.onload = function() {
-          if (request.status == 200) {myResolve(request.response);}
-          else {myResolve("File not Found");}
-        };
-        request.send( null );
-      });
-    }
-
     function loadCzml() {
       var dataSourcePromise = Cesium.CzmlDataSource.load('/static/output.czml');
       viewer.dataSources.add(dataSourcePromise);
@@ -76,125 +65,35 @@
 
     <ul id="menu">
       <h2 style="color: #eee; padding-left: 5px;">Receivers</h2>
-        <script>
-          var rx_json;
-          updateRx().then(JSON.parse).then(function(response) {
-            rx_json = response;
-          });
-          function showReceivers() {
-            const receivers = rx_json['receivers'];
-            for (let i = 0; i < Object.keys(receivers).length; i++) {
-              var stationUrlHtml = document.createElement('input');
-              stationUrlHtml.type = 'hidden';
-              stationUrlHtml.id = "url_" + receivers[i].uid
-              var edit_stationUrlHtml =
-              "Station URL:<input style=\"width: 300px;\" type=\"text\" value=\"\" name=\"station_url_" + receivers[i].uid + "\" />";
-
-              mobileToggle = document.createElement('input');
-              mobileToggle.type = 'hidden';
-              mobileToggle.id = "mobilerx_toggle_" + receivers[i].uid
-
-              var stationIDhtml = document.createElement('p');
-              stationIDhtml.innerHTML = "Station ID:&nbsp";
-              var stationIDhtmlLink = document.createElement('a');
-              stationIDhtmlLink.href = receivers[i].station_url;
-              stationIDhtmlLink.target = '_blank';
-              stationIDhtmlLink.innerHTML = receivers[i].station_id;
-              var edit_stationIDhtml =
-              "Station ID:<input style=\"width: 105px;\" type=\"text\" value=\"\" name=\"station_id_" + receivers[i].uid + "\" />";
-
-              var manualInfo = document.createElement('input');
-              manualInfo.type = 'hidden';
-              manualInfo.id = "manual_toggle_" + receivers[i].uid
-              var edit_manualInfo =
-              "Manually input receiver info: <input id=\"manual_toggle_" + receivers[i].uid + "\" type=\"checkbox\" />";
-
-              var locationHtml = document.createElement('p');
-              locationHtml.innerHTML = "Location: " + receivers[i].latitude + "&#176;, " + receivers[i].longitude + "&#176;";
-              var edit_locationHtml =
-              "Latitude:<input style=\"width: 105px;\" type=\"text\" value=\"receivers[i].latitude\" name=\"station_lat_" + receivers[i].uid + "\" />"
-              + " Longitude:<input style=\"width: 105px;\" type=\"text\" value=\"receivers[i].longitude\" name=\"station_lon_" + receivers[i].uid + "\" />";
-
-              var heading = document.createElement('p');
-              heading.innerHTML = "Heading: " + receivers[i].heading + "&#176;";
-              var edit_heading =
-              "Heading:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[i].heading + "\" name=\"station_heading_" + receivers[i].uid + "\" />";
-
-              var freqHtml = document.createElement('p');
-              freqHtml.innerHTML = "Tuned to " + receivers[i].frequency + "MHz";
-              var edit_freqHtml =
-              "Frequency:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[i].frequency + "\" name=\"frequency_" + receivers[i].uid + "\" />";
-
-              const rxcard = document.createElement('div');
-              rxcard.className = "receiver";
-
-              const urlspan = document.createElement('span');
-              const mobilespan = document.createElement('span');
-              const manualspan = document.createElement('span');
-              const idspan = document.createElement('span');
-              const locationspan =document.createElement('span');
-              const headingspan = document.createElement('span');
-              const freqspan = document.createElement('span');
-              const editiconspan = document.createElement('span');
-              editiconspan.classList.add("material-icons", "edit-icon", "no-select");
-              editiconspan.innerHTML = "create";
-
-              const editcheck = document.createElement('input');
-              editcheck.classList.add("edit-checkbox", "edit-icon");
-              editcheck.type = 'checkbox';
-
-              urlspan.id = receivers[i].uid + "-url";
-              mobilespan.id = receivers[i].uid + "-mobile";
-              manualspan.id = receivers[i].uid + "-manual";
-              idspan.id = receivers[i].uid + "-id";
-              locationspan.id = receivers[i].uid + "-location";
-              headingspan.id = receivers[i].uid + "-heading";
-              freqspan.id = receivers[i].uid + "-freq";
-              editiconspan.id = receivers[i].uid + "-editicon";
 
-              document.getElementById("menu").appendChild(rxcard);
-
-              rxcard.appendChild(urlspan);
-              rxcard.appendChild(mobilespan);
-              rxcard.appendChild(manualspan);
-              rxcard.appendChild(idspan);
-              rxcard.appendChild(locationspan);
-              rxcard.appendChild(headingspan);
-              rxcard.appendChild(freqspan);
-              rxcard.appendChild(editiconspan);
-              rxcard.appendChild(editcheck);
-
-              urlspan.appendChild(stationUrlHtml);
-              mobilespan.appendChild(mobileToggle);
-              manualspan.appendChild(manualInfo);
-              idspan.appendChild(stationIDhtml);
-              idspan.appendChild(stationIDhtmlLink);
-              locationspan.appendChild(locationHtml);
-              headingspan.appendChild(heading);
-              freqspan.appendChild(freqHtml);
-
-            }
-          }
-
-        </script>
       <input id="add_station" class="edit-checkbox add-icon" type="checkbox" style="width: 23px; height: 23px;"/>
       <span id="add_station_icon" class="material-icons add-icon no-select">add_circle_outline</span>
-      <div id="new_rx_div" style="padding: 0;" class="receiver">
-        <span id="new-url"><input type="hidden" id="url_new"/></span>
+      <div style="visibility: hidden; height: 0;" id="new_rx_div" style="padding: 0;" class="receiver">
+        <span id="new-url">Station URL:
+        </span>
       </div>
       <script>
-      var stationUrlHtml_new =
-      "<input type=\"hidden\" id=\"url_new\"/>";
-      var edit_stationUrlHtml_new =
-      "Station URL:<input style=\"width: 300px;\" type=\"text\" name=\"station_url_new\" />";
-      var add_button = document.getElementById("add_station");
+
+      var stationUrlHtml_new = document.createElement('input');
+      stationUrlHtml_new.type = 'text';
+      stationUrlHtml_new.id = 'url-new';
+      stationUrlHtml_new.style.width = '300px';
+      document.getElementById("new-url").appendChild(stationUrlHtml_new);
+      var add_button = document.getElementById("add_station"); //Button to add new RX
       add_button.onchange = function() {
         if (add_button.checked) {
-          document.getElementById("new-url").innerHTML = edit_stationUrlHtml_new;
+          stationUrlHtml_new.value = "";
+          document.getElementById("new_rx_div").style.height = 'auto';
+          document.getElementById("new_rx_div").style.visibility = "visible";
           document.getElementById("add_station_icon").innerHTML = "save";
           document.getElementById("new_rx_div").style.padding = "5px";
         } else {
-          document.getElementById("new-url").innerHTML = stationUrlHtml_new;
+          var newrxurl = stationUrlHtml_new.value
+          if (newrxurl != "") {
+            makeNewRx(newrxurl);
+          }
+          document.getElementById("new_rx_div").style.height = 0;
+          document.getElementById("new_rx_div").style.visibility = "hidden";
           document.getElementById("add_station_icon").innerHTML = "add_circle_outline";
           document.getElementById("new_rx_div").style.padding = "0";
         }
@@ -287,18 +186,26 @@
     // Update the current slider value (each time you drag the slider handle)
     epsslider.oninput = function() {
       epsoutput.innerHTML = this.value;
+    }
+    epsslider.onmouseup = function() {
       updateParams("eps="+this.value);
     }
     powerslider.oninput = function() {
       poweroutput.innerHTML = this.value;
+    }
+    powerslider.onmouseup = function() {
       updateParams("minpower="+this.value);
     }
     confslider.oninput = function() {
       confoutput.innerHTML = this.value;
+    }
+    confslider.onmouseup = function() {
       updateParams("minconf="+this.value);
     }
     minpointslider.oninput = function() {
       minpointoutput.innerHTML = this.value;
+    }
+    minpointslider.onmouseup = function() {
       updateParams("minpts="+this.value);
     }