Newbie needs help for a weather dashboard

In this topic this very nice dashboard was created and postet by @tom_l:

Except for the card “Daily Rainfall” in the upper right corner, I have installed and also configured all other cards (many thanks to tom!).
But I can’t manage to arrange the cards according to the screenshot. I think I have tried all the possibilities already.
The first and the last column I created with “Vertical stack”, but I can’t get the middle part right.
This is what I already tried:
– 4 grids with one vertical stack each
– 2 grids with two vertical stacks each
– 1 grid with four vertical stacks
(with square cards)

The middle cards are always squeezed together.

What I’m doing wrong? Any suggestions?
Is it possibly dependent on the screen size?

2 Likes

The shape of the cards actually has something to do with the screen size or the zoom setting of the browser. The middle cards are a bit more compressed. In addition, only 5 days and 5 hours are shown in the forecast, while you have 8.


(Zoomfaktor 75 %)

But it still looks very nice and I am happy with it. Thanks again!

Hi @Fantross ,
even though this post is a bit old. Could you share the code for your Dashboard? I just got my self a weather station and I would love to use the board you’ve shown in your screenshot :slight_smile:

Kind Regards
Dasgen

Here you are…

First vertical stack:

type: vertical-stack
cards:
  - title: Tagesprognose
    type: custom:weather-chart-card
    entity: weather.weatherflow_day_based_forecast
    show_main: false
    show_attributes: false
  - title: Stundenprognose
    type: custom:weather-chart-card
    entity: weather.weatherflow_hourly_based_forecast
    show_main: false
    show_attributes: false
  - color_thresholds:
      - color: '#ae0c00'
        value: 2,8
      - color: '#66b032'
        value: 2,455
      - color: '#ed9121'
        value: 2,415
      - color: '#00B7eb'
        value: 2,39
      - color: '#008000'
        value: 2,355
    color_thresholds_transition: hard
    entities:
      - entity: sensor.weatherflow_voltage_tempest
        name: Energiemodus
    group: false
    hour24: true
    line_width: 4
    points_per_hour: 2
    show:
      graph: bar
      extrema: true
      fill: fade
      icon: true
      labels: false
      name: true
      state: true
    type: custom:mini-graph-card

Second vertical stack:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        cards:
          - color_thresholds:
              - color: '#fe2712'
                value: 30
              - color: '#fefe33'
                value: 20
              - color: '#66b032'
                value: 10
              - color: '#0000cd'
                value: -10
            color_thresholds_transition: smooth
            entities:
              - entity: sensor.weatherflow_air_temperature
                name: Temperatur
            group: false
            hour24: true
            line_width: 2
            points_per_hour: 4
            show:
              extrema: true
              fill: fade
              icon: true
              labels: false
              name: true
              state: true
            type: custom:mini-graph-card
          - color_thresholds:
              - color: '#fe2712'
                value: 30
              - color: '#fefe33'
                value: 20
              - color: '#66b032'
                value: 10
              - color: '#0000cd'
                value: -10
            color_thresholds_transition: smooth
            entities:
              - entity: sensor.weatherflow_feels_like_temperature
                name: Gefühlte Temperatur
            group: false
            hour24: true
            line_width: 2
            points_per_hour: 4
            show:
              extrema: true
              fill: fade
              icon: true
              labels: false
              name: true
              state: true
            type: custom:mini-graph-card
  - type: horizontal-stack
    cards:
      - color_thresholds:
          - color: '#0000cd'
            value: 100
          - color: '#00BFFF'
            value: 0
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.weatherflow_relative_humidity
            name: Relative Luftfeuchtigkeit
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 4
        show:
          extrema: true
          fill: fade
          icon: true
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card
      - color_thresholds:
          - color: '#0000cd'
            value: 20
          - color: '#00BFFF'
            value: 0
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.weatherflow_precipitation_today
            name: Regen letzte 24 h
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 1
        show:
          graph: bar
          extrema: true
          fill: fade
          icon: true
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card
  - type: horizontal-stack
    cards:
      - color_thresholds:
          - color: '#0000cd'
            value: 20
          - color: '#00BFFF'
            value: 0
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.weatherflow_precipitation_last_hour
            name: Regen letzte Stunde
        group: false
        hour24: false
        line_width: 2
        points_per_hour: 1
        show:
          graph: bar
          extrema: true
          fill: fade
          icon: true
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card
      - color_thresholds:
          - color: '#0000cd'
            value: 20
          - color: '#00BFFF'
            value: 0
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.weatherflow_precipitation_rate
            name: Niederschlagsmenge
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 1
        show:
          graph: bar
          extrema: true
          fill: fade
          icon: true
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card

