Another Dashboard - inspired by a YouTuber

Share your Projects! Dashboards & Frontend
1

This is a simple Dashboard for home assistant running on tablet inspired from YouTuber Everything Smart Home

You will need some custom cards and integrations for this to work

Custom Cards used

1- custom:layout-card

2- custom:stack-in-card

3- custom:mini-graph-card

4- custom:simple-thermostat

5- custom:gap-card

6- custom:weather-card

7- custom:sun-card

8- Card Mod

9- mini-media-player

10- Homekit-panel-card

11- roku-card

I have used dark theme and removed the header with the below command from card mod

Start your dashboard in Lovelace-UI as 1 panel view check the post here

      card-mod-theme: night #name of the theme used
      card-mod-root: |
        app-header {
          display: none;
        }

alt text
alt text1854×771 205 KB

Additional dashboard

1659×796 101 KB

What you need to do?

change all entities to your HA

This is only 2 dashboards, you need to add more dashboards or views then edit the button card and add navigation to your dashboards to navigate to them

get the code from here

2

Hi Abdulla,

Many thanks for sharing your work here on this Dashboard. I have been struggling for the past 1 month trying to replicate this sleek looking dashboard. I did reach out to the youtuber on his Discord channel but he mention that his project is far from complete and wont be sharing the code anytime soon.

It took me a while to figure out how to integrate all these different customs cards into one, but still couldn’t figure out the layout card alignment successfully. I will take a look at your code and see how you have done the layout section.

All the additional CSS styling is a nightmare for me to figure out and have to follow many examples by trial and error.

Screenshot 2021-10-14 at 11.42.51 PM
Screenshot 2021-10-14 at 11.42.51 PM1806×1374 178 KB

3

@BinGraiban Would you be able to share another dashboard with the View of the Light Entities and the Media Control as well?

5

@BinGraiban I have copied your Dashboard code and have not made much changes, I tried to add in some light Entities and also a Media Control(mini-media player).

I notice there is a large gap in the spacing between my light card and the media player. I have tried to remove the gap card in the code, but im not able to figure out how to resolve this.

Attached the code below, would you be able to advise how i can resolve this?

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto 0.1px 33%
  grid-template-rows: auto
  grid-template-areas: |
    "header header header"
    "main . sidebar"
    "footer footer footer"
  mediaquery:
    '(max-width: 600px)':
      grid-template-columns: 100%
      grid-template-areas: |
        "header"
        "sidebar"
        "main"
        "footer"
    '(max-width: 800px)':
      grid-template-columns: 50% 50%
      grid-template-areas: |
        "header sidebar"
        "main main"
        "footer footer"
