Skip to content

D
df-aggregator
Commit e2e54efe by Corey Koval
Options

Significant UI Improvements

parent 4dc6c0b1
Showing with 168 additions and 38 deletions
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>
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