eigene Webseite im Stil der Status Seite erstellen

Gero · Beitrag von **Gero** » Mi Dez 27, 2023 7:28 pm

Ich hab‘ das ja selbst auch noch nie programmiert. Hier ist ein bisschen coding: (nach Browser suchen)

https://www.emqx.com/en/blog/mqtt-js-tutorial

Das müsste meinem Verständnis nach in einen <script> block innerhalb der vom webserver ausgelieferten html-Seite gepackt werden und dann müsste der vom Broker gelieferte Wert halt ins html und nicht auf die Konsole.

Becker · Beitrag von **Becker** » Do Dez 28, 2023 7:07 am

Ich müsste erst Mal bei 0 anfangen, also generell eine Webseite erstellen (ohne Javascript) und mich dann langsam herantasten.
Nur wie fängt man an?
Welches Programm nutzt man dafür (außer Wordpress)?
Habe mir Visual Code angeschaut, aber dort arbeitet man wie der Name schon sagt rein im Code, nicht visuell.

Wie arbeiten denn die Profis, die openWB gebaut haben?
Rein im Code?

Die Tutorials zu Java MQTT habe ich auch gefunden, nur leider verstehe ich das nicht, da es niemals ein Beispiel gibt, wo am Ende ein Live Wert auf einer Webseite raus kommt.
Das Level ist da noch zu hoch für mich..
So geht es mir auch mit Vue.js.

Gero · Beitrag von **Gero** » Do Dez 28, 2023 6:19 pm

Hier ist mal eine ganz simple Webseite mit einer Javascript-Berechnung, das speicherst Du einfach mal als irgendwas.html ab und klickst doppelt drauf:

Code: Alles auswählen

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<body>

<h1>Überschrift</h1>

<p> und hier der erste Absatz</p>
<p id="erster"></p>

<script>
document.getElementById("erster").innerHTML = 5 + 6;
</script>

</body>
</html>

Etwas anspruchvolleres coding gibt's dann bei Steve - der beschäftigt sich viel mit MQTT. Den habe ich viel geschaut und gelesen bei meinen ersten MQTT-Schritten. (und auch nodeRED)

http://www.steves-internet-guide.com/pu ... -web-page/

Da habe ich dann seine Beispielseite heruntergeladen und dann ein bisschen modifiziert, so dass ich aus einer openWB2.1 den EVU-Punkt auslesen konnte. Das kommt an, allerdings noch nicht in dem richtigen Feld. Ich denke mal, seine Seite funktionert so, dass man mit dem Eingabedinx und dem slider Werte publishen kann. Das mit dem EVU-Punkt ist beim rumspielen ein bisschen kaputt gegangen. Die anderen angepassten Stellen findest Du mit der Suche nach "openWB"

Code: Alles auswählen


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
#messages
{
background-color:yellow;
font-size:3;
font-weight:bold;
line-height:140%;
}
#status
{
background-color:red;
font-size:4;
font-weight:bold;
color:white;
line-height:140%;
}
table{
border: 1px solid black;
}
.out
{
background-color:gray;
}

</style>
  <head>
    <title>Simple Web Page Control Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
 	<script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
	var connected_flag=0	
	var mqtt;
    var reconnectTimeout = 2000;
	var host="192.168.8.11"; //IP der openWB
	var port=9001;
