Leerzeichen Textsensor werden im Dashboard nicht dargestellt

Dashboard/Cards/Frontend
1

Hallo zusammen ,

Ich bin neu hier und habe folgendes Problem.

Ich lasse mir zyklisch über die UART Schnittstelle (Esphome) Textstrings schicken.

Quelldaten, sind die Zeichen eines alphanumerischen LCD Display Displays 20x2,

Welches im Textsensor gespiegelt werden. Pro Zeile wird ein String geschickt.

Das LCD soll nun auf dem Dashboard gespiegelt dargestellt werden. Das funktioniert auch grundsätzlich. Die Strings kommen mit allen Zeichen am HA an.(sehe ich im Log).

Nur auf dem Dashboard werden Leerzeichen, wenn mehrere in der Zeile vorhanden sind, nicht angezeigt. Dies führt dazu, dass die Anzeige ständig hin und her hüpft.

Habe schon über Card-mod den Zeichensatz Courier New gewählt, der solle normalerweise die gleiche Zeichenbreite haben, leider ist die Darstellung immer noch genauso.

Unten noch 3 Bilder.

P1, P2, Light sollte immer an der gleichen Position stehe, Ebenfalls Time rutscht nach vorn, wenn das x durch ein Leerzeichen ersetzt wird.

Kann mir jemand vielleicht helfen? Danke im Voraus

Mika

IMG_2741
IMG_27411920×1187 69.8 KB

IMG_2745
IMG_27451200×1200 109 KB

2

Ich habe keine Erfahrung mit Esphome aber bin mir sicher, daß die Ursache liegt darin wie HTML interpretiert wird. Vielleicht kann man mit   tricksen.

Was für eine Karte ist denn dahinter und kann man den Quellcode einsehen?

5 
type: entity
entity: sensor.lcd_control_uart_teil_1
grid_options:
  columns: 12
  rows: null
state_color: false
name: " "
icon: null
card_mod:
  style: |
    ha-card {
      font-family: 'Courier New', sans-serif;
      font-size: 2vw;
      color: var(--primary-color);
      background: transparent;
      border: transparent;

so sieht der Eintrag im Dashboard aus (1.Zeile) die 2. ist identisch.

Ist nur eine ganz normaler Textsensor, nur mit der Schriftart (card-MOD) erweitert..

Wird auch ohne die Card-MOD identisch dargestellt, jedoch in der Standardschrift.

Im Log sehe ich, dass alle 20 Zeichen je Zeile richtig im Textsensor übertragen werden. Nur werden sie nicht richtig dargestellt. Wenn ich die Leerzeichen durch andere Zeichen ersetzte passt es.von der Darstellung. hmmm..

Spielt auch keine Rolle ,wo ich es mir anschaue. IPAD, Telefon, PC-Chrome, PC-Edge

Danke schon mal, für die Bemühungen..

:pencil: by tarag: Beiträge zusammengeführt

6 
{%- set text = 'hallo 1 2 3' %}
{{text}}
{{text.replace(' ', '\u00A0')}} <- würde ich einmal probieren
{{text.replace(' ', '&nbsp;')}}

image
image411×232 7 KB

Ich würde einen UI Template Sensor anlegen, der diese Zeile enthält

{{ states('sensor.lcd_control_uart_teil_1').replace(' ', '\u00A0') }}

In der Vorschau solltest Du schon sehen, ob es funktioniert

image
image711×381 7.35 KB

Und dann binde diesen Template Sensor in Deine Karte ein.

Ich bin gespannt.

7

Hoffe ich hab’s richtig verstanden und umgesetzt :slight_smile: .

Hab einen Helfer Template Sensor angelegt und schau dann unten in die Vorschau..

In Zustand dann die Zeile eingetragen und beide Varianten probiert.

Bei \u00A0 wird es anscheinend identisch dargestellt wie vorher ..P1: P2: Light:–

Bei ’ ’ steht anstatt der Leerzeichen ’ ’

Hab auch noch nen ‘_’ probiert , das sieht fast noch am besten aus… P1:___P2:___Light:–

STOPP!!! … meine Aussagen hier stimmen für die Vorschau im Helfer !!

Hab Jetzt den Helfer in meiner Dashboardkarte mit der Schriftart Courier New verwendet, und hier funktioniert es perfekt :slight_smile: …Juhuuu

So werde ich es Integrieren.

Ich werde auch mal ausprobieren, wenn ich die Wandlung gleich im ESP32 durchführe , mal sehen, was passiert :slight_smile:

Vielen vielen vielen Dank für den tollen Support….

8

Freue mich. Das Ganze bleibt dennoch fragil für die Zukunft. Mit Unterstrichen bist Du sicher robuster aufgestellt.

9

Ja, ich werd da mal bissel probieren müssen :+1:

10

So, ich wollte hier noch etwas ergänzen.

Ich hab versucht, die Umsetzung des Leerzeichens schon an der Quelle durchzuführen. Das heißt ich hab schon bevor der String in den ESP32 via UART gesendet wird die Leerzeichen durch ASCII 160 ersetzt.

Das geht aber richtig schief.

Da ESPHOME normalerweise von Haus aus kein Lesen vom UART unterstützt missbrauche ich die Logger Komponente von ESPHOME. Diese verträgt wohl keine Zeichen größer ASCI 127.

Die Folge : !! HA stürzt ab und Bootet neu !! —Das ist nicht im Sinne des Erfinders :frowning: Wenn ich mal wieder etwas Zeit hab, werde ich versuchen eine Custom-Komponente zum Lesen des UART zu verwenden. Vielleicht klappt dies dann besser.

Und… Ich hab mich jetzt doch für die Unterstriche in der obigen Lösung entschieden, da diese das beste Erscheinungsbild erzielten.

Grüße und nochmals Danke für den Support

Mika

1 „Gefällt mir“