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

Merge branch 'main' of https://git.sases.pl/sases/als-alert-screen

Browse Source
This commit is contained in:
Sases
2026-06-08 09:39:11 +02:00
parent 7171e5ea09 7cf063431d
commit b0a66ed982
1 changed files with 337 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
als_alert_screen.html
+114 -41
View File
@@ -1,11 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ALS Alert Screen</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
@@ -32,7 +36,9 @@
background: #0d0000;
overflow: hidden;
}
#alarm-view.active { display: flex; }
#alarm-view.active {
display: flex;
}
.alarm-header {
flex-shrink: 0;
@@ -46,17 +52,24 @@
animation: headerBlink 1s step-start infinite;
}
@keyframes headerBlink {
0%, 100% { background: #1e0000; }
50% { background: #3a0000; }
0%,
100% {
background: #1e0000;
}
50% {
background: #3a0000;
}
}
.alarm-icon { font-size: clamp(28px, 4vw, 56px); }
.alarm-icon {
font-size: clamp(28px, 4vw, 56px);
}
.alarm-title {
font-size: clamp(22px, 3.5vw, 52px);
font-weight: 900;
color: #ff2222;
letter-spacing: .15em;
letter-spacing: 0.15em;
text-transform: uppercase;
}
@@ -93,27 +106,40 @@
animation: cardGlow 2s ease-in-out infinite;
}
@keyframes cardGlow {
0%, 100% { box-shadow: 0 0 12px rgba(255,0,0,.25); }
50% { box-shadow: 0 0 30px rgba(255,0,0,.70); }
0%,
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 {
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;
color: #ff2222;
line-height: 1;
letter-spacing: .04em;
letter-spacing: 0.04em;
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 {
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;
color: #ff9999;
text-transform: uppercase;
letter-spacing: .08em;
letter-spacing: 0.08em;
text-align: center;
}
@@ -125,12 +151,15 @@
border-top: 1px solid #3a0000;
padding-top: 8px;
}
.info-item { display: flex; flex-direction: column; }
.info-item {
display: flex;
flex-direction: column;
}
.info-label {
font-size: clamp(9px, .8vw, 12px);
font-size: clamp(9px, 0.8vw, 12px);
color: #664444;
text-transform: uppercase;
letter-spacing: .05em;
letter-spacing: 0.05em;
}
.info-value {
font-size: clamp(11px, 1.1vw, 16px);
@@ -152,11 +181,11 @@
height: 100%;
background: linear-gradient(90deg, #990000, #ff4444);
border-radius: 6px;
transition: width .8s ease;
transition: width 0.8s ease;
}
.progress-label {
text-align: right;
font-size: clamp(9px, .8vw, 11px);
font-size: clamp(9px, 0.8vw, 11px);
color: #775555;
margin-top: 3px;
}
@@ -168,7 +197,7 @@
right: 10px;
font-size: 11px;
color: #444;
background: rgba(0,0,0,.6);
background: rgba(0, 0, 0, 0.6);
padding: 3px 10px;
border-radius: 4px;
pointer-events: none;
@@ -177,8 +206,11 @@
</style>
</head>
<body>
<iframe id="normal-view" src="http://diluals31/terminal/ift/5/PL/index" allowfullscreen></iframe>
<iframe
id="normal-view"
src="http://192.168.40.102/terminal/ift/5/PL/index"
allowfullscreen
></iframe>
<div id="alarm-view">
<div class="alarm-header">
@@ -194,14 +226,44 @@
<script>
const MACHINES = [
"1.64","1.76","2.60","2.63","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"
"1.64",
"1.76",
"2.60",
"2.63",
"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://luport.local/ws/als-data/";
const WS_BASE = "ws://192.168.40.127/ws/als-data/";
const RECONNECT_MS = 5000;
// ── Debug mode ────────────────────────────────────────────────────────────
@@ -224,7 +286,9 @@ const wsMap = {}; // id → WebSocket instance
function connect(id) {
if (wsMap[id]) {
try { wsMap[id].close(); } catch (_) {}
try {
wsMap[id].close();
} catch (_) {}
}
const ws = new WebSocket(WS_BASE + id + "/");
@@ -243,7 +307,9 @@ function connect(id) {
machineData[id] = { ...msg.data, _ts: msg.timestamp };
updateDisplay();
}
} catch (e) { /* ignore malformed frames */ }
} catch (e) {
/* ignore malformed frames */
}
};
ws.onerror = () => {
@@ -267,8 +333,11 @@ function connect(id) {
function isAlarm(data) {
if (DEBUG_ALARM) return true; // w trybie debug wszystkie wstrzyknięte maszyny to alarmy
return data && typeof data.status === "string" &&
data.status.toLowerCase().includes("alarm");
return (
data &&
typeof data.status === "string" &&
data.status.toLowerCase().includes("alarm")
);
}
function updateDisplay() {
@@ -283,9 +352,8 @@ function updateDisplay() {
if (alarms.length > 0) {
normalView.style.display = "none";
alarmView.classList.add("active");
countEl.textContent = alarms.length === 1
? "1 maszyna"
: alarms.length + " maszyny";
countEl.textContent =
alarms.length === 1 ? "1 maszyna" : alarms.length + " maszyny";
renderCards(alarms);
} else {
normalView.style.display = "block";
@@ -317,15 +385,20 @@ function renderCards(alarms) {
}
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 =
`WS: ${connected} / ${MACHINES.length}`;
}
// ── Bootstrap ─────────────────────────────────────────────────────────────
if (DEBUG_ALARM) {
DEBUG_MACHINES.forEach(id => { machineData[id] = DEBUG_DATA[id]; });
document.getElementById("status-bar").textContent = "[DEBUG] widok alarmowy";
DEBUG_MACHINES.forEach((id) => {
machineData[id] = DEBUG_DATA[id];
});
document.getElementById("status-bar").textContent =
"[DEBUG] widok alarmowy";
} else {
MACHINES.forEach(connect);
}