DinoTech's Tablet Designs[video-UPDATE-04.27.2020!]

Share your Projects! Dashboards & Frontend
1

Link to new post: New mobile posts click here

I began using Lovelace UI in Dec '18, and have been inspired from viewing others designs. Some themes, screens and links throughout this post. If there is any code you would like or just need some help, please post as I check thread frequently. Hope these inspire others as I have been. Thanks!

My Latest designs & Repo (link to bottom) have been focused on the use of ‘popups’ and semi-transparent cards so the tablet can display photos or wallpaper and blend in the surroundings at home better.

1122
11221280×800 361 KB

image
image1280×800 363 KB

Screenshot_20190520-013039
Screenshot_20190520-0130391440×2880 1.09 MB
Screenshot_20190517-173251
Screenshot_20190517-1732511440×2880 697 KB

Screenshot_20190606-034257
Screenshot_20190606-0342571440×2880 844 KB
Screenshot_20190606-034548
Screenshot_20190606-0345481440×2880 994 KB

Screenshot_20190520-012856
Screenshot_20190520-0128561440×2880 919 KB
Screenshot_20190517-173912
Screenshot_20190517-1739121440×2880 1.01 MB

new1
new11280×800 295 KB

screen4
screen41280×800 472 KB

116
1161280×800 314 KB

01
011280×800 334 KB

new2
new21360×768 445 KB
new3
new31360×768 452 KB
new8
new81360×768 328 KB
new9
new91360×768 476 KB
weather1
weather11360×768 399 KB

Screenshot_20181227-025508
Screenshot_20181227-0255081440×2880 629 KB
Screenshot_20181227-025525
Screenshot_20181227-0255251440×2880 863 KB

topview

20 Likes
2

wow, that is awesome man!!! I’m just getting into HA and adding devices to my regular HA UI… your Lovelace boards look great! I hope to have cool ones like yours soon! :slight_smile:

1 Like
3

