Custom Touch UI for Tablets

Started working on a custom UI for wall-mounted tablets. Currently designed with the cheap Kindle Fire tablets in mind.

Based on the AdminLTE dashboard template. Some PHP on the backend and Vue.js on the frontend (I hate javascript…)

The code is an absolute spaghetti dumpster fire, but I’m planning to eventually post it up on Github after I get a little more done.

26 Likes

This is wonderful. I love HADashboard, but I’m a sucker for material design, and as I have been mounting Fire 7" around the house, this would be perfect.

Can’t wait for the code. Why not push it out now and have the community help clean it up.

I have an old android tablet laying around and would love to set it up. HADashboard is nice but needs a Pi and I figure it would end up bigger and clunkier looking than a pre built tablet.

1 Like

Mostly just want to put together a few more example screens and example components. I’d love for the community to clean it up, especially on the javascript side. Planning to get it up on Github either way this week.

Looks great! Did you have to modify a lot to get it looking this neat?

a Pi and I figure it would end up bigger and clunkier looking than a pre built tablet

That’s true - though there are some very well built, versatile options.

http://smarticase.com/products/smartipi-touch

I use this stand for my Dashboard & Pi combo, very happy with the results. It’s great at a desk, or wall-mounted.

Plus it can be run with an off-the-shelf powerbank battery you’d use to recharge a tablet or phone.

It comes with Lego bits too if you like, making it easy to add key hooks, dinosaurs, x-wings, and other essentials.

Looking forward to trying this one, and the new HADashboard on it.

1 Like

Looks nice!

It’s almost all base AdminLTE styles/images. Very minor modifications to the base styles

It’s still a massive trainwreck, but here it is: https://github.com/cgarwood/hatouch

Working on populating the Github Issues with todo tasks and plans/ideas.

I’m really bad at Javascript, so if there are any Javascript (and vue.js) gurus out there that want to help, that would be awesome.

3 Likes

Cool. Will try and load it up at the end of the day. Thanks again. Was thinking of putting a web server on the Android device itself. Makes it kind of nicely self contained.

Made some progress getting things converted to components and working with webpack. Won’t have time to work on too much the next couple of days, but there is some progress on getting the code more modular and clean so others can use it.

1 Like

This is awesome. I’ve got a couple Fire tablets laying around I’ve been wanting to setup as wall mounted interfaces for HA. This looks great!

how is the performance in comparison to the default web UI that is used? I love home assistant but my cheap tablets run the webui very poorly :frowning:

works great with phone (oneplus3) and laptop (macbook pro) but these 1gb quad care tablets are not liking it. Does your style run a little smoother on your fire tablet then the default Webui?

Haven’t really done any performance tests (no where near far enough along for that). The code is not at all optimized so I can’t imagine ti would be much (if any) faster.

Really looking forward to this as I have been kicking around the plan to create a customized dashboard for my wall mounted tablets. Keep us in the loop!

This looks sweet, clean and easy on the eyes.

Really nice! Not much fan of the AdminLTE UI but nonetheless thumbs up for the work. Was pleasantly surprised you are using Vuejs for this. Now I am motivated to create an UI myself with Vuejs.

Thanks for sharing the code.

I really like the design, so I’ve setup it in KLWP with tasker… (In my own language)

4 Likes

How did you realize the linking of ha & tasker/klwp?

Check my tutorials for that :wink:

2 Likes