Introduction: MagicMirror With Gesture Controlled LED Strip Using Shelly RGBW2

Main idea was to present a great gift to my wife which will be useful and easily controlled using voice and gestures. So I decided to implement my own version of the well-known MagicMirror with LED strip on the front controlled by Shelly RGBW2 which able to manage up to 4 different LED strips - in my case it is on Top, Bottom, Left and Right.

Supplies

- Any used monitor with DVI or HDMI ports

- Raspberry PI 3/4 B+

- Shelly RGBW2

- GroveGesture Sensor PAJ7620u2

- LED Strip and driver

- Electrical socket extender

Optional:

- Speakers

- Lavalier microphone

- USB Soundcard for microphone

Step 1: Build MagicMirror

There are a number of instructions on how to build MagicMirror. In my project I use a 22 inch monitor with built in speakers, two-way mirror, Raspberry PI 4B 4Gb RAM, Shelly RGBW2, LED Strip with slim LED driver, GroveGesture Sensor PAJ7620u2, USB Sound card ordered here, simple lavalier microphone, electrical socket extender and some wires. I've asked a friend to prepare box that will fit two-way mirror and monitor, paint it using black color and drill all holes.

Step 2: What Is in the Box

What is in the box described:

1 - I'm using DC 4x White LED Strips to connect Shelly RGBW2, so each channel corresponds to separate section in front of the mirror

2 - DC to power Shelly and strips

3 - Raspberry Pi 4B is attached to monitor, to one of the USB there is sound card attached, audio output is directly connected to monitor's speakers and HDMI port is connected to DVI port of monitor

4 - GroveGesture sensor PAJ7620u2 is attached to Raspberry Pi and is available outside

5 - Electrical socket extender to power monitor, Raspberry and DC for strips

6 - USB sound card with attached microphone

7 - Monitor's speakers input

8 - Lavalier microphone attached outside

9 - Monitor's stereo speakers are small but powerful, they have enough wiring length to attach into edges of the box

Step 3: Raspberry Pi

GroveGesture is connected to Raspberry Pi and active double cooler is attached as well to reduce overheating as everything is closed inside box, so those pins should be connected correctly. See other parts schematic connections on second picture.

Step 4: Shelly RGBW2

I use 12v 4A DC and 4 sections of strips with 120 leds per meter - they are behind white light diffuser cover. Wiring diagram shows how they should be connected to Shelly. After pairing via Shelly App you will be able to control brightness of each section separately. To control them from MagicMirror using gestures I've created plugin, see next step.

Step 5: Software Part

MagicMirror become more popular and has a big community, it is very easy to install on Raspberry Pi and start to configure for your needs. From the available modules for MagicMirror I've added next:

- MMM-3Day-Forecast which show weather for three days, I've added Ukrainian translation to show it in my language

- MMM-Screencast to play YouTube videos - you can select any on your mobile device and stream to MagicMirror

- MMM-EveryNews which shows news from several sources

- MMM-AssistantMk2 with MMM-Hotword so I'm able to use hotword "Smart Mirror" and control MagicMirror using voice

- MMM-GroveGestures module is able to 9 different gestures and map them to related action, my example configuration see in MagicMirror config sample

As there is no module to control Shelly RGBW2 I'v implemented it based on MMM-NewPIR. It is available here - https://github.com/exKAjFASH/MMM-ShellyDimmer the only configurable item required is IP of the device. This module support next broadcast commands:

- SHELLYDIMMER_ON - turn all LED strips on, mapped to "anticlockwise" gesture

- SHELLYDIMMER_OFF - turn all LED strips off, mapped to "clockwise" and "forward" gestures

- SHELLYDIMMER_L_1 - SHELLYDIMMER_L_4 - to set brightness to 10, 40, 70 or 100% of all strips, gestures "up" sets to 10% and gesture "down" sets to 100%

- SHELLYDIMMER_L_X - turn off top and bottom strips and set left and right to 50%, it is mapped to "left" gesture

- SHELLYDIMMER_L_Y - turn off left and right strips and set top and bottom to 60%, it is mapped to "right" gesture

Turn on and off are using timer to do it with clockwise effect.

MagicMirror config sample

{
module: "MMM-GroveGestures",
position: "top_right",
config: {
autoStart: true,//When Mirror starts, recognition will start.
verbose:false,// If set as `true`, useful messages will be logged.
recognitionTimeout: 1200,//Gesture sequence will be ended after this time from last recognized gesture.
cancelGesture: "WAVE",//If set, You can cancel gesture sequence with this gesture.
visible: false,//Recognized gesture sequence will be displayed on position
idleTimer: 1000*60*30,// `0` for disable, After this time from last gesture, onIdle will be executed.
onIdle: {// See command section
moduleExec: {
module: [],
exec: (module,gestures)=>{
module.hide(1000, null,{lockstring:"GESTURE"})
}
}
},
onDetected: {
notificationExec: {
notification: "GESTURE_DETECTED",
},
},
gestureMapFromTo: {//When your sensor is installed with rotated direction, you can calibrate with this.
"Up": "UP",
"Down": "DOWN",
"Left": "LEFT",
"Right": "RIGHT",
"Forward": "FORWARD",
"Backward": "BACKWARD",
"Clockwise": "CLOCKWISE",
"anti-clockwise": "ANTICLOCKWISE",
"wave": "WAVE"
},
defaultNotification: "GESTURE",
pythonPath: "/usr/bin/python",// your python path
defaultCommandSet: "default",
commandSet: {
"default": {
"FORWARD": {
notificationExec: {
notification: "SHELLYDIMMER_OFF",
payload: null
}
},
"CLOCKWISE": {
moduleExec: {
module: [],
exec: (module,gestures)=>{
module.hide(1000, null,{lockstring:"GESTURE"})
}
},
notificationExec: {
notification: "SHELLYDIMMER_OFF",
payload:null
}
},
"ANTICLOCKWISE": {
moduleExec: {
module: [],
exec: (module,gestures)=>{
module.show(1000, null,{lockstring:"GESTURE"})
}
},
notificationExec: {
notification: "SHELLYDIMMER_ON",
payload:null
}
},
"DOWN": {
notificationExec: {
notification: "SHELLYDIMMER_L_4",
payload: null
}
},
"UP": {
notificationExec: {
notification: "SHELLYDIMMER_L_1",
payload: null
}
},
"LEFT": {
notificationExec: {
notification: "SHELLYDIMMER_L_X",
payload: null
}
},
"RIGHT": {
notificationExec: {
notification: "SHELLYDIMMER_L_Y",
payload: null
}
}
}
}
}
}
view rawMMM-GroveGestures.js hosted with ❤ by GitHub

Step 6: Enjoy

Now my wife is able to google anything using her voice, watch youtube videos or listen music, see some highlighted news and weather, get a compliment ;) and control side light just using a hand - adjust brightness, turn on/off or horizontal/vertical side lights.