Commit e6ceb796 by Corey Koval

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

parent 1b30e2c3
......@@ -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)
......
......@@ -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 {
......
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);
}
......@@ -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);
}
......
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