Share your Tablet/Desktop Dashboards

Hi i’ve just tried this again and same results i don’t think the issue i’m having is with the decluttering.
As i said before i don’t use the Lovelace UI yaml i do it all in the UI with the raw configuration and i’ve just read that the raw configuration editor doesn’t support !include so i’m unable to add it.
I’m going to read up on how i can change over to the yaml file without anything messing up as i don’t want to start again.
Thanks

Hi,

Stunned by the animated floorplan for your tablet. Very Curious on how (or with what) did you created that?

This is mine :slight_smile:

1 Like

Hello Ben!
Congratulations for your nice lovelace view!

Can I ask you to share this part?

1 Like

I apologise, I have actually deleted this and am now using the sidebar component instead :frowning: I use a similar style to the above for my mobile version though. Below is the code for that, which you should be able to modify to get close to the above.

                  - type: custom:button-card
                    entity: sensor.dark_sky_summary
                    color_type: card
                    size: 50%
                    lock: false
                    show_name: false
                    show_state: false
                    show_label: false
                    show_icon: true
                    show_entity_picture: false
                    tap_action:
                      action: more-info
                      haptic: success
                    aspect_ratio: 1/1
                    margin-right: 60px
                    styles:
                      card:
                        - border-radius: 100%
                        - border-style: hidden
                        - padding: 0px
                        - box-shadow: none
                      icon:
                        - color: var(--primary-color)
                    state:
                      - value: "Mostly Cloudy"
                        color: 'rgb(116,115,115)'
                      - value: "Partly Cloudy"
                        color: 'rgb(189,213,225)'
                      - value: "Sunny"
                        color: 'rgb(255,247,162)'
                      - value: "Overcast"
                        color: 'rgb(114,131,166)'
                      - value: "Possible Light Rain"
                        color: 'rgb(105,139,208)'
                      - value: "Light Rain"
                        color: 'rgb(105,139,208)'
                      - value: "Rain"
                        color: 'rgb(118,131,156)'
                      - value: "Possible Drizzle"
                        color: 'rgb(105,139,208)'
                      - value: "Clear"
                        color: 'rgb(114,186,218)'
                      - value: "Windy"
                        color: 'rgb(108,133,171)'
              - type: vertical-stack
                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: var(--primary--color) !important;
                         box-shadow: none;
                      }
                    ha-markdown:
                      $: |
                        ha-markdown-element:first-of-type h2 {
                          background-color: var(--primary-color);
                          color: var(--primary-background-color);
                          font-size: 18px;
                          line-height: 18px;
                        }
                        ha-markdown-element:first-of-type h3 {
                          background-color: var(--primary-color);
                          font-weight: normal;
                          color: var(--primary-background-color);
                          font-size: 12px;
                          line-height: 12px;
                        }
                        ha-markdown-element:second-of-type h3 {
                          background-color: var(--primary-color);
                          color: var(--primary-background-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') }}
1 Like

Mobile version looks like this:

image

2 Likes

Here is my dashboard in my daughter’s room. Not a Lovelace dashboard (it is floorplan) and not my main driver, but could be fun to look at:

Clicking on Elsa will make the room cooler, Anna = warmer, Kristoff with guitar = turn on sleep music, Olaf with candle = turn on the lights, Swen’s antlers = clock.

16 Likes

Hi @abattio

That looks cool. Are you using a Lovelace picture card, or HA Floorplan (SVG file)?

Hello,
Two weeks in to Home Assitant. I have already rebuilt my UI 100 times :rofl:. But i think i am finally happy, for now… Nothing fancy, just a clean look :slight_smile:

I have modified the Caule Dark Grey alot. Using card-mod way to much instead of just changeing in the theme-file.

I am most pleased with my spotify player. I am using spotcast and mini media player with shortcuts so i can start my chromecast devies directly from mini media player.

2 Likes

Well here is mine for the Rooms :slight_smile:

9 Likes

I liked your propane tank card. Can you post the icon you used? Also what are you using to track the tanks amount? I have a tank but the company put a wireless tracker on it but I have access to the data. Just curious how you did that card and setup.

This weekend I have been busy with creating a new dashboard. primary goal was making it work with a samsung Tab A7 10.4inch and an iPad.

This is the result…

I have used a mix of cards

  • custom: thermostat-dark-card
  • picture-elements
  • horizontal-stack
  • custom: button-card

The custom: button-card is amazing as I have setup all the buttons and sensors with it
configured with almost all options combined.

If you want a sample of the script, let me know and I will send you one.

6 Likes

What is it that you use to measure the power usage on each fase group?

Hi Vasco,

I use a Shelly 3EM for that, works perfect.

My son wanted his own SpaceX themed dashboard for the tab I mounted on his wall.
The basics are done. Now to populate with the things he wants it will require some css and js magic :grin:

UPDATE!

Here is some video of the almost final product. Special note. The planets in the backgrond are fully CSS code. :grin:

4 Likes

This is mine actually … made for 8" Tablet and very minimalist

10 Likes

Nice work.
Are you using the sidebar integration from hacs for your sidebar or something different ?
I’m trying to get a decent sidebar working on mine.

Really good job!
Are you able to share your Lovelace code?

Thx a lot.
I am using this sidebar from hacs

1 Like

Thank you … and here it is

3 Likes