214 lines
8.6 KiB
HTML
214 lines
8.6 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 9/13/19
|
|
// Copyright 2019 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 selfieTriggerAngleControls = [
|
|
{text: "", name: "selfieTriggerAngle", type: "range", config: {"step": 1.0, "value": message.data.selfieTriggerAngle, "min":0.0, "max":90.0, width: "100%"}}
|
|
];
|
|
var groupElement = createGroup(0, "Selfie Trigger Angle", selfieTriggerAngleControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
var backLookAtSpeedControls = [
|
|
{text: "", name: "backLookAtSpeed", type: "range", config: {"step": 0.01, "value": message.data.backLookAtSpeed, "min":0.0, "max":0.99, width: "100%"}}
|
|
];
|
|
|
|
groupElement = createGroup(0, "Head Back Speed Ratio", backLookAtSpeedControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
var frontLookAtSpeedControls = [
|
|
{text: "", name: "frontLookAtSpeed", type: "range", config: {"step": 0.01, "value": message.data.frontLookAtSpeed, "min":0.0, "max":0.99, width: "100%"}}
|
|
];
|
|
|
|
groupElement = createGroup(0, "Head Selfie Speed Ratio", frontLookAtSpeedControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
var clickLookAtControls = [
|
|
{name: "clickLookAt", type: "checkbox", config: {"checked": message.data.clickLookAt}}
|
|
];
|
|
groupElement = createGroup(0, "MOUSE CLICK LOOK AT", clickLookAtControls);
|
|
$("#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">Look At Camera Controls</p>
|
|
<div id="panel" class="container">
|
|
<!-- /CONTROLS -->
|
|
</div>
|
|
</body>
|
|
</head>
|
|
</html>
|