var sub_topic="openWB/counter/0/get/power"; //das Topic der openWB
	function onConnectionLost(){
	console.log("connection lost");
	document.getElementById("status").innerHTML = "Connection Lost";
	document.getElementById("messages").innerHTML ="Connection Lost";
	connected_flag=0;
	}
	function onFailure(message) {
		console.log("Failed");
		document.getElementById("messages").innerHTML = "Connection Failed- Retrying";
        setTimeout(MQTTconnect, reconnectTimeout);
        }
	function onMessageArrived(r_message){
		out_msg="Message received "+r_message.payloadString+"<br>";
		out_msg=out_msg+"Message received Topic "+r_message.destinationName;
		//console.log("Message received ",r_message.payloadString);
		console.log(out_msg);
		document.getElementById("messages").innerHTML =out_msg;
		var topic=r_message.destinationName;
		if(topic=="house/outside-light")
		{
		document.getElementById("outside-light").innerHTML =r_message.payloadString;
		}
		if(topic=="house/outside-temperature")
		{
		document.getElementById("outside-temperature").innerHTML =r_message.payloadString;
		}
		}
	function onConnected(recon,url){
	console.log(" in onConnected " +reconn);
	}
	function onConnect() {
	  // Once a connection has been made, make a subscription and send a message.
	document.getElementById("messages").innerHTML ="Connected to "+host +"on port "+port;
	connected_flag=1
	document.getElementById("status").innerHTML = "Connected";
	console.log("on Connect "+connected_flag);
	mqtt.subscribe(sub_topic);
	  }

    function MQTTconnect() {

	console.log("connecting to "+ host +" "+ port);
	var x=Math.floor(Math.random() * 10000); 
	var cname="controlform-"+x;
	mqtt = new Paho.MQTT.Client(host,port,cname);
	//document.write("connecting to "+ host);
	var options = {
        timeout: 3,
		onSuccess: onConnect,
		onFailure: onFailure,
      
     };
	
        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;
		//mqtt.onConnected = onConnected;

	mqtt.connect(options);
	return false;
  
 
	}
	function sub_topics(){
		document.getElementById("messages").innerHTML ="";
		if (connected_flag==0){
		out_msg="<b>Not Connected so can't subscribe</b>"
		console.log(out_msg);
		document.getElementById("messages").innerHTML = out_msg;
		return false;
		}
	var stopic= document.forms["subs"]["Stopic"].value;
	console.log("Subscribing to topic ="+stopic);
	mqtt.subscribe(stopic);
	return false;
	}
	function send_message(msg,topic){
		if (connected_flag==0){
		out_msg="<b>Not Connected so can't send</b>"
		console.log(out_msg);
		document.getElementById("messages").innerHTML = out_msg;
		return false;
		}
		var value=msg.value;
		console.log("value= "+value);
		console.log("topic= "+topic);
		message = new Paho.MQTT.Message(value);
		message.destinationName = "openWB/counter/0/get/"+topic;   //openWB

		mqtt.send(message);
		return false;
	}

	
    </script>

  </head>
 <body onload="MQTTconnect()">
    <h1>Simple Web Page Control Dashboard</h1>
	


 <table>
<tr><td >EVU-Punkt::</td><td><p id="power" type="text" name="power" onchange="send_message(this,'power')"></td></tr>
//<tr><td >Outside Light:</td><td class="switch"><input type="range" min=0 max=1 value=0 class="slider" id="outside-light" onclick="send_message(this,'outsidelight')")></td></tr>
</table>

//<script>
//document.getElementById("power").innerHTML = send_message(this,'power');
//</script>


<div id="status">Connection Status: Not Connected</div>
</div>


<hr>


Messages:<p id="messages"></p>

  </body>
</html>

Achso - Editor war bei mir der vi und das spätere copy&paste habe ich dann per Xcode (das ist die IDE von Apple, die mit dem Betriebssystem geliefert wird) gemacht. Ich bin halt ein alter Unixer, der es irgendwann auf den Mac geschafft hatte - aber erst, als die unter den Mac Unix verbaut hatten.

Ja, der Hausverbrauch ist bei mir gerade 7,2kW.

Becker · Beitrag von **Becker** » Fr Dez 29, 2023 7:02 am

Danke, werde mich damit nächstes Jahr in Ruhe beschäftigen.
Node Red bringt bald ein neues Dashboard raus bzw. Man Kann es schon testen.
Dennoch interessiert mich was selbst gebautes.

Becker · Beitrag von **Becker** » Mi Jan 10, 2024 10:02 am

Die Beispiel Seite war mir zu viel wilder Code, daher habe erst mal gaaaanz einfach angefangen, mit zwei MQTT Nachrichten, die mir in der Browser Konsole angezeigt werden:

Code: Alles auswählen

<!doctype html>
<html lang="de">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"
        type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8);
        // Create a client instance
        client = new Paho.MQTT.Client("192.168.168.9", Number(9001), clientId);

        // set callback handlers
        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;

        // connect the client
        client.connect({ onSuccess: onConnect });


        // called when the client connects
        function onConnect() {
            // Once a connection has been made, make a subscription and send a message.
            console.log("Verbindung hergestellt");
            client.subscribe("VLT");
            client.subscribe("RLT");
        }

        // called when the client loses its connection
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("Verbindung verloren:" + responseObject.errorMessage);
            }
        }

        // called when a message arrives
        function onMessageArrived(message) {
            console.log("Nachricht:" + message.payloadString);
        }
    </script>
</head>

<body>
</body>

</html>

Nächster Schritt: wie bekomme ich die MQTT Nachrichten wiederum auf meine html Seite ?
und sollte man den ganzen Java Script Teil besser auslagern in eine eigene .js Datei ?

