Tag Archives: OLED

Hey everybody, welcome back to AI on the Edge! In Lesson 50 we’re taking things to the next level — we’re combining real-time hand tracking with a physical NeoPixel ring so you can change colors just by pointing at the screen! Using MediaPipe on the Raspberry Pi, we track your index finger tip and turn the big camera view into an interactive color picker. Hover over any of the seven big colored circles (Red, Green, Blue, Cyan, Magenta, Yellow, or Black) and — boom — the NeoPixel ring instantly lights up with that color!

This lesson is super fun because it finally brings together everything we’ve been building: smooth hand detection, coordinate mapping between camera and OLED, visual feedback, and real-world hardware control. You’ll see your finger tracked with a big blue dot, watch the selected color update live on both the screen and the OLED, and control actual RGB lights with nothing but a gesture.

By the end of this lesson you’ll have a working gesture-controlled color mixer that feels like real interactive magic. This is the kind of project that makes people say “Wow, you built that on a Raspberry Pi?!”

This is also a perfect foundation for even cooler future projects — gesture-controlled lighting, touchless interfaces, interactive games, or even a full gesture-controlled robot or light show.

So grab your Raspberry Pi, hook up that NeoPixel ring, fire up the camera, and let’s start waving our hands around like we’re casting spells! As always, the complete code is right below the video. Watch along, run the code, then start tweaking it — maybe add more colors, make the ring react differently to gestures, or combine it with the hand connection drawing from earlier lessons.I’m really excited to see what you create with this one!Now go make something awesome!

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import cv2
import time
from picamera2 import Picamera2
import mediapipe as mp
import board
import adafruit_ssd1306
from PIL import Image,ImageDraw,ImageFont

wOLED = 128
hOLED = 64
I2C_ADDRESS = 0x3C
i2c = board.I2C()
oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)

W=1280
H=720
tStart = time.time()
fps = 0

RES = (W,H)
piCam = Picamera2(1)
piCam.preview_configuration.main.size = RES
piCam.preview_configuration.main.format = "RGB888"
piCam.preview_configuration.controls.FrameRate=60
piCam.preview_configuration.align()
piCam.configure("preview")
piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))
fontFace = cv2.FONT_HERSHEY_SIMPLEX
fontThickness = int(W/425)
fontScale = H*.0015
fontColor = (0,0,255)

hands = mp.solutions.hands.Hands(
    model_complexity =  0,
    min_detection_confidence = .5,
    min_tracking_confidence = .5,
    max_num_hands =2)
mpDraw = mp.solutions.drawing_utils

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)
cv2.moveWindow('Camera',0,65)
cv2.resizeWindow('Camera',W,H)

import neopixel_spi as neopixel
spi = board.SPI()
strip = neopixel.NeoPixel_SPI(spi, 12,
        pixel_order=neopixel.GRB,auto_write=False)
strip.fill(0)
strip.show()

xStart=int(W/2)
yStart=int(H/10)
margin=100
radius=25
radiusOutline=30
radiusFlash=35
boxW = 4*radius
boxH =int(.75*boxW)
xSpace= int((W-2*margin)/2/3)
colorDot= [(xStart-3*xSpace,yStart),(xStart-2*xSpace,yStart),(xStart-xSpace,yStart),(xStart,yStart),(xStart+xSpace,yStart),(xStart+2*xSpace,yStart),(xStart+3*xSpace,yStart)]
oledPOS=[]
for dot in colorDot:
    oledPOS.append((int(dot[0]/W*wOLED),int(dot[1]/H*hOLED*.4)))
oledText = ['R','G','B','C','M','Y','B']
colorLabel = 'B'
colors =[(0,0,255),(0,255,0),(255,0,0),(255,255,0),(255,0,255),(0,255,255),(0,0,0)]
xBox = xStart-3*xSpace
yBox = int(yStart*1.5)
boxUpperLeft = (int(xBox-radius-boxW/4),yBox)
boxLowerRight = (int(xBox-radius-boxW/4+boxW),yBox+boxH)
colorActive =(0,0,0)
inCircle = False
                 
while True:
    deltaT = time.time() - tStart
    tStart=time.time()
    fps = fps*.95 + (1/deltaT)*.05
    frame= piCam.capture_array()
    frame=cv2.flip(frame,-1)
    frame=cv2.flip(frame,1)
    image = Image.new('1',(wOLED,hOLED))
    draw = ImageDraw.Draw(image)
    for i in range(7):
        if inCircle:
            cv2.circle(frame,colorDot[i],radiusFlash,(255,255,255),-1)
        cv2.circle(frame,colorDot[i],radiusOutline,(200,200,200),-1)
        cv2.circle(frame,colorDot[i],radius,colors[i],-1)
        draw.text(oledPOS[i],oledText[i],fill=255)
    cv2.rectangle(frame,boxUpperLeft,boxLowerRight,colorActive,-1)
    rgbFrame= cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    handResults = hands.process(rgbFrame)
    if handResults.multi_hand_landmarks:
        for myHands in handResults.multi_hand_landmarks:
            landMarks = myHands.landmark
            x = int(landMarks[8].x*W)
            y = int(landMarks[8].y*H)
            xOLED = int(landMarks[8].x*wOLED)
            yOLED = int(landMarks[8].y*hOLED)
            cv2.circle(frame,(x,y),10,(255,0,0), -1)
            draw.ellipse((xOLED-3,yOLED-4,xOLED+3,yOLED+4),fill=255)
            cnt = 0
            for pos in colorDot:
                if abs(x-pos[0])<radius and abs(y-pos[1])<radius:
                    colorActive=colors[cnt]
                    colorLabel =oledText[cnt]
                    #draw.text((int(wOLED/2),int(hOLED/2)),oledText[cnt],fill=255)
                    strip.fill((colorActive[2],colorActive[1],colorActive[0]))
                    strip.show()
                               
                cnt=cnt+1
    draw.text((int(wOLED/2),int(hOLED/2)),colorLabel,fill=255)                    
    oled.image(image)
    oled.show()
    myText = "FPS: "+str(round(fps,1))
    cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)
    cv2.imshow("Camera", frame)
    cv2.moveWindow("Camera",0,60)
    if cv2.waitKey(1)==ord('q'):
        break
cv2.destroyAllWindows()
print('Program Terminated')

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import cv2

import time

from picamera2 import Picamera2

import mediapipe as mp

import board

import adafruit_ssd1306

from PIL import Image,ImageDraw,ImageFont

wOLED = 128

hOLED = 64

I2C_ADDRESS = 0x3C

i2c = board.I2C()

oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)

W=1280

H=720

tStart = time.time()

fps = 0

RES = (W,H)

piCam = Picamera2(1)

piCam.preview_configuration.main.size = RES

piCam.preview_configuration.main.format = "RGB888"

piCam.preview_configuration.controls.FrameRate=60

piCam.preview_configuration.align()

piCam.configure("preview")

piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))

fontFace = cv2.FONT_HERSHEY_SIMPLEX

fontThickness = int(W/425)

fontScale = H*.0015

fontColor = (0,0,255)

hands = mp.solutions.hands.Hands(

model_complexity = 0,

min_detection_confidence = .5,

min_tracking_confidence = .5,

max_num_hands =2)

mpDraw = mp.solutions.drawing_utils

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)

cv2.moveWindow('Camera',0,65)

cv2.resizeWindow('Camera',W,H)

import neopixel_spi as neopixel

spi = board.SPI()

strip = neopixel.NeoPixel_SPI(spi, 12,

pixel_order=neopixel.GRB,auto_write=False)

strip.fill(0)

strip.show()

xStart=int(W/2)

yStart=int(H/10)

margin=100

radius=25

radiusOutline=30

radiusFlash=35

boxW = 4*radius

boxH =int(.75*boxW)

xSpace= int((W-2*margin)/2/3)

colorDot= [(xStart-3*xSpace,yStart),(xStart-2*xSpace,yStart),(xStart-xSpace,yStart),(xStart,yStart),(xStart+xSpace,yStart),(xStart+2*xSpace,yStart),(xStart+3*xSpace,yStart)]

oledPOS=[]

for dot in colorDot:

oledPOS.append((int(dot[0]/W*wOLED),int(dot[1]/H*hOLED*.4)))

oledText = ['R','G','B','C','M','Y','B']

colorLabel = 'B'

colors =[(0,0,255),(0,255,0),(255,0,0),(255,255,0),(255,0,255),(0,255,255),(0,0,0)]

xBox = xStart-3*xSpace

yBox = int(yStart*1.5)

boxUpperLeft = (int(xBox-radius-boxW/4),yBox)

boxLowerRight = (int(xBox-radius-boxW/4+boxW),yBox+boxH)

colorActive =(0,0,0)

inCircle = False

while True:

deltaT = time.time() - tStart

tStart=time.time()

fps = fps*.95 + (1/deltaT)*.05

frame= piCam.capture_array()

frame=cv2.flip(frame,-1)

frame=cv2.flip(frame,1)

image = Image.new('1',(wOLED,hOLED))

draw = ImageDraw.Draw(image)

for i in range(7):

if inCircle:

cv2.circle(frame,colorDot[i],radiusFlash,(255,255,255),-1)

cv2.circle(frame,colorDot[i],radiusOutline,(200,200,200),-1)

cv2.circle(frame,colorDot[i],radius,colors[i],-1)

draw.text(oledPOS[i],oledText[i],fill=255)

cv2.rectangle(frame,boxUpperLeft,boxLowerRight,colorActive,-1)

rgbFrame= cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

handResults = hands.process(rgbFrame)

if handResults.multi_hand_landmarks:

for myHands in handResults.multi_hand_landmarks:

landMarks = myHands.landmark

x = int(landMarks[8].x*W)

y = int(landMarks[8].y*H)

xOLED = int(landMarks[8].x*wOLED)

yOLED = int(landMarks[8].y*hOLED)

cv2.circle(frame,(x,y),10,(255,0,0), -1)

draw.ellipse((xOLED-3,yOLED-4,xOLED+3,yOLED+4),fill=255)

cnt = 0

for pos in colorDot:

if abs(x-pos[0])<radius and abs(y-pos[1])<radius:

colorActive=colors[cnt]

colorLabel =oledText[cnt]

#draw.text((int(wOLED/2),int(hOLED/2)),oledText[cnt],fill=255)

strip.fill((colorActive[2],colorActive[1],colorActive[0]))

strip.show()

cnt=cnt+1

draw.text((int(wOLED/2),int(hOLED/2)),colorLabel,fill=255)

oled.image(image)

oled.show()

myText = "FPS: "+str(round(fps,1))

cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

cv2.imshow("Camera", frame)

cv2.moveWindow("Camera",0,60)

if cv2.waitKey(1)==ord('q'):

break

cv2.destroyAllWindows()

print('Program Terminated')

This is the core circuit we use for the class:

Fusion Hat Circuit Diagram — This is the circuit we will use moving forward in the class

This is the schematic to add the OLED:

Then this is the schematic to add the NeoPixel

AI On the Edge, Raspberry Pi

AI on the Edge LESSON 47: Emotion Detector Using MediaPipe, OpenCV and Raspberry Pi

September 3, 2026 admin

In this exciting lesson, we build a real-time Emotion Detector that can recognize basic human emotions using just a Raspberry Pi, a camera, and the power of MediaPipe. The system watches your face and identifies whether you look Neutral, Smiling, Surprised, or Angry — and then reacts instantly by changing the color of a NeoPixel ring and displaying the detected emotion on both the camera preview and a small OLED display.Using MediaPipe’s Face Mesh solution, the program tracks 468 facial landmarks in real time. From these points, we carefully calculate key facial ratios — such as eye openness, mouth width, and mouth height relative to head width. These measurements allow us to create simple but effective rules that distinguish between different emotional expressions. For example, a wide mouth combined with raised cheeks indicates a smile, while a small mouth opening and narrowed eyes suggests anger.The project beautifully integrates several powerful technologies:

Picamera2 for high-performance camera capture
OpenCV for image processing and on-screen text display
MediaPipe Face Mesh for accurate facial landmark detection
NeoPixel RGB ring that lights up in different colors depending on the detected emotion
SSD1306 OLED display that shows both the emotion name and a simplified wireframe of your face

One of the most satisfying parts of this project is seeing the NeoPixel ring instantly change color to match your emotion — green for happy, cyan for surprised, red for angry, and yellow for neutral. The OLED also mirrors the detected emotion, making the entire system feel alive and responsive.This lesson is a fantastic step forward in understanding how to combine computer vision with physical outputs on the edge. You will learn how to extract meaningful measurements from facial landmarks, build rule-based emotion logic, and synchronize visual feedback across multiple devices (camera preview, NeoPixel, and OLED).By the end of Lesson 47, you will have a working real-time emotion recognition system running entirely on a Raspberry Pi — a great foundation for more advanced projects like mood-reactive lights, interactive robots, or even assistive technology.

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================

import cv2
import time
from picamera2 import Picamera2
import mediapipe as mp
import numpy as np
#################################
import board
import adafruit_ssd1306
from PIL import Image, ImageDraw, ImageFont
import time

import neopixel_spi as neopixel
import colorsys
spi=board.SPI()
LC = 12
PO = neopixel.GRB
strip = neopixel.NeoPixel_SPI(spi, LC,
            pixel_order=PO,auto_write=False)
strip.fill(0)
strip.show()

wOLED = 128
hOLED = 64
I2C_ADDRESS = 0x3C
i2c = board.I2C()
oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)
fontLarge = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",14)
#################################
W=1280
H=720
tStart = time.time()
fps = 0

