178 lines
6.4 KiB
HTML
178 lines
6.4 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>
|
|
$(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>
|