Commit 1b30e2c3 by Corey Koval

Basically rewriting the whole front end in JS, but not because I want to

parent ce7dae65
...@@ -15,6 +15,7 @@ from sklearn.cluster import DBSCAN ...@@ -15,6 +15,7 @@ from sklearn.cluster import DBSCAN
from sklearn.preprocessing import StandardScaler, minmax_scale from sklearn.preprocessing import StandardScaler, minmax_scale
from geojson import Point, MultiPoint, Feature, FeatureCollection from geojson import Point, MultiPoint, Feature, FeatureCollection
from czml3 import Packet, Document, Preamble 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, redirect, template, static_file
...@@ -69,6 +70,13 @@ class receiver: ...@@ -69,6 +70,13 @@ class receiver:
except: except:
raise IOError raise IOError
def receiver_dict(self):
return ({'station_id': self.station_id, 'station_url': self.station_url,
'latitude':self.latitude, 'longitude':self.longitude, 'heading':self.heading,
'doa':self.doa, 'frequency':self.frequency, 'power':self.power,
'confidence':self.confidence, 'doa_time':self.doa_time, 'mobile': self.isMobile,
'active':self.isActive, 'auto':self.isAuto})
latitude = 0.0 latitude = 0.0
longitude = 0.0 longitude = 0.0
heading = 0.0 heading = 0.0
...@@ -422,7 +430,15 @@ def update_cesium(): ...@@ -422,7 +430,15 @@ def update_cesium():
@get('/rx_params') @get('/rx_params')
def rx_params(): def rx_params():
return template('rx_params.tpl', {'receivers':receivers}) all_rx = {'receivers':{}}
rx_properties = []
for index, x in enumerate(receivers):
rx = x.receiver_dict()
rx['uid'] = index
rx_properties.append(rx)
all_rx['receivers'] = rx_properties
return json.dumps(all_rx)
def start_server(ipaddr = "127.0.0.1", port=8080): def start_server(ipaddr = "127.0.0.1", port=8080):
run(host=ipaddr, port=port, quiet=True, server="paste", debug=True) run(host=ipaddr, port=port, quiet=True, server="paste", debug=True)
......
bottle==0.12.17
geojson==2.5.0
numpy==1.13.3
lxml==4.2.1
czml3==0.5.3
scikit_learn==0.23.2
...@@ -2,6 +2,11 @@ body { ...@@ -2,6 +2,11 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
#menuToggle p {
display: inline-block;
margin: 1px;
}
#menuToggle { #menuToggle {
display: block; display: block;
position: absolute; position: absolute;
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
<link href="/static/menu.css" rel="stylesheet"> <link href="/static/menu.css" rel="stylesheet">
</head> </head>
<body> <body onload="showReceivers()">
<div id="cesiumContainer"> <div id="cesiumContainer">
</div> </div>
...@@ -33,31 +33,24 @@ ...@@ -33,31 +33,24 @@
var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "/update?"+parameter, true ); // false for synchronous request xmlHttp.open( "GET", "/update?"+parameter, true ); // false for synchronous request
xmlHttp.send( null ); xmlHttp.send( null );
xmlHttp.onreadystatechange = function() { xmlHttp.onload = function() {
if (this.readyState == 3) {
clearOld(); clearOld();
// loadCzml();
} else if (this.readyState == 4 && this.status == 200) {
// clearOld();
loadCzml(); loadCzml();
};
} }
} }
// function updateRx() { function updateRx() {
// var xmlHttp = new XMLHttpRequest(); return new Promise(function(myResolve, myReject) {
// xmlHttp.open( "GET", "/rx_params", true ); // false for synchronous request let request = new XMLHttpRequest();
// xmlHttp.send( null ); request.open( "GET", "/rx_params", true );
// xmlHttp.onreadystatechange = function() { // request.responseType = 'json';
// if (this.readyState == 4 && this.status == 200) { request.onload = function() {
// var response = xmlHttp.responseText; if (request.status == 200) {myResolve(request.response);}
// var xml = parseXml(response); else {myResolve("File not Found");}
// };
// xml.getElementsByTagName("STATION_ID").childNodes[i].nodeValue[i]; request.send( null );
// }; });
// } }
// }
function loadCzml() { function loadCzml() {
var dataSourcePromise = Cesium.CzmlDataSource.load('/static/output.czml'); var dataSourcePromise = Cesium.CzmlDataSource.load('/static/output.czml');
...@@ -83,90 +76,107 @@ ...@@ -83,90 +76,107 @@
<ul id="menu"> <ul id="menu">
<h2 style="color: #eee; padding-left: 5px;">Receivers</h2> <h2 style="color: #eee; padding-left: 5px;">Receivers</h2>
% for rx_index, x in enumerate(receivers):
% id = rx_index
% ismobile = "checked" if x.isMobile == True else ""
<div class="receiver">
<span id="{{x.station_id}}-url"><input type="hidden" id="url_{{id}}"/></span>
<span id="{{x.station_id}}-mobile"><input type="hidden" id="mobilerx_toggle_{{id}}"/></span>
<span id="{{x.station_id}}-manual"><input type="hidden" id="manual_toggle_{{id}}"/></span>
<span id="{{x.station_id}}-id">Station ID: <a href="{{x.station_url}}" target="_blank">{{x.station_id}}</a></span>
<span id="{{x.station_id}}-location">Location: {{x.latitude}}&#176;, {{x.longitude}}&#176;</span>
<span id="{{x.station_id}}-heading">Heading: {{x.heading}}&#176;</span>
<span id="{{x.station_id}}-freq">Tuned to {{x.frequency}} MHz</span>
<input id="{{x.station_id}}-edit" class="edit-checkbox edit-icon" type="checkbox" />
<span id="{{x.station_id}}-editicon" class="material-icons edit-icon no-select">create</span>
<script> <script>
var stationUrlHtml_{{id}} = var rx_json;
"<input type=\"hidden\" id=\"url_{{id}}\"/>"; updateRx().then(JSON.parse).then(function(response) {
var edit_stationUrlHtml_{{id}} = rx_json = response;
"Station URL:<input style=\"width: 300px;\" type=\"text\" value=\"{{x.station_url}}\" name=\"station_url_{{id}}\" />"; });
var stationIDhtml_{{id}} = function showReceivers() {
"Station ID: <a href=\"{{x.station_url}}\" target=\"_blank\">{{x.station_id}}</a>"; const receivers = rx_json['receivers'];
var edit_stationIDhtml_{{id}} = for (let i = 0; i < Object.keys(receivers).length; i++) {
"Station ID:<input style=\"width: 105px;\" type=\"text\" value=\"{{x.station_id}}\" name=\"station_id_{{id}}\" />"; var stationUrlHtml = document.createElement('input');
var manualInfo_{{id}} = stationUrlHtml.type = 'hidden';
"<input type=\"hidden\" id=\"manual_toggle_{{id}}\"/>"; stationUrlHtml.id = "url_" + receivers[i].uid
var edit_manualInfo_{{id}} = var edit_stationUrlHtml =
"Manually input receiver info: <input id=\"manual_toggle_{{id}}\" type=\"checkbox\" />"; "Station URL:<input style=\"width: 300px;\" type=\"text\" value=\"\" name=\"station_url_" + receivers[i].uid + "\" />";
var locationHtml_{{id}} =
"Location: {{x.latitude}}&#176;, {{x.longitude}}&#176;"; mobileToggle = document.createElement('input');
var edit_locationHtml_{{id}} = mobileToggle.type = 'hidden';
"Latitude:<input style=\"width: 105px;\" type=\"text\" value=\"{{x.latitude}}\" name=\"station_lat_{{id}}\" />" mobileToggle.id = "mobilerx_toggle_" + receivers[i].uid
+ " Longitude:<input style=\"width: 105px;\" type=\"text\" value=\"{{x.longitude}}\" name=\"station_lon_{{id}}\" />";
var heading_{{id}} = var stationIDhtml = document.createElement('p');
"Heading: {{x.heading}}&#176;"; stationIDhtml.innerHTML = "Station ID:&nbsp";
var edit_heading_{{id}} = var stationIDhtmlLink = document.createElement('a');
"Heading:<input style=\"width: 105px;\" type=\"text\" value=\"{{x.heading}}\" name=\"station_heading_{{id}}\" />"; stationIDhtmlLink.href = receivers[i].station_url;
var freqHtml_{{id}} = stationIDhtmlLink.target = '_blank';
"Tuned to {{x.frequency}} MHz"; stationIDhtmlLink.innerHTML = receivers[i].station_id;
var edit_freqHtml_{{id}} = var edit_stationIDhtml =
"Frequency:<input style=\"width: 105px;\" type=\"text\" value=\"{{x.frequency}}\" name=\"frequency_{{id}}\" />"; "Station ID:<input style=\"width: 105px;\" type=\"text\" value=\"\" name=\"station_id_" + receivers[i].uid + "\" />";
var mobile_{{id}} = "{{x.station_id}}-mobile"; var manualInfo = document.createElement('input');
var editButton_{{id}} = document.getElementById("{{x.station_id}}-edit"); manualInfo.type = 'hidden';
editButton_{{id}}.onchange = function() { manualInfo.id = "manual_toggle_" + receivers[i].uid
var isMobileCheck_{{id}} = document.getElementById("mobilerx_toggle_{{id}}"); var edit_manualInfo =
if (editButton_{{id}}.checked) { "Manually input receiver info: <input id=\"manual_toggle_" + receivers[i].uid + "\" type=\"checkbox\" />";
document.getElementById("{{x.station_id}}-editicon").innerHTML = "save";
document.getElementById(mobile_{{id}}).innerHTML = var locationHtml = document.createElement('p');
"Mobile Receiver: <input {{ismobile}} id=\"mobilerx_toggle_{{id}}\" type=\"checkbox\" />"; locationHtml.innerHTML = "Location: " + receivers[i].latitude + "&#176;, " + receivers[i].longitude + "&#176;";
document.getElementById("{{x.station_id}}-manual").innerHTML = edit_manualInfo_{{id}}; var edit_locationHtml =
document.getElementById("{{x.station_id}}-url").innerHTML = edit_stationUrlHtml_{{id}}; "Latitude:<input style=\"width: 105px;\" type=\"text\" value=\"receivers[i].latitude\" name=\"station_lat_" + receivers[i].uid + "\" />"
document.getElementById("manual_toggle_{{id}}").onchange = function() { + " Longitude:<input style=\"width: 105px;\" type=\"text\" value=\"receivers[i].longitude\" name=\"station_lon_" + receivers[i].uid + "\" />";
if (document.getElementById("manual_toggle_{{id}}").checked) {
document.getElementById("{{x.station_id}}-id").innerHTML = edit_stationIDhtml_{{id}}; var heading = document.createElement('p');
document.getElementById("{{x.station_id}}-location").innerHTML = edit_locationHtml_{{id}}; heading.innerHTML = "Heading: " + receivers[i].heading + "&#176;";
document.getElementById("{{x.station_id}}-heading").innerHTML = edit_heading_{{id}}; var edit_heading =
document.getElementById("{{x.station_id}}-freq").innerHTML = edit_freqHtml_{{id}}; "Heading:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[i].heading + "\" name=\"station_heading_" + receivers[i].uid + "\" />";
} else {
document.getElementById("{{x.station_id}}-id").innerHTML = stationIDhtml_{{id}}; var freqHtml = document.createElement('p');
document.getElementById("{{x.station_id}}-location").innerHTML = locationHtml_{{id}}; freqHtml.innerHTML = "Tuned to " + receivers[i].frequency + "MHz";
document.getElementById("{{x.station_id}}-heading").innerHTML = heading_{{id}}; var edit_freqHtml =
document.getElementById("{{x.station_id}}-freq").innerHTML = freqHtml_{{id}}; "Frequency:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[i].frequency + "\" name=\"frequency_" + receivers[i].uid + "\" />";
}
} const rxcard = document.createElement('div');
} else { rxcard.className = "receiver";
isMobileCheck_{{id}} = document.getElementById("mobilerx_toggle_{{id}}");
if (isMobileCheck_{{id}}.checked) { const urlspan = document.createElement('span');
updateParams("ismobile={{rx_index}}"); const mobilespan = document.createElement('span');
} else { const manualspan = document.createElement('span');
updateParams("isnotmobile={{rx_index}}"); 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);
document.getElementById(mobile_{{id}}).innerHTML = "";
document.getElementById("{{x.station_id}}-editicon").innerHTML = "create";
document.getElementById("{{x.station_id}}-manual").innerHTML = manualInfo_{{id}};
document.getElementById("{{x.station_id}}-url").innerHTML = stationUrlHtml_{{id}};
document.getElementById("{{x.station_id}}-id").innerHTML = stationIDhtml_{{id}};
document.getElementById("{{x.station_id}}-location").innerHTML = locationHtml_{{id}};
document.getElementById("{{x.station_id}}-heading").innerHTML = heading_{{id}};
document.getElementById("{{x.station_id}}-freq").innerHTML = freqHtml_{{id}};
} }
} }
</script> </script>
</div>
% end
<input id="add_station" class="edit-checkbox add-icon" type="checkbox" style="width: 23px; height: 23px;"/> <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> <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"> <div id="new_rx_div" style="padding: 0;" class="receiver">
......
% for x in {{receivers}}:
<RECEIVER>
<STATION_ID>{{x.station_id}}</STATION_ID>
<URL>{{x.station_url}}</URL>
<AUTO>{{x.isAuto}}</AUTO>
<FREQUENCY>{{x.frequency}}</FREQUENCY>
<LATITUDE>{{x.latitude}}</LATITUDE>
<LONGITUDE>{{x.longitude}}</LONGITUDE>
<HEADING>{{x.heading}}</HEADING>
<MOBILE>{{x.isMobile}}</MOBILE>
</RECEIVER>
% end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment