[Mon Dashboard] @Guizmos_Neon

Guizmos · Février 12, 2022, 10:35

Hello

Je vous présente mon nouveau dashboard Néon

TABLETTE

Photo

Mode portrait : (à perfectionner)

TELEPHONE

Photo

TELEPHONE (Alternative)

Photo

INSTALLATION :

Avant de commencer, il vous faudra:

Intégration

GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity and media player
GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.
GitHub - thomasloven/lovelace-state-switch: 🔹Dynamically replace lovelace cards depending on occasion
GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
custom-ui/swipe-card at master · bramkragten/custom-ui · GitHub
GitHub - maykar/kiosk-mode: 🙈 Hides the Home Assistant header and/or sidebar
GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
GitHub - fondberg/spotcast: Home assistant custom component to start Spotify playback on an idle chromecast device as well as control spotify connect devices
GitHub - kalkih/mini-graph-card: Minimalistic graph card for Home Assistant Lovelace UI
GitHub - kalkih/mini-media-player: Minimalistic media card for Home Assistant Lovelace UI
GitHub - menahishayan/HomeAssistant-Cupertino-Icons: Apple SF Symbols icons for Home Assistant! (3000+ icons)
GitHub - ljmerza/light-entity-card: Control any light or switch entity
GitHub - custom-components/feedparser: 📰 RSS Feed Integration
GitHub - custom-components/sensor.sonarr_upcoming_media: 📺 Sonarr component to feed Upcoming Media Card.
GitHub - custom-components/sensor.plex_recently_added: ▶️ Plex component to feed Upcoming Media Card.
GitHub - chris60600/pollens-home-assistant: Retrieve French Pollens risks in HomeAssistant
GitHub - custom-cards/flex-table-card: Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept
GitHub - JurajNyiri/PlexMeetsHomeAssistant: Custom card which integrates plex into Home Assistant and makes it possible to launch movies or tv shows on TV with a simple click
GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.
GitHub - thomasloven/lovelace-state-switch: 🔹Dynamically replace lovelace cards depending on occasion
GitHub - maykar/lovelace-swipe-navigation: ↔️ Swipe through Lovelace views on mobile.
GitHub - thomasloven/lovelace-hui-element: 🔹 Use built-in elements in the wrong place
GitHub - benct/lovelace-multiple-entity-row: Show multiple entity states and attributes on entity rows in Home Assistant's Lovelace UI
GitHub - RossMcMillan92/lovelace-collapsable-cards: A custom Lovelace card that hides other cards behind a dropdown toggle
GitHub - maxwroc/battery-state-card: Battery state card for Home Assistant

(il manque certainement quelques add-ons, mais l’essentiel est là)

THEME :

Pour le thème, j’utilise le thème Néon.

Créer un dossier Neon dans config/themes et copier le fichier neon.yaml disponible sur mon Github
Copier l’image color5.png dans config/www
Vous pouvez si vous le voulez, choisir l’image que vous souhaitez comme fond en remplaçant celle-ci. (penser à modifier le nom dans le fichier neon.yaml ligne 17 (si différent))

ICONES
Vous pouvez télécharger les icônes Néon via ce lien :
https://www.flaticon.com/authors/kiranshastry/gradient

(A copier dans le dossier : /config/www/Neon)

Vous pouvez trouver des icônes 3D pour la météo (que j’ai mis en place après avoir fait les vidéos/photos) via ce lien:
https://ui8.net/hosein_bagheri/products/3d-weather-icons40

LOVELACE:

Créer un nouveau dashboard sur votre Home Assistant
=> Configuration / Tableau de bord / + Ajouter un tableau de bord

Une fois sélectionner et vierge de toutes card, cliquer sur les trois points en haut à droite
=> Modifier le tableau de bord
puis cliquer de nouveau sur les trois points en haut à droite
=> Editeur de configuration

POUR TABLETTE
Copier/coller le contenu du fichier « neon_tablet_grid »

