Raspberry Pi 5: Building a Smart Home Hub with AI Vision and IoT Control

The Raspberry Pi 5 is a remarkable piece of technology that packs the power of a full computer into a compact and affordable package. Priced at around $100, this small board opens up a world of possibilities for developers, makers, and tech enthusiasts. In this comprehensive guide, we'll explore how to harness the capabilities of the Raspberry Pi 5 to create a sophisticated smart home hub with AI-powered computer vision and IoT device control.

Getting Started with Raspberry Pi 5

Hardware Overview

The Raspberry Pi 5 comes equipped with:

• A powerful CPU and GPU
• RAM
• HDMI ports
• USB ports
• Camera Serial Interface (CSI) ports
• GPIO pins for hardware interfacing

To get started, you'll need a few additional components:

• A storage device (SSD or SD card)
• An active cooler (recommended for optimal performance)
• Optional: AI accelerator chip for enhanced machine learning capabilities

Setting Up the Operating System

To set up your Raspberry Pi 5:

1. Choose an operating system. The official Raspberry Pi OS (a Debian-based distribution) is recommended for beginners.
2. Download the Raspberry Pi Imager tool on your computer.
3. Use the tool to write the OS image to your SD card or SSD.
4. Configure initial settings like hostname and username.
5. Insert the storage device into your Raspberry Pi and power it on.

Accessing Your Raspberry Pi

Once your Raspberry Pi is up and running, you can access it in several ways:

1. Direct connection: Plug in a monitor, keyboard, and mouse.
2. SSH: Connect remotely using Secure Shell from another computer on your network.
3. Remote desktop: Use VNC or other remote desktop protocols for a graphical interface.

Building a Web Application

Let's start by creating a simple web application that we'll expand throughout this guide.

Setting Up the Development Environment

1. Update your Raspberry Pi:

   sudo apt update && sudo apt upgrade -y
   

2. Install Node.js and npm (if not already installed):

   curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
   sudo apt install -y nodejs
   

3. Create a new Next.js project:

   npx create-next-app@latest my-smart-home-hub
   cd my-smart-home-hub
   

Creating a Basic Web Interface

Let's modify the default Next.js app to display some system information:

1. Replace the contents of pages/index.js with:

import { useState, useEffect } from 'react'

export default function Home() {
  const [systemInfo, setSystemInfo] = useState(null)

  useEffect(() => {
    fetch('/api/system-info')
      .then(res => res.json())
      .then(data => setSystemInfo(data))
  }, [])

  return (
    <div>
      <h1>Raspberry Pi 5 Smart Home Hub</h1>
      {systemInfo && (
        <div>
          <h2>System Information</h2>
          <p>CPU Temperature: {systemInfo.cpuTemp}°C</p>
          <p>CPU Usage: {systemInfo.cpuUsage}%</p>
          <p>Memory Usage: {systemInfo.memoryUsage}%</p>
        </div>
      )}
    </div>
  )
}

2. Create a new file pages/api/system-info.js:

import { execSync } from 'child_process'

export default function handler(req, res) {
  const cpuTemp = execSync("vcgencmd measure_temp | egrep -o '[0-9]*\.[0-9]*'").toString().trim()
  const cpuUsage = execSync("top -bn1 | grep 'Cpu(s)' | sed 's/.*, *\([0-9.]*\)%* id.*/\1/' | awk '{print 100 - $1}'").toString().trim()
  const memoryUsage = execSync("free | grep Mem | awk '{print $3/$2 * 100.0}'").toString().trim()

  res.status(200).json({ cpuTemp, cpuUsage, memoryUsage })
}

3. Run the development server:

   npm run dev
   

You should now be able to access your web application at http://localhost:3000 and see basic system information displayed.

Exposing Your Web App to the Internet

To make your Raspberry Pi-hosted web app accessible from anywhere, we'll use Cloudflare Tunnels. This method is more secure than traditional port forwarding and easier to set up.

1. Sign up for a Cloudflare account if you don't have one.

2. Install cloudflared on your Raspberry Pi:

   curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-arm64 -o cloudflared
   sudo mv cloudflared /usr/local/bin
   sudo chmod +x /usr/local/bin/cloudflared
   

3. Authenticate cloudflared:

   cloudflared tunnel login
   

4. Create a tunnel:

   cloudflared tunnel create my-pi-tunnel
   

5. Configure your tunnel by creating a file named config.yml:

   tunnel: <YOUR_TUNNEL_ID>
   credentials-file: /path/to/credentials/file.json
   
   ingress:
     - hostname: pi.yourdomain.com
       service: http://localhost:3000
     - service: http_status:404
   

6. Run your tunnel:

   cloudflared tunnel run my-pi-tunnel
   

7. Add a DNS record in your Cloudflare dashboard pointing to your tunnel.

Now your Raspberry Pi web app should be accessible at https://pi.yourdomain.com.

Integrating a Camera

Let's add live video streaming capabilities to our smart home hub using the Raspberry Pi Camera Module.

Setting Up the Camera

1. Connect the camera module to the CSI port on your Raspberry Pi.

2. Enable the camera interface:

   sudo raspi-config
   

   Navigate to "Interfacing Options" > "Camera" and enable it.

3. Install the required Python libraries:

   sudo apt install python3-picamera2
   pip install fastapi uvicorn
   

Creating a Video Stream Server

1. Create a new file camera_server.py:

from fastapi import FastAPI, Response
from fastapi.responses import StreamingResponse
from picamera2 import Picamera2
from picamera2.encoders import JpegEncoder
from picamera2.outputs import FileOutput
from io import BytesIO

app = FastAPI()

picam2 = Picamera2()
picam2.configure(picam2.create_preview_configuration(main={"format": 'XRGB8888', "size": (640, 480)}))
picam2.start()

def generate_frames():
    output = BytesIO()
    encoder = JpegEncoder(q=70)
    stream = FileOutput(output)
    
    while True:
        picam2.capture_file(stream, format='jpeg')
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + output.getvalue() + b'\r\n')
        output.seek(0)
        output.truncate()

@app.get("/video_feed")
async def video_feed():
    return StreamingResponse(generate_frames(), media_type="multipart/x-mixed-replace; boundary=frame")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

2. Run the camera server:

   python3 camera_server.py
   

Integrating the Video Stream into the Web App

Update your pages/index.js to include the video stream:

import { useState, useEffect } from 'react'

export default function Home() {
  const [systemInfo, setSystemInfo] = useState(null)

  useEffect(() => {
    fetch('/api/system-info')
      .then(res => res.json())
      .then(data => setSystemInfo(data))
  }, [])

  return (
    <div>
      <h1>Raspberry Pi 5 Smart Home Hub</h1>
      {systemInfo && (
        <div>
          <h2>System Information</h2>
          <p>CPU Temperature: {systemInfo.cpuTemp}°C</p>
          <p>CPU Usage: {systemInfo.cpuUsage}%</p>
          <p>Memory Usage: {systemInfo.memoryUsage}%</p>
        </div>
      )}
      <h2>Live Camera Feed</h2>
      <img src="http://localhost:8000/video_feed" alt="Live Camera Feed" />
    </div>
  )
}

Adding AI-Powered Computer Vision

Let's enhance our camera feed with object detection using YOLO (You Only Look Once) and the Raspberry Pi AI Kit.

Setting Up the AI Hardware

1. Install the Raspberry Pi AI Kit following the manufacturer's instructions.

2. Install the required libraries:

   pip install opencv-python ultralytics
   

Implementing Object Detection

Update your camera_server.py to include object detection:

from fastapi import FastAPI, Response
from fastapi.responses import StreamingResponse
from picamera2 import Picamera2
from picamera2.encoders import JpegEncoder
from picamera2.outputs import FileOutput
from io import BytesIO
import cv2
from ultralytics import YOLO

app = FastAPI()

picam2 = Picamera2()
picam2.configure(picam2.create_preview_configuration(main={"format": 'XRGB8888', "size": (640, 480)}))
picam2.start()

model = YOLO('yolov8n.pt')

def generate_frames():
    output = BytesIO()
    encoder = JpegEncoder(q=70)
    stream = FileOutput(output)
    
    while True:
        frame = picam2.capture_array()
        results = model(frame)
        annotated_frame = results[0].plot()
        
        _, buffer = cv2.imencode('.jpg', annotated_frame)
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + buffer.tobytes() + b'\r\n')

@app.get("/video_feed")
async def video_feed():
    return StreamingResponse(generate_frames(), media_type="multipart/x-mixed-replace; boundary=frame")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

This code will now perform object detection on each frame and overlay the results on the video stream.

Controlling IoT Devices with GPIO

Let's add the ability to control an LED and a motor using the Raspberry Pi's GPIO pins.

Setting Up the Hardware

1. Connect an LED to GPIO pin 17 and ground, using a resistor.
2. Connect a motor controller board to GPIO pins 18 (for PWM), 23 (for direction), and 24 (for direction), as well as power and ground.

Creating a GPIO Control Server

Create a new file gpio_server.py:

from fastapi import FastAPI
import RPi.GPIO as GPIO

app = FastAPI()

# Set up GPIO
GPIO.setmode(GPIO.BCM)
GPIO.setup(17, GPIO.OUT)  # LED
GPIO.setup(18, GPIO.OUT)  # Motor PWM
GPIO.setup(23, GPIO.OUT)  # Motor direction
GPIO.setup(24, GPIO.OUT)  # Motor direction

pwm = GPIO.PWM(18, 100)  # 100 Hz PWM frequency
pwm.start(0)

@app.post("/led/{state}")
def control_led(state: bool):
    GPIO.output(17, state)
    return {"status": "success", "led_state": state}

@app.post("/motor/{speed}")
def control_motor(speed: int):
    if speed > 0:
        GPIO.output(23, GPIO.HIGH)
        GPIO.output(24, GPIO.LOW)
    else:
        GPIO.output(23, GPIO.LOW)
        GPIO.output(24, GPIO.HIGH)
    
    pwm.ChangeDutyCycle(abs(speed))
    return {"status": "success", "motor_speed": speed}

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8001)

Run this server alongside your camera server:

python3 gpio_server.py

Integrating GPIO Control into the Web App

Update your pages/index.js to include controls for the LED and motor:

import { useState, useEffect } from 'react'

export default function Home() {
  const [systemInfo, setSystemInfo] = useState(null)
  const [ledState, setLedState] = useState(false)
  const [motorSpeed, setMotorSpeed] = useState(0)

  useEffect(() => {
    fetch('/api/system-info')
      .then(res => res.json())
      .then(data => setSystemInfo(data))
  }, [])

  const toggleLed = () => {
    const newState = !ledState
    fetch(`/api/led/${newState}`, { method: 'POST' })
      .then(() => setLedState(newState))
  }

  const changeMotorSpeed = (e) => {
    const speed = parseInt(e.target.value)
    fetch(`/api/motor/${speed}`, { method: 'POST' })
      .then(() => setMotorSpeed(speed))
  }

  return (
    <div>
      <h1>Raspberry Pi 5 Smart Home Hub</h1>
      {systemInfo && (
        <div>
          <h2>System Information</h2>
          <p>CPU Temperature: {systemInfo.cpuTemp}°C</p>
          <p>CPU Usage: {systemInfo.cpuUsage}%</p>
          <p>Memory Usage: {systemInfo.memoryUsage}%</p>
        </div>
      )}
      <h2>Live Camera Feed</h2>
      <img src="http://localhost:8000/video_feed" alt="Live Camera Feed" />
      <h2>IoT Controls</h2>
      <button onClick={toggleLed}>{ledState ? 'Turn LED Off' : 'Turn LED On'}</button>
      <div>
        <label>Motor Speed: </label>
        <input type="range" min="-100" max="100" value={motorSpeed} onChange={changeMotorSpeed} />
        <span>{motorSpeed}</span>
      </div>
    </div>
  )
}

Conclusion

Congratulations! You've now built a comprehensive smart home hub using a Raspberry Pi 5. This system includes:

• A web-based interface accessible from anywhere
• Live video streaming
• AI-powered object detection
• IoT device control (LED and motor)
• System information monitoring

This project demonstrates the versatility and power of the Raspberry Pi 5 as a platform for IoT and smart home applications. From here, you can expand your system by adding more sensors, integrating with other smart home protocols like Zigbee or Z-Wave, or implementing more advanced AI features.

Remember to always prioritize security when exposing your devices to the internet. Regularly update your Raspberry Pi's software, use strong passwords, and consider implementing additional security measures like two-factor authentication for your web interface.

With the foundation you've built, the possibilities for further customization and expansion are virtually limitless. Happy tinkering!

Article created from: https://www.youtube.com/watch?v=Vp4glSVPT8o