Honda Tree of Dedication
Project Overview
On Honda’s booth at IMOS, a tall black totem told the “Honda Tree of Dedication” story: the Astra Honda Racing Team, twenty years of Honda DBL basketball, and five society programs from health to safety riding. The story plays on a big portrait screen; visitors drive it from a tablet set into the totem’s base.
The Brief
- About forty story slides across three pillars, easy for anyone walking past to browse.
- The screen sits high so the whole booth can see it. The controls belong at hand height.
- When nobody is touching it, the screen should fall back to an attract loop on its own.
- Keep it simple enough to run all show long on the booth’s own network.
Our Scope
- The tablet remote and the display page, front end only.
- The WebSocket link between them: a small Node relay and the message format.
- The slide and button artwork came with the brief; we wired it up.
01The Demo
Tap Here, Change There
The original code, running again. The tablet page is on the right, the display page on the left (upright, as it hung in the totem), and in the middle every message the relay passes along.
02Quick Primer
What Is a WebSocket?
The one idea this whole project rests on, in plain words.
How a WebSocket works
- 01
One handshake
The page starts with an ordinary web request and asks to “upgrade” it. The server agrees, and the connection stays open.
- 02
A line that stays open
Nobody has to keep asking “anything new?”. Either side can send a message the moment it has something to say.
- 03
Small messages, right away
A tap on the tablet is a few bytes of JSON, like {"section":"Racing","slide":3}. It reaches the screen in milliseconds.
| Polling (HTTP) | Server-Sent Events | WebSocketWhat we used | |
|---|---|---|---|
| Who can talk | The client asks, the server answers | Server to client only | Both sides, any time |
| Delay | Up to one polling interval | Instant | Instant |
| Traffic | A request every few seconds, news or not | One open connection | One open connection |
| Good for | Pages that refresh now and then | Live feeds and notifications | Remotes, games, chat, many screens in step |
The same pattern works anywhere screens need to agree: a tablet that runs a stage LED, live polls and quizzes on a big screen, phones as game controllers, a leaderboard that updates as people play, or a sensor that changes what a display shows. Here the relay was about twenty lines.
03Under the Hood
Small on Purpose
A booth that runs all show long wants as few moving parts as possible. This is all there was.
-
A twenty-line relay
A tiny Node.js server takes each message and hands it to every other connected screen. It doesn’t know what a slide is, so the pages could change without touching it.
-
The tablet decides, the screen follows
The tablet keeps the state: which pillar, which slide, wrapping round at either end. The display shows whatever the last message says, so there is only one source of truth.
-
An attract loop when idle
After five minutes without a tap, the tablet sends a “screensaver” message and the big screen plays a video loop. The next tap brings the story back.
-
Art first, code second
Every slide is a designed image, picked by a CSS class built from the message: section Racing, slide 3 becomes racing-slide-3. A new slide is an image, a line of CSS and a count.
04On Site
Honda at IMOS
Phone snaps from setup and the show floor.
05Our Work
Explore Others
More booths and activations built to get people playing.
Let's Build The Engine
Bring the idea, or just the problem. We'll shape the experience and build the engine behind it.