POUR TELEPHONE
Mode vertical
Copier/coller le contenu du fichier « neon_phone_vertical »
Mode grid
Copier/coller le contenu du fichier « neon_phone_grid »

ANDROID:
J’utilise l’application WallPanel qui affiche home assistant en plein écran et qui permet d’allumer l’écran si la caméra frontale détecte du mouvement

PS: j’utilise les cards de mon précédent thème dans la plupart des popup

Merci et bon courage à vous

Source

Je me suis basé sur le travail de :

Neon Lovelace UI & Theme for tablets - Dashboards & Frontend - Home Assistant Community

Seb · Février 12, 2022, 11:01

Magnifique !!! Il ne reste plus qu’à détailler comment tu as fait

Christianb233 · Février 12, 2022, 6:38

Superbe travail @Guizmos
Ça me donne envie de basculer vers ce rendu

Guizmos · Février 12, 2022, 6:54

Merci c’est gentil. Je partage les codes rapidement

barto_95 · Février 12, 2022, 7:04

J’etais justement entrain d’essayer de l’utiliser aussi par rapport au forum anglo

hate devoir tes codes

barto_95 · Février 16, 2022, 6:33

pour info @Guizmos il manque l’integration hui-element dans ta liste : (si tu veut mettre ton premier poste à jour)

Guizmos · Février 16, 2022, 6:50

C’est fait, si jamais tu vois d’autres choses qui manque, n’hésite pas à me le dire. Je mettrais à jour mon premier post

barto_95 · Février 18, 2022, 11:16

Il manque multiple-entity-row:

barto_95 · Février 18, 2022, 5:42

@Guizmos
petite question tu peut expliquer la partie plex input_Select_plex avec le code stp pour arriver a ce que tu fait ?

Merci

Guizmos · Février 19, 2022, 11:20

Alors tu dois commencer par créer « ta liste » input_select" en ajoutant ce code dans ton configuration.yaml

(À modifier suivant tes besoins)

input_select:
 plex_recently:
   name: Plex Recently
   options:
     - Reprendre
     - Prochainement
     - Films
     - Séries

Ensuite dans ta card, tu utilises state-switch pour définir tes cards en fonction de tes input_select :

          type: vertical-stack
          cards:
            - type: entities
              card_mod:
                style: |
                  ha-card {
                    height: 90px !important;
                    width: auto !important;
                    overflow: visible !important;
                    background: transparent;
                   }
              entities:
                - entity: input_select.plex_recently
                  name: Choix
                  tap_action:
                    action: none
            - type: custom:state-switch
              entity: input_select.plex_recently
              default: Prochainement
              transition: swap-right
              states:
                Films:
                  type: la card de ton choix
                Séries:
                  type: la card de ton choix
                Prochainement:
                  type: la card de ton choix

le principe reste le même pour chaque input_select et chaques options.
Ci-dessus tu as une liste déroulante, mais tu peux ausi créer des button-card pour séléctionner tes options.
Voici le code pour les button-card lors du tap_action :

                type: custom:button-card
                entity: input_select.camera
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.camera
                    option: Doorbell

Steph_Flo · Février 19, 2022, 6:00

Au top merci beaucoup
Ca fait envi

barto_95 · Février 21, 2022, 6:13

Merci pour les infos @Guizmos

j’ai essayer de faire avec une card plex-meets-xxxxxxx

voici mon code :

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.plex_recently
        name: Choix
        tap_action:
          action: none
    show_header_toggle: true
    state_color: false
    card_mod:
      style: |
        ha-card {
          height: 90px !important;
          width: auto !important;
          overflow: visible !important;
          background: transparent;
         }
  - type: custom:state-switch
    entity: input_select.plex_recently
    default: Séries
    transition: swap-right
    states:
      Séries:
        type: custom:plex-meets-homeassistant
        protocol: http
        sort: addedAt:desc
        displayType: '2'
        playTrailer: true
        showExtras: true
        showSearch: true
        ip: 10.150.150.224
        token: z3RFP63sDyMuaAry4vHJ
        port: '32400'
        libraryName: Séries TV
        maxCount: '10'
        maxRows: ''
        useHorizontalScroll: 'Yes'
        useShuffle: 'No'
        displayTitleMain: 'Yes'
        displaySubtitleMain: 'Yes'
        minWidth: ''
        minEpisodeWidth: ''
        minExpandedWidth: ''
        fontSize1: ''
        fontSize2: ''
        fontSize3: ''
        fontSize4: ''
        minExpandedHeight: ''
        title: ''
        entity:
          plexPlayer: LG 43UP75006LF
      Prochainement:
        type: la card de ton choix

