Carte météo France simplifiée avec sous-vue

Entraide Home Assistant
1

Bonjour,
Je suis en train de mettre en place un dashboard spécifique pour le NS Panel Pro.
L’espace étant réduit, je cherche à afficher quelques éléments de base sur la home, avec navigation vers des sous-vues.
Ma demande d’aide concerne la carte météo France.
Je l’ai simplifiée au maximum pour avoir la vue ci-dessous:

image
image558×503 23.9 KB

J’aimerais faire en sorte qu’un clic sue la carte me dirige vers une sous-vue de la carte complète que j’ai créé, et pas vers le détail de l’entité comme c’est le cas aujourd’hui.
Je pense que c’est faisable en empilant une carte custom-button-card ou autre sur la carte météo France, mais je n’y arrive pas.
Quelqu’un a-t-il une idée?
Par ailleurs, question subsidiaire, j’aimerias pouvoir réduire la marge haute et l’espace entre « Eclaircies » et les prévisions de pluie dans l’heure, car cet espace est perdu sur ce petit écran.
Merci d’avance.

2

Bj

Peut etre que @WarC0zes peut te venir en aide …
Il aime bien les cartes météo :wink:

3

Salut,
tu peu essayer d’utiliser la carte custom:popup-card, qui est inclus avec browser-mod.

la carte remplace le more-info par un popup de ton choix.
ca ce base sur une entité.

tu garde ta carte météo et créer une carte popup qui ce basera sur l’entité météo de ta carte météo.

exemple de code:

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: true
  margin: true
  border_radius: true
  background: false
  outer_padding: false
cards:
  - type: custom:meteofrance-weather-card
    entity: weather.xxx
    number_of_forecasts: '7'
    forecast: true
    alert_forecast: true
    cloudCoverEntity: sensor.xxxx_cloud_cover
    rainChanceEntity: sensor.xxxx_rain_chance
    freezeChanceEntity: sensor.xxxx_freeze_chance
    snowChanceEntity: sensor.xxxx_snow_chance
    uvEntity: sensor.xxxx_uv
    detailEntity: sensor.xxxx_wind_speed
    alertEntity: sensor.11_weather_alert
    wind_forecast_icons: true
    humidity_forecast: true
  - type: custom:popup-card
    entity: weather.xxxx
    style: |-
      --popup-border-radius: 15px;
      --popup-background-color: transparent;
      --popup-border-width: 0px;
    card:
      type: custom:meteofrance-weather-card
      entity: weather.xxxx
      number_of_forecasts: '7'
      forecast: true
      alert_forecast: true
      cloudCoverEntity: sensor.xxxx_cloud_cover
      rainChanceEntity: sensor.xxxx_rain_chance
      freezeChanceEntity: sensor.xxxx_freeze_chance
      snowChanceEntity: sensor.xxxx_snow_chance
      uvEntity: sensor.xxxx_uv
      detailEntity: sensor.xxxx_wind_speed
      alertEntity: sensor.11_weather_alert
      wind_forecast_icons: true
      humidity_forecast: true

météo3

1 « J'aime »
4

Merci @WarC0zes. Cette solution fonctionne et j’ai appris quelque chose qui va m’être utile pour d’autres cas, mais ne répond pas totalement à mon besoin ici:

  • la sous-vue que j’aimerais utiliser possède à la fois les prévisions horaires et journalières sur la même vue (elle provient de ton super dashbaord meteo). C’est vers cette vue que j’aimerais « naviguer »
  • la carte popup prend tout l’écran du NS Panel Pro. N’ayant pas de bouton « back », il est difficile d’en sortir sur le NS Panel (contrairement aux sous-vues qui ont un bouton de retour).
    J’ai essayé de faire une custom_button_card incluant la carte meteo simplifiée et incluant un tap_action, mais la carte reste sur le dessus. Peut-être en mettant une carte image transparente sur la carte météo? Il me semble avoir vu ça, mais je ne sais pas faire…
5

Tu ne peux pas mettre un bouton « back » sur ta popup ? Sinon, le zIndex peux-t’il te servir ?

Quelle carte reste sur le dessus ?

6

Sur une carte popup-card je sais pas si on peut ajouter un bouton pour fermer.
Avec le service popup c’est faisable, je check voir si on peu sur la carte.

7

@Gilles2
ajoute ce code:

    right_button: Fermer
    right_button_action:
      service: browser_mod.close_popup

  - type: custom:popup-card
    entity: weather.xxxx
    right_button: Fermer
    right_button_action:
      service: browser_mod.close_popup
    style: |-
      --popup-border-radius: 15px;
      --popup-background-color: transparent;
      --popup-border-width: 0px;
    card:
      type: custom:meteofrance-weather-card
      entity: weather.xxxx
      number_of_forecasts: '7'
      forecast: true
      alert_forecast: true
      cloudCoverEntity: sensor.xxxx_cloud_cover
      rainChanceEntity: sensor.xxxx_rain_chance
      freezeChanceEntity: sensor.xxxx_freeze_chance
      snowChanceEntity: sensor.xxxx_snow_chance
      uvEntity: sensor.xxxx_uv
      detailEntity: sensor.xxxx_wind_speed
      alertEntity: sensor.11_weather_alert
      wind_forecast_icons: true
      humidity_forecast: true

