phajas
/
house_map
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add info element

master
Peter Hajas 3 years ago
parent
c56ff7da44
commit
d8345211eb
2 changed files with 32 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      index.html
  2. 27
      script.js

9
index.html
Unescape View File

@ -5,6 +5,15 @@
<title>Home Map</title> <title>Home Map</title>
<style> <style>
body { margin: 0; } body { margin: 0; }
.info {
width: 100%;
height: 100%;
position: absolute;
top: 500px;
left: 100px;
font-family: monospace;
font-size: 2.5em;
}
</style> </style>
</head> </head>
<body> <body>

27
script.js
Unescape View File

@ -49,6 +49,12 @@ const renderer = new THREE.WebGLRenderer({
renderer.setSize( window.innerWidth, window.innerHeight ) renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement ) 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) const light = new THREE.AmbientLight(0xFFAAAA, 1)
light.position.z = 100 light.position.z = 100
scene.add(light) scene.add(light)
@ -56,12 +62,13 @@ scene.background = new THREE.Color(metrics.backgroundColor)
// back the camera up // back the camera up
camera.position.z = 25 camera.position.z = 25
camera.position.y = -10
// flip home on x axis // flip home on x axis
home.rotation.x = Math.PI home.rotation.x = Math.PI
// Rotate container a bit for comfort // 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 // Returns the first child (or container) whose name matches
function childWithName(container, name) { function childWithName(container, name) {
@ -92,9 +99,19 @@ function animate() {
label.lookAt(camera.position) label.lookAt(camera.position)
} }
var infoText = "";
for (var area of areasToUpdate) { for (var area of areasToUpdate) {
let updatedEntities = areasWithEntitiesToUpdate[area] 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 areaContainer = childWithName(scene, area)
let box = childWithName(areaContainer, "box") let box = childWithName(areaContainer, "box")
@ -140,6 +157,10 @@ function animate() {
sunContainer.rotation.y = (elevation / 360) * 2 * Math.PI sunContainer.rotation.y = (elevation / 360) * 2 * Math.PI
} }
if (infoText.length > 1) {
info.innerHTML = infoText
}
renderer.render( scene, camera ) renderer.render( scene, camera )
} }
@ -162,8 +183,6 @@ function createTextMesh(text, colorName) {
context.font = font context.font = font
console.log([canvas.width, canvas.height])
context.fillStyle = colorName context.fillStyle = colorName
context.fillText(text, 0, 100) context.fillText(text, 0, 100)

Write Preview
Loading…
Cancel
Save