ioBroker / ioBroker.lovelace

Visualization with Lovelace-UI
Apache License 2.0
58 stars 28 forks source link

UI-Lovelace-Minimalist #409

Open ba9624 opened 1 year ago

ba9624 commented 1 year ago

Hallo,

hat von euch schon jemand das UI-Lovelace-Minimalist (https://ui-lovelace-minimalist.github.io/UI/) geschafft in den Lovelace Adapter zu integrieren. Ich weiß nur wie man eigene Cards hinzufügt, aber ein Theme bzw. Card-Template weiß ich leider nicht, wo ich diese hinzufügen kann. Vielleicht hat jemand einen Tipp.

Danke euch!

thost96 commented 1 year ago

Nutze auch das minimalist Theme. Dafür gibt es im Lovelace Adapter einen eigenen Tab, in dem das CSS für das Theme hinterlegt werden muss. Das notwendige Javascript des Themes einfach als "normale" Card hinzufügen. Beim Theme dann noch das richtige im Dropdown Menü auswählen.

ba9624 commented 1 year ago

Nutze auch das minimalist Theme. Dafür gibt es im Lovelace Adapter einen eigenen Tab, in dem das CSS für das Theme hinterlegt werden muss. Das notwendige Javascript des Themes einfach als "normale" Card hinzufügen. Beim Theme dann noch das richtige im Dropdown Menü auswählen.

klappt bei mir irgendwie nicht da kommt immer noch ein fehlermeldung

Konfigurationsfehler erkannt: bad indentation of a mapping entry (2:11)

1 | type: custom:button-card 2 | template: card_light ---------------^ 3 | entity: light.allee 4 | variables:

lovelace

Garfonso commented 1 year ago

Der Fehler hat nichts mit einem Theme zu tun. Da konfigurierst du doch eine Karte im UI...? Und les' doch einfach mal den Fehler... da steht doch, was falsch ist: Zeile 2 wird nicht eingerückt. Warum sollte sie auch? In dem Beispiel gehören type, template, enity und variables alle auf die oberste Ebene, i.e. keine Einrückung.

Hast du denn das minimalist Theme mal ohne custom cards, mit was ganz Einfachem und dem UI Editor ausprobiert?

dontobi commented 1 year ago

Nutze auch das minimalist Theme. Dafür gibt es im Lovelace Adapter einen eigenen Tab, in dem das CSS für das Theme hinterlegt werden muss. Das notwendige Javascript des Themes einfach als "normale" Card hinzufügen. Beim Theme dann noch das richtige im Dropdown Menü auswählen.

Könntest du Mal etwas detaillierter beschreiben, welches Themen File du eingetragen und welche Cards du hinzugefügt hast?

piatho commented 1 year ago

Ich unterstütze die Frage mal. Um beim Beispiel von Dontobi zu bleiben:

Dieser Teil (kopiert aus der Minimalist docu) gehört in die Haupt-YAML, leicht abgeändert ohne den führenden Bindestrich - type: "custom:button-card" template: card_light entity: light.allee variables: ulm_card_light_enable_slider: true ulm_card_light_enable_color: true ulm_card_light_force_background_color: true

Hier am Beispiel einer Title Card: image

Woran ich jetzt aber auch scheitere, ist der "Template" Teil: image

Wo gehört dieser Code rein? Versucht habe ich bislang folgendes:

Alles ohne Erfolg. Muss ich ggf. auch hier die Formatierung und die Einrückungen gegenüber der Minimalist-Vorlage ändern?

piatho commented 1 year ago

Update: Wie so oft, wenn man eine Weile ausprobiert und googelt, findet man die Antwort. Für den Fall das jemand beim googlen auf diesen Thread stößt, hier die Lösung:

Templates gehören in die RAW Konfiguration und zwar an den Anfang. Also habe ich bspw. folgende Konfiguration in der Karte

_type: custom:button-card template:

und in der RAW-Konfiguration ( oben rechts auf die drei Punkte und dann "Raw-Konfigurationseditor" sowas hier: image

Das Beispiel was ich jetzt einmal umgesetzt habe ist die Room Card

Falls man - wie ich - sich fragt wo die entsprechenden Templates her kommen, dem empfehle ich die github Page von Minimalist. Mit der Suche findet man alle Templates

Garfonso commented 1 year ago

Cool, danke fürs rausfinden.

dontobi commented 1 year ago

@Garfonso Kurze Frage: meinst du man könnte die Minimalist UI als Option in den Adapter einbetten?

Garfonso commented 1 year ago

@Garfonso Kurze Frage: meinst du man könnte die Minimalist UI als Option in den Adapter einbetten?

Äh… Was genau sollte da wie eingebettet werden?

piatho commented 1 year ago

Die Idee finde ich super. Wenn @dontobi und ich da die selbe Idee haben, dann wäre es schön wenn man die RAW Konfiguration (sprich templates und Sub Templates) sowie die Themes von Minimalist plus die die 4-5 Custom-Cards in den Adapter einbettet. Wenn ich es richtig verstanden habe (Halbwissen :-)) dann würde es ja reichen analog zum Dialog für Cards auch einen Dialog zu schaffen, bei dem externe Templates/Subtemplates "hochgeladen" (als .yaml) werden können und damit automatisch der RAW Master YAML zur Verfügung stehen (embedded)?