196 lines
8.8 KiB
HTML
196 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
|
|
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
|
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
|
|
<script>
|
|
//
|
|
// Created by Luis Cuenca on 1/31/18
|
|
// Copyright 2018 High Fidelity, Inc.
|
|
//
|
|
//
|
|
// 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 () {
|
|
var MSG_DOCUMENT_LOADED = 0;
|
|
var MSG_COLLISION_DATA = 1;
|
|
var MSG_CREATE = 2;
|
|
var MSG_RESET_VALUES = 3;
|
|
|
|
var groupData, collisionData;
|
|
|
|
function createInput(kind, group, name, type, config) {
|
|
var input = $("<input>").attr("type", type).attr("data-name", name).attr("data-group", group).attr("data-kind", kind);
|
|
var inputId = kind + "-" + group + "-" + type + "-" + name;
|
|
input.attr("id", inputId).attr("name", inputId);
|
|
if (type === "range") {
|
|
input.attr("step", config.step).attr("value", config.value).attr("min", config.min).attr("max", config.max);
|
|
} else if (type === "checkbox" && config.checked) {
|
|
input.attr("checked", "checked");
|
|
}
|
|
return input;
|
|
}
|
|
|
|
function createElement(kind, group, name, type, config) {
|
|
var width = config.width != undefined ? config.width : "50%";
|
|
var element = $("<div>").addClass("unit-config").css("width", width).css("display", "inline-block");
|
|
var input = createInput(kind, group, name, type, config);
|
|
var label = $("<label>").text(name).attr("for", input.attr("id"));
|
|
element.append(label).append(input);
|
|
return element;
|
|
}
|
|
|
|
function createGroupContainer(name, type) {
|
|
var groupContainer = $("<div>").addClass("ui-corner-all custom-corners");
|
|
var bartype = type ? "ui-bar-" + type : "ui-bar-b";
|
|
var headContainer = $("<div>").addClass("ui-bar " + bartype);
|
|
var header = $("<h3>").addClass("header-text").text(name);
|
|
var contentContainer = $("<div>").addClass("group-content ui-body ui-body-a");
|
|
headContainer.append(header);
|
|
groupContainer.append(headContainer).append(contentContainer);
|
|
return groupContainer;
|
|
}
|
|
|
|
function createGroup(kind, name, elements, type) {
|
|
var group = createGroupContainer(name, type);
|
|
var content = group.find(".group-content");
|
|
for (var i = 0; i < elements.length; i++){
|
|
if (elements[i].type) {
|
|
content.append(createElement(kind, elements[i].name, elements[i].text, elements[i].type, elements[i].config));
|
|
} else {
|
|
content.append(elements[i]);
|
|
}
|
|
}
|
|
return group;
|
|
}
|
|
|
|
function sendAllInputData() {
|
|
var inputs = $("input");
|
|
var output = {};
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
var input = $(inputs[i]);
|
|
var group = input.data("group");
|
|
var value = inputs[i].value;
|
|
if (input.attr("type") == "checkbox") {
|
|
value = input.prop("checked") ? 1 : 0;
|
|
}
|
|
output[group] = value;
|
|
}
|
|
EventBridge.emitWebEvent(JSON.stringify({type: MSG_COLLISION_DATA, data: output}));
|
|
}
|
|
|
|
function configureInputs(selector) {
|
|
$(selector).find("input").change(sendAllInputData);
|
|
}
|
|
|
|
EventBridge.scriptEventReceived.connect(function (msg) {
|
|
var message = JSON.parse(msg);
|
|
if (message.type === MSG_CREATE) {
|
|
$("#panel").empty();
|
|
groupData = message.data;
|
|
var forceControls = [
|
|
{text: "", name: "forceDelta", type: "range", config: {"step": 0.01, "value": message.data.forceDelta, "min":0.0, "max":1.0, width: "65%"}},
|
|
{text: "Delta frame", name: "forceType", type: "checkbox", config: {"checked": message.data.forceType, width: "35%"}}
|
|
];
|
|
var impulseControls = [
|
|
{text: "", name: "impulseDelta", type: "range", config: {"step": 0.01, "value": message.data.impulseDelta, "min":0.0, "max":1.0, width: "65%"}},
|
|
{text: "Delta frame", name: "impulseType", type: "checkbox", config: {"checked": message.data.impulseType, width: "35%"}}
|
|
];
|
|
var velocityControls = [
|
|
{text: "", name: "velocityDelta", type: "range", config: {"step": 0.01, "value": message.data.velocityDelta, "min":0.0, "max":1.0, width: "65%"}},
|
|
{text: "Delta frame", name: "velocityType", type: "checkbox", config: {"checked": message.data.velocityType, width: "35%"}}
|
|
];
|
|
var extraControls = [
|
|
{text: "Threshold", name: "attenuationThreshold", type: "range", config: {"step": 0.0005, "value": message.data.attenuationThreshold, "min":0.0, "max":0.01, width: "50%"}},
|
|
{text: "Percentage", name: "attenuationValue", type: "range", config: {"step": 0.01, "value": message.data.attenuationValue, "min":0.0, "max":1.0, width: "50%"}}
|
|
];
|
|
var groupElement = createGroup(0, "Force", forceControls);
|
|
var enabler = createInput(0, "applyForce", "active", "checkbox", {"checked": message.data.applyForce}).addClass("group-enabler");
|
|
$(groupElement).find(".ui-bar").append(enabler);
|
|
$("#panel").append(groupElement);
|
|
groupElement = createGroup(1, "Impulse", impulseControls);
|
|
enabler = createInput(0, "applyImpulse", "active", "checkbox", {"checked": message.data.applyImpulse}).addClass("group-enabler");
|
|
$(groupElement).find(".ui-bar").append(enabler);
|
|
$("#panel").append(groupElement);
|
|
groupElement = createGroup(2, "Velocity", velocityControls);
|
|
enabler = createInput(0, "applyVelocity", "active", "checkbox", {"checked": message.data.applyVelocity}).addClass("group-enabler");
|
|
$(groupElement).find(".ui-bar").append(enabler);
|
|
$("#panel").append(groupElement);
|
|
groupElement = createGroup(3, "Attenuation", extraControls);
|
|
enabler = createInput(0, "attenuate", "active", "checkbox", {"checked": message.data.attenuate}).addClass("group-enabler");
|
|
$(groupElement).find(".ui-bar").append(enabler);
|
|
$("#panel").append(groupElement);
|
|
configureInputs("#panel");
|
|
$("#panel").trigger('create');
|
|
}
|
|
});
|
|
$("#resetter").click(function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({type: MSG_RESET_VALUES}));
|
|
});
|
|
EventBridge.emitWebEvent(JSON.stringify({type: MSG_DOCUMENT_LOADED}));
|
|
|
|
});
|
|
</script>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
.container {
|
|
margin:10px;
|
|
}
|
|
.unit-config.third{
|
|
width: 33%;
|
|
display: inline-block;
|
|
}
|
|
.unit-config.half{
|
|
width: 49.5%;
|
|
display: inline-block;
|
|
}
|
|
.nav-bar{
|
|
width: 440px;
|
|
}
|
|
.nav-text > a {
|
|
font-size: 20px !important;
|
|
|
|
}
|
|
.ui-controlgroup-controls {
|
|
width:100% !important;
|
|
}
|
|
.ui-select {
|
|
width:80% !important;
|
|
}
|
|
.right {
|
|
float: right;
|
|
}
|
|
.thin {
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
}
|
|
.group-enabler {
|
|
margin-left: 390px !important;
|
|
margin-top: -25px !important;
|
|
}
|
|
.small-button {
|
|
width: 50px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="nav-panel" style="margin:10px">
|
|
<div data-role="navbar" class="nav-bar">
|
|
<ul>
|
|
<li class="nav-text" data-idx=0 ><a href="#" id="resetter" class="ui-btn-active">Reset Values</a></li>
|
|
</ul>
|
|
</div><!-- /navbar -->
|
|
</div>
|
|
<div id="panel" class="container">
|
|
|
|
</div>
|
|
</body>
|
|
</head>
|
|
</html>
|