Fridge-mounted display

tshort

This not-a-mirror is a nabi Big Tab 20" Android tablet that I mounted to my refrigerator. I got the tablet for $150. Unfortunately, it looks like it’s discontinued (link). The tablet was designed for kids, but it works great for this application. The tablet has a frame around it with holes. That makes it easy to mount to the refrigerator with sheet metal screws.

My setup uses MMM-ProfileSwitcher and MMM-TouchNavigation. The main parts include:

home – This shows the clock, weather, a kitchen timer, a calendar, and a slideshow on the right. The slideshow is an IFrame that connects to ZenPhoto running on a server. Because it’s a full-featured photo CMS, you can run different slideshows and search based on keyword or date.
food – Contains more timers and an IFrame pointing to allrecipes.com.
weather – More weather details on the left with MMM-WunderGround and an IFrame pointing to a wunderground page.

I use MagicMirror in server mode running on a server. To set up the tablet, I rooted it with KingoRoot and installed the full!screen app. That works great to fill the whole screen. Firefox is the best browser for this. You can adjust the DPI to match desktop, and you can nudge it to hide the top bar. With the full!screen app, you can still go to the home screen easily, so it’s pretty easy to jump to other Android apps.

Here’s the kitchen timer module I made to go with this:

https://github.com/tshort/MMM-KitchenTimer

Overall, I like the way it turned out. I still need to decorate it to better to hide the cord and protect it from the fridge door hitting the wall on the side. Some other features would be nice:

Alexa integration – I have an Echo Dot in the room. It’d be nice to be able to show the song being played or the status of the current timer. I tried putting alexa.amazon.com in an IFrame, but that didn’t work.
Alternatives to pictures – We’ll probably get tired of family pictures, so I’ll have to look for other options (nature scenes, comics, etc.).

The main glitch I’ve run into is that sometimes the tablet won’t stay asleep. I haven’t figured out what keeps waking it up. It’ll go long stretches where it’s fine then it 'll have times where it won’t sleep for more than five seconds.

shashank

@tshort hi, i am interested in this Fridge display in Kitchen, can you please provide the config file of the modules you have used

shashank

@tshort hi, how to run kitchen timer on non-touch screen

yawns

@shashank
It is a tablet, hence it allows touch

tshort

@shashank here’s my config.js:

https://gist.github.com/tshort/3b17983003f3fe6eb94987707052e307

Note that you’ll have to fill in keys for the weather links.

I did need to modify MagicMirror code to be able to use the MMM-ProfileSwitcher like tabs. Here’s an issue I filed on it (closed with not-fixed as this usage isn’t supported):

https://github.com/MichMich/MagicMirror/issues/889

Here are the changes I made to get around that problem:

diff --git a/js/main.js b/js/main.js
index 6aa313a..1ece53d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -191,7 +191,9 @@ var MM = (function() {
                if (moduleWrapper !== null) {
                        moduleWrapper.style.transition = "opacity " + speed / 1000 + "s";
                        moduleWrapper.style.opacity = 0;
-                       moduleWrapper.style.cssText = "z-index: -99";
+                       moduleWrapper.style.position = "absolute";
+                       moduleWrapper.style.left = "-9000px";
+                       // moduleWrapper.style.cssText = "z-index: -99";

                        clearTimeout(module.showHideTimer);
                        module.showHideTimer = setTimeout(function() {
@@ -199,7 +201,9 @@ var MM = (function() {
                                // since it's fade out anyway, we can see it lay above or
                                // below other modules. This works way better than adjusting
                                // the .display property.
-                               moduleWrapper.style.position = "fixed";
+                               // moduleWrapper.style.position = "fixed";
+                       // moduleWrapper.style.position = "absolute";
+                       // moduleWrapper.style.left = "-1000px";

                                updateWrapperStates();

@@ -252,7 +256,9 @@ var MM = (function() {
                        // Waiting for DOM-changes done in updateWrapperStates before we can start the animation.
                        var dummy = moduleWrapper.parentElement.parentElement.offsetHeight;
                        moduleWrapper.style.opacity = 1;
-                       moduleWrapper.style.cssText = "z-index: 99";
+                       // moduleWrapper.style.position = "relative";
+                       moduleWrapper.style.left = "0px";
+                       // moduleWrapper.style.cssText = "z-index: 99";

                        clearTimeout(module.showHideTimer);
                        module.showHideTimer = setTimeout(function() {

After using this a while, everyone seems to like the main screen a lot. They don’t use the food or weather tabs much. The food tab is a bit glitchy, and the weather tab doesn’t always update. I’ll probably look for better options for these two.

As far as the tablet failing to sleep, that went away after a factory reset and reinstall.

tshort

@shashank, on the non-touch use of a timer, I don’t have anything built in. Maybe it could be integrated with one of the voice recognition modules. I have an Amazon Echo nearby. It’d be cool to show the real-time status of Alexa timers, but I haven’t seen a way to do that.