Add zone properties to entity property panel

This commit is contained in:
Ryan Huffman 2015-04-21 12:47:11 -07:00
parent 3f0d9b7532
commit 4e2bcc0690

View file

@ -182,6 +182,23 @@
var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue");
var elZoneSections = document.querySelectorAll(".zone-section");
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-color-intensity");
var elZoneKeyLightAmbientIntensity = document.getElementById("property-zone-key-color-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);
@ -356,6 +373,32 @@
elLightCutoff.value = properties.cutoff;
}
if (properties.type != "Zone") {
for (var i = 0; i < elZoneSections.length; i++) {
elZoneSections[i].style.display = 'none';
}
} else {
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;
elZoneKeyLightAmbientIntensity.value = properties.keyLightAmbientIntensity;
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;
}
if (selected) {
activeElement.focus();
activeElement.select();
@ -468,6 +511,26 @@
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",
@ -833,6 +896,67 @@
<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 Color</div>
<div class="value">
<div class="input-area">R <input class="coord" type='number' id="property-zone-key-light-color-red"></input></div>
<div class="input-area">G <input class="coord" type='number' id="property-zone-key-light-color-green"></input></div>
<div class="input-area">B <input class="coord" type='number' id="property-zone-key-light-color-blue"></input></div>
</div>
</div>
<div class="zone-section property">
<div class="label">Key Intensity</div>
<div class="value">
<input class="coord" type='number' id="property-zone-key-color-intensity"></input>
</div>
</div>
<div class="zone-section property">
<div class="label">Key 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"></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"></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"></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"></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"></input>
</div>
</div>
</div>
</body>