piCam = Picamera2(1)
piCam.preview_configuration.main.size = (W, H)
piCam.preview_configuration.main.format = "RGB888"
piCam.preview_configuration.controls.FrameRate = 60
piCam.preview_configuration.align()
piCam.configure("preview")
piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))
fontFace = cv2.FONT_HERSHEY_SIMPLEX
fontThickness = int(W/425)
fontScale = H*.0015
fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(
    
    max_num_faces=1,
    refine_landmarks=True,
    min_detection_confidence=0.5,
    min_tracking_confidence=0.5)

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)
cv2.moveWindow('Camera',0,65)
cv2.resizeWindow('Camera',W,H)
while True:
    deltaT = time.time() - tStart
    tStart=time.time()
    fps = fps*.95 + (1/deltaT)*.05
    frame = piCam.capture_array()
    frame = cv2.flip(frame, -1)

    rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    results = faceMesh.process(rgb)
    
    if results.multi_face_landmarks:
        for faceLandMarks in results.multi_face_landmarks:
            #print(faceLandmarks)
            image = Image.new("1",(wOLED,hOLED))
            draw = ImageDraw.Draw(image)
            lmAll = []
            j=0
            for lm in faceLandMarks.landmark:
                xOLED = int(lm.x*wOLED)
                yOLED = int(lm.y*hOLED)
                draw.point((xOLED,yOLED), fill = 255)
                #print(xOLED,yOLED)
                lmAll.append((xOLED,yOLED))
                x = int(lm.x*W)
                y = int(lm.y*H)
                #cv2.putText(frame,str(j),(x,y),fontFace, .3, (0,255,0),1)
                j = j+1
            for idx in mp.solutions.face_mesh.FACEMESH_CONTOURS:
                #print(idx)
                lineStart = idx[0]
                lineEnd = idx[1]
                pt1 = lmAll[lineStart]
                pt2 = lmAll[lineEnd]
                draw.line((pt1[0],pt1[1],pt2[0],pt2[1]), width=1, fill = 255)

            keyLM = faceLandMarks.landmark
            
            headRight = 323
            headLeft = 93
            headWidth = keyLM[headRight].x -keyLM[headLeft].x
            cv2.putText(frame,str(headRight),(int(keyLM[headRight].x*W),int(keyLM[headRight].y*H)),fontFace, .3, (0,255,0),1)
            cv2.putText(frame,str(headLeft),(int(keyLM[headLeft].x*W),int(keyLM[headLeft].y*H)),fontFace, .3, (0,255,0),1)
            
            leftEyeTop = 159
            leftEyeBottom = 145
            leftEyeHeight =keyLM[leftEyeBottom].y -keyLM[leftEyeTop].y
            leftEyeLeft = 130
            leftEyeRight = 154
            leftEyeWidth = keyLM[leftEyeRight].x -keyLM[leftEyeLeft].x
            leftEyeRatio = leftEyeHeight/leftEyeWidth*100 
            
            rightEyeTop = 385
            rightEyeBottom = 253
            rightEyeHeight = keyLM[rightEyeBottom].y -keyLM[rightEyeTop].y
            rightEyeLeft = 465
            rightEyeRight = 249
            rightEyeWidth = keyLM[rightEyeRight].x -keyLM[rightEyeLeft].x
            rightEyeRatio = rightEyeHeight/rightEyeWidth*100
            
            eyeRatio = (rightEyeRatio +leftEyeRatio)/2
            
            mouthLeft = 61
            mouthRight = 291
            mouthTop = 13
            mouthBottom = 15
            mouthWidth = keyLM[mouthRight].x-keyLM[mouthLeft].x
            mouthHeight = keyLM[mouthBottom].y-keyLM[mouthTop].y
            mouthWidthRatio = mouthWidth/headWidth *100
            mouthHeightRatio = mouthHeight/headWidth*100
            
            print(round(mouthWidthRatio,1),round(mouthHeightRatio,1),round(eyeRatio,1))
            color = (255,255,0)
            emotion = 'NEUTRAL'
            if mouthWidthRatio >37 and mouthHeightRatio>4 and eyeRatio<74:
                emotion = 'SMILE'
                color = (0,255,0)
            if mouthWidthRatio <37 and mouthHeightRatio>10 and eyeRatio>70:
                emotion = 'SURPRISED'
                color = (0,255,255)
            if mouthWidthRatio <32 and mouthHeightRatio<4 and eyeRatio<57:
                emotion = 'ANGRY'
                color = (0,0,255)               
            cv2.putText(frame, emotion, (int(W*.1),int(H*.15)),
                    fontFace, 2.2, color, 4)
            strip.fill((color[2],color[1],color[0]))
            strip.show()
            #print('XXXXXXXXXXXXXXXXXXx')
            draw.text((0,0),emotion,font=fontLarge,fill=255)
            oled.image(image)
            oled.show()
        #print()

#     if results.multi_face_landmarks:
#         for faceLandmarks in results.multi_face_landmarks:
#             # Optional second pass for glow effect
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,
#                 landmark_drawing_spec=None,
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(100, 100, 100),
#                     thickness=1
#                 )
#             )
#             # === Best looking translucent mesh ===
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,
#                 landmark_drawing_spec=None,                    # Hide dots
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(0, 0, 180),      # Bright cyan/teal
#                     thickness=7
#                 )
#             )
# 
#             # Optional: Extra detail on irises (makes eyes look better)
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_IRISES,
#                 landmark_drawing_spec=None,
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(255, 0, 0),
#                     thickness=7
#                 )
#             )

    myText = "FPS: "+str(round(fps,1))
    cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

    cv2.imshow("Camera", frame)

    if cv2.waitKey(1) == ord('q'):
        break

cv2.destroyAllWindows()
piCam.stop()
oled.fill(0)
oled.show()
strip.fill(0)
strip.show()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import cv2

import time

from picamera2 import Picamera2

import mediapipe as mp

import numpy as np

#################################

import board

import adafruit_ssd1306

from PIL import Image, ImageDraw, ImageFont

import time

import neopixel_spi as neopixel

import colorsys

spi=board.SPI()

LC = 12

PO = neopixel.GRB

strip = neopixel.NeoPixel_SPI(spi, LC,

pixel_order=PO,auto_write=False)

strip.fill(0)

strip.show()

wOLED = 128

hOLED = 64

I2C_ADDRESS = 0x3C

i2c = board.I2C()

oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)

fontLarge = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",14)

#################################

W=1280

H=720

tStart = time.time()

fps = 0

piCam = Picamera2(1)

piCam.preview_configuration.main.size = (W, H)

piCam.preview_configuration.main.format = "RGB888"

piCam.preview_configuration.controls.FrameRate = 60

piCam.preview_configuration.align()

piCam.configure("preview")

piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))

fontFace = cv2.FONT_HERSHEY_SIMPLEX

fontThickness = int(W/425)

fontScale = H*.0015

fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(

max_num_faces=1,

refine_landmarks=True,

min_detection_confidence=0.5,

min_tracking_confidence=0.5)

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)

cv2.moveWindow('Camera',0,65)

cv2.resizeWindow('Camera',W,H)

while True:

deltaT = time.time() - tStart

tStart=time.time()

fps = fps*.95 + (1/deltaT)*.05

frame = piCam.capture_array()

frame = cv2.flip(frame, -1)

rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

results = faceMesh.process(rgb)

if results.multi_face_landmarks:

for faceLandMarks in results.multi_face_landmarks:

#print(faceLandmarks)

image = Image.new("1",(wOLED,hOLED))

draw = ImageDraw.Draw(image)

lmAll = []

j=0

for lm in faceLandMarks.landmark:

xOLED = int(lm.x*wOLED)

yOLED = int(lm.y*hOLED)

