[Beispiel/How-To] Komplett eigene Visualisierung

nvd126

Hallo,

neulich habe ich meine in VIS bestehende HTML-Visualisierung etwas umgebaut, sodass ich endlich nicht mehr in VIS & Co. arbeiten muss. Ich rufe alle Datenpunkte selbstständig ab.
Ich habe meinen Code etwas verkürzt um ein Beispiel zu geben für meine Küche. Dort habe ich Licht, welches ich wie folgt schalte: 0%, 25%, 50%, 75%, 100%. Die Steckdosen und Anschlüsse schalte ich nur um - ist ein und der selbe Button der je nach Zustand Ein oder Aus anzeigt (CSS-Classe wird geändert). Notwendig für das ganze ist der Socketio-Adapter OHNE erzwungene Websockets. Achtet auch darauf, dass ihr euch die conn.js organisiert ausm Github und sie anständig im Head verlinkt.

Hier das Beispiel:

<head>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/skalierung.css">
	<script type="text/javascript" src="js/conn.js"></script>
	<script type="text/javascript" src="http://IP-ADRESSE:8084/socket.io/socket.io.js"></script>
</head>
<body>
<!--////////////////////////////////////////////////////////////////////////////
Nachfolgend der Teil, welcher die Daten von IOB holt und auch hingibt. Datapoints ist 
für Lesevorgänge. Datapoints2 ist für alles was geschrieben werden muss (=Schalten/dimmen).
/////////////////////////////////////////////////////////////////////////////-->
	<script type="text/javascript">
	const dataPoints = {
	// Beleuchtung
		"javascript.0.Kuchentext": { elementId: "Kuchentext", value: null },
		"knx.0.Obergeschoss.Status.DA1_A_Kuche_Dimmwert": { elementId: "Kuche_Hauptlicht_Dimmwert", value: null },
		"knx.0.Obergeschoss.Status.DA1_B_Kuche_Tischlicht_Dimmwert": { elementId: "Kuche_Tischlicht_Dimmwert", value: null },
	// Steckdosen
		"knx.0.Obergeschoss.Status.SA_A_E_Herd_schalten_status": { elementId: "Kuche_Herd_schalten_status", value: null },
		"knx.0.Obergeschoss.Status.WL_C_Spuehlmaschine_schalten_status": { elementId: "Kuche_Spuhlmaschine_schalten_status", value: null },
		"knx.0.Obergeschoss.Status.SA_D_Steckdosen_Kuche_schalten_status": { elementId: "Kuche_Steckdosen_schalten_status", value: null },
	// Zeiten 
		"javascript.0.SA_A_E_Herd_schalten_status": { elementId: "Herd_schalten_status", value: null },
		"javascript.0.WL_C_Spuehlmaschine_schalten_status": { elementId: "Spuehlmaschine_schalten_status", value: null },
		"javascript.0.SA_D_Steckdosen_Kuche_schalten_status": { elementId: "Steckdosen_Kuche_schalten_status", value: null },
	};

	const dataPoints2 = {
	// Beleuchtung
		"knx.0.Obergeschoss.Beleuchtung.DA1_A_Kuche_Licht_absolut_dimmen": { elementId: "Kuche_Hauptlicht_dimmen", value: null },
		"knx.0.Obergeschoss.Beleuchtung.DA1_B_Kuche_Tischlicht_absolut_dimmen": { elementId: "Kuche_Tischlicht_dimmen", value: null },
	// Steckdosen
		"knx.0.Obergeschoss.Anschlüsse.SA_A_E_Herd_schalten": { elementId: "Kuche_Herd_schalten", value: null },
		"knx.0.Obergeschoss.Anschlüsse.WL_C_Spuehlmaschine_schalten": { elementId: "Kuche_Spuhlmaschine_schalten", value: null },
		"knx.0.Obergeschoss.Anschlüsse.SA_D_Steckdosen_Kuche_schalten": { elementId: "Kuche_Steckdosen_schalten", value: null },

	};

	// Funktion zum Setzen eines neuen Werts für einen Datenpunkt
	function setDataPoint(id, newValue) {
		if (id in dataPoints2) {
			servConn.setState(id, newValue, function(error) {
				if (error) {
					console.error('Error setting state for ' + id + ': ', error);
				} else {
					console.log('Set state for ' + id + ' to ' + newValue);
					dataPoints2[id].value = newValue;
					let element = document.getElementById(dataPoints2[id].elementId);
					if (element) {
						element.innerHTML = newValue;
						console.log('Updated element ' + dataPoints2[id].elementId + ' with new value: ' + newValue);
					} else {
						console.error('Element with ID ' + dataPoints2[id].elementId + ' not found.');
					}
				}
			});
		} else {
			console.error('DataPoint with ID ' + id + ' not found.');
		}
	}

	document.addEventListener("DOMContentLoaded", function() {
		servConn.namespace = 'mobile.0';
		servConn._useStorage = false;

		servConn.init({
			name: 'mobile.0', 
			connLink: 'http://IP-ADRESSE:8084>',
			socketSession: ''
		}, {
			onConnChange: function (isConnected) {
				if (isConnected) {
					console.log('connected');
					Object.keys(dataPoints).forEach(id => {
						servConn.getStates(id, (error, states) => {
							if (error) {
								console.error('Error fetching state for ' + id + ': ', error);
							} else if (states[id]) {
								dataPoints[id].value = states[id].val; // Wert speichern
								console.log('Fetched state for ' + id + ': ' + dataPoints[id].value);

								let element = document.getElementById(dataPoints[id].elementId);
								if (element) {
									element.innerHTML = dataPoints[id].value;
									console.log('Updated element ' + dataPoints[id].elementId + ' with value: ' + dataPoints[id].value);
								} else {
									console.error('Element with ID ' + dataPoints[id].elementId + ' not found.');
								}
							} else {
								console.error('State for ' + id + ' not found.');
							}
						});
					});
				} else {
					console.log('disconnected');
				}
			},
			onRefresh: function () {
				window.location.reload();
			},
			onUpdate: function (id, state) {
				setTimeout(function () {
					if (id in dataPoints) {
						dataPoints[id].value = state.val; // Aktualisieren des Werts bei Änderungen
						console.log('NEW VALUE of ' + id + ': ' + dataPoints[id].value);

						let element = document.getElementById(dataPoints[id].elementId);
						if (element) {
							element.innerHTML = dataPoints[id].value;
							console.log('Updated element ' + dataPoints[id].elementId + ' with new value: ' + dataPoints[id].value);
						} else {
							console.error('Element with ID ' + dataPoints[id].elementId + ' not found.');
						}
					}
				}, 0);
			},
			onError: function (err) {
				window.alert('Cannot execute ' + err.command + ' for ' + err.arg + ', because of insufficient permissions', 'Insufficient permissions', 'alert', 600);
			}
		});
	});
	</script>
