E-Slate – DIY Wi-Fi E-Ink Digital Film Clapperboard

2815 Views, 61 Favorites, 0 Comments

E-Slate – DIY Wi-Fi E-Ink Digital Film Clapperboard

A film slate, commonly known as a clapperboard, is an essential tool in video production. It is traditionally used on film sets to synchronise audio and video recordings while displaying key information such as scene number, take number, director, and date. The familiar clap created by the hinged sticks provides both a visual and an audio reference, making it easier to align footage accurately during post-production.

However, the usefulness of a slate is not limited to professional film sets. It is equally valuable for YouTube creators, content producers, and solo filmmakers, where multiple takes, cameras, or audio sources are often involved. Using a slate helps keep recordings clearly labelled, making the editing phase far more organised and efficient.

Traditional clapperboards have several drawbacks. They rely on pens or markers, which can be inconvenient during fast-paced shoots. Handwritten text can smudge, fade, or become difficult to read over time. Visibility can also be poor in outdoor or high-brightness environments.

While digital slates built with LED displays are an option, they struggle in direct sunlight and high-exposure shooting conditions, where glare and low contrast reduce readability—especially for outdoor filming and vlog-style setups.

To overcome these limitations, I designed a digital film slate using a 7.2-inch E-Ink display. The slate allows users to update all information wirelessly through a mobile or web app, eliminating the need for markers entirely. Thanks to the high contrast and paper-like nature of E-Ink technology, the displayed text remains clear and legible even in bright outdoor conditions.

Here is the basic information that can be displayed through this device.

ROLL - This can be used to designate the storage of the footage. It might be a film roll number or the memory card number.
SCENE - identifies the script's scene, with a letter appended for different setups (e.g., 24, then 24A, 24B for new angles/lenses)
TAKE - tracks each attempt of a shot, increasing sequentially until the setup changes (scene/angle/lens), when it resets to '1
PROD - (PRODUCTION) given name of the project
DIR - Name of the director
DOP - Name of the director of photography
NOTE - To provide additional information about the scene
DATE - Date of the Production

This project blends the simplicity of a traditional clapperboard with the flexibility of modern digital tools, making it ideal not only for film sets but also for YouTube video production, vlogging, tutorials, and multi-camera content creation, where a well-organised editing workflow is just as important.

In the next steps, I’ll walk you through the design, electronics, and functionality of this E-Ink-based digital film slate.

Supplies

Designing in Fusion 360

I utilized Fusion 360 to plan and design my project, which required careful space optimization. I needed to fit all the parts into the smallest form factor possible while ensuring practicality, including sufficient space for wiring and easy assembly. First, I imported all the 3D models of the parts and tried different configurations by placing the parts in various positions. Once I found the optimal configurations, I built the enclosure around them. design files are provided below.

Downloads

arm.stl

arm_holder.stl

back_plate.stl

front_board v1.stl

PCB_holder.stl

press_board v1.stl

stripes.stl

3D Printing

I designed the object in several parts due to its complexity, so we will need to assemble it after 3D printing. I used white PLA and black PLA. You can find the STL file attached above.

Setting Up XIAO EPaper Display Board

For this build, a 7.5-inch monochrome e-paper display was selected because it offers excellent visibility and enough screen area to show large score digits.

This particular screen uses a 24-pin ribbon cable, so before connecting anything, the jumper on the EE04 driver board must be moved to the 24-pin position. This ensures the display interfaces correctly with the board

Setting Up the Arduino IDE and Flashing the Code

To program the board, the Seeed GFX library must be installed. This library provides all the low-level functions for handling E-Ink refreshes, drawing text, and managing fonts. After installing it, the next step is to open Seeed’s online configuration tool.

Seeed GFX library

online configuration tool.

This tool lets you select the exact E-Ink display and the EE04 version of the driver board. Once the correct model is selected, the tool generates the driver code automatically.

Here is the generated Configuration

#define BOARD_SCREEN_COMBO 502 // 7.5 inch monochrome ePaper Screen （UC8179）

#define USE_XIAO_EPAPER_DISPLAY_BOARD_EE04

This code needs to be copied into a new tab in the Arduino IDE. After opening your main program file, create a new tab named driver.h, and paste the generated code there. With this in place, the Arduino sketch will know how to communicate with the display.

