Dateien nach „/“ hochladen
This commit is contained in:
parent
5b62faf785
commit
da83ee74a1
5 changed files with 1260 additions and 0 deletions
88
index.html
Normal file
88
index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>LCARS Terminal</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="lcars-container">
|
||||||
|
<!-- Header / Top Bar -->
|
||||||
|
<div class="lcars-header">
|
||||||
|
<div class="lcars-elbow-top-left"></div>
|
||||||
|
<div class="lcars-bar-horizontal">
|
||||||
|
<span class="lcars-title">LCARS TERMINAL 24-03</span>
|
||||||
|
</div>
|
||||||
|
<div class="lcars-bar-curve-right"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar + Content Area -->
|
||||||
|
<div class="lcars-middle">
|
||||||
|
<div class="lcars-sidebar">
|
||||||
|
<div class="lcars-button lcars-orange">SYSTEM</div>
|
||||||
|
<div class="lcars-button lcars-pale-orange">LIBRARY</div>
|
||||||
|
<a href="sensors.html" style="text-decoration: none;">
|
||||||
|
<div class="lcars-button lcars-purple">SENSORS</div>
|
||||||
|
</a>
|
||||||
|
<div class="lcars-spacer"></div>
|
||||||
|
<div class="lcars-button lcars-blue">ANALYSIS</div>
|
||||||
|
<a href="mode.html" style="text-decoration: none;">
|
||||||
|
<div class="lcars-button lcars-red">MODE</div>
|
||||||
|
</a>
|
||||||
|
<!-- Bottom elbow connector for sidebar -->
|
||||||
|
<div class="lcars-column-fill"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="lcars-main-content">
|
||||||
|
<div class="lcars-content-frame">
|
||||||
|
<h1 class="blink">Hintergasse</h1>
|
||||||
|
|
||||||
|
<div class="content-split">
|
||||||
|
<div class="text-block">
|
||||||
|
<p>SYSTEM INITIALIZED: STARDATE 47988.2</p>
|
||||||
|
<p>NO CRITICAL ALERTS DETECTED.</p>
|
||||||
|
<p>MAIN DEFLECTOR DISH: ONLINE</p>
|
||||||
|
<p>WARP CORE: STABLE</p>
|
||||||
|
</div>
|
||||||
|
<div class="graphic-block">
|
||||||
|
<!-- Simple CSS shape representing a schematic -->
|
||||||
|
<div
|
||||||
|
style="width: 200px; height: 100px; border: 2px solid var(--lcars-orange); border-radius: 50px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<div style="width: 80%; height: 2px; background: var(--lcars-red);"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>PLEASE SELECT A COMMAND SEQUENCE FROM THE LIBRARY COMPUTER ACCESS AND RETRIEVAL SYSTEM.</p>
|
||||||
|
|
||||||
|
<div class="data-grid">
|
||||||
|
<div class="data-block lcars-blue-bg" style="width: 100px;"></div>
|
||||||
|
<div class="data-block lcars-purple-bg" style="width: 50px;"></div>
|
||||||
|
<div class="data-block lcars-orange-bg" style="width: 150px;"></div>
|
||||||
|
<div class="data-block lcars-pale-orange-bg"
|
||||||
|
style="width: 120px; background-color: var(--lcars-pale-orange);"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="lcars-footer">
|
||||||
|
<div class="lcars-elbow-bottom-left"></div>
|
||||||
|
<div class="lcars-bar-horizontal-bottom">
|
||||||
|
<span class="lcars-status">ONLINE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Socket.IO Client -->
|
||||||
|
<script src="http://10.0.1.122:8084/socket.io/socket.io.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
159
mode.html
Normal file
159
mode.html
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>LCARS Terminal - Mode Select</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="lcars-container">
|
||||||
|
<!-- Header / Top Bar -->
|
||||||
|
<div class="lcars-header">
|
||||||
|
<div class="lcars-elbow-top-left"></div>
|
||||||
|
<div class="lcars-bar-horizontal">
|
||||||
|
<span class="lcars-title">LCARS TERMINAL 24-03</span>
|
||||||
|
</div>
|
||||||
|
<div class="lcars-bar-curve-right"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar + Content Area -->
|
||||||
|
<div class="lcars-middle">
|
||||||
|
<div class="lcars-sidebar">
|
||||||
|
<a href="index.html" style="text-decoration: none;">
|
||||||
|
<div class="lcars-button lcars-orange">SYSTEM</div>
|
||||||
|
</a>
|
||||||
|
<div class="lcars-button lcars-pale-orange">LIBRARY</div>
|
||||||
|
<a href="sensors.html" style="text-decoration: none;">
|
||||||
|
<div class="lcars-button lcars-purple">SENSORS</div>
|
||||||
|
</a>
|
||||||
|
<div class="lcars-spacer"></div>
|
||||||
|
<div class="lcars-button lcars-blue">ANALYSIS</div>
|
||||||
|
<div class="lcars-button lcars-red">MODE</div>
|
||||||
|
<!-- Bottom elbow connector for sidebar -->
|
||||||
|
<div class="lcars-column-fill"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="lcars-main-content">
|
||||||
|
<div class="lcars-content-frame">
|
||||||
|
<h1>COMMAND SEQUENCES</h1>
|
||||||
|
|
||||||
|
<div class="data-grid" style="margin-top: 20px; flex-wrap: wrap;">
|
||||||
|
<!-- Placeholder Buttons -->
|
||||||
|
<div id="btn-tree" class="lcars-button lcars-orange"
|
||||||
|
style="width: 200px; margin-right: 10px; border-radius: 25px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 20px;">
|
||||||
|
<span>WEIHNACHTSBAUM</span>
|
||||||
|
<span id="val-tree-power" style="font-size: 10px; line-height: 12px;">-- W</span>
|
||||||
|
</div>
|
||||||
|
<div id="btn-terrace" class="lcars-button lcars-blue"
|
||||||
|
style="width: 200px; margin-right: 10px; border-radius: 25px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 20px;">
|
||||||
|
<span>TERRASSENTÜR</span>
|
||||||
|
<span id="val-terrace-power" style="font-size: 10px; line-height: 12px;">-- W</span>
|
||||||
|
</div>
|
||||||
|
<div id="btn-window" class="lcars-button lcars-red"
|
||||||
|
style="width: 200px; margin-right: 10px; border-radius: 25px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 20px;">
|
||||||
|
<span>FENSTER</span>
|
||||||
|
<span id="val-window-power" style="font-size: 10px; line-height: 12px;">-- W</span>
|
||||||
|
</div>
|
||||||
|
<div id="btn-charger" class="lcars-button lcars-pale-orange"
|
||||||
|
style="width: 200px; margin-right: 10px; border-radius: 25px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 20px;">
|
||||||
|
<span>LADER</span>
|
||||||
|
<span id="val-charger-power" style="font-size: 10px; line-height: 12px;">-- W</span>
|
||||||
|
</div>
|
||||||
|
<div id="btn-tv" class="lcars-button lcars-purple"
|
||||||
|
style="width: 200px; margin-right: 10px; border-radius: 25px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 20px;">
|
||||||
|
<span>TV</span>
|
||||||
|
<span id="val-tv-power" style="font-size: 10px; line-height: 12px;">-- W</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Roller Shutter Controls -->
|
||||||
|
<div class="data-grid" style="margin-top: 60px; display: flex; justify-content: space-between;">
|
||||||
|
|
||||||
|
<!-- Rollo 1: Wohnzimmer -->
|
||||||
|
<div style="width: 32%; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="display: flex; width: 100%; align-items: center; margin-bottom: 5px;">
|
||||||
|
<span style="font-size: 16px; flex-grow: 1;">FENSTER</span>
|
||||||
|
<span id="val-rollo" style="font-size: 16px;">--</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" id="range-rollo" min="0" max="100" value="0" class="lcars-slider"
|
||||||
|
style="margin-bottom: 10px;">
|
||||||
|
<div style="display: flex; gap: 5px; width: 100%;">
|
||||||
|
<div id="btn-rollo-down" class="lcars-button lcars-red-bg"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
DOWN</div>
|
||||||
|
<div id="btn-rollo-stop" class="lcars-button lcars-pale-orange"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
STOP</div>
|
||||||
|
<div id="btn-rollo-up" class="lcars-button lcars-green-bg"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
UP</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rollo 2: Placeholder -->
|
||||||
|
<div style="width: 32%; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="display: flex; width: 100%; align-items: center; margin-bottom: 5px;">
|
||||||
|
<span style="font-size: 16px; flex-grow: 1;">TERRASSENTÜR</span>
|
||||||
|
<span id="val-rollo-2" style="font-size: 16px;">--</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" id="range-rollo-2" min="0" max="100" value="0" class="lcars-slider"
|
||||||
|
style="margin-bottom: 10px;">
|
||||||
|
<div style="display: flex; gap: 5px; width: 100%;">
|
||||||
|
<div id="btn-rollo-2-down" class="lcars-button lcars-red-bg"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
DOWN</div>
|
||||||
|
<div id="btn-rollo-2-stop" class="lcars-button lcars-pale-orange"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
STOP</div>
|
||||||
|
<div id="btn-rollo-2-up" class="lcars-button lcars-green-bg"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
UP</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rollo 3: Placeholder -->
|
||||||
|
<div style="width: 32%; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="display: flex; width: 100%; align-items: center; margin-bottom: 5px;">
|
||||||
|
<span style="font-size: 16px; flex-grow: 1;">MARKISE</span>
|
||||||
|
<span id="val-rollo-3" style="font-size: 16px;">--</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" id="range-rollo-3" min="0" max="100" value="0" class="lcars-slider"
|
||||||
|
style="margin-bottom: 10px;">
|
||||||
|
<div style="display: flex; gap: 5px; width: 100%;">
|
||||||
|
<div id="btn-rollo-3-down" class="lcars-button lcars-red-bg"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
EINFAHREN</div>
|
||||||
|
<div id="btn-rollo-3-stop" class="lcars-button lcars-pale-orange"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
STOP</div>
|
||||||
|
<div id="btn-rollo-3-up" class="lcars-button lcars-green-bg"
|
||||||
|
style="flex-grow: 1; height: 30px; font-size: 14px; justify-content: center; margin-bottom: 0; border-radius: 15px;">
|
||||||
|
AUSFAHREN</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="lcars-footer">
|
||||||
|
<div class="lcars-elbow-bottom-left"></div>
|
||||||
|
<div class="lcars-bar-horizontal-bottom">
|
||||||
|
<span class="lcars-status">ONLINE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Socket.IO Client from Server -->
|
||||||
|
<script src="http://10.0.1.122:8084/socket.io/socket.io.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
468
script.js
Normal file
468
script.js
Normal file
|
|
@ -0,0 +1,468 @@
|
||||||
|
console.log("LCARS SYSTEM ONLINE");
|
||||||
|
|
||||||
|
// Helper for screen logging (Debug mode disabled)
|
||||||
|
function logToScreen(msg) {
|
||||||
|
// console.log(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("System Initialized");
|
||||||
|
|
||||||
|
// Check if Socket.IO library is loaded
|
||||||
|
if (typeof io === 'undefined') {
|
||||||
|
console.error("ERROR: Socket.IO library NOT loaded (io is undefined).");
|
||||||
|
} else {
|
||||||
|
initSocket();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initSocket() {
|
||||||
|
// Connect to ioBroker
|
||||||
|
const socket = io('http://10.0.1.122:8084');
|
||||||
|
window.lcarsSocket = socket; // Expose for click handlers
|
||||||
|
|
||||||
|
// Variables to monitor
|
||||||
|
const sensors = [
|
||||||
|
'alias.0.Hintergasse.Energie.ELECTRIC_POWER',
|
||||||
|
'alias.0.Hintergasse.Energie.CONSUMPTION',
|
||||||
|
'javascript.0.Variablen.Tagesverbrauch_Gas',
|
||||||
|
'javascript.0.Variablen.Tagesverbrauch_H2O',
|
||||||
|
'javascript.0.Wetterstation.Aussentemperatur',
|
||||||
|
'javascript.0.Wetterstation.Aussenfeuchtigkeit',
|
||||||
|
'javascript.0.Wetterstation.Innentemperatur',
|
||||||
|
'javascript.0.Wetterstation.Innenfeuchtigkeit',
|
||||||
|
'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET',
|
||||||
|
'alias.0.Wohnzimmer.Terrassentür.SET',
|
||||||
|
'alias.0.Wohnzimmer.Fenster.SET',
|
||||||
|
'alias.0.Wohnzimmer.Lader.SET',
|
||||||
|
'alias.0.Wohnzimmer.TV.SET',
|
||||||
|
'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.ELECTRIC_POWER',
|
||||||
|
'alias.0.Wohnzimmer.Terrassentür.ELECTRIC_POWER',
|
||||||
|
'alias.0.Wohnzimmer.Fenster.ELECTRIC_POWER',
|
||||||
|
'alias.0.Wohnzimmer.Lader.ELECTRIC_POWER',
|
||||||
|
'alias.0.Wohnzimmer.TV.Power',
|
||||||
|
'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET',
|
||||||
|
'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET',
|
||||||
|
'alias.0.Wohnzimmer.Markise.SET'
|
||||||
|
];
|
||||||
|
|
||||||
|
socket.on('connect', () => {
|
||||||
|
console.log('Connected to 10.0.1.122');
|
||||||
|
const statusEl = document.querySelector('.lcars-status');
|
||||||
|
if (statusEl) {
|
||||||
|
statusEl.innerText = "LINK ESTABLISHED";
|
||||||
|
statusEl.style.color = "var(--lcars-orange)";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Subscription Loop
|
||||||
|
sensors.forEach(varName => {
|
||||||
|
socket.emit('subscribe', varName);
|
||||||
|
socket.emit('subscribeStates', varName);
|
||||||
|
|
||||||
|
// Initial Fetch
|
||||||
|
socket.emit('getStates', varName, (err, states) => {
|
||||||
|
if (err) {
|
||||||
|
console.error(`GetStates Error for ${varName}: ${err}`);
|
||||||
|
} else {
|
||||||
|
if (states && states[varName]) {
|
||||||
|
updateSensor(varName, states[varName]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('disconnect', () => {
|
||||||
|
console.log('Disconnected');
|
||||||
|
const statusEl = document.querySelector('.lcars-status');
|
||||||
|
if (statusEl) {
|
||||||
|
statusEl.innerText = "LINK OFFLINE";
|
||||||
|
statusEl.style.color = "var(--lcars-red)";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('stateChange', (id, state) => {
|
||||||
|
updateSensor(id, state);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generic update function
|
||||||
|
function updateSensor(id, state) {
|
||||||
|
if (!state) return;
|
||||||
|
const value = state.val;
|
||||||
|
|
||||||
|
// Power (Watt)
|
||||||
|
if (id === 'alias.0.Hintergasse.Energie.ELECTRIC_POWER') {
|
||||||
|
const el = document.getElementById('val-power');
|
||||||
|
const block = document.getElementById('sensor-power');
|
||||||
|
|
||||||
|
if (el) {
|
||||||
|
el.innerText = value + " W";
|
||||||
|
}
|
||||||
|
if (block) {
|
||||||
|
block.style.backgroundColor = 'var(--lcars-red)';
|
||||||
|
block.style.color = 'black';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Consumption (kWh)
|
||||||
|
if (id === 'alias.0.Hintergasse.Energie.CONSUMPTION') {
|
||||||
|
const el = document.getElementById('val-consumption');
|
||||||
|
const block = document.getElementById('sensor-consumption');
|
||||||
|
|
||||||
|
if (el) {
|
||||||
|
// Convert to kWh (divide by 1000) and round to 1 decimal
|
||||||
|
const formattedValue = (value / 1000).toFixed(1);
|
||||||
|
el.innerText = formattedValue + " kWh";
|
||||||
|
}
|
||||||
|
if (block) {
|
||||||
|
const kwh = value / 1000;
|
||||||
|
if (kwh < 5) {
|
||||||
|
block.style.backgroundColor = 'var(--lcars-green)';
|
||||||
|
} else {
|
||||||
|
block.style.backgroundColor = 'var(--lcars-red)';
|
||||||
|
}
|
||||||
|
block.style.color = 'black';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gas Monitoring
|
||||||
|
if (id === 'javascript.0.Variablen.Tagesverbrauch_Gas') {
|
||||||
|
const el = document.getElementById('val-gas');
|
||||||
|
const block = document.getElementById('sensor-gas');
|
||||||
|
|
||||||
|
if (el) {
|
||||||
|
// Assuming m³ for gas
|
||||||
|
el.innerText = value + " m³";
|
||||||
|
}
|
||||||
|
if (block) {
|
||||||
|
block.style.backgroundColor = 'var(--lcars-yellow)';
|
||||||
|
block.style.color = 'black';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Water Monitoring
|
||||||
|
if (id === 'javascript.0.Variablen.Tagesverbrauch_H2O') {
|
||||||
|
const el = document.getElementById('val-water');
|
||||||
|
const block = document.getElementById('sensor-water');
|
||||||
|
|
||||||
|
if (el) {
|
||||||
|
// Assuming m³ for water
|
||||||
|
el.innerText = value + " m³";
|
||||||
|
}
|
||||||
|
if (block) {
|
||||||
|
block.style.backgroundColor = 'var(--lcars-blue)';
|
||||||
|
block.style.color = 'black';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Temperature (Outer)
|
||||||
|
if (id === 'javascript.0.Wetterstation.Aussentemperatur') {
|
||||||
|
const el = document.getElementById('val-temp');
|
||||||
|
if (el) el.innerText = value + " °C";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Humidity (Outer)
|
||||||
|
if (id === 'javascript.0.Wetterstation.Aussenfeuchtigkeit') {
|
||||||
|
const el = document.getElementById('val-humidity');
|
||||||
|
if (el) el.innerText = value + " %";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Temperature (Inner)
|
||||||
|
if (id === 'javascript.0.Wetterstation.Innentemperatur') {
|
||||||
|
const el = document.getElementById('val-inner-temp');
|
||||||
|
if (el) el.innerText = value + " °C";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Humidity (Inner)
|
||||||
|
if (id === 'javascript.0.Wetterstation.Innenfeuchtigkeit') {
|
||||||
|
const el = document.getElementById('val-inner-humidity');
|
||||||
|
if (el) el.innerText = value + " %";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update global state for toggle buttons
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET') {
|
||||||
|
window.treeState = value;
|
||||||
|
// Visual feedback on button
|
||||||
|
const btn = document.getElementById('btn-tree');
|
||||||
|
if (btn) {
|
||||||
|
if (value) {
|
||||||
|
btn.classList.remove('lcars-orange', 'lcars-red');
|
||||||
|
btn.classList.add('lcars-green'); // Active
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-green)';
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('lcars-green', 'lcars-orange');
|
||||||
|
btn.classList.add('lcars-red'); // Inactive
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-red)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Terrace Door Toggle State
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Terrassentür.SET') {
|
||||||
|
window.terraceState = value;
|
||||||
|
const btn = document.getElementById('btn-terrace');
|
||||||
|
if (btn) {
|
||||||
|
if (value) {
|
||||||
|
btn.classList.remove('lcars-blue', 'lcars-red');
|
||||||
|
btn.classList.add('lcars-green');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-green)';
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('lcars-green', 'lcars-blue');
|
||||||
|
btn.classList.add('lcars-red');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-red)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window Toggle State
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Fenster.SET') {
|
||||||
|
window.windowState = value;
|
||||||
|
const btn = document.getElementById('btn-window');
|
||||||
|
if (btn) {
|
||||||
|
if (value) {
|
||||||
|
btn.classList.remove('lcars-red', 'lcars-blue', 'lcars-orange');
|
||||||
|
btn.classList.add('lcars-green');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-green)';
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('lcars-green', 'lcars-blue', 'lcars-orange');
|
||||||
|
btn.classList.add('lcars-red');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-red)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger Toggle State
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Lader.SET') {
|
||||||
|
window.chargerState = value;
|
||||||
|
const btn = document.getElementById('btn-charger');
|
||||||
|
if (btn) {
|
||||||
|
if (value) {
|
||||||
|
btn.classList.remove('lcars-pale-orange', 'lcars-red', 'lcars-green'); // Clean up initial classes
|
||||||
|
btn.classList.add('lcars-green');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-green)';
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('lcars-green', 'lcars-pale-orange');
|
||||||
|
btn.classList.add('lcars-red');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-red)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TV Toggle State
|
||||||
|
if (id === 'alias.0.Wohnzimmer.TV.SET') {
|
||||||
|
window.tvState = value;
|
||||||
|
const btn = document.getElementById('btn-tv');
|
||||||
|
if (btn) {
|
||||||
|
if (value) {
|
||||||
|
btn.classList.remove('lcars-purple', 'lcars-red', 'lcars-green');
|
||||||
|
btn.classList.add('lcars-green');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-green)';
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('lcars-green', 'lcars-purple');
|
||||||
|
btn.classList.add('lcars-red');
|
||||||
|
btn.style.backgroundColor = 'var(--lcars-red)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Power Updates for Mode Buttons
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.ELECTRIC_POWER') {
|
||||||
|
const el = document.getElementById('val-tree-power');
|
||||||
|
if (el) el.innerText = value + " W";
|
||||||
|
}
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Terrassentür.ELECTRIC_POWER') {
|
||||||
|
const el = document.getElementById('val-terrace-power');
|
||||||
|
if (el) el.innerText = value + " W";
|
||||||
|
}
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Fenster.ELECTRIC_POWER') {
|
||||||
|
const el = document.getElementById('val-window-power');
|
||||||
|
if (el) el.innerText = value + " W";
|
||||||
|
}
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Lader.ELECTRIC_POWER') {
|
||||||
|
const el = document.getElementById('val-charger-power');
|
||||||
|
if (el) el.innerText = value + " W";
|
||||||
|
}
|
||||||
|
if (id === 'alias.0.Wohnzimmer.TV.Power') {
|
||||||
|
const el = document.getElementById('val-tv-power');
|
||||||
|
if (el) el.innerText = value + " W";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rollo Update
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET') {
|
||||||
|
const slider = document.getElementById('range-rollo');
|
||||||
|
const display = document.getElementById('val-rollo');
|
||||||
|
if (slider) {
|
||||||
|
// Apply only if not currently being dragged (simple check: document.activeElement)
|
||||||
|
if (document.activeElement !== slider) {
|
||||||
|
slider.value = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (display) {
|
||||||
|
display.innerText = value + "%";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rollo Terrassentuer Update
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET') {
|
||||||
|
const slider = document.getElementById('range-rollo-2');
|
||||||
|
const display = document.getElementById('val-rollo-2');
|
||||||
|
if (slider) {
|
||||||
|
if (document.activeElement !== slider) {
|
||||||
|
slider.value = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (display) {
|
||||||
|
display.innerText = value + "%";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Markise Update
|
||||||
|
if (id === 'alias.0.Wohnzimmer.Markise.SET') {
|
||||||
|
const slider = document.getElementById('range-rollo-3');
|
||||||
|
const display = document.getElementById('val-rollo-3');
|
||||||
|
if (slider) {
|
||||||
|
if (document.activeElement !== slider) {
|
||||||
|
slider.value = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (display) {
|
||||||
|
display.innerText = value + "%";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button interactions
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
// Tree Toggle
|
||||||
|
if (e.target.id === 'btn-tree') {
|
||||||
|
// Toggle state
|
||||||
|
const newState = window.treeState ? 0 : 1;
|
||||||
|
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET', { val: newState, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Terrace Door Toggle
|
||||||
|
if (e.target.id === 'btn-terrace') {
|
||||||
|
// Toggle state
|
||||||
|
const newState = window.terraceState ? 0 : 1;
|
||||||
|
console.log(`Toggling Terrace to: ${newState}`);
|
||||||
|
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Terrassentür.SET', { val: newState, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window Toggle
|
||||||
|
if (e.target.id === 'btn-window') {
|
||||||
|
// Toggle state
|
||||||
|
const newState = window.windowState ? 0 : 1;
|
||||||
|
console.log(`Toggling Window to: ${newState}`);
|
||||||
|
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Fenster.SET', { val: newState, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger Toggle
|
||||||
|
if (e.target.id === 'btn-charger') {
|
||||||
|
// Toggle state
|
||||||
|
const newState = window.chargerState ? 0 : 1;
|
||||||
|
console.log(`Toggling Charger to: ${newState}`);
|
||||||
|
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Lader.SET', { val: newState, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TV Toggle
|
||||||
|
if (e.target.id === 'btn-tv') {
|
||||||
|
// Toggle state
|
||||||
|
const newState = window.tvState ? 0 : 1;
|
||||||
|
console.log(`Toggling TV to: ${newState}`);
|
||||||
|
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.TV.SET', { val: newState, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Rollo 1 (Fenster) Control ---
|
||||||
|
if (e.target.id === 'btn-rollo-down') {
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: 0, ack: false });
|
||||||
|
}
|
||||||
|
if (e.target.id === 'btn-rollo-up') {
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: 100, ack: false });
|
||||||
|
}
|
||||||
|
if (e.target.id === 'btn-rollo-stop') {
|
||||||
|
console.log("Stopping Rollo Wohnzimmer");
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.STOP', { val: true, ack: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Rollo 2 (Terrassentür) Control ---
|
||||||
|
if (e.target.id === 'btn-rollo-2-down') {
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: 0, ack: false });
|
||||||
|
}
|
||||||
|
if (e.target.id === 'btn-rollo-2-up') {
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: 100, ack: false });
|
||||||
|
}
|
||||||
|
if (e.target.id === 'btn-rollo-2-stop') {
|
||||||
|
console.log("Stopping Rollo Terrassentuer");
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.STOP', { val: true, ack: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Rollo 3 (Markise) Control ---
|
||||||
|
if (e.target.id === 'btn-rollo-3-down') {
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: 0, ack: false });
|
||||||
|
}
|
||||||
|
if (e.target.id === 'btn-rollo-3-up') {
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: 100, ack: false });
|
||||||
|
}
|
||||||
|
if (e.target.id === 'btn-rollo-3-stop') {
|
||||||
|
console.log("Stopping Markise");
|
||||||
|
if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.STOP', { val: true, ack: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Slider Interaction (outside click listener to support dragging)
|
||||||
|
document.addEventListener('input', (e) => {
|
||||||
|
if (e.target.id === 'range-rollo') {
|
||||||
|
const val = e.target.value;
|
||||||
|
const display = document.getElementById('val-rollo');
|
||||||
|
if (display) display.innerText = val + "%";
|
||||||
|
}
|
||||||
|
if (e.target.id === 'range-rollo-2') {
|
||||||
|
const val = e.target.value;
|
||||||
|
const display = document.getElementById('val-rollo-2');
|
||||||
|
if (display) display.innerText = val + "%";
|
||||||
|
}
|
||||||
|
if (e.target.id === 'range-rollo-3') {
|
||||||
|
const val = e.target.value;
|
||||||
|
const display = document.getElementById('val-rollo-3');
|
||||||
|
if (display) display.innerText = val + "%";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('change', (e) => {
|
||||||
|
if (e.target.id === 'range-rollo') {
|
||||||
|
const val = parseInt(e.target.value);
|
||||||
|
console.log(`Setting Rollo to: ${val}`);
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: val, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.target.id === 'range-rollo-2') {
|
||||||
|
const val = parseInt(e.target.value);
|
||||||
|
console.log(`Setting Rollo Terrassentuer to: ${val}`);
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: val, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.target.id === 'range-rollo-3') {
|
||||||
|
const val = parseInt(e.target.value);
|
||||||
|
console.log(`Setting Markise to: ${val}`);
|
||||||
|
if (window.lcarsSocket) {
|
||||||
|
window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: val, ack: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
130
sensors.html
Normal file
130
sensors.html
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>LCARS Terminal - Sensors</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="lcars-container">
|
||||||
|
<!-- Header / Top Bar -->
|
||||||
|
<div class="lcars-header">
|
||||||
|
<div class="lcars-elbow-top-left"></div>
|
||||||
|
<div class="lcars-bar-horizontal">
|
||||||
|
<span class="lcars-title">LCARS TERMINAL 24-03</span>
|
||||||
|
</div>
|
||||||
|
<div class="lcars-bar-curve-right"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar + Content Area -->
|
||||||
|
<div class="lcars-middle">
|
||||||
|
<div class="lcars-sidebar">
|
||||||
|
<a href="index.html" style="text-decoration: none;">
|
||||||
|
<div class="lcars-button lcars-orange">SYSTEM</div>
|
||||||
|
</a>
|
||||||
|
<div class="lcars-button lcars-pale-orange">LIBRARY</div>
|
||||||
|
<div class="lcars-button lcars-purple">SENSORS</div>
|
||||||
|
<div class="lcars-spacer"></div>
|
||||||
|
<div class="lcars-button lcars-blue">ANALYSIS</div>
|
||||||
|
<a href="mode.html" style="text-decoration: none;">
|
||||||
|
<div class="lcars-button lcars-red">MODE</div>
|
||||||
|
</a>
|
||||||
|
<!-- Bottom elbow connector for sidebar -->
|
||||||
|
<div class="lcars-column-fill"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="lcars-main-content">
|
||||||
|
<div class="lcars-content-frame">
|
||||||
|
<h1>SENSOR ARRAY</h1>
|
||||||
|
|
||||||
|
<div class="data-grid" style="margin-top: 20px;">
|
||||||
|
<!-- Power Sensor -->
|
||||||
|
<div id="sensor-power" class="data-block lcars-red-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold;">
|
||||||
|
<span style="font-size: 10px;">LEISTUNGSBEZUG</span>
|
||||||
|
<span id="val-power" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Consumption Sensor -->
|
||||||
|
<div id="sensor-consumption" class="data-block lcars-purple-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold;">
|
||||||
|
<span style="font-size: 10px;">TAGESBEZUG</span>
|
||||||
|
<span id="val-consumption" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gas Sensor -->
|
||||||
|
<div id="sensor-gas" class="data-block lcars-blue-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold; margin-left: 40px;">
|
||||||
|
<span style="font-size: 10px;">GAS</span>
|
||||||
|
<span id="val-gas" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Water Sensor -->
|
||||||
|
<div id="sensor-water" class="data-block lcars-blue-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold;">
|
||||||
|
<span style="font-size: 10px;">WASSER</span>
|
||||||
|
<span id="val-water" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Second Row: Weather -->
|
||||||
|
<div class="data-grid" style="margin-top: 40px;">
|
||||||
|
<!-- Temperature -->
|
||||||
|
<div id="sensor-temp" class="data-block lcars-orange-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold;">
|
||||||
|
<span style="font-size: 10px;">AUSSENTEMPERATUR</span>
|
||||||
|
<span id="val-temp" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Humidity -->
|
||||||
|
<div id="sensor-humidity" class="data-block lcars-light-blue-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold; background-color: var(--lcars-light-blue);">
|
||||||
|
<span style="font-size: 10px;">LUFTFEUCHTIGKEIT</span>
|
||||||
|
<span id="val-humidity" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-block lcars-red-bg" style="width: 80px;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Third Row: Internal Weather -->
|
||||||
|
<div class="data-grid" style="margin-top: 10px;">
|
||||||
|
<!-- Inner Temperature -->
|
||||||
|
<div id="sensor-inner-temp" class="data-block lcars-pink-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold; background-color: var(--lcars-pink);">
|
||||||
|
<span style="font-size: 10px;">INNENTEMPERATUR</span>
|
||||||
|
<span id="val-inner-temp" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inner Humidity -->
|
||||||
|
<div id="sensor-inner-humidity" class="data-block lcars-pale-orange-bg"
|
||||||
|
style="width: 150px; height: 80px; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: black; font-weight: bold; background-color: var(--lcars-pale-orange);">
|
||||||
|
<span style="font-size: 10px;">LUFTFEUCHTIGKEIT</span>
|
||||||
|
<span id="val-inner-humidity" style="font-size: 24px;">--</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="lcars-footer">
|
||||||
|
<div class="lcars-elbow-bottom-left"></div>
|
||||||
|
<div class="lcars-bar-horizontal-bottom">
|
||||||
|
<span class="lcars-status">ONLINE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Socket.IO Client from Server -->
|
||||||
|
<script src="http://10.0.1.122:8084/socket.io/socket.io.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
415
style.css
Normal file
415
style.css
Normal file
|
|
@ -0,0 +1,415 @@
|
||||||
|
:root {
|
||||||
|
/* LCARS Palette */
|
||||||
|
--lcars-orange: #FF9900;
|
||||||
|
--lcars-pale-orange: #FFCC99;
|
||||||
|
--lcars-pink: #CC99CC;
|
||||||
|
--lcars-purple: #995599;
|
||||||
|
/* Adjusted for better contrast/authenticity */
|
||||||
|
--lcars-blue: #9999CC;
|
||||||
|
--lcars-light-blue: #99CCFF;
|
||||||
|
--lcars-red: #CC6666;
|
||||||
|
--lcars-green: #99CC99;
|
||||||
|
--lcars-yellow: #FFCC00;
|
||||||
|
--lcars-bg: #000000;
|
||||||
|
--lcars-text: #000000;
|
||||||
|
/* Text on buttons is typically black */
|
||||||
|
|
||||||
|
/* Dimensions */
|
||||||
|
--elbow-width: 150px;
|
||||||
|
--bar-height: 30px;
|
||||||
|
--button-height: 50px;
|
||||||
|
--gap: 5px;
|
||||||
|
--curve-radius: 30px;
|
||||||
|
/* Radius for the rounded corners */
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: var(--lcars-bg);
|
||||||
|
color: var(--lcars-orange);
|
||||||
|
font-family: 'Antonio', 'Arial Narrow', sans-serif;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
/* Typical for a fixed terminal interface */
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout Grid */
|
||||||
|
.lcars-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header Section */
|
||||||
|
.lcars-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
height: 80px;
|
||||||
|
margin-bottom: var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-elbow-top-left {
|
||||||
|
width: var(--elbow-width);
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--lcars-orange);
|
||||||
|
border-top-left-radius: var(--curve-radius);
|
||||||
|
margin-right: var(--gap);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Creates the inner curve of the elbow */
|
||||||
|
.lcars-elbow-top-left::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: calc(var(--elbow-width) - var(--curve-radius));
|
||||||
|
/* Adjust based on design */
|
||||||
|
height: calc(100% - var(--bar-height));
|
||||||
|
background-color: var(--lcars-bg);
|
||||||
|
border-top-left-radius: var(--curve-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-bar-horizontal {
|
||||||
|
flex-grow: 1;
|
||||||
|
height: var(--bar-height);
|
||||||
|
background-color: var(--lcars-orange);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-top-right-radius: 15px;
|
||||||
|
/* Slight round on the far end */
|
||||||
|
border-bottom-right-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-title {
|
||||||
|
color: var(--lcars-bg);
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-left: auto;
|
||||||
|
/* Push to right */
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Middle Section */
|
||||||
|
.lcars-middle {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-sidebar {
|
||||||
|
width: var(--elbow-width);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: var(--gap);
|
||||||
|
/* Continue the visual column from the header elbow */
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-button {
|
||||||
|
height: var(--button-height);
|
||||||
|
margin-bottom: var(--gap);
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
/* Text aligned right typical for LCARS sidebar */
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--lcars-bg);
|
||||||
|
cursor: pointer;
|
||||||
|
border-top-left-radius: 15px;
|
||||||
|
/* Rounded ends left */
|
||||||
|
border-bottom-left-radius: 15px;
|
||||||
|
transition: filter 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-button:hover {
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-spacer {
|
||||||
|
flex-grow: 1;
|
||||||
|
background-color: transparent;
|
||||||
|
/* Empty space */
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-column-fill {
|
||||||
|
flex-grow: 1;
|
||||||
|
background-color: var(--lcars-pale-orange);
|
||||||
|
min-height: 50px;
|
||||||
|
margin-bottom: var(--gap);
|
||||||
|
border-bottom-left-radius: var(--curve-radius);
|
||||||
|
/* Prepare for bottom elbow */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
.lcars-main-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 20px;
|
||||||
|
border: 2px solid var(--lcars-blue);
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: var(--lcars-light-blue);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-main-content h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--lcars-orange);
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-main-content p {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Section */
|
||||||
|
.lcars-footer {
|
||||||
|
display: flex;
|
||||||
|
height: 60px;
|
||||||
|
margin-top: var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-elbow-bottom-left {
|
||||||
|
width: var(--elbow-width);
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--lcars-pale-orange);
|
||||||
|
border-bottom-left-radius: var(--curve-radius);
|
||||||
|
margin-right: var(--gap);
|
||||||
|
position: relative;
|
||||||
|
top: -5px;
|
||||||
|
/* Close the gap visually if needed, but grid handles it */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inner curve for bottom elbow */
|
||||||
|
.lcars-elbow-bottom-left::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: calc(var(--elbow-width) - var(--curve-radius));
|
||||||
|
height: calc(100% - var(--bar-height));
|
||||||
|
background-color: var(--lcars-bg);
|
||||||
|
border-bottom-left-radius: var(--curve-radius);
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.lcars-bar-horizontal-bottom {
|
||||||
|
flex-grow: 1;
|
||||||
|
height: var(--bar-height);
|
||||||
|
background-color: var(--lcars-pale-orange);
|
||||||
|
align-self: flex-end;
|
||||||
|
/* Align to bottom */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-top-right-radius: 15px;
|
||||||
|
border-bottom-right-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-status {
|
||||||
|
color: var(--lcars-bg);
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Colors Classes */
|
||||||
|
.lcars-orange {
|
||||||
|
background-color: var(--lcars-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-pale-orange {
|
||||||
|
background-color: var(--lcars-pale-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-pink {
|
||||||
|
background-color: var(--lcars-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-purple {
|
||||||
|
background-color: var(--lcars-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-blue {
|
||||||
|
background-color: var(--lcars-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-light-blue {
|
||||||
|
background-color: var(--lcars-light-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-red {
|
||||||
|
background-color: var(--lcars-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-orange-bg {
|
||||||
|
background-color: var(--lcars-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-purple-bg {
|
||||||
|
background-color: var(--lcars-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-blue-bg {
|
||||||
|
background-color: var(--lcars-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideRight {
|
||||||
|
from {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-header {
|
||||||
|
animation: slideDown 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-sidebar {
|
||||||
|
animation: slideRight 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-footer {
|
||||||
|
animation: slideRight 1.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-main-content {
|
||||||
|
animation: fadeIn 2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Layouts */
|
||||||
|
.content-split {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-block {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphic-block {
|
||||||
|
flex: 0 0 250px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blinking Animation */
|
||||||
|
.blink {
|
||||||
|
animation: blinker 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blinker {
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dummy Data Grid */
|
||||||
|
.data-grid {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 50px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-block {
|
||||||
|
width: 60px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Range Slider styling to look like LCARS bar */
|
||||||
|
.lcars-slider {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background: var(--lcars-bg);
|
||||||
|
/* Background of track */
|
||||||
|
border: 2px solid var(--lcars-orange);
|
||||||
|
/* Frame */
|
||||||
|
border-radius: 15px;
|
||||||
|
outline: none;
|
||||||
|
opacity: 0.9;
|
||||||
|
transition: opacity .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-slider:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-slider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 40px;
|
||||||
|
height: 26px;
|
||||||
|
/* slightly smaller than track height to fit inside */
|
||||||
|
background: var(--lcars-orange);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-slider::-moz-range-thumb {
|
||||||
|
width: 40px;
|
||||||
|
height: 26px;
|
||||||
|
background: var(--lcars-orange);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-green-bg {
|
||||||
|
background-color: var(--lcars-green);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lcars-red-bg {
|
||||||
|
background-color: var(--lcars-red);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue