Skip to content

OPHTML

OPHTML builds PlayStation 2 homebrew user interfaces from HTML and CSS. A build machine measures the layout, rasterizes the text and images, and packs the result into one blob. A small C99 runtime on the console only replays that blob, so the console never parses a document, runs flexbox, or lays out a frame. Focus, navigation, theming and dynamic text are all decided before the blob ships. The console only moves a cursor and swaps a table.

The build pipeline from HTML and CSS to the console: four boxes, HTML + CSS, ui.json, .uib and C runtime, joined by three arrows

Two tools sit between the two files the pipeline names. ps2ui-layout turns HTML and CSS into ui.json, and ps2ui-bake turns ui.json into .uib. How it works covers both seams and the rules the design rests on.

One blob renders in more than one theme, swapped on the console at runtime with no rebuild and no second asset set. These two pictures are the same opl-env library screen, the same blob, theme 0 then theme 1:

opl-env library screen, theme 0 (root), 4:3, initial focus

opl-env library screen, theme 1 (light), 4:3, initial focus

Start here

  • Installation installs both packages and checks each is on PATH. Do this first.
  • Quick start runs eight commands from a TTF to a served preview, on a project scaled down to fit one page.
  • Tutorial: a game browser builds the same screen from an empty directory, then drives it from a checked C loop, closer to a real project.

Requirements

need version used by
Node.js 18 or newer ps2ui-layout, ps2ui-dev
Python 3.9 or newer ps2ui, ps2ui-bake, ps2ui-check, ps2ui-fontgen
Pillow 9 or newer ps2ui-bake, ps2ui-fontgen
uharfbuzz 0.51.7 or newer ps2ui-fontgen; pip installs it, and nothing comes from the system
a TTF any ps2ui-fontgen
a C cross toolchain (ps2dev) latest the console half only, vendored by ps2ui vendor-runtime

Sections