Merge pull request #54 from HendrikRauh/HendrikRauh/issue33

Status GUI

data/icons/close.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6.375 5.66787L1.20712 0.5H0.5V1.20712L5.66787 6.375H1.375V7.375H7.375V1.375H6.375V5.66787ZM10.2071 9.5H14.5V8.5H8.5V14.5H9.5V10.2071L14.7929 15.5H15.5V14.7929L10.2071 9.5Z"
+        fill="#ffffff" />
+</svg>

data/icons/hotspot.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M2.0625 8.00001V9.00001C4.81953 9.00001 7.0625 11.243 7.0625 14H8.0625C8.0625 10.6916 5.37091 8.00001 2.0625 8.00001Z"
+        fill="#087E8B" />
+    <path
+        d="M2.0625 4.37501V5.37501C6.81834 5.37501 10.6875 9.24417 10.6875 14H11.6875C11.691 12.7355 11.4436 11.4829 10.9597 10.3147C10.4758 9.14644 9.76498 8.08578 8.86841 7.1941C7.97671 6.29756 6.91605 5.58677 5.74782 5.10287C4.57958 4.61898 3.32698 4.37158 2.0625 4.37501Z"
+        fill="#087E8B" />
+    <path
+        d="M14.2711 8.84235C13.606 7.26802 12.6417 5.83774 11.4317 4.63085C10.2026 3.3987 8.74218 2.42156 7.13432 1.75556C5.52646 1.08956 3.80284 0.747829 2.0625 0.75001V1.75001C8.81716 1.75001 14.3125 7.24535 14.3125 14H15.3125C15.3159 12.2282 14.9616 10.474 14.2711 8.84235ZM2.8125 11.25C2.41694 11.25 2.03026 11.3673 1.70136 11.5871C1.37246 11.8068 1.11612 12.1192 0.964742 12.4846C0.813367 12.8501 0.77376 13.2522 0.85093 13.6402C0.928101 14.0282 1.11858 14.3845 1.39829 14.6642C1.67799 14.9439 2.03436 15.1344 2.42232 15.2116C2.81028 15.2888 3.21242 15.2491 3.57787 15.0978C3.94332 14.9464 4.25568 14.69 4.47544 14.3612C4.6952 14.0323 4.8125 13.6456 4.8125 13.25C4.81192 12.7198 4.60102 12.2114 4.22608 11.8364C3.85113 11.4615 3.34276 11.2506 2.8125 11.25ZM2.8125 14.25C2.61472 14.25 2.42138 14.1914 2.25693 14.0815C2.09248 13.9716 1.96431 13.8154 1.88862 13.6327C1.81293 13.45 1.79313 13.2489 1.83172 13.0549C1.8703 12.8609 1.96554 12.6828 2.10539 12.5429C2.24525 12.4031 2.42343 12.3078 2.61741 12.2692C2.81139 12.2306 3.01246 12.2504 3.19518 12.3261C3.37791 12.4018 3.53409 12.53 3.64397 12.6944C3.75385 12.8589 3.8125 13.0522 3.8125 13.25C3.8122 13.5151 3.70675 13.7693 3.51928 13.9568C3.33181 14.1443 3.07763 14.2497 2.8125 14.25Z"
+        fill="#087E8B" />
+</svg>

data/icons/lan.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M15.5 8.5V7.5H8.5V6H10.25C10.4488 5.99978 10.6395 5.92069 10.7801 5.78008C10.9207 5.63948 10.9998 5.44884 11 5.25V1.25C10.9998 1.05116 10.9207 0.86052 10.7801 0.719917C10.6395 0.579313 10.4488 0.500223 10.25 0.5H5.75C5.55116 0.500223 5.36052 0.579313 5.21992 0.719917C5.07931 0.86052 5.00022 1.05116 5 1.25V5.25C5.00022 5.44884 5.07931 5.63948 5.21992 5.78008C5.36052 5.92069 5.55116 5.99978 5.75 6H7.5V7.5H0.5V8.5H3V10H1.29347C1.09463 10.0002 0.904011 10.0793 0.763413 10.2199C0.622814 10.3605 0.543717 10.5512 0.543469 10.75V14.75C0.543717 14.9488 0.622814 15.1395 0.763413 15.2801C0.904011 15.4207 1.09463 15.4998 1.29347 15.5H5.75C5.94884 15.4998 6.13948 15.4207 6.28008 15.2801C6.42069 15.1395 6.49978 14.9488 6.5 14.75V10.75C6.49978 10.5512 6.42069 10.3605 6.28008 10.2199C6.13948 10.0793 5.94884 10.0002 5.75 10H4V8.5H12V10H10.25C10.0512 10.0002 9.86052 10.0793 9.71992 10.2199C9.57931 10.3605 9.50022 10.5512 9.5 10.75V14.75C9.50022 14.9488 9.57931 15.1395 9.71992 15.2801C9.86052 15.4207 10.0512 15.4998 10.25 15.5H14.75C14.9488 15.4998 15.1395 15.4207 15.2801 15.2801C15.4207 15.1395 15.4998 14.9488 15.5 14.75V10.75C15.4998 10.5512 15.4207 10.3605 15.2801 10.2199C15.1395 10.0793 14.9488 10.0002 14.75 10H13V8.5H15.5ZM6 1.5H10V5H6V1.5ZM5.5 14.5H1.54347V11H5.5V14.5ZM14.5 14.5H10.5V11H14.5V14.5Z"
+        fill="#087E8B" />
+</svg>

