Skip to content

Capability 009: Movement Preview

Status: Accepted

Context

The Robot Operator enters a Translation as a direction in degrees and a Rotation as clockwise or counterclockwise. Whether a direction such as 135 points where they mean shows only once the robot moves.

With this capability, the Status Pane draws the Movement Preview: the robot seen from above, with an arrow for the direction of the Translation and one for the sense of the Rotation, as they stand in the boxes of the Command Pane. It changes with every input, before the Robot Operator clicks Translate or Rotate. The drawing fills the room that the target picture keeps for the telemetry; the Health Indicators and Telemetry Values lie over it.

References

Details

Layout of the Status Pane

┌ Status and Telemetry ─────────────────────────────┐
│ ┌ Telemetry ────────────────────────────────────┐ │
│ │ Live ● running  Ready ● ready                 │ │
│ │ Battery 36.3 V  Speed M1 -50 %  …             │ │
│ │                    │   ↷                      │ │
│ │                 ╭──↑──╮                       │ │
│ │          ───────┼──┼──┼───────                │ │
│ │                 ╰──┼──╯                       │ │
│ │                    │                          │ │
│ └───────────────────────────────────────────────┘ │
│ ┌ Event Log ─────────────────────────── [Clear] ┐ │
│ │ 18:30:05 INFO Rotation started …              │ │
│ └───────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────┘
Element Placement
Frame Telemetry Bordered; takes the height of the Status Pane that the frame Event Log leaves, at least 16 rem; the Movement Preview fills it
Health Indicators and Telemetry Values At the top of the frame Telemetry, over the Movement Preview, without a background of their own, so that they may cover part of the drawing
Frame Event Log Bordered; at the bottom of the Status Pane; the Event Log in it is 12 rem high

From 48 rem viewport width on, where the panes stand side by side, the Status Pane is as high as the viewport below the title, or as the Command Pane if that is higher.

Drawing

The drawing has its origin in the center of the frame Telemetry; up is forward, as for the direction of a Translation. With \(w\) and \(h\) the width and height of the frame, the Robot Circle has the diameter

\[d = \min\left(0.25 \cdot \max(w, h),\; 0.5 \cdot \min(w, h)\right)\]
Element Shape Stroke
Axes A horizontal and a vertical line through the origin, from edge to edge Black, 0.5 pt
Robot Circle Circle around the origin with the diameter \(d\) Black, 0.5 pt
Translation arrow Straight arrow from the origin to the Robot Circle, its head on the circle, in the direction of the box Translation: 0 up, 90 right, 180 down, 270 left Muted light blue, 2 pt
Rotation arrow Arc of 45° around the origin with the radius \(0.625 \cdot d\), starting straight above the origin; its head ends right of the start for clockwise, left of it for counterclockwise As the Translation arrow

Test vectors for the head of the Translation arrow, relative to the origin, with \(r = d/2\) and the y axis pointing up:

Direction Head
0 \((0, r)\)
90 \((r, 0)\)
180 \((0, -r)\)
270 \((-r, 0)\)
45 \((0.707 \cdot r, 0.707 \cdot r)\)

Functional Requirements

  1. The Status Pane shows the frames Telemetry and Event Log as given under Layout of the Status Pane.
  2. The frame Telemetry shows the Movement Preview as given under Drawing.
  3. The Translation arrow follows the direction in the box Translation with every input; while the direction is not a valid one of capability 006, the Movement Preview shows no Translation arrow.
  4. The Rotation arrow follows the direction in the box Rotation with every selection; while the direction is not a valid one of capability 007, the Movement Preview shows no Rotation arrow.
  5. The Movement Preview carries a text alternative that names what it shows, e.g. Movement Preview: Translation in direction 90°, Rotation clockwise.

Non-Functional Requirements

None.

Technical Requirements

  1. The blue of the arrows reaches a contrast ratio of at least 3:1 against the background of the frame Telemetry, as WCAG 2.1, success criterion 1.4.11, requires and user_experience.md demands, and of at least 5:1 against the black of the axes, so that the arrows stand out from the thin lines.

Error Handling

  1. A direction that is no valid one shows no arrow, as given in Functional Requirements 3 and 4; the Movement Preview never shows an arrow for an earlier, valid direction instead.

Out of Scope

  • The speed and duration of a movement: both arrows keep their length
  • A Translation or Rotation that runs: the Movement Preview shows the inputs, not the commands sent
  • Zooming or panning the drawing, and input by drawing

Acceptance Criteria

All criteria run against a mocked Remote Control API.

  1. Page loaded with the defaults: the Translation arrow points up, its head on the Robot Circle; the Rotation arrow is drawn clockwise.
  2. Each direction of the test vectors under Drawing entered in the box Translation: the head of the Translation arrow lies at the position of its row, within 1 px.
  3. Direction 360, then nothing entered: no Translation arrow; direction 90 entered afterwards: the Translation arrow points right.
  4. counterclockwise selected: the Rotation arrow is drawn counterclockwise; clockwise selected again: clockwise.
  5. On a viewport of 1280 × 800 px and of 320 × 640 px: the diameter of the Robot Circle follows the formula under Drawing for the size of the frame Telemetry, within 1 px, and the page does not scroll horizontally.
  6. On a viewport of 1280 × 800 px: the frame Event Log stands at the bottom of the Status Pane, the Event Log in it is 12 rem high, and the frame Telemetry fills the height above it.
  7. The axes and the Robot Circle are drawn black with 0.5 pt, the arrows blue with 2 pt; the computed contrast ratio of the blue is at least 3:1 against the background of the frame Telemetry and at least 5:1 against the black of the axes.
  8. The Health Indicators and Telemetry Values lie within the frame Telemetry and in front of the Movement Preview.
  9. Direction 90 and counterclockwise entered: the text alternative reads Movement Preview: Translation in direction 90°, Rotation counterclockwise.

Decisions

  1. The Movement Preview shows the inputs, not the commands sent. It answers whether the direction is chosen correctly before the robot moves. Consequence: while a Translation runs, a changed input shows a direction other than that of the running one.
  2. The drawing is a vector graphic in the page, not a bitmap. It scales with the frame without being drawn anew, and each element can be checked and named for assistive technology. Consequence: the drawing consists of page elements, which the tests find like any other.
  3. The diameter of the Robot Circle is bounded by half the smaller side. A quarter of the larger side alone would let the circle and the Rotation arrow leave a wide, flat frame. Consequence: in a flat frame, the Robot Circle is smaller than a quarter of its width.