rien ne s’affiche:

hors si je creer une card manual avec le code suivant :

type: custom:plex-meets-homeassistant
protocol: http
sort: addedAt:desc
displayType: '2'
playTrailer: true
showExtras: true
showSearch: true
ip: 10.150.150.224
token: z3RFP63sDyMuaAry4vHJ
port: '32400'
libraryName: Séries TV
maxCount: '10'
maxRows: ''
useHorizontalScroll: 'Yes'
useShuffle: 'No'
displayTitleMain: 'Yes'
displaySubtitleMain: 'Yes'
minWidth: ''
minEpisodeWidth: ''
minExpandedWidth: ''
fontSize1: ''
fontSize2: ''
fontSize3: ''
fontSize4: ''
minExpandedHeight: ''
title: ''
entity:
  plexPlayer: LG 43UP75006LF

la card s’affiche bien :
2022-02-21_19-12-33

comment faire pour que si on sélectionne films,séries etc… ce sois cette card qui s’affiche ?

Guizmos · Février 21, 2022, 6:32

Est-ce que tu peux me faire voir les attributs dans ton input_select.plex_recently? (Via l’option développeur)

Exemple pour moi :

input_select

Pour moi il peut y avoir deux problèmes :

Ton state ne correspond par exactement au une de tes options de input_select (d’où ma question ci-dessus)
La card s’affiche hors du champs visible (expérience personnelle )

Guizmos · Février 21, 2022, 8:04

barto_95:

  - type: entities
    entities:
      - entity: input_select.plex_recently
        name: Choix
        tap_action:
          action: none
    show_header_toggle: true
    state_color: false
    card_mod:
      style: |
        ha-card {
          height: 90px !important;
          width: auto !important;
          overflow: visible !important;
          background: transparent;
         }

Et pour info, tu peux aussi séparer tes cards (pour faire des tests ou des interfaces difféntes)

Dans ton cas, la liste d’un coté :

    type: entities
    entities:
      - entity: input_select.plex_recently
        name: Choix
        tap_action:
          action: none
    show_header_toggle: true
    state_color: false
    card_mod:
      style: |
        ha-card {
          height: 90px !important;
          width: auto !important;
          overflow: visible !important;
          background: transparent;
         }

et le state-switch de plex de l’autre :

    type: custom:state-switch
    entity: input_select.plex_recently
    default: Séries
    transition: swap-right
    states:
      Séries:
        type: custom:plex-meets-homeassistant
        protocol: http
        sort: addedAt:desc
        displayType: '2'
        playTrailer: true
        showExtras: true
        showSearch: true
        ip: 10.150.150.224
        token: z3RFP63sDyMuaAry4vHJ
        port: '32400'
        libraryName: Séries TV
        maxCount: '10'
        maxRows: ''
        useHorizontalScroll: 'Yes'
        useShuffle: 'No'
        displayTitleMain: 'Yes'
        displaySubtitleMain: 'Yes'
        minWidth: ''
        minEpisodeWidth: ''
        minExpandedWidth: ''
        fontSize1: ''
        fontSize2: ''
        fontSize3: ''
        fontSize4: ''
        minExpandedHeight: ''
        title: ''
        entity:
          plexPlayer: LG 43UP75006LF

Guizmos · Février 21, 2022, 8:22

Je suis en train de perfectionner et d’unifier mes design des popup card :
J’ai remplacé la liste par des boutons en bas. Plus pratique, et plus productif (un clic au lieu de deux pour une liste):