Si tu préfère a gauche:

    left_button: Fermer
    left_button_action:
      service: browser_mod.close_popup

Edit:
ta l’option size, a tester:

  - type: custom:popup-card
    entity: weather.xxxx
    size: normal
    right_button: Fermer
    right_button_action:
      service: browser_mod.close_popup
    style: |-
      --popup-border-radius: 15px;
      --popup-background-color: transparent;
      --popup-border-width: 0px;
    card:
...
8

Mais avec le service, tu peux ouvrir une button-card en popup si je ne m’abuse, non ?

9

c’est bon, j’ai trouver la syntaxe.

10

dans la carte popup, tu mets ce que tu veut après.

Mets ton code des cartes et te ferais l’assemblage avec le popup.

11

Merci encore de m’aider.
Alors ci-dessous le code complet de ce dashbaord du NS Panel, dans lequel j’ai essayé d’inclure la carte popup météo complète. Malheureusement il doit y avoir une erreur quelque part car in ne veut pas du code. Certainement une indentation mal placée…

type: vertical-stack
cards:
  - type: custom:meteofrance-weather-card
    entity: weather.saint_germain_en_laye
    current: true
    one_hour_forecast: true
    forecast: false
    details: false
    alert_forecast: false
    rainForecastEntity: sensor.saint_germain_en_laye_next_rain
  - type: custom:popup-card
    entity: weather.saint_germain_en_laye
    left_button: Fermer
    left_button_action:
      service: browser_mod.close_popup
    style: |-
      --popup-border-radius: 15px;
      --popup-background-color: transparent;
      --popup-border-width: 0px;
    card:
      type: custom:stack-in-card
      mode: vertical
      keep:
        box_shadow: true
        margin: true
        border_radius: true
        background: true
        outer_padding: false
     cards:
       - type: custom:meteofrance-weather-card
         entity: weather.saint_germain_en_laye
         number_of_forecasts: '7'
         forecast: true
         alert_forecast: false
         cloudCoverEntity: sensor.saint_germain_en_laye_cloud_cover
         rainChanceEntity: sensor.saint_germain_en_laye_rain_chance
         freezeChanceEntity: sensor.saint_germain_en_laye_freeze_chance
         snowChanceEntity: sensor.saint_germain_en_laye_snow_chance
         uvEntity: sensor.saint_germain_en_laye_uv
         rainForecastEntity: sensor.saint_germain_en_laye_next_rain
         detailEntity: sensor.saint_germain_en_laye_daily_precipitation
         alertEntity: sensor.78_weather_alert_weather_alert
         name: Saint-Germain-en-Laye
         static_icons: false
         wind_forecast_icons: true
         card_mod:
           style: |
             :host {
               --card-mod-icon-color: #44739e;
             }
             ha-card {
               top: -15px;
               background: none;
             }
             ha-card {
               border: none;
             }                
         attributes:
           label: Saint Germain en Laye
           icon: mdi:weather-partly-cloudy
           minWidth: true
           isMinWidthIndicator: true
       - type: custom:mod-card
         card_mod:
           style:
             .: |
               :host {
                 --text-divider-color: rgb(68, 115, 158);
                --text-divider-line-size: 1px;
               }
               ha-card {
                 margin-top: -32px;
                 background: transparent;
               }
               ha-card {
                 border: none;
               }
         card:
           type: custom:text-divider-row
           text: Prévisions 7 Jours
           align: left
       - type: custom:meteofrance-weather-card
         number_of_forecasts: '7'
         entity: weather.fourqueux
         alert_forecast: false
         details: false
         current: false
         forecast: true
         one_hour_forecast: true
         static_icons: false
         wind_forecast_icons: true
         card_mod:
           style: |
             ha-card {
               top: -20px;
               height: 158px;
               background: transparent;
             }
             ha-card {
               border: none;
             }        
       - type: custom:mod-card
         card_mod:
           style:
             .: |
               :host {
                 --text-divider-color: rgb(68, 115, 158);
                 --text-divider-line-size: 1px;
               }
               ha-card {
                 margin-top: -30px;
                 background: transparent;
               }
     card_mod:
       style: |
         ha-card {
           box-shadow: 0 0 0 1px gray;
         }
  - square: true
    type: grid
    cards:
      - type: gauge
        entity: sensor.lixee_zlinky_apparent_power
        max: 5000
        needle: true
        severity:
          green: 0
          yellow: 1000
          red: 2500
      - type: tile
        entity: light.salon
        features:
          - type: light-brightness
          - type: light-color-temp
      - type: custom:button-card
        name: Garage
        entity: cover.garage_door
        aspect_ratio: 1/1
    columns: 3
  - type: entities
    entities:
      - entity: sensor.etat_lave_vaisselle
      - entity: sensor.etat_lave_linge
      - entity: sensor.etat_seche_linge
      - entity: sensor.etat_charge_voiture
    show_header_toggle: false
    state_color: true
