<!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>
$(document).bind('pageinit', function () {
var MSG_DOCUMENT_LOADED = 0;
var MSG_INPUT_DATA = 1;
var MSG_GROUP_DATA = 2;
var MSG_SETTINGS_DATA = 3;
var MSG_CREATE = 4;
var groupData;
function createElement(group, name, type, config) {
var element = $("<div>").addClass("unit-config half");
var input = $("<input>").attr("type", type).attr("data-name", name).attr("data-group", group);
var inputId = group + "-" + type + "-" + name;
input.attr("id", inputId).attr("name", inputId);
var label = $("<label>").text(name).attr("for", 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");
}
element.append(label).append(input);
return element;
}
function createGroupContainer(name) {
var groupContainer = $("<div>").addClass("ui-corner-all custom-corners");
var headContainer = $("<div>").addClass("ui-bar ui-bar-b");
var header = $("<h3>").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(name, elements) {
var group = createGroupContainer(name);
var content = group.find(".group-content");
for (var i = 0; i < elements.length; i++){
content.append(createElement(name, elements[i].name, elements[i].type, elements[i].config));
}
return group;
}
function createDump() {
var group = createGroupContainer("JSON");
var content = group.find(".group-content");
var dumpBox = $("<textarea>").attr("cols", 40).attr("rows", 40).attr("id", "dump-box");
content.append(dumpBox);
return group;
}
function updateDump() {
if (groupData) {
var filterKeys = Object.keys(groupData);
if (filterKeys.length > 0) {
var dataKeys = Object.keys(groupData[filterKeys[0]]);
var rows = (filterKeys.length) * (dataKeys.length + 2) + 2;
$("#dump-box").attr("rows", rows).val(JSON.stringify(groupData, null, 2));
}
}
}
function createNodes() {
var controls = [
{name: "count", type: "range", config: {"step": 1, "value": 0, "min":0, "max":30}},
{name: "distance", type: "range", config: {"step": 0.001, "value": 0.05, "min":0.01, "max":0.1}}
];
var groupElement = createGroup("Extra Hand Nodes", controls);
return groupElement;
}
EventBridge.scriptEventReceived.connect(function (msg) {
var message = JSON.parse(msg);
console.log("MessageType: " + message.type);
if (message.type === MSG_GROUP_DATA) {
groupData = message.data;
var filterKeys = Object.keys(groupData);
for (var i = 0; i < filterKeys.length; i++) {
var parameters = groupData[filterKeys[i]];
var controls = [
{name: "stiffness", type: "range", config: {"step": 0.05, "value": parameters.stiffness, "min":0.0, "max":1.0}},
{name: "gravity", type: "range", config: {"step": 0.0001, "value": parameters.gravity, "min":-0.05, "max":0.05}},
{name: "damping", type: "range", config: {"step": 0.05, "value": parameters.damping, "min":0.0, "max":1.0}},
{name: "inertia", type: "range", config: {"step": 0.05, "value": parameters.inertia, "min":0.0, "max":1.0}},
{name: "delta", type: "range", config: {"step": 0.05, "value": parameters.delta, "min":0.0, "max":1.0}},
{name: "friction", type: "range", config: {"step": 0.05, "value": parameters.friction, "min":0.0, "max":1.0}}
];
var groupElement = createGroup(filterKeys[i], controls);
$("#control-panel").append(groupElement);
}
} else if (message.type === MSG_SETTINGS_DATA) {
var controls = [
{name: "avatar", type: "checkbox", config: {"checked": message.data.avatar}},
{name: "collisions", type: "checkbox", config: {"checked": message.data.collisions}},
{name: "debug", type: "checkbox", config: {"checked": message.data.debug}},
{name: "solid", type: "checkbox", config: {"checked": message.data.solid}}
];
var groupElement = createGroup("Settings", controls);
$("#control-panel").append(groupElement);
} else if (message.type === MSG_CREATE) {
$("#control-panel").append(createDump());
$("#nodes-panel").append(createNodes());
$("#control-panel").trigger('create');
$("#nodes-panel").trigger('create');
$("input").change(function(event) {
var group = $(this).data("group");
var name = $(this).data("name");
if (groupData[group] && groupData[group][name]) {
groupData[group][name] = this.value;
updateDump();
}
EventBridge.emitWebEvent(JSON.stringify({type:MSG_INPUT_DATA, group: group, name: name, value: this.value}));
});
updateDump();
}
});
$(".nav-text").click(function() {
var index = $(this).data("idx");
if (index === 0) {
$("#nodes-panel").hide();
$("#control-panel").show();
} else {
$("#nodes-panel").show();
$("#control-panel").hide();
}
});
EventBridge.emitWebEvent(JSON.stringify({type: MSG_DOCUMENT_LOADED}));
});
</script>
<head>
<meta charset="utf-8" />
<style>
.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;
}
</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="#" class="ui-btn-active">Joints</a></li>
<li class="nav-text" data-idx=1 ><a href="#" >Nodes</a></li>
</ul>
</div><!-- /navbar -->
</div>
<div id="control-panel" style="margin:10px">
</div>
<div id="nodes-panel" style="margin:10px">
</div>
</body>
</head>
</html>