219 lines
8.8 KiB
HTML
219 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 8/24/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_CREATE = 1;
|
|
var MSG_REFRESH = 2;
|
|
|
|
var groupData, collisionData;
|
|
|
|
function createDropDown(kind, group, name, config) {
|
|
var ddown = $("<select>").addClass("control").attr("type", "select").attr("data-name", name).attr("data-group", group);
|
|
var inputId = kind + "-" + group + "-select";
|
|
for (var i = 0; i < config.options.length; i++) {
|
|
var option = $("<option>").text(config.options[i].text).val(i);
|
|
if (config.options[i].selected) {
|
|
option.attr("selected", "selected");
|
|
}
|
|
ddown.append(option);
|
|
}
|
|
return ddown;
|
|
}
|
|
|
|
function createInput(kind, group, name, type, config) {
|
|
var input = $("<input>").addClass("control").attr("type", type).attr("data-name", name).attr("data-group", group).attr("data-kind", kind);
|
|
var inputId = kind + "-" + group + "-" + type;
|
|
console.log(inputId);
|
|
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") {
|
|
if (config.checked) {
|
|
input.attr("checked", "checked");
|
|
}
|
|
} else {
|
|
input.css("width", "100%");
|
|
input.attr("value", config.value);
|
|
input.attr("type", "text");
|
|
}
|
|
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 = type != "select" ? createInput(kind, group, name, type, config) : createDropDown(kind, group, name, 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 getAllInputData() {
|
|
var inputs = $(".control");
|
|
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;
|
|
}
|
|
return output;
|
|
}
|
|
|
|
function configureInputs(selector) {
|
|
$(selector).find(".control").change(function() {
|
|
var data = getAllInputData();
|
|
EventBridge.emitWebEvent(JSON.stringify({"type": MSG_REFRESH, "data": data}));
|
|
});
|
|
}
|
|
|
|
EventBridge.scriptEventReceived.connect(function (msg) {
|
|
var message = JSON.parse(msg);
|
|
if (message.type === MSG_CREATE) {
|
|
$("#panel").empty();
|
|
var speedRange, framesRange;
|
|
|
|
var countControls = [
|
|
{text: "", name: "frameCount", type: "range", config: {"step": 1, "value": message.data.frameCount, "min":0, "max":100, width: "100%"}}
|
|
];
|
|
|
|
groupElement = createGroup(0, "Frame Duration", countControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
framesRange = $(groupElement).find("input");
|
|
if (message.data.isDistanceBased) {
|
|
//framesRange.prop('disabled', true);
|
|
groupElement.hide();
|
|
}
|
|
|
|
var speedControls = [
|
|
{text: "", name: "framesPerMeter", type: "range", config: {"step": 1, "value": message.data.framesPerMeter, "min":0, "max":20, width: "100%"}}
|
|
];
|
|
groupElement = createGroup(0, "Frames Per Meter", speedControls);
|
|
speedRange = $(groupElement).find("input");
|
|
if (!message.data.isDistanceBased) {
|
|
// speedRange.prop('disabled', true);
|
|
groupElement.hide();
|
|
}
|
|
$("#panel").append(groupElement);
|
|
|
|
var distanceControls = [
|
|
{name: "isDistanceBased", type: "checkbox", config: {"checked": message.data.isDistanceBased}}
|
|
];
|
|
groupElement = createGroup(0, "Speed (Frames per meter)", distanceControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
$("#panel").trigger('create');
|
|
configureInputs("#panel");
|
|
}
|
|
});
|
|
|
|
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;
|
|
}
|
|
.btn-checked {
|
|
background-color: red !important;
|
|
}
|
|
#errormsg {
|
|
opacity: 0;
|
|
}
|
|
.main-title {
|
|
font-size: 30px !important;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<body>
|
|
<p class="main-title">Avatar Transit Controls</p>
|
|
<div id="panel" class="container">
|
|
<!-- /CONTROLS -->
|
|
</div>
|
|
</body>
|
|
</head>
|
|
</html>
|