Größere Buttons ohne button-card, bevorzugt mit Bubble Card

[callidus2000]

Moin zusammen,
Kurz und Knapp (tl;dr):
Kennt Ihr eine Möglichkeit, Bubble Card Knöpfe zu vergrößern? Text, Icon etc. vollumfänglich.

Zum Hintergrund:
ich habe ein altes FireHD Tablet geschenkt bekommen und mittels Fully Kiosk und dem WallPanel AddOn in einen digitalen Bilderrahmen (hebt den WAF) und „zufällig“ in ein HA Bedien-Panel verwandelt. Soweit so gut, nur sind uns die Buttons zu klein. Meiner Frau schweben auf dem Home Screen einfach 6 große Knöpfe vor, die dann jeweils zu einem Raum führen und dort wieder große Knöpfe für die einzelnen Entities.

Ich habe schon an anderen Stellen die Verweise auf die button-card gesehen, um einfach große Schaltflächen zu realisieren. Unschön finde ich, dass wirklich alles in YAML zu beschreiben ist (ok, kein K.O. Kriterium) und bspw. keine Select-Knöpfe möglich sind. Bisher hab ich alles über Bubble Cards realisiert und bin von den Möglichkeiten soweit voll begeistert, nur bekomme ich das Vergrößern nicht hin.

[jayjojayson]

Bevor man an den Cards herumspielt, hast du mal in den Android Einstellungen, Anzeige und dann Bildschirmzoom geschaut? Vielleicht reicht dir das schon aus, wenn du den zoom etwas erhöhst.

[meins57]

Alternativ kann man auch in den Einstellungen von Fully testweise mit dem Zoom spielen.
Nachteil: es wird überall verändert und nicht nur auf einzelnen, bestimmten HA Seiten.

[callidus2000]

Die Android Einstellungen helfen nicht, Fully Zoom bewirkt faszinierenderweise nix…

[Smartzeug]

Gibt es dazu eventuell ein Issue auf GitHub?
Weil bewirken sollte es ja was.

Vielleicht ist es nur ein Bug den man reporten sollte?
Dann können die Entwickler das lösen und du hast deine Lösung

[callidus2000]

Moin,
bei den geschilderten Nachteilen eines pauschalen Zooms ist hier meine Motivation recht gering, bei Fully einen Bug aufzumachen. Vor allem unter den Randbedingungen, da es sich um ein FireHD Gen 7 handelt mit lange abgelaufenen Android Support. Um den Krempel zum Laufen zu bringen musste ich nicht nur Fully sondern auch WebView sideloaden. Sagen wir mal so, bei dem Setup würde ich als Entwickler dem Bug mit wenig Elan nachgehen

[callidus2000]

Und grundlegend müsste das mit den Styles gehen, bin nur kein CSS Crack…

[Neuling]

wozu benutzt du fully kiosk, wenn du doch wallpanel nutzt?

[MrThiemann]

wie groß hast du dir das denn vorgestellt?
Ist nicht ganz einfach, aber es geht =)

[callidus2000]

Remote-Verwaltung, Kiosk-LockIn, Autostart beim Booten, umgehung des Lockscreens (außer bei FireOS ), File Upload/Management…

Und ich hatte Fully noch gekauft wo Browser Mod noch funktioniert hat.

[callidus2000]

Das sieht mega aus, das würde passen

[MrThiemann]

type: custom:bubble-card
card_type: button
sub_button:
  - name: Home
    icon: mdi:home
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/zuhause
  - name: Wohnzimmer
    icon: mdi:sofa-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/wohnzimmer
  - name: Küche
    icon: mdi:countertop-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/kuche
  - name: Schlafzimmer
    icon: mdi:bed-king-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/schlafzimmer
  - name: Badezimmer
    icon: mdi:bathtub-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/badezimmer
  - name: Szenen
    icon: mdi:theater
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/szenen
tap_action:
  action: toggle
double_tap_action:
  action: more-info