<!--////////////////////////////////////////////////////////////////////////////
Navigationsbar
/////////////////////////////////////////////////////////////////////////////-->
	<div class="icon-bar">
		<a href="home.html"><img class="navicon" src="img/home.png"></a>
		<a class="active" href="haus.html"><img class="navicon" src="img/haus.png"></a>
		<a href="statistik.html"><img class="navicon" src="img/statistik.png"></a>
		<a href="technik.html"><img class="navicon" src="img/technik.png"></a>
	</div>
<!--////////////////////////////////////////////////////////////////////////////
Licht Dimmen und Steckdosen schalten für die Küche
/////////////////////////////////////////////////////////////////////////////-->
    <div class="col">
        <div class="tabs">
            <div class="tab">
                <input type="radio" class="accordion" id="rd2" name="rd">
                <label class="tab-label-kleiner" for="rd2"><div id="Kuchentext"></div></label>
                <div class="tab-content">
                    <table id="tab_haus">
<!--/////////////////////////////////-->
						<tr>
							<td colspan=2><b>Hauptbeleuchtung</b><br>
								<div class="button-group">
									<button id="Kuche_Hauptlicht_0" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_A_Kuche_Licht_absolut_dimmen', 0)">
										AUS
									</button>
									<button id="Kuche_Hauptlicht_25" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_A_Kuche_Licht_absolut_dimmen', 25)">
										25%
									</button>
									<button id="Kuche_Hauptlicht_50" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_A_Kuche_Licht_absolut_dimmen', 50)">
										50%
									</button>
									<button id="Kuche_Hauptlicht_75" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_A_Kuche_Licht_absolut_dimmen', 75)">
										75%
									</button>
									<button id="Kuche_Hauptlicht_100" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_A_Kuche_Licht_absolut_dimmen', 100)">
										EIN
									</button>
								</div>
							</td>
						</tr>
