Magic Mirror Using DragonBoard410c and Flick3D

Magical or just really smart ?

The magic mirror, or as many would call it “smart mirror," is a simple concept of using an bright screen running a black and white (grayscale) UI behind a translucent mirror to give an effect of a “futuristic” digital mirror of sorts. And from there on you can do whatever you want like live updates and some extreme demos also showing the ability to control smart-cars from your dressing table.

Let's try something different, something not-Python or JS

It is understandable why if you google “Magic mirror”, almost every result is written in python and uses pygame or in JavaScript and runs in a browser but nothing that runs on a native code like c/cpp or utilizes OpenGL. Now to be clear, i’m not talking about programming directly with OpenGL, instead using an IDE or toolkit that does it for us.

Enter Qt5, Qt Quick and Qt Creator

“Qt is a cross-platform application framework that is used for developing application software that can be run on various software and hardware platforms with little or no change in the underlying codebase, while still being a native application with native capabilities and speed.” - Wikipedia

Qt makes use of it own JavaScript based markup language called ‘qml’ but, QML and JavaScript code can be compiled into native C++ binaries with the Qt Quick Compiler. Moreover Qt Quick Apllications utilize OpenGL by default, so that means we get super smooth UI on the DragonBoard 410c thanks to the freedreno Open-Source GPU driver that is enabled by default.

Being compatible with JavaScript means that you can parse JSON data and make use of APIs that provide data in JSON.

1) Hardware

1.1) Hardware Requirements

• Dragonboard-410c
• Compatible HDMI Monitor

1.2) Hardware Setup

Both the Flick 3D and PIR Sensor are connected via a 3.3v level shifter, these can be easily found in either the Audio Mezzanine or the Sensor Mezzanine.

• Flick 3D Gesture Sensor

• PIR Sensor

2.1) Build Environment Setup

Note due to the use of mraa, it is recommended to either run everything with sudo or login as root

Setup ZRAM Swap

Although the project itself doesn't consume much RAM, the Qt Creator IDE can beresource hungry so to be on the safe side its better to follow this guideto prevent random lock-ups.

MRAA setup for Flick3D

• Follow this guide.

Install Qt5

$ sudo apt install qt-creator libqt5* qt5* xdotool

• Make sure your Dragonboard-410c is connected to the internet.

Setting Up Project in Qt Creator

Clone this repository:$ git clone https://github.com/96boards-projects/magic-mirrorOpen Qt Creator

• Menu -> Programming -> Qt Creator

Create a new QT Quick Project

• New Project -> Qt Quick Application Swipe -> Give it an appropriate name -> Keep pressing next and accept the default config

Copy Magic-Mirror Source Files

• Copy all files from the repo folder to the project folder and replace existing Files

2.2) API Keys

Generate API Keys

The application requires API keys for live updates for weather and news. To get theapi-keys and learn how to use the api data:

• openweathermap
• newsapi

Place API Keys in Source

Replace the following strings after adding your API keys:

• Page2Form.ui.qml line 27
• Page3Form.ui.qml line 9

2.3) Running the Application

Press the green play button or use Ctrl+R to run the application and you should see an output similar to this: