PROFERIS - Mi³osz Stocki
67 lines
3.0 KiB
Markdown
67 lines
3.0 KiB
Markdown
# 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
|
||
|
||
1. Create a new folder inside `web/assets/backgrounds/` (e.g., `web/assets/backgrounds/my-custom-board/`).
|
||
2. 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).
|
||
3. 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.
|
||
|
||
```json
|
||
{
|
||
"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 }
|
||
]
|
||
}
|
||
```
|
||
- **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`).
|