add info element

3 years ago · d8345211eb
2 changed files with 32 additions and 4 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,15 @@
 		<title>Home Map</title>
 		<style>
 			body { margin: 0; }
+            .info {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 500px;
+                left: 100px;
+                font-family: monospace;
+                font-size: 2.5em;
+            }
 		</style>
 	</head>
 	<body>
--- 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 += '<br>'
+        }
+
        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)