<!--/////////////////////////////////-->
						<tr>
							<td colspan=2><b>Tischlicht</b><br>
								<div class="button-group">
									<button id="Kuche_Tischlicht_0" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_B_Kuche_Tischlicht_absolut_dimmen', 0)">
										AUS
									</button>
									<button id="Kuche_Tischlicht_25" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_B_Kuche_Tischlicht_absolut_dimmen', 25)">
										25%
									</button>
									<button id="Kuche_Tischlicht_50" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_B_Kuche_Tischlicht_absolut_dimmen', 50)">
										50%
									</button>
									<button id="Kuche_Tischlicht_75" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_B_Kuche_Tischlicht_absolut_dimmen', 75)">
										75%
									</button>
									<button id="Kuche_Tischlicht_100" type="checkbox" class="button button__outline" onclick="setDimmen('knx.0.Obergeschoss.Beleuchtung.DA1_B_Kuche_Tischlicht_absolut_dimmen', 100)">
										EIN
									</button>
								</div>
							</td>
						</tr>
<!--/////////////////////////////////-->
						<tr>
							<td>
								<b> Herd und Backofen </b><br><div class="timeklein" id="Herd_schalten_status"></div>
							</td>
						 	<td>
								<button id="Herd_und_Backofen" type="checkbox" class="einzel-button einzel-button__outline" onClick="schalten('Herd_und_Backofen')"></button>
								<label></label>
							</td>
						</tr>
<!--/////////////////////////////////-->
						<tr>
							<td>
								<b>Spühlmaschine</b><br><div class="timeklein" id="Spuehlmaschine_schalten_status"></div>
							</td>
							<td>
								<button id="Spuhlmaschine" type="checkbox" class="einzel-button einzel-button__outline" onClick="schalten('Spuhlmaschine')"></button>
								<label></label>
							</td>
						</tr>
<!--/////////////////////////////////-->
						<tr>
							<td>
								<b>Steckdosen</b><br><div class="timeklein" id="Steckdosen_Kuche_schalten_status"></div>
							</td>
							<td>
								<button id="Kuche_Steckdosen" type="checkbox" class="einzel-button einzel-button__outline" onClick="schalten('Kuche_Steckdosen')"></button>
								<label></label>
							</td>
						</tr>