Plex:

Caméra:

Média:

J’ai encore des problèmes pour mettre en forme correctement la popup card de la température:

Température:

Au lieu de ça:
temp2

Le problème est le même avec une card entities classique. Je cherche

PS: sur les captures d’écran, il y a un problème de centrage des cards dans les popup. C’est normal car ce design est fait pour ma tablette Android. Sur celle-ci aucun problème

barto_95 · Février 22, 2022, 6:45

voici :

et tu le règle comment ?

Guizmos · Février 22, 2022, 7:50

Perso, j’utilise la card Plex Meet Home assistant en popup avec ce code :

          tap_action:
            action: fire-dom-event
            browser_mod:
              command: popup
              title: Maison
              hide_header: true
              style: |
                ha-dialog {
                  --mdc-dialog-min-width: 550px !important;
                  --mdc-dialog-max-width: 1500px !important;
                }
                .content {
                  width: auto !important;
                }
              card:
                type: custom:plex-meets-homeassistant
                protocol: https
                sort: ''
                displayType: ''
                playTrailer: false
                showExtras: true
                showSearch: false
                ip: dalg.synology.me
                token: XxU4wLGQoyQMm-AJnbKD
                port: '9005'
                libraryName: Continue Watching
                entity:
                  - androidtv | media_player.nvidia_shield
                maxCount: '10'
                maxRows: ''
                useHorizontalScroll: 'No'
                useShuffle: 'No'
                displayTitleMain: 'Yes'
                displaySubtitleMain: 'Yes'
                minWidth: ''
                minEpisodeWidth: ''
                minExpandedWidth: ''
                fontSize1: ''
                fontSize2: ''
                fontSize3: ''
                fontSize4: ''
                minExpandedHeight: ''
                title: En cours
                style: |
                  ha-card {
                    --ha-card-background: rgba(240, 240, 240, 0.1);

Je pense que tu peux déplacer la card en jouant avec le style à la fin :

                style: |
                  ha-card {
                    --ha-card-background: rgba(240, 240, 240, 0.1);
                    left: xxx% !important;
                    top: xxx% !important;

Ou quelque chose du genre

barto_95 · Février 23, 2022, 5:58

A quoi te sert cette entity: sensor.plex_recently_movies_name_1 ?

Faudrait voir si tu peut expliquer un peut plus la partie Plex stp

Guizmos · Février 23, 2022, 7:18

pour cette entity : sensor.plex_recently_movies_name_1
Je l’utilise uniquement pour afficher le dernier films télécharger sur la card principale :

Le code pour ajouter ce sensor ce divise en deux parties :

  - platform: plex_recently_added
    name: Recently Added Movies
    token: XXXXXXXXXXX
    host: IP
    port: xxx
    max: 10
    section_types:
      - movie

puis :

  - platform: template
    sensors:
      plex_recently_movies_name_1:
        friendly_name: "Movie 1 name"
        icon_template: mdi:movie-roll
        value_template:  "{{ state_attr('sensor.recently_added_movies', 'data')[1]['title'] }}"

Sinon de manière général
Pour Plex:

Intégraion - Plex Media Serveur (me donne des infos sur mes bibliothèques)
HACS Integration - Sensor.Plex Recently Added (me permet de voir les derniers ajouts dans Plex)
HACS Frontend - PlexMeetsHomeAssistant (qui me permet de créer une card pour « reprendre » les lectures en cours dans Plex)
HACS Frontend - Upcoming Media Card (en complément de sensor.plex Recently Added pour créer les affiches des derniers ajouts)

Pou Sonarr :

HACS Integration - Sensor.Sonarr Upcoming Media (me permet d’avoir un complément à Plex pour avoir un sensor des futurs sorties séries (card prochainement)

Guizmos · Février 23, 2022, 7:31

J’avoue que c’est assez complexe.
Le mieux c’est de faire fonctionner une a une les intégrations puis de les intégrer au thème. C’est comme ça que j’ai fait