sases/als-alert-screen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hidden status-bar & machine.status

Browse Source
This commit is contained in:
Przemysław Kiełkowski
2026-06-01 19:41:16 +02:00
parent c170807172
commit 7cf063431d
1 changed files with 345 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
als_alert_screen.html
+113 -40
View File
@@ -1,11 +1,15 @@
<!DOCTYPE html> <!doctype html>
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ALS Alert Screen</title> <title>ALS Alert Screen</title>
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@@ -32,7 +36,9 @@
background: #0d0000; background: #0d0000;
overflow: hidden; overflow: hidden;
} }
#alarm-view.active { display: flex; } #alarm-view.active {
display: flex;
}
.alarm-header { .alarm-header {
flex-shrink: 0; flex-shrink: 0;
@@ -46,17 +52,24 @@
animation: headerBlink 1s step-start infinite; animation: headerBlink 1s step-start infinite;
} }
@keyframes headerBlink { @keyframes headerBlink {
0%, 100% { background: #1e0000; } 0%,
50% { background: #3a0000; } 100% {
background: #1e0000;
}
50% {
background: #3a0000;
}
} }
.alarm-icon { font-size: clamp(28px, 4vw, 56px); } .alarm-icon {
font-size: clamp(28px, 4vw, 56px);
}
.alarm-title { .alarm-title {
font-size: clamp(22px, 3.5vw, 52px); font-size: clamp(22px, 3.5vw, 52px);
font-weight: 900; font-weight: 900;
color: #ff2222; color: #ff2222;
letter-spacing: .15em; letter-spacing: 0.15em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -93,27 +106,40 @@
animation: cardGlow 2s ease-in-out infinite; animation: cardGlow 2s ease-in-out infinite;
} }
@keyframes cardGlow { @keyframes cardGlow {
0%, 100% { box-shadow: 0 0 12px rgba(255,0,0,.25); } 0%,
50% { box-shadow: 0 0 30px rgba(255,0,0,.70); } 100% {
box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
}
50% {
box-shadow: 0 0 30px rgba(255, 0, 0, 0.7);
}
} }
/* ── big machine number - skala przez --cols / --rows + cqw ── */ /* ── big machine number - skala przez --cols / --rows + cqw ── */
.card-machine-id { .card-machine-id {
font-size: min(calc(55vw / var(--cols, 1)), calc(55vh / var(--rows, 1)), 35cqw); font-size: min(
calc(55vw / var(--cols, 1)),
calc(55vh / var(--rows, 1)),
35cqw
);
font-weight: 900; font-weight: 900;
color: #ff2222; color: #ff2222;
line-height: 1; line-height: 1;
letter-spacing: .04em; letter-spacing: 0.04em;
text-align: center; text-align: center;
text-shadow: 0 0 24px rgba(255,0,0,.6); text-shadow: 0 0 24px rgba(255, 0, 0, 0.6);
} }
.card-status { .card-status {
font-size: min(calc(7vw / var(--cols, 1)), calc(7vh / var(--rows, 1)), 5cqw); font-size: min(
calc(7vw / var(--cols, 1)),
calc(7vh / var(--rows, 1)),
5cqw
);
font-weight: 700; font-weight: 700;
color: #ff9999; color: #ff9999;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .08em; letter-spacing: 0.08em;
text-align: center; text-align: center;
} }
@@ -125,12 +151,15 @@
border-top: 1px solid #3a0000; border-top: 1px solid #3a0000;
padding-top: 8px; padding-top: 8px;
} }
.info-item { display: flex; flex-direction: column; } .info-item {
display: flex;
flex-direction: column;
}
.info-label { .info-label {
font-size: clamp(9px, .8vw, 12px); font-size: clamp(9px, 0.8vw, 12px);
color: #664444; color: #664444;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .05em; letter-spacing: 0.05em;
} }
.info-value { .info-value {
font-size: clamp(11px, 1.1vw, 16px); font-size: clamp(11px, 1.1vw, 16px);
@@ -152,11 +181,11 @@
height: 100%; height: 100%;
background: linear-gradient(90deg, #990000, #ff4444); background: linear-gradient(90deg, #990000, #ff4444);
border-radius: 6px; border-radius: 6px;
transition: width .8s ease; transition: width 0.8s ease;
} }
.progress-label { .progress-label {
text-align: right; text-align: right;
font-size: clamp(9px, .8vw, 11px); font-size: clamp(9px, 0.8vw, 11px);
color: #775555; color: #775555;
margin-top: 3px; margin-top: 3px;
} }
@@ -168,7 +197,7 @@
right: 10px; right: 10px;
font-size: 11px; font-size: 11px;
color: #444; color: #444;
background: rgba(0,0,0,.6); background: rgba(0, 0, 0, 0.6);
padding: 3px 10px; padding: 3px 10px;
border-radius: 4px; border-radius: 4px;
pointer-events: none; pointer-events: none;
@@ -177,8 +206,11 @@
</style> </style>
</head> </head>
<body> <body>
<iframe
<iframe id="normal-view" src="http://192.168.40.102/terminal/ift/5/PL/index" allowfullscreen></iframe> id="normal-view"
src="http://192.168.40.102/terminal/ift/5/PL/index"
allowfullscreen
></iframe>
<div id="alarm-view"> <div id="alarm-view">
<div class="alarm-header"> <div class="alarm-header">
@@ -190,15 +222,45 @@
<div id="machines-grid"></div> <div id="machines-grid"></div>
</div> </div>
<div id="status-bar">WS: 0 / 0</div> <!-- <div id="status-bar">WS: 0 / 0</div> -->
<script> <script>
const MACHINES = [ const MACHINES = [
"1.64","1.76","2.60","2.63","2.67","2.72","2.74", "1.64",
"3.01","3.04","3.08","3.22","3.26","3.51","3.55","3.56", "1.76",
"3.59","3.61","3.66","3.69","3.70","3.71","3.73","3.75", "2.60",
"4.05","4.09","4.14","4.52","4.53","4.57","4.58","4.62", "2.63",
"4.65","4.68","5.29","5.54" "2.67",
"2.72",
"2.74",
"3.01",
"3.04",
"3.08",
"3.22",
"3.26",
"3.51",
"3.55",
"3.56",
"3.59",
"3.61",
"3.66",
"3.69",
"3.70",
"3.71",
"3.73",
"3.75",
"4.05",
"4.09",
"4.14",
"4.52",
"4.53",
"4.57",
"4.58",
"4.62",
"4.65",
"4.68",
"5.29",
"5.54",
]; ];
const WS_BASE = "ws://192.168.40.127/ws/als-data/"; const WS_BASE = "ws://192.168.40.127/ws/als-data/";
@@ -224,7 +286,9 @@ const wsMap = {}; // id → WebSocket instance
function connect(id) { function connect(id) {
if (wsMap[id]) { if (wsMap[id]) {
try { wsMap[id].close(); } catch (_) {} try {
wsMap[id].close();
} catch (_) {}
} }
const ws = new WebSocket(WS_BASE + id + "/"); const ws = new WebSocket(WS_BASE + id + "/");
@@ -243,7 +307,9 @@ function connect(id) {
machineData[id] = { ...msg.data, _ts: msg.timestamp }; machineData[id] = { ...msg.data, _ts: msg.timestamp };
updateDisplay(); updateDisplay();
} }
} catch (e) { /* ignore malformed frames */ } } catch (e) {
/* ignore malformed frames */
}
}; };
ws.onerror = () => { ws.onerror = () => {
@@ -262,8 +328,11 @@ function connect(id) {
function isAlarm(data) { function isAlarm(data) {
if (DEBUG_ALARM) return true; // w trybie debug wszystkie wstrzyknięte maszyny to alarmy if (DEBUG_ALARM) return true; // w trybie debug wszystkie wstrzyknięte maszyny to alarmy
return data && typeof data.status === "string" && return (
data.status.toLowerCase().includes("alarm"); data &&
typeof data.status === "string" &&
data.status.toLowerCase().includes("alarm")
);
} }
function updateDisplay() { function updateDisplay() {
@@ -278,9 +347,8 @@ function updateDisplay() {
if (alarms.length > 0) { if (alarms.length > 0) {
normalView.style.display = "none"; normalView.style.display = "none";
alarmView.classList.add("active"); alarmView.classList.add("active");
countEl.textContent = alarms.length === 1 countEl.textContent =
? "1 maszyna" alarms.length === 1 ? "1 maszyna" : alarms.length + " maszyny";
: alarms.length + " maszyny";
renderCards(alarms); renderCards(alarms);
} else { } else {
normalView.style.display = "block"; normalView.style.display = "block";
@@ -312,15 +380,20 @@ function renderCards(alarms) {
} }
function refreshStatus() { function refreshStatus() {
const connected = Object.values(wsStatus).filter(s => s === "connected").length; const connected = Object.values(wsStatus).filter(
(s) => s === "connected",
).length;
document.getElementById("status-bar").textContent = document.getElementById("status-bar").textContent =
`WS: ${connected} / ${MACHINES.length}`; `WS: ${connected} / ${MACHINES.length}`;
} }
// ── Bootstrap ───────────────────────────────────────────────────────────── // ── Bootstrap ─────────────────────────────────────────────────────────────
if (DEBUG_ALARM) { if (DEBUG_ALARM) {
DEBUG_MACHINES.forEach(id => { machineData[id] = DEBUG_DATA[id]; }); DEBUG_MACHINES.forEach((id) => {
document.getElementById("status-bar").textContent = "[DEBUG] widok alarmowy"; machineData[id] = DEBUG_DATA[id];
});
document.getElementById("status-bar").textContent =
"[DEBUG] widok alarmowy";
} else { } else {
MACHINES.forEach(connect); MACHINES.forEach(connect);
} }