/ Home Assistant

Un peu de design sous HA

Je suis tombé dernièrement sur un type d'UI Design que l'on nomme neumorphisme.

Le Neumorphisme

Mais qu'est-ce que le neumorphisme ?
Le neumorphisme est un type d'UI design censé representer le plus fidèlement possible une interface dans la vie réél.
A l'aide de deux ombres portées, cela permet par exemple de générer des design de bouton qui nous evoque la sensation d'appui.

Exemple de neumorphisme :

neumo2

neumo1

En mode light ca donne :

neumo3

et en dark :

neumo4

Test sous Home assistant :

show_icon: true
show_name: true
styles:
  card:
    - width: 105px
    - height: 105px
    - margin: 10px
    - border-radius: 55px
    - box-shadow: |
        [[[ return states['sun.sun'].state == 'below_horizon'
          ? '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
          : '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
        ]]]
    - background-color: var(--primary-background-color)
    - font-size: 12px
    - font-weight: bold
  icon:
    - color: var(--primary-text-color)
state:
  - value: 'on'
    styles:
      card:
        - box-shadow: |
            [[[ return states['sun.sun'].state == 'below_horizon'
              ? 'inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3)'
              : 'inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px 3px 5px rgba(0, 0, 0, .035)';
            ]]]
      icon:
        - color: '#f4aa37'
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: medium
type: 'custom:button-card'
name: Salon
entity: group.salonlight

on peut jouer le border-radius pour avoir des boutons rond ou plus ou moins carré.

on peut egalement s'inspirer du post suivant pour la modification du theme light/dark selon l'heure de la journée.
https://community.home-assistant.io/t/lovelace-soft-ui-simple-and-clean-lovelace-configuration/159357

Screenshot_2021-01-05-13-24-46-376_io.homeassistant.companion.android

Screenshot_2021-01-04-07-55-44-712_io.homeassistant.companion.android

Apres un peu de tuning on obtient ce genre de chose :

HaDark01

HALight

Tuning mis en place pour les cartes :

style: |
  ha-card {
      background-color: var(--primary-background-color);
      border-radius: 15px;
      margin: 10px;
      font-family: Roboto;
      box-shadow:
        {% if is_state('sun.sun', 'above_horizon') %}
          -4px -4px 8px rgba(255, 255, 255, .7), 5px 5px 8px rgba(0, 0, 0, .3);
        {% elif is_state('sun.sun', 'below_horizon') %}
          -5px -5px 8px rgba(50, 50, 50, .7), 5px 5px 8px rgba(0, 0, 0, .8);
        {% endif %}
   }

Tuning pour les boutons :

show_icon: true
show_name: false
styles:
  card:
    - width: 105px
    - height: 105px
    - margin: 10px
    - border-radius: 50px
    - box-shadow: |
        [[[ return states['sun.sun'].state == 'below_horizon'
          ? '-5px -5px 8px rgba(50, 50, 50, .7), 5px 5px 8px rgba(0, 0, 0, .8)'
          : '-4px -4px 8px rgba(255, 255, 255, .7), 5px 5px 8px rgba(0, 0, 0, .3)';
        ]]]
    - background-color: var(--primary-background-color)
    - font-size: 12px
    - font-weight: bold
  icon:
    - color: var(--primary-text-color)
state:
  - value: 'on'
    styles:
      card:
        - box-shadow: |
            [[[ return states['sun.sun'].state == 'below_horizon'
              ? 'inset -3px -3px 5px rgba(50, 50, 50, .8), inset 3px 3px 5px rgba(0, 0, 0, .7)'
              : 'inset -3px -3px 5px rgba(255, 255, 255, .7), inset 3px 3px 5px rgba(0, 0, 0, .3)';
            ]]]
      icon:
        - color: '#f4aa37'
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: medium
type: 'custom:button-card'
name: Salon
icon: 'mdi:lightbulb-group'
entity: group.salonlight
Un peu de design sous HA
Share this