Tidy up aframe demo

Author: bcopy

demo-aframe/aframe-demo.js

@@ -31,6 +31,7 @@ AFRAME.registerComponent('homie-light-switch', {
   toggleSwitch: function () {
     this.switchState = !this.switchState;
     this.stateProperty.setValue(this.switchState);
+    const bulbComponent = document.querySelector('#bulb').components["homie-light-bulb"].updateBulbState(this.switchState);
     this.updateSwitchVisual();
   },
 
@@ -92,18 +93,11 @@ observer.updated$.subscribe(
     if (event.type == 'property') {
       if (event.device.id === 'switch' && event.node.id === 'switch' && event.property.id === 'state') {
         document.getElementById('switch-state').textContent = `Switch State: ${event.property.value}`;
-        const switchComponent = document.querySelector('[homie-light-switch]').components["homie-light-switch"];
+        const switchComponent = document.querySelector('#switch').components["homie-light-switch"];
         switchComponent.toggleSwitch();
         switchComponent.updateSwitchVisual();
-        const bulbComponent = document.querySelector('[homie-light-bulb]').components["homie-light-bulb"];
-        bulbComponent.updateBulbState(event.property.value=='true');
+        
       } 
-      // else if (event.device.id === 'bulb' && event.node.id === 'bulb' && event.property.id === 'state') {
-      //   document.getElementById('bulb-state').textContent = `Bulb State: ${event.property.value}`;
-      //   // Update the bulb entity in A-Frame
-      //   const bulbComponent = document.querySelector('[homie-light-bulb]').components["homie-light-bulb"];
-      //   bulbComponent.updateBulbState(event.property.value=='true');
-      // }
     }
   },
   (error) => {
@@ -114,5 +108,3 @@ observer.updated$.subscribe(
 
 
 observer.subscribe('switch/switch/state');
-// observer.subscribe('bulb/bulb/state');
-

demo-aframe/index.html

@@ -37,24 +37,13 @@ <h1>Homie-Lit A-Frame Demo</h1>
             </a-entity>
         </a-camera>
 
-        <a-entity homie-light-switch position="-1 0.5 -3" rotation="0 30 0"></a-entity>
-        <a-entity homie-light-bulb position="1 0.5 -3" rotation="0 -30 0"></a-entity>
+        <a-entity id="switch" homie-light-switch position="-1 0.5 -3" rotation="0 30 0"></a-entity>
+        <a-entity id="bulb" homie-light-bulb position="1 0.5 -3" rotation="0 -30 0"></a-entity>
 
         <a-entity light="type: ambient; color: #BBB"></a-entity>
         <a-sky color="#ECECEC"></a-sky>
         <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
     </a-scene>
-    <script>
-        // Connect devices after scene loaded
-        document.querySelector('a-scene').addEventListener('loaded', function () {
-            const switchDevice = document.querySelector('[homie-light-switch]').components['homie-light-switch'].device;
-            const bulbDevice = document.querySelector('[homie-light-bulb]').components['homie-light-bulb'].device;
-
-            // // Connect switch state to bulb state
-            // switchDevice.getNode('switch').getProperty('state').on('value', (value) => {
-            //     bulbDevice.getNode('bulb').getProperty('state').setValue(value);
-            // });
-        });
-    </script>
+    
 </body>
 </html>