Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Mr. Burns]

@codierknecht Ich hatte bei der suche marquee auch gelesen, da aber die rede von HTML war, dachte ich, es käme nicht in Frage.
Wie kann ich ein HTML Widget denn in ein Javascript einbinden?

Mein Text (current_titel) steht in einer Variable (DP) und der geänderte Text muss auch in eine Variable(Datenpunkt).

[Codierknecht]

@mr-burns
Ohne JS - ganz normales basic-HTML-Widget und Binding

Zur Laufzeit steht dann da natürlich der Inhalt des DP drin ;-)

[Codierknecht]

@mr-burns sagte in Laufschrift in DP (String):

auf einer Anzeige darstellen

Oder geht's hier gar nicht um VIS?

[Mr. Burns]

@codierknecht Nein, die Anzeige soll auf einem Hardwaredisplay erfolgen. Ein Glastaster von MDT in der Küche.

[bahnuhr]

@mr-burns sagte in Laufschrift in DP (String):

@codierknecht Nein, die Anzeige soll auf einem Hardwaredisplay erfolgen. Ein Glastaster von MDT in der Küche.

Und warum kommt diese Info nicht in #1

[Codierknecht]

@mr-burns
Da gibt‘s aber doch hunderte von Beispielen
https://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/

[Mr. Burns]

@bahnuhr ich dachte, das hätte ich…

„Konkret möchte ich den aktuell laufenden Titel (Radio) eines Sonos Lautsprechers auf einer Anzeige darstellen, welche aber zu wenig Zeichen hat.“

vielleicht hätte ich es deutlicher schreiben können.

[Mr. Burns]

@codierknecht ich kann leider nicht wirklich coden. Ich kopiere nur und passe an. Aber auch nur das, was ich verstehe.

Wie könnte ich dein Beispiel in ein Script einbauen?

[paul53]

@mr-burns sagte: Laufschrift in eine 10 Zeichen lange variable zu verschieben?

Versuche mal

const idText = 'abc';
const idT10  = 'xyz';
const idFreq = '0_userdata.0.def'; // Frequenz (Hz)

var timer = null;

on(idText, function(dp) {
    clearInterval(timer);
    if(dp.state.val.length > 10) {
        let cycle = 1000 / getState(idFreq).val;
        let start = 0;
        timer = setInterval(function() {
            setState(idT10, dp.state.val.slice(start, start + 10));
            start++;
            if(start > dp.state.val.length -10) start = 0;
        }, cycle);
    } else setState(idT10, dp.state.val);
});

EDIT: Geändert: setState() ohne Ack = true.

[Mr. Burns]

@paul53 danke für deine Hilfe. Hab das gerade mal schnell getestet hat aber nicht funktioniert. Guck mir das morgen noch mal in Ruhe an und berichte.
Schönen Abend noch.

[Mr. Burns]

@paul53 dein Script funktioniert grundsätzlich!

Die Laufschrift wird in die variable geschrieben. Aber sie wird nicht an die Anzeige gesendet.
Man kann sehen, das sich der Datenpunkt unter Objekten verändert, aber er wird nicht geschrieben.
(Weder vom Adapter an das Display, noch kann ich die variable in einem script weiterverarbeiten. Wert und Änderungszeit wird aber verändert)

Wenn ich in einen internen DP unter Userdata schreibe und mit einem 2. Script in die ext. variable schreibe funktioniert es.

Lässt sich da noch eine Haltezeit zwischen der nächsten Wiederholung einbauen?

//var idText = '0_userdata.0.Text'/*Text*/;
var idText = 'sonos.0.root.192_168_178_56.current_title'/*Current title*/;
const idT10  = '0_userdata.0.Strg10'/*Strg10*/;
//var idT10  = 'openknx.0.E5_Küche.Multimedia.EG_Küche_Statuszeile_1'/*EG Küche Statuszeile 2*/;
var idFreq = '0_userdata.0.def'/*def*/;
 
var timer = null;
 
on(idText, function(dp) {
    clearInterval(timer);
    if(dp.state.val.length > 14) {
        let cycle = 2000 / getState(idFreq).val;
        let start = 0;
        timer = setInterval(function() {
            setState(idT10, dp.state.val.slice(start, start + 14), true);
            start++;
            if(start > dp.state.val.length -14) start = 0;
        }, cycle);
    } else setState(idT10, dp.state.val, true);
});

on({id: '0_userdata.0.Strg10', change: "ne"}, function (dp) {
  setState('openknx.0.E5_Küche.Multimedia.EG_Küche_Statuszeile_2', getState('0_userdata.0.Strg10').val);
});

[Codierknecht]

@mr-burns sagte in Laufschrift in DP (String):

Wenn ich in einen internen DP unter Userdata schreibe und mit einem 2. Script in die ext. variable schreibe funktioniert es.

Ich vermute mal, dass Du mit setState(..., true) durchaus den DP openknx beschreiben kannst.
Du müsstest lediglich den letzten Parameter von true auf false setzen - also ohne ack schreiben.

[Mr. Burns]

@codierknecht Funktioniert. Vielen Dank!

Könnte man da noch eine zusätzlichen Timer einbauen?

[Codierknecht]

@mr-burns sagte in Laufschrift in DP (String):

Lässt sich da noch eine Haltezeit zwischen der nächsten Wiederholung einbauen?

Hinter Zeile 18 eine neue einfügen:

await wait(1000);

[paul53]

@mr-burns sagte: Lässt sich da noch eine Haltezeit zwischen der nächsten Wiederholung einbauen?

Ich würde es so machen:

        timer = setInterval(function() {
            if(start >= 0) setState(idT10, dp.state.val.slice(start, start + 14));
            start++;
            if(start > dp.state.val.length - 14) start = -2;
        }, cycle);

[Mr. Burns]

@codierknecht Die Funktion await lässt er nicht zu.

@paul53 Funktioniert! Er wartet aber am Ende des Textes. Ginge das auch am Anfang?
Also der Anfang des Titels für 5s oder 10s stehen bleiben und dan mit der Laufschrift starten?

[paul53]

@mr-burns sagte: Ginge das auch am Anfang?

Versuche es mal so:

        timer = setInterval(function() {
            setState(idT10, dp.state.val.slice(Math.max(start, 0), Math.max(start + 14, 14)));
            start++;
            if(start > dp.state.val.length - 14) start = -2;
        }, cycle);

[Mr. Burns]

@paul53 Es funktioniert. Vielen Dank für deine Unterstützung!

Das ganze Script sieht jetzt so aus:

var idText = 'sonos.0.root.192_168_178_56.current_title'/*Current title*/;
var idT14  = 'openknx.0.E5_Küche.Multimedia.EG_Küche_Statuszeile_2'/*EG Küche Statuszeile 2*/;
 
var timer = null;
 
on(idText, function(dp) {
    clearInterval(timer);
    if(dp.state.val.length > 14) {
        let cycle = 1000; // Geschwindigkeit in ms
        let start = 0;
        timer = setInterval(function() {
            setState(idT14, dp.state.val.slice(Math.max(start, 0), Math.max(start + 14, 14)));
            start++;
            if(start > dp.state.val.length - 14) start = -8; // Haltezeit am Anfang (Geschwindigkeit * Cycle)
        }, cycle);
    } else setState(idT14, dp.state.val);
});

[paul53]

@mr-burns sagte: Es funktioniert.

Ändere noch Zeile 16

    } else setState(idT14, dp.state.val);

uns setze das Thema in der Überschrift des ersten Beitrags auf [gelöst].