Frameless wall mounted display
Introduction
Over the past few weeks, I finally finished my frameless wall display or wall mounted display project. A special requirement was that the attachment should not be visible.
I use a Galaxy Tab A from Samsung with 10.1 inch display. Here Habpanel runs in a webview within an Android app.
The app runs in a kind of a kios mode and thus prevents the e.g. that you can use the back button to exit the web app. In addition runs in the background a REST server to let openhab control the tablet display. It can turns on or off depending on whether one sleeps or has left the house.
Wall mounted Tablet
On the tablet itself, I stick two metal plates on the back and let in 2 magnets in the wall. In this way you can attach the tablet without a holder.
I took the mini USB plug from a Qi Charger, disconnected and connected with a second cable.
Parts list
- Galaxy Tab A
- Lingg & Janke 88003 Power supply with USB 5 V, 1 A
- kwmobile Qi Charger with Micro-USB
- Magnets
- Kaiser UP-Box 87x87x60mm
- 20cm USB cable (A to Mini-B)
Habpanel
Habpanel from the openHAB project is an Angular based web app. Due to the substructure, it can be flexibly extended and adapted. Due to the number of elements that are now registered with openHAB (~ 600), I had to make some adjustments. The normal “digest cycle” of Angular generates a CPU load of about 20 percent due to the concept of Habpanel on my tablet. Also, especially with complex dashboard, a noticeable delay from 1500ms to 2000ms was noticeable on the dashboard switch. Now it runs with about 2-3% CPU and a delay of max 500ms.
But now a few pictures
The habpanel ui is part of my deployment project and can be downloaded there. Alternatively, it can also be obtained directly from my Github Repository.
- https://github.com/HolgerHees/openhab-config/blob/master/habpanel.config
- https://github.com/HolgerHees/openhab-config/tree/master/conf/html/custom/habpanel
My “digest” optimizations described below are already included.
Optimizing the “digest cycle”
The biggest challenge is the Angular “digest cycle”. Before, none of the widgets knew what to actually show. With the result that after each item update the entire Habpanel UI went through a digest cycle and was refreshed. As a result, my tablet was running at almost 20% CPU load the whole time, consuming a lot of energy accordingly. In my configuration about 30-40 items are updated every minute with a total of about 500 items. On the main screen (first screen shot) only about 100 of them was displayed.
I solved it by completely skipping the digest cycle. All my widgets are implemented as custom directives. These turn off all Angular “watcher”. Instead, they register themselves for item updates. In addition, the directive overrides the “getItem” and “getItemState” methods. All other widgets that are within this custom directive will register theirself to this “root” directive.
During the first ItemUpdate process, the directive now forwards this event to all subwidgets and then collects all used items through their getItem, getItemState calls.
Updates will now be forwarded to the right widgets or updates for unused items will be completely ignored. My tablet now runs with 2-3% CPU and reacts to touch gestures much faster.
I was also trying to enable watchers temporary for some widgets when the right item was triggered. This works too but not so efficient. The digest cycle was fired in many additional unwanted situations which results in unnecessary widget updates. The only case where i want widget updates is, when items are new initialized or updatet. At the end I came up with my solution described above.
Another problem was a noticeable delay if I was going back to the complex main dashboard from any other dashboard. This was also solved by my digest cycle change. Before the delay was ~1500ms. Now it is max 500ms and feels smooth.