Skip to content

D
df-aggregator
Commit bde56baa by Corey Koval
Options

Merge branch 'webui'

parents a8bfae97 00bf94e5
Showing with 250 additions and 0 deletions
.gitignore
......@@ -6,3 +6,4 @@ CesiumJS/
test*
*.db
*.txt
*.czml
README.md
......@@ -4,6 +4,8 @@
- [numpy](https://numpy.org/install/)
- [scikit-learn](https://scikit-learn.org/stable/install.html)
- [python-geojson](https://python-geojson.readthedocs.io/en/latest/)
- [czml3](https://pypi.org/project/czml3/)
- [geojson](https://pypi.org/project/geojson/)
## Usage: df-aggregator.py [options]
......
static/style.css 0 → 100644
body {
font-size: 12pt;
font-family: 'Courier New', Courier, monospace;
background-color: #ecebeb;
}
input {
margin: 3px;
}
h1, h2, h3, h4 {
margin-top: 10px;
margin-bottom: 5px;
}
p, ul {
margin-top: 5px;
margin-bottom: 5px;
}
span {
display: inline-block;
}
.header {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/*.header li:last-child {
border-right: none;
border-left: 1px solid #bbb;
}*/
/* Change the link color to #111 (black) on hover */
.header a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.header {
font-size: 18pt;
font-family: 'Courier New', Courier, monospace;
}
.main_text {
width: 80%;
float: left;
padding: 10px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
/*.header a {
display: block;
}*/
.navbar a {
float: left;
font-size: 18px;
color: white;
text-align: center;
padding: 17px 16px;
text-decoration: none;
border-left: 1px solid #bbb;
}
/* Dropdown Button */
.dropbtn {
background-color: #333;
color: white;
padding: 16px;
font-size: 18px;
border: none;
border-left: 1px solid #bbb;
font-family: 'Courier New', Courier, monospace;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
/*position: relative;*/
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #e4e1e1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ccc;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #111;}
/*Slider Stuff*/
.slidecontainer {
width: 100%; /* Width of the outside container */
}
.slidespan {
width: 80%; /* Width of the outside container */
padding: 10px;
}
/* The slider itself */
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
vertical-align: middle;
width: 100%;
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #333;
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #333;
cursor: pointer; /* Cursor on hover */
}
views/cesium.tpl 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
</head>
<body>
<h2>DF Aggregator</h2>
<div id="cesiumContainer" style="height: 800px"></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()
});
var dataSourcePromise = Cesium.CzmlDataSource.load('/static/output.czml');
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
</script>
</div>
<div class="slidecontainer">
<form action="/" method="post">
<span><h4>epsilon:</h4></span>
<span class="slidespan"><input name="epsilonValue" type="range" min="0" max="100" value="{{epsilon}}" class="slider" id="epsilonRange"></span>
<span><p><input value="Update" type="submit" style="height:40px;"/></p></span>
</form>
<p>Value: <span id="epsilon"></span></p>
</div>
<script>
var slider = document.getElementById("epsilonRange");
var output = document.getElementById("epsilon");
output.innerHTML = slider.value/100; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value/100;
}
</script>
<h4>Buttons here in the future!</h4>
</body>
</html>
views/index.tpl 0 → 100644
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
</head>
<body>
<p>Test</p>
<div style="height: 700px" id="map"></div>
<script>
// initialize Leaflet
var map = L.map('map').setView({lon: -76.3, lat: 39.1}, 8);
// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
// show the scale bar on the lower left corner
L.control.scale().addTo(map);
</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