-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhue-callionica-identify-my-scene.html
114 lines (92 loc) · 3.56 KB
/
hue-callionica-identify-my-scene.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Identify My Scene</title>
<link rel="stylesheet" href="hue-callionica.css">
<style>
.name {
font-weight: bold;
}
.dateTime {
color: gray;
}
.numeric {
text-align: right;
}
td:first-of-type {
padding: 0;
}
thead {
font-weight: bold;
}
</style>
<script type="module">
import { loadCurrentBridge, loadConnection } from "./hue-callionica-connect.js";
import { sortBy, getAllPlus } from "./hue-callionica.js";
import { localizeDateTime } from "./hue-callionica-ui.js";
let bridge;
let connection;
async function main() {
const e = document.getElementById("instructions");
e.innerHTML = `<p>Please wait while we connect to the bridge...</p>`;
bridge = loadCurrentBridge();
connection = await loadConnection("Callionica", bridge);
const data = await getAllPlus(connection);
function grp(scene) {
if (scene.group !== undefined) {
return data.groups[scene.group].name;
}
return "";
}
function lgt(scene) {
return scene.lights.map(id => data.lights[id].name).join(", ");
}
e.innerHTML = `<p>Please wait while we read the scenes...</p>`;
const scenes = Object.values(data.scenes);
e.innerHTML = `<p>Please wait while we analyze the lighting...</p>`;
const possibleScenes = scenes.filter(scene => scene.active);
e.innerHTML = `<p>Please wait while we present the results...</p>`;
const rows = possibleScenes.map(scene => `<tr><td>${scene.name}</td><td>${grp(scene)}</td><td>${lgt(scene)}</td></tr>`).join("\n");
const msg = (possibleScenes.length === 0) ? `<tr><td colspan="3">No matching scenes found</td></tr>` : "";
e.innerHTML = `
<table>
<thead>
<tr><td>Scene</td><td>Room/Zone</td><td>Lights</td></tr>
</thead>
${rows}
${msg}
</table>
`;
}
async function _main() {
try {
await main();
delete document.body.dataset.showConnection;
// setTimeout(()=> _main(), 60*1000);
} catch (error) {
document.body.dataset.showConnection = true;
const e = document.querySelector("#connection");
if ((bridge === undefined) || (connection === undefined)) {
e.innerHTML = `<a href="hue-callionica-connect.html">Connect to your Hue bridge</a>`;
} else {
e.innerHTML = `<a href="https://${connection.bridge.ip}/api/unauthenticated/config">Refresh your Hue bridge connection</a>`;
}
setTimeout(()=> _main(), 3*1000);
}
}
_main().then(x => console.log("Done"));
</script>
</head>
<body>
<h1>Identify My Scene</h1>
<p>Here you can see the scenes that are compatible with the current lighting.</p>
<hr/>
<div id="connection"></div>
<div id="instructions">
<p>Please wait while we analyze the lighting...</p>
</div>
</body>
</html>