draw.point((xOLED,yOLED), fill = 255)

#print(xOLED,yOLED)

lmAll.append((xOLED,yOLED))

x = int(lm.x*W)

y = int(lm.y*H)

#cv2.putText(frame,str(j),(x,y),fontFace, .3, (0,255,0),1)

j = j+1

for idx in mp.solutions.face_mesh.FACEMESH_CONTOURS:

#print(idx)

lineStart = idx[0]

lineEnd = idx[1]

pt1 = lmAll[lineStart]

pt2 = lmAll[lineEnd]

draw.line((pt1[0],pt1[1],pt2[0],pt2[1]), width=1, fill = 255)

keyLM = faceLandMarks.landmark

headRight = 323

headLeft = 93

headWidth = keyLM[headRight].x -keyLM[headLeft].x

cv2.putText(frame,str(headRight),(int(keyLM[headRight].x*W),int(keyLM[headRight].y*H)),fontFace, .3, (0,255,0),1)

cv2.putText(frame,str(headLeft),(int(keyLM[headLeft].x*W),int(keyLM[headLeft].y*H)),fontFace, .3, (0,255,0),1)

leftEyeTop = 159

leftEyeBottom = 145

leftEyeHeight =keyLM[leftEyeBottom].y -keyLM[leftEyeTop].y

leftEyeLeft = 130

leftEyeRight = 154

leftEyeWidth = keyLM[leftEyeRight].x -keyLM[leftEyeLeft].x

leftEyeRatio = leftEyeHeight/leftEyeWidth*100

rightEyeTop = 385

rightEyeBottom = 253

rightEyeHeight = keyLM[rightEyeBottom].y -keyLM[rightEyeTop].y

rightEyeLeft = 465

rightEyeRight = 249

rightEyeWidth = keyLM[rightEyeRight].x -keyLM[rightEyeLeft].x

rightEyeRatio = rightEyeHeight/rightEyeWidth*100

eyeRatio = (rightEyeRatio +leftEyeRatio)/2

mouthLeft = 61

mouthRight = 291

mouthTop = 13

mouthBottom = 15

mouthWidth = keyLM[mouthRight].x-keyLM[mouthLeft].x

mouthHeight = keyLM[mouthBottom].y-keyLM[mouthTop].y

mouthWidthRatio = mouthWidth/headWidth *100

mouthHeightRatio = mouthHeight/headWidth*100

print(round(mouthWidthRatio,1),round(mouthHeightRatio,1),round(eyeRatio,1))

color = (255,255,0)

emotion = 'NEUTRAL'

if mouthWidthRatio >37 and mouthHeightRatio>4 and eyeRatio<74:

emotion = 'SMILE'

color = (0,255,0)

if mouthWidthRatio <37 and mouthHeightRatio>10 and eyeRatio>70:

emotion = 'SURPRISED'

color = (0,255,255)

if mouthWidthRatio <32 and mouthHeightRatio<4 and eyeRatio<57:

emotion = 'ANGRY'

color = (0,0,255)

cv2.putText(frame, emotion, (int(W*.1),int(H*.15)),

fontFace, 2.2, color, 4)

strip.fill((color[2],color[1],color[0]))

strip.show()

#print('XXXXXXXXXXXXXXXXXXx')

draw.text((0,0),emotion,font=fontLarge,fill=255)

oled.image(image)

oled.show()

#print()

# if results.multi_face_landmarks:

# for faceLandmarks in results.multi_face_landmarks:

# # Optional second pass for glow effect

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,

# landmark_drawing_spec=None,

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(100, 100, 100),

# thickness=1

# )

# # === Best looking translucent mesh ===

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,

# landmark_drawing_spec=None, # Hide dots

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(0, 0, 180), # Bright cyan/teal

# thickness=7

# )

# # Optional: Extra detail on irises (makes eyes look better)

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_IRISES,

# landmark_drawing_spec=None,

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(255, 0, 0),

# thickness=7

# )

myText = "FPS: "+str(round(fps,1))

cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

cv2.imshow("Camera", frame)

if cv2.waitKey(1) == ord('q'):

break

cv2.destroyAllWindows()

piCam.stop()

oled.fill(0)

oled.show()

strip.fill(0)

strip.show()

These are the schematics we are using for todays project. If you are taking the class, you should already have these components connected:

AI On the Edge, Raspberry Pi

AI on the Edge LESSON 44: Displaying Live MediaPipe FaceMesh Avatar on SSD1306 OLED in OpenCV

August 23, 2026 admin

This is Getting Crazy Cool!

Hey guys, welcome back to the Fusion AI Lab series, AI on the Edge! In Lesson 44 we just took things up another notch. We’re now running MediaPipe Face Mesh on our Raspberry Pi 5, pulling all 468 facial landmarks in real time, and then drawing a clean, smooth face contour directly onto a tiny 128×64 OLED display!

That’s right — your face is now living on that little monochrome OLED in real time! Every eyebrow raise, smile, head tilt, and eye movement gets faithfully reproduced on the display. We’re pulling the camera feed with picamera2, processing it with MediaPipe’s powerful face mesh, scaling the landmarks down to OLED resolution, and then drawing the official FACEMESH_CONTOURS connections using PIL. The result is surprisingly smooth and fun to watch! This project really shows the power of combining modern AI vision tools with simple embedded hardware. Watching your own face rendered in real time on a tiny OLED is just plain awesome — it feels like sci-fi stuff from just a few years ago, and now we’re doing it on the Edge with our Fusion AI Lab kit!

If you’ve been following along, you’re starting to see how powerful these tools are becoming. We’re no longer just detecting faces — we’re understanding the structure of the face and visualizing it however we want. And we’re just getting started!

So fire up your Raspberry Pi, grab that OLED, and let’s keep pushing the limits. You’re doing some seriously cool stuff!

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import cv2
import time
from picamera2 import Picamera2
import mediapipe as mp
import numpy as np
#################################
import board
import adafruit_ssd1306
from PIL import Image, ImageDraw, ImageFont
import time

wOLED = 128
hOLED = 64
I2C_ADDRESS = 0x3C
i2c = board.I2C()
oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)

#################################
W=1280
H=720
tStart = time.time()
fps = 0

piCam = Picamera2(1)
piCam.preview_configuration.main.size = (W, H)
piCam.preview_configuration.main.format = "RGB888"
piCam.preview_configuration.controls.FrameRate = 60
piCam.preview_configuration.align()
piCam.configure("preview")
piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))
fontFace = cv2.FONT_HERSHEY_SIMPLEX
fontThickness = int(W/425)
fontScale = H*.0015
fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(
    
    max_num_faces=1,
    refine_landmarks=True,
    min_detection_confidence=0.5,
    min_tracking_confidence=0.5)

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)
cv2.moveWindow('Camera',0,65)
cv2.resizeWindow('Camera',W,H)
while True:
    deltaT = time.time() - tStart
    tStart=time.time()
    fps = fps*.95 + (1/deltaT)*.05
    frame = piCam.capture_array()
    frame = cv2.flip(frame, -1)

    rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    results = faceMesh.process(rgb)
    
    if results.multi_face_landmarks:
        for faceLandMarks in results.multi_face_landmarks:
            #print(faceLandmarks)
            image = Image.new("1",(wOLED,hOLED))
            draw = ImageDraw.Draw(image)
            lmAll = []
            for lm in faceLandMarks.landmark:
                xOLED = int(lm.x*wOLED)
                yOLED = int(lm.y*hOLED)
                draw.point((xOLED,yOLED), fill = 255)
                #print(xOLED,yOLED)
                lmAll.append((xOLED,yOLED))
            for idx in mp.solutions.face_mesh.FACEMESH_CONTOURS:
                #print(idx)
                lineStart = idx[0]
                lineEnd = idx[1]
                pt1 = lmAll[lineStart]
                pt2 = lmAll[lineEnd]
                draw.line((pt1[0],pt1[1],pt2[0],pt2[1]), width=1, fill = 255)


            #print('XXXXXXXXXXXXXXXXXXx')
            oled.image(image)
            oled.show()
        #print()

