Sections view – 3 kolommen op iPad

Ik heb een iPad waarop de Home Assistant app is geïnstalleerd en ik wil het Totaaloverzicht dashboard dat ik heb gemaakt in een sections-view dashboard tonen op deze iPad.

Het aantal kolommen in een sections-view dashboard kan ingesteld worden en om het schermvullend weer te geven op mijn computer heb ik gekozen voor 3 kolommen. Echter, als ik dit dashboard kies op mijn iPad dan worden er slechts 2 kolommen getoond, de drie-kolommen zijn te breed voor weergave op mijn iPad. Een mogelijke oplossing is het dashboard tonen in een browser en dan kleiner schalen zodat het wel past, maar liever heb ik de Home Assistant app op de iPad. De oplossing:

Het dashboard met het standaard theme van Home Assistant in de Home Assistant app op mijn iPad:

Home Assistant Frontend Theme

Ik ga een Frontend theme maken waarin ik de ruimte tussen de kolommen ga verkleinen. In de sections-view is de ruimte tussen de kolommen best breed, namelijk 32px. Dat aanpassen naar 8px resulteert in een weeergave op de iPad met 3 kolommen, ook in de Home Assistant app!

In de configuration.yaml staat de volgende verwijzing naar de themes:

frontend:
  themes: !include_dir_merge_named /config/themes

met andere woorden: de thema-bestanden staan in de directory /config/themes en daar plaats ik het bestand ipad.yaml bij met de volgende inhoud:

iPad:
  # Make the dashboard fit on iPad screen
  modes:
    dark:
      ha-view-sections-column-gap: "8px"

Nu kan ik via de Ontwikkelhulpmiddelen -> Acties de frontend thema’s opnieuw laden:

en de standaard thema kiezen, namelijk de iPad theme:

Hetzelfde Dashboard op mijn iPad met de iPad theme: