Show off your favourite dashboard creations!

Share your Projects! Dashboards & Frontend
6

Love the use of the pictures, really makes it easy to know what each button is for!

1 Like
7

A few steps to create the greeting (stole it from someone else here of course!):

  1. Create an Input Select:
    frontend_greeting:
        name: Frontend Greeting
        options:
          - Good Morning
          - Good Afternoon
          - Good Evening
          - Good Night
  1. Create automations to set the state at different times. This checks every 5mins and updates, you could probably set it to trigger at the specific times to save CPU though:
- alias: Frontend Greeting
  trigger:
  - platform: time_pattern
    minutes: /5
  - platform: homeassistant
    event: start
  action:
    service: input_select.select_option
    data_template:
      entity_id: input_select.frontend_greeting
      option: "{% if (states.sensor.time.state > '22:00') and (states.sensor.time.state\
        \ < '06:00') %}\n  Good Night\n{% elif (states.sensor.time.state > '06:00')\
        \ and (states.sensor.time.state < '12:00') %}\n  Good Morning\n{% elif (states.sensor.time.state\
        \ > '12:00') and (states.sensor.time.state < '18:00') %}\n  Good Afternoon\n\
        {% elif (states.sensor.time.state > '18:00') and (states.sensor.time.state\
        \ < '21:59') %}\n  Good Evening\n{% endif %}\n"
  1. Use markdowns to display:
              - type: vertical-stack
#                view_layout:
#                  grid-area: header
                flex-grow: 2
                style: |
                  ha-card {
                    box-shadow: none;
                    border-style: hidden;
                    border-bottom-right-radius: 0px;
                    border-bottom-left-radius: 0px;
                  }
                cards:
                - type: markdown
                  style:
                    .: |
                      ha-card {
                         background-color: rgba(0,0,0,0) !important;
                         box-shadow: none;
                      }
                    ha-markdown:
                      $: |
                        ha-markdown-element:first-of-type h2 {
                          background-color: rgba(0,0,0,0);
                          color: var(--primary-color);
                          font-size: 18px;
                          line-height: 18px;
                        }
                        ha-markdown-element:first-of-type h3 {
                          background-color: rgba(0,0,0,0);
                          font-weight: normal;
                          color: var(--primary-text-color);
                          font-size: 12px;
                          line-height: 12px;
                        }
                        ha-markdown-element:second-of-type h3 {
                          background-color: rgba(0,0,0,0);
                          color: var(--primary-text-color);
                          font-weight: normal;
                          font-size: 12px;
                          line-height: 12px;
                        }
                  content: |
                      ## {{ states('input_select.frontend_greeting') }}, {{user}}
                      ### Today will be {{ states('sensor.dark_sky_daytime_high_temperature_1d') }}°C <br/> {{ states('sensor.dark_sky_summary_1d') }}
4 Likes
8

Amazing ! thank you will try and do it for myself and see how I get on :slight_smile: Thanks.

9

@benm7 So I tried to use your lovelace config and copy pasted your code in to the editor but it gives me error.

Do you know if it could be to do with formatting etc?

10

Hey Flipso, how did you create the EPG?

11

Hey Pedolsky, i used the Feedparser with a rss for live tv - mine is texxas, its not the best but a few channels work…
after getting the list i then feed everything in a markdown card where i had to manually add the logos

Greeting

1 Like
12

Thank you very much!

13

@benm7 could you please share your darksky config? I am trying to match it to make it work for me. Thanks.

14

wow @benm7 that looks amazing! What do you use for the room buttons (and how to you reveal the entities behind those?)

greetz

15

Im also looking for a substitute for darksky, anyone suggestions?

16

Great work!
Which custom card are the circle graphs from?

17

Great work man. I am interested in the code for your tracking of you and your wife. I am trying to accomplish something like that myself. Thanks ahead of time

18

Just a range of different custom button cards with custom fields depending on my needs eg. temperature only, temperature + colour code for certain appliances/devices.

I use popup cards through card-mod to show everything within that room.

19

Its from Apex Charts: ApexCharts card - A highly customizable graph card

The type is radial bar

1 Like
20

how do you show the weather icon in a markdown?

2 Likes
21

Interested in this aswell… :slight_smile:

22

The icon isn’t actually in the markdown, it’s a separate button card for the icon.

You can embed specific icons in markdown (can send code if you want this) but I have chosen to replicate most markdowns as button cards as it gives much more flexibility.

23

image
So this is a 2 button or a 3 button area?

24

It’s a layout card in columns with a button (weather icon) then a markdown (all the weather words) then another area for four alert buttons when doors are open, lights are on, leaks in bathroom, or garbage needs to be taken out.

image
image1125×274 103 KB

Will upload full yaml to GitHub tonight :slight_smile:

4 Likes
25

Here is the full code for the greeting.

I add this to the top of every view so it appears at the top of each one consistently. Example of. main screen below:

title: Home
path: home
icon: mdi:home-variant
background: var(--background-image)
popup_cards:
  !include ../popup-cards/main-popup-card.yaml
cards:
  - type: vertical-stack
    cards:
      - !include '../custom_header/greeting2.yaml'
4 Likes