[Showcase] Sharing a Few Dashboard Sections!

[garoevans]

TTLock with IP restricted cloudflare tunnel
All Locked

Door Unlocking/Unlocked

Double click lock icon to unlock with a few custom styles added. 3 sub buttons on each separator, one for last state change, one for lock icon when locked (hidden on other states), one with additional info when state is not locked. Conditional style for the battery icon color. Precise width settings.

.bubble-sub-button-3 {
  background-color: red !important;
}
.bubble-icon {
  color: ${state > 70 ? 'green' : state < 30 ? 'red' : 'orange'} !important;
}

Full screen dashboard for docked Pixel 8 Pro

• House icon is person detection from a combination of security camera person detection (30 min motion detection to deactivate)
• Inside temp is average from 5 rointe radiators
• Target temp is average from 5 rointe radiators
• Office Temp card is target and actual for all radiators
• EV Charger connected triggers screenshot from security camera so I can see who's charging (via popup)
• Bottom right office card is UPS status (2hr runtime and 8% load)
• Spotify includes 3 cards - media, state, and slider to handle media, source, and volume independently - all with blurred media background image

Clicking the office temp icon triggers a popup:

• Mini graph used to track 24 hours temp and target (average) and outside temp (right axis)

In edit mode...

• Lock badge when the office door is unlocked
• Camera icon when I'm on a work call (triggered via MQTT with bash script from macbook when webcam active)

Using Caule Black Purple Theme with following alterations:

bubble-main-background-color: var(--ha-card-background)
state-sensor-background-color: var(--ha-card-background)
ha-card-border-radius: 32px
ha-card-border-width: 0px

Tweaks to EV Charger Colors:

ha-card {
  --bubble-main-background-color: ${hass.states['sensor.myenergi_zappi_unit_18_plug_status'].state === 'Charging' ? 'var(--accent-color)' : 'inherit'} !important;
}

.bubble-icon {
  color: ${hass.states['sensor.myenergi_zappi_unit_18_plug_status'].state === 'Charging' ? 'var(--accent-color)' : 'inherit'} !important;
}

Media/State/Slide Combo Styles:

/* Media card style */
.large .bubble-media-player-container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* State card style */
.large .bubble-button-card-container {
  border-radius: 0;
}
.bubble-button-background {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: 50% !important;
    filter: blur(50px);
    opacity: 0.5;
    background: url("${hass.hassUrl(hass.states['media_player.spotifyplus_garoevans'].attributes.entity_picture)}");
}

/* Slider card style */
.large .bubble-button-card-container, .bubble-range-slider {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.bubble-button-background {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: 50% !important;
    filter: blur(50px);
    opacity: 0.5;
    background: url("${hass.hassUrl(hass.states['media_player.spotifyplus_garoevans'].attributes.entity_picture)}");
}

Haven't managed to close the gaps between the media/state/slider cards. I'd like to do this to achieves 3 cards looking like one. Few other tweaks planned, but super happy with this!

[garoevans]

Fun update to the 3x media related cards:

/* media card */
.large .bubble-media-player-container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bubble-cover-background {
  filter: blur(0);
  background-position: 0 0px
}

/* state card */
.large .bubble-button-card-container {
  border-radius: 0;
  height: 264px;
}
.bubble-button-background {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover !important;
  background-position: 0 -56px !important;
  border-radius: 0;
  opacity: 0.5;
  background: url("${hass.hassUrl(hass.states['media_player.spotifyplus_garoevans'].attributes.entity_picture)}");
}
ha-card {
  margin-top: -8px;
}

/* slider card */
.large .bubble-button-card-container, .bubble-range-slider {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.bubble-button-background {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover !important;
  background-position: 0 -320px !important;
  opacity: 0.5;
  background: url("${hass.hassUrl(hass.states['media_player.spotifyplus_garoevans'].attributes.entity_picture)}");
}

[garoevans]

And a couple more tweaks, last post on this, just sharing...

3 card media player

door lock