So happy with my new smart home panel! Here I share some photos

jolaca · October 19, 2019, 3:29pm

Hi all, I am very happy with the final look of my new smart home panel with home assistant. I want to thank @jaburges for his advises here: https://community.home-assistant.io/t/wall-panel-fire-8-hd-tablet-lovelace-cch-mqtt-alarm-and-video-doorbell-on-ring/133561 regarding a panel installation using an amazon fire HD 8 tablet with an adequate case.

I’ve been able to setup HA with custom lovelace cards using latest amazon firmware version and also latest version of full kiosc. I didn’t need to root the tablet and it’s running great. And the best thing: not a single wire visible!!
Here I share some photos of how it went:

vincen · October 19, 2019, 4:11pm

Thanks for the share, really nice and looks like a pro solution

lanealarson · October 19, 2019, 11:54pm

Very nice! One question. Are you using compact custom header? I’ve found it isn’t working for my Fire with Fully Kiosk.
If not, how are you making your header small like that?

fourtrax011 · October 20, 2019, 6:28am

It doesn’t work with the older Amazon fire tablets because the android webview is outdated but the newer ones that run android 7 do work with custom cards.

jolaca · October 20, 2019, 6:39am

Hi, indeed, at least in mine CCH and other custom cards are working fine. I bought the latest, 2018, amazon fire hd 8" and updated it to its latest firmware.

MarkR · October 20, 2019, 6:55am

Thanks for this… I bought a galaxy tab 3 to so this but once I stuck linageOS on it became so sluggish. Is this the Gen 7 or Gen 9 please? I am guessing 9

jolaca · October 20, 2019, 7:13am

Tha amazon fire hd 8 tablet is in its 8th generation, and to my knowledge this is the latest one for this model, @MarkR , though I might be wrong.

Glass · October 20, 2019, 10:53am

Hi, how did you get the 9 tiles in the second last image.
I cant my cards to display evenly on my fire hd 8 tablet.

thanks

jolaca · October 20, 2019, 4:42pm

Hi @Glass, take a look at the code below: it’s quite easy I’ve used the custom-button card with and array of 3 horizontal stack cards (with 3 buttons each) inside one unique vertical stack with the option of panel to true, thus you are making 3 rows of 3 elements each inside one single vertical column to be shown in the panel. Here it is the simple code:

- id: 9  # Automatically created id
    title: Domotica2
    icon: mdi:home-automation
    panel: true
    cards:
      - type: vertical-stack
        cards:
        - type: horizontal-stack
          cards:  
          - type: custom:button-card
            icon: mdi:sofa
            name: Salon
            tap_action:
              action: navigate
              navigation_path: /lovelace/2
          - type: custom:button-card
            name: Cocina
            icon: mdi:noodles
            tap_action:
              action: navigate
              navigation_path: /lovelace/3
          - type: custom:button-card
            icon: mdi:car-connected
            name: Garaje
            tap_action:
              action: navigate
              navigation_path: /lovelace/4
        - type: horizontal-stack
          cards:
          - type: custom:button-card
            name: Jardin
            icon: mdi:flower-tulip
            tap_action:
              action: navigate
              navigation_path: /lovelace/5
          - type: custom:button-card
            name: Cine
            icon: mdi:theater
            tap_action:
              action: navigate
              navigation_path: /lovelace/6
          - type: custom:button-card
            name: Habitación Principal
            icon: mdi:bed-empty
            tap_action:
              action: navigate
              navigation_path: /lovelace/7
        - type: horizontal-stack
          cards:
          - type: custom:button-card
            name: Habitación Patri
            icon: mdi:bed-empty
            tap_action:
              action: navigate
              navigation_path: /lovelace/7
          - type: custom:button-card
            name: Habitación Sara
            icon: mdi:bed-empty
            tap_action:
              action: navigate
              navigation_path: /lovelace/7
          - type: custom:button-card
            name: Buhardilla
            icon: mdi:home-roof
            tap_action:
              action: navigate
              navigation_path: /lovelace/7

Hope this helps!!

Glass · October 20, 2019, 5:09pm

Thanks Jorge, can you show me a screenshot of what that looks like if possible.

Thank you

jolaca · October 20, 2019, 5:37pm

Sure, here it is, this is the effect of that code, displayed by the panel:

I think you were asking for this, weren’t you??

Glass · October 20, 2019, 7:19pm

Ah right, its the code for that screenshot above, thank you very much this is exactly what i am after.

Will start to have a play about with mine.

cheers

swieprecht · October 20, 2019, 9:59pm

What you’ve done is amazing, I bet you’re well proud!

I’m now keen to try to do something similar, although stumbled at the first hurdle. I’ve copied the custom button card thing to my www folder, and referenced this in Rax Config. What do I do now to be able to use your code above?

I want to get it to look exactly like yours

jolaca · October 20, 2019, 11:07pm

Thanks, @swieprecht, if you already have the .js file in your www folder you just have to reference it at the beginning of your ui-lovelace.yaml, depending on your exact directory, something like this:

resources:
  - url: /local/custom_ui/button-card.js?v=2.0.5
    type: module

keep in mind that you have to use /local instead of /www.
Then just use the code I copied before for that view. Obviously, didn’t show it above but, after the resources, you should start with:

title: Your title
views:

Just as explained here: https://www.home-assistant.io/lovelace/yaml-mode/

Also remember checking your config and restart home assistant after doing any changes.

Yoinkz · October 21, 2019, 6:34pm

Nice… Really nice!!

One question: what is the second touch display for… The one below your fire tablet?

scubieman · October 21, 2019, 6:54pm

When I try to access home assistant using the app Fully kiosk browser but comes with nothing on the screen. any ideas?

jolaca · October 21, 2019, 8:12pm

Thanks @Yoinkz, the second touch display is the interior screen of a video intercom, this one:
https://www.fermax.com/intl/en/pro/products/video-door-entry-systems/kits/SF-2-video-entry-kits-individual-houses-1-or-2-ways-ter/KT-221-1w-video-wayfi-7-kit.html
For me it’s better than a door bell (like ring or nest hello), because it let’s you open the exterior door lock, from that screen or from the mobile wherever you are.

jolaca · October 22, 2019, 2:46pm

Hi @scubieman, I really don’t know why Fully kiosc browser doesn’t display HA in your setup, no idea why, sorry. Maybe, you’ve already seen it but, this youtube link is a video on how to setup Fully kiosc browser. Hope it helps.

levickij · October 22, 2019, 3:28pm

How are these mounted to the wall, are you able to provide web links to all the mounting components you have used to achieve this?

RetroTim · October 22, 2019, 7:01pm

That looks really nice. Thanks for sharing! This was exactly what I was looking for. I’m building a nice tablet interface right now.