Weather card - iOS 16 inspiration

Anyone have the iOS 16 beta and noticed how awesome the new weather app is?

Anyone interested to help create similar experience with the weather card and graph cards? We already have the data from openweather and dark sky apis.

Would be interesting to see if anyone got similar ideas or tried taking on something like this?





5 Likes

not as elegant and interactive as the weather app, but i assembled an apex chart card with data mostly from the deutscher wetterdienst custom component. on top it shows cloud cover (past and next 48 hours), sun intensity and duration, line charts for predicted and actual temperature, dew point, wind speed and gusts and on the bottom rain probabbility and amount.

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 3d
update_interval: 1h
span:
  start: day
  offset: '-6h'
now:
  show: true
color_list:
  - red
  - orange
  - blue
  - lightblue
yaxis:
  - id: first
    apex_config:
      tickAmount: 4
      decimalsInFloat: 0
    min: '|-3|'
    max: '|+3|'
  - id: second
    opposite: true
    apex_config:
      tickAmount: 4
    min: 0
    max: 600
    show: false
  - id: clouds
    opposite: true
    apex_config:
      tickAmount: 4
      reversed: true
    min: 0
    max: 400
    show: false
  - id: menge
    opposite: true
    apex_config:
      tickAmount: 4
      reversed: false
    min: 0
    max: 20
    show: false
  - id: wind
    opposite: true
    apex_config:
      tickAmount: 4
      reversed: false
    min: 0
    max: 130
    show: false
  - id: sonne
    opposite: true
    apex_config:
      tickAmount: 4
      reversed: true
    min: 0
    max: 3600
    show: false
apex_config:
  grid:
    show: false
  chart:
    height: 500px
    animations:
      enabled: false
  yaxis:
    - tickAmount: 6
  annotations:
    position: back
    yaxis:
      - 'y': 0
        strokeDashArray: 5
        borderColor: '#fff'
        borderWidth: 1
  tooltip:
    enabled: true
    x:
      show: false
      format: dddd HH:MM
    marker:
      show: true
    fixed:
      enabled: true
      position: topright
    onDatasetHover:
      highlightDataSeries: true
header:
  title: 3 Tage-Vorhersage
  show: true
  show_states: true
  colorize_states: true