<!--/////////////////////////////////-->
					</table>
				</div>
			</div>
        </div>
    </div>

	 <script>
	///////////////////////////////////////////////////////////////////////////////////////
	// Nachfolgend die Funktion um das Licht dimmen zu können
	///////////////////////////////////////////////////////////////////////////////////////
	function setDimmen(lichtID, value) {
		setDataPoint(lichtID, value);
	}
	///////////////////////////////////////////////////////////////////////////////////////
	// Statusanzeige der Beleuchtung
	///////////////////////////////////////////////////////////////////////////////////////
	setInterval(function() {
		const areas = [
			{prefix: "Kuche_Hauptlicht", valuePath: "knx.0.Obergeschoss.Status.DA1_A_Kuche_Dimmwert"},
			{prefix: "Kuche_Tischlicht", valuePath: "knx.0.Obergeschoss.Status.DA1_B_Kuche_Tischlicht_Dimmwert"},
		];
		areas.forEach(area => {
			// Alle Klassen zurücksetzen
			document.querySelectorAll(`[id^="${area.prefix}"]`).forEach(function(element) {
				element.className = element.className.replace("--primary:active", "").replace("button__outline", "").trim();
				element.style.backgroundColor = ""; // Hintergrundfarbe zurücksetzen
			});
			
			// Klassen basierend auf dem Dimmwert hinzufügen
			[0, 25, 50, 75, 100].forEach(value => {
				let element = document.getElementById(`${area.prefix}_${value}`);
				if (dataPoints[area.valuePath].value == value) {
					element.className += " --primary:active";
					if (value === 0) {
						element.style.backgroundColor = "#04AA6D";
					}
				} else {
					element.className += " button__outline";
				}
			});
		});
	}, 1000); // 1000 Millisekunden entsprechen 1 Sekunde
	/////////////////////////////////////////////////////////////////////////////////////////
	// Funktion um Buttons bzw. Anschlüsse schalten zu können
	///////////////////////////////////////////////////////////////////////////////////////
	function schalten(componentFunction) {
		const components = {
		'Herd_und_Backofen': 'knx.0.Obergeschoss.Anschlüsse.SA_A_E_Herd_schalten',
		'Kuche_Steckdosen': 'knx.0.Obergeschoss.Anschlüsse.SA_D_Steckdosen_Kuche_schalten',
		'Spuhlmaschine': 'knx.0.Obergeschoss.Anschlüsse.WL_C_Spuehlmaschine_schalten',
		};
		const component = components[componentFunction];
		this.servConn._socket.emit('getStates', component, (error, states) => {
			const currentValue = states[component].val;
			this.servConn._socket.emit('setState', component, !currentValue);
		});
	}
	/////////////////////////////////////////////////////////////////////////////////////////
	// Statusanzeige der Buttons
	///////////////////////////////////////////////////////////////////////////////////////
	function updateAllDeviceStatuses() {
		const devices = [
			{ id: 'knx.0.Obergeschoss.Status.SA_A_E_Herd_schalten_status', elementId: 'Herd_und_Backofen' },
			{ id: 'knx.0.Obergeschoss.Status.SA_D_Steckdosen_Kuche_schalten_status', elementId: 'Kuche_Steckdosen' },
			{ id: 'knx.0.Obergeschoss.Status.WL_C_Spuehlmaschine_schalten_status', elementId: 'Spuhlmaschine' },
		];

		devices.forEach(device => {
			const status = dataPoints[device.id].value;
			const element = document.getElementById(device.elementId);

			if (element) {
				if (status === false) {
					element.style.backgroundColor = "#04AA6D";
					element.innerHTML = "Aus";
				} else if (status === true) {
					element.style.backgroundColor = "#dd5800";
					element.innerHTML = "Ein";
				} else {
					// unexpected value handling
				}
			} else {
				// element not found handling
			}
		});
	}

	// Status beider Geräte jede Sekunde aktualisieren
	setInterval(updateAllDeviceStatuses, 1000);
	/////////////////////////////////////////////////////////////////////////////////////////
	</script>
</body>

Bei Fragen fragt ruhig.

Blockmove

@nvd126

Hast du dir den webui - Adapter von Jochen Kühner @jogibear9988 schon mal angeschaut?
Damit kannst du eine Visu auch komplett in HTML erstellen. Nachdem ich mit vis und vis2 nie so richtig warm geworden bin, nutz ich webui nun schon ne ganze Weile.

NEWS

[Beispiel/How-To] Komplett eigene Visualisierung

[Beispiel/How-To] Komplett eigene Visualisierung

Support us

168

32.4k

81.3k

1.3m