|
|
@ -4,7 +4,8 @@ let metrics = { |
|
|
|
roomDefaultOpacity : 0.15, |
|
|
|
roomDefaultOpacity : 0.15, |
|
|
|
roomHighlightOpacity : 0.6, |
|
|
|
roomHighlightOpacity : 0.6, |
|
|
|
roomHighlightDuration : 0.3, |
|
|
|
roomHighlightDuration : 0.3, |
|
|
|
roomUnhighlightDuration: 0.3 |
|
|
|
roomUnhighlightDuration: 0.3, |
|
|
|
|
|
|
|
animationCurve : TWEEN.Easing.Cubic.InOut |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const scene = new THREE.Scene() |
|
|
|
const scene = new THREE.Scene() |
|
|
@ -14,7 +15,7 @@ scene.add(homeContainer) |
|
|
|
let home = new THREE.Group() |
|
|
|
let home = new THREE.Group() |
|
|
|
homeContainer.add(home) |
|
|
|
homeContainer.add(home) |
|
|
|
|
|
|
|
|
|
|
|
var areaNames = [ ] |
|
|
|
var areaData = { } |
|
|
|
|
|
|
|
|
|
|
|
var areasWithEntitiesToUpdate = { } |
|
|
|
var areasWithEntitiesToUpdate = { } |
|
|
|
|
|
|
|
|
|
|
@ -68,13 +69,21 @@ function animate() { |
|
|
|
let box = childWithName(areaContainer, "box") |
|
|
|
let box = childWithName(areaContainer, "box") |
|
|
|
|
|
|
|
|
|
|
|
let fadeIn = new TWEEN.Tween(box.material) |
|
|
|
let fadeIn = new TWEEN.Tween(box.material) |
|
|
|
|
|
|
|
.easing(metrics.animationCurve) |
|
|
|
.to( { opacity: metrics.roomHighlightOpacity }, metrics.roomHighlightDuration * 1000) |
|
|
|
.to( { opacity: metrics.roomHighlightOpacity }, metrics.roomHighlightDuration * 1000) |
|
|
|
|
|
|
|
|
|
|
|
let fadeOut = new TWEEN.Tween(box.material) |
|
|
|
let fadeOut = new TWEEN.Tween(box.material) |
|
|
|
|
|
|
|
.easing(metrics.animationCurve) |
|
|
|
.to( { opacity: metrics.roomDefaultOpacity }, metrics.roomUnhighlightDuration * 1000) |
|
|
|
.to( { opacity: metrics.roomDefaultOpacity }, metrics.roomUnhighlightDuration * 1000) |
|
|
|
|
|
|
|
|
|
|
|
fadeIn.chain(fadeOut) |
|
|
|
fadeIn.chain(fadeOut) |
|
|
|
fadeIn.start() |
|
|
|
fadeIn.start() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// This will rotate to the area that has a change
|
|
|
|
|
|
|
|
let rotate = new TWEEN.Tween(homeContainer.rotation) |
|
|
|
|
|
|
|
.easing(metrics.animationCurve) |
|
|
|
|
|
|
|
.to( { z: Math.PI }, 2000 ) |
|
|
|
|
|
|
|
.start() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
homeContainer.rotation.z += 0.003 |
|
|
|
homeContainer.rotation.z += 0.003 |
|
|
@ -114,9 +123,12 @@ function updateWithHAData(data) { |
|
|
|
// `data` is an array of entities. loop through and group by area
|
|
|
|
// `data` is an array of entities. loop through and group by area
|
|
|
|
var areasToEntities = { } |
|
|
|
var areasToEntities = { } |
|
|
|
var areasToUpdatedEntities = { } |
|
|
|
var areasToUpdatedEntities = { } |
|
|
|
for (var area of areaNames) { |
|
|
|
var areaNames = new Array() |
|
|
|
areasToEntities[area] = new Array() |
|
|
|
for (var area of areaData.rooms) { |
|
|
|
areasToUpdatedEntities[area] = new Array() |
|
|
|
let name = area.name |
|
|
|
|
|
|
|
areaNames.push(area.name) |
|
|
|
|
|
|
|
areasToEntities[name] = new Array() |
|
|
|
|
|
|
|
areasToUpdatedEntities[name] = new Array() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let sortedAreaNames = areaNames |
|
|
|
let sortedAreaNames = areaNames |
|
|
@ -186,9 +198,10 @@ function configureScene(data) { |
|
|
|
var minY = minX |
|
|
|
var minY = minX |
|
|
|
var maxY = maxX |
|
|
|
var maxY = maxX |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
areaData = data |
|
|
|
|
|
|
|
|
|
|
|
// Add geometry for the rooms
|
|
|
|
// Add geometry for the rooms
|
|
|
|
for (var room of data.rooms) { |
|
|
|
for (var room of data.rooms) { |
|
|
|
areaNames.push(room.name) |
|
|
|
|
|
|
|
let roomContainer = new THREE.Group() |
|
|
|
let roomContainer = new THREE.Group() |
|
|
|
roomContainer.userData.name = room.name |
|
|
|
roomContainer.userData.name = room.name |
|
|
|
|
|
|
|
|
|
|
|