mirror of
https://github.com/overte-org/overte.git
synced 2025-04-25 23:56:29 +02:00
757 lines
40 KiB
HTML
757 lines
40 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() {
|
|
var properties = {};
|
|
properties[propertyName] = this.value;
|
|
EventBridge.emitWebEvent(
|
|
JSON.stringify({
|
|
type: "update",
|
|
properties: properties,
|
|
})
|
|
);
|
|
};
|
|
}
|
|
|
|
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 elID = document.getElementById("property-id");
|
|
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 elMoveSelectionToGrid = document.getElementById("move-selection-to-grid");
|
|
var elMoveAllToGrid = document.getElementById("move-all-to-grid");
|
|
|
|
var elDimensionsX = document.getElementById("property-dim-x");
|
|
var elDimensionsY = document.getElementById("property-dim-y");
|
|
var elDimensionsZ = document.getElementById("property-dim-z");
|
|
var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions");
|
|
var elRescaleDimensionsPct = document.getElementById("dimension-rescale-pct");
|
|
var elRescaleDimensionsButton = document.getElementById("dimension-rescale-button");
|
|
|
|
var elRegistrationX = document.getElementById("property-reg-x");
|
|
var elRegistrationY = document.getElementById("property-reg-y");
|
|
var elRegistrationZ = document.getElementById("property-reg-z");
|
|
|
|
var elRotationX = document.getElementById("property-rot-x");
|
|
var elRotationY = document.getElementById("property-rot-y");
|
|
var elRotationZ = document.getElementById("property-rot-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 elDensity = document.getElementById("property-density");
|
|
var elIgnoreForCollisions = document.getElementById("property-ignore-for-collisions");
|
|
var elCollisionsWillMove = document.getElementById("property-collisions-will-move");
|
|
var elLifetime = document.getElementById("property-lifetime");
|
|
var elScriptURL = document.getElementById("property-script-url");
|
|
|
|
var elBoxSections = document.querySelectorAll(".box-section");
|
|
var elBoxColorRed = document.getElementById("property-box-red");
|
|
var elBoxColorGreen = document.getElementById("property-box-green");
|
|
var elBoxColorBlue = document.getElementById("property-box-blue");
|
|
|
|
var elLightSections = document.querySelectorAll(".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 elModelSections = document.querySelectorAll(".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 elModelAnimationSettings = document.getElementById("property-model-animation-settings");
|
|
var elModelTextures = document.getElementById("property-model-textures");
|
|
var elModelOriginalTextures = document.getElementById("property-model-original-textures");
|
|
|
|
var elTextSections = document.querySelectorAll(".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;
|
|
|
|
elID.innerHTML = data.id;
|
|
|
|
elType.innerHTML = properties.type;
|
|
|
|
elLocked.checked = properties.locked;
|
|
|
|
if (properties.locked) {
|
|
disableChildren(document.getElementById("properties-list"), 'input');
|
|
elLocked.removeAttribute('disabled');
|
|
} else {
|
|
enableChildren(document.getElementById("properties-list"), '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);
|
|
|
|
elRotationX.value = properties.rotation.x.toFixed(2);
|
|
elRotationY.value = properties.rotation.y.toFixed(2);
|
|
elRotationZ.value = properties.rotation.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);
|
|
|
|
elDensity.value = properties.density.toFixed(2);
|
|
elIgnoreForCollisions.checked = properties.ignoreForCollisions;
|
|
elCollisionsWillMove.checked = properties.collisionsWillMove;
|
|
elLifetime.value = properties.lifetime;
|
|
elScriptURL.value = properties.script;
|
|
|
|
if (properties.type != "Box") {
|
|
for (var i = 0; i < elBoxSections.length; i++) {
|
|
elBoxSections[i].style.display = 'none';
|
|
}
|
|
} else {
|
|
for (var i = 0; i < elBoxSections.length; i++) {
|
|
elBoxSections[i].style.display = 'block';
|
|
}
|
|
|
|
elBoxColorRed.value = properties.color.red;
|
|
elBoxColorGreen.value = properties.color.green;
|
|
elBoxColorBlue.value = properties.color.blue;
|
|
}
|
|
|
|
if (properties.type != "Model") {
|
|
for (var i = 0; i < elModelSections.length; i++) {
|
|
elModelSections[i].style.display = 'none';
|
|
}
|
|
} else {
|
|
for (var i = 0; i < elModelSections.length; i++) {
|
|
elModelSections[i].style.display = 'block';
|
|
}
|
|
|
|
elModelURL.value = properties.modelURL;
|
|
elModelAnimationURL.value = properties.animationURL;
|
|
elModelAnimationPlaying.checked = properties.animationIsPlaying;
|
|
elModelAnimationFPS.value = properties.animationFPS;
|
|
elModelAnimationFrame.value = properties.animationFrameIndex;
|
|
elModelAnimationSettings.value = properties.animationSettings;
|
|
elModelTextures.value = properties.textures;
|
|
elModelOriginalTextures.value = properties.originalTextures;
|
|
}
|
|
|
|
if (properties.type != "Text") {
|
|
for (var i = 0; i < elTextSections.length; i++) {
|
|
elTextSections[i].style.display = 'none';
|
|
}
|
|
} else {
|
|
for (var i = 0; i < elTextSections.length; i++) {
|
|
elTextSections[i].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") {
|
|
for (var i = 0; i < elLightSections.length; i++) {
|
|
elLightSections[i].style.display = 'none';
|
|
}
|
|
} else {
|
|
for (var i = 0; i < elLightSections.length; i++) {
|
|
elLightSections[i].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 rotationChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'rotation', elRotationX, elRotationY, elRotationZ);
|
|
elRotationX.addEventListener('change', rotationChangeFunction);
|
|
elRotationY.addEventListener('change', rotationChangeFunction);
|
|
elRotationZ.addEventListener('change', rotationChangeFunction);
|
|
|
|
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);
|
|
|
|
elDensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('density'));
|
|
elIgnoreForCollisions.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ignoreForCollisions'));
|
|
elCollisionsWillMove.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionsWillMove'));
|
|
elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime'));
|
|
elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script'));
|
|
|
|
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'));
|
|
elModelAnimationSettings.addEventListener('change', createEmitTextPropertyUpdateFunction('animationSettings'));
|
|
elModelTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures'));
|
|
|
|
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);
|
|
|
|
elMoveSelectionToGrid.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "moveSelectionToGrid",
|
|
}));
|
|
});
|
|
elMoveAllToGrid.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "moveAllToGrid",
|
|
}));
|
|
});
|
|
elResetToNaturalDimensions.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "resetToNaturalDimensions",
|
|
}));
|
|
});
|
|
elRescaleDimensionsButton.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "rescaleDimensions",
|
|
percentage: parseInt(elRescaleDimensionsPct.value),
|
|
}));
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="properties" onload='loaded();'>
|
|
<div id="properties-list">
|
|
<div id="type" class="property">
|
|
<div class="label">
|
|
<label>Type: </label><span id="property-type"></span>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="value">
|
|
<label id="property-id" class="selectable"></label>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Locked</div>
|
|
<div class="value">
|
|
<input type='checkbox' id="property-locked">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Visible</div>
|
|
<div class="value">
|
|
<input type='checkbox' id="property-visible">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Position</div>
|
|
<div class="value">
|
|
<div class="input-area">X <br><input class="coord" type='number' id="property-pos-x"></input></div>
|
|
<div class="input-area">Y <br><input class="coord" type='number' id="property-pos-y"></input></div>
|
|
<div class="input-area">Z <br><input class="coord" type='number' id="property-pos-z"></input></div>
|
|
<div>
|
|
<input type="button" id="move-selection-to-grid" value="Selection to Grid">
|
|
<input type="button" id="move-all-to-grid" value="All to Grid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Registration</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-reg-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-reg-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-reg-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Dimensions</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-dim-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-dim-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-dim-z"></input></div>
|
|
<div>
|
|
<input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
|
|
</div>
|
|
<div class="input-area">
|
|
<input class="" type='number' id="dimension-rescale-pct" value=100></input>%
|
|
</div>
|
|
<span>
|
|
<input type="button" id="dimension-rescale-button" value="Rescale"></input>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Rotation</div>
|
|
<div class="value">
|
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-rot-x"></input></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-rot-y"></input></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-rot-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Linear Velocity</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-lvel-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-lvel-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-lvel-z"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Linear Damping</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-ldamping"></input>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Angular Velocity</div>
|
|
<div class="value">
|
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-avel-x"></input></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-avel-y"></input></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-avel-z"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Angular Damping</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-adamping"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Gravity</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-grav-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-grav-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-grav-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Mass</div>
|
|
<div class="value">
|
|
<input type='number' id="property-mass"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="label">Density</div>
|
|
<div>
|
|
<input type='number' id="property-density"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Ignore For Collisions</div>
|
|
<div class="value">
|
|
<input type='checkbox' id="property-ignore-for-collisions"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Collisions Will Move</div>
|
|
<div class="value">
|
|
<input type='checkbox' id="property-collisions-will-move"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Lifetime</div>
|
|
<div class="value">
|
|
<input type='number' id="property-lifetime"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Script URL</div>
|
|
<div class="value">
|
|
<input id="property-script-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="box-section property">
|
|
<div class="label">Color</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-box-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-box-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-box-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="model-section property">
|
|
<div class="label">Model URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-model-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-model-animation-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation Playing</div>
|
|
<div class="value">
|
|
<input type='checkbox' id="property-model-animation-playing">
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation FPS</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-model-animation-fps"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation Frame</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-model-animation-frame"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation Settings</div>
|
|
<div class="value">
|
|
<textarea id="property-model-animation-settings" value='asdfasdf'></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Textures</div>
|
|
<div class="value">
|
|
<textarea id="property-model-textures" value='asdfasdf'></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Original Textures</div>
|
|
<div class="value">
|
|
<textarea id="property-model-original-textures" readonly value='asdfasdf'></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="text-section property">
|
|
<div class="label">Text</div>
|
|
<div class="value">
|
|
<input type="text" id="property-text-text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="text-section property">
|
|
<div class="label">Line Height</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-text-line-height"></input>
|
|
</div>
|
|
</div>
|
|
<div class="text-section property">
|
|
<div class="label">Text Color</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-text-text-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-text-text-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-text-text-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-section property">
|
|
<div class="label">Background Color</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-text-background-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-text-background-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-text-background-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="light-section property">
|
|
<div class="label">Spot Light</div>
|
|
<div class="value">
|
|
<input type='checkbox' id="property-light-spot-light">
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Diffuse</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-light-diffuse-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-light-diffuse-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-light-diffuse-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Ambient</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-light-ambient-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-light-ambient-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-light-ambient-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Specular</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-light-specular-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-light-specular-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-light-specular-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Constant Attenuation</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-constant-attenuation"></input>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Linear Attenuation</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-linear-attenuation"></input>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Quadratic Attenuation</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-quadratic-attenuation"></input>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Exponent</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-exponent"></input>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Cutoff (degrees)</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-cutoff"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|