Having fun with my dashboard

[Gubtug (Todd DeMelle)]

I’ve been playing around with my lovelace dashboard for a little while now, adding, removing, tweaking, slowly learning yaml and css and I wanted to share where it is today. I’m still pretty far down on the HA knowledge curve and there’s tons of stuff I want to continue to tweak and add, but it’s gotten to the point where it’s become something like what I’ve wanted it to be… a sort of dynamic, interactive window onto the world…

I’ve just managed to get css adjustments working using thomasloven’s card-mod, which opens up sooo much possibility. I think the next thing I’ll focus on is tightening the cards up further. There’s a lot of room to compress and consolidate and make room for more cool stuff!

[boheme61]

I love your clock/weather card, what “buttom-card” did you use for it ?

[Gubtug (Todd DeMelle)]

It’s a vertical stack with a couple twists. It’s got a couple instances of the weather-forecast card set up a little differently for current weather and weekly forecast, the animated weather icon theme and the custom digital clock card. The background pulls from the live cam at Gillette Stadium which is near me so it updates when the page loads and gives an appropriate weather/time of day b/g lined up across the three vertical cards.

type: vertical-stack
cards:
  - type: custom:digital-clock
    card_mod:
      style: |
        ha-card {
          color: #EFEFEF;
          min-height:100%;
          background:url(https://instacam.earthnetworks.com/instacamimg/FXBRG/FXBRG_l.jpg) rgba(50, 50, 50, .35);
          background-size: 100% 500%;
          background-repeat: no-repeat;
          background-position:top 0px right 0px;
          background-blend-mode: multiply;
        }
  - type: weather-forecast
    theme: Animated Weather Card
    entity: weather.openweathermap
    show_forecast: false
    card_mod:
      style: |
        ha-card {
          color: #EFEFEF;
          min-height:100%;
          background:url(https://instacam.earthnetworks.com/instacamimg/FXBRG/FXBRG_l.jpg) rgba(50, 50, 50, .35);
          background-size: 100% 250%;
          background-repeat: no-repeat;
          background-position:center -45px;
          background-blend-mode: multiply;
        }
  - type: weather-forecast
    theme: Animated Weather Card
    entity: weather.openweathermap
    show_current: false
    card_mod:
      style: |
        ha-card {
          color: #EFEFEF;
          min-height:100%;
          background:url(https://instacam.earthnetworks.com/instacamimg/FXBRG/FXBRG_l.jpg) rgba(50, 50, 50, .35);
          background-size: 100% 250%;
          background-repeat: no-repeat;
          background-position:bottom;
          background-blend-mode: multiply;
        }

[boheme61]

Nice, it was the background i was “after” … i have to weather “separated” also in vertical stack, with few entities in top, like to-days electricity-price etc. , but Clock in “Header-card”
… and was actually thinking of my “front-cam”, just didn’t knew you used cam, though is was a pic-background

[Gubtug (Todd DeMelle)]

oh cool… I’d like to do more with energy monitoring and electricity price would be a nice detail to get in there. The image is actually a static image… it’s a web cam at Gilette Stadium, but it’s not streaming. Most of the card b/gs are pulled from webcams, so they change every time the page loads. I do also have a few streaming videos on the page. A Boston Web Cam, a Live World Cam that steps through a bunch of international webcams, and the live feed from the ISS… and a couple security cams as well

[boheme61]

gee, doesn’t it use quit some resources ? , thou size “matters” here i guess, and ofcause if it’s a wifi/wired devices( im thinking of 4 of my streaming cams in HQ, is about the limit, in 1 view,… thou i guess those “live web cams” uses other “techniques” through al, resolution/compression etc

[Gubtug (Todd DeMelle)]

I was wondering if I was going to bump into bandwidth issues! So far it hasn’t been a problem. I’ve got a pretty good connection and I don’t normally leave the dashboard open and running if I’m doing something else bandwidth intensive. I guess I use it a little differently than a typical dedicated interface screen? Though sometimes I just have it up on the screen as my ‘command center’ b/g.

(the live cams are streams from youtube through an iframe card)

At one point I had a grid with 4 different boston webcams that worked pretty well, but it seemed a little gratuitious, so I dropped it back to one and put the four cam card on another tab.

[boheme61]

@Gubtug

(the live cams are streams from youtube through an iframe card)

Ok, yeah endless “options” here in HA … taking too much of “free” time if one can’t control " the addiction “factor”

PS: I got lots of good ideas here tonight, thx, i also “dropped” the 4 cam view, have it on a separate webserver instead, but definitely will try with 2 small-size(background-cards) in my “overview” … and see where i end

[Gubtug (Todd DeMelle)]

haha… yes, very true… although definitely not my worst vice

[vagamens (Kevin Clay)]

How did you set up the ISS map with the custom icon and path?

[Gubtug (Todd DeMelle)]

Here’s how I’ve got it setup in my dashboard…

after setting up the integration:

International Space Station (ISS)

as a lovelace card:

type: map
auto_fit: true
entities:
  - sensor.iss
dark_mode: true
hours_to_show: 1
aspect_ratio: 35%
default_zoom: 1
card_mod:
  style:
    ha-map $ div#map .leaflet-pane.leaflet-map-pane .leaflet-pane.leaflet-marker-pane:
      .leaflet-marker-icon:
        ha-entity-marker $: |
          .marker {
            border: none !important;
            background-color: transparent !important;
            height: 50px !important;
            width: 50px !important:
           }
    ha-map$: |
      .leaflet-control-attribution {
        visibility: hidden;
       }
      .leaflet-control-zoom {
        visibility: hidden;
       }

in configurations.yaml:

homeassistant:
  customize:
    sensor.iss:
      icon: mdi:space-station
      entity_picture: /local/ui/ISS.png

download the icon below [iss.png] and save to config/www/ui

[vagamens (Kevin Clay)]

I am working on getting this added to my home assist and appear to be a bit stuck.

When I add the customize part into my configurations.yaml, it tells me that there is no integration called ‘customize’. Is there something I need to download from HACS, or am I missing something?

[Gubtug (Todd DeMelle)]

yes, the yaml I posted was a little misleading. Here’s what it should look like in the configuration yaml…

homeassistant:
  customize:
    sensor.iss:
      icon: mdi:space-station
      entity_picture: /local/ui/ISS.png

[Louismassey]

Great Dashboard.
Would you mind sharing your code for the washing machine. (been looking for one like that.)

[Gubtug (Todd DeMelle)]

That’s this guy: GitHub - phrz/lg-washer-dryer-card: Lovelace cards for use with the Home Assistant LG ThinQ Integration
simulates the LG ThinQ washer display.

[Louismassey]

Finally got it working, a bit of a struggle as I am vey new to this.
Now just to figure out how to arrange my cards the way I want them as the + and - when editing the dashboard does not zoom to get it and shuffle them in weird way that never works out.
Thank you.