Screen Design Guide

Applies to:

All variants

This page describes the look of the VBOX Touch’s own software: its screen layout, fonts, colours, buttons and icons. Follow it and your app will look and behave like it belongs on the unit.

Every size and position here is in screen pixels (the screen is 800 x 480) and is taken from the VBOX Touch firmware.

Developing with AI?

The VBOX Touch AI starter project contains this guide as DESIGN.md, together with the fonts and icons it uses, so an AI assistant applies it to every screen it builds.

The screen

A standard screen has three bands:

Band

y range

Colour

Holds

Header

0 - 65

Navy (0, 41, 66)

Screen title, optional second title, status icons

Content

65 - 415

White

Values, labels and buttons

Footer

415 - 480

Navy (0, 41, 66)

Icon buttons only, never text

Draw the bands at the start of the display list:

[
    gui.DL_SAVE_CONTEXT(),
    gui.DL_CLEAR_COLOR_RGB(0, 41, 66),       # navy everywhere
    gui.DL_CLEAR(1, 1, 1),
    gui.DL_SCISSOR_SIZE(800, 350),
    gui.DL_SCISSOR_XY(0, 65),
    gui.DL_CLEAR_COLOR_RGB(255, 255, 255),   # then white in the content area
    gui.DL_CLEAR(1, 1, 1),
    gui.DL_RESTORE_CONTEXT(),
],

  • Header titles are font 8 in white: the title at (30, 7) and an optional second title at (490, 7).

  • Keep content between y 65 and 415, with a 30 pixel margin.

  • Match the screen to the unit: an MFD Touch has no GNSS, and a Performance Box Touch has no CAN or serial.

Text

  • Titles, labels, units and button text are in UPPER CASE, for example SELECT MODE, PEAK G, TARGET 100.0 KM/H.

  • Labels are short instrument nouns rather than sentences, with the units in brackets: TIME (S).

  • Numbers keep a fixed width so they don’t jump as they change: zero-pad and fix the decimals ('{:05.1f}'.format(v) gives 045.7), and show -- when there is no value.

  • Each text item is one line; the unit does not wrap text.

Fonts

The VBOX Touch software uses eight fonts, each loaded into a fixed font handle with the font.py helper (included in the GForce_Meter, Torque Display and VPRS examples, see Tutorials; the font files are in the AI starter project). Load only the ones your app uses, before the first gui.show(), and copy their .rft files to the SD card.

Handle

File

Height

Use for

6

Oswald-Regular-14.rft

17

Small labels and units (the only font with lower case)

7

BebasNeue_0-28.rft

28

Button labels, row labels, prompt lines

8

BebasNeue_0-50.rft

49

Screen titles, units under a large value

9

BebasNeue_0-124.rft

124

A second headline number (digits only)

10

BebasNeue_0-184.rft

184

The main live value, e.g. speed (digits only)

11

BebasNeue_0-250_num.rft

249

One giant readout (digits only)

12

BebasNeue_0-28_num.rft

28

Small numbers in result tables (digits only)

13

BebasNeue_0-50_num.rft

49

Keypad keys, mid-size numbers (digits only)

Fonts 9 to 13 contain only digits and number punctuation; fonts 9, 10 and 11 do not even have a space. Put any words in font 7 or 8.

from font import load_font

start, _ = load_font('/sd/BebasNeue_0-28.rft', 7)
start, _ = load_font('/sd/BebasNeue_0-50.rft', 8, mempos_end=start)
start, _ = load_font('/sd/BebasNeue_0-184.rft', 10, mempos_end=start)

Fonts 7 and 8 also contain µ, ², ³ and ° as the characters \x1c, \x1d, \x1e and \x1f, so 'AV DECEL (M/S\x1d)' draws AV DECEL (M/S²).

Colours

The unit draws flat colour: no gradients, shadows or see-through panels.

Colour

RGB

Use

Navy

0, 41, 66

Header and footer bands, prompt background

White

255, 255, 255

Content area; titles, icons and button labels on navy

Black

0, 0, 0

Values, labels and lines on white

Deep blue

0, 51, 153

A second headline result on white

Button face / shading

0, 56, 112 / 0, 32, 64

Buttons (the graphics chip’s defaults)

Selected button

86, 193, 226 / 49, 110, 129

A selected option

Disabled button

194, 203, 208

An unavailable option

Inactive icon

20, 58, 88

An icon that cannot be used right now

Red

255, 0, 0

Recording, errors, out of range, no GNSS fix

Green

0, 255, 0

GNSS fix, ready (on navy only)

Mid green

0, 153, 0

Pass or in tolerance, on white

Orange / purple

255, 128, 0 / 255, 0, 255

GNSS RTK float / RTK fixed

Media blue

0, 152, 255

Logging to the SD card

Keep the status colours (red, green, orange, purple, media blue) for showing state, not decoration.

Layout and buttons

Item

Size

Position

Flat button

150 x 50

Square button

50 x 50

Menu tile

220 x 110

3 per row at x 30, 290, 550; rows at y 95 and 235

Keypad key

100 x 70

Prompt button

160 x 60

y 400, at most two

  • Use gui.CTRL_FLATBUTTON; every button has the chip’s fixed 10 pixel rounded corner.

  • A live value such as speed sits in font 11, right-aligned at (615, 90), with its units in font 8 at (625, 260).

  • A two-panel results screen has a 1 pixel black divider at x 400 (gui.DL_LINE_WIDTH(0.5)), labels in font 7 from x 465 and values in font 12 right-aligned at x 735.

  • For a selected, disabled or coloured button, see Button colours and Coloured Button and Coloured Flatbutton. A red button suits reset and a mid-green one suits start.

Icons

The VBOX Touch software uses white icons on the navy bands. The unit multiplies each icon by the current colour, so the same icon can be drawn in any colour. Draw them at their natural size.

Footer icons sit at y 410. The standard x positions are:

L0

L1

L2

L3

Middle

R4

R3

R2

R1

R0

-5

95

175

255

335

405

485

565

645

720

Typical use: the mode icon in the middle, settings at R0, reset at L0, previous and next at R1 and R0.

Header status icons sit at y -15: record at x 270, SD card at x 335 and GNSS at x 405. They show state by colour: record is red while recording; the SD card is red with no card, green when ready and media blue while logging; GNSS is red with no fix, green with a fix, orange for RTK float and purple for RTK fixed. An icon that is off is drawn in navy, so it disappears.

An icon that cannot be used right now is drawn in the inactive colour rather than hidden.

Interaction

  • Touch only: buttons and icons act when they are released.

  • Swipe left or right (more than 50 pixels) to move between screens.

  • Text is not touchable. To make a value tappable, draw an invisible tagged rectangle of at least 50 x 50 over it.

  • There is no hover effect, scrolling or animation: values update in place.

  • A confirmation or warning replaces the whole screen: navy background, up to five centred lines in font 7 or 8 at y 100, 160, 220, 280 and 340, and at most two 160 x 60 buttons at y 400 labelled with what they do, for example CANCEL and RESET.

  • Use the four LEDs above the screen for state the user should see from a distance, such as green for ready and red for recording.