Merge pull request #2 from ClasspadDev/dev

Dev
TheRainbowPhoenix · Aug 11, 2024 · 8505b1e · 8505b1e
2 parents d8c6299 + 4fe6b4f
commit 8505b1e
Show file tree

Hide file tree

Showing 71 changed files with 10,866 additions and 804 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Generated files
+.svelte-kit
+dist
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+font.ts
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ A simple drawing test !
 
 ## Start using in your browser
 
-<a href="https://gitpod.io/#https://github.com/TheRainbowPhoenix/CP-Canvas">
+<a href="https://gitpod.io/#https://github.com/ClasspadDev/CP-Canvas">
   <img
     src="https://img.shields.io/badge/Contribute%20with-Gitpod-908a85?logo=gitpod"
     alt="Contribute with Gitpod"
@@ -26,3 +26,8 @@ Choose "make public" to your app port
 - Quick access buttons
 - Fake poweroff animation
 - Fake HomeScreen UI
+
+## Changelog
+2-Jan-2023
+ - Added debug x/y mouse position
+ - Ported custom font functions and 5x6/7x8 fonts
diff --git a/index.html b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
+    <title>Classpas Canvas</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/public/fnt/5x6 b/public/fnt/5x6
diff --git a/public/fnt/7x8 b/public/fnt/7x8
diff --git a/public/fnt/7x8-up2x b/public/fnt/7x8-up2x
diff --git a/public/p_walk0 b/public/p_walk0
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/screens/code_font.png b/screens/code_font.png
diff --git a/screens/dialog_font.png b/screens/dialog_font.png
diff --git a/screens/extractor/dialog_font_list.js b/screens/extractor/dialog_font_list.js
@@ -0,0 +1,16 @@
+const dlg_font_list = {
+    "charmap": "!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuvwxyz{|}~0123456789_éàù€_↺_⚙️_",
+    "charWidths": [
+        4, 9, 8, 11, 9, 4, 7, 7, 8, 8, 5, 8, 5, 7,
+        // 0123456789 ...
+        7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 4, 4, 9, 8, 9, 7, 12,
+        // ABCDEF ...
+        8, 8, 8, 8, 7, 7, 8, 8, 4, 7, 8, 7, 10, 8, 8, 8, 8, 8, 8, 8, 8, 8, 12, 9, 10, 7, 6, 6, 9, 8,
+        // abcdef ...
+        7, 7, 7, 7, 7, 6, 7, 7, 4, 5, 7, 4, 10, 7, 8, 7, 7, 6, 7, 6, 7, 7, 10, 7, 7, 6, 7, 4, 7, 11,
+        // 0123456789' '
+        7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 4, 5, 7, 7, 7, 9, 8, 22, 8, 21, 8
+
+
+    ]
+}
diff --git a/screens/extractor/dialog_font_list.png b/screens/extractor/dialog_font_list.png
diff --git a/screens/extractor/index.html b/screens/extractor/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paste Image to Canvas</title>
+    <style>
+        #canvas {
+            image-rendering: pixelated; /* Ensure pixelated rendering */
+            width: 1024px; /* Scaled width (x4) */
+            height: 18px; /* Scaled height (x4) */
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas" width="1024" height="18"></canvas> <!-- 20x40 px canvas -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/screens/extractor/paste_script.js b/screens/extractor/paste_script.js
@@ -0,0 +1,39 @@
+document.addEventListener('paste', (event) => {
+    const clipboardItems = event.clipboardData.items;
+    for (const item of clipboardItems) {
+        if (item.type.startsWith('image/')) {
+            const blob = item.getAsFile();
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                const img = new Image();
+                img.onload = () => {
+                    const canvas = document.getElementById('canvas');
+                    const ctx = canvas.getContext('2d');
+                    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+                    ctx.drawImage(img, 0, 0, img.width, img.height);
+
+                    const imageData = ctx.getImageData(0, 0, img.width, img.height);
+                    const data = imageData.data;
+                    let matrix = [];
+                    for (let y = 0; y < img.height; y++) {
+                        let row = [];
+                        for (let x = 0; x < img.width; x++) {
+                            const index = (y * img.width + x) * 4;
+                            const r = data[index]; // Red channel
+                            // Determine the value (0 for white, 1 for red)
+                            const value = r == 90 ? 1 : r == 231 ? 2 : 0;
+                            row.push(value);
+                        }
+                        matrix.push(row);
+                    }
+
+                    // Print the matrix in the desired format
+                    let matrixString = matrix.map(row => row.join(', ')).join(',\n');
+                    console.log(matrixString);
+                };
+                img.src = event.target.result;
+            };
+            reader.readAsDataURL(blob);
+        }
+    }
+});
diff --git a/screens/extractor/script.js b/screens/extractor/script.js
@@ -0,0 +1,65 @@
+const dlg_font_list = {
+    "charmap": "!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuvwxyz{|}~0123456789_éàù€_↺_⚙️_",
+    "charWidths": [
+        4, 9, 8, 11, 9, 4, 7, 7, 8, 8, 5, 8, 5, 7,
+        // 0123456789 ...
+        7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 4, 4, 9, 8, 9, 7, 12,
+        // ABCDEF ...
+        8, 8, 8, 8, 7, 7, 8, 8, 4, 7, 8, 7, 10, 8, 8, 8, 8, 8, 8, 8, 8, 8, 12, 9, 10, 7, 6, 6, 9, 8,
+        // abcdef ...
+        7, 7, 7, 7, 7, 6, 7, 7, 4, 5, 7, 4, 10, 7, 8, 7, 7, 6, 7, 6, 7, 7, 10, 7, 7, 6, 7, 4, 7, 11,
+        // 0123456789' '
+        7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 4, 5, 7, 7, 7, 9, 8, 22, 8, 21, 8
+    ]
+}
+
+const charmap = dlg_font_list.charmap.split("");
+const charWidths = dlg_font_list.charWidths;
+
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+const img = new Image();
+img.src = 'dialog_font_list.png'; // Ensure this path is correct
+
+img.onload = () => {
+    ctx.drawImage(img, 0, 0);
+
+    const ui_char_map = {};
+    let x = 0;
+    for (let i = 0; i < charmap.length; i++) {
+        const char = charmap[i];
+        const width = charWidths[i];
+
+        // Extract the character's pixel data
+        const imageData = ctx.getImageData(x, 0, width, 18);
+        const data = imageData.data;
+
+        // Convert to 0 and 1 format based on the red channel
+        let charData = [];
+        for (let y = 0; y < 18; y++) {
+            let row = [];
+            for (let xx = 0; xx < width; xx++) {
+                const index = (y * width + xx) * 4;
+                const r = data[index];
+
+                const value = r == 90 ? 1 : r == 231 ? 2 : 0;
+
+                row.push(value);
+            }
+            charData = charData.concat(row);
+        }
+
+        // Add the character data to the output object
+        ui_char_map[char] = {
+            size: [width, 18],
+            data: charData
+        };
+
+        // Move to the next character position, considering the 1px space
+        x += width + 1;
+    }
+
+    // Print the resulting JSON object to the console
+    console.log(JSON.stringify(ui_char_map, null, 2));
+};
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,27 +1,123 @@
 <script lang="ts">