#     if results.multi_face_landmarks:
#         for faceLandmarks in results.multi_face_landmarks:
#             # Optional second pass for glow effect
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,
#                 landmark_drawing_spec=None,
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(100, 100, 100),
#                     thickness=1
#                 )
#             )
#             # === Best looking translucent mesh ===
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,
#                 landmark_drawing_spec=None,                    # Hide dots
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(0, 0, 180),      # Bright cyan/teal
#                     thickness=7
#                 )
#             )
# 
#             # Optional: Extra detail on irises (makes eyes look better)
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_IRISES,
#                 landmark_drawing_spec=None,
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(255, 0, 0),
#                     thickness=7
#                 )
#             )

    myText = "FPS: "+str(round(fps,1))
    cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

    cv2.imshow("Camera", frame)

    if cv2.waitKey(1) == ord('q'):
        break

cv2.destroyAllWindows()
piCam.stop()
oled.fill(0)
oled.show()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import cv2

import time

from picamera2 import Picamera2

import mediapipe as mp

import numpy as np

#################################

import board

import adafruit_ssd1306

from PIL import Image, ImageDraw, ImageFont

import time

wOLED = 128

hOLED = 64

I2C_ADDRESS = 0x3C

i2c = board.I2C()

oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)

#################################

W=1280

H=720

tStart = time.time()

fps = 0

piCam = Picamera2(1)

piCam.preview_configuration.main.size = (W, H)

piCam.preview_configuration.main.format = "RGB888"

piCam.preview_configuration.controls.FrameRate = 60

piCam.preview_configuration.align()

piCam.configure("preview")

piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))

fontFace = cv2.FONT_HERSHEY_SIMPLEX

fontThickness = int(W/425)

fontScale = H*.0015

fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(

max_num_faces=1,

refine_landmarks=True,

min_detection_confidence=0.5,

min_tracking_confidence=0.5)

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)

cv2.moveWindow('Camera',0,65)

cv2.resizeWindow('Camera',W,H)

while True:

deltaT = time.time() - tStart

tStart=time.time()

fps = fps*.95 + (1/deltaT)*.05

frame = piCam.capture_array()

frame = cv2.flip(frame, -1)

rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

results = faceMesh.process(rgb)

if results.multi_face_landmarks:

for faceLandMarks in results.multi_face_landmarks:

#print(faceLandmarks)

image = Image.new("1",(wOLED,hOLED))

draw = ImageDraw.Draw(image)

lmAll = []

for lm in faceLandMarks.landmark:

xOLED = int(lm.x*wOLED)

yOLED = int(lm.y*hOLED)

draw.point((xOLED,yOLED), fill = 255)

#print(xOLED,yOLED)

lmAll.append((xOLED,yOLED))

for idx in mp.solutions.face_mesh.FACEMESH_CONTOURS:

#print(idx)

lineStart = idx[0]

lineEnd = idx[1]

pt1 = lmAll[lineStart]

pt2 = lmAll[lineEnd]

draw.line((pt1[0],pt1[1],pt2[0],pt2[1]), width=1, fill = 255)

#print('XXXXXXXXXXXXXXXXXXx')

oled.image(image)

oled.show()

#print()

# if results.multi_face_landmarks:

# for faceLandmarks in results.multi_face_landmarks:

# # Optional second pass for glow effect

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,

# landmark_drawing_spec=None,

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(100, 100, 100),

# thickness=1

# )

# # === Best looking translucent mesh ===

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,

# landmark_drawing_spec=None, # Hide dots

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(0, 0, 180), # Bright cyan/teal

# thickness=7

# )

# # Optional: Extra detail on irises (makes eyes look better)

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_IRISES,

# landmark_drawing_spec=None,

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(255, 0, 0),

# thickness=7

# )

myText = "FPS: "+str(round(fps,1))

cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

cv2.imshow("Camera", frame)

if cv2.waitKey(1) == ord('q'):

break

cv2.destroyAllWindows()

piCam.stop()

oled.fill(0)

oled.show()

In this lesson we are still using our standard Fusion AI Lab Kit cirtuit from the earlier lessons:

We have also connected the OLED to the above circuit according to this diagram:

AI On the Edge

AI on the Edge LESSON 43: Adding SSD1306 OLED to Your Raspberry Pi Projects

August 19, 2026 admin

In today’s lesson in the AI on the Edge series, we’re adding a very important piece to our growing collection of skills — learning how to use the SSD1306 OLED display with the SunFounder Fusion AI Lab kit.

One of the key goals of this class is to build intelligent systems that can run completely on the edge — without needing to rely on the cloud. A big part of that is giving our edge devices the ability to communicate clearly with us. That’s exactly where the little SSD1306 OLED really shines. Whether you’re building a smart robot, an autonomous sensor node, or an AI-powered monitoring system, having a crisp, low-power display to show status, results, or even fun animations makes your project feel complete and professional.

In this video, we start with the basics and gradually build up. You’ll learn how to connect the OLED using I2C, initialize it with CircuitPython, and then use the PIL library to create images in memory before sending them to the screen. We explore loading different font sizes so you can create nice, readable layouts. Then we move into drawing shapes — rectangles, circles, and borders — before finishing with a fun bouncing ball animation that brings the whole thing to life.

This lesson is particularly important in our AI on the Edge journey because the SSD1306 is extremely lightweight and uses almost no processing power, making it perfect for running alongside face detection, object tracking, speech recognition, and other AI tasks without slowing down your Raspberry Pi. You’ll see how easy it is to display messages like detection results, confidence scores, system status, or even playful personality messages from your AI creations.

By the end of this lesson, you’ll have the confidence to add a real display to any project in this class. Whether you want to show live face tracking data, sensor readings, or just give your robot a fun way to “talk” to the world, the skills you learn here will be used again and again in future projects.

So if you’re following along with the AI on the Edge series, this is another big step forward. Grab your Fusion AI Hat, open up Thonny, and let’s get that OLED screen lighting up with some personality!

As always, I strongly encourage you to take the code and make it your own. Change the messages, create new animations, and think about how you can use this display in your own AI projects. That’s where the real learning and creativity happens

So far in this class we have been using this schematic:

In this lesson, we will be adding the SSD1306 OLED display. Keep the schatic above, but now add the OLED display to the breadboard. It should be connected to the Fusion Hat as follows:

Connect the VCC pin of OLED display to 3.3V on Fusion HAT+
Connect the GND pin of OLED display to GND on Fusion HAT+
Connect the SCL pin of OLED display to SCL (GPIO 3) on Fusion HAT+
Connect the SDA pin of OLED display to SDA (GPIO 2) on Fusion HAT+

While we are updating our project components, go ahead and connect the neoPixel ring to yout Fusion Hat. Here is the schematic to add the neopixel ring, and we will be using it in future lessons.

In the video, we developed the following code to show you how to put the SSD1306 OLED through its paces using the Fusion AI Hat on the Raspberry Pi 5.

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import board
import adafruit_ssd1306
from PIL import Image, ImageDraw, ImageFont
import time

W =128
H = 64
I2C_ADDRESS = 0x3C

i2c = board.I2C()
oled = adafruit_ssd1306.SSD1306_I2C(W, H, i2c, addr=I2C_ADDRESS)

fontLarge = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",14)
fontMedium = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",10)
fontSmall = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",8)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.point((int(W/2),int(H/2)), fill =255)
oled.image(image)
oled.show()
ts=1
time.sleep(ts)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.text( (0,0), "TopTechBoy.com",font=fontLarge, fill=255)
draw.text( (0,16), "SSD1306 OLED",font=fontMedium, fill=255)
draw.text( (0,26), "Fusion AI Hat",font=fontMedium, fill=255)
draw.text( (0,36), "Hello Makers",font=fontMedium, fill=255)
draw.text( (0,46), "Enjoy!",font=fontSmall, fill=255)
oled.image(image)
oled.show()
time.sleep(ts)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.rectangle((int(.1*W),int(.1*H),int(.9*W),int(.9*H)),
               width=5, outline=255, fill=0)
draw.text((int(W/4),int(H/2.5)),
          "Hello World",font=fontMedium, fill=255)

oled.image(image)
oled.show()
time.sleep(ts)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.rectangle((int(.1*W),int(.1*H),int(.45*W),int(.45*H)),width=1, outline=255, fill=0)
draw.rectangle((int(.55*W),int(.1*H),int(.9*W),int(.45*H)),width=1, outline=255, fill=255)
d=25
draw.ellipse((int(.1*W),int(.55*H),int(.1*W)+d,int(.55*H)+d),width=1, outline=255, fill=0)
draw.ellipse((int(.55*W),int(.55*H),int(.55*W)+d,int(.55*H)+d),width=1, outline=255, fill=255)
oled.image(image)
oled.show()
time.sleep(ts)

xCenter=40
yCenter=25
radius=7

dx = 1
dy = 1

for frame in range(500):
    image = Image.new("1", (W,H))
    draw = ImageDraw.Draw(image)
    draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0) 
    draw.ellipse((xCenter-radius,yCenter-radius,xCenter+radius,yCenter+radius), width=1,outline=255,fill=255)
    #draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0)    
    oled.image(image)
    oled.show()
    
    xCenter = xCenter + dx
    yCenter = yCenter + dy

    if xCenter <= radius or xCenter >= W-1-radius:
        dx = -dx
    if yCenter <= radius or yCenter >= H-1-radius:
        dy = -dy

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import board

import adafruit_ssd1306

from PIL import Image, ImageDraw, ImageFont

import time

W =128

H = 64

I2C_ADDRESS = 0x3C

i2c = board.I2C()

oled = adafruit_ssd1306.SSD1306_I2C(W, H, i2c, addr=I2C_ADDRESS)

fontLarge = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",14)

fontMedium = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",10)

fontSmall = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",8)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.point((int(W/2),int(H/2)), fill =255)

oled.image(image)

oled.show()

ts=1

time.sleep(ts)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.text( (0,0), "TopTechBoy.com",font=fontLarge, fill=255)

draw.text( (0,16), "SSD1306 OLED",font=fontMedium, fill=255)

draw.text( (0,26), "Fusion AI Hat",font=fontMedium, fill=255)

draw.text( (0,36), "Hello Makers",font=fontMedium, fill=255)

draw.text( (0,46), "Enjoy!",font=fontSmall, fill=255)

oled.image(image)

oled.show()

time.sleep(ts)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.rectangle((int(.1*W),int(.1*H),int(.9*W),int(.9*H)),

width=5, outline=255, fill=0)

draw.text((int(W/4),int(H/2.5)),

"Hello World",font=fontMedium, fill=255)

oled.image(image)

oled.show()

time.sleep(ts)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.rectangle((int(.1*W),int(.1*H),int(.45*W),int(.45*H)),width=1, outline=255, fill=0)

draw.rectangle((int(.55*W),int(.1*H),int(.9*W),int(.45*H)),width=1, outline=255, fill=255)

d=25

draw.ellipse((int(.1*W),int(.55*H),int(.1*W)+d,int(.55*H)+d),width=1, outline=255, fill=0)

draw.ellipse((int(.55*W),int(.55*H),int(.55*W)+d,int(.55*H)+d),width=1, outline=255, fill=255)

oled.image(image)

oled.show()

time.sleep(ts)

xCenter=40

yCenter=25

radius=7

dx = 1

dy = 1

for frame in range(500):

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0)

draw.ellipse((xCenter-radius,yCenter-radius,xCenter+radius,yCenter+radius), width=1,outline=255,fill=255)

#draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0)

oled.image(image)

oled.show()

xCenter = xCenter + dx

yCenter = yCenter + dy

if xCenter <= radius or xCenter >= W-1-radius:

dx = -dx

if yCenter <= radius or yCenter >= H-1-radius:

dy = -dy

Arduino, Arduino 9-Axis IMU Totorials

Arduino IMU Project with Complete Avionics Display for Roll, Pitch and Yaw on a SSD1306 OLED

December 25, 2025 admin

In this video lesson we wrap up our project to create an Arduino IMU using the GY-87 IMU module, with an MPU6050 chip and a QMC5883L Magnetometer. In this lesson we complete the avionics display, creating an accurate graphical output for Roll, Pitch, and Yaw. This is the schematic we are using for this project:

OLED IMU — This schematic shows how to connect the SSD1306 OLED to our IMU Project.

This is the code we develop in the video. Remember, you have to calibrate your sensors, and put your calibration numbers into the code below. I showed you how to do the calibration in THIS LESSON.

// ====================================================================
// DISCLAIMER:
// This code is provided as-is for educational and experimental 
// purposes only. The author makes no representations or warranties of 
// any kind concerning the safety, suitability, or accuracy of this 
// code. Use at your own risk. The author assumes no liability for any 
// damages, system failures, security breaches, or network issues 
// resulting from the use or implementation of this script.
// ====================================================================
#include <Adafruit_MPU6050.h>
#include <Adafruit_Sensor.h>
#include <Wire.h>
#include <QMC5883LCompass.h>

#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <math.h>

int screenWidth=128;
int screenHeight=64;
int rst = -1;
Adafruit_SSD1306 dsp(screenWidth, screenHeight, &Wire, rst);

