WijiBoard Background Image Specifications

If you are developing custom backgrounds for the Board Control section, follow these technical specifications to ensure your design perfectly aligns with the SCARA mechanism's physical limits and the web UI's coordinate system.

1. Physical Dimensions & Proportions

The underlying coordinate system of the WijiBoard maps directly to the physical workspace of the SCARA arm in millimeters (mm).

Total Physical Width (X-axis): 300 mm
Total Physical Height (Y-axis): 175 mm
Aspect Ratio: 300:175 (which simplifies exactly to 12:7)

Physical Boundaries:

X Range: -150 (Left) to +150 (Right). Center is 0.
Y Range: -30 (Bottom) to +145 (Top). Note: The arm bases (motors) are located near Y=0, so the usable board area extends upwards.

2. Raster Images (PNG, WebP, JPG)

If you are designing your background in Photoshop, GIMP, or another raster editor:

Resolution: Your image must have a 12:7 aspect ratio. Recommended resolutions are:
- 1200 × 700 px
- 2400 × 1400 px (Recommended for high-DPI/Retina screens)
- 3000 × 1750 px
Color Depth: Standard 24-bit RGB or 32-bit RGBA (if transparency is needed).
Format: Optimized PNG or WebP is recommended to prevent compression artifacts around text/letters.

3. Vector Graphics (SVG) - Highly Recommended

If you are using Illustrator, Inkscape, or writing SVG by hand, vector graphics are preferred because they scale infinitely without losing quality.

ViewBox: Set your SVG viewBox to exactly match the physical proportions, for example: viewBox="0 0 300 175".
Coordinate Mapping: If your viewBox is 0 0 300 175:
- SVG X = Physical X + 150
- SVG Y = 145 - Physical Y
Keep paths clean and compress the SVG if it contains highly complex paths.

4. Setting Up Your New Background

Create a new folder inside web/assets/backgrounds/ (e.g., web/assets/backgrounds/my-custom-board/).
Place your image in this folder and name it bg.svg or bg.png (Update board-control.js if you change the file extension to PNG).
Create a spots.json file in the exact same folder to define your clickable targets.

`spots.json` Format

This file tells the web UI where your letters/targets are located in physical millimeters, NOT image pixels.

{
  "hasAlphabet": true,
  "bounds": {
    "xMin": -150,
    "xMax": 150,
    "yMin": -30,
    "yMax": 145
  },
  "spots": [
    { "id": "yes", "label": "YES", "x": -60.5, "y": 125.0 },
    { "id": "no",  "label": "NO",  "x": 60.5,  "y": 125.0 },
    { "id": "A",   "label": "A",   "x": -118.0, "y": 95.0 }
  ]
}

hasAlphabet: (Optional, boolean) If true, this background is used for the "Input Text" feature. The letters in spots are used to spell out typed input.
bounds: Defines the physical bounding box (in mm) that your background image represents. This automatically adjusts the UI's aspect ratio and coordinate mapping!
spots: Array of target objects.
id: Unique identifier for the dropdown list.
label: Human-readable text shown on the UI.
x: The X coordinate in physical mm (-150 to +150).
y: The Y coordinate in physical mm (-30 to +145).

3.2 KiB Raw Blame History Unescape Escape