Widget Eventlist formatieren

[Homoran]

Hallo zusammen.

Wie bereits hier beschrieben, spiele ich ein wenig mit Blockly um mich etwas tiefer in JavaScript einzuarbeiten.

Dabei schreibe ich in einen Datenpunkt und visualisiere die History über das Widget Eventlist.
Das einfache Format war mir etwas zu öde und ich habe angefangen es etwas zu pimpen.

Klappt schon ganz gut mit <br><strong> und <h3>, aber ich bekomme keine Farbe rein.

Außerdem hätte ich gerne fixe Wertelängen, zumindest fixe Nachkommastellen.
Habe es schon mit "runden auf...mit Nachkommastellen 1" versucht, klappt nicht. Führende Nullen wären noch nice to have, muss aber nicht sein.

Und ein Bug(???) ist mir noch aufgefallen: die aktuelle Meldung wird erst nach einem refresh dargestellt. Dabei ist das die wichtigste.

Bin für jede Hilfe dankbar.

[Jey Cee]

Hallo Rainer,

Bin mir nicht ganz sicher ob es das ist was du suchst:
Du kannst die Felder mit CSS Stil im Widget Eventlist benutzen um das aussehen an zu passen. Bei Farben kannst du entweder mit Namen (red, blue, usw.) oder mit html Farbcodes arbeiten.

Beispiel:

color: red;

oder

color: #9A2EFE;

Es können auch mehrere CSS Eigenschaften verwendet werden:

text-align: center; color: red;

@Homoran sagte in Widget Eventlist formatieren:

Klappt schon ganz gut mit <br><strong> und <h3>, aber ich bekomme keine Farbe rein.

Wenn ich das richtig verstehe kannst du html in deinen Text einbauen, dadurch könntest du mit hilfe von CSS noch deutlich geziehlter arbeiten. Du kannst die CSS Klasse im VIS Editor rechts oben bei CSS einfügen.

Beispiel Text:

Das ist ein <span id="test">Test</span> Text.

dazu die CSS Klasse:

#test {
    color: red;
    font-size: 14px;
}

@Homoran sagte in Widget Eventlist formatieren:

Außerdem hätte ich gerne fixe Wertelängen, zumindest fixe Nachkommastellen.
Habe es schon mit "runden auf...mit Nachkommastellen 1" versucht, klappt nicht. Führende Nullen wären noch nice to have, muss aber nicht sein.

Dazu eine Frage, wird das nur im Widget nicht angezeigt oder auch im Ausgangsobjekt?

[paul53]

@Homoran sagte:

Außerdem hätte ich gerne fixe Wertelängen, zumindest fixe Nachkommastellen.

Für fixe Nachkommastellen (inkl. 1.0) in einem String gibt es in Javascript

val.toFixed(n) // n Nachkommastellen

In Blockly wird man wohl eine eigene Javascript-Funktion Nachkomma(val, n) erstellen müssen.

return val.toFixed(n);

[Homoran]

Danke euch beiden.
War heute mit der Familie unterwegs.

@Jey-Cee
Mit css habe ich noch nie gearbeitet.
Wo wird die klasse definiert?

Ich möchte einzelne Worte im Text (ok) oder ganze Meldungen (Pumpe an, Pumpe aus) und natürlich ALARM! in Farben darstellen.

Mit HTML code habe ich etwas mehr übung, aber <color: red> hatte nicht funktioniert.

Ob im datenpunkt die Nachkommastellen x.0 steht muss ich mal suchen

Edit:
Nein, auch dort keine Nachkommastelle

@paul53
Die Funktion werde ich auch mal versuchen umzusetzen.

[paul53]

@Homoran sagte:

Die Funktion werde ich auch mal versuchen umzusetzen.

Du kannst sie gleich noch um eine führende 0 ergänzen.

if(val < 10 && val >= 0) return '0' + val.toFixed(n);
return val.toFixed(n);

[Jey Cee]

@Homoran sagte in Widget Eventlist formatieren:

Wo wird die klasse definiert?

Hier mal Beispiele:
HTML

<span id="pumpe-an">Pumpe an!</span>
<span id="pumpe-aus">Pumpe aus!</span>
<span id="ALARM!">ALARM!</span> Die Bude brennt.

CSS

#pumpe-an{
    font-size: 18px;
    font-weight: bold;
    color: green;
}

#pumpe-aus {
    font-size: 16px;
    font-weight: normal;
    color: orange;
}

#alarm {
    font-size: 24px;
    font-weight: bolder;
    color: red;
    
    /*Animation lässt den Text Blinken*/
    animation: blink-animation 1s steps(10, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

/*Nötig für die Animation*/
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

Das sieht dann so aus: