Repository: Lawris/plassonade-dashbaord
Branch: master
Commit: 454e428adeb7
Files: 3
Total size: 20.5 KB

Directory structure:
gitextract_53bn_oh0/

├── README.md
├── climate_card/
│   └── climate_card.yaml
└── room_card/
    └── room_card.yaml

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
# Plassonade's Dashboard

The father of Ambient Intelligence (AmI), Mark Weiser, said:
> The most profound technologies are those that disappear. 
> They weave themselves into the fabric of everyday life until they are indistinguishable from it.

The intention behind creating this dashboard is to display only the necessary information (not raw data) in a concise and comprehensive manner to the end user of the Smart Home.

In an ideal Smart Home, dashboards wouldn't be needed. However, there are times when you still need to pick up your phone to adjust a few things. So, let's make a cool dashboard!


🚧 This is a work in progress, I will update this repository regularly as the dashboard changes 🚧

## Disclaimer

This dashboard's code is provided as-is. It is up to you to modify the entities' names (sensors and devices) to make it work.

## Requirements
- [HACS] (not forcefully needed but it's gonna help you install most of the following requirements automatically)
- [Mushroom cards]
- [Stack in cards]
- [Simple thermostat]
- [Mini graph card]
- [Card Mod]

[HACS]: <https://hacs.xyz/>
[Mushroom cards]: <https://github.com/piitaya/lovelace-mushroom>
[Stack in cards]: <https://github.com/custom-cards/stack-in-card>
[Simple thermostat]: <https://github.com/nervetattoo/simple-thermostat>
[Mini graph card]: <https://github.com/kalkih/mini-graph-card>
[Card  Mod]: <https://github.com/thomasloven/lovelace-card-mod>

## Want to replicate my setup?

You can find my Smart Home setup [by following this link].

[by following this link]: <https://linktr.ee/plassonade>

If you order from here, it won't cost you anything more but I will receive a small commission from your purchases. Thanks for your support!

## Room card

![Room card](room_card/room_card.jpg)

The intention was to have a functional and minimal card to check the status of each room at a glance.
It is also a shortcut to a more detailed view (dashboard) for each room, which is perfect for a small screen (smartphone) display.
I've designed a small card, that I duplicated for each room, and all put together in a grid component.

Each card displays:
- The light state of the room (if any light is on, the room logo will be lit up to the color of the lights);
- The temperature of the specific room;
- If presence is detected or not in that room.

Controls:
- By clicking on the room you can turn on/off the lights inside it;
- Clicking on the arrow will redirect you to the approriate dashboard.

To make this work, you just need to replace the entities for each of your rooms and copy/paste the card in the grid if you have more rooms to manage.
Also, you need to create a dashboard for each room that you will navigate to when tapping on the arrow.

### Adding radiator glow animation

![Radiator glow](room_card/radiator_glow.gif)

You can create a radiator (or even A/C) glow to the room card by just adding a conditional animation.
The additional code needs to be at the root of each room card (stack-in-card), under the `card_mod` style, like this:
```
...
    card_mod:
      style: |
        ha-card {
          border: none;

          /* Add your thermostat entity like below with your desired condition */
          {% if state_attr('climate.better_thermostat', 'hvac_action') == 'heating' %}
          animation: breathing-shadow 1.5s infinite alternate ease-in-out;
          {% else %}
          animation: none;
          {% endif %}
        }
        /* Breathing/glow animation */
        /* Feel free to change the color and intensity to your liking */
        @keyframes breathing-shadow {
          0% {
            box-shadow: 0px 0px 10px 1px #FF8C00;
          }
          100% {
            box-shadow: 0px 0px 13px 3px #FF8C00;
          }
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Living Room
...
```
Replace the thermostat name with yours, but you can definitively use something else (like a switch for example) if you don't have a thermostat entity.

By the way, I highly suggest you to use the [Better Thermostat] integration to have your radiators and A/C fully automatized, [here is a video I made about it].

[Better Thermostat]: <https://github.com/KartoffelToby/better_thermostat>
[here is a video I made about it]: <https://www.instagram.com/plassonade/reel/DDQCu4EAaN7/>

## Climate control and Weather card

![Climate control and Weather card](climate_card/climate_card.png)

The goal was to concatenate a few things into a single card:
- Air conditioning control and status (on/off/heat/cold/dry/temperature);
- Air conditioning presets (none/eco/boost);
- Inside temperature vs. outside temperature;
- Local weather: temperature and conditions;
- Possibility to turn on/off an automation*

*This automation allows me to turn on and off the A/C if presence is detected, and automatically adjust the temperature depending on how far residents are from the A/C.

## Media control

Work in progress...

## Lights control

Work in progress...

## Tech stats, server metrics

Work in progress...

## Residents status and location

Work in progress...


## Shades, Roller shutters control

Work in progress...




## Need help?

Feel free to ask your questions on our Discord community, The Smart Playground.
[You can join it for free here].

[You can join it for free here]: <https://plassonade.com/links>


================================================
FILE: climate_card/climate_card.yaml
================================================
type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
style: |
  ha-card-border-width: 0
  ha-card {
    border: none
  }
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 1px !important;
            border: none
          }
        primary: Daikin
        secondary: |
          Currently: {{ state_attr('climate.daikinap83672', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.daikinap83672') %}
          {% if mode == 'off' %}
          mdi:power
          {% elif mode == 'cool' %}
          mdi:snowflake
          {% elif mode == 'heat' %}
          mdi:fire
          {% elif mode == 'heat_cool' %}
          mdi:autorenew
          {% else %}
          mdi:home-thermometer
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.daikinap83672','hvac_action') %}
          {% if status == 'off' %}
          grey
          {% elif status == 'cooling' %}
          blue
          {% elif status == 'heating' %}
          red
          {% else %}
          grey
          {% endif %}
        tap_action: none
      - type: vertical-stack
        cards:
          - type: custom:simple-thermostat
            style: |
              ha-card {
                --st-spacing: 0px;
                border: none
              }
              #ha-card .current--value {
              #  color: #ffffff;
              #}
              header {
                margin-bottom: 12px !important;
                padding-bottom: 0px !important;
              }
              ha-card .thermostat-trigger { 
                color: #9e9e9e;
              }
            entity: climate.daikinap83672
            header:
              name: false
              icon: false
            decimals: '0'
            fallback: 'Off'
            hide:
              temperature: true
              state: true
            layout:
              mode:
                names: false
                icons: false
                headings: false
              step: row
            step_size: '1'
            control:
              hvac:
                'off': false
                heat: false
                cool: false
                heat_cool: false
                dry: false
                fan_only: false
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        border: none;
      }
    alignment: justify
    chips:
      - type: template
        entity: climate.daikinap83672
        content: |
          {{ state_attr(entity, 'fan_mode') }}
        icon: mdi:fan
        icon_color: green
        tap_action: none
        style: |
          ha-card {
            border: none
          }
      - type: entity
        entity: automation.nexus_a_c_temperature_management
        tap_action:
          action: call-service
          service: automation.toggle
          target:
            entity_id: automation.nexus_a_c_temperature_management
        hold_action:
          action: more-info
        icon_color: primary
        style: |
          ha-card {
            border: none;
            --chip-height: 33px
          }
      - type: weather
        entity: weather.ajaccio
        show_conditions: true
        show_temperature: true
        style: |
          ha-card {
            border: none
          }
      - type: template
        double_tap_action:
          action: none
        content: '{{ states(entity) }}% Humidity'
        entity: sensor.pure_cool_link_humidity
        icon: mdi:water
        icon_color: blue
        tap_action:
          action: none
        hold_action:
          action: none
        style: |
          ha-card {
            border: none
          }
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 0px;
        #--st-mode-background: #262626;
        margin-left: 12px;
        margin-right: 12px;
        border: none
      }
      ha-card .mode-item.active.off { 
        #background: #363636;
        #color: #9e9e9e;
      }
      ha-card .mode-item.active.cool { 
        background: #1d3447;
        color: #2196f3;
      }
      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }
      ha-card .mode-item.active.heat_cool { 
        background: #493516;
        color: #ff9800;
      }
      ha-card .mode-item.active { 
        background: #263926;
        color: #4caf50;
      }
      ha-card .mode-item.active:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item {
        --st-spacing: 10px;
        border-radius: 10px;
      }
      ha-card .modes {
        grid-gap: 12px
      }
    entity: climate.daikinap83672
    header: false
    setpoints: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: false
      step: row
    control:
      hvac:
        'off':
          name: Power
        heat:
          name: Heat
        cool:
          name: Cool
        heat_cool:
          name: Auto
  - type: grid
    square: false
    columns: 3
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.daikinap83672_inside_temperature
        primary_info: state
        secondary_info: name
        name: Inside
        icon_color: green
        style: |
          ha-card {
            border: none
          }
      - type: custom:mushroom-entity-card
        entity: sensor.hue_outdoor_motion_sensor_temperature
        primary_info: state
        secondary_info: name
        name: Outside
        icon_color: blue
        style: |
          ha-card {
            border: none
          }
      - type: custom:simple-thermostat
        style: |
          ha-card {
            --st-font-size-toggle-label: 6px
            --st-spacing: 0px;
            --st-default-spacing: 1.3px;
            --st-mode-background: #262626;
            margin-right: 12px;
            border: none;
          }
          ha-card .mode-item.active.eco { 
            background: #263926;
            color: #4caf50;
          }
          ha-card .mode-item.active.boost { 
            background: #472421;
            color: #f44336;
          }
          ha-card .mode-item.active.none { 
            background: #1d3447;
            color: #2196f3;
          }
          ha-card .mode-item.active:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item {
            --st-spacing: 6px;
            border-radius: 10px;
          }
          ha-card .modes {
            grid-gap: 12px
          }
        entity: climate.daikinap83672
        header: false
        setpoints: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        control:
          preset:
            none:
              icon: mdi:circle-medium
            eco:
              icon: mdi:leaf
            boost:
              icon: mdi:rocket-launch
            away: false
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.daikinap83672_inside_temperature
        name: Inside Temperature
        color: '#4caf50'
      - entity: sensor.hue_outdoor_motion_sensor_temperature
        name: Outside Temperature
        color: '#2196f3'
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      points: hover
      fill: fade
      labels: false
      labels_secondary: false
    style: |
      ha-card {
        border: none
      }


================================================
FILE: room_card/room_card.yaml
================================================
square: false
type: grid
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
          {% if state_attr('climate.better_thermostat', 'hvac_action') == 'heating' %}
          animation: breathing-shadow 1.5s infinite alternate ease-in-out;
          {% else %}
          animation: none;
          {% endif %}
        }

        @keyframes breathing-shadow {
          0% {
            box-shadow: 0px 0px 10px 1px #FF8C00;
          }
          100% {
            box-shadow: 0px 0px 13px 3px #FF8C00;
          }
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Living Room
        secondary: >
          🌡️ {{
          states("sensor.living_room_temperature_humidity_sensor_temperature") }} °C
          💧 {{ states("sensor.living_room_temperature_humidity_sensor_humidity") }}
          %        icon: mdi:sofa
        entity: light.living_room_lights
        icon_color: '{{ state_attr(entity, "rgb_color")}}'
        badge_icon: |
          {% if is_state('binary_sensor.aqara_fp2', 'on') %}
            mdi:motion-sensor
          {% else %}
            mdi:none
          {% endif %}
        badge_color: |
          {% if is_state('binary_sensor.aqara_fp2', 'on') %}
            green
          {% else %}
            mdi:none
          {% endif %}
        fill_container: true
        card_mod:
          style: |
            ha-card {
              border: none;
              width: 170%
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:arrow-right
            style: |
              ha-card {
                border: none;
              }
        alignment: end
        card_mod:
          style: |
            ha-card {
              display: flex;
              align-items: center;
              justify-content: right;
              height: 100%;
              padding-right: 14px;
              --chip-spacing: 0px;
              --chip-background: transparent;
            }
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Bedroom
        secondary: >
          🌡️ {{
          states("sensor.living_room_temperature_humidity_sensor_temperature") }} °C
          💧 {{ states("sensor.living_room_temperature_humidity_sensor_humidity") }}
          %
        icon: mdi:bed
        entity: light.bedroom_lights
        icon_color: '{{ state_attr(entity, "rgb_color")}}'
        badge_icon: |
          {% if is_state('binary_sensor.bedroom_fp2_presence_sensor_1', 'on') %}
            mdi:motion-sensor
          {% else %}
            mdi:none
          {% endif %}
        badge_color: |
          {% if is_state('binary_sensor.bedroom_fp2_presence_sensor_1', 'on') %}
            green
          {% else %}
            mdi:none
          {% endif %}
        fill_container: true
        card_mod:
          style: |
            ha-card {
              border: none;
              width: 170%
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:arrow-right
            tap_action:
              action: navigate
              navigation_path: /smart-dash/bedroom
            style: |
              ha-card {
                border: none;
              }
        alignment: end
        card_mod:
          style: |
            ha-card {
              display: flex;
              align-items: center;
              justify-content: right;
              height: 100%;
              padding-right: 14px;
              --chip-spacing: 0px;
              --chip-background: transparent;
            }
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Bathroom
        secondary: >
          🌡️ {{
          states("sensor.living_room_temperature_humidity_sensor_temperature") }} °C
          💧 {{ states("sensor.living_room_temperature_humidity_sensor_humidity") }}
          %
        icon: mdi:shower-head
        entity: light.bathroom_lights
        icon_color: '{{state_attr(entity, "rgb_color")}}'
        badge_icon: |
          {% if is_state('binary_sensor.0x048727fffeb6bb7e_occupancy', 'on') %}
            mdi:motion-sensor
          {% else %}
            mdi:none
          {% endif %}
        badge_color: |
          {% if is_state('binary_sensor.0x048727fffeb6bb7e_occupancy', 'on') %}
            green
          {% else %}
            mdi:none
          {% endif %}
        fill_container: true
        card_mod:
          style: |
            ha-card {
              border: none;
              width: 170%
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:arrow-right
            style: |
              ha-card {
                border: none;
              }
        alignment: end
        card_mod:
          style: |
            ha-card {
              display: flex;
              align-items: center;
              justify-content: right;
              height: 100%;
              padding-right: 14px;
              --chip-spacing: 0px;
              --chip-background: transparent;
            }
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Balcony
        secondary: >
          🌡️ {{
          states("sensor.living_room_temperature_humidity_sensor_temperature") }} °C
          💧 {{ states("sensor.living_room_temperature_humidity_sensor_humidity") }}
          %
        icon: mdi:balcony
        entity: light.balcony_lights
        icon_color: '{{ state_attr(entity, "rgb_color")}}'
        badge_icon: >
          {% if is_state('binary_sensor.hue_outdoor_motion_sensor_motion', 'on')
          %}
            mdi:motion-sensor
          {% else %}
            mdi:none
          {% endif %}
        badge_color: >
          {% if is_state('binary_sensor.hue_outdoor_motion_sensor_motion', 'on')
          %}
            green
          {% else %}
            mdi:none
          {% endif %}
        fill_container: true
        card_mod:
          style: |
            ha-card {
              border: none;
              width: 170%
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:arrow-right
            style: |
              ha-card {
                border: none;
              }
        alignment: end
        card_mod:
          style: |
            ha-card {
              display: flex;
              align-items: center;
              justify-content: right;
              height: 100%;
              padding-right: 14px;
              --chip-spacing: 0px;
              --chip-background: transparent;
            }
columns: 2