Here is the completed code

// Film_Clap_Board.ino

#include <WiFi.h>

#include <WebServer.h>

#define EPAPER_ENABLE

#include "TFT_eSPI.h"

#ifdef EPAPER_ENABLE

EPaper epaper;

#endif

const char* ssid = "ClapBoard_AP";

const char* password = "123456789";

WebServer server(80);

// Film clap board fields - updated with your example values

String roll = "A001";

String scene = "35A";

String take = "1";

String prod = "PANDIPADA";

String director = "GOKUL";

String dop = "GOKUL";

String note = "ISO 120";

String date = "11.03.1999";

IPAddress localIP;

void showIPOnBoot() {

#ifdef EPAPER_ENABLE

epaper.begin();

epaper.fillScreen(TFT_WHITE);

epaper.setTextColor(TFT_BLACK, TFT_WHITE);

epaper.setTextSize(3);

String ipText = "IP: " + localIP.toString();

// Center the IP text

epaper.setTextSize(3);

epaper.setFreeFont();

int textWidth = ipText.length() * 18; // Approximate width

int x = (800 - textWidth) / 2;

if (x < 0) x = 0;

epaper.drawString(ipText, x, 240);

epaper.update();

delay(5000); // Show IP for 5 seconds

#endif

}

void updateDisplay() {

#ifdef EPAPER_ENABLE

epaper.begin();

epaper.fillScreen(TFT_WHITE);

epaper.setTextColor(TFT_BLACK, TFT_WHITE);

// Draw all lines exactly as specified

epaper.drawLine(0, 0, 0, 0, TFT_BLACK);

epaper.drawLine(0, 193, 798, 193, TFT_BLACK);

epaper.drawLine(0, 313, 798, 313, TFT_BLACK);

epaper.drawLine(400, 314, 400, 478, TFT_BLACK);

epaper.drawLine(0, 394, 798, 394, TFT_BLACK);

epaper.drawLine(266, -1, 266, 192, TFT_BLACK);

epaper.drawLine(548, -1, 548, 192, TFT_BLACK);

// Set free font as specified

epaper.setFreeFont();

// Top section labels - Size 3

epaper.setTextSize(3);

epaper.drawString("ROLL", 5, 6);

epaper.drawString("SCENE", 271, 7);

epaper.drawString("TAKE", 560, 5);

// Top section values - Size 8

epaper.setTextSize(8);

epaper.drawString(roll, 41, 76);

epaper.drawString(scene, 335, 73);

epaper.drawString(take, 660, 72);

// PROD section - Size 3 label, Size 8 value

epaper.setTextSize(3);

epaper.drawString("PROD", 3, 197);

epaper.setTextSize(8);

epaper.drawString(prod, 188, 224);

// Middle section labels - Size 2

epaper.setTextSize(2);

epaper.drawString("DIR", 2, 316);

epaper.drawString("DOP", 403, 316);

epaper.drawString("NOTE", 2, 397);

epaper.drawString("DATE", 403, 397);

// Middle section values - Size 6 for DIR and DOP, Size 6 for NOTE and DATE

epaper.setTextSize(6);

epaper.drawString(director, 95, 335);

epaper.drawString(dop, 511, 337);

// NOTE and DATE values

epaper.drawString(note, 48, 416);

epaper.drawString(date, 420, 415);

epaper.update();

#endif

}

String htmlPage() {

String html = R"HTML(

<!doctype html>

<html>

<head>

<title>Film Clap Board Control</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: 'Segoe UI', Arial, sans-serif;

background: #8fc31f;

margin: 0;

padding: 15px;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

color: #333;

}

.container {

max-width: 800px;

width: 100%;

margin: 0 auto;

}

.header {

text-align: center;

margin-bottom: 20px;

color: white;

}

.header h1 {

font-size: 2rem;

margin-bottom: 5px;

text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}

.header p {

font-size: 1rem;

opacity: 0.9;

}

.card {

background: rgba(255, 255, 255, 0.95);

padding: 20px;

border-radius: 15px;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

}

.form-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 15px;

margin-bottom: 20px;

}

.form-group {

margin-bottom: 12px;

}

label {

display: block;

font-weight: 600;

margin-bottom: 6px;

color: #495057;

font-size: 0.85rem;

}

input {

width: 100%;

padding: 10px 12px;

border-radius: 8px;

border: 2px solid #e9ecef;

font-size: 14px;

transition: all 0.3s ease;

background: white;

}

input:focus {

outline: none;

border-color: #8fc31f;

box-shadow: 0 0 0 3px rgba(143, 195, 31, 0.2);

}

.full-width {

grid-column: 1 / -1;

}

.two-columns {

grid-column: span 2;

}

.btn-container {

text-align: center;

margin-top: 20px;

}

.btn {

background: #8fc31f;

color: white;

padding: 12px 30px;

border-radius: 8px;

font-weight: bold;

border: none;

cursor: pointer;

font-size: 1rem;

transition: all 0.3s ease;

width: 100%;

}

.btn:hover {

background: #7aad1a;

transform: translateY(-1px);

}

.btn:active {

transform: translateY(0);

}

.ip-display {

text-align: center;

margin-top: 15px;

color: white;

font-size: 0.9rem;

}

@media (max-width: 768px) {

.form-grid {

grid-template-columns: 1fr;

gap: 12px;

}

.two-columns {

grid-column: span 1;

}

.header h1 {

font-size: 1.8rem;

}

.card {

padding: 15px;

}

body {

padding: 10px;

}

@media (max-width: 480px) {

.header h1 {

font-size: 1.6rem;

}

input {

padding: 8px 10px;

font-size: 13px;

}

</style>

</head>

<body>

<h1>Film Clap Board Control</h1>

<p>Update film production information</p>

</div>

<input type="text" id="roll" name="roll" value=")HTML";

html += roll;

html += R"HTML(" placeholder="e.g., A001" maxlength="10">

</div>

<label for="scene">SCENE</label>

<input type="text" id="scene" name="scene" value=")HTML";

html += scene;

html += R"HTML(" placeholder="e.g., 35A" maxlength="10">

</div>

<input type="text" id="take" name="take" value=")HTML";

html += take;

html += R"HTML(" placeholder="e.g., 1" maxlength="10">

</div>

<label for="prod">PRODUCTION (PROD)</label>

<input type="text" id="prod" name="prod" value=")HTML";

html += prod;

html += R"HTML(" placeholder="e.g., PANDIPADA" maxlength="30">

</div>

<label for="director">DIRECTOR (DIR)</label>

<input type="text" id="director" name="director" value=")HTML";

html += director;

html += R"HTML(" placeholder="e.g., GOKUL" maxlength="30">

</div>

<label for="dop">DIRECTOR OF PHOTOGRAPHY (DOP)</label>

<input type="text" id="dop" name="dop" value=")HTML";

html += dop;

html += R"HTML(" placeholder="e.g., GOKUL" maxlength="30">

</div>

<input type="text" id="note" name="note" value=")HTML";

html += note;

html += R"HTML(" placeholder="e.g., ISO 120" maxlength="30">

</div>

<input type="text" id="date" name="date" value=")HTML";

html += date;

html += R"HTML(" placeholder="e.g., 11.03.1999" maxlength="15">

</div>

Update Clap Board

</button>

</div>

</form>

</div>

<p>Connect to: <strong>)HTML";

html += localIP.toString();

html += R"HTML(</strong></p>

</div>

document.addEventListener('DOMContentLoaded', function() {

// Set default date to today if empty

const dateInput = document.getElementById('date');

if (dateInput.value === '') {

const today = new Date();

const dd = String(today.getDate()).padStart(2, '0');

const mm = String(today.getMonth() + 1).padStart(2, '0');

const yyyy = today.getFullYear();

dateInput.value = `${dd}.${mm}.${yyyy}`;

}

});

</script>

</body>

</html>)HTML";

return html;

}

void handleRoot() {

server.send(200, "text/html", htmlPage());

}

void handleUpdate() {

if (server.hasArg("roll")) roll = server.arg("roll");

if (server.hasArg("scene")) scene = server.arg("scene");

if (server.hasArg("take")) take = server.arg("take");

if (server.hasArg("prod")) prod = server.arg("prod");

if (server.hasArg("director")) director = server.arg("director");

if (server.hasArg("dop")) dop = server.arg("dop");

if (server.hasArg("note")) note = server.arg("note");

if (server.hasArg("date")) date = server.arg("date");

updateDisplay();

// Redirect back to the main page

server.sendHeader("Location", "/");

server.send(303, "text/plain", "Updated. Redirecting...");

}

void setup() {

Serial.begin(115200);

// Start WiFi Access Point

WiFi.softAP(ssid, password);

localIP = WiFi.softAPIP();

Serial.println("Access Point Started");

Serial.print("IP Address: ");

Serial.println(localIP);

// Show IP on display for 5 seconds

showIPOnBoot();

// Initialize web server routes

server.on("/", handleRoot);

server.on("/update", HTTP_POST, handleUpdate);

server.begin();

Serial.println("HTTP server started");

// Initial display update

updateDisplay();

}

void loop() {

server.handleClient();

}

Display Assembly

Place the display in the display holder
Place the press board on top of the display
Use the M2 5mm screw to secure everything

Driver Board Assembly

Attach the PCB holder to the back of the PCB and secure it using four M3 x 5mm screws.
Add glue on the back of the PCB holder
Place the driver board in the main assembly..

Display Cable Extender

We need a 24-pin 0.5mm pitch, 15cm length FFC cable in reverse direction for connecting the e-paper display to the driver board. We are using a 24-pin 0.5mm pitch FFC/FPC extension connector for attaching the display cable.

Connect the FFC adapter to the display cable.
Bend the 15 cm cable into an L shape.
Connect the display to the driver board using this cable.

Battery

Attach the battery to the main body using some glue.
Connect the battery connector to the PCB.

Antenna & Backplate

Connect the antenna to the XIAO and secure it to the enclosure.
Close the backplate and screw it in place using M3 x 10mm screws.

Slate Arm

Align the slate arm and secure it in position with the M3 10 mm screw.
Place the arm holder and secure it using an M3 10 mm screw.

Slate Stripes

Slate stripes are an important part of this project as they make the slate arm's closing mechanism easily visible to the camera. There are several ways you can apply stripes: you can paint them or use vinyl stickers. However, in this case, I 3D printed them in black, made them thin, and glued them to the arm.

How to Use It

We have completed the build; let's look at how to use this device

Once the device is powered on, the ESP32S3 immediately starts running the main program. The first thing it does is create a Wi-Fi access point called “ClapBoard_AP”, secured with the password 123456789. At the same time, the device generates the IP address for its built-in web server and displays that IP on the e-paper screen for about five seconds. This makes it easy to know where to connect.

After showing the IP, the display switches to the default layout, while the Wi-Fi server continues running in the background. All the interface code for the webpage is embedded directly inside the Arduino sketch, meaning the ESP32S3 serves as a complete control panel without relying on external files. The page includes fields for ROLL, TAKE, SCENE, PRODUCTION. DIRECTOR, DIRECTOR OF PHOTOGRAPHY, NOTE, AND DATE. and it automatically adjusts its layout whether you are using a computer, tablet, or phone.

At this point, the device is ready for user interaction. Using any device, you simply join the ClapBoard_AP Wi-Fi network, open your browser, and enter the IP address that appeared during boot. This takes you straight to the control page. From here, you can type in the data. When you press “Update Display, ” the ESP32S3 receives your inputs, stores the new values, and refreshes the e-paper display with the updated scoreboard. Because the display only consumes power during the refresh cycle, it can hold the updated image without draining energy, making the system very efficient even on battery power.

Further Possibilities

eSlate – DIY Wi-Fi e-Ink Digital Film Clapperboard

As you know, we currently only have the option to display basic data on the slate. However, since we have Wi-Fi onboard, we can enhance its functionality by utilising this connection. For example, we could sync with the clipboard, receive data from Excel sheets, or manage schedules and time codes.

If you're interested in incorporating such features, please let me know. Additionally, if you would like to contribute to this project as a developer, I would love to hear from you.

This is my first project of the year, and it's an exciting time for me. I am looking forward to it! I have planned some great projects this year, so I anticipate it will be an innovative year for me. Wishing you a Happy New Year!

If you found this project helpful or inspiring, consider buying me a coffee ☕

It really helps me keep building and sharing more open-source projects.

https://buymeacoffee.com/gokuxmaker