API

Screens

Every screen is a Screen subclass. You build its layout in onEnter, and repeat the same calls in onResume so the screen comes back correctly after a child screen closes.

class MyScreen : public Screen {
 public:
  ScreenId id() const override { return kScreenMine; }

  void onEnter(ScreenManager& sm) override {
    Screen::onEnter(sm);
    addHeader("My App");
    addFooterMarquee();
    addMenu(&menu_);
  }

  void onResume(ScreenManager& sm) override {
    Screen::onResume(sm);
    addHeader("My App");
    addFooterMarquee();
    addMenu(&menu_);
  }

  void handleInput(const InputEdges& e, ScreenManager& sm) override {
    menu_.nav(e);
    if (e.confirmPressed) sm.pushScreen(kScreenChild);
    if (e.cancelPressed)  sm.popScreen();
  }

 private:
  StaticMenu menu_;
};

Screen changes fade out and back in automatically.

Header

addHeader(title, inverted = true)

The header is 10 px tall and has two parts:

• Title tab on the left: the title in upper case, in a rounded tab. Inverted (filled) by default, or an outline with inverted = false. Pass nullptr for no title.
• Status group on the right: system icons for battery, USB, Bluetooth and Wi-Fi. These are drawn by the library and screens can’t change them.

A 1 px line along the top joins the two. Titles fit about 14–20 characters, depending on how many status icons are showing.

Header Arrow

setHeaderArrow(Chrome::HeaderArrow)

An optional arrow to the left of the title that hints at the key for going back. A screen whose only footer hint would be BACK shows a ◀ in the header instead and drops the footer.

Footer

Each screen uses at most one footer form. All forms share the same 10 px slot at the bottom of the screen.

Text / Marquee

A 1 px line above centered text. A marquee scrolls when its text is too long to fit. Call resetMarquee() when the text changes.

Buttons

Filled buttons in the bottom corners, each with a one-word label in caps and an arrow. Either side can be nullptr.

addFooterButtons("Back", "Save");

Menus

Menus fill the body. Attach one with addMenu(&menu) and pass input to it with menu.nav(e). Every menu gets the same animated selector and a scrollbar on the right edge.

StaticMenu

A fixed list of items, as text rows or rows with an 11×11 icon.

const MenuItem kItems[] = {
  { "Scan",     "Scan for nearby devices", scan_11_bits },
  { "Settings", "Change device settings",  settings_11_bits },
};
menu_.setItems(kItems, 2);

InfoMenu

A read-only list of label / value pairs. Values are formatted by a function that runs every frame, so live values update on their own.

const InfoMenu::Row kRows[] = {
  { "Uptime", fmtUptime },
  { "Heap",   fmtHeap },
};
info_.setRows(kRows, 2);
addMenu(&info_);

BigIconMenu

Text rows on the left with a large 64×64 image on the right for the selected item. Good for top-level menus with only a few items.

TabMenu

Up to 3 tabs, each with its own list. Pick a tab from a row of pills, then press DOWN to enter its list. The tab slides up into the header.

const TabMenu::Tab kTabs[] = {
  { "Passive", &passiveMenu_ },
  { "Active",  &activeMenu_ },
};
tabs_.setTabs(kTabs, 2);
addTabMenu(&tabs_, "Campaign");

Custom Menus

Subclass Menu and implement itemCount() and drawRow() for dynamic or data-driven rows. drawRow() always draws the row as unselected; the selector inverts it for you.

Switch

Chrome::drawSwitch(d, x, y, on)

A 13×7 on/off switch for setting rows. RIGHT toggles it.

Modal

A popup drawn on top of the screen. While it’s open it takes all input.

const Modal kModal = {
  Modal::Layout::kBody,
  "Save changes?",
  "Yes",
  "No",
};
addModal(&kModal);

With one button, any key dismisses it. With two buttons, RIGHT picks the primary button and LEFT picks the secondary one.

Input

Screens receive InputEdges, no matter which hardware produced it (buttons, joystick, or tilt gestures).

Fonts

DevKitty UI uses a small, fixed set of fonts: