177 lines
5.7 KiB
HTML
177 lines
5.7 KiB
HTML
|
|
|
|
<html>
|
|
<head>
|
|
<title>Rotate App</title>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
<link rel="stylesheet" type="text/css" href="../../../../../system/html/css/edit-style.css">
|
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
color: purple;
|
|
}
|
|
|
|
.top-bar {
|
|
height: 90px;
|
|
background: linear-gradient(#2b2b2b, #1e1e1e);
|
|
font-family: Raleway-Bold;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
width: 480px;
|
|
top: 0;
|
|
z-index: 1;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 90px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.slider {
|
|
margin-left: 70px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="top-bar">
|
|
<div style="font-size:300%;color:grey;"><b>Rotate App</b></div>
|
|
</div>
|
|
<div class="content">
|
|
<div id="properties-list">
|
|
<div class="property">
|
|
<label>Filter Length      </label>
|
|
<input
|
|
id="filterLength-slider"
|
|
type="text"
|
|
data-provide="slider"
|
|
data-slider-ticks="[0, 1, 2, 3]"
|
|
data-slider-ticks-labels='["0.1", "4", "24", "124"]'
|
|
data-slider-min="0"
|
|
data-slider-max="3"
|
|
data-slider-step=".1"
|
|
data-slider-value="1"
|
|
data-slider-tooltip="show"
|
|
>
|
|
</div>
|
|
<br>
|
|
<div class="property">
|
|
<label>Angle Threshold</label>
|
|
<input
|
|
id="angleThreshold-slider"
|
|
type="text"
|
|
data-provide="slider"
|
|
data-slider-ticks="[0, 45, 90]"
|
|
data-slider-ticks-labels='["0", "45Degrees", "90Degrees"]'
|
|
data-slider-min="0"
|
|
data-slider-max="90"
|
|
data-slider-step="1"
|
|
data-slider-value="30"
|
|
data-slider-tooltip="show"
|
|
>
|
|
</div>
|
|
<br>
|
|
<div class="property">
|
|
<label>step reset enabled</label>
|
|
<input id="stepReset" type="checkbox">
|
|
</div>
|
|
<br>
|
|
<div class="property">
|
|
<label>drawing average look at enabled</label>
|
|
<input id="drawAverage" type="checkbox">
|
|
</div>
|
|
<br>
|
|
<audio id="audio" src="http://hifi-content.s3.amazonaws.com/angus/stepApp/create.wav" autostart="false" ></audio>
|
|
</div>
|
|
</div>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
|
|
<script>
|
|
//
|
|
// Created by Angus Antley on 6/28/18
|
|
//
|
|
//
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
/* jslint bitwise: true */
|
|
|
|
/* global $, EventBridge
|
|
*/
|
|
function changeColor(id, shade) {
|
|
document.getElementById(id).setAttribute("fill", shade);
|
|
}
|
|
|
|
function emit(eventType, eventData) {
|
|
var eventObject = {
|
|
"app": "step",
|
|
"type": eventType,
|
|
"data": eventData
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(eventObject));
|
|
}
|
|
|
|
EventBridge.scriptEventReceived.connect(function (msg) {
|
|
var message = JSON.parse(msg);
|
|
|
|
if (message.type === "checkboxtick"){
|
|
document.getElementById(message.id).checked = message.data.value;
|
|
}
|
|
|
|
if (message.type === "slider") {
|
|
console.log("message id 2 " + message.id);
|
|
$(message.id).data("slider").setValue(message.data.value);
|
|
var curState = $(message.id).data("slider").getValue();
|
|
console.log("the slider value is " + message.id + " " + JSON.stringify(curState));
|
|
}
|
|
|
|
});
|
|
|
|
|
|
$(document).ready(function () {
|
|
emit("ready", null);
|
|
|
|
|
|
$("#filterLength-slider").slider().on("change", function(e){
|
|
console.log("filter length " + e.value.newValue);
|
|
emit("onFilterLengthSlider",{value: e.value.newValue});
|
|
});
|
|
|
|
$("#angleThreshold-slider").slider().on("change", function(e){
|
|
console.log("angle threshold " + e.value.newValue);
|
|
emit("onAngleThresholdSlider",{value: e.value.newValue});
|
|
});
|
|
|
|
|
|
$("#stepReset").change(function(e){
|
|
console.log("enable step reset " + e.target.checked);
|
|
emit("onStepResetCheckBox", {value: e.target.checked});
|
|
});
|
|
|
|
$("#drawAverage").change(function(e){
|
|
console.log("enable drawing average azimuth " + e.target.checked);
|
|
emit("onDrawAverageFacingCheckBox", {value: e.target.checked});
|
|
});
|
|
|
|
|
|
|
|
|
|
emit("onCreateRotateApp", {value: 10.0});
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|