← All projects

2024

DarkMode: Interactive Energy Exhibit

An interactive energy-awareness exhibit for the Hawaii Keiki Museum, built at HACC 2024: 3D-printed IoT light and switch devices, a live energy dashboard, a Unity "save the island" display, and an energy chatbot for kids.

  • Next.js
  • TypeScript
  • tRPC
  • PostgreSQL
  • ESP32
  • MQTT
  • Unity
  • LangChain
  • 3D Printing
  • HACC 2024

GitHub repository

Overview

DarkMode is an exhibit built for the Hawaii Keiki Museum challenge at the Hawaii Annual Code Challenge (HACC) 2024. Kids flip a real light switch, and a 3D-printed light, a live energy dashboard, and a Unity island scene all react to how much energy is being used. The goal is to save the island by reducing energy usage. A chatbot answers questions about energy, with a Keiki mode that explains things at a second-grade level.

Tech stack

Category Technology Details
Unity C#, ShaderLab Island display
Frontend Next.js, React, Tailwind CSS Web app
Backend tRPC, Drizzle, PostgreSQL Typesafe API and database
Chatbot LangChain, OpenAI Energy Q&A
Hardware ESP32 (PlatformIO), MQTT IoT light and switch
CAD OnShape, Orca Slicer, Ender 3 V3 SE Enclosure design and printing
Server Docker, Caddy, Cloudflare, Let’s Encrypt Self-hosted deployment

Architecture

The web client and both IoT devices talk to a self-hosted home server: HTTPS through Cloudflare and a Caddy reverse proxy to the web server and API, and TLS-secured MQTT for real-time device messages. The web server stores device and energy data in PostgreSQL.

DarkMode system architectureThe web app, smart light, and smart switch connect to a self-hosted home server. HTTPS traffic goes through Cloudflare and a Caddy reverse proxy to the Next.js web server and API, which stores data in PostgreSQL and calls the OpenAI API for the chatbot. Real-time device messages travel over MQTT with TLS to an MQTT broker that the web server also uses.CLIENTSSELF-HOSTED HOME SERVER · DOCKERHTTPS(all clients)MQTT over TLS(all clients; WSSfrom the browser)ChatbotDrizzle ORMWeb appDashboard · chatbot · UnitySmart lightESP32 · 3D-printed caseSmart switchESP32 · 3D-printed caseOpenAI APIChat modelCloudflareDNS · proxyMQTT brokerReal-time device messagesWeb server + APINext.js · tRPC · LangChainCaddyReverse proxy · Let's EncryptPostgreSQLDevices · energy dataHTTPSMQTT over TLSDatabaseExternal service

Web

Each ESP32 registers itself with the server using a device token, then appears in the web app.

Device registration page

The dashboard shows live energy statistics for the connected devices.

Energy statistics dashboard

CAD and hardware

Design the model in OnShape

Enclosure model in OnShape

Slice in Orca Slicer

Enclosure parts in Orca Slicer

3D-printed enclosure parts

Build the microcontroller

ESP32 microcontroller wiring

Sand, putty, sand, prime, paint

Enclosures being sanded and painted

Final

The finished 3D-printed IoT light and light switch devices on a desk

Unity

The goal is to save the island by reducing energy usage. The scene changes with the live wattage.

Unity island scene

Unity display at high energy usage, with the meter near 900 watts

Unity display at low energy usage

Chatbot

Ask the chatbot questions about energy.

Chatbot answering an energy question

Keiki mode explains things for kids.

Chatbot in Keiki mode

Hidden feature: ask the chatbot to tell you a joke…

Asking the chatbot for a joke

…and from then on it speaks Hawaiian Pidgin.

Chatbot replying in Hawaiian Pidgin