name: Steuerung
show_last_changed: false
styles: |
  .bubble-button-card-container {
    border-radius: 20px !important;
    background: rgba(0,190,240,0.2);
  }

  .bubble-icon {
    opacity: 1;
    color: white !important;
  }
  .large .bubble-button-card-container {
    height: 320px;
    
  .bubble-sub-button-container {
    display: grid !important;
    grid-template-columns: repeat(3, auto); /* 3 Spalten für 2 Reihen */
    grid-template-rows: repeat(2, auto);
    gap: 16px !important;
    align-items: center;
    justify-items: center;
    padding-left: 0%;
    padding-right: 9%;
    }

  .bubble-sub-button {
    height: 110px !important; /* Größe der Buttons */
    width: 110px !important;
    font-size: 24px !important;
    align-items: center;
    justify-content: center;
  }

  .bubble-sub-button-icon {
    --mdc-icon-size: 64px !important; /* Größere Icons */
  }
card_layout: large
icon: mdi:sofa
show_state: true
scrolling_effect: true
button_type: name
show_icon: false
show_name: false

[MrThiemann]

@MrThiemann

   padding-left: 0%;
    padding-right: 9%;

damit musst du eben etwas „experimentieren“

anstelle von % könntest du auch px verwenden.
Am besten jeden geänderten Wert direkt am tablet prüfen. (unterscheidet sich zur Ansicht auf dem PC)

[meins57]

Oder du ziehst dir das Browserfenster ungefähr auf die Größe das es mit der Tablet Ansicht gleich kommt.

So mach ich es immer wenn ich das Dashboard fürs Tablet überarbeite

[jayjojayson]

Hi, ich habe das leider erst jetzt gelesen. Mit bubble-icon kannst du die Größe der Icon bestimmen und mit * kannst du die Schriftgröße anpassen. Der erste Part wird direkt im Styling der Bubble-Card definiert und über ha-Card mit Card-Mod lässt sich das Aussehen vom Button anpassen.

type: custom:bubble-card
styles: |
  .bubble-icon {
    --mdc-icon-size: 30px !important;
    height: 35px;
    padding-right: 10px; 
    color: var(--primary-color);
  } 
  * { 
    font-size: 20px !important;
    border: none !important;
    border-radius: 0px !important;
    background: none !important;
    box-shadow: none !important;
  }
card_type: horizontal-buttons-stack
auto_order: false
1_name: "Zurück"
1_icon: mdi:keyboard-backspace
1_link: /dashboard-test/home
card_mod:
  style: |
    ha-card {
      border: 1px solid red !important;
      border-radius: 8px !important;
      background: none !important;
      box-shadow: none !important;
    }

Was eigentlich auch immer funktioniert, auch hier, ist zoom. Das vergrößert dann alles innerhalb der HA-Card gleichmäßig.

card_mod:
  style: |
    ha-card {
      zoom: 120%;
    }

So hast du auf jeden Fall zwei Möglichkeiten der Anpassung. @MrThiemann hat dir auch schon eine gute Möglichkeit zur Anpassung von sub-button geliefert.

[callidus2000]

Mega großen Dank, die Code Beispiele helfen weiter. Jetzt brauche ich nur mehr Wochenende in der Woche um das komplette Panel umzubauen. Bzw. die Tücke im Detail auszumerzen

Der „Zurück“ Button löst schonmal ein Problem am Ende meiner ToDo Liste.

Der Trick mit dem Zoom über Card-Mod ist scheinbar das stabilste, die Card mit den Sub-Buttons sieht mega genial aus. Beides kombiniert bewegt sich noch mehr in die richtige Richtung:

Blau die SubButton Variante mit Zoom kombiniert. Die grauen Knöpfe sind nur gezoomt.

Kompliziert macht es dann das dusselige FireHD Tablet, wo die Ansicht etwas (aber auch nur ganz Leicht) abweicht:

[jayjojayson]

Na schön, wenn wir helfen konnten. Dann viel Spaß am Wochenende beim Umbau. Du kannst auch gerne eine der beiden Antworten von @MrThiemann oder mir als Lösung markieren.

Die Ansichtssache wird wohl dem WebView geschuldet sein. Ich hatte da zum Schluss mit meinem Samsung Tablet aus 2014 auch Probleme in der Darstellung. Hatte zwar die aktuelle Version installiert, aber trotzdem wurde nicht alles korrekt dargestellt.

[callidus2000]

Eigentlich hatte ich geplant, mir zwei günstige Lenovo Tablets zu kaufen (Wallpanel an zwei Stellen in der Wohnung), hierzu muss aber erst meine Frau (Stichwort WAF) überzeugt werden… Den WAF wollte ich mit dem geschenkten Gaul (aka FireHD 10 Gen7) erhöhen, der alte Software Stand ist aber echt frustrierend…

[jayjojayson]

Da stimme ich dir voll zu, ich konnte mich durchsetzen und habe jetzt zwei Lenovo Tab M10 Plus (3. Gen), die gab es vor kurzem für rund 100€ das Stück.