series:
  - entity: sensor.temperature_berlin_tegel
    yaxis_id: first
    name: DWD
    curve: smooth
    stroke_width: 2
    type: line
    color: red
    extend_to: false
    unit: °C
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    color_threshold:
      - value: 0
        color: white
      - value: 0
        color: red
    group_by:
      func: last
      duration: 1h
  - entity: sensor.dewpoint_berlin_tegel
    yaxis_id: first
    name: Taupunkt
    curve: smooth
    stroke_width: 2
    type: line
    color: blue
    extend_to: false
    unit: °C
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.temperatur_hof
    curve: smooth
    yaxis_id: first
    stroke_width: 2
    extend_to: false
    name: Hof
    color: magenta
    show:
      in_header: false
      legend_value: true
    group_by:
      func: last
      duration: 1h
  - entity: sensor.sun_duration_berlin_tegel
    yaxis_id: sonne
    name: Sonne
    curve: smooth
    stroke_width: 0.1
    type: area
    color: '#ffff99'
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
    group_by:
      func: last
      duration: 1h
  - entity: sensor.sun_irradiance_berlin_tegel
    yaxis_id: sonne
    name: Sonnenstrahlung
    curve: smooth
    stroke_width: 0.5
    type: line
    color: '#ffff99'
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
    group_by:
      func: last
      duration: 1h
  - entity: sensor.cloud_coverage_berlin_tegel
    yaxis_id: clouds
    name: Wolken
    curve: smooth
    stroke_width: 0
    type: area
    color: '#333'
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.fog_probability_berlin_tegel
    yaxis_id: second
    name: Nebel
    curve: smooth
    stroke_width: 0
    type: area
    color: '#778899'
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.precipitation_probability_berlin_tegel
    yaxis_id: second
    name: Regen
    curve: smooth
    stroke_width: 0
    type: area
    color: blue
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.precipitation_berlin_tegel
    yaxis_id: menge
    name: Regenmenge
    curve: smooth
    stroke_width: 0
    type: area
    color: aqua
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.regenmenge_1h_2
    yaxis_id: menge
    name: Regenmenge Radar
    curve: smooth
    stroke_width: 0
    type: area
    color: white
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: avg
      duration: 1h
  - entity: sensor.wind_speed_berlin_tegel
    yaxis_id: wind
    name: Wind
    curve: smooth
    stroke_width: 2
    type: line
    color: grey
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.wind_gusts_berlin_tegel
    yaxis_id: wind
    name: Böen
    curve: smooth
    stroke_width: 2
    type: line
    color: darkgrey
    extend_to: false
    unit: ''
    show:
      in_header: false
      legend_value: true
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.sun_duration_berlin_tegel
    yaxis_id: sonne
    stroke_width: 0
    name: Sonne
    type: area
    color: '#ffff99'
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
    group_by:
      func: sum
      duration: 1h
  - entity: sensor.sun_irradiance_berlin_tegel
    yaxis_id: sonne
    stroke_width: 0.5
    name: Sonnestrahlung
    extend_to: false
    type: line
    color: '#ffff99'
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
    group_by:
      func: sum
      duration: 1h
  - entity: sensor.cloud_coverage_berlin_tegel
    yaxis_id: clouds
    stroke_width: 0
    name: Wolken
    type: area
    color: '#333'
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
      extremas: false
  - entity: sensor.fog_probability_berlin_tegel
    yaxis_id: second
    stroke_width: 0
    name: Nebel
    type: area
    color: '#778899'
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
      extremas: false
  - entity: sensor.temperature_berlin_tegel
    yaxis_id: first
    name: DWD
    curve: smooth
    stroke_width: 2
    type: line
    color: red
    color_threshold:
      - value: 0
        color: white
      - value: 0
        color: red
    extend_to: false
    unit: °C
    show:
      in_header: false
      legend_value: false
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
    data_generator: |
      return entity.attributes.data.map((entry) => {
       return [new Date(entry.datetime).getTime(), entry.value];
      });
  - entity: sensor.dewpoint_berlin_tegel
    yaxis_id: first
    name: Taupunkt
    curve: smooth
    stroke_width: 2
    type: line
    color: blue
    extend_to: false
    unit: °C
    show:
      in_header: false
      legend_value: false
      offset_in_name: false
    group_by:
      func: last
      duration: 1h
    data_generator: |
      return entity.attributes.data.map((entry) => {
       return [new Date(entry.datetime).getTime(), entry.value];
      });
  - entity: sensor.precipitation_probability_berlin_tegel
    yaxis_id: second
    stroke_width: 0
    name: Regen
    type: area
    color: blue
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.precipitation_berlin_tegel
    yaxis_id: menge
    stroke_width: 0
    name: Regenmenge
    type: area
    color: aqua
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.wind_speed_berlin_tegel
    yaxis_id: wind
    stroke_width: 2
    name: Wind
    type: line
    color: grey
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.wind_gusts_berlin_tegel
    yaxis_id: wind
    stroke_width: 2
    name: Böen
    type: line
    color: darkgrey
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.datetime).getTime(), item.value];
      });
    show:
      in_header: false
      legend_value: false
    group_by:
      func: last
      duration: 1h
  - entity: sensor.regenradar_dbz_t
    yaxis_id: menge
    stroke_width: 0
    name: Regenmenge Radar
    unit: ''
    type: area
    color: white
    extend_to: false
    data_generator: |
      return entity.attributes.data.map(
      (item) => {
        return [new Date(item.timestamp*1000-0).getTime(), item.mm];
      });
    show:
      in_header: false
      legend_value: false
      extremas: false

1 Like