• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Farbe dynamisch ändern

MQTT

Mitglied
Hallo,
im Node-Red Dashboard kann ich über folgende Anweisung live die Farbe von Werten ändern lassen:
Template:
Code:
<style>
    .plus {
        color: red !important;
    }
</style>
Ausgabe:
Code:
{{msg.payload.P > 0 ? '<span  class="plus">' + msg.payload.P  + '</span>' : msg.payload.P}} W

sobald ein positiver Wert erscheint wird er rot, sonst Standard.

Kann ich das auch in meinem index.html anwenden?

z.B. in meiner Tabelle:
Code:
 <tr>
                    <td>Hausanschluss</td>
                    <td id="P"></td>
                    <td>W</td>
                </tr>
"P" soll entsprechend rot werden.
 
Sicher, Du brauchst nur bei diesem td-Element ebenfalls die Klasse "plus" hinzu zu fügen. classList kann dir dabei helfen:
 
Kannst du mir vielleicht einen Tipp geben?
Habe verschiedene Codes probiert wie div.classList.add und <div class="plus"></div> aber egal wie ich es bei <td id=P> eingebe, es ist immer rot.
 
Möglicher Weise liege ich da falsch aber ich hatte von einem früheren Thread dieses im Hinterkopf:
Code:
       function onMessageArrived(message) {

            console.log("Beschreibung: " + message.destinationName);

            console.log("Nachricht: " + message.payloadString);

            const topic = message.destinationName;
            document.getElementById(topic).innerHTML = message.payloadString;
    }
In dem Fall müsstest Du die Klasse so setzen:
Code:
       function onMessageArrived(message) {
            console.log("Beschreibung: " + message.destinationName);
            console.log("Nachricht: " + message.payloadString);

            const topic = message.destinationName;
            const value = message.payloadString;
            const destElem = document.getElementById(topic);

            destElem.innerHTML = value;
            if (value>0) destElem.classList.add('plus');
            else destElem.classList.remove('plus');

    }
(ungetestet)
 
ok, das ist etwas komplexer.
Aber das geht dann wenn nur für alle meine "id" Werte oder ?

edit: klappt mit allen
 
Zuletzt bearbeitet:
Nein, es ist nicht zwangsläufig so, dass das in einer Schleife sein muss. Du kannst es natürlich auch für ein einziges Element machen, in etwa so:
Code:
function setValue (id, value) {
    
            const destElem = document.getElementById(id);

            destElem.innerHTML = value;
            if (value>0) destElem.classList.add('plus');
            else destElem.classList.remove('plus');
}
 
Nun habe ich es komplett "zerstört", kein Wert geht mehr.

Wo muss ich denn das "P" einsetzen, wenn ich das nur für topic/Id "P" haben will ?

Sorry JS bleibt für mich teilweise ein Rätsel.

So geht´s wieder:

Code:
        function onMessageArrived(message) {
            //console.log("Beschreibung: " + message.destinationName);
            //console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            document.getElementById(topic).innerHTML = message.payloadString;
            const value = message.payloadString;
            const destElem = document.getElementById(topic);
        }
        function setValue(id, value) {
            const destElem = document.getElementById(P);
            destElem.innerHTML = value;
            if (value < 0) destElem.classList.add('minus');
            else destElem.classList.remove('minus');
        }

aber P wird nicht grün
 
Zuletzt bearbeitet:
So langsam wird die Sache klarer.
Eine Funktion wird natürlich nur wirksam, wenn man sie auch aufruft, daran scheitert wohl dein jetziger Code.
Wenn Du das nur für das "P" haben willst, müsstest Du das so machen:
Code:
        function onMessageArrived(message) {
            //console.log("Beschreibung: " + message.destinationName);
            //console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            const destElem = document.getElementById(topic);
            const value = message.payloadString;
            if (topic == "P") {
                if (value > 0) destElem.classList.add('plus');
                else destElem.classList.remove('plus');
            }
            document.getElementById(topic).innerHTML = message.payloadString;
        }
 
Danke
habe es für ein paar Werte wie folgt gemacht:
Code:
        function onMessageArrived(message) {
            //console.log("Beschreibung: " + message.destinationName);
            //console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            const destElem = document.getElementById(topic);
            const value = message.payloadString;
            if (topic == "P" || "I1" || "I2" || "I3") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            document.getElementById(topic).innerHTML = message.payloadString; }