data/icons/open.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6.5 1.5V0.5H0.5V6.5H1.5V2.20709L6.52147 7.22853L7.22853 6.52147L2.20709 1.5H6.5ZM14.5 9.5V13.7929L9.35353 8.64647L8.64647 9.35353L13.7929 14.5H9.5V15.5H15.5V9.5H14.5Z"
+        fill="#ffffff" />
+</svg>

data/icons/refresh.svg

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFF"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12.8177 4.15769L11.9127 3.25275L14.5004 3.25L14.4994 2.25L10.2499 2.2545V6.5H11.2499V4.00413L12.1106 4.86478C12.7765 5.53078 13.2301 6.37915 13.4142 7.30279C13.5983 8.22642 13.5046 9.1839 13.145 10.0543C12.7853 10.9247 12.1758 11.6691 11.3934 12.1934C10.611 12.7176 9.69083 12.9983 8.74903 13L8.75078 14C9.89021 13.998 11.0035 13.6584 11.9501 13.0241C12.8966 12.3898 13.634 11.4893 14.0692 10.4362C14.5043 9.38312 14.6177 8.22473 14.3949 7.10728C14.1722 5.98983 13.6233 4.96343 12.8177 4.15769ZM7.25078 3.25L7.24903 2.25C6.10959 2.25203 4.99631 2.59162 4.04974 3.22591C3.10317 3.86019 2.36577 4.76073 1.93064 5.8138C1.4955 6.86688 1.38215 8.02527 1.6049 9.14272C1.82764 10.2602 2.37649 11.2866 3.18215 12.0923L4.08984 13H1.4999V14H5.7499V9.75H4.7499V12.2459L3.88925 11.3852C3.22333 10.7192 2.76968 9.87085 2.58557 8.94721C2.40147 8.02358 2.49516 7.0661 2.85483 6.19568C3.21449 5.32525 3.824 4.58091 4.60639 4.05664C5.38878 3.53237 6.30897 3.25168 7.25078 3.25Z"
+        fill="#ffffff" />
+</svg>

data/icons/signal0.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M7.43056 15H8.56944L15.75 4.74509V3.88752L15.7433 3.88284C13.4738 2.29385 10.7704 1.44153 8 1.44153C5.22956 1.44153 2.52618 2.29385 0.256719 3.88284L0.25 3.88752V4.74496L7.43056 15ZM8 2.44152C10.3954 2.43769 12.7409 3.12589 14.7545 4.42337L8 14.0698L1.2455 4.42337C3.25908 3.12589 5.6046 2.43769 8 2.44152Z"
+        fill="#087E8B" />
+</svg>

data/icons/signal1.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M7.43056 15H8.56944L15.75 4.74509V3.88752L15.7433 3.88284C13.4738 2.29385 10.7704 1.44153 8 1.44153C5.22956 1.44153 2.52618 2.29385 0.256719 3.88284L0.25 3.88752V4.74496L7.43056 15ZM5.58959 10.6274C6.32637 10.216 7.15616 10 8 10C8.84384 10 9.67363 10.216 10.4104 10.6274L8 14.0698L5.58959 10.6274ZM8 2.44152C10.3954 2.43769 12.7409 3.12589 14.7545 4.42337L10.9863 9.80496C10.0794 9.27774 9.04903 9.00001 8 9.00001C6.95097 9.00001 5.92064 9.27774 5.01372 9.80496L1.2455 4.42337C3.25908 3.12589 5.6046 2.43769 8 2.44152Z"
+        fill="#087E8B" />
+</svg>

data/icons/signal2.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M15.7433 3.88296C13.4738 2.29397 10.7704 1.44165 8 1.44165C5.22956 1.44165 2.52618 2.29397 0.256719 3.88296L0.25 3.88752V4.74496L7.43056 15H8.56944L15.75 4.74508V3.88752L15.7433 3.88296ZM5.932 11.1164L8.30575 7.4479C8.761 7.46593 9.21367 7.5254 9.65812 7.62558L6.6825 12.1881L5.932 11.1164ZM5.31297 10.2323L4.11719 8.52452C5.02149 7.97522 6.0325 7.62501 7.08281 7.49724L5.31297 10.2323ZM7.30066 13.071L10.6561 7.92602C11.0824 8.08771 11.493 8.28804 11.8828 8.52452L8 14.0698L7.30066 13.071ZM12.4575 7.70387C11.1172 6.87852 9.57404 6.4415 8 6.4415C6.42596 6.4415 4.88283 6.87852 3.54253 7.70387L1.24566 4.42337C3.26085 3.12941 5.6053 2.44153 8.00016 2.44153C10.395 2.44153 12.7395 3.12941 14.7547 4.42337L12.4575 7.70387Z"
+        fill="#087E8B" />
+</svg>

data/icons/signal3.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M15.7433 3.88296C13.4738 2.29397 10.7704 1.44165 8 1.44165C5.22956 1.44165 2.52618 2.29397 0.256719 3.88296L0.25 3.88752V4.74496L7.43056 15H8.56944L15.7502 4.74508V3.88752L15.7433 3.88296ZM5.93344 11.1184L9.85909 5.11446C10.3059 5.19846 10.7463 5.31312 11.1773 5.45762L6.6865 12.1938L5.93344 11.1184ZM5.31563 10.2361L4.48897 9.05549L7.28656 4.96665C7.5231 4.94998 7.76092 4.94165 8 4.94165C8.25417 4.94165 8.50704 4.95121 8.75863 4.97033L5.31563 10.2361ZM3.87613 8.18024L2.68088 6.4733C3.68242 5.84205 4.7887 5.39483 5.94756 5.15274L3.87613 8.18024ZM7.30216 13.0732L12.1293 5.83255C12.5399 6.01916 12.9374 6.23328 13.3191 6.47346L8 14.0698L7.30216 13.0732ZM13.8931 5.65358C12.131 4.53534 10.087 3.94154 8 3.94154C5.91299 3.94154 3.86905 4.53534 2.10691 5.65358L1.2455 4.42337C3.26069 3.12941 5.60515 2.44153 8 2.44153C10.3949 2.44153 12.7393 3.12941 14.7545 4.42337L13.8931 5.65358Z"
+        fill="#087E8B" />
+</svg>

data/icons/signal4.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M15.7433 3.88296C13.4738 2.29397 10.7704 1.44165 8 1.44165C5.22956 1.44165 2.52618 2.29397 0.256719 3.88296L0.25 3.88752V4.74493L7.43056 15H8.56944L15.75 4.74505V3.88752L15.7433 3.88296ZM12.604 3.31771L6.6865 12.1938L5.93412 11.1194L11.3399 2.89324C11.7686 3.01191 12.1905 3.15361 12.604 3.31771ZM8.95 2.47746C9.4032 2.51151 9.8542 2.57026 10.301 2.65343L5.31694 10.2378L4.48769 9.05343L8.95 2.47746ZM3.87384 8.17702L3.16134 7.15943L6.22291 2.56708C6.73369 2.49445 7.24845 2.45326 7.76428 2.44377L3.87384 8.17702ZM4.83481 2.84643L2.54566 6.28018L1.24566 4.42337C2.35118 3.71134 3.5626 3.17908 4.83481 2.84643ZM8 14.0698L7.30216 13.0731L13.5308 3.73027C13.9513 3.93827 14.3598 4.16966 14.7545 4.42337L8 14.0698Z"
+        fill="#087E8B" />
+</svg>

data/index.html

@@ -12,6 +12,7 @@
         <script type="module" src="/submit.js" defer></script>
         <script type="module" src="/reset.js" defer></script>
         <script type="module" src="/range-input.js" defer></script>
+        <script type="module" src="/status.js" defer></script>
     </head>
     <body>
         <main>
@@ -30,199 +31,297 @@
                 </div>
             </section>
 
