mirror of
https://github.com/overte-org/overte.git
synced 2025-04-26 03:56:11 +02:00
82a53c9139
This fixes the issue of properties present in a couple sections but not all that are going to only be displayed for the last section the are in that is being processed.
954 lines
51 KiB
HTML
954 lines
51 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<script>
|
|
var PI = 3.14159265358979;
|
|
var DEGREES_TO_RADIANS = PI / 180.0;
|
|
var RADIANS_TO_DEGREES = 180.0 / PI;
|
|
|
|
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 createEmitVec3PropertyUpdateFunctionWithMultiplier(property, elX, elY, elZ, multiplier) {
|
|
return function() {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
data.properties[property] = {
|
|
x: elX.value * multiplier,
|
|
y: elY.value * multiplier,
|
|
z: elZ.value * multiplier,
|
|
};
|
|
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 allSections = [];
|
|
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 elAccelerationX = document.getElementById("property-lacc-x");
|
|
var elAccelerationY = document.getElementById("property-lacc-y");
|
|
var elAccelerationZ = document.getElementById("property-lacc-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 elUserData = document.getElementById("property-user-data");
|
|
|
|
var elBoxSections = document.querySelectorAll(".box-section");
|
|
allSections.push(elBoxSections);
|
|
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");
|
|
allSections.push(elLightSections);
|
|
var elLightSpotLight = document.getElementById("property-light-spot-light");
|
|
var elLightColorRed = document.getElementById("property-light-color-red");
|
|
var elLightColorGreen = document.getElementById("property-light-color-green");
|
|
var elLightColorBlue = document.getElementById("property-light-color-blue");
|
|
|
|
var elLightIntensity = document.getElementById("property-light-intensity");
|
|
var elLightExponent = document.getElementById("property-light-exponent");
|
|
var elLightCutoff = document.getElementById("property-light-cutoff");
|
|
|
|
var elModelSections = document.querySelectorAll(".model-section");
|
|
allSections.push(elModelSections);
|
|
var elModelURL = document.getElementById("property-model-url");
|
|
var elShapeType = document.getElementById("property-shape-type");
|
|
var elCompoundShapeURL = document.getElementById("property-compound-shape-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");
|
|
allSections.push(elTextSections);
|
|
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");
|
|
|
|
var elZoneSections = document.querySelectorAll(".zone-section");
|
|
allSections.push(elZoneSections);
|
|
var elZoneStageSunModelEnabled = document.getElementById("property-zone-stage-sun-model-enabled");
|
|
var elZoneKeyLightColorRed = document.getElementById("property-zone-key-light-color-red");
|
|
var elZoneKeyLightColorGreen = document.getElementById("property-zone-key-light-color-green");
|
|
var elZoneKeyLightColorBlue = document.getElementById("property-zone-key-light-color-blue");
|
|
var elZoneKeyLightIntensity = document.getElementById("property-zone-key-intensity");
|
|
var elZoneKeyLightAmbientIntensity = document.getElementById("property-zone-key-ambient-intensity");
|
|
var elZoneKeyLightDirectionX = document.getElementById("property-zone-key-light-direction-x");
|
|
var elZoneKeyLightDirectionY = document.getElementById("property-zone-key-light-direction-y");
|
|
var elZoneKeyLightDirectionZ = document.getElementById("property-zone-key-light-direction-z");
|
|
|
|
var elZoneStageLatitude = document.getElementById("property-zone-stage-latitude");
|
|
var elZoneStageLongitude = document.getElementById("property-zone-stage-longitude");
|
|
var elZoneStageAltitude = document.getElementById("property-zone-stage-altitude");
|
|
var elZoneStageDay = document.getElementById("property-zone-stage-day");
|
|
var elZoneStageHour = document.getElementById("property-zone-stage-hour");
|
|
|
|
if (window.EventBridge !== undefined) {
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
|
data = JSON.parse(data);
|
|
if (data.type == "update") {
|
|
if (data.selections.length == 0) {
|
|
elType.innerHTML = "<i>No Selection</i>";
|
|
elID.innerHTML = "";
|
|
disableChildren(document.getElementById("properties-list"), 'input');
|
|
} else if (data.selections.length > 1) {
|
|
var selections = data.selections;
|
|
|
|
var ids = [];
|
|
var types = {};
|
|
|
|
for (var i = 0; i < selections.length; i++) {
|
|
ids.push(selections[i].id);
|
|
var type = selections[i].properties.type;
|
|
if (types[type] === undefined) {
|
|
types[type] = 0;
|
|
}
|
|
types[type]++;
|
|
}
|
|
elID.innerHTML = ids.join("<br>");
|
|
|
|
var typeStrs = [];
|
|
for (type in types) {
|
|
typeStrs.push(type + " (" + types[type] + ")");
|
|
}
|
|
elType.innerHTML = typeStrs.join(", ");
|
|
|
|
disableChildren(document.getElementById("properties-list"), 'input');
|
|
} else {
|
|
var activeElement = document.activeElement;
|
|
|
|
try {
|
|
var selected = (activeElement
|
|
&& activeElement.selectionStart == 0
|
|
&& activeElement.selectionEnd == activeElement.value.length);
|
|
} catch (e) {
|
|
var selected = false;
|
|
}
|
|
|
|
var properties = data.selections[0].properties;
|
|
|
|
elID.innerHTML = properties.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 * RADIANS_TO_DEGREES).toFixed(2);
|
|
elAngularVelocityY.value = (properties.angularVelocity.y * RADIANS_TO_DEGREES).toFixed(2);
|
|
elAngularVelocityZ.value = (properties.angularVelocity.z * RADIANS_TO_DEGREES).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);
|
|
|
|
elAccelerationX.value = properties.acceleration.x.toFixed(2);
|
|
elAccelerationY.value = properties.acceleration.y.toFixed(2);
|
|
elAccelerationZ.value = properties.acceleration.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;
|
|
elUserData.value = properties.userData;
|
|
|
|
for (var i = 0; i < allSections.length; i++) {
|
|
for (var j = 0; j < allSections[i].length; j++) {
|
|
allSections[i][j].style.display = 'none';
|
|
}
|
|
}
|
|
|
|
if (properties.type == "Box") {
|
|
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;
|
|
} else if (properties.type == "Model") {
|
|
for (var i = 0; i < elModelSections.length; i++) {
|
|
elModelSections[i].style.display = 'block';
|
|
}
|
|
|
|
elModelURL.value = properties.modelURL;
|
|
elShapeType.value = properties.shapeType;
|
|
elCompoundShapeURL.value = properties.compoundShapeURL;
|
|
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;
|
|
} else if (properties.type == "Text") {
|
|
for (var i = 0; i < elTextSections.length; i++) {
|
|
elTextSections[i].style.display = 'block';
|
|
}
|
|
|
|
elTextText.value = properties.text;
|
|
elTextLineHeight.value = properties.lineHeight.toFixed(4);
|
|
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;
|
|
} else if (properties.type == "Light") {
|
|
for (var i = 0; i < elLightSections.length; i++) {
|
|
elLightSections[i].style.display = 'block';
|
|
}
|
|
|
|
elLightSpotLight.checked = properties.isSpotlight;
|
|
|
|
elLightColorRed.value = properties.color.red;
|
|
elLightColorGreen.value = properties.color.green;
|
|
elLightColorBlue.value = properties.color.blue;
|
|
|
|
elLightIntensity.value = properties.intensity;
|
|
elLightExponent.value = properties.exponent;
|
|
elLightCutoff.value = properties.cutoff;
|
|
} else if (properties.type == "Zone") {
|
|
for (var i = 0; i < elZoneSections.length; i++) {
|
|
elZoneSections[i].style.display = 'block';
|
|
}
|
|
|
|
elZoneStageSunModelEnabled.checked = properties.stageSunModelEnabled;
|
|
elZoneKeyLightColorRed.value = properties.keyLightColor.red;
|
|
elZoneKeyLightColorGreen.value = properties.keyLightColor.green;
|
|
elZoneKeyLightColorBlue.value = properties.keyLightColor.blue;
|
|
elZoneKeyLightIntensity.value = properties.keyLightIntensity.toFixed(2);
|
|
elZoneKeyLightAmbientIntensity.value = properties.keyLightAmbientIntensity.toFixed(2);
|
|
elZoneKeyLightDirectionX.value = properties.keyLightDirection.x.toFixed(2);
|
|
elZoneKeyLightDirectionY.value = properties.keyLightDirection.y.toFixed(2);
|
|
elZoneKeyLightDirectionZ.value = properties.keyLightDirection.z.toFixed(2);
|
|
|
|
elZoneStageLatitude.value = properties.stageLatitude.toFixed(2);
|
|
elZoneStageLongitude.value = properties.stageLongitude.toFixed(2);
|
|
elZoneStageAltitude.value = properties.stageAltitude.toFixed(2);
|
|
elZoneStageDay.value = properties.stageDay;
|
|
elZoneStageHour.value = properties.stageHour;
|
|
elShapeType.value = properties.shapeType;
|
|
elCompoundShapeURL.value = properties.compoundShapeURL;
|
|
}
|
|
|
|
if (selected) {
|
|
activeElement.focus();
|
|
activeElement.select();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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 = createEmitVec3PropertyUpdateFunctionWithMultiplier(
|
|
'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ, DEGREES_TO_RADIANS);
|
|
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);
|
|
|
|
var accelerationChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'acceleration', elAccelerationX, elAccelerationY, elAccelerationZ);
|
|
elAccelerationX.addEventListener('change', accelerationChangeFunction);
|
|
elAccelerationY.addEventListener('change', accelerationChangeFunction);
|
|
elAccelerationZ.addEventListener('change', accelerationChangeFunction);
|
|
|
|
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'));
|
|
elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData'));
|
|
|
|
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 lightColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'color', elLightColorRed, elLightColorGreen, elLightColorBlue);
|
|
elLightColorRed.addEventListener('change', lightColorChangeFunction);
|
|
elLightColorGreen.addEventListener('change', lightColorChangeFunction);
|
|
elLightColorBlue.addEventListener('change', lightColorChangeFunction);
|
|
|
|
elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity'));
|
|
elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent'));
|
|
elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff'));
|
|
|
|
elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL'));
|
|
elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType'));
|
|
elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL'));
|
|
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);
|
|
|
|
elZoneStageSunModelEnabled.addEventListener('change', createEmitCheckedPropertyUpdateFunction('stageSunModelEnabled'));
|
|
var zoneKeyLightColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'keyLightColor', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
|
|
elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('keyLightIntensity'));
|
|
elZoneKeyLightAmbientIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('keyLightAmbientIntensity'));
|
|
var zoneKeyLightDirectionChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'keyLightDirection', elZoneKeyLightDirectionX, elZoneKeyLightDirectionY, elZoneKeyLightDirectionZ);
|
|
elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
elZoneKeyLightDirectionZ.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
|
|
elZoneStageLatitude.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageLatitude'));
|
|
elZoneStageLongitude.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageLongitude'));
|
|
elZoneStageAltitude.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageAltitude'));
|
|
elZoneStageDay.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageDay'));
|
|
elZoneStageHour.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageHour'));
|
|
|
|
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),
|
|
}));
|
|
});
|
|
|
|
window.onblur = function() {
|
|
// Fake a change event
|
|
var ev = document.createEvent("HTMLEvents");
|
|
ev.initEvent("change", true, true);
|
|
document.activeElement.dispatchEvent(ev);
|
|
}
|
|
|
|
// For input and textarea elements, select all of the text on focus
|
|
// WebKit-based browsers, such as is used with QWebView, have a quirk
|
|
// where the mouseup event comes after the focus event, causing the
|
|
// text to be deselected immediately after selecting all of the text.
|
|
// To make this work we block the first mouseup event after the elements
|
|
// received focus. If we block all mouseup events the user will not
|
|
// be able to click within the selected text.
|
|
// We also check to see if the value has changed to make sure we aren't
|
|
// blocking a mouse-up event when clicking on an input spinner.
|
|
var els = document.querySelectorAll("input, textarea");
|
|
for (var i = 0; i < els.length; i++) {
|
|
var clicked = false;
|
|
var originalText;
|
|
els[i].onfocus = function() {
|
|
originalText = this.value;
|
|
this.select();
|
|
clicked = false;
|
|
};
|
|
els[i].onmouseup = function(e) {
|
|
if (!clicked && originalText == this.value) {
|
|
e.preventDefault();
|
|
}
|
|
clicked = true;
|
|
};
|
|
}
|
|
}
|
|
</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">
|
|
<span class="label">Locked</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-locked">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Visible</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-visible">
|
|
</span>
|
|
</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">Acceleration</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-lacc-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-lacc-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-lacc-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Density</div>
|
|
<div>
|
|
<input type='number' id="property-density"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Ignore For Collisions</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-ignore-for-collisions"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Collisions Will Move</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-collisions-will-move"></input>
|
|
</span>
|
|
</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="property">
|
|
<div class="label">User Data</div>
|
|
<div class="value">
|
|
<textarea id="property-user-data"></textarea>
|
|
</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 zone-section property">
|
|
<div class="label">Shape Type</div>
|
|
<div class="value">
|
|
<select name="SelectShapeType" id="property-shape-type" name="SelectShapeType">
|
|
<option value='none'>none</option>
|
|
<option value='box'>box</option>
|
|
<option value='sphere'>sphere</option>
|
|
<option value='compound'>compound</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="model-section zone-section property">
|
|
<div class="label">Compound Shape URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-compound-shape-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">
|
|
<span class="label">Animation Playing</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-model-animation-playing">
|
|
</span>
|
|
</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"></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" min="0" step="0.005"></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">
|
|
<span class="label">Spot Light</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-light-spot-light">
|
|
</span>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Color</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-light-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-light-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-light-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-intensity"></input>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Spot Light 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">Spot Light Cutoff (degrees)</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-cutoff"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<span class="label">Stage Sun Model Enabled</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-zone-stage-sun-model-enabled">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Color</div>
|
|
<div class="value">
|
|
<div class="input-area">R <input class="coord" type='number' id="property-zone-key-light-color-red" min="0" max="255" step="1"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-zone-key-light-color-green" min="0" max="255" step="1"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-zone-key-light-color-blue" min="0" max="255" step="1"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-key-intensity" min="0" max="10" step="0.1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Ambient Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Direction</div>
|
|
<div class="value">
|
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-zone-key-light-direction-x"></input></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-zone-key-light-direction-y"></input></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-zone-key-light-direction-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Latitude</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-latitude" min="-90" max="90" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Longitude</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-longitude" min="-180" max="180" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Altitude</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-altitude" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Day</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-day" min="0" max="365" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Hour</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-hour" min="0" max="24" step="0.5"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|