Build spec for the case scanner screen in Modular Delivery. Every sprite on screen is described here: what it looks like, where it sits, its costumes, and what it does. The only buttons are the two mode tabs.
iPad in landscape. Canvas is 1024 × 768 (4:3), so it also maps cleanly onto a 480 × 360 Scratch-style stage if needed (multiply every number by 0.47). All positions below are the top-left corner of the sprite.
| Zone | Position (x, y) | Size (w × h) | Contents |
|---|---|---|---|
| Top bar | 0, 0 | 1024 × 64 | App title, the two mode tabs, clock and date |
| Main panel | 24, 88 | 660 × 600 | Changes with the mode: the artefact record, or the wood delivery manifest |
| Weather card | 708, 88 | 292 × 150 | Current weather (fake) |
| Forecast card | 708, 250 | 292 × 150 | Five-day forecast (fake) |
| Calendar card | 708, 412 | 292 × 276 | Month view with scheduled moves and deliveries |
| Status bar | 0, 704 | 1024 × 64 | Scanner connection, last scan time, sync state |
The right column (weather, forecast, calendar) stays the same in both modes. Only the main panel and the active tab change.
Background #F5F6F4
Cards and top bar #FFFFFF, card border #DDE1E3
Main text #1F2A36, secondary text #5D6873
Artefact mode colour #2E5E7E (museum blue)
Wood Delivery mode colour #C98A2B (timber amber)
OK / cleared #2F7D4F, warning #C0563F
One clean sans-serif throughout (SF Pro on iPad, or DM Sans). Sizes: 26 for the record title, 20 for the app title, 16 to 17 for values, 13 for field labels, 12 for small captions.
Field labels are sentence case and grey; values are bold and dark. No all-caps.
Cards have 16 px rounded corners, a 1 px border and no shadows. Inner tiles have 10 to 12 px corners.
The active mode colour is used only on the active tab, progress lines and the custody tracker, so a glance tells you which mode you are in.
| Sprite | Position / size | Looks like | Costumes / states | What it does |
|---|---|---|---|---|
| Background | 0, 0 / 1024 × 768 | Flat light grey #F5F6F4 fill with the white top bar and the status bar divider line built in | One costume | Sits behind everything. Never changes. |
| AppTitle | 24, 20 / 260 × 28 | Text "Heritage Site Database" in bold dark navy | One costume | Static label. |
| TabArtefact (button) | 332, 12 / 180 × 40 | Pill-shaped tab with the word "Artefact". Active: filled museum blue, white bold text. Inactive: pale grey fill, grey text | active, inactive | When tapped: switches to active, tells TabWood to go inactive, broadcasts "mode artefact". Main panel shows the artefact sprites. |
| TabWood (button) | 512, 12 / 180 × 40 | Same pill shape with "Wood Delivery". Active: filled timber amber, white bold text. Inactive: pale grey, grey text | active, inactive | When tapped: switches to active, tells TabArtefact to go inactive, broadcasts "mode wood". Main panel shows the wood delivery sprites. |
| Clock | right-aligned at 1000, 14 / 120 × 40 | Time in bold (10:42) with the date underneath in small grey text (Thu 12 Nov) | Text only, updated by code | Shows the fake time. Can tick forward one minute every few real seconds to make the demo feel live. |
| MainPanel | 24, 88 / 660 × 600 | White card, 16 px corners, 1 px light border | One costume | Frame that both modes draw inside. |
| WeatherIcon | 734, 114 / 56 × 56 | Simple flat icon: yellow sun, sun behind grey cloud, grey cloud with blue rain drops, or cloud with wind lines | sunny, partly cloudy, rain, windy | Matches the current fake condition. |
| WeatherTemp | 808, 112 / 120 × 48 | Large bold temperature, e.g. "14°" | Text | Shows the current fake temperature. |
| WeatherDetails | 732, 182 / 250 × 40 | Condition on the first line ("Partly cloudy"), wind and humidity in smaller grey text below | Text | Feeds the weather check in Wood Delivery mode and the humidity check in Artefact mode. |
| ForecastDay (x5 clones) | first at 726, 266, then every 55 px across / 32 × 100 each | Day name at top (Fri), small weather icon in the middle, high temperature underneath | sunny, partly cloudy, rain, windy | Five days of fake forecast. A rainy day gets a thin amber underline if a wood delivery is booked that day. |
| CalendarHeader | 732, 424 / 200 × 24 | Month name in bold, e.g. "November" | Text | Static label for the shown month. |
| CalendarDay (x28 to 35 clones) | grid from 732, 458, 36 px apart, 7 columns / 32 × 30 each | Rounded grey square with the day number. Today is filled dark navy with white number | normal, today, empty | Shows the month. Days with bookings show a dot (see next sprite). |
| CalendarDot | bottom centre of its day / 6 × 6 | Small round dot | blue (artefact move), amber (wood delivery) | Marks booked days. Both dots can sit side by side on one day. |
| CalendarLegend | 732, 632 / 250 × 18 | Blue dot "Artefact move", amber dot "Wood delivery" | One costume | Explains the dots. |
| ConnectionDot | 30, 722 / 12 × 12 | Small round light with "Scanner connected" text beside it | green (connected), grey (offline) | Shows the IR scan bay is talking to the iPad. |
| SyncText | right-aligned at 1000, 720 / 300 × 20 | Small grey text: "Last scan 10:41 Records synced" | Text | Updates the time whenever a new case is scanned. |
Why the weather is there: it is not decoration. Timber must stay dry and mortar should not be laid in rain, so Wood Delivery mode checks it. Artefacts have humidity limits, so Artefact mode checks it too. If a judge asks, that is the answer.
Shown when TabArtefact is active. The screen has three states: waiting for a case, case scanned, and code not read.
| Sprite | Position / size | Looks like | Costumes / states | What it does |
|---|---|---|---|---|
| ScanBanner | 24, 88 / 660 × 56 | Coloured strip across the top of the main panel, rounded at the top corners, with one bold line of text | waiting (pale grey, "Place a case on the scan bay"), scanned (pale green, "Case 05 scanned"), error (pale red, "Code not read. Reposition the case") | Tells the operator what the scanner is doing at a glance. |
| WaitingGraphic | centre of main panel / 240 × 240 | Outline of a case with four stripes and a thin blue scan line | scan line at 3 to 4 heights (animates up and down) | Only visible in the waiting state. Hidden once a case is scanned. |
| ArtefactImage | 48, 164 / 220 × 220 | Square tile with rounded corners, pale grey background, a clean picture or simple drawing of the object | One costume per artefact (bowl, jar, mask, manuscript) | Shows the object inside the sealed case, so nobody has to open it. |
| ArtefactName | 292, 166 / 370 × 32 | Large bold title, e.g. "Bronze offering bowl" | Text | Name of the scanned artefact. |
| ArtefactOrigin | 292, 202 / 370 × 20 | Grey line under the title: culture and era | Text | e.g. "Roman Empire, 1st century". |
| CaseID | right side of ScanBanner / 120 × 24 | Small rounded tag with the case number | Text | e.g. "Case 05". |
| InfoField (x4 clones) | 2 × 2 grid from 292, 242, 188 px across, 50 px down / 180 × 44 each | Grey label on top, bold value under it | Material, Weight, Now at, Going to | The key facts the movers need. |
| FragilityMeter | 292, 352 / 236 × 30 | Label "Fragility" with 5 short rounded bars in a row | 1 to 5 bars filled. 1 to 2 filled green, 3 amber, 4 to 5 red | Shows how delicate the object is. 4 or 5 also sets the truck to fragile mode. |
| RuleIcon (x5 clones) | row from 48, 432, 104 px apart / 96 × 76 each | Pale grey tile with a simple line icon and a 2-word caption underneath | keep upright (up arrow), max tilt (angle symbol with "10°"), temperature (thermometer "15 to 20°"), humidity (droplet "45 to 55%"), do not stack (crossed-out stacked boxes) | Handling rules for the case. A rule that does not apply is shown faded. |
| ClearanceLight | 576, 432 / 84 × 76 | Solid coloured tile with one bold word | cleared (green, "Cleared"), hold (red, "Hold") | Green means the forklift may pick the case up. Red appears if outside humidity is beyond the artefact's limit or the case is not on the move schedule. |
| CustodyTracker | 48, 540 / 600 × 100 | Label "Chain of custody", a grey line with 4 circles and captions underneath: Scanned out, Loaded, In transit, Delivered | 0 to 4 steps complete. Completed circles and the line between them fill museum blue | Shows where the case is in its journey. A second scan at storage completes "Delivered". |
Shown when TabWood is active. The right column stays; only the main panel changes.
| Sprite | Position / size | Looks like | Costumes / states | What it does |
|---|---|---|---|---|
| DeliveryBanner | 24, 88 / 660 × 56 | Pale amber strip with bold amber-brown text | at depot ("Delivery D-014: loaded at depot"), in transit ("in transit to site"), arrived ("arrived at site"), complete (pale green, "Delivery D-014 complete") | The one-line status of the current delivery. |
| RouteLine | 48, 170 / 612 × 90 | Label "Route", a thick grey line with 4 stop circles: Depot, Site, Museum, Storage. The completed part of the line is amber | 0 to 3 legs complete | Shows the whole loop so the audience sees materials going in and artefacts coming out. |
| TruckMarker | moves along RouteLine / 40 × 22 | Tiny dark navy side-view truck | facing right; flashing when stopped at a stop | Glides between stops when Coding Story 1 sends the truck on. Stops on each circle. |
| ManifestRow (x2 to 4 clones) | from 48, 302, 60 px apart / 612 × 52 each | Pale grey rounded row: material icon tile on the left, bold item name, quantity, weight, and a tick circle on the far right | pending (empty circle), unloaded (circle filled green with white tick) | One row per material on the truck. Ticks over when the arm sets that item down. |
| MaterialIcon | inside each row, left / 32 × 32 | Simple flat icon on a tinted tile | timber (light brown tile, plank with grain lines), mortar (grey tile, block), bracing prop (amber tile, strut), stone (grey tile, cut block) | Lets the operator identify each item without reading. |
| UnloadBar | 48, 446 / 612 × 56 | Label "Unloaded by arm", a rounded grey bar that fills amber, and "0 of 3 items" under its right end | 0%, 33%, 66%, 100% | Fills one step per item the construction arm unloads. At 100% the banner turns "complete". |
| DropZone | 48, 524 / 190 × 44 | Grey label "Drop zone" with bold value | Text | Where on site the materials go, e.g. "Zone B, north wall". |
| DeliveryWindow | 260, 524 / 190 × 44 | Grey label "Delivery window" with bold time range | Text | Booked time slot, e.g. "10:30 to 11:30". Matches the amber dot on today in the calendar. |
| WeatherCheck | 472, 548 / 188 × 30 | Rounded pill with a short bold message | dry (green, "Dry, safe to unload"), rain (red, "Rain, cover the timber"), wind (amber, "Strong wind, slow the arm") | Reads WeatherDetails. Ties the weather card to a real job. |
Use these exact values so the screens, the stripe codes on the real cases, and the presentation all agree.
| Case | Stripes | Name | Origin and era | Material / weight | Fragility | Rules | Now at → going to |
|---|---|---|---|---|---|---|---|
| Case 01 | 1 0 0 1 | Painted storage jar | Ancient Greece, 5th century BCE | Fired clay / 3.4 kg | 5 | Upright, max tilt 5°, do not stack | East Wing, Room 1 → Safe Storage A |
| Case 02 | 1 0 1 0 | Carved festival mask | Venice, 18th century | Painted wood / 0.6 kg | 3 | Humidity 45 to 55%, do not stack | East Wing, Room 2 → Safe Storage A |
| Case 03 | 1 0 1 1 | Illuminated manuscript page | Austrian monastery, 14th century | Parchment / 0.2 kg | 4 | Flat, temperature 15 to 20°, humidity 45 to 55% | East Wing, Room 3 → Safe Storage B |
| Case 05 | 1 1 0 1 | Bronze offering bowl | Roman Empire, 1st century | Bronze / 1.2 kg | 4 | Upright, max tilt 10° | East Wing, Room 3 → Safe Storage B |
| Delivery | Items | Drop zone | Window | Calendar day |
|---|---|---|---|---|
| D-014 | Timber beam 2.4 m x2 (48 kg), mortar block x1 (25 kg) | Zone B, north wall | 10:30 to 11:30 | Today (12th) |
| D-015 | Bracing prop x4 (36 kg), timber beam 3.0 m x2 (60 kg) | Zone A, roof scaffold | 09:00 to 10:00 | 18th |
| Item | Value |
|---|---|
| Now | 14°, partly cloudy, wind 12 km/h, humidity 58% |
| Forecast | Fri 15° sunny, Sat 11° rain, Sun 9° rain, Mon 13° windy, Tue 16° sunny |
| Calendar | November, today the 12th. Blue dots: 10th, 12th, 19th. Amber dots: 12th, 18th, 26th |
| Clock | Starts at 10:42, Thursday 12 November |
Built-in demo moment: humidity is 58%, just above the 55% limit on Case 02 and Case 03. Scanning one of those shows the red "Hold" light, which proves the system is checking rules, not just displaying them. Scan Case 05 to show the green "Cleared" path. If you would rather not risk confusing judges, set humidity to 52% and everything clears.