omega-zero UI

The shelf's backdrop: the backdrop colour under one of the patterns in Settings › Theme › Background, each a tile drawn in whole art pixels and drifting left with data-moving (16px a second, Bits 10), as crates/omega-ui/src/backdrop.rs draws them. The Style picked above puts the same pattern behind every example on this page.

<div class="omega-backdrop" data-style="rivets" data-moving></div>

The palette is made from the backdrop colour. Its ramp is Mega Man Zero's own menu colours, which is what Amber gives; any other colour keeps how light each step is and turns the ramp to its own hue, taking as much colour as it has itself. Night, the default, gives plain greys. OmegaPalette.apply(name) sets these properties and every component draws itself again. The swatches follow the colour picked above.

The menu window and nothing else: a double-lined frame that stacks what it is given top to bottom. It knows nothing of what it holds; usually that is <omega-panel>s, which grow to share its height and share one stripe where they meet. It fills the box the page gives it.

<omega-modal>
  <omega-panel label="BUTTON SETTING" active></omega-panel>
  <omega-panel label="ATTACK MODE"></omega-panel>
</omega-modal>

A titled section for inside a modal: a dark tab with the title from its left edge and a slanted end, the bright strip beside it, and a well below for the content.

<omega-panel label="BUTTON SETTING" active>
  …the section's content…
</omega-panel>

One setting in a panel's well: its name on the left, its value on the right, 13 art pixels tall, as tall as a panel's header. The row under the cursor is lit the way a title tab is drawn, a band in the tab colour inside a frame line with its corner pixels left out, its name cream and its value bright. A value Left and Right change gets a ◀ and a ▶ while lit, a row that opens another screen a › at its end. Without any of that it is a plain name and value line. Five rows and four fit, with their two headers, in the modal of a 640×480 screen.

<omega-panel label="CONFIGS" active>
  <omega-row label="FAST FORWARD" value="6X" lit carets></omega-row>
  <omega-row label="CONTROLS" opens></omega-row>
  <omega-row label="SAVE SLOT" value="AUTO" carets dim></omega-row>
</omega-panel>

<omega-row label="IP" value="192.168.1.20"></omega-row>   <!-- a plain line -->

A Wi-Fi network or a Bluetooth device in a list: an <omega-row> whose name keeps its own case, with what it is to the handheld on the right. A network's row then has a padlock if it needs a password and the top bar's Wi-Fi icon, as many of its three parts lit as the signal is strong; room is kept for the padlock and the bars on every row, so they line up down the list. A device's row has its kind's icon where the bars end, in the middle of a room 9 art pixels wide, and keeps no room for a padlock or bars, so a list of devices lines its values and icons up the same way. Lit and dim as <omega-row>.

<omega-list-row label="Home" value="CONNECTED" signal="3" lock lit></omega-list-row>
<omega-list-row label="Café Guest" signal="2"></omega-list-row>

<omega-list-row label="8BitDo SN30 Pro" value="CONNECTED" device="gamepad"></omega-list-row>
<omega-list-row label="Mi Smart Band 4" device="other"></omega-list-row>   <!-- found only: no value -->

A level on one line, like Mega Man Zero's life gauge: a title tab naming it, then a well of cells, as many lit as the level reaches, and an icon at its end. It is a panel's header with the strip beside the tab made the gauge, 15 art pixels tall like the bottom bar, so it sits with the menus and on its own over a game: the volume, the brightness, the blue light and the rewind left. One cell to a step reads best, 9 for a level of 0 to 9; 20 cells of 5% each for 0 to 100. The cells stand on the title's capitals' rows.

<omega-gauge label="VOLUME" value="55" max="100" cells="20" icon="volume"></omega-gauge>
<omega-gauge label="BRIGHTNESS" value="6" max="9" cells="9" icon="brightness"></omega-gauge>

A word on what just happened, as a lone panel says it: the title tab names what it is about and the well holds one line. It comes and goes on its own, over a game, the shelf or a menu, where the gauges stand. The tab hugs its title and the strip takes whatever room the line leaves, so the toast is as wide as the wider of the two. The line starts in line with the title, in its own case, with 4 rows of well above its capitals and 4 below; 34 art pixels tall.

<omega-toast label="SAVE STATE" text="State saved"></omega-toast>
<omega-toast label="LINK" text="Link was ended"></omega-toast>