float AxRaw,AyRaw,AzRaw,GxRaw,GyRaw,GzRaw,MxRaw,MyRaw,MzRaw;
float AxCal,AyCal,AzCal,GxCal,GyCal,GzCal,MxCal,MyCal,MzCal;
float rollA,pitchA,yawM,rollC,pitchC,yawC;
float rollG = 0;
float pitchG =0 ;
float yawG = 0;
float deltaRoll = 0;
float deltaPitch = 0;
float deltaYaw = 0;
float alpha = .1;

float rollCrad;
float pitchCrad;
float MxCalH;
float MyCalH;

int tStart =millis();
Adafruit_MPU6050 mpu;
QMC5883LCompass compass;

void setup() {
  // put your setup code here, to run once:
Serial.begin(115200);

dsp.begin(SSD1306_SWITCHCAPVCC,0x3C);
dsp.clearDisplay();
dsp.display();

mpu.begin();
mpu.setI2CBypass(true);
compass.init();
mpu.setGyroRange(MPU6050_RANGE_1000_DEG);
delay(100);
}

void calibrateSensors() {
    const float axOffset = 0.45407887789180545;
    const float ayOffset = 0.09432915233553185;
    const float azOffset = -0.4614157209191969;
    const float axScale = 0.10141341897341144;
    const float ayScale = 0.10141341897341144;
    const float azScale = 0.10141341897341144;
    const float gxOffset = -2.277507235645022;
    const float gyOffset = 0.8794902155258137;
    const float gzOffset = -0.5729577951308232;
    const float mxOffset = -103.48885017294003;
    const float myOffset = -96.80085481152321;
    const float mzOffset = 923.8042898128733;
    const float mxScale = 0.001156333898601669;
    const float myScale = 0.001012882116988885;
    const float mzScale = 0.0009400860982065997;


    AxCal = (AxRaw - axOffset) * axScale;
    AyCal = (AyRaw - ayOffset) * ayScale;
    AzCal = (AzRaw - azOffset) * azScale;
    GxCal = GxRaw*180/PI - gxOffset;
    GyCal = GyRaw*180/PI - gyOffset;
    GzCal = GzRaw*180/PI - gzOffset;
    MxCal = (MxRaw - mxOffset) * mxScale;
    MyCal = (MyRaw - myOffset) * myScale;
    MzCal = (MzRaw - mzOffset) * mzScale;
}
void updateDial(){
int radius=20;
int offset=3;
int x1Center = radius;
int y1Center = 63 - radius;
int x2Center = x1Center+2*radius+offset;
int y2Center = 63-radius;
int x3Center = x2Center + 2*radius +offset;
int y3Center = 63-radius;
int x1;
int y1;
int x2;
int y2;
float angleRad;
float tickScale;
dsp.drawCircle(x1Center,y1Center,radius, WHITE);
for (int i=0; i<=360; i=i+30){
  angleRad = i*PI/180;
  tickScale=.9;
  if (i%90==0){
    tickScale=.7;
  }
  x1 =x1Center + int(tickScale*radius*cos(angleRad));
  y1 =y1Center + int(tickScale*radius*sin(angleRad));
  x2 = x1Center + int(radius*cos(angleRad));
  y2 = y1Center + int(radius*sin(angleRad));
  dsp.drawLine(x1,y1,x2,y2,WHITE);
}
x1=x1Center;
y1=y1Center;
x2= x1Center + radius*cos(-(yawC+90)*PI/180);
y2= y1Center + radius*sin(-(yawC+90)*PI/180);
dsp.drawLine(x1,y1,x2,y2,WHITE);

dsp.drawCircle(x2Center,y2Center,radius,WHITE);
dsp.drawLine(x2Center-radius*cos(rollC*PI/180),y2Center-radius*sin(rollC*PI/180),x2Center+radius*cos(rollC*PI/180),y2Center+radius*sin(rollC*PI/180),WHITE);

dsp.drawCircle(x3Center,y3Center,radius,WHITE);
x1=x3Center-radius*cos(pitchC*PI/180);
y1=y3Center-radius/90.*pitchC;
x2=x3Center+radius*cos(pitchC*PI/180);
y2=y3Center-radius/90.*pitchC;
dsp.drawLine(x1,y1,x2,y2,WHITE);

}

