<html>
<head>
<link rel="stylesheet" type="text/css" href="walkStyle.css">
<script>
function emitUpdate() {
EventBridge.emitWebEvent(JSON.stringify({
type: "update",
armsFree: elArmsFree.checked,
makesFootStepSounds: elFootstepSounds.checked,
blenderPreRotations: elBlenderPreRotations.checked
}));
}
function loaded() {
// assign form elements to vars
var powerOn = true;
elPower = document.getElementById("power");
elArmsFree = document.getElementById("arms-free");
elFootstepSounds = document.getElementById("footstep-sounds");
elBlenderPreRotations = document.getElementById("bender-pre-rotations");
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.type == "update") {
if (data.armsFree !== undefined) {
elArmsFree.checked = data.armsFree;
}
if (data.makesFootStepSounds !== undefined) {
elFootstepSounds.checked = data.makesFootStepSounds;
}
if (data.blenderPreRotations !== undefined) {
elBlenderPreRotations.checked = data.blenderPreRotations;
}
}
});
}
elArmsFree.addEventListener("change", emitUpdate);
elFootstepSounds.addEventListener("change", emitUpdate);
elBlenderPreRotations.addEventListener("change", emitUpdate);
elPower.addEventListener("click", function() {
EventBridge.emitWebEvent(JSON.stringify({
type: "powerToggle"
}));
powerOn = !powerOn;
if (powerOn) {
elPower.value = "Turn Animation Off";
} else {
elPower.value = "Turn Animation On";
}
});
// request initial values
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
}
</script>
</head>
<body onload='loaded();'>
<div>
<div id="walk-settings-header">
<input type="button" id="power" value="Turn Animation Off" style="margin-left:30px; margin-top:10px"></button>
</div>
<div class="settings-section">
<label>Arms free</label>
<span>
<input type='checkbox' id="arms-free">
</span>
</div>
<div class="settings-section">
<label>Footstep sounds</label>
<span>
<input type='checkbox' id="footstep-sounds">
</span>
</div>
<div class="settings-section">
<label>Blender pre-rotations</label>
<span>
<input type='checkbox' id="bender-pre-rotations">
</span>
</div>
</div>
</body>
</html>