12

Essai ce code:

type: vertical-stack
cards:
  - type: custom:meteofrance-weather-card
    entity: weather.saint_germain_en_laye
    current: true
    one_hour_forecast: true
    forecast: false
    details: false
    alert_forecast: false
    rainForecastEntity: sensor.saint_germain_en_laye_next_rain
  - type: custom:popup-card
    entity: weather.saint_germain_en_laye
    left_button: Fermer
    left_button_action:
      service: browser_mod.close_popup
    style: |-
      --popup-border-radius: 15px;
      --popup-background-color: transparent;
      --popup-border-width: 0px;
    card:
      type: custom:stack-in-card
      mode: vertical
      keep:
        box_shadow: true
        margin: true
        border_radius: true
        background: true
        outer_padding: false
      cards:
        - type: custom:meteofrance-weather-card
          entity: weather.saint_germain_en_laye
          number_of_forecasts: '7'
          forecast: true
          alert_forecast: false
          cloudCoverEntity: sensor.saint_germain_en_laye_cloud_cover
          rainChanceEntity: sensor.saint_germain_en_laye_rain_chance
          freezeChanceEntity: sensor.saint_germain_en_laye_freeze_chance
          snowChanceEntity: sensor.saint_germain_en_laye_snow_chance
          uvEntity: sensor.saint_germain_en_laye_uv
          rainForecastEntity: sensor.saint_germain_en_laye_next_rain
          detailEntity: sensor.saint_germain_en_laye_daily_precipitation
          alertEntity: sensor.78_weather_alert_weather_alert
          name: Saint-Germain-en-Laye
          static_icons: false
          wind_forecast_icons: true
          card_mod:
            style: |
              :host {
                --card-mod-icon-color: #44739e;
              }
              ha-card {
                top: -15px;
                background: none;
              }
              ha-card {
                border: none;
              }                
        - type: custom:mod-card
          card_mod:
            style:
              .: |
                :host {
                  --text-divider-color: rgb(68, 115, 158);
                 --text-divider-line-size: 1px;
                }
                ha-card {
                  margin-top: -32px;
                  background: transparent;
                }
                ha-card {
                  border: none;
                }
          card:
            type: custom:text-divider-row
            text: Prévisions 7 Jours
            align: left
        - type: custom:meteofrance-weather-card
          number_of_forecasts: '7'
          entity: weather.fourqueux
          alert_forecast: false
          details: false
          current: false
          forecast: true
          one_hour_forecast: true
          static_icons: false
          wind_forecast_icons: true
          card_mod:
            style: |
              ha-card {
                top: -20px;
                height: 158px;
                background: transparent;
              }
              ha-card {
                border: none;
              }        
      card_mod:
        style: |
          ha-card {
            box-shadow: 0 0 0 1px gray;
          }
  - square: true
    type: grid
    cards:
      - type: gauge
        entity: sensor.lixee_zlinky_apparent_power
        max: 5000
        needle: true
        severity:
          green: 0
          yellow: 1000
          red: 2500
      - type: tile
        entity: light.salon
        features:
          - type: light-brightness
          - type: light-color-temp
      - type: custom:button-card
        name: Garage
        entity: cover.garage_door
        aspect_ratio: 1/1
    columns: 3
  - type: entities
    entities:
      - entity: sensor.etat_lave_vaisselle
      - entity: sensor.etat_lave_linge
      - entity: sensor.etat_seche_linge
      - entity: sensor.etat_charge_voiture
    show_header_toggle: false
    state_color: true
13

Tu es un magicien ! Parfait.
Peux-tu me dire ce qui n’allait pas STP pour que je m’améliore…

14

Il manquait un espace en dessous de cards:, la ou j’ai mis un X.

enfaite c’est ici le soucis

1 « J'aime »
15

@Gilles2 Bonsoir,
Serait-il possible d’avoir le code yaml de la carte zlinky puissance apparente ?
Merci d’avance :innocent:

16

@MilesTEG1, il s’agit juste d’une carte jauge de base.
Tu as le code entier de mon dashboard quelques posts au-dessus. La carte jauge elle-même n’a rien de spécial et est la carte de base de HA:

      - type: gauge
        entity: sensor.lixee_zlinky_apparent_power
        max: 5000
        needle: true
        severity:
          green: 0
          yellow: 1000
          red: 2500

[/quote]

Pour info, tu trouveras ici : Deux cartes superposées - Entraide Home Assistant - Home Assistant Communauté Francophone (hacf.fr) une discussion sur une carte plus évoluée pour la même chose.

1 « J'aime »