Get entities grouped by area kinda

script.js

@@ -1,15 +1,17 @@
 let haStateURL = "http://beacon:1880/ha_state"
 
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+const scene = new THREE.Scene()
+const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
 let homeContainer = new THREE.Group()
 scene.add(homeContainer)
 let home = new THREE.Group()
 homeContainer.add(home)
 
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
+var areaNames = [ ]
+
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize( window.innerWidth, window.innerHeight )
+document.body.appendChild( renderer.domElement )
 
 const light = new THREE.AmbientLight(0xFFAAAA, 1)
 // light.position.z = 100
@@ -25,14 +27,59 @@ home.rotation.x = Math.PI
 homeContainer.rotation.x = 0.6 * (-Math.PI / 2)
 
 function animate() {
-    requestAnimationFrame( animate );
+    requestAnimationFrame( animate )
+
+    homeContainer.rotation.z += 0.005
+
+    renderer.render( scene, camera )
+}
 
-    homeContainer.rotation.z += 0.005;
+animate()
+
+function updateWithHAData(data) {
+    // `data` is an array of entities. loop through and group by area
+    var areasToEntities = { }
+    for (var area of areaNames) {
+        areasToEntities[area] = new Array()
+    }
+
+    let sortedAreaNames = areaNames
+    sortedAreaNames.sort(function(a, b) {
+        return b.length - a.length;
+    })
 
-    renderer.render( scene, camera );
+    for (var entity of data) {
+        let id = entity.entity_id
+        let friendlyName = entity.attributes.friendly_name || entity.entity_id
+        for (var area of sortedAreaNames) {
+            let matchesUnderscored = id.includes(area.toLowerCase().replace(' ','_'))
+            let matchesNoSpaces = id.includes(area.toLowerCase().replace(' ',''))
+            let matchesFriendlyName = friendlyName.includes(area)
+
+            let matches = matchesUnderscored || matchesNoSpaces || matchesFriendlyName
+
+            if (matches) {
+                let areaEntities = areasToEntities[area]
+                areaEntities.push(entity)
+                areasToEntities[area] = areaEntities
+                break
+            }
+        }
     }
 
-animate();
+    console.log(areasToEntities)
+}
+
+async function loadHAData() {
+    let request = new Request(haStateURL)
+    fetch(request)
+    .then(response => {
+        return response.json()
+    })
+    .then(json => {
+        updateWithHAData(json)
+    })
+}
 
 function setPosition(mesh, x, y, z, w, h, d) {
     // position sets the *center* position
@@ -54,6 +101,7 @@ function configureScene(data) {
 
     // Add geometry for the rooms
     for (var room of data.rooms) {
+        areaNames.push(room.name)
         let roomContainer = new THREE.Group()
         roomContainer.userData = room.name
 
@@ -87,28 +135,18 @@ function configureScene(data) {
 }
 
 async function loadHomeData() {
-    let request = new Request('data.json');
+    let request = new Request('data.json')
     fetch(request)
     .then(response => {
         return response.json()
     })
     .then(json => {
         configureScene(json)
+        // Kick off first HA load
+        loadHAData()
     })
 }
 
-loadHomeData();
+loadHomeData()
 
-async function loadHAData() {
-    let request = new Request(haStateURL);
-    fetch(request)
-    .then(response => {
-        return response.json()
-    })
-    .then(json => {
-        console.log(json)
-    })
-}
-
-loadHAData()