Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

Share your Projects!
,
3069

Hi,

First you need to install the: browser_mod.popup
you should read it how to, because you need to refresh sometimes the page ect.

for the grafiek, i made a input_numer:so you can change the time-span of the graph with 24hours. to a max of 744 hours.
this input number i did make:

temperature_graph_hours:
  name: grafiek
  initial: 24
  min: 24
  max: 744
  mode: box
  step: 24

the code of just he garage:

  • type: horizontal-stack
    cards:
    • type: custom:vertical-stack-in-card
      horizontal: true
      cards:
      • type: custom:mushroom-template-card
        secondary: >-
        {{ states.sensor.garage_temperature.state }} °C / {{
        states.sensor.garage_humidity.state }} %
        icon: mdi:car-back
        icon_color: blue
        multiline_secondary: true
        primary: Garage
        tap_action:
        action: fire-dom-event
        browser_mod:
        service: browser_mod.popup
        data:
        title: Garage
        content:
        type: custom:vertical-stack-in-card
        horizontal: false
        cards:
        - type: custom:config-template-card
        entities:
        - input_number.temperature_graph_hours
        card:
        type: horizontal-stack
        cards:
        - type: custom:config-template-card
        entities:
        - input_number.temperature_graph_hours
        card:
        type: custom:mini-graph-card
        entities:
        - sensor.garage_temperature
        hours_to_show: >-
        ${states[“input_number.temperature_graph_hours”].state}
        points_per_hour: 1
        line_width: 4
        font_size: 70
        line_color: lightblue
        align_state: center
        show:
        name: false
        average: true
        extrema: true
        labels_secondary: false
        - type: custom:config-template-card
        entities:
        - input_number.temperature_graph_hours
        card:
        type: custom:mini-graph-card
        entities:
        - sensor.garage_humidity
        hours_to_show: >-
        ${states[“input_number.temperature_graph_hours”].state}
        points_per_hour: 1
        line_width: 4
        font_size: 70
        align_state: center
        show:
        name: false
        average: true
        extrema: true
        - type: custom:mushroom-light-card
        entity: light.garage
        fill_container: false
        use_light_color: false
        show_brightness_control: true
        primary_info: none
        show_color_temp_control: false
        layout: horizontal
        - type: entities
        show_header_toggle: false
        entities:
        - entity: input_number.temperature_graph_hours
        type: custom:numberbox-card
        icon: mdi:poll
        unit: h
      • type: custom:mushroom-light-card
        entity: light.garage
        primary_info: none
        fill_container: true
        use_light_color: true
        show_brightness_control: true
        show_color_temp_control: false
        show_color_control: false
        layout: horizontal
1 Like