edit: funktioniert natürlich nicht, jetzt sind wieder alle Werte grün die negativ sind.
 
Zuletzt bearbeitet:
edit2, jetzt habe ich es:
Code:
        function onMessageArrived(message) {
            //console.log("Beschreibung: " + message.destinationName);
            //console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            const destElem = document.getElementById(topic);
            const value = message.payloadString;
            if (topic == "P") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            if (topic == "P1") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            if (topic == "P2") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            if (topic == "P3") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            if (topic == "I1") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            if (topic == "I2") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            if (topic == "I3") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            document.getElementById(topic).innerHTML = message.payloadString;
        }

also jeden Wert einzeln - das geht nicht kürzer oder?
 
Doch, das geht kürzer:
Code:
function onMessageArrived(message) {
            //console.log("Beschreibung: " + message.destinationName);
            //console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            const destElem = document.getElementById(topic);
            const value = message.payloadString;
            if (topic == "P" || topic == "I1" || topic == "I2" || topic == "I3") {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            document.getElementById(topic).innerHTML = message.payloadString;
}
Hier unterscheidet sich die Programmiersprache ein wenig von der Umgangssprache.
 
Noch etwas kürzer und eleganter wird es wenn man die IDs in einem Array auflistet:
Code:
function onMessageArrived(message) {
            //console.log("Beschreibung: " + message.destinationName);
            //console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            const destElem = document.getElementById(topic);
            const value = message.payloadString;
            const idList = ["P", "I1", "I2", "I3"];
            if (idList.includes(topic) {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            document.getElementById(topic).innerHTML = message.payloadString;
}
(wieder ungetestet)
 
sehr schön, gefällt mir auch besser !

kann ich eigentlich den ganzen script Teil auch in eine eigenen .js auslagern?
ich hatte es mal probiert, aber dann lief die Seite nicht mehr.

Also den Teil:
Code:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
    <script>
        const clientId = 'Browser_' + Math.random().toString(16).substr(2, 8);
        client = new Paho.MQTT.Client("becker8.de", Number(63709), clientId);
        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;
        client.connect({
            onSuccess: onConnect,
            useSSL: true
        });
        function onConnect() {
            console.log("Verbindung hergestellt");
            client.subscribe("VLT");
            client.subscribe("RLT");
            client.subscribe("Hz");
            client.subscribe("Pth");
            client.subscribe("AT");
            client.subscribe("RT");
            client.subscribe("WW");
            client.subscribe("GM");
            client.subscribe("Nibe");
            client.subscribe("COP");
            client.subscribe("P");
            client.subscribe("P1");
            client.subscribe("P2");
            client.subscribe("P3");
            client.subscribe("U1");
            client.subscribe("U2");
            client.subscribe("U3");
            client.subscribe("I1");
            client.subscribe("I2");
            client.subscribe("I3");
            client.subscribe("PV");
            client.subscribe("Verbrauch");
            client.subscribe("Luft");
            client.subscribe("Speicher");
            client.subscribe("Speicher1");
            client.subscribe("Speicher2");
            client.subscribe("SoC1");
            client.subscribe("SoC2");
            client.subscribe("openwb");
            client.subscribe("goe");
            client.subscribe("STP8");
            client.subscribe("STP6");
            client.subscribe("SB3000");
            client.subscribe("SW1");
            client.subscribe("SW1%");
            client.subscribe("SW2");
            client.subscribe("SW2%");
            client.subscribe("Gauben");
            client.subscribe("Gauben%");
            client.subscribe("Garage");
            client.subscribe("Garage%");
            client.subscribe("Nord");
            client.subscribe("Nord%");
            client.subscribe("PVT");
            client.subscribe("PVM");
            client.subscribe("PVJ");
            client.subscribe("BezT");
            client.subscribe("BezM");
            client.subscribe("BezJ");
            client.subscribe("EinT");
            client.subscribe("EinM");
            client.subscribe("EinJ");
            client.subscribe("VerbT");
            client.subscribe("VerbM");
            client.subscribe("VerbJ");
        }
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("Verbindung verloren:" + responseObject.errorMessage);
            }
        }
        function onMessageArrived(message) {
            //console.log("Beschreibung: " + message.destinationName);
            //console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            const destElem = document.getElementById(topic);
            const value = message.payloadString;
            const idList = ["P", "P1", "P2", "P3", "I1", "I2", "I3"];
            if (idList.includes(topic)) {
                if (value < 0) destElem.classList.add('minus');
                else destElem.classList.remove('minus');
            }
            document.getElementById(topic).innerHTML = message.payloadString;
        }
        function displayTime() {
            let currentDate = new Date();
            let hours = currentDate.getHours();
            let minutes = currentDate.getMinutes();
            let seconds = currentDate.getSeconds();
            hours = hours < 10 ? "0" + hours : hours;
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            let timeString = hours + ":" + minutes + ":" + seconds;
            document.getElementById("zeit").innerHTML = timeString;
        }
        setInterval(displayTime, 1000);

        setTimeout(function () {
            const date = new Date();
            document.getElementById("datum").textContent = new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date);
        }, 1000);
    </script>
