mirror of
https://github.com/overte-org/overte.git
synced 2025-04-25 14:13:47 +02:00
639 lines
32 KiB
HTML
639 lines
32 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<script>
|
|
function enableChildren(el, selector) {
|
|
els = el.querySelectorAll(selector);
|
|
for (var i = 0; i < els.length; i++) {
|
|
els[i].removeAttribute('disabled');
|
|
}
|
|
}
|
|
function disableChildren(el, selector) {
|
|
els = el.querySelectorAll(selector);
|
|
for (var i = 0; i < els.length; i++) {
|
|
els[i].setAttribute('disabled', 'disabled');
|
|
}
|
|
}
|
|
|
|
function createEmitCheckedPropertyUpdateFunction(propertyName) {
|
|
return function() {
|
|
EventBridge.emitWebEvent(
|
|
'{ "type":"update", "properties":{"' + propertyName + '":' + this.checked + '}}'
|
|
);
|
|
};
|
|
}
|
|
function createEmitNumberPropertyUpdateFunction(propertyName) {
|
|
return function() {
|
|
EventBridge.emitWebEvent(
|
|
'{ "type":"update", "properties":{"' + propertyName + '":' + this.value + '}}'
|
|
);
|
|
};
|
|
}
|
|
function createEmitTextPropertyUpdateFunction(propertyName) {
|
|
return function() {
|
|
EventBridge.emitWebEvent(
|
|
'{ "type":"update", "properties":{"' + propertyName + '":"' + this.value + '"}}'
|
|
);
|
|
};
|
|
}
|
|
|
|
function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) {
|
|
return function() {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
data.properties[property] = {
|
|
x: elX.value,
|
|
y: elY.value,
|
|
z: elZ.value,
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
}
|
|
};
|
|
|
|
function createEmitColorPropertyUpdateFunction(property, elRed, elGreen, elBlue) {
|
|
return function() {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
data.properties[property] = {
|
|
red: elRed.value,
|
|
green: elGreen.value,
|
|
blue: elBlue.value,
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
}
|
|
};
|
|
|
|
function loaded() {
|
|
var elType = document.getElementById("property-type");
|
|
var elLocked = document.getElementById("property-locked");
|
|
var elVisible = document.getElementById("property-visible");
|
|
var elPositionX = document.getElementById("property-pos-x");
|
|
var elPositionY = document.getElementById("property-pos-y");
|
|
var elPositionZ = document.getElementById("property-pos-z");
|
|
|
|
var elDimensionsX = document.getElementById("property-dim-x");
|
|
var elDimensionsY = document.getElementById("property-dim-y");
|
|
var elDimensionsZ = document.getElementById("property-dim-z");
|
|
|
|
var elRegistrationX = document.getElementById("property-reg-x");
|
|
var elRegistrationY = document.getElementById("property-reg-y");
|
|
var elRegistrationZ = document.getElementById("property-reg-z");
|
|
|
|
var elLinearVelocityX = document.getElementById("property-lvel-x");
|
|
var elLinearVelocityY = document.getElementById("property-lvel-y");
|
|
var elLinearVelocityZ = document.getElementById("property-lvel-z");
|
|
var elLinearDamping = document.getElementById("property-ldamping");
|
|
|
|
var elAngularVelocityX = document.getElementById("property-avel-x");
|
|
var elAngularVelocityY = document.getElementById("property-avel-y");
|
|
var elAngularVelocityZ = document.getElementById("property-avel-z");
|
|
var elAngularDamping = document.getElementById("property-adamping");
|
|
|
|
var elGravityX = document.getElementById("property-grav-x");
|
|
var elGravityY = document.getElementById("property-grav-y");
|
|
var elGravityZ = document.getElementById("property-grav-z");
|
|
|
|
var elMass = document.getElementById("property-mass");
|
|
var elIgnoreForCollisions = document.getElementById("property-ignore-for-collisions");
|
|
var elCollisionsWillMove = document.getElementById("property-collisions-will-move");
|
|
var elLifetime = document.getElementById("property-lifetime");
|
|
|
|
var elBoxSection = document.getElementById("box-section");
|
|
var elBoxColorRed = document.getElementById("property-box-red");
|
|
var elBoxColorGreen = document.getElementById("property-box-green");
|
|
var elBoxColorBlue = document.getElementById("property-box-blue");
|
|
|
|
var elLightSection = document.getElementById('light-section');
|
|
var elLightSpotLight = document.getElementById("property-light-spot-light");
|
|
var elLightDiffuseRed = document.getElementById("property-light-diffuse-red");
|
|
var elLightDiffuseGreen = document.getElementById("property-light-diffuse-green");
|
|
var elLightDiffuseBlue = document.getElementById("property-light-diffuse-blue");
|
|
|
|
var elLightAmbientRed = document.getElementById("property-light-ambient-red");
|
|
var elLightAmbientGreen = document.getElementById("property-light-ambient-green");
|
|
var elLightAmbientBlue = document.getElementById("property-light-ambient-blue");
|
|
|
|
var elLightSpecularRed = document.getElementById("property-light-specular-red");
|
|
var elLightSpecularGreen = document.getElementById("property-light-specular-green");
|
|
var elLightSpecularBlue = document.getElementById("property-light-specular-blue");
|
|
|
|
var elLightConstantAttenuation = document.getElementById("property-light-constant-attenuation");
|
|
var elLightLinearAttenuation = document.getElementById("property-light-linear-attenuation");
|
|
var elLightQuadraticAttenuation = document.getElementById("property-light-quadratic-attenuation");
|
|
var elLightExponent = document.getElementById("property-light-exponent");
|
|
var elLightCutoff = document.getElementById("property-light-cutoff");
|
|
|
|
var elModelSection = document.getElementById("model-section");
|
|
var elModelURL = document.getElementById("property-model-url");
|
|
var elModelAnimationURL = document.getElementById("property-model-animation-url");
|
|
var elModelAnimationPlaying = document.getElementById("property-model-animation-playing");
|
|
var elModelAnimationFPS = document.getElementById("property-model-animation-fps");
|
|
var elModelAnimationFrame = document.getElementById("property-model-animation-frame");
|
|
|
|
var elTextSection = document.getElementById("text-section");
|
|
var elTextText = document.getElementById("property-text-text");
|
|
var elTextLineHeight = document.getElementById("property-text-line-height");
|
|
var elTextTextColorRed = document.getElementById("property-text-text-color-red");
|
|
var elTextTextColorGreen = document.getElementById("property-text-text-color-green");
|
|
var elTextTextColorBlue = document.getElementById("property-text-text-color-blue");
|
|
var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red");
|
|
var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
|
|
var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue");
|
|
|
|
if (window.EventBridge !== undefined) {
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
|
data = JSON.parse(data);
|
|
if (data.type == "update") {
|
|
if (data.properties === undefined) {
|
|
disableChildren(document.getElementById("properties"), 'input');
|
|
} else {
|
|
var properties = data.properties;
|
|
|
|
elType.innerHTML = properties.type;
|
|
|
|
elLocked.checked = properties.locked;
|
|
|
|
if (properties.locked) {
|
|
disableChildren(document.getElementById("properties"), 'input');
|
|
elLocked.removeAttribute('disabled');
|
|
} else {
|
|
enableChildren(document.getElementById("properties"), 'input');
|
|
|
|
elVisible.checked = properties.visible;
|
|
|
|
elPositionX.value = properties.position.x.toFixed(2);
|
|
elPositionY.value = properties.position.y.toFixed(2);
|
|
elPositionZ.value = properties.position.z.toFixed(2);
|
|
|
|
elDimensionsX.value = properties.dimensions.x.toFixed(2);
|
|
elDimensionsY.value = properties.dimensions.y.toFixed(2);
|
|
elDimensionsZ.value = properties.dimensions.z.toFixed(2);
|
|
|
|
elRegistrationX.value = properties.registrationPoint.x.toFixed(2);
|
|
elRegistrationY.value = properties.registrationPoint.y.toFixed(2);
|
|
elRegistrationZ.value = properties.registrationPoint.z.toFixed(2);
|
|
|
|
elLinearVelocityX.value = properties.velocity.x.toFixed(2);
|
|
elLinearVelocityY.value = properties.velocity.y.toFixed(2);
|
|
elLinearVelocityZ.value = properties.velocity.z.toFixed(2);
|
|
elLinearDamping.value = properties.damping.toFixed(2);
|
|
|
|
elAngularVelocityX.value = properties.angularVelocity.x.toFixed(2);
|
|
elAngularVelocityY.value = properties.angularVelocity.y.toFixed(2);
|
|
elAngularVelocityZ.value = properties.angularVelocity.z.toFixed(2);
|
|
elAngularDamping.value = properties.angularDamping.toFixed(2);
|
|
|
|
elGravityX.value = properties.gravity.x.toFixed(2);
|
|
elGravityY.value = properties.gravity.y.toFixed(2);
|
|
elGravityZ.value = properties.gravity.z.toFixed(2);
|
|
|
|
elMass.value = properties.mass.toFixed(2);
|
|
elIgnoreForCollisions.checked = properties.ignoreForCollisions;
|
|
elCollisionsWillMove.checked = properties.collisionsWillMove;
|
|
elLifetime.value = properties.lifetime;
|
|
|
|
if (properties.type != "Box") {
|
|
elBoxSection.style.display = 'none';
|
|
} else {
|
|
elBoxSection.style.display = 'block';
|
|
|
|
elBoxColorRed.value = properties.color.red;
|
|
elBoxColorGreen.value = properties.color.green;
|
|
elBoxColorBlue.value = properties.color.blue;
|
|
}
|
|
|
|
if (properties.type != "Model") {
|
|
elModelSection.style.display = 'none';
|
|
} else {
|
|
elModelSection.style.display = 'block';
|
|
elModelURL.value = properties.modelURL;
|
|
elModelAnimationURL.value = properties.animationURL;
|
|
elModelAnimationPlaying.checked = properties.animationPlaying;
|
|
elModelAnimationFPS.value = properties.animationFPS;
|
|
}
|
|
|
|
if (properties.type != "Text") {
|
|
elTextSection.style.display = 'none';
|
|
} else {
|
|
elTextSection.style.display = 'block';
|
|
|
|
elTextText.value = properties.text;
|
|
elTextLineHeight.value = properties.lineHeight;
|
|
elTextTextColorRed.value = properties.textColor.red;
|
|
elTextTextColorGreen.value = properties.textColor.green;
|
|
elTextTextColorBlue.value = properties.textColor.blue;
|
|
elTextBackgroundColorRed.value = properties.backgroundColor.red;
|
|
elTextBackgroundColorGreen.value = properties.backgroundColor.green;
|
|
elTextBackgroundColorBlue.value = properties.backgroundColor.blue;
|
|
}
|
|
|
|
if (properties.type != "Light") {
|
|
elLightSection.style.display = 'none';
|
|
} else {
|
|
elLightSection.style.display = 'block';
|
|
|
|
elLightDiffuseRed.value = properties.diffuseColor.red;
|
|
elLightDiffuseGreen.value = properties.diffuseColor.green;
|
|
elLightDiffuseBlue.value = properties.diffuseColor.blue;
|
|
|
|
elLightAmbientRed.value = properties.ambientColor.red;
|
|
elLightAmbientGreen.value = properties.ambientColor.green;
|
|
elLightAmbientBlue.value = properties.ambientColor.blue;
|
|
|
|
elLightSpecularRed.value = properties.specularColor.red;
|
|
elLightSpecularGreen.value = properties.specularColor.green;
|
|
elLightSpecularBlue.value = properties.specularColor.blue;
|
|
|
|
elLightConstantAttenuation.value = properties.constantAttenuation;
|
|
elLightLinearAttenuation.value = properties.linearAttenuation;
|
|
elLightQuadraticAttenuation.value = properties.quadraticAttenuation;
|
|
elLightExponent.value = properties.exponent;
|
|
elLightCutoff.value = properties.cutoff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
elLocked.addEventListener('change', createEmitCheckedPropertyUpdateFunction('locked'));
|
|
elVisible.addEventListener('change', createEmitCheckedPropertyUpdateFunction('visible'));
|
|
|
|
var positionChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'position', elPositionX, elPositionY, elPositionZ);
|
|
elPositionX.addEventListener('change', positionChangeFunction);
|
|
elPositionY.addEventListener('change', positionChangeFunction);
|
|
elPositionZ.addEventListener('change', positionChangeFunction);
|
|
|
|
var dimensionsChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'dimensions', elDimensionsX, elDimensionsY, elDimensionsZ);
|
|
elDimensionsX.addEventListener('change', dimensionsChangeFunction);
|
|
elDimensionsY.addEventListener('change', dimensionsChangeFunction);
|
|
elDimensionsZ.addEventListener('change', dimensionsChangeFunction);
|
|
|
|
var registrationChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'registrationPoint', elRegistrationX, elRegistrationY, elRegistrationZ);
|
|
elRegistrationX.addEventListener('change', registrationChangeFunction);
|
|
elRegistrationY.addEventListener('change', registrationChangeFunction);
|
|
elRegistrationZ.addEventListener('change', registrationChangeFunction);
|
|
|
|
var velocityChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ);
|
|
elLinearVelocityX.addEventListener('change', velocityChangeFunction);
|
|
elLinearVelocityY.addEventListener('change', velocityChangeFunction);
|
|
elLinearVelocityZ.addEventListener('change', velocityChangeFunction);
|
|
elLinearDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('damping'));
|
|
|
|
var angularVelocityChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ);
|
|
elAngularVelocityX.addEventListener('change', angularVelocityChangeFunction);
|
|
elAngularVelocityY.addEventListener('change', angularVelocityChangeFunction);
|
|
elAngularVelocityZ.addEventListener('change', angularVelocityChangeFunction);
|
|
elAngularDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('angularDamping'))
|
|
|
|
var gravityChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'gravity', elGravityX, elGravityY, elGravityZ);
|
|
elGravityX.addEventListener('change', gravityChangeFunction);
|
|
elGravityY.addEventListener('change', gravityChangeFunction);
|
|
elGravityZ.addEventListener('change', gravityChangeFunction);
|
|
|
|
elMass.addEventListener('change', createEmitNumberPropertyUpdateFunction('mass'));
|
|
elIgnoreForCollisions.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ignoreForCollisions'));
|
|
elCollisionsWillMove.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionsWillMove'));
|
|
elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime'));
|
|
|
|
var boxColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'color', elBoxColorRed, elBoxColorGreen, elBoxColorBlue);
|
|
elBoxColorRed.addEventListener('change', boxColorChangeFunction);
|
|
elBoxColorGreen.addEventListener('change', boxColorChangeFunction);
|
|
elBoxColorBlue.addEventListener('change', boxColorChangeFunction);
|
|
|
|
elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
|
|
|
|
var lightDiffuseChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'diffuseColor', elLightDiffuseRed, elLightDiffuseGreen, elLightDiffuseBlue);
|
|
elLightDiffuseRed.addEventListener('change', lightDiffuseChangeFunction);
|
|
elLightDiffuseGreen.addEventListener('change', lightDiffuseChangeFunction);
|
|
elLightDiffuseBlue.addEventListener('change', lightDiffuseChangeFunction);
|
|
|
|
var lightAmbientChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'ambientColor', elLightAmbientRed, elLightAmbientGreen, elLightAmbientBlue);
|
|
elLightAmbientRed.addEventListener('change', lightAmbientChangeFunction);
|
|
elLightAmbientGreen.addEventListener('change', lightAmbientChangeFunction);
|
|
elLightAmbientBlue.addEventListener('change', lightAmbientChangeFunction);
|
|
|
|
var lightSpecularChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'specularColor', elLightSpecularRed, elLightSpecularGreen, elLightSpecularBlue);
|
|
elLightSpecularRed.addEventListener('change', lightSpecularChangeFunction);
|
|
elLightSpecularGreen.addEventListener('change', lightSpecularChangeFunction);
|
|
elLightSpecularBlue.addEventListener('change', lightSpecularChangeFunction);
|
|
|
|
elLightConstantAttenuation.addEventListener('change', createEmitNumberPropertyUpdateFunction('constantAttenuation'));
|
|
elLightLinearAttenuation.addEventListener('change', createEmitNumberPropertyUpdateFunction('linearAttenuation'));
|
|
elLightQuadraticAttenuation.addEventListener('change', createEmitNumberPropertyUpdateFunction('quadraticAttenuation'));
|
|
elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent'));
|
|
elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff'));
|
|
|
|
elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL'));
|
|
elModelAnimationURL.addEventListener('change', createEmitTextPropertyUpdateFunction('animationURL'));
|
|
elModelAnimationPlaying.addEventListener('change', createEmitCheckedPropertyUpdateFunction('animationIsPlaying'));
|
|
elModelAnimationFPS.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFPS'));
|
|
elModelAnimationFrame.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFrameIndex'));
|
|
|
|
elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text'));
|
|
elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight'));
|
|
|
|
var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue);
|
|
elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
|
|
elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
|
|
elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
|
|
|
|
var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
|
|
elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
|
|
elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
|
|
elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload='loaded();'>
|
|
<div class="section-header">
|
|
<label>Entity Properties</label>
|
|
</div>
|
|
<div id="properties" class="grid-section">
|
|
<div class="property-section">
|
|
<label>Type</label>
|
|
<span>
|
|
<label id="property-type"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Locked</label>
|
|
<span>
|
|
<input type='checkbox' id="property-locked">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Visible</label>
|
|
<span>
|
|
<input type='checkbox' id="property-visible">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Position</label>
|
|
<span>
|
|
X <input class="coord" type='number' id="property-pos-x"></input>
|
|
Y <input class="coord" type='number' id="property-pos-y"></input>
|
|
Z <input class="coord" type='number' id="property-pos-z"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Registration</label>
|
|
<span>
|
|
X <input class="coord" type='number' id="property-reg-x"></input>
|
|
Y <input class="coord" type='number' id="property-reg-y"></input>
|
|
Z <input class="coord" type='number' id="property-reg-z"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Width</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-dim-x"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Height</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-dim-y"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Depth</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-dim-z"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Linear</label>
|
|
<span>
|
|
X <input class="coord" type='number' id="property-lvel-x"></input>
|
|
Y <input class="coord" type='number' id="property-lvel-y"></input>
|
|
Z <input class="coord" type='number' id="property-lvel-z"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Linear Damping</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-ldamping"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Angular</label>
|
|
<span>
|
|
Pitch <input class="coord" type='number' id="property-avel-x"></input>
|
|
Roll <input class="coord" type='number' id="property-avel-z"></input>
|
|
Yaw <input class="coord" type='number' id="property-avel-y"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Angular Damping</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-adamping"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Gravity</label>
|
|
<span>
|
|
X <input class="coord" type='number' id="property-grav-x"></input>
|
|
Y <input class="coord" type='number' id="property-grav-y"></input>
|
|
Z <input class="coord" type='number' id="property-grav-z"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Mass</label>
|
|
<span>
|
|
<input type='number' id="property-mass"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Ignore For Collisions</label>
|
|
<span>
|
|
<input type='checkbox' id="property-ignore-for-collisions"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Collisions Will Move</label>
|
|
<span>
|
|
<input type='checkbox' id="property-collisions-will-move"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<label>Lifetime</label>
|
|
<span>
|
|
<input type='number' id="property-lifetime"></input>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div id="box-section" class="multi-property-section">
|
|
<div class="property-section">
|
|
<label>Color</label>
|
|
<span>
|
|
Red <input class="coord" type='number' id="property-box-red"></input>
|
|
Green <input class="coord" type='number' id="property-box-green"></input>
|
|
Blue <input class="coord" type='number' id="property-box-blue"></input>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="model-section" class="multi-property-section">
|
|
<div class="property-section">
|
|
<label>Model URL</label>
|
|
<span>
|
|
<input type="text" id="property-model-url"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Animation URL</label>
|
|
<span>
|
|
<input type="text" id="property-model-animation-url"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Animation Playing</label>
|
|
<span>
|
|
<input type='checkbox' id="property-model-animation-playing">
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Animation FPS</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-model-animation-fps"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Animation Frame</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-model-animation-frame"></input>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="text-section" class="multi-property-section">
|
|
<div class="property-section">
|
|
<label>Text</label>
|
|
<span>
|
|
<input type="text" id="property-text-text"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Line Height</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-text-line-height"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Text Color</label>
|
|
<span>
|
|
Red <input class="coord" type='number' id="property-text-text-color-red"></input>
|
|
Green <input class="coord" type='number' id="property-text-text-color-green"></input>
|
|
Blue <input class="coord" type='number' id="property-text-text-color-blue"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Background Color</label>
|
|
<span>
|
|
Red <input class="coord" type='number' id="property-text-background-color-red"></input>
|
|
Green <input class="coord" type='number' id="property-text-background-color-green"></input>
|
|
Blue <input class="coord" type='number' id="property-text-background-color-blue"></input>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="light-section" class="multi-property-section">
|
|
<div class="property-section">
|
|
<label>Spot Light</label>
|
|
<span>
|
|
<input type='checkbox' id="property-light-spot-light">
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Diffuse</label>
|
|
<span>
|
|
Red <input class="coord" type='number' id="property-light-diffuse-red"></input>
|
|
Green <input class="coord" type='number' id="property-light-diffuse-green"></input>
|
|
Blue <input class="coord" type='number' id="property-light-diffuse-blue"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Ambient</label>
|
|
<span>
|
|
Red <input class="coord" type='number' id="property-light-ambient-red"></input>
|
|
Green <input class="coord" type='number' id="property-light-ambient-green"></input>
|
|
Blue <input class="coord" type='number' id="property-light-ambient-blue"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Specular</label>
|
|
<span>
|
|
Red <input class="coord" type='number' id="property-light-specular-red"></input>
|
|
Green <input class="coord" type='number' id="property-light-specular-green"></input>
|
|
Blue <input class="coord" type='number' id="property-light-specular-blue"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Constant Attenuation</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-light-constant-attenuation"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Linear Attenuation</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-light-linear-attenuation"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Quadratic Attenuation</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-light-quadratic-attenuation"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Exponent</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-light-exponent"></input>
|
|
</span>
|
|
</div>
|
|
<div class="property-section">
|
|
<label>Cutoff (degrees)</label>
|
|
<span>
|
|
<input class="coord" type='number' id="property-light-cutoff"></input>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|