Raspberry Pi, Magic Mirror / Dakboard on a 3.5inch Display touch Screen

My Raspberry Pi from my previous post, being used as usual, I wanted to enhance its functionality and use further, by not only letting it be a headless raspberry pi / DNS Filter Server but also:

1. To have the ability to see what is going on directly without the need of a monitor
2. Conveniently interact with it directly without the need to use another machine via SSH or VNC
3. To have a sense of a complete standalone device
4. Make it aesthetically appealing to the eyes rather than appearing as mere box

The first thing that came to mind was to have a 5inch or 7inch touch screen display, so I researched on the good, bad and ugly of this idea, most post do suggest 7inch size, but given my eyes fell in love with a 3.5inch touch screen there was no escape, I needed something the size of the pi itself and 3.5inch screen fits the description, required items:

• pi case / enclosure
• 3.5 Inch Touch Screen

First thing first, head over to LCD WIKI and grab a screen of your liking, in ,my case I went with:

• Raspberry Pi GPIO Display to plug directly on to the GPIO Pin, this will require driver installation else you can choose a HDMI one
• Resistive Touch Screen 3.5inch RPI Display due to price and practicality of use, but a Capacitive Touch Screen would be preferred, any Sponsors?

To keep it simple no previous pi set up instructions are going to be repeated but instead we are working with an existing Raspberry Pi that was working but just adding more use and functionality to it, simply adding a touch screen, casing, screen driver and utility software.

The screen above comes with instructions on how to place it to Raspberry Pi, as most instruction would need to be followed correctly, the pins must go into the right GPIO number range, failure will destroy the screen as powering the Raspberry pi would pass voltage to the wrong screen pin. Before the screen installation, I highly recommend:

1. To add a fan, so the casing should be able to accommodate a fan
2. The screen should have a fan pin, as once plugged into the GPIO pins, 5v GPIO pin will not be accessible / in use, hence pick a screen that has fan pin option

I picked a casing with intentional space for a fan, and the screen dose provide a fan pin, instead I went with no fan for this setup rather than my previous one, but I did leave the heat sinks intact to provide passive cooling at the same time eliminate fan noise as my pi would be place in a well ventilated and on sight such as a table.

Now we have the hardware setup, it is time for the software, individual instructions for the touch screen setup are in the LCD WIKI, or the screen manufacturer you are getting from, my case I followed as below:

1. I installed the Touch Screen Drivers and restarted the Raspberry Pi, there is no need to do screen calibration if touches/clicks are inline with place/area of contact, no calibration was needed for my setup
2. Then I rotated the Screen 180 degrees so the Raspberry pi power and the peripherals are on top and the bottom is clear for easy placement on a surface such as a table

Reference : http://www.lcdwiki.com/3.5inch_RPi_Display

Ok so now what? technically it was still not a true stand alone, the only thing I could do was touch for input but I could not type without using a physical keyboard, well there is a solution and I installed a virtual keyboard:

• sudo apt-get install matchbox-keyboard

And the Keyboard can be found in Menu -> Accessories –> Keyboard, After ages of typing one letter at a time it proved not practical but at least still convenient, if you have it running its easy to see what is going on and also be able to click/select items and type words (not sentences) it is also convenient to type simple commands on the terminal, because of this I left the option for SSH and VNC available, but there was less space to work on, so definitely I had to improve on this a bit more, I went on and change the System Settings:

1. For Menu fonts to 8 from 12 and menu icons to 16×16
2. Depending on the Screen / Hardware, you might have resolution option, my case above was the best I could do

Now with the above setting I had some room to work with a window or two, happy!!! VNC and SSH also facilitate not only speed or long typing but also given the fact the Raspberry pi does not have a battery, hence not portable  as the pi physical range is limited to the area it is plugged in.

Now time for beautification, there were multiple choices but I set both below

1. Magic Mirror
2. Dakboard

Honestly Dakboard is easy, as it is just a URL in your browser, you just set it to full screen, pretty easy and on top of that it is beautiful, Magic Mirror as the name suggest is was exclusively designed for two way mirrors but practically any of them is better to add aesthetic value to my set up, yeah even though Dakboard was easy and beautiful I found it to be just another wallpaper desktop / a web app that I could simply build using HTML and JS but to be honest its not free, you got to pay for features with Dakboard, while Magic Mirror on the other hand, its free, open source and a tone of community support, modules and even an app to control it, so I set up both Dakboard (free usage) but using Magic Mirror.

Magic Mirror Set up Instructions

• https://docs.magicmirror.builders/getting-started/installation.html Remember to start the Application and not the server, as you want to show it on screen / full screen

After the Installation you will need to do a personal setup for your location for weather information and calendar for public holidays or you could setup your private calendar from Google etc, below are my settings in the Magic Mirror config.js

{ module: “currentweather”, position: “top_right”, config: { location: “Semenyih”, locationID: “1734798”, appid: “XXXXXXXXXXXXXXXXXXXXXXX” }

You will need to signup at https://openweathermap.org/ and get your location ID and your application ID, replace XXX… with your application ID, I also went ahead and got the public calendar for Malaysia, there was no need to setup my private calendar as I have those events in my phone, I went ahead and divided the screen into 4 sections as I had a limited area of 3.5inch screen size, 320 X 480 resolution:

1. top_left for clock
2. bottom_left for calendar
3. top_right for current weather
4. bottom_right for weather forecast

You could also zoom in and out of the screen, everything else that I did not need, I simply commented them out /* */ such as compliment module, who need compliments when neighbourhood cats do it uninvitedly in my front porch.

Final result, a beauty by myside! It is simply a full computer / server, aesthetically disguise as an information screen / clock.