so wie ich es bei
Code:
<link rel="stylesheet" href="style.css">
gemacht habe
 
Vermutlich hast Du das Skript im head-Bereich eingebunden, dann sind die Elemente, auf die Du mit getElementById zugreifst, noch nicht vorhanden. Also das Skript am Ende des Body einbinden, vor dem schließenden </body>.
 
er meckert direkt mit der 1. Zeile im java.js: Uncaught SyntaxError: expected expression, got '<'
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
const clientId = 'Browser_' + Math.random().toString(16).substr(2, 8);
client = new Paho.MQTT.Client("becker8.de", Number(63709), clientId);
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({
    onSuccess: onConnect,
    useSSL: true
});
function onConnect() {
    console.log("Verbindung hergestellt");
    client.subscribe("VLT");
...
    client.subscribe("VerbJ");
}
function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
        console.log("Verbindung verloren:" + responseObject.errorMessage);
    }
}
function onMessageArrived(message) {
    //console.log("Beschreibung: " + message.destinationName);
    //console.log("Nachricht: " + message.payloadString);
    const topic = message.destinationName;
    const destElem = document.getElementById(topic);
    const value = message.payloadString;
    const idList = ["P", "P1", "P2", "P3", "I1", "I2", "I3"];
    if (idList.includes(topic)) {
        if (value < 0) destElem.classList.add('minus');
        else destElem.classList.remove('minus');
    }
    document.getElementById(topic).innerHTML = message.payloadString;
}
function displayTime() {
    let currentDate = new Date();
    let hours = currentDate.getHours();
    let minutes = currentDate.getMinutes();
    let seconds = currentDate.getSeconds();
    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    let timeString = hours + ":" + minutes + ":" + seconds;
    document.getElementById("zeit").innerHTML = timeString;
}
setInterval(displayTime, 1000);

setTimeout(function () {
    const date = new Date();
    document.getElementById("datum").textContent = new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date);
}, 1000);
wenn ich <script> entferne meckert er:
Uncaught ReferenceError: Paho is not defined
<anonymous> http://127.0.0.1:5500/Aus/java.js:3
 
Wenn Du ein Skript einbindest, darf nur Javascript drin stehen, keine Script Tags. Die erste Zeile mit dem Einbinden von Paho-MQTT musst Du heraus nehmen und im HTML vor dem Einbinden notieren. Und die öffnenden und schließenden Script-Tags löschen.
 
Zuletzt bearbeitet:
Ah, da muss man mal drauf kommen. Es klappt.

Nur im java.js meckert Visual Code nun mit folgender Zeile:
Code:
const clientId = 'Browser_' + Math.random().toString(16).substr(2, 8);
und zwar ist "substr" durchgestrichen =veraltet.
Wenn ich den substr. weg mache ist es gut, aber der anmeldende browser hat ne sehr merkwürdige clientID.
Weißt du wie ich dort einfach 4 Zahlen/Buchstaben als Anhang bekomme?

edit:
const clientId = 'Browser_' + Math.random().toString(16).substring(2, 8);
so meckert er nicht mehr
 
Zuletzt bearbeitet:
Stimmt, MDN sagt auch, es ist deprecated:
Sollte sich aber problemlos durch substring ersetzen lassen:
und die Zeile müsste dann so aussehen:

Code:
const clientId = 'Browser_' + Math.random().toString(16).substring(2, 10);
 
Zurück
Oben