Third vertical stack:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        cards:
          - color_thresholds:
              - color: '#fa00ff'
                value: 117
              - color: '#fdb5aa'
                value: 89
              - color: '#fdb5aa'
                value: 62
              - color: '#ffffbb'
                value: 29
              - color: '#82c93f'
                value: 0
            color_thresholds_transition: hard
            entities:
              - entity: sensor.weatherflow_wind_speed_km_h
                name: Windgeschwindigkeit
            group: false
            hour24: true
            line_width: 2
            points_per_hour: 4
            show:
              extrema: true
              fill: fade
              icon: true
              labels: false
              name: true
              state: true
            type: custom:mini-graph-card
          - color_thresholds:
              - color: '#fa00ff'
                value: 117
              - color: '#fdb5aa'
                value: 89
              - color: '#fdb5aa'
                value: 62
              - color: '#ffffbb'
                value: 29
              - color: '#82c93f'
                value: 0
            color_thresholds_transition: hard
            entities:
              - entity: sensor.weatherflow_wind_gust_km_h
                name: Windböen
            group: false
            hour24: true
            line_width: 2
            points_per_hour: 4
            show:
              extrema: true
              fill: fade
              icon: true
              labels: false
              name: true
              state: true
            type: custom:mini-graph-card
  - type: horizontal-stack
    cards:
      - type: custom:compass-card
        header:
          title:
            value: Windrichtung
        indicator_sensors:
          - sensor: sensor.weatherflow_wind_direction
            indicator:
              type: arrow_inward
        value_sensors:
          - sensor: sensor.weatherflow_wind_speed
      - color_thresholds:
          - color: '#e1011b'
            value: 11
          - color: '#e94153'
            value: 8
          - color: '#ffa304'
            value: 6
          - color: '#ffb636'
            value: 3
          - color: '#72c900'
            value: 0
        color_thresholds_transition: hard
        entities:
          - entity: sensor.weatherflow_uv_index
            name: UV Index
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 4
        show:
          extrema: true
          fill: fade
          icon: true
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card
  - type: horizontal-stack
    cards:
      - color_thresholds:
          - color: '#0000cd'
            value: 25
          - color: '#00BFFF'
            value: 0
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.weatherflow_dewpoint
            name: Taupunkt
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 4
        show:
          extrema: true
          fill: fade
          icon: true
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card
      - color_thresholds:
          - color: '#ffcc33'
            value: 1025
          - color: '#00B7eb'
            value: 975
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.weatherflow_station_pressure
            name: Luftdruck
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 4
        show:
          extrema: true
          fill: fade
          icon: true
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card

Fourth vertical stack:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: binary_sensor.weatherflow_is_lightning
      - entity: sensor.weatherflow_lightning_strike_count
      - entity: sensor.weatherflow_lightning_strike_count_last_hour
      - entity: sensor.weatherflow_lightning_strike_count_last_3_hours
      - entity: sensor.weatherflow_last_lightning_strike
      - entity: sensor.weatherflow_last_lightning_strike_distance
    title: Lightning
    show_header_toggle: true
    state_color: true
  - type: custom:weather-radar-card
    data_source: RainViewer-TWC
    map_style: Dark
    zoom_level: 9
    show_marker: true
    show_scale: true
    show_playback: false
    show_zoom: true
    show_range: true
    static_map: true
    square_map: true
    show_recenter: true
    extra_labels: true
3 Likes

Thank you! Danke :slight_smile:

What are you using to call the date?

Which date? All entities are from the WeatherFlow integration.

I’m using the basic met Office integration right now, but loving the looks of these cards

Hate to dust off a relatively old thread but what theme was used?

I took the amazing work that everyone has done thus far, and made this:

Thanks again for the collaboration and sharing which ultimately benefits each other.

2 Likes

What type of weather forecast cards do you use?