void loop() {
  // put your main code here, to run repeatedly:
compass.read();
sensors_event_t a, g, temp;
mpu.getEvent(&a, &g, &temp);

AxRaw = a.acceleration.x;
AyRaw = a.acceleration.y;
AzRaw = a.acceleration.z;

GxRaw = g.gyro.x;
GyRaw = g.gyro.y;
GzRaw = g.gyro.z;

MxRaw= compass.getX();
MyRaw= compass.getY();
MzRaw= compass.getZ();

calibrateSensors();

rollA = atan2(AyCal,sqrt(AzCal*AzCal + AxCal*AxCal))*180/PI;
pitchA = atan2(AxCal,sqrt(AzCal*AzCal + AyCal*AyCal))*180/PI;

deltaRoll = GxCal*(millis()-tStart)/1000.;
deltaPitch = -GyCal*(millis()-tStart)/1000.;
deltaYaw = -GzCal*(millis()-tStart)/1000.;
tStart = millis();

rollG = rollG + deltaRoll;
pitchG = pitchG + deltaPitch;
yawG = yawG + deltaYaw;

rollC = alpha*(rollA) + (1-alpha)*(rollC+deltaRoll);
pitchC = alpha*(pitchA) + (1-alpha)*(pitchC+deltaPitch);

rollCrad=rollC*PI/180;
pitchCrad=pitchC*PI/180;

MxCalH=MxCal*cos(pitchCrad)-MyCal*sin(rollCrad)*sin(pitchCrad)-MzCal*cos(rollCrad)*sin(pitchCrad);
MyCalH=MyCal*cos(rollCrad) - MzCal*sin(rollCrad);

yawM = atan2(MyCalH,MxCalH)*180./PI;
yawM=int(yawM+360)%360;
if (abs(yawM-yawC)>=180){
  yawC=yawM;
}
if (abs(yawM-yawC)<180){
yawC = alpha*(yawM) + (1-alpha)*(yawC + deltaYaw);
}

// Serial.print("yawC:");Serial.print(yawC);Serial.print(',');
// Serial.print("yawM:");Serial.print(yawM);Serial.print(',');
// Serial.print("yawG:");Serial.print(yawG);Serial.print(',');
// Serial.print("LL:");Serial.print(-90);Serial.print(',');
// Serial.print("UL:");Serial.println(90);

Serial.print("rollC:");Serial.print(rollC);Serial.print(',');
Serial.print("pitchC:");Serial.print(pitchC);Serial.print(',');
Serial.print("yawC:");Serial.print(yawC);Serial.print(',');
Serial.print("LL:");Serial.print(-90);Serial.print(',');
Serial.print("UL:");Serial.println(90);

dsp.clearDisplay();
dsp.setTextColor(WHITE);
dsp.setCursor(0,0);
dsp.print("Ultimate Avionics");
dsp.setCursor(0,9);
dsp.print("R: "); dsp.print(int(rollC));
dsp.setCursor(40,9);
dsp.print("P: ");dsp.print(int(pitchC));
dsp.setCursor(80,9);
dsp.print("Y: ");dsp.print(int(yawC));

updateDial();

dsp.display();
delay(100);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

// ====================================================================

// DISCLAIMER:

// This code is provided as-is for educational and experimental

// purposes only. The author makes no representations or warranties of

// any kind concerning the safety, suitability, or accuracy of this

// code. Use at your own risk. The author assumes no liability for any

// damages, system failures, security breaches, or network issues

// resulting from the use or implementation of this script.

// ====================================================================

#include <Adafruit_MPU6050.h>

#include <Adafruit_Sensor.h>

#include <Wire.h>

#include <QMC5883LCompass.h>

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

#include <math.h>

int screenWidth=128;

int screenHeight=64;

int rst = -1;

Adafruit_SSD1306 dsp(screenWidth, screenHeight, &Wire, rst);

float AxRaw,AyRaw,AzRaw,GxRaw,GyRaw,GzRaw,MxRaw,MyRaw,MzRaw;

float AxCal,AyCal,AzCal,GxCal,GyCal,GzCal,MxCal,MyCal,MzCal;

float rollA,pitchA,yawM,rollC,pitchC,yawC;

float rollG = 0;

float pitchG =0 ;

float yawG = 0;

float deltaRoll = 0;

float deltaPitch = 0;

float deltaYaw = 0;

float alpha = .1;

float rollCrad;

float pitchCrad;

float MxCalH;

float MyCalH;

int tStart =millis();

Adafruit_MPU6050 mpu;

QMC5883LCompass compass;

void setup() {

// put your setup code here, to run once:

Serial.begin(115200);

dsp.begin(SSD1306_SWITCHCAPVCC,0x3C);

dsp.clearDisplay();

dsp.display();

mpu.begin();

mpu.setI2CBypass(true);

compass.init();

mpu.setGyroRange(MPU6050_RANGE_1000_DEG);

delay(100);

}

void calibrateSensors() {

const float axOffset = 0.45407887789180545;

const float ayOffset = 0.09432915233553185;

const float azOffset = -0.4614157209191969;

const float axScale = 0.10141341897341144;

const float ayScale = 0.10141341897341144;

const float azScale = 0.10141341897341144;

const float gxOffset = -2.277507235645022;

const float gyOffset = 0.8794902155258137;

const float gzOffset = -0.5729577951308232;

const float mxOffset = -103.48885017294003;

const float myOffset = -96.80085481152321;

const float mzOffset = 923.8042898128733;

const float mxScale = 0.001156333898601669;

const float myScale = 0.001012882116988885;

const float mzScale = 0.0009400860982065997;

AxCal = (AxRaw - axOffset) * axScale;

AyCal = (AyRaw - ayOffset) * ayScale;

AzCal = (AzRaw - azOffset) * azScale;

GxCal = GxRaw*180/PI - gxOffset;

GyCal = GyRaw*180/PI - gyOffset;

GzCal = GzRaw*180/PI - gzOffset;

MxCal = (MxRaw - mxOffset) * mxScale;

MyCal = (MyRaw - myOffset) * myScale;

MzCal = (MzRaw - mzOffset) * mzScale;

}

void updateDial(){

int radius=20;

int offset=3;

int x1Center = radius;

int y1Center = 63 - radius;

int x2Center = x1Center+2*radius+offset;

int y2Center = 63-radius;

int x3Center = x2Center + 2*radius +offset;

int y3Center = 63-radius;

int x1;

int y1;

int x2;

int y2;

float angleRad;

float tickScale;

dsp.drawCircle(x1Center,y1Center,radius, WHITE);

for (int i=0; i<=360; i=i+30){

angleRad = i*PI/180;

tickScale=.9;

if (i%90==0){

tickScale=.7;

}

x1 =x1Center + int(tickScale*radius*cos(angleRad));

y1 =y1Center + int(tickScale*radius*sin(angleRad));

x2 = x1Center + int(radius*cos(angleRad));

y2 = y1Center + int(radius*sin(angleRad));

dsp.drawLine(x1,y1,x2,y2,WHITE);

}

x1=x1Center;

y1=y1Center;

x2= x1Center + radius*cos(-(yawC+90)*PI/180);

y2= y1Center + radius*sin(-(yawC+90)*PI/180);

dsp.drawLine(x1,y1,x2,y2,WHITE);

dsp.drawCircle(x2Center,y2Center,radius,WHITE);

dsp.drawLine(x2Center-radius*cos(rollC*PI/180),y2Center-radius*sin(rollC*PI/180),x2Center+radius*cos(rollC*PI/180),y2Center+radius*sin(rollC*PI/180),WHITE);

dsp.drawCircle(x3Center,y3Center,radius,WHITE);

x1=x3Center-radius*cos(pitchC*PI/180);

y1=y3Center-radius/90.*pitchC;

x2=x3Center+radius*cos(pitchC*PI/180);

y2=y3Center-radius/90.*pitchC;

dsp.drawLine(x1,y1,x2,y2,WHITE);

}

void loop() {

// put your main code here, to run repeatedly:

compass.read();

sensors_event_t a, g, temp;

mpu.getEvent(&a, &g, &temp);

AxRaw = a.acceleration.x;

AyRaw = a.acceleration.y;

AzRaw = a.acceleration.z;

GxRaw = g.gyro.x;

GyRaw = g.gyro.y;

GzRaw = g.gyro.z;

MxRaw= compass.getX();

MyRaw= compass.getY();

MzRaw= compass.getZ();

calibrateSensors();

rollA = atan2(AyCal,sqrt(AzCal*AzCal + AxCal*AxCal))*180/PI;

pitchA = atan2(AxCal,sqrt(AzCal*AzCal + AyCal*AyCal))*180/PI;

deltaRoll = GxCal*(millis()-tStart)/1000.;

deltaPitch = -GyCal*(millis()-tStart)/1000.;

deltaYaw = -GzCal*(millis()-tStart)/1000.;

tStart = millis();

rollG = rollG + deltaRoll;

pitchG = pitchG + deltaPitch;

yawG = yawG + deltaYaw;

rollC = alpha*(rollA) + (1-alpha)*(rollC+deltaRoll);

pitchC = alpha*(pitchA) + (1-alpha)*(pitchC+deltaPitch);

rollCrad=rollC*PI/180;

pitchCrad=pitchC*PI/180;

MxCalH=MxCal*cos(pitchCrad)-MyCal*sin(rollCrad)*sin(pitchCrad)-MzCal*cos(rollCrad)*sin(pitchCrad);

Technology Tutorials

Tag Archives: OLED

AI on the Edge LESSON 50: Control NeoPixel Ring With Hand Gestures and MediaPipe

AI on the Edge LESSON 47: Emotion Detector Using MediaPipe, OpenCV and Raspberry Pi

AI on the Edge LESSON 44: Displaying Live MediaPipe FaceMesh Avatar on SSD1306 OLED in OpenCV

AI on the Edge LESSON 43: Adding SSD1306 OLED to Your Raspberry Pi Projects

Arduino IMU Project with Complete Avionics Display for Roll, Pitch and Yaw on a SSD1306 OLED

Making The World a Better Place One High Tech Project at a Time. Enjoy!