Skip to content

D
df-aggregator
Commit 133247c3 by Corey Koval
Options

Added Epsilon Slider

parent 7df2b3d2
Showing with 188 additions and 8 deletions
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
......@@ -5,8 +5,10 @@
<!-- 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.
......@@ -19,17 +21,29 @@
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// viewer.dataSources.add(Cesium.GeoJsonDataSource.load('/static/dc_med.geojson', {
// clampToGround: true,
// //markerColor: Cesium.Color.GREEN,
// markerSymbol: ''
// }));
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
</script>
</div>
<h2>Marble Cake also the Game</h2>
<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>
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