What a game is doing that lasts, in the corner over it: the bottom bar's key cap holding a 7×7 sprite and a word after it. Fast forward shows how fast, dark while R2 is held and lit once it is latched; a link shows the link, lit while hosting and dark when joined, and the link broken once it is lost. Lit, it is drawn as a lit row's band: the tab colour with a frame line round it. 9 art pixels tall like a key cap, its sprite and word on the capitals' rows, two pixels clear of either end.

<omega-badge icon="fastforward" text="×4"></omega-badge>       <!-- held -->
<omega-badge icon="fastforward" text="×4" lit></omega-badge>   <!-- latched -->
<omega-badge icon="link" lit></omega-badge>                    <!-- hosting a link -->

Which save state the switcher shows (MENU ×2 in a game), over its screenshot at the top in the middle, under the top bar: a panel titled SAVE STATES, how long ago the save shown was made in its well, and under that a dot for each save the cart has, newest first, the one shown lit. Its tab is only as wide as its title, and it is as wide as the title, the age or the dots need, 41 art pixels tall; the switcher gives it the room of the widest age among its saves, so it holds still as the selection moves. The age starts in line with the title, the dots a row past its line, where a descender reaches, and the well shows as much under them as over the age's capitals.

<omega-saves age="4 min ago" count="4" at="1"></omega-saves>
<omega-saves age="Just now" count="2" style="width: calc(108 * var(--u))"></omega-saves>

A screen's keys on one line of the kit, on a ground of their own, for where the bottom bar's hints would sit on a picture: a title tab naming what they are for, then a well holding the keys, each its key in a small dark cap and then the word, as the bar draws its hints. It is drawn as <omega-gauge> with the keys in the well for its cells, 15 art pixels tall like the bar; their capitals stand on the title's rows, so each cap fills the well's inside from top to bottom, and the well shows 2 art pixels either side of them. Put one just above the bar over a game or a photo, where the bar's own hints would be hard to read. Given a width, the well takes what is over, the keys at its left, so a line can keep the room of its widest keys as one comes and goes.

<omega-hints label="NETWORK" hint="X SCAN | Y FORGET"></omega-hints>
<omega-hints label="NETWORK" hint="X SCAN" style="width: calc(150 * var(--u))"></omega-hints>   <!-- held as wide -->

The bar along the bottom of a screen, as wide as what holds it and 15 art pixels tall: an <action-left> and an <action-right> at its ends and, between them, nothing but the keys a screen has beyond the two actions, so whatever is behind the bar shows through. The two actions come out one width: the bar gives both the room of the wider label and the wider hint, and an empty one takes the other's. The keys go between them as hints, each its key in a small dark cap and then the word, centred between the actions and on the same rows as the words in the buttons.

<omega-bar hint="Y FORGET | X EDIT">
  <action-left slot="left" label="BACK" hint="B"></action-left>
  <action-right slot="right" label="JOIN" hint="A"></action-right>
</omega-bar>

The bar's button pill standing on its own, both its ends rounded, a word in its dark middle: on the shelf, the shelf's system, GBA, GB or GBC, in the bar's middle between its two actions, in the middle of the screen. It is always there on the shelf, even with only one shelf. L1 and R1 change the system, and the pill rises into place with the new one over 220 ms; a letter jumped to with Up or Down shows in it for about 2.2 s, then the system rises back. It sinks with the shelf's actions when the bar changes them, and is gone while the core picker is open. 15 art pixels tall, the bar's height, with 3 dark pixels either side of the word's ink, on the rows the buttons print their hints on: pill_face in crates/omega-ui/src/kit/action.rs draws the same pixels.

<omega-pill text="GBA"></omega-pill>

<omega-bar>
  <action-left slot="left" label="CONTROLS" hint="SELECT"></action-left>
  <omega-pill slot="middle" text="GBA" centred></omega-pill>
  <action-right slot="right" label="SETTINGS" hint="START"></action-right>
</omega-bar>

Settings › Theme › Font picks how the actions' labels are drawn. Bold, the default, draws each letter again a pixel to its right; thin draws Pixel Code's own one-pixel strokes, a pixel a letter narrower, over the same shadow and with the same 10 rows of capitals. font on the bar gives it to both actions, which still come out one width: the shelf's two 107 art pixels wide in thin and 115 in bold, a menu's 90 and 97.

<omega-bar font="thin">
  <action-left slot="left" label="RETURN" hint="B"></action-left>
  <action-right slot="right" label="CONFIRM" hint="A"></action-right>
</omega-bar>

The art of the link screen a game opens with SELECT + MENU, one piece at a time: the link port along the console's top edge, the GBA link cable's plug on its cable, the wireless adapter, the radio arcs it calls out with and the clicks of a plug going home. The screen moves them, a whole art pixel at a time: the plug drops into the port and lifts out of it, a failed link shakes it a pixel either way, and the arcs pulse in the four steps of a fade. The plug and the adapter are real things and keep their own colours, the plug the purple of the real cable (the joiner's end grey, wider, with the socket a third player's cable goes into); the port, the arcs and the clicks follow the palette.

<omega-link piece="plug" role="host"></omega-link>
<omega-link piece="port" width="320" height="36"></omega-link>
<omega-link piece="arc" ring="2" side="left"></omega-link>

What SELECT + MENU opens over a PlayStation game on several discs, where the link screen opens on a GBA or a Game Boy; the game is held under it. It is put together from the kit, over the backdrop: a lone DISC panel where the LINK panel goes, 200 art pixels wide and 8 down, with DISC lit and its carets (the disc picked, of how many), IN DRIVE (the disc in it) and the game's title as a note; the game's discs side by side between the panel and the bar, 8 art pixels apart, as big as they all fit, the one picked raised 6 art pixels and the rest faded back a step; and the bar, B RETURN and A SWAP with ◀▶ PICK between them. Left and Right pick a disc and stop at either end; A swaps the one picked into the drive, closes the screen and says so in a DISC toast ("Disc 2 inserted"); B, SELECT or SELECT + MENU again close it with the disc left in. A game on one disc opens nothing: its toast says "Only one disc".

<omega-panel label="DISC" active>
  <omega-row label="DISC" value="2 OF 3" lit carets></omega-row>
  <omega-row label="IN DRIVE" value="DISC 1"></omega-row>
  <p class="disc-note">Final Fantasy VII</p>
</omega-panel>
<omega-bar hint="◀▶ PICK">
  <action-left slot="left" label="RETURN" hint="B"></action-left>
  <action-right slot="right" label="SWAP" hint="A"></action-right>
</omega-bar>

A picture of a screen in a handheld's bezel: the shell (a dark outline, a rim in the frame colour, the plate colour), the black bezel with its corner pixels left out, and the glass's edge line round the picture, which is the page's own image or video, so it keeps its alt text. The bezel is 10 art pixels each side, so a 640×480 screenshot at its own size makes a 680×500 screen and omega-zero's 2×2 art pixels stay 2×2. The picture is a whole number of pixels tall, pixelated at its own size or bigger and smoothed smaller. led lights the power light under the picture.

led, at its own size: the boot logo

smaller, smoothed

<omega-screen led>
  <img src="media/shelf.png" alt="The shelf…" width="640" height="480">
</omega-screen>

One thing told about in a few lines, like a feature: its icon in a dark box, its title beside it and its text under both, inside an edge line with its corner pixels left out. The title and the text are the page's own, so a title can be a real heading. The icons are sprites 11 art pixels square in the middle of a 17-pixel box, in the palette's colours; the theme icon is the palette's four lightest steps, which the Colour turns. In a panel's well, or straight on the backdrop.

<omega-card icon="cart">
  <h3 slot="title">The shelf</h3>
  <p>Solid carts in their own plastics, with real label scans.</p>
</omega-card>

A page's tabs, drawn as a row of panel titles: each tab the dark title tab of an <omega-panel> with its slanted end, on the bright strip, the stripe line under the row and the panel's edge line round it. The tab shown is an active panel's title, the tab colour and a cream word; the others are dark with a dim word, cream under the pointer. The tabs are the page's own links, each to the part it shows, so with scripts off they are links to parts all shown one under the other. It is an ARIA tablist: Left and Right move to the tab before or after and show it, Home and End the first and last; a click, Enter or Space shows the tab pressed; keyboard focus underlines the word. Narrower than its tabs, it wraps them into rows, each on its own strip.

<omega-tabs label="omega-zero" hash>
  <a href="#home">HOME</a>
  <a href="#install">INSTALL</a>
</omega-tabs>
<section id="home">…</section>
<section id="install">…</section>