From f9714c4cf69ba698b74c67d3b379f30e5de0ad8a Mon Sep 17 00:00:00 2001 From: Shuanglei Tao Date: Thu, 5 Jun 2025 21:58:50 +0800 Subject: [PATCH] add canvas size options --- html/index.html | 40 +++++++++++++++++++++++++++------- html/js/main.js | 57 ++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 77 insertions(+), 20 deletions(-) diff --git a/html/index.html b/html/index.html index 192e078..3b68016 100644 --- a/html/index.html +++ b/html/index.html @@ -3,13 +3,13 @@ - 4.2 寸电子墨水屏蓝牙控制器 + 电子墨水屏蓝牙控制器
-

4.2 寸电子墨水屏蓝牙控制器

+

电子墨水屏蓝牙控制器

蓝牙连接
@@ -20,12 +20,12 @@
- + + + + +
@@ -51,6 +51,30 @@
+
+
+ + +
+
diff --git a/html/js/main.js b/html/js/main.js index 94febfc..704922d 100644 --- a/html/js/main.js +++ b/html/js/main.js @@ -22,6 +22,26 @@ const EpdCmd = { CFG_ERASE: 0x99, }; +const canvasSizes = [ + { name: '1.54_152_152', width: 152, height: 152 }, + { name: '1.54_200_200', width: 200, height: 200 }, + { name: '2.13_250_122', width: 250, height: 122 }, + { name: '2.66_296_152', width: 296, height: 152 }, + { name: '2.9_296_128', width: 296, height: 128 }, + { name: '2.9_384_168', width: 384, height: 168 }, + { name: '3.5_384_184', width: 384, height: 184 }, + { name: '3.7_416_240', width: 416, height: 240 }, + { name: '3.97_800_480', width: 800, height: 480 }, + { name: '4.2_400_300', width: 400, height: 300 }, + { name: '5.79_792_272', width: 792, height: 272 }, + { name: '7.5_800_480', width: 800, height: 480 }, + { name: '10.2_960_640', width: 960, height: 640 }, + { name: '10.85_1360_480', width: 1360, height: 480 }, + { name: '11.6_960_640', width: 960, height: 640 }, + { name: '4E_600_400', width: 600, height: 400 }, + { name: '7.3E6', width: 480, height: 800 } +]; + function hex2bytes(hex) { for (var bytes = [], c = 0; c < hex.length; c += 2) bytes.push(parseInt(hex.substr(c, 2), 16)); @@ -159,9 +179,15 @@ async function sendcmd() { } async function sendimg() { + const canvasSize = document.getElementById('canvasSize').value; const ditherMode = document.getElementById('ditherMode').value; const epdDriverSelect = document.getElementById('epddriver'); const selectedOption = epdDriverSelect.options[epdDriverSelect.selectedIndex]; + + if (selectedOption.getAttribute('data-size') !== canvasSize) { + addLog(`画布尺寸和驱动不匹配，请重新选择。`); + return; + } if (selectedOption.getAttribute('data-color') !== ditherMode) { addLog(`颜色模式和驱动不匹配，请重新选择。`); return; @@ -220,27 +246,23 @@ function downloadDataArray() { const processedData = processImageData(imageData); const mode = document.getElementById('ditherMode').value; - // 验证六色模式的预期大小 if (mode === 'sixColor' && processedData.length !== canvas.width * canvas.height) { console.log(`错误：预期${canvas.width * canvas.height}字节，但得到${processedData.length}字节`); addLog('数组大小不匹配。请检查图像尺寸和模式。'); return; } - // 使用数组构建内容，避免拼接问题 const dataLines = []; for (let i = 0; i < processedData.length; i++) { const hexValue = (processedData[i] & 0xff).toString(16).padStart(2, '0'); dataLines.push(`0x${hexValue}`); } - // 每行格式化16个值 const formattedData = []; for (let i = 0; i < dataLines.length; i += 16) { formattedData.push(dataLines.slice(i, i + 16).join(', ')); } - // 构建最终内容 const colorModeValue = mode === 'sixColor' ? 0 : mode === 'fourColor' ? 1 : mode === 'blackWhiteColor' ? 2 : 3; const arrayContent = [ 'const uint8_t imageData[] PROGMEM = {', @@ -253,7 +275,7 @@ function downloadDataArray() { const blob = new Blob([arrayContent], { type: 'text/plain' }); const link = document.createElement('a'); - link.download = '图像数据.h'; + link.download = 'imagedata.h'; link.href = URL.createObjectURL(blob); link.click(); URL.revokeObjectURL(link.href); @@ -323,7 +345,7 @@ function handleNotify(value, idx) { epdpins.value = bytes2hex(data.slice(0, 7)); if (data.length > 10) epdpins.value += bytes2hex(data.slice(10, 11)); epddriver.value = bytes2hex(data.slice(7, 8)); - updateDitherMode(); + updateDitcherOptions(); } else { if (textDecoder == null) textDecoder = new TextDecoder(); addLog(textDecoder.decode(data), '⇓'); @@ -411,15 +433,26 @@ function clearLog() { document.getElementById("log").innerHTML = ''; } -function updateDitherMode() { +function updateCanvasSize() { + const selectedSizeName = document.getElementById('canvasSize').value; + const selectedSize = canvasSizes.find(size => size.name === selectedSizeName); + + canvas.width = selectedSize.width; + canvas.height = selectedSize.height; + + updateImage(false); +} + +function updateDitcherOptions() { const epdDriverSelect = document.getElementById('epddriver'); const selectedOption = epdDriverSelect.options[epdDriverSelect.selectedIndex]; const colorMode = selectedOption.getAttribute('data-color'); - - if (colorMode) { - document.getElementById('ditherMode').value = colorMode; - updateImage(false); - } + const canvasSize = selectedOption.getAttribute('data-size'); + + if (colorMode) document.getElementById('ditherMode').value = colorMode; + if (canvasSize) document.getElementById('canvasSize').value = canvasSize; + + updateCanvasSize(); // always update image } function updateImage(clear = false) {