Dateien nach „/“ hochladen
This commit is contained in:
parent
5b62faf785
commit
da83ee74a1
5 changed files with 1260 additions and 0 deletions
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 });
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue