Alpha v0.2.0 - UI OVERHAUL

demo/Joystick Example/README.md

@@ -1,4 +1,4 @@
-# 🕹️ Qwiic Joystick Asteroids
+# Qwiic Joystick Asteroids Example
 
 Stream the SparkFun Qwiic Joystick's X/Y position (and button) over serial, then **play a
 full game of Asteroids** with it in the **Visual** tab.
@@ -15,7 +15,7 @@ Built with **tinyStudio** for the **tinyCore** ESP32-S3 board by MR.INDUSTRIES.
 - [x] `visual.js` parses that stream and lets you **fly a ship, rotate, thrust, and shoot rocks**
 
 ```mermaid
-flowchart LR
+flowchart TD
   JOY[Qwiic Joystick] -->|I²C SDA/SCL| MCU[tinyCore]
   MCU -->|"Serial.println x,y,button"| MON[Serial Stream]
   MON --> VIS[visual.js · Asteroids]

demo/Joystick Example/asteroids.js

@@ -17,7 +17,7 @@ const DEADZONE = 90;         // ignore small wobble around center
 const START_LIVES = 3;
 
 // ---- palette (matches the visualizer) ----
-const C_BG     = [10, 15, 45];
+const C_BG     = [0, 0, 0];
 const C_SHIP   = [255, 255, 255];
 const C_ROCK   = [150, 162, 196];
 const C_BULLET = [255, 215, 0];   // gold

demo/Joystick Example/diagram.json

@@ -3,65 +3,82 @@
   "editor": "tinystudio",
   "parts": [
     {
-      "type": "tinycore",
-      "id": "tinycore_bms",
-      "left": 364.8,
-      "top": 86.39999999999999
+      "type": "potentiometer-rotary-16mm-5",
+      "id": "potentiometer-rotary-16mm-5_g9d",
+      "left": 710.4,
+      "top": -124.8,
+      "attrs": {
+        "labelOffset": [
+          65,
+          -68
+        ],
+        "label": "Potentiometer"
+      }
     },
     {
-      "type": "my-part",
-      "id": "my-part_y9r",
-      "left": 660,
-      "top": 242
+      "type": "battery-aa",
+      "id": "battery-aa_2dp",
+      "left": 329,
+      "top": -27
+    },
+    {
+      "type": "led-generic-5mm",
+      "id": "led-generic-5mm_fsn",
+      "left": 637,
+      "top": -57.599999999999994,
+      "attrs": {
+        "labelOffset": [
+          -42,
+          -67
+        ]
+      }
+    },
+    {
+      "type": "resistor",
+      "id": "resistor_hwt",
+      "left": 643.1999999999999,
+      "top": 63
     }
   ],
   "connections": [
     [
-      "tinycore_bms:8",
-      "my-part_y9r:4",
-      "#36c46b",
+      "battery-aa_2dp:+",
+      "led-generic-5mm_fsn:cathode",
+      "#e5544b",
       [
-        "v129.8",
-        "h194",
-        "v-19.2",
-        "h-1.8",
-        "v-26"
+        "h98.21",
+        "v-41.56",
+        "h-0.16"
       ]
     ],
     [
-      "tinycore_bms:9",
-      "my-part_y9r:3",
-      "#ff4d6d",
+      "led-generic-5mm_fsn:anode",
+      "potentiometer-rotary-16mm-5_g9d:leg1",
+      "#42a5f5",
       [
-        "v139.4",
-        "h214.6",
-        "v-19.2",
-        "h-2.4",
-        "v-36.6"
+        "v6.07",
+        "h66.91"
       ]
     ],
     [
-      "tinycore_bms:10",
-      "my-part_y9r:2",
-      "#00f0ff",
+      "potentiometer-rotary-16mm-5_g9d:wiper",
+      "resistor_hwt:Pin 1",
+      "#42a5f5",
       [
-        "v149",
-        "h236.2",
-        "v-9.6",
-        "h-3",
-        "v-55.8"
+        "v84.36",
+        "h-28.32",
+        "v-0.27",
+        "h-26.96"
       ]
     ],
     [
-      "tinycore_bms:11",
-      "my-part_y9r:1",
-      "#f7a400",
+      "resistor_hwt:Pin 0",
+      "battery-aa_2dp:-",
+      "#79818c",
       [
-        "v157.6",
-        "h253.8",
-        "v-57.6",
-        "h-3.6",
-        "v-16.4"
+        "h-39.36",
+        "v-30.35",
+        "h-59.81"
       ]
     ]
   ]

demo/Joystick Example/pong.js

@@ -15,7 +15,7 @@ const RANGE = 1023;          // 10-bit ADC full scale
 const WIN_SCORE = 7;
 
 // ---- palette (matches the visualizer) ----
-const C_BG     = [10, 15, 45];
+const C_BG     = [0, 0, 0];
 const C_NET    = [26, 34, 70];
 const C_PLAYER = [255, 255, 255];   // cyan
 const C_AI     = [255, 255, 255];  // pink

demo/Joystick Example/visual.js

@@ -28,7 +28,7 @@ function sx(x) { return map(x, RANGE, 0, PAD, width - PAD); }
 function sy(y) { return map(y, 0, RANGE, height - PAD, PAD); }
 
 function draw() {
-  background(10, 15, 45);
+  background(0, 0, 0);
 
   let p = parseLine(serialRead());
   if (p) { px = p.x; py = p.y; pressed = p.b === 1; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinystudio",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "An open-source desktop + web IDE for building, wiring, simulating, and flashing tiny hardware projects — code, circuit, and visual views in one place.",
   "main": "./out/main/index.js",
   "author": "MR.INDUSTRIES",
@@ -75,7 +75,7 @@
     "@types/react": "^19.1.1",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "electron": "^42.4.1",
+    "electron": "^42.5.0",
     "electron-builder": "^26.5.0",
     "electron-vite": "^3.1.0",
     "eslint": "^9.24.0",