Capability 002: Basic Page Layout

Status: Accepted

Context

The Web App has to present a clear concept to the Robot Operator: it must be immediately clear where to enter commands and where to read the state of the robot.

This capability divides the page into a Command Pane and a Status Pane, both still empty, as the foundation of the target picture.

References

• Title of the page: capability 001
• Target picture: target_picture.md
• Responsive web and user experience: directives in responsive_web.md and user_experience.md

Details

Panes

Pane	Heading	Content
Command Pane	Commands	Input fields and buttons that command the robot
Status Pane	Status and Telemetry	The state of the robot; output only, apart from controls of its own display

Layout

Viewport width	Arrangement
Below 48 rem (768 px)	The Command Pane above the Status Pane, each as wide as the page
48 rem (768 px) and wider	Side by side: the Command Pane on the left, the Status Pane on the right. The Command Pane takes one third of the width, but at least 20 rem (320 px); the Status Pane takes the rest

Functional Requirements

1. Below the heading of capability 001, the Web App shows the Command Pane and the Status Pane, each with its heading as given under Panes, arranged as given under Layout.

Non-Functional Requirements

1. Non-Functional Requirements 1 and 2 of capability 001 apply to the headings of both panes as well.

Technical Requirements

None.

Error Handling

None.

Out of Scope

• The content of the panes: commands, telemetry, and status
• Resizing the panes by the Robot Operator
• Hiding or collapsing a pane
• A live stream of a camera

Acceptance Criteria

1. Opened at / at a viewport width of 1280 px: the Command Pane with the heading Commands is on the left, the Status Pane with the heading Status and Telemetry on the right.
2. Opened at / at a viewport width of 1920 px: the Command Pane takes one third of the width, the Status Pane the rest.
3. Opened at / at a viewport width of 768 px: the panes are side by side, and the Command Pane is 320 px wide.
4. Opened at / at viewport widths of 320 px and 767 px: the Command Pane is above the Status Pane, and both are as wide as the page.
5. Opened at / at viewport widths of 320 px, 768 px, and 1920 px: the page is not wider than the viewport, and the contrast ratio of each pane heading against its background is at least 4.5:1.

Decisions

1. Fixed panes instead of a splitter that the Robot Operator can move. A movable splitter needs a library or own code for mouse, touch, and keyboard; fixed widths suffice for the layout. Consequence: the Command Pane must fit its widest content within its minimum width.
2. The Command Pane is the narrower one. Telemetry, and later perhaps a live stream of a camera, need more room than the commands. Consequence: a command that does not fit 20 rem needs a wider minimum.
3. On narrow viewports, the Command Pane comes first. Commanding the robot is the primary task of the Robot Operator; mobile-first lays out the panes in this order. Consequence: on a phone, the Robot Operator scrolls down to read the state of the robot.