osiu97/ESP32-WijiBoard
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

added board control

Browse Source
This commit is contained in:
PROFERIS - Mi³osz Stocki
2026-07-07 09:34:00 +02:00
parent 7a216ea645
commit 2e74c7d0c1
13 changed files with 731 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/assets/backgrounds/default/bg.svg
+49
View File
@@ -0,0 +1,49 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 175" width="100%" height="100%">
<!-- Wooden board background -->
<rect width="300" height="175" fill="#d2b48c" rx="10" />
<!-- Outer border -->
<rect x="5" y="5" width="290" height="165" fill="none" stroke="#5c4033" stroke-width="2" rx="5" />
<!-- Title -->
<text x="150" y="25" font-family="serif" font-size="14" text-anchor="middle" fill="#5c4033" font-weight="bold">W I J I B O A R D</text>
<!-- Sun and Moon motifs -->
<circle cx="40" cy="25" r="10" fill="none" stroke="#5c4033" stroke-width="1.5" />
<path d="M 260 15 A 10 10 0 0 0 260 35 A 8 8 0 0 1 260 15" fill="#5c4033" />
<!-- YES / NO -->
<text x="80" y="55" font-family="serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#5c4033">YES</text>
<text x="220" y="55" font-family="serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#5c4033">NO</text>
<!-- Decorative arc -->
<path d="M 50 85 Q 150 65 250 85" fill="none" stroke="#5c4033" stroke-width="0.5" stroke-dasharray="2,2" />
<!-- Letters A-K -->
<text x="50" y="85" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">A</text>
<text x="70" y="81" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">B</text>
<text x="90" y="78" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">C</text>
<text x="110" y="76" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">D</text>
<text x="130" y="75" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">E</text>
<text x="150" y="75" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">F</text>
<text x="170" y="75" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">G</text>
<text x="190" y="76" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">H</text>
<text x="210" y="78" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">I</text>
<text x="230" y="81" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">J</text>
<text x="250" y="85" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">K</text>
<!-- L-V row below -->
<text x="60" y="105" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">L</text>
<text x="80" y="102" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">M</text>
<text x="100" y="100" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">N</text>
<text x="120" y="99" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">O</text>
<text x="140" y="98" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">P</text>
<text x="160" y="98" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">Q</text>
<text x="180" y="99" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">R</text>
<text x="200" y="100" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">S</text>
<text x="220" y="102" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">T</text>
<text x="240" y="105" font-family="serif" font-size="10" text-anchor="middle" fill="#5c4033">U</text>
<!-- GOODBYE -->
<text x="150" y="160" font-family="serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#5c4033">GOODBYE</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

web/assets/backgrounds/default/spots.json
+29
View File
@@ -0,0 +1,29 @@
{
"bounds": { "xMin": -150, "xMax": 150, "yMin": -30, "yMax": 145 },
"spots": [
{ "id": "YES", "label": "YES", "x": -70, "y": 90 },
{ "id": "NO", "label": "NO", "x": 70, "y": 90 },
{ "id": "A", "label": "A", "x": -100, "y": 60 },
{ "id": "B", "label": "B", "x": -80, "y": 64 },
{ "id": "C", "label": "C", "x": -60, "y": 67 },
{ "id": "D", "label": "D", "x": -40, "y": 69 },
{ "id": "E", "label": "E", "x": -20, "y": 70 },
{ "id": "F", "label": "F", "x": 0, "y": 70 },
{ "id": "G", "label": "G", "x": 20, "y": 70 },
{ "id": "H", "label": "H", "x": 40, "y": 69 },
{ "id": "I", "label": "I", "x": 60, "y": 67 },
{ "id": "J", "label": "J", "x": 80, "y": 64 },
{ "id": "K", "label": "K", "x": 100, "y": 60 },
{ "id": "L", "label": "L", "x": -90, "y": 40 },
{ "id": "M", "label": "M", "x": -70, "y": 43 },
{ "id": "N", "label": "N", "x": -50, "y": 45 },
{ "id": "O", "label": "O", "x": -30, "y": 46 },
{ "id": "P", "label": "P", "x": -10, "y": 47 },
{ "id": "Q", "label": "Q", "x": 10, "y": 47 },
{ "id": "R", "label": "R", "x": 30, "y": 46 },
{ "id": "S", "label": "S", "x": 50, "y": 45 },
{ "id": "T", "label": "T", "x": 70, "y": 43 },
{ "id": "U", "label": "U", "x": 90, "y": 40 },
{ "id": "GOODBYE", "label": "GOODBYE", "x": 0, "y": -15 }
]
}
web/assets/backgrounds/image_spec.md
+66
View File
@@ -0,0 +1,66 @@
# 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`).
web/assets/backgrounds/portrait-right/bg.svg
+56
View File
@@ -0,0 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 175">
<!-- Background -->
<rect width="120" height="175" fill="#fdf6e3"/>
<rect x="5" y="5" width="110" height="165" fill="none" stroke="#eee8d5" stroke-width="2" rx="4"/>
<g stroke="#e0e0e0">
<!-- Row 0: 25 -->
<line x1="10" y1="25" x2="110" y2="25" stroke-width="1"/>
<line x1="10" y1="20" x2="110" y2="20" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="15" x2="110" y2="15" stroke-width="1"/>
<!-- Row 1: 41 -->
<line x1="10" y1="41" x2="110" y2="41" stroke-width="1"/>
<line x1="10" y1="36" x2="110" y2="36" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="31" x2="110" y2="31" stroke-width="1"/>
<!-- Row 2: 57 -->
<line x1="10" y1="57" x2="110" y2="57" stroke-width="1"/>
<line x1="10" y1="52" x2="110" y2="52" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="47" x2="110" y2="47" stroke-width="1"/>
<!-- Row 3: 73 -->
<line x1="10" y1="73" x2="110" y2="73" stroke-width="1"/>
<line x1="10" y1="68" x2="110" y2="68" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="63" x2="110" y2="63" stroke-width="1"/>
<!-- Row 4: 89 -->
<line x1="10" y1="89" x2="110" y2="89" stroke-width="1"/>
<line x1="10" y1="84" x2="110" y2="84" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="79" x2="110" y2="79" stroke-width="1"/>
<!-- Row 5: 105 -->
<line x1="10" y1="105" x2="110" y2="105" stroke-width="1"/>
<line x1="10" y1="100" x2="110" y2="100" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="95" x2="110" y2="95" stroke-width="1"/>
<!-- Row 6: 121 -->
<line x1="10" y1="121" x2="110" y2="121" stroke-width="1"/>
<line x1="10" y1="116" x2="110" y2="116" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="111" x2="110" y2="111" stroke-width="1"/>
<!-- Row 7: 137 -->
<line x1="10" y1="137" x2="110" y2="137" stroke-width="1"/>
<line x1="10" y1="132" x2="110" y2="132" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="127" x2="110" y2="127" stroke-width="1"/>
<!-- Row 8: 153 -->
<line x1="10" y1="153" x2="110" y2="153" stroke-width="1"/>
<line x1="10" y1="148" x2="110" y2="148" stroke-width="0.5" stroke-dasharray="2,2"/>
<line x1="10" y1="143" x2="110" y2="143" stroke-width="1"/>
</g>
<g fill="#268bd2" font-family="cursive, 'Comic Sans MS', sans-serif" font-size="14" font-style="italic" text-anchor="middle">
<text x="25" y="25">Aa</text><text x="60" y="25">Bb</text><text x="95" y="25">Cc</text>
<text x="25" y="41">Dd</text><text x="60" y="41">Ee</text><text x="95" y="41">Ff</text>
<text x="25" y="57">Gg</text><text x="60" y="57">Hh</text><text x="95" y="57">Ii</text>
<text x="25" y="73">Jj</text><text x="60" y="73">Kk</text><text x="95" y="73">Ll</text>
<text x="25" y="89">Mm</text><text x="60" y="89">Nn</text><text x="95" y="89">Oo</text>
<text x="25" y="105">Pp</text><text x="60" y="105">Qq</text><text x="95" y="105">Rr</text>
<text x="25" y="121">Ss</text><text x="60" y="121">Tt</text><text x="95" y="121">Uu</text>
<text x="25" y="137">Vv</text><text x="60" y="137">Ww</text><text x="95" y="137">Xx</text>
<text x="25" y="153">Yy</text><text x="60" y="153">Zz</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