-            <form class="hidden">
+            <section class="content hidden">
-                <h1>Konfiguration</h1>
+                <div class="status">
-                <fieldset>
+                    <!-- placeholder for wifi icon -->
-                    <legend>Verbindung</legend>
+                    <img class="connection-icon" src="" alt="" />
-                    <label>
+                    <span>Temp.: <span class="cpu-temp"></span> °C</span>
-                        <span>IP-Zuweisung:</span>
+                    <span>Heap: <span class="heap-percentage"></span> %</span>
-                        <select
+                    <span>PSRAM: <span class="psram-percentage"></span> %</span>
-                            name="ip-method"
+                    <span>Uptime: <span class="uptime"></span></span>
-                            id="input-ip-method"
-                            title="IP-"
-                            required
-                        >
-                            <option value="0">Statisch</option>
-                            <option value="1">DHCP</option>
-                        </select>
-                    </label>
-                    <div data-field="input-ip-method" data-values="0">
-                        <label>
-                            <span>IP-Adresse:</span>
-                            <input
-                                type="text"
-                                name="ip"
-                                id="input-ip"
-                                placeholder="IP-Adresse"
-                                required
-                            />
-                        </label>
-                        <label>
-                            <span>Subnetzmaske:</span>
-                            <input
-                                type="text"
-                                name="subnet"
-                                id="input-subnet"
-                                placeholder="Subnetzmaske"
-                                required
-                            />
-                        </label>
-                        <label>
-                            <span>Gateway:</span>
-                            <input
-                                type="text"
-                                name="gateway"
-                                id="input-gateway"
-                                placeholder="Gateway"
-                                required
-                            />
-                        </label>
-                    </div>
-                    <label>
-                        <span>Verbindungsmethode:</span>
-                        <select
-                            name="connection"
-                            id="input-connection"
-                            title="Verbindung"
-                            required
-                        >
-                            <option value="0">WiFi-Station</option>
-                            <option value="1">WiFi-AccessPoint</option>
-                            <option value="2">Ethernet</option>
-                        </select>
-                    </label>
-                    <div data-field="input-connection" data-values="1">
-                        <label>
-                            <span>SSID:</span>
-                            <input
-                                type="text"
-                                name="ssid"
-                                id="input-ssid"
-                                placeholder="SSID"
-                                required
-                            />
-                        </label>
-                    </div>
-                    <div data-field="input-connection" data-values="0">
-                        <label>
-                            <span>Netzwerk:</span>
-                            <select
-                                name="ssid"
-                                id="select-network"
-                                title="Netzwerk"
-                                required
-                            ></select>
-                            <button
-                                type="button"
-                                id="refresh-networks"
-                                class="icon-button"
-                            >
-                                <img src="/icons/refresh.svg" alt="Neu laden" />
-                            </button>
-                        </label>
-                    </div>
-                    <div data-field="input-connection" data-values="0|1">
-                        <label>
-                            <span>Password:</span>
-                            <input
-                                type="password"
-                                name="password"
-                                id="input-password"
-                                placeholder="Passwort"
-                            />
-                        </label>
-                    </div>
-                </fieldset>
-                <fieldset>
-                    <legend>Input/Output 1</legend>
-                    <label class="switch">
-                        <span>Output</span>
-                        <input
-                            type="checkbox"
-                            name="direction-1"
-                            id="input-direction-1"
-                            data-value-not-checked="0"
-                            data-value-checked="1"
-                        />
-                        <span class="slider"></span>
-                        <span>Input</span>
-                    </label>
-                    <label>
-                        ArtNet-Universe:
-                        <input
-                            type="number"
-                            name="universe-1"
-                            id="universe-1"
-                            placeholder="Universe"
-                            min="0"
-                            max="15"
-                        />
-                    </label>
-                </fieldset>
-                <fieldset>
-                    <legend>Input/Output 2</legend>
-                    <label class="switch">
-                        <span>Output</span>
-                        <input
-                            type="checkbox"
-                            name="direction-2"
-                            id="input-direction-2"
-                            data-value-not-checked="0"
-                            data-value-checked="1"
-                        />
-                        <span class="slider"></span>
-                        <span>Input</span>
-                    </label>
-                    <label>
-                        ArtNet-Universe:
-                        <input
-                            type="number"
-                            name="universe-2"
-                            id="universe-2"
-                            placeholder="Universe"
-                            min="0"
-                            max="15"
-                        />
-                    </label>
-                </fieldset>
-                <fieldset>
-                    <legend>Sonstiges</legend>
-                    <label>
-                        LED-Helligkeit
-                        <div>
-                            <input
-                                type="range"
-                                name="led-brightness"
-                                id="led-brightness"
-                                min="0"
-                                max="255"
-                                class="range"
-                            />
-                            <span class="range-value"></span>
-                        </div>
-                    </label>
-                    <label>
-                        <span>Aktion bei Knopfdruck:</span>
-                        <select
-                            name="button-action"
-                            id="input-button-action"
-                            title="Aktion bei Knopfdruck"
-                            required
-                        >
-                            <option value="0">Nichts</option>
-                            <option value="1">
-                                Konfiguration zurücksetzen
-                            </option>
-                            <option value="2">Neustart</option>
-                        </select>
-                    </label>
-                </fieldset>
 
-                <div class="buttons">
+                    <button type="button" class="expand-status icon-button">
-                    <button type="reset">Zurücksetzen</button>
+                        <img src="/icons/open.svg" alt="Mehr" />
-                    <button type="submit">Speichern</button>
+                    </button>
                 </div>
-            </form>
+
+                <dialog class="dialog-status">
+                    <div class="dialog-header">
+                        <h2 class="model"></h2>
+                        <form method="dialog">
+                            <button type="submit" class="icon-button">
+                                <img src="/icons/close.svg" alt="Schließen" />
+                            </button>
+                        </form>
+                    </div>
+
+                    <div class="dialog-status-content">
+                        <div class="card">
+                            <span>Signalstärke</span>
+                            <span class="centered-vertical">
+                                <img
+                                    class="connection-icon small"
+                                    src=""
+                                    alt=""
+                                />
+                                <span><span class="rssi"></span> dBm</span>
+                            </span>
+                        </div>
+
+                        <div class="card">
+                            <span>Uptime</span>
+                            <span class="uptime"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>CPU-Temperatur</span>
+                            <span><span class="cpu-temp"></span> °C</span>
+                        </div>
+
+                        <div class="card">
+                            <span>CPU Cycle Count</span>
+                            <span class="cpu-cycle-count"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>Heap</span>
+                            <span><span class="heap-percentage"></span> %</span>
+                            <span
+                                ><span class="heap-used"></span> /
+                                <span class="heap-total"></span
+                            ></span>
+                        </div>
+
+                        <div class="card">
+                            <span>PSRAM</span>
+                            <span
+                                ><span class="psram-percentage"></span> %</span
+                            >
+                            <span
+                                ><span class="psram-used"></span> /
+                                <span class="psram-total"></span
+                            ></span>
+                        </div>
+
+                        <div class="card">
+                            <span>CPU-Taktfrequenz</span>
+                            <span><span class="cpu-freq"></span> MHz</span>
+                        </div>
+
+                        <div class="card">
+                            <span>MAC-Adresse</span>
+                            <span class="mac"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>Script-Hash</span>
+                            <span class="hash"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>SDK-Version</span>
+                            <span class="sdk-version"></span>
+                        </div>
+                    </div>
+                </dialog>
+
+                <form class="config">
+                    <h1>Konfiguration</h1>
+                    <fieldset>
+                        <legend>Verbindung</legend>
+                        <label>
+                            <span>IP-Zuweisung:</span>
+                            <select
+                                name="ip-method"
+                                id="input-ip-method"
+                                title="IP-"
+                                required
+                            >
+                                <option value="0">Statisch</option>
+                                <option value="1">DHCP</option>
+                            </select>
+                        </label>
+                        <div data-field="input-ip-method" data-values="0">
+                            <label>
+                                <span>IP-Adresse:</span>
+                                <input
+                                    type="text"
+                                    name="ip"
+                                    id="input-ip"
+                                    placeholder="IP-Adresse"
+                                    required
+                                />
+                            </label>
+                            <label>
+                                <span>Subnetzmaske:</span>
+                                <input
+                                    type="text"
+                                    name="subnet"
+                                    id="input-subnet"
+                                    placeholder="Subnetzmaske"
+                                    required
+                                />
+                            </label>
+                            <label>
+                                <span>Gateway:</span>
+                                <input
+                                    type="text"
+                                    name="gateway"
+                                    id="input-gateway"
+                                    placeholder="Gateway"
+                                    required
+                                />
+                            </label>
+                        </div>
+                        <label>
+                            <span>Verbindungsmethode:</span>
+                            <select
+                                name="connection"
+                                id="input-connection"
+                                title="Verbindung"
+                                required
+                            >
+                                <option value="0">WiFi-Station</option>
+                                <option value="1">WiFi-AccessPoint</option>
+                                <option value="2">Ethernet</option>
+                            </select>
+                        </label>
+                        <div data-field="input-connection" data-values="1">
+                            <label>
+                                <span>SSID:</span>
+                                <input
+                                    type="text"
+                                    name="ssid"
+                                    id="input-ssid"
+                                    placeholder="SSID"
+                                    required
+                                />
+                            </label>
+                        </div>
+                        <div data-field="input-connection" data-values="0">
+                            <label>
+                                <span>Netzwerk:</span>
+                                <select
+                                    name="ssid"
+                                    id="select-network"
+                                    title="Netzwerk"
+                                    required
+                                ></select>
+                                <button
+                                    type="button"
+                                    id="refresh-networks"
+                                    class="icon-button"
+                                >
+                                    <img
+                                        src="/icons/refresh.svg"
+                                        alt="Neu laden"
+                                    />
+                                </button>
+                            </label>
+                        </div>
+                        <div data-field="input-connection" data-values="0|1">
+                            <label>
+                                <span>Password:</span>
+                                <input
+                                    type="password"
+                                    name="password"
+                                    id="input-password"
+                                    placeholder="Passwort"
+                                />
+                            </label>
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Input/Output 1</legend>
+                        <label class="switch">
+                            <span>Output</span>
+                            <input
+                                type="checkbox"
+                                name="direction-1"
+                                id="input-direction-1"
+                                data-value-not-checked="0"
+                                data-value-checked="1"
+                            />
+                            <span class="slider"></span>
+                            <span>Input</span>
+                        </label>
+                        <label>
+                            ArtNet-Universe:
+                            <input
+                                type="number"
+                                name="universe-1"
+                                id="universe-1"
+                                placeholder="Universe"
+                                min="0"
+                                max="15"
+                            />
+                        </label>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Input/Output 2</legend>
+                        <label class="switch">
+                            <span>Output</span>
+                            <input
+                                type="checkbox"
+                                name="direction-2"
+                                id="input-direction-2"
+                                data-value-not-checked="0"
+                                data-value-checked="1"
+                            />
+                            <span class="slider"></span>
+                            <span>Input</span>
+                        </label>
+                        <label>
+                            ArtNet-Universe:
+                            <input
+                                type="number"
+                                name="universe-2"
+                                id="universe-2"
+                                placeholder="Universe"
+                                min="0"
+                                max="15"
+                            />
+                        </label>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Sonstiges</legend>
+                        <label>
+                            LED-Helligkeit
+                            <div>
+                                <input
+                                    type="range"
+                                    name="led-brightness"
+                                    id="led-brightness"
+                                    min="0"
+                                    max="255"
+                                    class="range"
+                                />
+                                <span class="range-value"></span>
+                            </div>
+                        </label>
+                        <label>
+                            <span>Aktion bei Knopfdruck:</span>
+                            <select
+                                name="button-action"
+                                id="input-button-action"
+                                title="Aktion bei Knopfdruck"
+                                required
+                            >
+                                <option value="0">Nichts</option>
+                                <option value="1">
+                                    Konfiguration zurücksetzen
+                                </option>
+                                <option value="2">Neustart</option>
+                            </select>
+                        </label>
+                    </fieldset>
+
+                    <div class="buttons">
+                        <button type="reset">Zurücksetzen</button>
+                        <button type="submit">Speichern</button>
+                    </div>
+                </form>
+            </section>
         </main>
     </body>
 </html>