did you start with a LL theme and tweak it (to get the rounded corners and the brushed metal look? and would you mind sharing what cameras you use, that are integrated so awesomely above?

4

I had to make my own themes for the cards and views and used @thomasloven https://github.com/thomasloven/lovelace-card-modder on all the cards. The brushed stainless is inserted as backgrounds on the cards and different ones for the wallpaper on the views.
The cameras are WYZE cams($20.00). After I clean up the breaking changes from next release, I’ll post links here. Thanks!

3 Likes
5

oh sweet!! I didn’t think the $20 wyze cams worked well with HA, VERY interested in how you got that working! :slight_smile: . thx again!

6

How did you get the wyze cameras to work with HA?

Awesome themes, can you share a git for them? :slight_smile:

7

TinyCam App Pro version, ran on an Android tablet(my wall alarm panel). Runs a local server and outputs feeds via http for HA to pick up. It’s been awhile since I installed, but I Googled HA/Wyze cams and read through the feeds to find it. Easier to do than explain, honestly, I was surprised. I had my Wyze cams for a bit before I stumbled across the fix.
After I clean up the breaking changes from next release, I’ll post links here. Thanks! Let me know if you can’t find it and I’ll try to find the links for threads. App is on Google Play

1 Like
8

Here is my Dark-Nightz theme. Use this one the most, but every view I use a different theme, to keep it interesting. https://pastebin.com/ETqQCRD8

9

Great work, waiting for your sharing in github.

1 Like
10

Here is everything for the Weather_view:

  - url: /local/custom-lovelace/card-modder.js
    type: js
  - url: /local/custom-lovelace/mini-graph-card-bundle.js?v=0.0.8
    type: js
  - url: /local/custom-lovelace/weather-card.js
    type: js
##############################################
```  - id: 6  # Automatically created id
    title: radar_view
    theme: Clear-Nightz
    background: center / cover no-repeat url("/local/backgroundz/LightMountain.jpg") fixed #weather #sky-colors #space1.jpg
    icon: mdi:radar
    cards:
      - type: custom:card-modder
#        report_size: 7
        style:
          background-color: rgba(0,0,0,0.3) #374873
          background-size: 100% 100%
          border-radius: 20px
          border: solid 1px rgba(100,100,100,0.3)
#          color: rgb(51, 51, 255)
          box-shadow: 3px 3px rgba(0,0,0,0.6)
        card:
          type: entities
          entities:
            - sensor.dark_sky_summary
            - sensor.dark_sky_minutely_summary
            - sensor.dark_sky_hourly_summary
            - sensor.dark_sky_daily_summary
            - sensor.dark_sky_temperature
            - sensor.dark_sky_apparent_temperature
            - sensor.dark_sky_daytime_high_temperature_0
            - sensor.dark_sky_overnight_low_temperature_0
            - sensor.dark_sky_precip_intensity
            - sensor.dark_sky_precip_probability
            - sensor.dark_sky_humidity
            - sensor.dark_sky_dew_point
            - sensor.dark_sky_pressure
            - sensor.dark_sky_wind_speed
      - type: custom:vertical-stack-in-card #####
        cards:
          - type: custom:bignumber-card
#            title: Humidity
            entity: sensor.time #dark_sky_humidity
            scale: 40px
          - type: 'custom:custom-weather-animated'
            entity: input_boolean.weather
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
#                  background-image: url("/local/sky_horizon1.jpg")
#                  background-repeat: no-repeat
                  background-color: rgba(0,0,0,0.0)
                  background-size: 100% 100%
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  color: rgb(242, 242, 242)
                  box-shadow: 3px 3px rgba(0,0,0,0.6)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_temperature
                  name: Temperature
                  height: 150
                  hide_icon: true
                  line_color: '#f2f2f2' #'#00004d'
                  line_width: 8
                  font_size: 100
              - type: custom:card-modder
                style:
#                  background-image: url("/local/sky_horizon2.jpg")
#                  background-repeat: no-repeat
                  background-color: rgba(0,0,0,0.0)
                  background-size: 100% 100%
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  color: rgb(242, 242, 242)
                  box-shadow: 3px 3px rgba(0,0,0,0.6)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_apparent_temperature
                  name: Feels like
                  height: 150
                  hide_icon: true
                  line_color: '#f2f2f2' #'#800080'
                  line_width: 8
                  font_size: 100
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
#                  background-image: url("/local/drops.jpg")
#                  background-repeat: no-repeat
                  background-color: rgba(0,0,0,0.0)
                  background-size: 100% 100%
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  color: rgb(26, 255, 26)
                  box-shadow: 3px 3px rgba(0,0,0,0.6)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_humidity
                  name: Humidity
                  height: 150
                  hide_icon: true
                  line_color: '#1aff1a' # '#e74c3c'
                  line_width: 8
                  font_size: 70
              - type: custom:card-modder
                style:
#                  background-image: url("/local/drops.jpg")
#                  background-repeat: no-repeat
                  background-color: rgba(0,0,0,0.0)
                  background-size: 100% 100%
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  color: rgb(255, 176, 49)
                  box-shadow: 3px 3px rgba(0,0,0,0.6)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_wind_speed
                  name: Wind #Speed
                  height: 150
                  hide_icon: true
                  line_color: '#ffb031'
                  line_width: 8
                  font_size: 70
              - type: custom:card-modder
                style:
#                  background-image: url("/local/drops.jpg")
#                  background-repeat: no-repeat
                  background-color: rgba(0,0,0,0.0)
                  background-size: 100% 100%
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  color: rgb(255, 245, 20)
                  box-shadow: 3px 3px rgba(0,0,0,0.6)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_dew_point
                  name: Dew Point
                  height: 150
                  hide_icon: true
                  line_color: '#fff514' # '#e74c3c'
                  line_width: 8
                  font_size: 70
#
      - type: custom:card-modder
#        report_size: 7
        style:
          border-radius: 20px
          border: solid 1px rgba(100,100,100,0.3)
          box-shadow: 3px 3px rgba(0,0,0,0.6)
        card:
          type: iframe
          url: https://embed.windy.com/embed2.html
          aspect_ratio: 81%
      - type: custom:card-modder
#        report_size: 7
        style:
          border-radius: 20px
          border: solid 1px rgba(100,100,100,0.3)
          box-shadow: 3px 3px rgba(0,0,0,0.6)
        card:
          type: iframe
          url: https://embed.windy.com/embed2.html
          aspect_ratio: 80%```
1 Like
11

My Clear-Nightz theme[ updated code] to Clear-Nightz-II:

    Clear-Nightz-II:
    # Main colors that can be changed
      dark-primary-color: "#63636b"
      disabled-text-color: "#babac4"
      light-primary-color: "#a2a2a9"
      paper-card-background-color: "rgba(0,0,0,0.0)"
      paper-grey-200: "#acacb9"
      paper-item-icon-color: "#c8c8d0"
      paper-listbox-background-color: "#0b0e0f"
      primary-background-color: "#060606"
      primary-color: "#0b0e0f"
      primary-text-color: "#f2f2f2"
      secondary-text-color: "#d6d6dc"
      text-primary-color: "#f2f2f2"
      secondary-background-color: "rgba(0,0,0,0.0)"
      sidebar-text_-_background: "#66757f"
    # Colors based on variables, see above
      paper-card-header-color: "var(--paper-item-icon-color)"
      paper-item-icon-active-color: "#e4da00"
      paper-item-icon_-_color: "var(--primary-text-color)"
      paper-listbox-color: "var(--primary-text-color)"
      paper-grey-50: "var(--primary-text-color)"
      paper-slider-active-color: "var(--primary-color)"
      paper-slider-knob-color: "var(--primary-color)"
      paper-slider-knob-start-color: "var(--primary-color)"
      paper-slider-pin-color: "var(--primary-color)"
      paper-slider-secondary-color: "var(--light-primary-color)"
      paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-button-color: "#e4da00"
      paper-toggle-button-unchecked-button-color: "var(--paper-item-icon-color)" #"#acacb9"
      paper-toggle-button-checked-bar-color: "var(--paper-item-icon-color)"
      paper-toggle-button-unchecked-bar-color: "var(--paper-item-icon-color)"
      table-row-background-color: transparant
      table-row-alternative-background-color: transparant
      sidebar-icon-color: "#838395"
      sidebar-text-color: "#F1F1F1"
      sidebar-selected-background-color: "var(--primary-background-color)"
      sidebar-selected-icon-color: "#b3b3b3"
      sidebar-selected-text-color: "var(--sidebar-selected-icon-color)"
      divider-color: "rgba(255, 255, 255, 0.12)" #rgba(255, 255, 255, 0.12)
      dark-divider-opacity: '0'
      light-divider-opacity: '0'
      shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsla(0, 0%, 0%, 0.0)'
      shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsla(0, 0%, 0%, 0.0)'
      paper-font-headline_-_letter-spacing: '-0.5px'
      paper-font-headline_-_font-weight: '500'
      paper-font-body1_-_font-weight: '500'
      label-badge-red: 'hsla(0, 0%, 0%, 0)'
      label-badge-border-color: 'var(--label-badge-red)'
      label-badge-background-color: 'var(--paper-card-background-color)'
      label-badge-text-color: 'var(--primary-text-color)'
      primary-font-family: "Verdana"
      paper-font-common-base_-_font-family: "var(--primary-font-family)"
      paper-font-common-code_-_font-family: "var(--primary-font-family)"
      paper-font-body1_-_font-family: "var(--primary-font-family)"
      paper-font-subhead_-_font-family: "var(--primary-font-family)"
      paper-font-headline_-_font-family: "var(--primary-font-family)"
      paper-font-caption_-_font-family: "var(--primary-font-family)"
      paper-font-title_-_font-family: "var(--primary-font-family)"
1 Like
12

Please enjoy and let me know what you like to see more of, or different. Thanks!

13

Purple-Haze theme:

    Purple-Haze:
      primary-color: "#9900ff"
      primary-background-color: "#060606"
      secondary-background-color: "#060606"
      paper-card-background-color: "#131313"
      paper-item-icon-color: "#9900ff"
      primary-text-color: "#FFFFFF"
      secondary-text-color: "#ac00e6"
      text-primary-color: "#FFFFFF"
      disabled-text-color: "rgba(255, 255, 255, 0.5)"
      divider-color: "rgba(255, 255, 255, 0.12)"
      paper-card-header-color: "#FFFFFF"
      paper-listbox-background-color: "#131313"
      paper-listbox-color: "#FFFFFF"
      paper-grey-200: "#660066"
      paper-toggle-button-checked-ink-color: "#d80129"
      paper-toggle-button-checked-button-color: "#9900ff"
      paper-toggle-button-checked-bar-color: "#FFFFFF"
      paper-slider-knob-color: "#9900ff"
      paper-slider-knob-start-color: "#9900ff"
      paper-slider-pin-color: "#9900ff"
      paper-slider-active-color: "#9900ff"
      paper-slider-secondary-color: "#9900ff"
      table-row-background-color: transparant
      table-row-alternative-background-color: transparant
14

What are you using for your weather radar? I actually really like that look versus anything that I had found that was usable within HA

15

That’s an iframe card with windy.com inside.

1 Like
16 
          type: iframe
          url: https://embed.windy.com/embed2.html
          aspect_ratio: 78%```
17

Started next view design:

next%20up
next%20up1360×443 130 KB

5 Likes
18

Thats peng can you please share that ?
Thanks

1 Like
20

Designed to use with multiple backgrounds, plenty left to do, but a good base…

new12
new121360×768 298 KB
purp
purp1360×768 306 KB

    title: new_security_view
    theme: Clear-Nightz
    background: center / cover no-repeat url("/local/backgroundz/tooobig.png") fixed
    icon: mdi:security-home
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 10px
                  border: solid 1.5px rgba(0,153,255,1.3)  # (0,153,255,1.1) purple border
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_temperature
                  name: Outside Temperature
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 64
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 10px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.office_smoke_temp
                  name: Office Temperature
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 64
          - type: custom:card-modder
            report_size: 1
            style:
              background-color: rgba(0,0,0,0.35)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px rgba(128, 128, 128,0.2)
            card:
              type: entities
              entities:
                - type: custom:mini-media-player
                  entity: media_player.office_google
                  name: Office Google Home
                  artwork: full-cover-fit
                  hide_icon: true
                  power_color: true
                  hide_volume: true
                  show_progress: true
          - type: markdown
            content: >
              ##
              *Motion Sensors*
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.front_motion
                name: Porch
              - type: entity-button
                entity: binary_sensor.back_motion
                name: Patio
              - type: entity-button
                entity: binary_sensor.bathroom_motion
                name: Bath
              - type: entity-button
                entity: binary_sensor.office_motion
                name: Office
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.old_office_motion
                name: Office
              - type: entity-button
                entity: binary_sensor.entry_hall_motion
                name: Entry
              - type: entity-button
                entity: binary_sensor.hallway_motion
                name: Hallway
              - type: entity-button
                entity: binary_sensor.bedroom_motion
                name: Master
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.living_room_motion
                name: Family
              - type: entity-button
                entity: binary_sensor.movement
                name: Kiosk
              - type: entity-button
                entity: binary_sensor.face_detected
                name: Face
              - type: entity-button
                entity: binary_sensor.mbath_glass_break
                name: Glass
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.garage_cam
                  name: "Garage"
                  show_state: false
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.kitchen_cam
                  name: "Kitchen"
                  show_state: false
## column 2
      - type: vertical-stack
        cards:
          - type: custom:card-modder
            style:
              background-color: rgba(0,0,0,0.35)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px 3px 3px rgba(128, 128, 128,0.2)
              color: rgb(0,153,255)
            card:
              type: custom:bignumber-card
              entity: sensor.time
              scale: 16px
          - type: custom:alarm_control_panel-card
            entity: alarm_control_panel.ha_alarm
            show_keypad: true
            display_letters: true
            scale: 13px
            title: New Life Security
            style: '--alarm-color-disarmed: var(--label-badge-blue);' #rgb(153, 0, 255) purple
            states:
              - arm_home
              - arm_away
            labels:
              ui.card.alarm_control_panel.code: ~   Access Code Required  ~
              state.alarm_control_panel.arm_away: Away!!
          - type: custom:card-modder
            report_size: 1
            style:
              background-color: rgba(0,0,0,0.3)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px 3px 3px rgba(128, 128, 128,0.2)
            card:
              type: glance
#              title: Smoke Detectors
#              show_state: false
              entities:
                - entity: sensor.hallway_nest_protect_smoke_status
                  name: Hallway
                - entity: sensor.kitchen_nest_protect_smoke_status
                  name: Kitchen
                - entity: binary_sensor.laundry_smoke_detected
                  name: Laundry
                - entity: binary_sensor.office_smoke_detected
                  name: Office
                - entity: binary_sensor.garage_smoke_detected
                  name: Garage
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: switch.office_desk_lamp
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: switch.desk_back_light
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: light.corner_light
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: light.bed_light
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
## column 3
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 12px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.realistic_humidity
                  name: Office Humidity
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 65
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 12px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_humidity
                  name: Outside Humidity
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 65
          - type: custom:card-modder
            report_size: 1
            style:
              background-color: rgba(0,0,0,0.35)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px rgba(128, 128, 128,0.2)
            card:
              type: entities
              entities:
                - type: custom:mini-media-player
                  entity: media_player.spotify
                  name: Spotify Player
                  artwork: full-cover-fit
                  power_color: true
                  idle_view: true
                  show_progress: true
                  volume_stateless: true
          - type: markdown
            content: >
              ##
              _Door and Window Sensors_
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.front_door
                name: Front
              - type: entity-button
                entity: binary_sensor.side_door_k
                name: Side
              - type: entity-button
                entity: binary_sensor.back_door_k
                name: Back
              - type: entity-button
                entity: binary_sensor.garage_entry_door_k
                name: Garage
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.den_windows
                name: Family
              - type: entity-button
                entity: binary_sensor.garage_windows
                name: Garage
              - type: entity-button
                entity: binary_sensor.office_windows
                name: Office
              - type: entity-button
                entity: binary_sensor.mbdrm_windows
                name: Master
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.mbdrm_windows
                name: Master
              - type: entity-button
                entity: binary_sensor.tristans_window
                name: Bed
              - type: entity-button
                entity: binary_sensor.kitchen_bay_windows
                name: Bay
              - type: entity-button
                entity: binary_sensor.kitchen_sink_windows
                name: Sink
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.front_door
                  name: "Front Door"
                  show_state: false
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.entry_hall
                  name: "Enrty Hall"
                  show_state: false
1 Like
21

Restyled view slightly and updated code…

new11
new111360×768 352 KB

2 Likes