web/assets/backgrounds/portrait-right/spots.json
+31
View File
@@ -0,0 +1,31 @@
{
"bounds": { "xMin": 30, "xMax": 150, "yMin": -30, "yMax": 145 },
"spots": [
{ "id": "A", "label": "Aa", "x": 55, "y": 120 },
{ "id": "B", "label": "Bb", "x": 90, "y": 120 },
{ "id": "C", "label": "Cc", "x": 125, "y": 120 },
{ "id": "D", "label": "Dd", "x": 55, "y": 104 },
{ "id": "E", "label": "Ee", "x": 90, "y": 104 },
{ "id": "F", "label": "Ff", "x": 125, "y": 104 },
{ "id": "G", "label": "Gg", "x": 55, "y": 88 },
{ "id": "H", "label": "Hh", "x": 90, "y": 88 },
{ "id": "I", "label": "Ii", "x": 125, "y": 88 },
{ "id": "J", "label": "Jj", "x": 55, "y": 72 },
{ "id": "K", "label": "Kk", "x": 90, "y": 72 },
{ "id": "L", "label": "Ll", "x": 125, "y": 72 },
{ "id": "M", "label": "Mm", "x": 55, "y": 56 },
{ "id": "N", "label": "Nn", "x": 90, "y": 56 },
{ "id": "O", "label": "Oo", "x": 125, "y": 56 },
{ "id": "P", "label": "Pp", "x": 55, "y": 40 },
{ "id": "Q", "label": "Qq", "x": 90, "y": 40 },
{ "id": "R", "label": "Rr", "x": 125, "y": 40 },
{ "id": "S", "label": "Ss", "x": 55, "y": 24 },
{ "id": "T", "label": "Tt", "x": 90, "y": 24 },
{ "id": "U", "label": "Uu", "x": 125, "y": 24 },
{ "id": "V", "label": "Vv", "x": 55, "y": 8 },
{ "id": "W", "label": "Ww", "x": 90, "y": 8 },
{ "id": "X", "label": "Xx", "x": 125, "y": 8 },
{ "id": "Y", "label": "Yy", "x": 55, "y": -8 },
{ "id": "Z", "label": "Zz", "x": 90, "y": -8 }
]
}
web/assets/icons.svg
+29
View File
@@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</symbol>
<symbol id="icon-board" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
</symbol>
<symbol id="icon-stepper" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3" />
<path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83" />
</symbol>
<symbol id="icon-sequence" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z" />
</symbol>
<symbol id="icon-brand" viewBox="0 0 24 24" fill="none">
<path d="M 12 3 C 18 8 21 14 19 20 C 17 22 7 22 5 20 C 3 14 6 8 12 3 Z" stroke="#a8c7fa" stroke-width="1.5" stroke-linejoin="round" />
<circle cx="12" cy="14" r="3" stroke="#a8c7fa" stroke-width="1.5" />
</symbol>
<symbol id="icon-ble" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M6.5 6.5l11 11M17.5 6.5l-5 5 5 5" />
<path d="M6 17.5l5-5-5-5" />
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB