From bca05ba77c8ddb0e73e8815274bb40f114974b26 Mon Sep 17 00:00:00 2001 From: ChK Date: Sat, 4 Apr 2026 18:31:31 +0200 Subject: [PATCH] Style --- logs/gcode_commands.log | 16 ++++++ logs/pings.log | 13 +++++ public/app.js | 122 ++++++++++++++++++++++++---------------- public/index.html | 69 ++++++++++++----------- public/style.css | 109 +++++++++++++++++++++++++++++++++++ startRobot.js | 10 ++++ 6 files changed, 255 insertions(+), 84 deletions(-) mode change 100755 => 100644 public/app.js mode change 100755 => 100644 public/index.html create mode 100644 public/style.css diff --git a/logs/gcode_commands.log b/logs/gcode_commands.log index 575999d..5b19e9c 100644 --- a/logs/gcode_commands.log +++ b/logs/gcode_commands.log @@ -797,3 +797,19 @@ 2026-04-04T14:39:23.187Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 2026-04-04T14:39:37.073Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 2026-04-04T14:39:45.198Z ::ffff:172.21.0.5: G91 G1 X-10 F100 +2026-04-04T16:30:15.281Z ::ffff:172.21.0.5: FShow +2026-04-04T16:30:17.533Z ::ffff:172.21.0.5: G28 +2026-04-04T16:30:20.224Z ::ffff:172.21.0.5: M114 +2026-04-04T16:30:22.006Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:22.182Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:22.350Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:22.520Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:22.689Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:22.994Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:23.218Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:23.443Z ::ffff:172.21.0.5: G91 G1 Y-10 F100 +2026-04-04T16:30:27.758Z ::ffff:172.21.0.5: G91 G1 X-10 F100 +2026-04-04T16:30:29.046Z ::ffff:172.21.0.5: G91 G1 X-10 F100 +2026-04-04T16:30:32.486Z ::ffff:172.21.0.5: G91 G1 X10 F100 +2026-04-04T16:30:32.702Z ::ffff:172.21.0.5: G91 G1 X10 F100 +2026-04-04T16:30:36.979Z ::ffff:172.21.0.5: G91 G1 Y10 F100 diff --git a/logs/pings.log b/logs/pings.log index 7fe5610..1defe2a 100644 --- a/logs/pings.log +++ b/logs/pings.log @@ -5148,3 +5148,16 @@ 2026-04-04T14:52:18.636Z ::ffff:172.21.0.5: Ping 2026-04-04T14:53:00.261Z ::ffff:172.21.0.5: Ping 2026-04-04T14:53:00.826Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:20.226Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:25.163Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:30.176Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:35.176Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:40.166Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:45.178Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:50.243Z ::ffff:172.21.0.5: Ping +2026-04-04T16:30:55.167Z ::ffff:172.21.0.5: Ping +2026-04-04T16:31:00.248Z ::ffff:172.21.0.5: Ping +2026-04-04T16:31:05.242Z ::ffff:172.21.0.5: Ping +2026-04-04T16:31:10.198Z ::ffff:172.21.0.5: Ping +2026-04-04T16:31:15.228Z ::ffff:172.21.0.5: Ping +2026-04-04T16:31:20.170Z ::ffff:172.21.0.5: Ping diff --git a/public/app.js b/public/app.js old mode 100755 new mode 100644 index b9d20a3..d33fc3d --- a/public/app.js +++ b/public/app.js @@ -1,50 +1,72 @@ -document.addEventListener('DOMContentLoaded', function() { - function updateStatus() { - fetch('/api/status') - .then(response => response.json()) - .then(data => { - // WebClients - const clientsUl = document.getElementById('clients'); - clientsUl.innerHTML = ''; - data.clients.forEach(client => { - const li = document.createElement('li'); - li.textContent = client; - clientsUl.appendChild(li); - }); - - // Sender - const sendersUl = document.getElementById('senderList'); - sendersUl.innerHTML = ''; - data.senders.forEach(sender => { - const li = document.createElement('li'); - li.textContent = `${sender.name}: ${sender.status}`; - sendersUl.appendChild(li); - }); - - // Letzte Commands - const commandsUl = document.getElementById('commandList'); - commandsUl.innerHTML = ''; - data.lastCommands.forEach(cmd => { - const li = document.createElement('li'); - li.textContent = cmd; - commandsUl.appendChild(li); - }); - - // Letzte Pings - const pingsUl = document.getElementById('pingList'); - pingsUl.innerHTML = ''; - data.lastPings.forEach(ping => { - const li = document.createElement('li'); - li.textContent = ping; - pingsUl.appendChild(li); - }); - }) - .catch(error => console.error('Error fetching status:', error)); - } - - // Initial load - updateStatus(); - - // Update every 5 seconds - setInterval(updateStatus, 5000); -}); \ No newline at end of file +document.addEventListener('DOMContentLoaded', function() { + function updateStatus() { + fetch('/api/status') + .then(response => response.json()) + .then(data => { + // WebClients + const clientsUl = document.getElementById('clients'); + clientsUl.innerHTML = ''; + data.clients.forEach(client => { + const li = document.createElement('li'); + li.textContent = client; + clientsUl.appendChild(li); + }); + + // Sender + const sendersUl = document.getElementById('senderList'); + sendersUl.innerHTML = ''; + data.senders.forEach(sender => { + const li = document.createElement('li'); + li.textContent = `${sender.name}: ${sender.status}`; + li.classList.add(sender.status.toLowerCase()); + sendersUl.appendChild(li); + }); + + // Letzte Commands + const commandsUl = document.getElementById('commandList'); + commandsUl.innerHTML = ''; + data.lastCommands.forEach(cmd => { + const li = document.createElement('li'); + li.textContent = cmd; + commandsUl.appendChild(li); + }); + + // Letzte Pings + const pingsUl = document.getElementById('pingList'); + pingsUl.innerHTML = ''; + data.lastPings.forEach(ping => { + const li = document.createElement('li'); + li.textContent = ping; + pingsUl.appendChild(li); + }); + }) + .catch(error => console.error('Error fetching status:', error)); + } + + // Initial load + updateStatus(); + + // Update every 5 seconds + setInterval(updateStatus, 5000); +}); + +document.querySelectorAll('.section').forEach(sec => { + const id = sec.dataset.id; + const saved = localStorage.getItem('section_' + id); + if (saved === 'collapsed') sec.classList.add('collapsed'); + + sec.querySelector('h2').addEventListener('click', () => { + sec.classList.toggle('collapsed'); + localStorage.setItem( + 'section_' + id, + sec.classList.contains('collapsed') ? 'collapsed' : 'open' + ); + }); +}); + +/* Initial-Zustand +['clients','pings'].forEach(id => { + if (!localStorage.getItem('section_' + id)) + localStorage.setItem('section_' + id, 'collapsed'); +}); +*/ \ No newline at end of file diff --git a/public/index.html b/public/index.html old mode 100755 new mode 100644 index 74a3a41..eac70e0 --- a/public/index.html +++ b/public/index.html @@ -1,35 +1,36 @@ - - - - - - Robot Driver Info - - - -

Robot Driver Status

-
-

Verbundene WebClients

- -
-
-

Verbundene FluidNC-Controller

- -
-
-

Letzte Commands

- -
-
-

Letzte Ping Nachrichten

- -
- - + + + + + + Robot Driver Info + + + +

Robot Driver Status

+ +
+
+

Verbundene WebClients

+
    +
    + +
    +

    Verbundene FluidNC-Controller

    +
      +
      + +
      +

      Letzte Commands

      +
        +
        + +
        +

        Letzte Ping Nachrichten

        +
          +
          +
          + + + \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..0f8e5fe --- /dev/null +++ b/public/style.css @@ -0,0 +1,109 @@ +:root { + --bg: #0b1c2d; + --panel: #132c44; + --border: #1e3b58; + --text: #e0e6ed; + --accent: #6fb3ff; +} + +* { + box-sizing: border-box; +} + +html, body { + min-height: 100%; +} + +body { + font-family: Arial, sans-serif; + margin: 16px; + background: linear-gradient( + to bottom, + #ffffff -20%, + var(--bg) 110% + ); + color: var(--text); + font-size: 14px; +} + +h1 { + margin-bottom: 16px; + font-size: 20px; + color: var(--accent); +} + +/* Grid: mind. 500px pro Spalte, beliebig viele */ +.sections { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + gap: 10px; +} + +/* Section Card */ +.section { + background: var(--panel); + border: 1px solid var(--border); + border-radius: 8px; + padding: 22px 20px; +} + +/* Header = Klickfläche */ +.section h2 { + margin: 0; + font-size: 15px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + color: var(--accent); +} + +/* Pfeil */ +.section h2::after { + content: "▼"; + font-size: 12px; + transition: transform 0.2s ease; +} + +.section.collapsed h2::after { + transform: rotate(-90deg); +} + +/* Inhalt */ +.section ul { + margin: 10px 0 0; + padding: 0; + list-style: none; +} + +.section.collapsed ul { + display: none; +} + +.section li { + padding: 4px 0; + border-bottom: 1px solid rgba(255,255,255,0.05); +} + +/* FluidNC Status Icons */ +.section#senders li { + position: relative; + padding-left: 22px; +} + +.section#senders li::before { + position: absolute; + left: 0; + top: 2px; + font-size: 14px; +} + +/* ✅ CONNECTED */ +.section#senders li.connected::before { + content: "🟢"; +} + +/* ❌ DISCONNECTED */ +.section#senders li.disconnected::before { + content: "⛔"; +} \ No newline at end of file diff --git a/startRobot.js b/startRobot.js index 061c1cb..8821368 100755 --- a/startRobot.js +++ b/startRobot.js @@ -178,6 +178,16 @@ const infoServer = https.createServer(httpsOptions, (req, res) => { res.end(data); } }); + } else if (req.url === '/style.css') { + fs.readFile('./public/style.css', (err, data) => { + if (err) { + res.writeHead(404); + res.end('Not found'); + } else { + res.writeHead(200, {'Content-Type': 'text/css'}); + res.end(data); + } + }); } else if (req.url === '/api/status') { const status = { clients: connectedClients,