Nachhilfeunterricht

[Punker Deluxe]

Um andere Treads freizuhalten hier ein neuer von mir zwecks dumme Fragen. Hier meine aktuelle Karte oben rechts an der ich übe. Was ich verstanden habe hab ich mit # und Text kommentiert. Bitte um Korrektur zum Verständnis. Ziel ist für mich da Mindestens noch mindestens 2 Meldungen per Icon zu integrieren, aber das ist meine Hausaufgabe, mir fehlts einfach noch am Verständniss. Die Original .txt war von scw2wi, hab bissl rumgespielt. Bild Tacho2.jpg

[scw2wi]

Die Position der Felder innerhalb der Gesamtkarte wird eigentlich durch diese Zeile festgelegt: grid-template-areas

grid-template-areas: "'akku bezug pv' 'pwk2 bezug heiz' 'pkw bezug haus'"

akku	bezug	pv
pwk2	bezug	heiz
pkw	bezug	haus

Das große Feld bezug in der Mitte dehnt sich daher über 3 grid-Felder aus, links und rechts davon sind jeweils 3 grid-Felder übereinander.

Mit align-self und justify-self hab ich selbst noch recht wenig Erfahrung gemacht. Damit kannst du die Anzeige innerhalb des definierten Feldes noch ein wenig herumschieben, aber ich mache das viel lieber mit anderen Befehlen (position: relative/absolut kombiniert mit top/bottom und left/right) wie auf meiner neuen Raumcard.

Konzentriere dich daher vorerst mal auf die grid-template-areas und lass die Befehle align-self und justify-self im Zweifel auch mal komplett weg.

Alternativ kannst du bei align-self die folgende Zeile hinzufügen: - background: green
Damit bekommt dieses Feld einen grünen Hintergrund und du kannst die Lage des Feldes besser beurteilen. So kannst du jedem Feld eine andere Farbe geben.

[Punker Deluxe]

Danke, hat wieder ein großes klick gemacht.
Allerdings steh ich gerade noch vor dem Problem erstmal die passenden Entitäten die ich angezeigt bekommen möchte in HA zu bekommen. Bewölkung und Windböen aus Openweathermap kann ich mir per X1 holen, allerdings muß ich da erstmal gucken welche DPT ich dort brauche und dann muß ich noch lernen welche dann der passende type in der yaml ist. Wobei ich bei Windböen von Alarm ausgehe, das wird mein erster Versuch bevor es an die Bewölkung geht.

[Punker Deluxe]

Nächste Frage:

Hab es erstmal erfolgreich geschafft zum rumspielen mir auf der Karte die Entität Wohnzimmer-Isttemperatur reinzufummeln. Allerdings wollte ich nur die Temperatur ohne Namen,Symbol Schnick Schnack.

In welche Richtung muß ich jetzt lernen? Falsche Anlegung innerhalb der KNX.yaml ? Oder sind da templates die richtige Richtung?

Schönen Sonntag euch und einen guten Start in die neue Woche.

[scw2wi]

Es gibt da sicher viele Möglichkeiten aber mein erster Ansatz ist mittlerweile, es mit der custom:button-card zu versuchen, da ich damit fast immer ans Ziel komme.
Ich hab hier eine sehr beliebte und häufig verwendete Card noch etwas optimiert, indem ich Label und Wert aufgetrennt habe.
Wenn du dieses Beispiel verstanden hast, dass sollte es für dich einfach sein, den Code zu übernehmen.

[Punker Deluxe]

Hallo liebe Nachhilfelehrer,

hab ne Lösung gefunden, man kann ja in der Button-Card Name, Icon usw. entfernen. Nächster Schritt wird sein andere Entitäten einzufügen und nur die relevanten Daten rauszufiltern. Muß noch gucken wie ich Openweathermap ohne X1 in HA zu integrieren, wird sicherlich einiges erleichtern. Leider werd ich die Tage kaum dazu kommen, 4 Wochen krank hat ganz schön viel Aufträge angehäuft.

Wenn die Karte zu meiner Zufriedenheit ist werde ich sie natürlich posten und meine yaml dazu allen zeigen.

[Springrbua]

Mit align-self und justify-self hab ich selbst noch recht wenig Erfahrung gemacht. Damit kannst du die Anzeige innerhalb des definierten Feldes noch ein wenig herumschieben, aber ich mache das viel lieber mit anderen Befehlen (position: relative/absolut kombiniert mit top/bottom und left/right) wie auf meiner neuen Raumcard.

