diff --git a/menu/index.html b/menu/index.html
new file mode 100644
index 0000000..d5bc1c0
--- /dev/null
+++ b/menu/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Stick
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/menu/index.html b/menu/index.html
new file mode 100644
index 0000000..d5bc1c0
--- /dev/null
+++ b/menu/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Stick
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/menu/main.css b/menu/main.css
new file mode 100644
index 0000000..4cbc65d
--- /dev/null
+++ b/menu/main.css
@@ -0,0 +1,35 @@
+body {
+ overflow: hidden;
+}
+
+div {
+ position: absolute;
+}
+
+.button {
+ background: black;
+ color: white;
+ text-align: center;
+ line-height: 50px;
+}
+
+.slider {
+ background: blue;
+
+ border-radius: 10000px;
+}
+
+textarea {
+ position: absolute;
+ top: 20px;
+ left: 106px;
+ width: 200px;
+ height: 100px;
+ z-index: 100;
+
+ border: none;
+ resize: none;
+
+ background: black;
+ color: white;
+}
\ No newline at end of file
diff --git a/menu/index.html b/menu/index.html
new file mode 100644
index 0000000..d5bc1c0
--- /dev/null
+++ b/menu/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Stick
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/menu/main.css b/menu/main.css
new file mode 100644
index 0000000..4cbc65d
--- /dev/null
+++ b/menu/main.css
@@ -0,0 +1,35 @@
+body {
+ overflow: hidden;
+}
+
+div {
+ position: absolute;
+}
+
+.button {
+ background: black;
+ color: white;
+ text-align: center;
+ line-height: 50px;
+}
+
+.slider {
+ background: blue;
+
+ border-radius: 10000px;
+}
+
+textarea {
+ position: absolute;
+ top: 20px;
+ left: 106px;
+ width: 200px;
+ height: 100px;
+ z-index: 100;
+
+ border: none;
+ resize: none;
+
+ background: black;
+ color: white;
+}
\ No newline at end of file
diff --git a/menu/main.js b/menu/main.js
new file mode 100644
index 0000000..23828f5
--- /dev/null
+++ b/menu/main.js
@@ -0,0 +1,184 @@
+const
+ h = 652,
+ w = 412
+
+let nfc = () => {}
+
+const buttons = [
+ { x: (w - 75) / 2, y : 350 + 60, h: 50, w: 75, callback: b => {} },
+ { x: (w - 75) / 2, y : 350 + 2*60, h: 50, w: 75, callback: b => {} },
+ { x: (w - 75) / 2, y : 350 + 3*60, h: 50, w: 75, callback: b => {} }
+]
+
+const body = document.getElementsByTagName('body')[0]
+const textarea = document.getElementsByTagName('textarea')[0]
+
+buttons.forEach(b => {
+ const button = document.createElement('div')
+ button.classList.add('button')
+
+ button.style.height = b.h + 'px'
+ button.style.width = b.w + 'px'
+ button.style.top = b.y + 'px'
+ button.style.left = b.x + 'px'
+
+ // button.innerText = b.name
+
+ body.appendChild(button)
+ b.button = button
+
+ button.addEventListener('click', () => b.callback(b))
+})
+
+const resetButtons = () => {
+ buttons.forEach(b => {
+ b.button.innerText = ""
+ b.callback = () => {
+ }
+ })
+}
+const sleep = ms => {
+ return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+let room = undefined
+let device = undefined
+
+const state = newState => {
+ resetButtons()
+ switch (newState) {
+ case 1:
+ nfc = () => {}
+ // Room
+ device = undefined
+ textarea.innerHTML = `${room.title}
+Devices:
+` + room.devices.map((d, i) => `${i===room.i ? ">":" "}- ${d.name}`).join("\n")
+
+ if (room.devices.length > 0) {
+ buttons[0].button.innerText = "OK"
+ buttons[0].callback = b => {
+ device = room.devices[room.i]
+ state(4)
+ }
+ }
+ if (room.devices.length > 1) {
+ buttons[1].button.innerText = '\\/'
+ buttons[1].callback = b => {
+ room.i = (room.i + 1) % room.devices.length
+ state(1)
+ }
+ }
+ buttons[2].button.innerText = "<"
+ buttons[2].callback = b => {
+ state(3)
+ }
+ break;
+ case 2:
+ // Room_Standby
+ break;
+ case 3:
+ // Ready
+ room = undefined
+ textarea.innerHTML = `Ready
+
+Tap NFC...`
+
+ buttons[2].button.innerText = "OFF"
+ buttons[2].callback = b => {
+ state(0)
+ }
+ nfc = id => {
+ switch (id) {
+ case "4c:67:1f:31":
+ // blue
+ room = {
+ title: "Garten",
+ i: 0,
+ devices: [
+ { name: "Rasensprenger"},
+ { name: "Tor"},
+ { name: "Terassenlicht"},
+ { name: "Ambiente"}
+ ]
+ }
+ state(1)
+ break;
+ case "da:10:15:bf":
+ // card
+ room = {
+ title: "Hörsaal I012",
+ i: 0,
+ devices: [
+ { name: "Beamer"},
+ { name: "Licht vorne"},
+ { name: "Licht Raum"},
+ { name: "Soundanlage"}
+ ]
+ }
+ state(1)
+ break;
+ default:
+ textarea.innerHTML = `Ready
+
+Tap NFC...
+
+Unknown Card`
+ nfc = () => {}
+ sleep(1000)
+ .then(() => state(3))
+ }
+ }
+ break;
+ case 4:
+ // Device
+ textarea.innerHTML = `${room.title} - ${device.name}
+
+`
+ buttons[2].button.innerText = "<"
+ buttons[2].callback = b => {
+ state(1)
+ }
+ break;
+ case 0:
+ default:
+ // Standby
+ // Display aus
+ textarea.innerHTML = ""
+
+ // mqtt disconnect
+ // wifi disconnect
+
+ // nfc aus
+ nfc = () => {}
+
+ buttons[0].button.innerText = "ON"
+ buttons[0].callback = b => {
+ state(3)
+ }
+ break;
+ }
+}
+
+state(0);
+
+(async () => {
+ try {
+ const ndef = new NDEFReader();
+ await ndef.scan();
+ console.log("> Scan started");
+
+ ndef.addEventListener("readingerror", () => {
+ console.log("Argh! Cannot read data from the NFC tag. Try another one?");
+ });
+
+ ndef.addEventListener("reading", ({ message, serialNumber }) => {
+ console.log(`> Serial Number: ${serialNumber}`);
+ console.log(`> Records: (${message.records.length})`);
+
+ nfc(serialNumber)
+ });
+ } catch (error) {
+ console.log("Argh! " + error);
+ }
+})()
\ No newline at end of file