Ziel ist eine einzige html Seite wo ich ein paar Grafiken einbinde wie z.B. meine Wärmepumpe, die Bohrung und dort dann die Temperaturen an den Grafiken anzeigen lassen möchte.

Gero · Beitrag von **Gero** » Mi Jan 10, 2024 11:41 am

Dann kuck‘ dir doxh mal mein erstes Beispiel an. Da wird ein Absatz mit „erster“ benannt, dessen Inhalt dann per Javascript modifiziert wird.

Becker · Beitrag von **Becker** » Mi Jan 10, 2024 12:17 pm

sry, hab nur den 2. Codetext gelesen, wird gemacht

edit: komme da nicht mit weiter, ich muss die MQTT Werte client.subscribe("VLT"); client.subscribe("RLT"); in meinem Beispiel irgendwie in einer Variablen speichern und diese dann im <body> wieder einfügen.

Becker · Beitrag von **Becker** » Do Jan 11, 2024 6:38 am

ich habe es doch noch geschafft

zumindest die ersten Werte in einer Tabelle.

Frage zum Code:
Hiermit hole ich mir die o.g. Werte:

Code: Alles auswählen

function onConnect() {
            // Once a connection has been made, make a subscription and send a message.
            console.log("Verbindung hergestellt");
            client.subscribe("VLT");
            client.subscribe("RLT");
            client.subscribe("Hz");
            client.subscribe("Pth");
            client.subscribe("AT");
            client.subscribe("RT");
            client.subscribe("P");
            client.subscribe("PV");
        }

hiermit weise ich sie "id"s zu:

Code: Alles auswählen

        // called when a message arrives
        function onMessageArrived(message) {
            console.log("Beschreibung: " + message.destinationName);
            console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            if (topic == "VLT") {
                document.getElementById("VLT").innerHTML = message.payloadString;
            }
            if (topic == "RLT") {
                document.getElementById("RLT").innerHTML = message.payloadString;
            }
            if (topic == "Hz") {
                document.getElementById("Hz").innerHTML = message.payloadString;
            }
            if (topic == "Pth") {
                document.getElementById("Pth").innerHTML = message.payloadString;
            }
            if (topic == "AT") {
                document.getElementById("AT").innerHTML = message.payloadString;
            }
            if (topic == "RT") {
                document.getElementById("RT").innerHTML = message.payloadString;
            }
            if (topic == "P") {
                document.getElementById("P").innerHTML = message.payloadString;
            }
            if (topic == "PV") {
                document.getElementById("PV").innerHTML = message.payloadString;
            }
        }

geht das eleganter oder ist das der Weg?

hatte versucht alles in ein Json Objekt zu packen, also {"VLT":23.5,"RLT":20.1} - aber kriege es dann nicht mehr zugewiesen mit
document.getElementById("VLT").innerHTML = message.payloadString.VLT (so wie ich es aus Node-Red kenne)

Dann ist mir noch aufgefallen, dass sich das Konstrukt nicht als Internetseite nutzen lässt, nur als Intranetseite.
Denn der lokale Browser initiert auch den MQTT Aufbau - somit müsste ich MQTT WS über Internet freigeben was m.E. nach nicht zu empfehlen wäre um es vorsichtig auszudrücken, da mir so jeder Hanswurst in den Broker schreiben könnte.

derNeueDet · Beitrag von **derNeueDet** » Do Jan 11, 2024 6:50 am

Hmm, wenn du aus den Internet drauf zugreifen willst, dann würde ich auf fertige getestete Lösungen zurückgreifen. Ich will dir nicht zu nahe treten, aber selbst machst du dir da sonst Scheunentore in dein Netz auf.

Wenn du alles integrieren willst, würde ich eher eine fertige Lösung wir Homeassistant nutzen. Da bekommst du bereits Integrationen für verschiedenste Geräte und die Daten der openWB bekommst du dort auch rein. Dann baust du dir ein Minimal Dashboard und zeigst die Dinge an di du sehen willst.
Auch da gibt es noch Randbedingungen, wenn du das aus dem Internet erreichbar machen willst, aber da sehe ich eher eine Chance auf einen sicheren Beteieb als bei einer Eigenrealisierung.

VG
Det

LutzB · Beitrag von **LutzB** » Do Jan 11, 2024 6:56 am

Für den Zugriff von Unterwegs gibt es etwas, das heißt VPN! Dann ist auch relativ egal, wie gut oder schlecht so eine Seite/Dienst/Server gemacht wurde.

openWB Forum

eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen

Re: eigene Webseite im Stil der Status Seite erstellen