Showing off my HA setup on wall tablet

Share your Projects! Dashboards & Frontend
1

Just wanted to share my setup. I am no UX designer but I am proud of what I came up with using suggestions/examples from many others on here/youtube with a lot of Mushroom cards (@piitaya) and Bubblecards (@Cloos )

As explained in the video, my goal was to get the maximum amount of control with the least amount of clutter while still having all items accessible with just a tap or two.

I am using a Lenovo Tab M10 plus tablet with a 3d printed frame running Fully Kiosk Browser. HA is running on an older IBM mini tower. I’ve been working on my smart home for about 4 years now but just recently purchased the tablet to make things more accessible to wife/kid.

My lawn mower makes a cameo in the video too.

4 Likes
2

Great work, would you be willing to share your yaml for the security section? I’m interested in how you are getting the different data points to display/style based on state with the buttons and the bubble cards for the doors, garage.

Also curious, is the tablet by the front door, why do you have the front door there twice (once on all doors bubble card and once an individual card on the dashboard)?

thanks and great job!

3

@MattMakesItWork

So here is the code for one of the pop up card for the all doors. They are all template cards with code to say what icon and color to use based on door state.

First the all doors card:

image

type: custom:mushroom-template-card
primary: All doors
secondary: |-
  {% if is_state("input_boolean.all_doors_closed", "on") %}
        All closed

  {% elif is_state("input_boolean.all_doors_closed", "off") %}
        Some open
        
  {% endif %}
icon: |-
  {% if is_state("input_boolean.all_doors_closed", "on") %}
        mdi:door-closed-lock

  {% elif is_state("input_boolean.all_doors_closed", "off") %}
        mdi:door-open
        
  {% endif %}
entity: input_boolean.all_doors_closed
layout: vertical
badge_color: ''
icon_color: |-
  {% if is_state("input_boolean.all_doors_closed", "on") %}
        green

  {% elif is_state("input_boolean.all_doors_closed", "off") %}
        red
        
  {% endif %}
tap_action:
  action: navigate
  navigation_path: '#doorsclosed'
hold_action:
  action: none
double_tap_action:
  action: none
multiline_secondary: false
fill_container: true
layout_options:
  grid_columns: 1
  grid_rows: 2

Then the pop-up card it opens:

image

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#doorsclosed'
    button_type: name
    name: Door status
    bg_color: ''
    bg_opacity: '30'
    width_desktop: 500px
    show_header: true
    scrolling_effect: true
    show_icon: false
    show_name: true
    icon: mdi:garage-variant-lock
    margin: 7px
    card_layout: large
    bg_blur: '10'
  - type: custom:mushroom-template-card
    primary: Front
    secondary: |-
      {% if is_state("binary_sensor.open_close_front_door", "on") %}
            Open

      {% elif is_state("binary_sensor.open_close_front_door", "off") %}
            Closed
            
      {% endif %}
    icon: |-
      {% if is_state("binary_sensor.open_close_front_door", "on") %}
            mdi:door-open

      {% elif is_state("binary_sensor.open_close_front_door", "off") %}
            mdi:door-closed
            
      {% endif %}
    entity: binary_sensor.open_close_front_door
    layout: vertical
    badge_color: ''
    icon_color: |-
      {% if is_state("binary_sensor.open_close_front_door", "on") %}
            red

      {% elif is_state("binary_sensor.open_close_front_door", "off") %}
            green
            
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: |-
      {% if is_state("binary_sensor.open_close_garage_door", "on") %}
            open

      {% elif is_state("binary_sensor.open_close_garage_door", "off") %}
            Closed
            
      {% endif %}
    icon: |-
      {% if is_state("binary_sensor.open_close_garage_door", "on") %}
            mdi:door-open

      {% elif is_state("binary_sensor.open_close_garage_door", "off") %}
            mdi:door-closed
            
      {% endif %}
    entity: binary_sensor.open_close_garage_door
    layout: vertical
    badge_color: ''
    icon_color: |-
      {% if is_state("binary_sensor.open_close_garage_door", "on") %}
            red

      {% elif is_state("binary_sensor.open_close_garage_door", "off") %}
            green
            
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-template-card
    primary: Basement
    secondary: |-
      {% if is_state("binary_sensor.open_close_basement_door", "on") %}
            open

      {% elif is_state("binary_sensor.open_close_basement_door", "off") %}
            Closed
            
      {% endif %}
    icon: |-
      {% if is_state("binary_sensor.open_close_basement_door", "on") %}
            mdi:door-open

      {% elif is_state("binary_sensor.open_close_basement_door", "off") %}
            mdi:door-closed
            
      {% endif %}
    entity: binary_sensor.open_close_basement_door
    layout: vertical
    badge_color: ''
    icon_color: |-
      {% if is_state("binary_sensor.open_close_basement_door", "on") %}
            red

      {% elif is_state("binary_sensor.open_close_basement_door", "off") %}
            green
            
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    multiline_secondary: false
    fill_container: true

For your question, the all doors card is just a status of doors being open/closed. The separate front door card is just if the front door is locked or not. I could incorporate the lock into the all doors, front door section, but I wanted to keep it separate for now.

4

Thanks for sharing I appreciate it! I’m going to subscribe to your YouTube channel, keep up the awesome work!

5

Sorry, one more question. How are you setting/getting the input_boolean.all_doors_closed? I’m new to HA and don’t know what/where the input_booleans are and if I need to create/define them or not…

6

You have to create the input boolean in the ‘helpers’ section. What sets it is a check to see if all the open/close sensors on all the doors are on. I do all my automations (almost all) in node red. I don’t use HA automations. But if your new to HA, then node red is a whole nother animal. The same can be accomplished with an automation.

image

7

Wow, thanks for the quick response! I did a google and found out to to make an input boolean and set up some automations for the locks and I think I’ve got it now. Thanks so much!

8

How are u getting the google nest doorbell image to show that quickly mine always takes a while to load . Also the button press signal somethimes takes too long to reach home assistant . Was thinking off a way to keep the bell constantly active so it will go faster . How did u manage ?

9

@matti.vandenplas that is a still image in on the cameras page for the nest, not a live shot. I cant get a preview so I just took a screen capture

Once i tap on it, it takes about 5 seconds to get a live feed.

10

Dear Jim,

Thank you for sharing your security yaml code. i’ve been trying to get this to work
but I still can’t quite figure it out, would you (if you like), share your complete yaml code?