data/input-visibility.js

@@ -1,4 +1,4 @@
-const form = document.querySelector("form");
+const form = document.querySelector("form.config");
 const dynamicInputs = form.querySelectorAll("[data-field][data-values]");
 
 document.addEventListener("change", updateVisibility);

data/load-data.js

@@ -4,7 +4,7 @@ import {
     hideLoadingScreen,
 } from "./loading-screen.js";
 
-const form = document.querySelector("form");
+const form = document.querySelector("form.config");
 
 export let data = {};
 

data/loading-screen.js

@@ -1,11 +1,11 @@
-const form = document.querySelector("form");
+const content = document.querySelector("section.content");
 const loadingScreen = document.querySelector(".loading-screen");
 const loadingMsg = loadingScreen.querySelector("h2");
 const spinner = loadingScreen.querySelector(".spinner");
 const reloadBtn = loadingScreen.querySelector(".reload");
 
 export function showLoadingScreen(msg) {
-    hide(form, reloadBtn);
+    hide(content, reloadBtn);
     show(loadingScreen, spinner);
     loadingMsg.classList.remove("error");
     loadingMsg.textContent = msg;
@@ -22,7 +22,7 @@ export function showError(msg) {
 
 export function hideLoadingScreen() {
     hide(loadingScreen, reloadBtn);
-    show(form);
+    show(content);
     loadingMsg.classList.remove("error");
     loadingMsg.textContent = "";
 }

data/range-input.js

@@ -1,4 +1,4 @@
-document.querySelector("form").addEventListener("input", (event) => {
+document.querySelector("form.config").addEventListener("input", (event) => {
     if (event.target.classList.contains("range")) {
         updateValue(event.target);
     }

data/reset.js

@@ -1,6 +1,6 @@
 import { updateConfig } from "/submit.js";
 
-const form = document.querySelector("form");
+const form = document.querySelector("form.config");
 
 form.addEventListener("reset", async (event) => {
     event.preventDefault();

data/status.js

@@ -0,0 +1,130 @@
+import { data } from "./load-data.js";
+
+const statusDialog = document.querySelector(".dialog-status");
+const expandButton = document.querySelector(".expand-status");
+
+expandButton.addEventListener("click", () => {
+    statusDialog.showModal();
+});
+
+async function loadStatus() {
+    try {
+        const res = await fetch("/status");
+        if (!res.ok) {
+            throw new Error(
+                `Response status: ${res.status}\n${await res.text()}`
+            );
+        }
+
+        const data = await res.json();
+        console.log(data);
+
+        return data;
+    } catch (e) {
+        console.error(e);
+        return null;
+    }
+}
+
+function setStatus(status) {
+    setValue("model", status.chip.model);
+    setValue("mac", formatMac(status.chip.mac));
+    setValue("sdk-version", status.sdkVersion);
+
+    setValue("rssi", status.connection.signalStrength);
+    const icon = selectConnectionIcon(status.connection.signalStrength);
+    document.querySelectorAll(".connection-icon").forEach((img) => {
+        img.src = `/icons/${icon}`;
+    });
+
+    setValue("cpu-freq", status.chip.cpuFreqMHz);
+    setValue("cpu-cycle-count", status.chip.cycleCount);
+    setValue("cpu-temp", status.chip.tempC);
+
+    const usedHeap = status.heap.total - status.heap.free;
+    setValue("heap-used", formatBytes(usedHeap));
+    setValue("heap-total", formatBytes(status.heap.total));
+    setValue(
+        "heap-percentage",
+        Math.round((usedHeap / status.heap.total) * 100)
+    );
+
+    const usedPsram = status.psram.total - status.psram.free;
+    setValue("psram-used", formatBytes(usedPsram));
+    setValue("psram-total", formatBytes(status.psram.total));
+    setValue(
+        "psram-percentage",
+        Math.round((usedPsram / status.psram.total) * 100)
+    );
+
+    setValue("uptime", parseDuration(status.uptime));
+
+    setValue("hash", parseHash(status.sketch.md5));
+}
+
+function setValue(className, value) {
+    document.querySelectorAll("." + className).forEach((element) => {
+        element.innerText = value;
+    });
+}
+
+function parseDuration(ms) {
+    const date = new Date(ms);
+    console.log(date);
+    const time =
+        date.getUTCHours().toString().padStart(2, "0") +
+        ":" +
+        date.getUTCMinutes().toString().padStart(2, "0") +
+        " h";
+    const days = Math.floor(date.getTime() / (1000 * 60 * 60 * 24));
+
+    return days !== 0 ? `${days} Tage, ${time}` : time;
+}
+
+function parseHash(hash) {
+    return hash.toUpperCase().substring(0, 16);
+}
+
+function formatBytes(bytes) {
+    const units = ["Bytes", "KB", "MB", "GB"];
+
+    let value = bytes;
+    let index = 0;
+    while (value >= 1000) {
+        value /= 1000;
+        index++;
+    }
+
+    return `${Math.round(value * 10) / 10} ${units[index]}`;
+}
+
+function formatMac(decimalMac) {
+    const octets = decimalMac.toString(16).toUpperCase().match(/../g) || [];
+    return octets.reverse().join(":");
+}
+
+function selectConnectionIcon(signalStrength) {
+    // access point
+    if (data.connection == 1) {
+        return "hotspot.svg";
+    }
+
+    // ethernet
+    if (data.connection == 2) {
+        return "lan.svg";
+    }
+
+    // station
+    if (signalStrength >= -50) {
+        return "signal4.svg";
+    }
+    if (signalStrength >= -60) {
+        return "signal3.svg";
+    }
+    if (signalStrength >= -70) {
+        return "signal2.svg";
+    }
+    return "signal1.svg";
+}
+
+setStatus(await loadStatus());

data/style.css

@@ -2,6 +2,7 @@
     --color-primary: #087e8b;
     --color-on-primary: white;
     --color-background: #222;
+    --color-surface: #333;
     --color-danger: #fa2b58;
     --appended-item-size: 2.5rem;
 }
@@ -151,6 +152,48 @@ label.switch input:checked + .slider::before {
     translate: -100% -50%;
 }
 
+dialog {
+    width: 80%;
+    max-width: 500px;
+    max-height: 80%;
+    overflow: scroll;
+    background-color: var(--color-background);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 16px;
+}
+
+dialog::backdrop {
+    background-color: #000a;
+}
+
+.dialog-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    & button {
+        margin: 0;
+    }
+}
+
+.card {
+    background-color: var(--color-surface);
+    padding: 8px;
+    border-radius: 8px;
+}
+
+.card > * {
+    display: block;
+}
+
+.card > :first-child {
+    color: var(--color-primary);
+    margin-bottom: 8px;
+}
+
 .buttons {
     display: flex;
     flex-direction: row;
@@ -246,3 +289,39 @@ div:has(.range-value) {
     text-align: center;
     line-height: var(--appended-item-size);
 }
+
+.status {
+    background-color: var(--color-surface);
+    padding: 8px;
+    border-radius: 8px;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+}
+
+.dialog-status-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+
+.connection-icon {
+    width: 24px;
+    height: 24px;
+    padding: 8px;
+}
+
+.connection-icon.small {
+    padding: 0;
+    height: 1em;
+}
+
+.centered-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}

data/submit.js

@@ -5,7 +5,7 @@ import {
     showError,
 } from "./loading-screen.js";
 
-const form = document.querySelector("form");
+const form = document.querySelector("form.config");
 
 function parseValue(input) {
     if (input.type === "checkbox") {

src/main.cpp

@@ -23,6 +23,7 @@
 #include <LittleFS.h>
 #include "routes/config.h"
 #include "routes/networks.h"
+#include "routes/status.h"
 
 // DMXESPSerial dmx1;
 // DMXESPSerial dmx2;
@@ -98,13 +99,6 @@ void ledBlink(int ms)
     }
 } */
 
-float getTemperature()
-{
-    float tempC = -1.0f;
-    temp_sensor_read_celsius(&tempC);
-    return tempC;
-}
-
 void onButtonPress()
 {
     config.begin("dmx", true);
@@ -428,6 +422,9 @@ void setup()
     server.on("/networks", HTTP_GET, [](AsyncWebServerRequest *request)
               { onGetNetworks(request); });
 
+    server.on("/status", HTTP_GET, [](AsyncWebServerRequest *request)
+              { onGetStatus(request); });
+
     server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total)
                          {
                             if (request->url() == "/config" && request->method() == HTTP_PUT) {
@@ -456,9 +453,6 @@ void setup()
     Serial.print(result);
     Serial.println(" °C");
 
-    Serial.print(getTemperature());
-    Serial.println(" °C");
-
     Serial.printf("Internal Total heap %d, internal Free Heap %d\n", ESP.getHeapSize(), ESP.getFreeHeap());
     Serial.printf("SPIRam Total heap %d, SPIRam Free Heap %d\n", ESP.getPsramSize(), ESP.getFreePsram());
     Serial.printf("ChipRevision %d, Cpu Freq %d, SDK Version %s\n", ESP.getChipRevision(), ESP.getCpuFreqMHz(), ESP.getSdkVersion());

src/routes/status.cpp

@@ -0,0 +1,45 @@
+#include "status.h"
+
+int getTemperature()
+{
+    float tempC = -1.0f;
+    temp_sensor_read_celsius(&tempC);
+    return static_cast<int>(round(tempC));
+}
+
+int8_t getWiFiStrength()
+{
+    try
+    {
+        return WiFi.RSSI();
+    }
+    catch (...)
+    {
+        return 0;
+    }
+}
+
+void onGetStatus(AsyncWebServerRequest *request)
+{
+    JsonDocument doc;
+
+    doc["uptime"] = millis();
+    doc["chip"]["model"] = ESP.getChipModel();
+    doc["chip"]["mac"] = ESP.getEfuseMac();
+    doc["chip"]["revision"] = ESP.getChipRevision();
+    doc["chip"]["cpuFreqMHz"] = ESP.getCpuFreqMHz();
+    doc["chip"]["cycleCount"] = ESP.getCycleCount();
+    doc["chip"]["tempC"] = getTemperature();
+    doc["sdkVersion"] = ESP.getSdkVersion();
+    doc["sketch"]["size"] = ESP.getSketchSize();
+    doc["sketch"]["md5"] = ESP.getSketchMD5();
+    doc["heap"]["free"] = ESP.getFreeHeap();
+    doc["heap"]["total"] = ESP.getHeapSize();
+    doc["psram"]["free"] = ESP.getFreePsram();
+    doc["psram"]["total"] = ESP.getPsramSize();
+    doc["connection"]["signalStrength"] = getWiFiStrength();
+
+    String jsonString;
+    serializeJson(doc, jsonString);
+    request->send(200, "application/json", jsonString);
+}

src/routes/status.h

@@ -0,0 +1,5 @@
+#include <AsyncWebServer_ESP32_W5500.h>
+#include <ArduinoJson.h>
+#include <driver/temp_sensor.h>
+
+void onGetStatus(AsyncWebServerRequest *request);