468 lines
17 KiB
JavaScript
468 lines
17 KiB
JavaScript
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 });
|
|
}
|
|
}
|
|
});
|