Okay, so when you dive all-in with home automation its hard to forget that most of the items you’re automating don’t have a physical switch or interface. That’s where a home automation wall tablet comes in. I’m going to walk you through the thought process and design of the tablet I’ve got in our home. It is Hubitat specific, but even if you use another automation hub it can give you some ideas hopefully.
The problem, and why I needed a home automation wall tablet
Okay, so when I went with my automation system I really went all-in. I hijacked my monitored security system, automated the HVAC, automated most of the lighting, and even automated guest and vacation modes. My integrations tie in to Alexa for announcements and weather alerts, Pushover to send mobile device notifications, and Node-RED to drive the complicated stuff on a Raspberry Pi. Physical devices are pretty much all linked to a Hubitat hub.
Now, I did think most of the lighting through. Physical switches still control all the lights. Same with the thermostats; I mean, you can’t really not have a thermostat. That being said, when I took over the alarm system, I lost the convenience of a physical keypad. In a way, its annoying. In a way, it opens up a whole world of awesomeness. Like, you are in total control of what you want displayed, how you want it displayed, and when you want it displayed. In many cases with a professionally installed alarm system you are very limited in the choice and customization of the keypad. Even with a Lyric control panel, I was very limited in both the devices I could pair and the integrations. So, I bailed and designed my own.
Hardware requirements
First up, if you haven’t glanced at the primer I’ve got on the site, consider doing so. It will give you a run down of the backend hardware I use to drive the automations. Many of the displays on the tablet tie in to the physical objects throughout the home in some way (as they should…).
So, the hardware:
- Any cheap tablet. Amazon Fire tablets are particularly popular for this application, but any tablet capable of running Fully Kiosk browser is fine. Fire tablets work well if you catch them on sale. You can root the tablet to remove the annoying Amazon crap, but if you catch one on sale the price offset makes up for spending $15 to remove ads.
- Wall-mount frame for your device. Konnected has a reasonably priced frame for many of the more commonly used tablets. Not a requirement, but it does make the end-product look nice.
- Optional: Power converter if you are installing in place of an existing wired alarm keypad. Again, Konnected has a converter for a reasonable price, but you can also get from Amazon. Be absolutely sure of the voltage; most alarm keypads have 12V DC power; this must be stepped down to 5V for most tablets to charge. Use a voltimeter if not sure or check the specs of your alarm system (they can usually be found on the door of the alarm system enclosure).
Software requirements are very lightweight; all that is needed is Fully Kiosk browser to run in priority mode. I use the free version, but the paid version also includes extra features. These include the ability to use the tablet camera to wake the panel on motion.
Home Automation Wall Tablet: Step by Step
Tablet Prep
First up is to get the tablet set up. Again, I picked up a cheap Fire 7 tablet and used this site to get started. In a nutshell, don’t connect to Amazon or register the tablet (if its an option). This removes the ads, but again, its also something you can pay to do on your Amazon account dashboard if you do register the device.
In a nutshell, you are going to side load the Google Play store and its dependencies. Once Google Play is installed, you will download and install Fully Kiosk. You can download the launcher hijacker, but I’ve found it does not work predictably, nor have I needed it.
Make your dashboard
Once your tablet is set up you can link the Fully Kiosk start page to your dashboard. The dashboard design obviously depends on the hub you use, but the step to get it displayed is the same. We’ll hit that in a minute. As for the dashboard, I use the built in dashboard app included with the Hubitat hub. Its got some drawbacks, but frankly with a little thought I find it more than adequate. The biggest upside: everything executes and displays locally. Internet down? No problem, everything still works that counts.
That being said, other options exist. Two of the more well-known options include Sharptools and ActionTiles. Both provide very nice looking dashboards and an array of integrations. The downside: you have to pay for many of the features that make the dashboards look good. I’m also turned off by the fact they are both cloud-based. No internet, no dashboard. I won’t dive into the very basics of dashboard creation, I’ll leave that to the Hubitat documentation and the community forum. I will go through some items that I found helpful to make my panel as useful as it is.
Dashboard Design
I’ll provide the basics for my dashboard thought process and design. If you use Hubitat, great. If not, I got many of my design ideas from seeing what other users made.
I wanted my main landing page to display the most commonly used information that I needed. It also needed to display what a normal alarm system panel would display. Like a security system keypad, I need to be able to see at a glance important information be able to act on that information.
Landing Page
The main page is the face of your panel. Whichever route you choose to go with your panel, your landing page should be informative and relatively simple. I’ve got mine divided up in a few sections based on what I use the most and the information I need (or want) to see.
- System status. This section includes both the security system status and the mode the hub is in. Both are buttons and can change the security system status or mode. Likewise, both require a PIN number to change, so no random Joe off the street can just walk in and disarm the system. Each tile is color coded, so I can see by the color exactly what state the security system is in and exactly what mode the hub is in.
- Location information. Driven by the fabulous Life360 with States app. I can quickly see where the better half is.
- Menu links to Zones and Smart Home controls. Zones are where you miss a dedicated security keypad. However, with a link to dedicated dashboards for my security zones, that’s not a problem.
- Local radar and weather conditions at a glance. Working on getting the tile color to change to red when a severe weather alert is present.
- Zone indicators for key alerts that you would normally find on a keypad. These include contact sensors, smoke/CO sensors, and any water sensors.
Grid Setup
First up is setting up the native Hubitat dashboard to work with the tablet you’ve got. For me this was a little trial and error, but the easiest way to do this is to allow Hubitat to auto-fit the columns. To do this, select the gear icon in your dashboard, move to options, and leave the column width and row height blank. Next, we’re going to use developer mode in the web browser.
Developer mode can give you a ballpark idea of how many columns and rows will fit on the tablet. If using Microsoft Edge hit F12 to enter developer mode. To change the size of the emulator, you can select a new mobile device on the top menu bar. Fire tablets are not an option, but you can get close with a Nexus. Play with the columns and rows until you get a fit that looks decent.
Custom CSS
Most of the tiles I’ve got on my landing page are straight from the built-in Hubitat dashboard options. However, I’ve made a few tweaks to some tiles that are a little more involved than just adding them in. Part of what I like about the Hubitat dashboard is the custom CSS option, which allows me to fine-tune tile elements. As an example, the default myTile used to display current weather conditions doesn’t fit particularly well on a Fire 7. To fix this, you can use custom CSS to scale it down. To do this in Hubitat, click the gear icon, Advanced options, then the CSS text. Here you can adjust many tile attributes with a little CSS coding. For example, I scaled down the myTile attributes with the following:
#tile-11 .tile-primary {
position: absolute;
left: 0%;
top: -10%;
transform: scale(0.7,0.7);
}
Another handy feature is tile overlay. My contact sensor tile actually consists of two tiles. First, the base contact sensor tile is a virtual contact sensor that shows open or closed based on the status of all my contact sensors. Second, a dashboard link tile overlays the contact sensor tile. This way, if a sensor is open as evidenced by the red color of the tile, I can tap it and go straight to the contact sensor dashboard to see which sensor is open. To do this, you have to set the transparency of that overlay tile to full transparency and hide the title text. Simple CSS:
#tile-17 .tile-title {
visibility: hidden;
}
#tile-17 .tile-primary {
visibility: hidden;
}
#tile-17 {
background-color: rgba(0,0,0,0);
}
The first two arguments hide the default text that Hubitat places on the tile. The last argument makes the tile fully transparent. A very brief primer is over on the community page if you want to explore further.
Backgrounds
Another nice aspect of designing your own wall panel is being able to display your own pictures. We travel a little, and I like my pictures. A fun place to display those pictures in on the wall panel. Hubitat makes this easy, and many other dashboard options have similar abilities. One item to note: don’t expect large photos to handle well. You want a responsive dashboard, and loading a 7-8MB photo will slow down the page load.
When selecting your photos, go with photos of 2MB or less. If needed, use a program like GIMP to scale down your image to make it reasonable. On the small screen of a wall tablet you will not notice any loss in picture quality. The other benefit, if using Hubitat, is that small photos can be uploaded to the hub’s local file storage for direct inclusion in the dashboard. If you don’t use or don’t have local hub storage, I find that Google Photos works well, but you have to create a public sharing link. Alternatively, if you have a local NAS with sharing capabilities, you can generate a link from there and not have to expose your photos to Google.
Load up Fully kiosk
Once the dashboards are designed and made to your liking, it’s time to load them up on the tablet. Start up Fully Kiosk and swipe from the left to open the menu. Choose settings and change the start URL to your dashboard page. If using Sharptools you will be given a simple web address you can use. Hubitat dashboards will load from the local LAN links. The easiest way to grab this link is to log in to your hub from the Fire tablet Silk browser, head over to the apps page and then your dashboard app. Open up the landing dashboard; select the “Local LAN Link to Dashboard” hyperlink. Once it opens, copy and paste the web address to the Fully start URL field.
Once you’ve got the start URL set up you can dig around in some of the other Fully functions to tweak how you would like the tablet to function. However, at this point when you start your tablet up and open Fully you should be directed straight to the dashboard.
Wall Mounting
While obviously not required, a logical next step would be to wall mount the tablet in place of the security keypad (or wherever you would like it). The image shown is an earlier iteration of my landing page, but the tablet fits flush to the wall and it utilizes the existing 12V wiring for the security keypad. A step down transformer is used to get it down to the 5V required by the tablet. Make sure you check the wiring diagram in the alarm system enclosure to determine the voltages coming to the keypad; if unsure use a voltmeter to check.
Another option, if a existing keypad is not present, is to jump off a nearby outlet or light switch if you are comfortable with a little electrical work. Kits are sold on Amazon that allow for a recessed outlet and most will fit behind the tablet frame and remain hidden.
Wrapping up
A few minor items that I’ve ran across over the last year or so:
- The Fire tablets tend to slow down a little the longer they are left on. Not over the course of a few days, but over the course of a few months. If you notice a performance hit, just restart the tablet.
- Amazon will occasionally force down an update if you registered the tablet; not usually an issue but it will sometimes kick Fully off and require you to restart the launcher.
- You can technically completely isolate the tablet from the Web if needed and you are running a local-only hub (i.e. Homeseer, Hubitat, Vera, etc.). The hub does all the dashboard processing, the tablet is only accessing the page created by the hub locally.
I’d recommend heading over to the Sharptools and Hubitat forums for more ideas and dashboard tips and tricks. Drop a comment if you have any questions.
Author: Zack
Pharmacist, tech guy, pianist, lover of beer, gamer, beach bum. Probably missed something. Just assume I'm into a little bit of everything.
No responses yet