Achtung: Mit "position: absolute" hebelst du die Positionierung von Grid komplett aus. Du definierst somit eine Position relativ zum nächsten "position: relative" Parent.
Ich würde mich eher über das CSS Grid Layout schlau machen, da es ziemlich mächtig ist.
Kurze Erklärung zu align-self und justify-self:
Über diese Angaben wird das Element innerhalb der Grid-Zelle ausgerichtet, falls es kleiner als diese ist.
"align-self" definiert die vertikale Ausrichtung, "justify-self" die horizontale.
Die Werte sind:
- start: Links bzw. Oben
- end: Rechts bzw. Unten
- center: Mitte
- stretch: Streckt das Element, sodass die volle Höhe bzw. Breite der Zelle ausgenutzt wird.

Es gibt noch weitere Werte, die sind für die meisten aber wahrscheinlich nicht relevant. Start und End berücksichtigen vermutlich auch die Right-To-Left Einstellung aber auch das ist wohl kaum relevant.

Über die Einstellungen "align-items" bzw. "justify-items" auf dem Layout (nicht auf den einzelnen Elementen) kann auch der Standard-Wert für align-self bzw. justify-self für alle Kindelemente definiert werden.

[Punker Deluxe]

Hallo liebe Lehrer, ich komme gerade nicht mehr weiter. Ziel soll irgendwann sein die Anzeige Außentemperatur oberes linkes Viertel, das Viertel Bewölkung/Regen/Sonne und rechte Hälfte Windgeschwindigkeit.

Aber ich bekomme es einfach nicht hin die Karte oben links zu nem Viertel zu vergrößern, von der Textgröße noch garnicht zu sprechen.

Ich füge mal meine jetzige yaml mit an, vielleicht kann mal jemand drübergucken und mit # kommentieren?

Vielen Dank Fahrradwetter.jpg

[scw2wi]

Ich hab zwar nicht verstanden, was du genau vor hast, aber wenn du dein Feld einmal wind und dann wieder windgeschwindigkeit nennst, dann kann das ganz sicher nicht funktionieren.

Kannst du mal eine Zeichnung machen, wie das grid aussehen soll, dann kann ich dir noch mehr weiterhelfen.

[Punker Deluxe]

Wind in Wingeschwindigkeit gändert, hat aber keine Auswirkung auf die Karte, zumahl ja die Anordnung und Darstellung so funktioniert wie gewünscht.

Wie ich mir die Karte von der Anordnung her wünsche im Anhang. Karte.png

[scw2wi]

probier mal so ein grid aus:

  grid:
    - grid-template-areas: "'temp temp windgeschwindigkeit' 'wolkesonneregen warnung windgeschwindigkeit'"
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: min-content min-content
​

[Punker Deluxe]

Ja , das mit dem Grid hab ich kapiert. Leider bekomme ich es nicht hin das die Höhe des Grid festzulegen, sondern sie ändert sich mit der Größe Button-Card (deren Größe ich auch nicht hinbekomme size macht ja nur IconGröße und card_size bewirkt irgendwie nix).
Und kann man eigentlich die Text/Zahlengröße ändern? Oder bin ich da sowieso mit der Button-Card auf dem falschen Dampfer? Möchte mir ja nur Statuswerte anzeigen lassen (ja, das ich die Buttonfunktion abstellen kann weiß ich schon) ?

Danke
Fahrradwetter.jpg

[scw2wi]

Bei meiner Person-Card hab ich Höhe und Breite der Button-Card fix vorgegeben.

type: custom:button-card
styles:
  card:
    - width: 6.5em
    - height: 6.5em
    - ​font-size: 0.8em

font-size kannst du für die ganze Card vorgeben, oder auch für jedes Feld individuell.
Die CSS-Einheiten findest du hier.

[Punker Deluxe]

Und wieder ein Schritt weiter. Doof das einem in der yaml Vorschau das Ergebnis anders darstellt als dann gespeichert. Aber egal, hab nebenbei das Handy liegen und gucke gleich wie es dort aussieht. Das mit der Schriftgröße mag noch nicht funktionieren. Den Link hab ich mir durchgelesen und gleich gespeichert in meinem Ordner Nachhilfeunterricht.

[Punker Deluxe]

Hat evtl. ejemand einen funktionierenden yaml Code für die Schriftgröße? Ich bekomme es einfach nicht hin. CSS lese ich mich langsam rein, aber mir fehlt einfach auch gerade Zeit und wenn ich nicht dranbleibe wird HA auch nur wieder eine Geschichte die ich vergesse. (aus meiner Garage gesendet wärend ich Pause vom Auto wiederbeleben mache)