cards:
  - type: vertical-stack
    cards:
      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              border-style: solid;
              border-width: 0px;
              border-radius: 20px;
            }
        keep:
          background: true
          box_shadow: true
          margin: true
          outer_padding: true
          border_radius: true
        cards:
          - type: markdown
            style:
              .: |
                ha-card {
                  border-radius: 20px;
                  overflow: hidden;
                  margin: 0 auto;
                  padding-top: 0px;
                  background: none;
                  box-shadow: none;
                }
              ha-markdown:
                $: |
                  td, th {
                    width: auto;
                    word-wrap: break-word;
                    border-spacing: 0px;
                        margin-left:auto; 
                        margin-right:auto;

                  }
                  table {
                    width: 100%;
                    border-spacing: 0px;
                        margin-left:auto; 
                        margin-right:auto;
                  }
            content: >
              |<font size=6>{% if now().strftime("%H")|int < 12 %}Good
              morning.{% elif now().strftime("%H")|int < 18 %}Good afternoon.{%
              else %}Good evening.{% endif %} </font><br><font
              size=3>{{user}}</font> |<font size=5>{{now().strftime("%I:%M
              %p")}}</font><br><font size=3> {{now().strftime("%A")}},
              {{now().strftime("%d %B")}} </font> |

              |:--|---------:|

              || |
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: /lovelace-dash/0
                show_name: true
                show_icon: false
                name: Home
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;
                      background: none;
                      box-shadow: none;
                    }
              - type: button
                tap_action:
                  action: toggle
                show_name: true
                show_icon: false
                name: Living Room
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;
                      background: none;
                      box-shadow: none;
                    }
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: /lovelace-dash/segar-room
                show_name: true
                show_icon: false
                name: Segar Room
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;
                      background: none;
                      box-shadow: none;
                    }
              - type: button
                tap_action:
                  action: toggle
                show_name: true
                show_icon: false
                name: Bedroom
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;
                      background: none;
                      box-shadow: none;
                    }
              - type: button
                tap_action:
                  action: toggle
                show_name: true
                show_icon: false
                name: Study Room
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;
                      background: none;
                      box-shadow: none;
                    }
            card_mod:
              style: |
                ha-card {
                  height: 100% !important;
                  background: none;
                  box-shadow: none;
                }
        view_layout:
          grid-area: footer
      - type: custom:stack-in-card
        keep:
          background: true
          box_shadow: true
          margin: true
          outer_padding: true
          border_radius: true
        cards:
          - type: grid
            cards:
              - type: custom:mini-graph-card
                entities:
                  - sensor.segar_motion_sensor_temperature_measurement
                name: Bedroom Temperature
                show:
                  labels: true
                  points: false
                color_thresholds:
                  - value: 24
                    color: '#f39c12'
                  - value: 26
                    color: '#d35400'
                  - value: 28
                    color: '#c0392b'
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;
                      background: none;
                      box-shadow: none;
                    }
              - type: entities
                entities:
                  - entity: binary_sensor.segar_motion_sensor_motion
                    name: Bedroom Motion
                  - entity: sensor.segar_motion_sensor_illuminance
                    name: Bedroom Sensor Illuminance
                  - entity: sensor.segar_motion_sensor_battery
                    name: Bedroom Motion Sensor Battery
                  - entity: sensor.segar_motion_sensor_temperature_measurement
                    name: Bedroom Temperature
                  - entity: sensor.lumi_lumi_weather_humidity
                    name: Bedroom Humidity
                style: |
                  ha-card {
                    height: 100% !important;
                    font-size: 11px;
                    background: none;
                    box-shadow: none;
                  }
            columns: 2
            square: false
          - type: custom:gap-card
            height: 10
            size: null
          - type: grid
            cards:
              - type: custom:homekit-card
                entities:
                  - entities:
                      - entity: light.segar_room_3
                        name: Bedroom
                style: |
                  :host {
                    --tile-background: none;
                    --tile-border-radius: 12px;
                    --tile-left: 100px;
                    --tile-width: 80px;
                    --tile-height: 80px;
                    --tile-state-text-color: rgba(0, 0, 0, 0.4);
                    --tile-on-state-text-color: rgba(0, 0, 0, 1);
                    --tile-state-changed-text-color: rgb(134, 134, 134);
                    --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
                    --tile-value-text-color: rgba(255, 0, 0, 1);
                    --tile-icon-color: rgba(0, 0, 0, 0.3);
                    --tile-on-icon-color: #f7d959;
              - type: custom:homekit-card
                entities:
                  - entities:
                      - entity: light.segar_room_3
                        name: Bedroom
                style: |
                  :host {
                    --tile-background: none;
                    --tile-border-radius: 12px;
                    --tile-left: 100px;
                    --tile-width: 80px;
                    --tile-height: 80px;
                    --tile-state-text-color: rgba(0, 0, 0, 0.4);
                    --tile-on-state-text-color: rgba(0, 0, 0, 1);
                    --tile-state-changed-text-color: rgb(134, 134, 134);
                    --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
                    --tile-value-text-color: rgba(255, 0, 0, 1);
                    --tile-icon-color: rgba(0, 0, 0, 0.3);
                    --tile-on-icon-color: #f7d959;
              - type: custom:homekit-card
                entities:
                  - entities:
                      - entity: light.segar_room_3
                        name: Bedroom
                style: |
                  :host {
                    --tile-background: none;
                    --tile-border-radius: 12px;
                    --tile-left: 100px;

                    --tile-width: 80px;
                    --tile-height: 80px;
                    --tile-state-text-color: rgba(0, 0, 0, 0.4);
                    --tile-on-state-text-color: rgba(0, 0, 0, 1);
                    --tile-state-changed-text-color: rgb(134, 134, 134);
                    --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
                    --tile-value-text-color: rgba(255, 0, 0, 1);
                    --tile-icon-color: rgba(0, 0, 0, 0.3);
                    --tile-on-icon-color: #f7d959;
                columns: 4
                square: false
          - type: custom:mini-media-player
            entity: media_player.segar_echo
            group: true
        card_mod:
          style: |
            ha-card {
              border-style: solid;
              border-width: 0px;
              border-radius: 20px;

              background-color: var(--background-card-color);

              --ha-card-header-color: white;
              --ha-card-header-font-size: 40px;

              height: 100% !important;

              --vertical-stack-card-margin: 0px 0px 0px 0px;

              --ha-card-background: rgba(50,50,50,0.3);
            }
        view_layout:
          grid-area: sidebar
    view_layout:
      grid-area: main
  - type: custom:stack-in-card
    keep:
      background: true
      box_shadow: true
      margin: true
      outer_padding: true
      border_radius: true
    cards:
      - type: glance
        entities:
          - entity: person.thanasegar
          - entity: person.mary
            name: Mum
        card_mod:
          style: |
            ha-card {
              height: 100% !important;
              background: none;
              box-shadow: none;
            }
      - type: custom:weather-card
        entity: weather.home
        number_of_forecasts: '5'
        details: false
        darkMode: true
        card_mod:
          style: |
            ha-card {
              height: 100% !important;
              background: none;
              box-shadow: none;
            }
      - type: custom:sun-card
        darkMode: true
        card_mod:
          style: |
            ha-card {
              height: 100% !important;
              background: none;
              box-shadow: none;
            }
    card_mod:
      style: |
        ha-card {
          border-style: solid;
          border-width: 0px;
          border-radius: 20px;

          background-color: var(--background-card-color);

          --ha-card-header-color: white;
          --ha-card-header-font-size: 40px;

          height: 100% !important;

          --vertical-stack-card-margin: 0px 0px 0px 0px;

          --ha-card-background: var(--background-card-color);
        }
    view_layout:
      grid-area: sidebar

Screenshot 2021-10-15 at 12.55.11 PM
Screenshot 2021-10-15 at 12.55.11 PM2510×1588 242 KB

6

Hello, @thanasegar , I will share another dash with light control there are more custom cards to be used.

Just to give some information, I’m not using YAML mode, I place the layout in the lovelace dash and view the live changes and then implement the CSS which is easy for me. If you want I can share a small video on it.

At the end documentation is the key if you got confused, normally as you have said trial and error, that exactly what I have done.

I will update the 1st post once I have added another dashboard view.

7

New dashboard have been added for reference

8

This youtuber inspired me to build a tablet wall mount, now trying to replicate his layout. I have installed all components but somehow I am not getting a width screen view. Any thoughts on how to solve?

image
image1474×670 43.2 KB

I of course also need to fix several entities :wink:

Thanks!

9

When creating a dashboard, which view you are using?. I probably should mention that in the first post, you need to start the dashboard with 1card panel view, let me know if that solved the issue.

10

Okay, that might be it. But how do I do that? Don’t see that option anywhere when creating a new dashboard

image

11

not adding entirely new dashboard, if you add a view to a current dash board you will find in the setting tap down view type, choose panel (1 card)

image
image681×769 38.1 KB

12

Solved, thanks!

1 Like
13

Thank you for this dashboard, i like it, can you tell me how to adjust the footprint of the camera views, its like 2/3 of the square.

14

In the picture entity of the camera add the below line

aspect_ratio: 3:2

I’m guessing this wat you need, you can play with the ratio till you find the correct one for you

16

Sorry I was unable to check the post yesterday, is there anything I can help you with?

17

It’s ok,
I was just asking how you removed the side menu and then I found out theres a option to toggle it :grinning_face_with_smiling_eyes:

1 Like
18

I’m glad that you have found it! Happy automating :smile: