hidden status-bar & machine.status
This commit is contained in:
+155
-82
@@ -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,19 +197,22 @@
|
|||||||
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;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<iframe
|
||||||
|
id="normal-view"
|
||||||
|
src="http://192.168.40.102/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 id="alarm-view">
|
|
||||||
<div class="alarm-header">
|
<div class="alarm-header">
|
||||||
<span class="alarm-icon">⚠</span>
|
<span class="alarm-icon">⚠</span>
|
||||||
<span class="alarm-title">Alarm</span>
|
<span class="alarm-title">Alarm</span>
|
||||||
@@ -188,43 +220,75 @@
|
|||||||
<span class="alarm-icon">⚠</span>
|
<span class="alarm-icon">⚠</span>
|
||||||
</div>
|
</div>
|
||||||
<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/";
|
||||||
const RECONNECT_MS = 5000;
|
const RECONNECT_MS = 5000;
|
||||||
|
|
||||||
// ── Debug mode ────────────────────────────────────────────────────────────
|
// ── Debug mode ────────────────────────────────────────────────────────────
|
||||||
// Otwórz stronę z ?debug aby wymusić widok alarmowy z przykładowymi danymi.
|
// Otwórz stronę z ?debug aby wymusić widok alarmowy z przykładowymi danymi.
|
||||||
// Możesz też wpisać w konsoli: DEBUG_ALARM = true; updateDisplay();
|
// Możesz też wpisać w konsoli: DEBUG_ALARM = true; updateDisplay();
|
||||||
let DEBUG_ALARM = new URLSearchParams(location.search).has("debug");
|
let DEBUG_ALARM = new URLSearchParams(location.search).has("debug");
|
||||||
|
|
||||||
const DEBUG_MACHINES = ["2.60", "3.22", "4.09"];
|
const DEBUG_MACHINES = ["2.60", "3.22", "4.09"];
|
||||||
const DEBUG_DATA = {
|
const DEBUG_DATA = {
|
||||||
"2.60": { machine:"2.60", status:"Alarm - brak materiału" },
|
"2.60": { machine: "2.60", status: "Alarm - brak materiału" },
|
||||||
"3.22": { machine:"3.22", status:"Alarm - awaria" },
|
"3.22": { machine: "3.22", status: "Alarm - awaria" },
|
||||||
"4.09": { machine:"4.09", status:"Alarm - przekroczony cykl" },
|
"4.09": { machine: "4.09", status: "Alarm - przekroczony cykl" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const machineData = {}; // id → last data payload
|
const machineData = {}; // id → last data payload
|
||||||
const wsStatus = {}; // id → 'connected' | 'error' | 'disconnected'
|
const wsStatus = {}; // id → 'connected' | 'error' | 'disconnected'
|
||||||
const wsMap = {}; // id → WebSocket instance
|
const wsMap = {}; // id → WebSocket instance
|
||||||
|
|
||||||
// ── WebSocket management ──────────────────────────────────────────────────
|
// ── WebSocket management ──────────────────────────────────────────────────
|
||||||
|
|
||||||
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 = () => {
|
||||||
@@ -256,17 +322,20 @@ function connect(id) {
|
|||||||
refreshStatus();
|
refreshStatus();
|
||||||
setTimeout(() => connect(id), RECONNECT_MS);
|
setTimeout(() => connect(id), RECONNECT_MS);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Display logic ─────────────────────────────────────────────────────────
|
// ── Display logic ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
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() {
|
||||||
const alarms = Object.entries(machineData)
|
const alarms = Object.entries(machineData)
|
||||||
.filter(([, d]) => isAlarm(d))
|
.filter(([, d]) => isAlarm(d))
|
||||||
.sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true }));
|
.sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true }));
|
||||||
@@ -278,17 +347,16 @@ 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";
|
||||||
alarmView.classList.remove("active");
|
alarmView.classList.remove("active");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderCards(alarms) {
|
function renderCards(alarms) {
|
||||||
const grid = document.getElementById("machines-grid");
|
const grid = document.getElementById("machines-grid");
|
||||||
grid.innerHTML = "";
|
grid.innerHTML = "";
|
||||||
|
|
||||||
@@ -309,22 +377,27 @@ function renderCards(alarms) {
|
|||||||
`;
|
`;
|
||||||
grid.appendChild(card);
|
grid.appendChild(card);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
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];
|
||||||
} else {
|
});
|
||||||
|
document.getElementById("status-bar").textContent =
|
||||||
|
"[DEBUG] widok alarmowy";
|
||||||
|
} else {
|
||||||
MACHINES.forEach(connect);
|
MACHINES.forEach(connect);
|
||||||
}
|
}
|
||||||
updateDisplay();
|
updateDisplay();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user