diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html index 3e775ec698..e525818e51 100644 --- a/examples/html/entityProperties.html +++ b/examples/html/entityProperties.html @@ -33,6 +33,21 @@ ); }; } + function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) { + return function() { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; + } + + function createEmitTextPropertyUpdateFunction(propertyName) { return function() { var properties = {}; @@ -46,6 +61,20 @@ }; } + function createEmitGroupTextPropertyUpdateFunction(group,propertyName) { + return function() { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; + } + function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) { return function() { var data = { @@ -62,6 +91,23 @@ } }; + function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[group] = { }; + data.properties[group][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 = { @@ -94,6 +140,24 @@ } }; + function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[group] = { }; + + data.properties[group][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"); @@ -205,6 +269,24 @@ var elZoneStageDay = document.getElementById("property-zone-stage-day"); var elZoneStageHour = document.getElementById("property-zone-stage-hour"); + var elZoneBackgroundMode = document.getElementById("property-zone-background-mode"); + + var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red"); + var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green"); + var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue"); + var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url"); + + var elZoneAtmosphereCenterX = document.getElementById("property-zone-atmosphere-center-x"); + var elZoneAtmosphereCenterY = document.getElementById("property-zone-atmosphere-center-y"); + var elZoneAtmosphereCenterZ = document.getElementById("property-zone-atmosphere-center-z"); + var elZoneAtmosphereInnerRadius = document.getElementById("property-zone-atmosphere-inner-radius"); + var elZoneAtmosphereOuterRadius = document.getElementById("property-zone-atmosphere-outer-radius"); + var elZoneAtmosphereMieScattering = document.getElementById("property-zone-atmosphere-mie-scattering"); + var elZoneAtmosphereRayleighScattering = document.getElementById("property-zone-atmosphere-rayleigh-scattering"); + var elZoneAtmosphereScatteringWavelengthsX = document.getElementById("property-zone-atmosphere-scattering-wavelengths-x"); + var elZoneAtmosphereScatteringWavelengthsY = document.getElementById("property-zone-atmosphere-scattering-wavelengths-y"); + var elZoneAtmosphereScatteringWavelengthsZ = document.getElementById("property-zone-atmosphere-scattering-wavelengths-z"); + if (window.EventBridge !== undefined) { EventBridge.scriptEventReceived.connect(function(data) { data = JSON.parse(data); @@ -386,6 +468,26 @@ elZoneStageHour.value = properties.stageHour; elShapeType.value = properties.shapeType; elCompoundShapeURL.value = properties.compoundShapeURL; + + elZoneBackgroundMode.value = properties.backgroundMode; + + elZoneSkyboxColorRed.value = properties.skybox.color.red; + elZoneSkyboxColorGreen.value = properties.skybox.color.green; + elZoneSkyboxColorBlue.value = properties.skybox.color.blue; + elZoneSkyboxURL.value = properties.skybox.url; + + elZoneAtmosphereCenterX.value = properties.atmosphere.center.x; + elZoneAtmosphereCenterY.value = properties.atmosphere.center.y; + elZoneAtmosphereCenterZ.value = properties.atmosphere.center.z; + elZoneAtmosphereInnerRadius.value = properties.atmosphere.innerRadius; + elZoneAtmosphereOuterRadius.value = properties.atmosphere.outerRadius; + elZoneAtmosphereMieScattering.value = properties.atmosphere.mieScattering; + elZoneAtmosphereRayleighScattering.value = properties.atmosphere.rayleighScattering; + elZoneAtmosphereScatteringWavelengthsX.value = properties.atmosphere.scatteringWavelengths.x; + elZoneAtmosphereScatteringWavelengthsY.value = properties.atmosphere.scatteringWavelengths.y; + elZoneAtmosphereScatteringWavelengthsZ.value = properties.atmosphere.scatteringWavelengths.z; + + } if (selected) { @@ -521,6 +623,34 @@ elZoneStageDay.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageDay')); elZoneStageHour.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageHour')); + + elZoneBackgroundMode.addEventListener('change', createEmitTextPropertyUpdateFunction('backgroundMode')); + var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox','color', + elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue); + elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction); + elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction); + elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction); + + elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url')); + + var zoneAtmosphereCenterChangeFunction = createEmitGroupVec3PropertyUpdateFunction( + 'atmosphere','center', elZoneAtmosphereCenterX, elZoneAtmosphereCenterY, elZoneAtmosphereCenterZ); + elZoneAtmosphereCenterX.addEventListener('change', zoneAtmosphereCenterChangeFunction); + elZoneAtmosphereCenterY.addEventListener('change', zoneAtmosphereCenterChangeFunction); + elZoneAtmosphereCenterZ.addEventListener('change', zoneAtmosphereCenterChangeFunction); + + + elZoneAtmosphereInnerRadius.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','innerRadius')); + elZoneAtmosphereOuterRadius.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','outerRadius')); + elZoneAtmosphereMieScattering.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','mieScattering')); + elZoneAtmosphereRayleighScattering.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','rayleighScattering')); + var zoneAtmosphereScatterWavelengthsChangeFunction = createEmitGroupVec3PropertyUpdateFunction( + 'atmosphere','scatteringWavelengths', elZoneAtmosphereScatteringWavelengthsX, + elZoneAtmosphereScatteringWavelengthsY, elZoneAtmosphereScatteringWavelengthsZ); + elZoneAtmosphereScatteringWavelengthsX.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction); + elZoneAtmosphereScatteringWavelengthsY.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction); + elZoneAtmosphereScatteringWavelengthsZ.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction); + elMoveSelectionToGrid.addEventListener("click", function() { EventBridge.emitWebEvent(JSON.stringify({ type: "action", @@ -958,6 +1088,72 @@ + +