mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-10 07:12:50 +02:00
Add zone properties to entity property panel
This commit is contained in:
Ryan Huffman
parent
3f0d9b7532
commit
4e2bcc0690
1 changed files with 124 additions and 0 deletions
|
|
@ -182,6 +182,23 @@
|
||||||
var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
|
var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
|
||||||
var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue");
|
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) {
|
if (window.EventBridge !== undefined) {
|
||||||
EventBridge.scriptEventReceived.connect(function(data) {
|
EventBridge.scriptEventReceived.connect(function(data) {
|
||||||
data = JSON.parse(data);
|
data = JSON.parse(data);
|
||||||
|
|
@ -356,6 +373,32 @@
|
||||||
elLightCutoff.value = properties.cutoff;
|
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) {
|
if (selected) {
|
||||||
activeElement.focus();
|
activeElement.focus();
|
||||||
activeElement.select();
|
activeElement.select();
|
||||||
|
|
@ -468,6 +511,26 @@
|
||||||
elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
|
elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
|
||||||
elTextBackgroundColorBlue.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() {
|
elMoveSelectionToGrid.addEventListener("click", function() {
|
||||||
EventBridge.emitWebEvent(JSON.stringify({
|
EventBridge.emitWebEvent(JSON.stringify({
|
||||||
type: "action",
|
type: "action",
|
||||||
|
|
@ -833,6 +896,67 @@
|
||||||
<input class="coord" type='number' id="property-light-cutoff"></input>
|
<input class="coord" type='number' id="property-light-cutoff"></input>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue