From d8345211ebc2c93c43aafe9b0028d504d235f36d Mon Sep 17 00:00:00 2001 From: Peter Hajas Date: Sun, 8 May 2022 20:53:49 -0600 Subject: [PATCH] add info element --- index.html | 9 +++++++++ script.js | 27 +++++++++++++++++++++++---- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index fa87dad..8d3b53f 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,15 @@ Home Map diff --git a/script.js b/script.js index 01c3289..a06a66f 100644 --- a/script.js +++ b/script.js @@ -49,6 +49,12 @@ const renderer = new THREE.WebGLRenderer({ renderer.setSize( window.innerWidth, window.innerHeight ) document.body.appendChild( renderer.domElement ) +let info = document.createElement('div') +info.className = "info" +info.innerHTML = "HELLO" +info.style.color = metrics.color4 +document.body.appendChild(info) + const light = new THREE.AmbientLight(0xFFAAAA, 1) light.position.z = 100 scene.add(light) @@ -56,12 +62,13 @@ scene.background = new THREE.Color(metrics.backgroundColor) // back the camera up camera.position.z = 25 +camera.position.y = -10 // flip home on x axis home.rotation.x = Math.PI // Rotate container a bit for comfort -homeContainer.rotation.x = 0.6 * (-Math.PI / 2) +homeContainer.rotation.x = 0.7 * (-Math.PI / 2) // Returns the first child (or container) whose name matches function childWithName(container, name) { @@ -92,9 +99,19 @@ function animate() { label.lookAt(camera.position) } + var infoText = ""; + for (var area of areasToUpdate) { let updatedEntities = areasWithEntitiesToUpdate[area] - // plh-evil: use these somehow? + for (entity of updatedEntities) { + let friendlyName = entity.attributes.friendly_name || entity.entity_id + let unit = entity.attributes.unit_of_measurement || '' + infoText += friendlyName + infoText += (': ' + entity.state + ' ') + infoText += unit + infoText += '
' + } + let areaContainer = childWithName(scene, area) let box = childWithName(areaContainer, "box") @@ -140,6 +157,10 @@ function animate() { sunContainer.rotation.y = (elevation / 360) * 2 * Math.PI } + if (infoText.length > 1) { + info.innerHTML = infoText + } + renderer.render( scene, camera ) } @@ -162,8 +183,6 @@ function createTextMesh(text, colorName) { context.font = font - console.log([canvas.width, canvas.height]) - context.fillStyle = colorName context.fillText(text, 0, 100)