diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html index d96fc7d76d..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"); @@ -559,20 +623,33 @@ elZoneStageDay.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageDay')); elZoneStageHour.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageHour')); - elZoneBackgroundMode.addEventListener('change', createEmitTextPropertyUpdateFunction('backgroundMode')); - var zoneSkyboxColorChangeFunction = createEmitColorPropertyUpdateFunction( - 'skybox.color', elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue); - elZoneSkyboxURL.addEventListener('change', createEmitTextPropertyUpdateFunction('skybox.url')); - var zoneAtmosphereCenterChangeFunction = createEmitVec3PropertyUpdateFunction( - 'atmosphere.center', elZoneAtmosphereCenterX, elZoneAtmosphereCenterY, elZoneAtmosphereCenterZ); - elZoneAtmosphereInnerRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('atmosphere.innerRadius')); - elZoneAtmosphereOuterRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('atmosphere.outerRadius')); - elZoneAtmosphereMieScattering.addEventListener('change', createEmitNumberPropertyUpdateFunction('atmosphere.mieScattering')); - elZoneAtmosphereRayleighScattering.addEventListener('change', createEmitNumberPropertyUpdateFunction('atmosphere.rayleighScattering')); - var zoneAtmosphereCenterChangeFunction = createEmitVec3PropertyUpdateFunction( - 'atmosphere.scatteringWavelengths', elZoneAtmosphereScatteringWavelengthsX, + 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({ @@ -1059,21 +1136,21 @@