Dashboard mit großem Text darstellen

[einfach-smart]

Hallo Leute,
ich hoffe hier eure Hilfe zu bekommen.
Ich bin jehemaliger iobroker-Nutzer und seit einigen Monaten bin ich auf Homeassistant umgestiegen.
Im iobroker-Visialisierung (siehe Bild unten) habe ich eine Anzeigeerstellt und die möchte ich auch im Homeassistant auch haben, jedoch ich kriege es nicht hin und hoffe auf eure Hilfe.
Ich möchte mein Dashboard so gestalten, dass obererer Bereich ein vierstellige Zahl mittig darstellt, in der Mitte Eingabetext groß eine Mitteilung zeigt und unten die Uhr. Das ganze soll auf einem 32 Zoll Vollbildschirm dargestellt werden. Ich habe mit vielen Cards versucht.
So sollte es aussehen, die Anzeige stammt von einnem Iobroker Visialisierung.

Vielen Dank für eurer Hilfe.

[Gunter]

Mir würde da spontan die Markdown-Karte einfallen. Dort kann man auch variabel die Zustände von Sensoren bspw. ausgeben und natürlich formatieren.

[einfach-smart]

Danke für Feedback. Jedoch habe auch das versucht. Mit # wird nur als Überschrift groß, dass reicht aber nicht.
Hier der Code, den ich versucht habe:

type: markdown
content: >-
  ###  <center> Hier der Text </center> 

  ***

  ## <center>{{ states.input_text.lied.state }}
  </center>

Hat jemand eine Idee, wie ich die Schrift flexibel größer machen kann?

[Bacardi]

Du kannst hier auch tlw mit HTML Befehlen wie font arbeiten neben dem Markdown. Im font Befehl hast Du size und color Parameter. Was funktioniert und was nicht, mußt Du probierem.

EDIT:
Als Appetiser

Mein Vorschlag, nimm Dir eine der unzähligen Grundlagen HTLM Seiten im Internet und probiere aus, was davon in der Markdownkarte funktioniert.

PS: Hier ein produktives Beispiel von mir. Zeigt einzelne Stromverbräuche entsprechend ihrer Höhe per HTML in einer Markdownkarte.

[einfach-smart]

Vielen Dank @Bacardi für den Tipp!
Ich habe viele Möglichkeiten versucht, jedoch scheint es so, dass im Homeassistant eine Begrenzung gibt, die jeden Wert nach gewisser Größe ignoriert.
Aus deinem Besispiel lässt sich font size nur bis 15px hochstellen, danach egal was ist angebe ändert sich nicht.

<font size=16.777em>
	{{states.input_text.text.state}}
</font

Hat vieleicht jemand noch eine Idee, wie ich das lösen könnte?

[Bacardi]

@einfach-smart

im Homeassistant eine Begrenzung gibt

Interessant, wußte ich bisher nicht. Danke. (nicht HA sondern Markdown Karte um genau zu sein)

So besser?

Da mußt Du aber wirklich tricksen.

• neues Dashboard mit schwarzem Hintergrund
• Aufteilung Deiner Vorgaben in Sektionen
• Verwendung von Button-Cards. Hier kannst Du auch große Schrift und viel mit Style Befehlen arbeiten (wie Hintergrund wieder schwarz und große Schrift etc), erfordert aber Einarbeitung.

Ein Hinweis noch zu all den Tricks: Die sind anfällig, daß bei irgendeinem späterem Update sie nicht mehr funktionieren. Ich mache es bei mir dennoch aber negative Überraschungen können kommen.

Hier noch der Dashboard Code

  - title: Forum
    path: forum
    type: sections
    background:
      image: /api/image/serve/c783d4af65bb9412a1cac0ca8a72ae78/original
    max_columns: 3
    icon: mdi:account
    sections:
      - type: grid
        cards:
          - type: custom:button-card
            color_type: label-card
            color: rgb(44, 109, 214)
            name: 1234
            styles:
              card:
                - height: 200px
                - color: white
                - background-color: black
                - font-size: 120px
                - font-weight: bold
            layout_options:
              grid_columns: 12
              grid_rows: 3
          - type: custom:button-card
            color_type: label-card
            color: rgb(44, 109, 214)
            name: Hier soll eine Mitteilung 1 zu sehen sein<br>mit Zeilenumbruch
            styles:
              card:
                - height: 100px
                - color: white
                - background-color: black
                - font-size: 50px
                - font-weight: bold
            layout_options:
              grid_columns: 12
              grid_rows: 2
          - type: custom:button-card
            color_type: label-card
            color: rgb(44, 109, 214)
            name: Nur 40 Zeichen lang ist Mitteilung 2!!!
            styles:
              card:
                - height: 100px
                - color: white
                - background-color: black
                - font-size: 50px
                - font-weight: bold
            layout_options:
              grid_columns: 12
              grid_rows: 2
          - type: custom:button-card
            entity: sensor.uhrzeit_momentan_formatiert_hh_mm
            color_type: label-card
            color: rgb(44, 109, 214)
            show_name: false
            show_state: true
            show_icon: false
            styles:
              card:
                - height: 80px
                - color: white
                - background-color: black
                - font-size: 70px
                - font-weight: bold
        column_span: 3

Gutes Gelingen!

[Schwippser]

Versuche mal bei Font-Size anstelle 120px … 9rem

[einfach-smart]

Das ist genau, das was ich benötige, vielen Dank für deine Hilfe!