Index HTML page and styling w/ capabilties JSON data that defines buttons to display and lets other clients discover its capabilities.

2025-10-29 09:30:22 +00:00 · 2020-04-26 12:46:56 +02:00
parent 18ad5198fc
commit dd6d5c4bdf
3 changed files with 111 additions and 0 deletions
--- a/index.h
+++ b/index.h
@@ -0,0 +1,43 @@
+const char html[] PROGMEM = R"=====(
+<!DOCTYPE html><html>
+<head>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>ESP Media controller</h1>
+</body>
+<script src='capabilities.js'></script>
+<script type='application/javascript'>
+function draw() {
+  const { body } = document;
+
+  Object.keys(capabilities).forEach(key => {
+    const heading = document.createElement('h2');
+    const container = document.createElement('div');
+    container.className = 'container';
+
+    heading.innerText = key;
+    container.appendChild(heading)
+
+    capabilities[key].forEach(action => {
+      const button = document.createElement('button');
+      button.innerText = action.name;
+      button.setAttribute('onClick', `toggle('${action.cmd}')`);
+
+      container.appendChild(button);
+    })
+
+    container.appendChild(document.createElement('hr'));
+    body.appendChild(container)
+  });
+}
+
+draw();
+
+function toggle(value) {
+  window.fetch('http://10.0.0.100/' + value, { method: 'POST' })
+  .then(console.log, console.error)
+}
+</script></html>
+)=====";