meb/signalk-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement rulesets and layout management for kiosk plugin

Browse Source 
- Added rulesets manager to handle various data types and updates via HTTP and WebSocket.
- Introduced layout store for managing kiosk layouts with caching and server synchronization.
- Enhanced dashboard and data routes to support new layout and ruleset features.
- Updated kiosk HTML and JavaScript to utilize new layout rendering and data binding.
- Removed obsolete map route and integrated map functionality into the new tile renderer.
- Improved Telegram commands to reflect changes in data structure and logging.
- Refactored weather fetching intervals to prevent multiple instances.
- Added SSE stream for real-time layout updates in the kiosk.
This commit is contained in:
Giuseppe Raffa
2026-05-12 10:17:54 +02:00
parent bb8d267cd4
commit c2c1598226
27 changed files with 1061 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
plugin/tools/kiosk/kiosk.html
View File

@@ -3,22 +3,41 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kiosk</title>
<title>MEB Kiosk</title>
<style>
html,body { margin:0; padding:0; height:100%; background:#0b1220; color:#fff; font-family:-apple-system,sans-serif; overflow:hidden; }
#canvas { position:relative; width:100vw; height:100vh; }
.box { position:absolute; border-radius:10px; padding:14px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; transition: background .25s, color .25s, left .25s, top .25s, width .25s, height .25s; }
.box .title { font-size:.9rem; opacity:.65; letter-spacing:.06em; text-transform:uppercase; }
.box .val { flex:1; display:flex; align-items:center; justify-content:center; font-weight:800; font-variant-numeric: tabular-nums; line-height:1; }
.box .unit { opacity:.7; font-size:.6em; margin-left:.25em; }
#statusChip { position:fixed; right:10px; bottom:10px; background:#111827aa; padding:4px 8px; border-radius:999px; font-size:11px; opacity:.6; }
html,body { margin:0; padding:0; height:100%; background:#0b1220; color:#fff;
font-family:-apple-system,Segoe UI,sans-serif; overflow:hidden; }
#grid { position:relative; width:100vw; height:100vh; display:grid;
grid-template-columns: repeat(var(--cols, 12), 1fr);
grid-template-rows: repeat(var(--rows, 8), 1fr);
gap: var(--gap, 4px); padding: var(--gap, 4px); box-sizing:border-box; }
.tile { border-radius:10px; padding:14px; box-sizing:border-box; display:flex;
flex-direction:column; overflow:hidden; background:#111827;
transition: background .25s, color .25s; }
.tile .title { font-size:.85rem; opacity:.65; letter-spacing:.06em;
text-transform:uppercase; margin-bottom:6px; }
.tile .val { flex:1; display:flex; align-items:center; justify-content:center;
font-weight:800; font-variant-numeric: tabular-nums; line-height:1; }
.tile .val .unit { opacity:.55; font-size:.5em; margin-left:.3em; }
.tile .stale { opacity:.45; }
.tile.map .map-host { flex:1; border-radius:6px; overflow:hidden; }
.tile.map .overlays { display:flex; flex-wrap:wrap; gap:8px 14px; padding-top:6px;
font-size:.8rem; opacity:.85; }
.tile.gauge svg { width:100%; height:100%; max-height:100%; }
#statusChip { position:fixed; right:10px; bottom:10px; background:#111827cc;
padding:4px 8px; border-radius:999px; font-size:11px; opacity:.7; }
#statusChip.err { background:#dc2626cc; opacity:1; }
</style>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css">
</head>
<body>
<div id="canvas"></div>
<div id="grid"></div>
<div id="statusChip">boot…</div>
<script src="template-loader.js"></script>
<script src="control-socket.js"></script>
<!-- Mapbox GL (caricato lazy solo se serve un tile di tipo "map") -->
<script src="data-binder.js" defer></script>
<script src="tile-renderer.js" defer></script>
<script src="layout-client.js" defer></script>
</body>
</html>