hubobel/lcars
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dateien nach „/“ hochladen

Browse source
This commit is contained in:
hubobel 2026-01-03 17:17:24 +01:00
parent 5b62faf785
commit da83ee74a1
5 changed files with 1260 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

88
index.html Normal file
View 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
View 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
View 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
View 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
View 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;
}