-	import Background from "./lib/Background.svelte";
-	import SubPixel from "./lib/SubPixel.svelte";
 	import Canvas from "./lib/Canvas.svelte";
 	import ClassPad from "./lib/ClassPad.svelte";
-	import { clearScreen, Debug_Printf, doDrawPixels } from "./lib/drawing";
-	import TouchTest from "./lib/TouchTest.svelte";
-	import { onMount } from "svelte";
+	import {
+		clearScreen,
+		Debug_Printf,
+		doDrawPixels,
+		drawAllDebug,
+		exampleDisplay,
+		LCD_ClearScreen,
+		LCD_Refresh,
+		Debug_SelectMode1,
+	} from "./lib/drawing";
+	import { keyEventHandler } from "./lib/helpers";
+	import { onDestroy, onMount } from "svelte";
+	import { WinMain } from "./lib/ui/basic";
+	import {
+		test_custom_fonts,
+		test_custom_textures,
+		test_virtual_keyboard,
+	} from "./lib/textures/test";
+	import { animationFrameLoop } from "./specs";
+	import { get } from "svelte/store";
+	import SidePanel from "./lib/ide/SidePanel.svelte";
+	import { RemakeUI } from "./lib/ui/remake";
 
 	onMount(() => {
 		clearScreen();
 	});
+
+	onDestroy(() => {
+		if ($animationFrameLoop) {
+			cancelAnimationFrame($animationFrameLoop);
+		}
+	});
+
+	function handleKey(ev) {
+		// console.log("Key event:", ev.key);
+		// keyEventHandler(ev.key);
+		// translate the key to KEY_*
+		let key = null;
+		// check 0-9
+		if (ev.key >= "0" && ev.key <= "9") {
+			key = "KEYCODE_" + ev.key;
+		}
+		// Arrow keys
+		if (ev.key.startsWith("Arrow")) {
+			key = "KEYCODE_" + ev.key.substring(5).toUpperCase();
+		}
+		// check for other keys
+		switch (ev.key) {
+			case "Enter":
+				key = "KEYCODE_EXE";
+				break;
+			case "Backspace":
+				key = "KEYCODE_BACKSPACE";
+				break;
+			case "x":
+				key = "KEYCODE_X";
+				break;
+			case "y":
+				key = "KEYCODE_Y";
+				break;
+			case "z":
+				key = "KEYCODE_Z";
+				break;
+			case "+":
+				key = "KEYCODE_PLUS";
+				break;
+			case "-":
+				key = "KEYCODE_MINUS";
+				break;
+			case "*":
+				key = "KEYCODE_TIMES";
+				break;
+			case "/":
+				key = "KEYCODE_DIVIDE";
+				break;
+			case ",":
+				key = "KEYCODE_COMMA";
+				break;
+			case ".":
+				key = "KEYCODE_DOT";
+				break;
+			case "(":
+				key = "KEYCODE_OPEN_PARENTHESIS";
+				break;
+			case ")":
+				key = "KEYCODE_CLOSE_PARENTHESIS";
+				break;
+			case "^":
+				key = "KEYCODE_POWER";
+				break;
+			case "=":
+				key = "KEYCODE_EQUALS";
+				break;
+			// wasd
+			case "w":
+				key = "KEYCODE_UP";
+				break;
+			case "a":
+				key = "KEYCODE_LEFT";
+				break;
+			case "s":
+				key = "KEYCODE_DOWN";
+				break;
+			case "d":
+				key = "KEYCODE_RIGHT";
+				break;
+		}
+		if (key == null) return;
+		keyEventHandler(key);
+	}
 </script>
 
+<svelte:window on:keydown={handleKey} />
 <main>
 	<div class="card">
 		<ClassPad>
 			<Canvas slot="screen" />
-			<!-- <CanvasLoop slot="screen">
-				<Background color="hsl(0, 0%, 10%)">
-					<SubPixel divisions={30} color="hsla(0, 0%, 100%, 0.5)" />
-				</Background>
-				<TouchTest />
-			</CanvasLoop> -->
 		</ClassPad>
 
 		<div class="toolbar">
@@ -30,10 +126,26 @@
 			<button on:click={() => Debug_Printf(0, 1, true, "Hello...")}
 				>Hello</button
 			>
-			<button on:click={() => Debug_Printf(0, 1, true, "World...")}
-				>World</button>
+			<button on:click={drawAllDebug}>DrawAllDebug</button>
+			<button on:click={exampleDisplay}>ExampleDisplay</button>
+			<button on:click={LCD_Refresh}>LCD_Refresh</button>
+			<button on:click={LCD_ClearScreen}>LCD_ClearScreen</button>
+			<button on:click={Debug_SelectMode1}>Debug_SelectMode1</button>
+			<button on:click={WinMain}>Test_PEG</button>
+			<button on:click={RemakeUI}>Mock_UI</button>
+			<button on:click={test_custom_fonts}>Test Custom Fonts</button>
+			<button on:click={test_custom_textures}>Test Custom Textures</button>
+			<button on:click={test_virtual_keyboard}>Test Virtual Keyboard</button>
+		</div>
+
+		<div class="debug">
+			<pre>
+				<span id="db-ms-x" />
+				<span id="db-ms-y" />
+			</pre>
 		</div>
 	</div>
+	<SidePanel />
 </main>
 
 <style>
@@ -47,4 +159,9 @@
 		flex-direction: column;
 		gap: 1rem;
 	}
+	.debug {
+		position: fixed;
+		top: 0;
+		right: 270px;
+	}
 </style>
diff --git a/src/app.css b/src/app.css
@@ -44,7 +44,6 @@ h1 {
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 

diff --git a/src/assets/font-all.png b/src/assets/font-all.png
diff --git a/src/assets/font-ui-caps.png b/src/assets/font-ui-caps.png
diff --git a/src/assets/font-ui-low.png b/src/assets/font-ui-low.png
diff --git a/src/assets/font-ui-numbers.png b/src/assets/font-ui-numbers.png
diff --git a/src/assets/pattern.svg b/src/assets/pattern.svg
diff --git a/src/assets/svelte.svg b/src/assets/svelte.svg