DEV Community

Ekong Ikpe
Ekong Ikpe

Posted on

Gnoke Skins: Every Device Already Has a Face. It Just Hasn't Rendered Yet.

Gnoke Skins

There is a gap between what a device knows and what it shows.

Your MiFi router knows signal strength, battery level, how many people are connected, how much data is left. Your AC unit knows the room temperature, the mode, the timer. Your PWM controller knows the duty cycle, the frequency, the load. A signal tower on a factory floor knows whether the line is running, warning, or stopped.

They all know. Most of them just never figured out how to tell you in a way that felt human.

That is not a hardware problem. That is a skin problem.


The $15,000 lesson

A while back I built SignalTower — an Andon-style stack light controller that runs in a browser tab. The point was simple: a standard industrial HMI panel setup costs $15,000 once you add the proprietary OS, the vendor lock-in, the license fees. The browser already ships with Web Serial, WebUSB, Web Bluetooth. The hardware APIs are free. The screen you already have.

SignalTower was one proof. But the skin was never meant to be device-specific. Any hardware that speaks JSON deserves a face.

What if any device that speaks JSON could get a face — designed for humans, not firmware teams under deadline?


Gnoke-Skins

Device (JSON) → config.js → Gnoke skin → Browser
Enter fullscreen mode Exit fullscreen mode

Three pieces. That is the entire architecture.

The device — any hardware that exposes a JSON endpoint. ESP32. Arduino. Raspberry Pi. STM32. A MiFi router. An AC unit. A PWM controller. A generator. A signal tower. Anything.

config.js — one file. You declare the host, map the keys, define presets. Nothing else. This is the only file that changes per deployment.

The skin — a single index.html. Pure display logic. Zero firmware dependency. Swap skins freely. The device never changes.

The firmware bridge is the only device-specific work. Everything else is reusable. One integration per hardware model — after that, every future UI is a skin change, not a firmware project. For manufacturers, that means the frontend never blocks a product launch again.


Three worlds, same idea

I built three skins so far. Each one is a different proof of the same philosophy.

MiFi — live demo

Most MiFi users never change their factory default SSID. Not because they don't want to — because 192.168.1.1 gets in the way.

The skin puts configuration directly on the device screen: SSID, password, connected users, data usage. Navigated with three physical buttons on the device body. T9 keyboard for field editing. 5-second hold-to-reset. Full boot sequence.

No phone. No laptop. No IP address typed into a browser at midnight while your internet is down.

A device that ships with this skin means the customer never sees 192.168.1.1. They see an interface that was designed for them. The telco that ships this first owns that experience.

PWM Controller — live demo

Industrial dark. Large touch targets. Segmented duty cycle bars. Preset buttons: Lathe, Pump, Drill, Boost.

The kind of interface a workshop operator can read from across a room, with gloves on, under bad lighting. Not because it is pretty — because it is right for its context.

AC Remote — live demo

Retro LCD aesthetic. Tactile button feel. Mode, fan speed, sleep, timer, swing.

Works as a phone remote or as an on-device touchscreen. Same skin, two deployment contexts. The device does not change. The surface does.


The deeper thing

A device without a screen is not a limitation. Your phone fills in. Point a browser at the JSON endpoint — the skin renders. The device gains a face it never had from the factory.

A device with a screen but terrible UI is not stuck. The screen runs a browser. The skin loads. The firmware team never has to touch the frontend again.

A device that does not exist yet — that you are sketching on paper right now — can have its UI built before the hardware ships. The skin is decoupled. The bridge connects later.

This is what I mean when I say the face is already there.

The hardware is already broadcasting. The JSON is already flowing. The state is already known. The only missing piece was a layer that catches all of it and renders it as something worth looking at — something a real person can read, navigate, and trust.

Gnoke-Skins is that layer.


The repo is MIT BSL licensed. If you build hardware and you have ever thought "my users deserve better than this" — this is what that looks like before a framework arrives to complicate it.

gnoke-skins.netlify.app
github.com/edmundsparrow/gnoke-skins


Built on an Infinix phone. Deployed to Netlify. Zero dependencies. Because the constraint is part of the philosophy.

Top comments (0)