drop old firmware support

2025-12-06 16:42:49 +08:00 · 2025-06-07 11:15:55 +08:00
parent bc8cf3b160
commit 60a77d1a52
6 changed files with 1084 additions and 56 deletions
--- a/html/index.html
+++ b/html/index.html
@@ -4,7 +4,7 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>电子墨水屏蓝牙控制器</title>
-	<link rel="stylesheet" href="css/main.css?v=20250519">
+	<link rel="stylesheet" href="css/main.css?v=20250607">
 </head>

 <body>
@@ -198,9 +198,9 @@
 			</span>
 		</div>
    </div>
-    <script type="text/javascript" src="js/dithering.js?v=20250519"></script>
-    <script type="text/javascript" src="js/paint.js?v=20250519"></script>
-    <script type="text/javascript" src="js/main.js?v=20250519"></script>
+    <script type="text/javascript" src="js/dithering.js?v=20250607"></script>
+    <script type="text/javascript" src="js/paint.js?v=20250607"></script>
+    <script type="text/javascript" src="js/main.js?v=20250607"></script>
 </body>

 </html>
--- a/html/js/main.js
+++ b/html/js/main.js
@@ -94,31 +94,7 @@ async function write(cmd, data, withResponse = true) {
  return true;
 }

-async function epdWrite(cmd, data) {
-  const chunkSize = document.getElementById('mtusize').value - 1;
-  const interleavedCount = document.getElementById('interleavedcount').value;
-  const count = Math.round(data.length / chunkSize);
-  let chunkIdx = 0;
-  let noReplyCount = interleavedCount;
-
-  if (typeof data == 'string') data = hex2bytes(data);
-
-  await write(EpdCmd.SEND_CMD, [cmd]);
-  for (let i = 0; i < data.length; i += chunkSize) {
-    let currentTime = (new Date().getTime() - startTime) / 1000.0;
-    setStatus(`命令：0x${cmd.toString(16)}, 数据块: ${chunkIdx + 1}/${count + 1}, 总用时: ${currentTime}s`);
-    if (noReplyCount > 0) {
-      await write(EpdCmd.SEND_DATA, data.slice(i, i + chunkSize), false);
-      noReplyCount--;
-    } else {
-      await write(EpdCmd.SEND_DATA, data.slice(i, i + chunkSize), true);
-      noReplyCount = interleavedCount;
-    }
-    chunkIdx++;
-  }
-}
-
-async function epdWriteImage(data, step = 'bw') {
+async function writeImage(data, step = 'bw') {
  const chunkSize = document.getElementById('mtusize').value - 2;
  const interleavedCount = document.getElementById('interleavedcount').value;
  const count = Math.round(data.length / chunkSize);
@@ -201,38 +177,24 @@ async function sendimg() {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const processedData = processImageData(imageData);

-  let dataSent = true;
  updateButtonStatus(true);
-  if (appVersion < 0x16) {
-    const driver = epdDriverSelect.value;
-    if (ditherMode === 'threeColor') {
-      const halfLength = Math.floor(processedData.length / 2);
-      await epdWrite(driver === "02" ? 0x24 : 0x10, processedData.slice(0, halfLength));
-      await epdWrite(driver === "02" ? 0x26 : 0x13, processedData.slice(halfLength));
-    } else if (ditherMode === 'blackWhiteColor') {
-      await epdWrite(driver === "04" ? 0x24 : 0x13, processedData);
-    } else {
-      addLog("当前固件不支持此颜色模式。");
-      dataSent = false;
-    }
-  } else {
+
  if (ditherMode === 'fourColor') {
-      await epdWriteImage(processedData, 'color');
+    await writeImage(processedData, 'color');
  } else if (ditherMode === 'threeColor') {
    const halfLength = Math.floor(processedData.length / 2);
-      await epdWriteImage(processedData.slice(0, halfLength), 'bw');
-      await epdWriteImage(processedData.slice(halfLength), 'red');
+    await writeImage(processedData.slice(0, halfLength), 'bw');
+    await writeImage(processedData.slice(halfLength), 'red');
  } else if (ditherMode === 'blackWhiteColor') {
-      await epdWriteImage(processedData, 'bw');
+    await writeImage(processedData, 'bw');
  } else {
    addLog("当前固件不支持此颜色模式。");
-      dataSent = false;
-    }
-  }
    updateButtonStatus();
-  if (!dataSent) return;
+    return;
+  }

  await write(EpdCmd.REFRESH);
+  updateButtonStatus();

  const sendTime = (new Date().getTime() - startTime) / 1000.0;
  addLog(`发送完成！耗时: ${sendTime}s`);
@@ -382,6 +344,15 @@ async function connect() {
    appVersion = 0x15;
  }

+  if (appVersion < 0x16) {
+    const oldURL = "https://tsl0922.github.io/EPD-nRF5/v1.5";
+    alert("!!!注意!!!\n当前固件版本过低，可能无法正常使用部分功能，建议升级到最新版本。");
+    if (confirm('是否访问旧版本上位机？')) location.href = oldURL;
+    setTimeout(() => {
+      addLog(`如遇到问题，可访问旧版本上位机: ${oldURL}`);
+    }, 500);
+  }
+
  try {
    await epdCharacteristic.startNotifications();
    epdCharacteristic.addEventListener('characteristicvaluechanged', (event) => {
--- a/html/v1.5/css/main.css
+++ b/html/v1.5/css/main.css
@@ -0,0 +1,370 @@
+:root {
+    --primary-color: #0d6efd;
+    --primary-hover: #0b5ed7;
+    --secondary-color: #6c757d;
+    --secondary-hover: #5c636a;
+
+    --dark-bg: #121212;
+    --dark-text: #e0e0e0;
+    --dark-fieldset-bg: #1e1e1e;
+    --dark-border: #333;
+    --dark-code-bg: #2d2d2d;
+    --dark-log-bg: #2a2a2a;
+    --dark-input-bg: #2d2d2d;
+    --dark-input-text: #e0e0e0;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: system-ui, -apple-system, sans-serif;
+    overflow-x: hidden;
+}
+
+.debug {
+    display: none !important;
+}
+
+body.debug-mode .debug {
+    display: flex !important;
+}
+
+body.debug-mode {
+    background-color: var(--dark-bg);
+    color: var(--dark-text);
+}
+
+body.debug-mode .main {
+    background-color: var(--dark-bg);
+    color: var(--dark-text);
+}
+
+body.debug-mode fieldset {
+    background-color: var(--dark-fieldset-bg);
+    box-shadow: 0 .5rem 0.5rem rgba(0, 0, 0, 0.5);
+}
+
+body.debug-mode h3 {
+    border-bottom: 1px solid var(--dark-border);
+    color: var(--dark-text);
+}
+
+body.debug-mode code {
+    background: var(--dark-code-bg);
+    color: #ff9800;
+}
+
+body.debug-mode #log {
+    background: var(--dark-log-bg);
+    border: 1px solid var(--dark-border);
+}
+
+body.debug-mode #log .time {
+    color: #8bc34a;
+}
+
+body.debug-mode #log .action {
+    color: #03a9f4;
+}
+
+body.debug-mode input[type=text],
+body.debug-mode input[type=number],
+body.debug-mode select {
+    background-color: var(--dark-input-bg);
+    color: var(--dark-input-text);
+    border-color: var(--dark-border);
+}
+
+body.debug-mode input[type=file] {
+    color: var(--dark-input-text);
+    background-color: transparent;
+    border-color: var(--dark-border);
+}
+
+body.debug-mode input[type=file]::file-selector-button {
+    background-color: var(--dark-fieldset-bg);
+    color: var(--dark-input-text);
+    border-color: var(--dark-border);
+}
+
+body.debug-mode input[type=file]::file-selector-button:hover {
+    background-color: #333;
+    border-color: #444;
+}
+
+body.debug-mode fieldset legend {
+    color: #64b5f6;
+}
+
+.main {
+    width: 100%;
+    max-width: 950px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    background: #fff;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    box-sizing: border-box;
+}
+
+.footer {
+    display: flex;
+    gap: 10px;
+    font-size: 0.8rem;
+    color: #666;
+    flex-wrap: wrap;
+    margin: 1rem 0;
+}
+
+.footer .links {
+    display: flex;
+    align-items: center;
+}
+
+.footer .links a {
+    color: #666;
+    text-decoration: none;
+    position: relative;
+    padding: 0 8px;
+}
+
+.footer .links a:first-child {
+    padding-left: 0;
+}
+
+.footer .links a:not(:last-child)::after {
+    content: "•";
+    position: absolute;
+    right: -4px;
+    color: #999;
+}
+
+.footer a:hover {
+    color: #0d6efd;
+    text-decoration: underline;
+}
+
+body.debug-mode .footer .links a:not(:last-child)::after {
+    color: #666;
+}
+
+body.debug-mode .footer {
+    color: #999;
+}
+
+body.debug-mode .footer a {
+    color: #999;
+}
+
+body.debug-mode .footer a:hover {
+    color: #64b5f6;
+}
+
+h3 {
+    padding-bottom: .3em;
+    border-bottom: 1px solid #CCC;
+    text-align: center;
+}
+
+fieldset {
+    border: none;
+    box-shadow: 0 .5rem 0.5rem rgba(0, 0, 0, 0.2);
+    background-color: #f8f9fa;
+    padding: 10px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+}
+
+fieldset legend {
+    font-weight: bold;
+    color: rgba(0, 0, 255, 0.6);
+}
+
+code {
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+    background: #CCC;
+    border-radius: 3px;
+}
+
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.flex-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+}
+
+#status {
+    margin: 10px 0;
+}
+
+#log {
+    width: 100%;
+    min-height: 100px;
+    max-height: 300px;
+    margin: 0;
+    padding: 5px;
+    background: #DDD;
+    overflow: auto;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    box-sizing: border-box;
+}
+
+#log .time {
+    color: #333;
+}
+
+#log .action {
+    color: #666;
+}
+
+#canvas-box {
+    margin-top: 10px;
+    width: 100%;
+}
+
+#canvas {
+    border: black solid 1px;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+button {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--primary-color);
+    border-radius: 0.375rem;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+button:disabled {
+    opacity: 0.65;
+}
+
+button.primary {
+    color: #fff;
+    background-color: var(--primary-color);
+}
+
+button.primary:hover {
+    color: #fff;
+    border-color: var(--primary-hover);
+    background-color: var(--primary-hover);
+}
+
+button.secondary {
+    color: #fff;
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
+}
+
+button.secondary:hover {
+    color: #fff;
+    border-color: var(--secondary-hover);
+    background-color: var(--secondary-hover);
+}
+
+input[type=text],
+input[type=number],
+select {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    padding: .2rem .75rem;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+input[type=file] {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    max-width: 100%;
+}
+
+input::file-selector-button {
+    font-size: 0.9rem;
+    font-weight: 400;
+    line-height: 1.5;
+    border: 1px solid var(--primary-color);
+    border-radius: 0.375rem;
+    cursor: pointer;
+}
+
+select {
+    padding: .3rem 2.25rem .3rem .75rem;
+}
+
+input:focus,
+select:focus {
+    border: 1px solid #86b7fe;
+    box-shadow: 0 0 4px rgba(0, 120, 215, 0.8);
+    outline: 0;
+}
+
+label {
+    margin-right: 4px;
+    white-space: nowrap;
+}
+
+.status-bar {
+    display: none;
+    font-size: 85%;
+    color: #666;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px dotted #AAA;
+}
+
+@media (max-width: 768px) {
+    .flex-container {
+        flex-direction: column;
+    }
+
+    .left-controls,
+    .right-controls {
+        margin-left: 0;
+        width: 100%;
+    }
+
+    .canvas-log-container {
+        flex-direction: column;
+    }
+
+    #log {
+        height: 150px;
+        margin-top: 10px;
+    }
+
+    fieldset {
+        padding: 8px;
+    }
+
+    button {
+        width: auto;
+    }
+
+    input[type=text],
+    input[type=number],
+    select {
+        max-width: 100%;
+        margin-bottom: 5px;
+    }
+}
--- a/html/v1.5/index.html
+++ b/html/v1.5/index.html
--- a/html/v1.5/js/dithering.js
+++ b/html/v1.5/js/dithering.js
@@ -0,0 +1,212 @@
+const bwrPalette = [
+  [0, 0, 0, 255],
+  [255, 255, 255, 255],
+  [255, 0, 0, 255]
+]
+
+const bwPalette = [
+  [0, 0, 0, 255],
+  [255, 255, 255, 255],
+]
+
+function dithering(ctx, width, height, threshold, type) {
+  const bayerThresholdMap = [
+    [  15, 135,  45, 165 ],
+    [ 195,  75, 225, 105 ],
+    [  60, 180,  30, 150 ],
+    [ 240, 120, 210,  90 ]
+  ];
+
+  const lumR = [];
+  const lumG = [];
+  const lumB = [];
+  for (let i=0; i<256; i++) {
+    lumR[i] = i*0.299;
+    lumG[i] = i*0.587;
+    lumB[i] = i*0.114;
+  }
+  const imageData = ctx.getImageData(0, 0, width, height);
+
+  const imageDataLength = imageData.data.length;
+
+  // Greyscale luminance (sets r pixels to luminance of rgb)
+  for (let i = 0; i <= imageDataLength; i += 4) {
+    imageData.data[i] = Math.floor(lumR[imageData.data[i]] + lumG[imageData.data[i+1]] + lumB[imageData.data[i+2]]);
+  }
+
+  const w = imageData.width;
+  let newPixel, err;
+
+  for (let currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {
+    if (type === "gray") {
+      const factor = 255 / (threshold - 1);
+      imageData.data[currentPixel] = Math.round(imageData.data[currentPixel] / factor) * factor;
+    } else if (type ==="none") {
+      // No dithering
+      imageData.data[currentPixel] = imageData.data[currentPixel] < threshold ? 0 : 255;
+    } else if (type ==="bayer") {
+      // 4x4 Bayer ordered dithering algorithm
+      var x = currentPixel/4 % w;
+      var y = Math.floor(currentPixel/4 / w);
+      var map = Math.floor( (imageData.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2 );
+      imageData.data[currentPixel] = (map < threshold) ? 0 : 255;
+    } else if (type ==="floydsteinberg") {
+      // Floyda€"Steinberg dithering algorithm
+      newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
+      err = Math.floor((imageData.data[currentPixel] - newPixel) / 16);
+      imageData.data[currentPixel] = newPixel;
+
+      imageData.data[currentPixel       + 4 ] += err*7;
+      imageData.data[currentPixel + 4*w - 4 ] += err*3;
+      imageData.data[currentPixel + 4*w     ] += err*5;
+      imageData.data[currentPixel + 4*w + 4 ] += err*1;
+    } else {
+      // Bill Atkinson's dithering algorithm
+      newPixel = imageData.data[currentPixel] < threshold ? 0 : 255;
+      err = Math.floor((imageData.data[currentPixel] - newPixel) / 8);
+      imageData.data[currentPixel] = newPixel;
+
+      imageData.data[currentPixel       + 4 ] += err;
+      imageData.data[currentPixel       + 8 ] += err;
+      imageData.data[currentPixel + 4*w - 4 ] += err;
+      imageData.data[currentPixel + 4*w     ] += err;
+      imageData.data[currentPixel + 4*w + 4 ] += err;
+      imageData.data[currentPixel + 8*w     ] += err;
+    }
+
+    // Set g and b pixels equal to r
+    imageData.data[currentPixel + 1] = imageData.data[currentPixel + 2] = imageData.data[currentPixel];
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+}
+
+// white: 1, black/red: 0
+function canvas2bytes(canvas, type='bw', invert = false) {
+  const ctx = canvas.getContext("2d");
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+  const arr = [];
+  let buffer = [];
+
+  for (let y = 0; y < canvas.height; y++) {
+    for (let x = 0; x < canvas.width; x++) {
+      const i = (canvas.width * y + x) * 4;
+      if (type !== 'red') {
+        buffer.push(imageData.data[i] === 0 && imageData.data[i+1] === 0 && imageData.data[i+2] === 0 ? 0 : 1);
+      } else {
+        buffer.push(imageData.data[i] > 0 && imageData.data[i+1] === 0 && imageData.data[i+2] === 0 ? 0 : 1);
+      }
+
+      if (buffer.length === 8) {
+        const data = parseInt(buffer.join(''), 2);
+        arr.push(invert ? ~data : data);
+        buffer = [];
+      }
+    }
+  }
+  return arr;
+}
+
+function getColorDistance(rgba1, rgba2) {
+  const [r1, b1, g1] = rgba1;
+  const [r2, b2, g2] = rgba2;
+
+  const rm = (r1 + r2 ) / 2;
+
+  const r = r1 - r2;
+  const g = g1 - g2;
+  const b = b1 - b2;
+
+  return Math.sqrt((2 + rm / 256) * r * r + 4 * g * g + (2 + (255 - rm) / 256) * b * b);
+}
+
+function getNearColor(pixel, palette) {
+  let minDistance = 255 * 255 * 3 + 1;
+  let paletteIndex = 0;
+
+  for (let i = 0; i < palette.length; i++) {
+    const targetColor = palette[i];
+    const distance = getColorDistance(pixel, targetColor);
+    if (distance < minDistance) {
+      minDistance = distance;
+      paletteIndex = i;
+    }
+  }
+
+  return palette[paletteIndex];
+}
+
+
+function getNearColorV2(color, palette) {
+  let minDistanceSquared = 255*255 + 255*255 + 255*255 + 1;
+
+  let bestIndex = 0;
+  for (let i = 0; i < palette.length; i++) {
+      let rdiff = (color[0] & 0xff) - (palette[i][0] & 0xff);
+      let gdiff = (color[1] & 0xff) - (palette[i][1] & 0xff);
+      let bdiff = (color[2] & 0xff) - (palette[i][2] & 0xff);
+      let distanceSquared = rdiff*rdiff + gdiff*gdiff + bdiff*bdiff;
+      if (distanceSquared < minDistanceSquared) {
+          minDistanceSquared = distanceSquared;
+          bestIndex = i;
+      }
+  }
+  return palette[bestIndex];
+
+}
+
+
+function updatePixel(imageData, index, color) {
+  imageData[index] = color[0];
+  imageData[index+1] = color[1];
+  imageData[index+2] = color[2];
+  imageData[index+3] = color[3];
+}
+
+function getColorErr(color1, color2, rate) {
+  const res = [];
+  for (let i = 0; i < 3; i++) {
+    res.push(Math.floor((color1[i] - color2[i]) / rate));
+  }
+  return res;
+}
+
+function updatePixelErr(imageData, index, err, rate) {
+  imageData[index] += err[0] * rate;
+  imageData[index+1] += err[1] * rate;
+  imageData[index+2] += err[2] * rate;
+}
+
+function ditheringCanvasByPalette(canvas, palette, type) {
+  palette = palette || bwrPalette;
+
+  const ctx = canvas.getContext('2d');
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const w = imageData.width;
+
+  for (let currentPixel = 0; currentPixel <= imageData.data.length; currentPixel+=4) {
+    const newColor = getNearColorV2(imageData.data.slice(currentPixel, currentPixel+4), palette);
+
+    if (type === "bwr_floydsteinberg") {
+      const err = getColorErr(imageData.data.slice(currentPixel, currentPixel+4), newColor, 16);
+
+      updatePixel(imageData.data, currentPixel, newColor);
+      updatePixelErr(imageData.data, currentPixel +4, err, 7);
+      updatePixelErr(imageData.data, currentPixel + 4*w - 4, err, 3);
+      updatePixelErr(imageData.data, currentPixel + 4*w, err, 5);
+      updatePixelErr(imageData.data, currentPixel + 4*w + 4, err, 1);
+    } else {
+      const err = getColorErr(imageData.data.slice(currentPixel, currentPixel+4), newColor, 8);
+
+      updatePixel(imageData.data, currentPixel, newColor);
+      updatePixelErr(imageData.data, currentPixel +4, err, 1);
+      updatePixelErr(imageData.data, currentPixel +8, err, 1);
+      updatePixelErr(imageData.data, currentPixel +4 * w - 4, err, 1);
+      updatePixelErr(imageData.data, currentPixel +4 * w, err, 1);
+      updatePixelErr(imageData.data, currentPixel +4 * w + 4, err, 1);
+      updatePixelErr(imageData.data, currentPixel +8 * w, err, 1);
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+}
--- a/html/v1.5/js/main.js
+++ b/html/v1.5/js/main.js
@@ -0,0 +1,369 @@
+let bleDevice, gattServer;
+let epdService, epdCharacteristic;
+let startTime, msgIndex;
+let canvas, ctx, textDecoder;
+
+const EpdCmd = {
+  SET_PINS:  0x00,
+  INIT:      0x01,
+  CLEAR:     0x02,
+  SEND_CMD:  0x03,
+  SEND_DATA: 0x04,
+  REFRESH:   0x05,
+  SLEEP:     0x06,
+
+  SET_TIME:  0x20,
+
+  SET_CONFIG: 0x90,
+  SYS_RESET:  0x91,
+  SYS_SLEEP:  0x92,
+  CFG_ERASE:  0x99,
+};
+
+function resetVariables() {
+  gattServer = null;
+  epdService = null;
+  epdCharacteristic = null;
+  msgIndex = 0;
+  document.getElementById("log").value = '';
+}
+
+async function write(cmd, data, withResponse=true) {
+  if (!epdCharacteristic) {
+    addLog("服务不可用，请检查蓝牙连接");
+    return false;
+  }
+  let payload = [cmd];
+  if (data) {
+    if (typeof data == 'string') data = hex2bytes(data);
+    if (data instanceof Uint8Array) data = Array.from(data);
+    payload.push(...data)
+  }
+  addLog(`<span class="action">⇑</span> ${bytes2hex(payload)}`);
+  try {
+    if (withResponse)
+      await epdCharacteristic.writeValueWithResponse(Uint8Array.from(payload));
+    else
+      await epdCharacteristic.writeValueWithoutResponse(Uint8Array.from(payload));
+  } catch (e) {
+    console.error(e);
+    if (e.message) addLog("write: " + e.message);
+    return false;
+  }
+  return true;
+}
+
+async function epdWrite(cmd, data) {
+  const chunkSize = document.getElementById('mtusize').value - 1;
+  const interleavedCount = document.getElementById('interleavedcount').value;
+  const count = Math.round(data.length / chunkSize);
+  let chunkIdx = 0;
+  let noReplyCount = interleavedCount;
+
+  if (typeof data == 'string') data = hex2bytes(data);
+
+  await write(EpdCmd.SEND_CMD, [cmd]);
+  for (let i = 0; i < data.length; i += chunkSize) {
+    let currentTime = (new Date().getTime() - startTime) / 1000.0;
+    setStatus(`命令：0x${cmd.toString(16)}, 数据块: ${chunkIdx+1}/${count+1}, 总用时: ${currentTime}s`);
+    if (noReplyCount > 0) {
+      await write(EpdCmd.SEND_DATA, data.slice(i, i + chunkSize), false);
+      noReplyCount--;
+    } else {
+      await write(EpdCmd.SEND_DATA, data.slice(i, i + chunkSize), true);
+      noReplyCount = interleavedCount;
+    }
+    chunkIdx++;
+  }
+}
+
+async function setDriver() {
+  await write(EpdCmd.SET_PINS, document.getElementById("epdpins").value);
+  await write(EpdCmd.INIT, document.getElementById("epddriver").value);
+}
+
+async function syncTime(mode) {
+  const timestamp = new Date().getTime() / 1000;
+  const data = new Uint8Array([
+    (timestamp >> 24) & 0xFF,
+    (timestamp >> 16) & 0xFF,
+    (timestamp >> 8) & 0xFF,
+    timestamp & 0xFF,
+    -(new Date().getTimezoneOffset() / 60),
+    mode
+  ]);
+  if(await write(EpdCmd.SET_TIME, data)) {
+    addLog("时间已同步！");
+  }
+}
+
+async function clearScreen() {
+  if(confirm('确认清除屏幕内容?')) {
+    await write(EpdCmd.CLEAR);
+  }
+}
+
+async function sendcmd() {
+  const cmdTXT = document.getElementById('cmdTXT').value;
+  if (cmdTXT == '') return;
+  const bytes = hex2bytes(cmdTXT);
+  await write(bytes[0], bytes.length > 1 ? bytes.slice(1) : null);
+}
+
+async function sendimg() {
+  const status = document.getElementById("status");
+  const driver = document.getElementById("epddriver").value;
+  const mode = document.getElementById('dithering').value;
+
+  if (mode === '') {
+    alert('请选择一种取模算法！');
+    return;
+  }
+
+  startTime = new Date().getTime();
+  status.parentElement.style.display = "block";
+
+  if (mode.startsWith('bwr')) {
+    const invert = (driver === '02') || (driver === '05');
+    await epdWrite(driver === "02" ? 0x24 : 0x10, canvas2bytes(canvas, 'bw'));
+    await epdWrite(driver === "02" ? 0x26 : 0x13, canvas2bytes(canvas, 'red', invert));
+  } else {
+    await epdWrite(driver === "04" ? 0x24 : 0x13, canvas2bytes(canvas, 'bw'));
+  }
+
+  await write(EpdCmd.REFRESH);
+
+  const sendTime = (new Date().getTime() - startTime) / 1000.0;
+  addLog(`发送完成！耗时: ${sendTime}s`);
+  setStatus(`发送完成！耗时: ${sendTime}s`);
+  setTimeout(() => {
+    status.parentElement.style.display = "none";
+  }, 5000);
+}
+
+function updateButtonStatus() {
+  const connected = gattServer != null && gattServer.connected;
+  const status = connected ? null : 'disabled';
+  document.getElementById("reconnectbutton").disabled = (gattServer == null || gattServer.connected) ? 'disabled' : null;
+  document.getElementById("sendcmdbutton").disabled = status;
+  document.getElementById("calendarmodebutton").disabled = status;
+  document.getElementById("clockmodebutton").disabled = status;
+  document.getElementById("clearscreenbutton").disabled = status;
+  document.getElementById("sendimgbutton").disabled = status;
+  document.getElementById("setDriverbutton").disabled = status;
+}
+
+function disconnect() {
+  updateButtonStatus();
+  resetVariables();
+  addLog('已断开连接.');
+  document.getElementById("connectbutton").innerHTML = '连接';
+}
+
+async function preConnect() {
+  if (gattServer != null && gattServer.connected) {
+    if (bleDevice != null && bleDevice.gatt.connected) {
+      bleDevice.gatt.disconnect();
+    }
+  }
+  else {
+    resetVariables();
+    try {
+      bleDevice = await navigator.bluetooth.requestDevice({
+        optionalServices: ['62750001-d828-918d-fb46-b6c11c675aec'],
+        acceptAllDevices: true
+      });
+    } catch (e) {
+      console.error(e);
+      if (e.message) addLog("requestDevice: " + e.message);
+      addLog("请检查蓝牙是否已开启，且使用的浏览器支持蓝牙！建议使用以下浏览器：");
+      addLog("• 电脑: Chrome/Edge");
+      addLog("• Android: Chrome/Edge");
+      addLog("• iOS: Bluefy 浏览器");
+      return;
+    }
+
+    await bleDevice.addEventListener('gattserverdisconnected', disconnect);
+    setTimeout(async function () { await connect(); }, 300);
+  }
+}
+
+async function reConnect() {
+  if (bleDevice != null && bleDevice.gatt.connected)
+    bleDevice.gatt.disconnect();
+  resetVariables();
+  addLog("正在重连");
+  setTimeout(async function () { await connect(); }, 300);
+}
+
+function handleNotify(value, idx) {
+  const data = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
+  if (idx == 0) {
+    addLog(`收到配置：${bytes2hex(data)}`);
+    const epdpins = document.getElementById("epdpins");
+    const epddriver = document.getElementById("epddriver");
+    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));
+    filterDitheringOptions();
+  } else {
+    if (textDecoder == null) textDecoder = new TextDecoder();
+    const msg = textDecoder.decode(data);
+    addLog(`<span class="action">⇓</span> ${msg}`);
+  }
+}
+
+async function connect() {
+  if (bleDevice == null || epdCharacteristic != null) return;
+
+  try {
+    addLog("正在连接: " + bleDevice.name);
+    gattServer = await bleDevice.gatt.connect();
+    addLog('  找到 GATT Server');
+    epdService = await gattServer.getPrimaryService('62750001-d828-918d-fb46-b6c11c675aec');
+    addLog('  找到 EPD Service');
+    epdCharacteristic = await epdService.getCharacteristic('62750002-d828-918d-fb46-b6c11c675aec');
+    addLog('  找到 Characteristic');
+  } catch (e) {
+    console.error(e);
+    if (e.message) addLog("connect: " + e.message);
+    disconnect();
+    return;
+  }
+
+  try {
+    await epdCharacteristic.startNotifications();
+    epdCharacteristic.addEventListener('characteristicvaluechanged', (event) => {
+      handleNotify(event.target.value, msgIndex++);
+    });
+  } catch (e) {
+    console.error(e);
+    if (e.message) addLog("startNotifications: " + e.message);
+  }
+
+  await write(EpdCmd.INIT);
+
+  document.getElementById("connectbutton").innerHTML = '断开';
+  updateButtonStatus();
+}
+
+function setStatus(statusText) {
+  document.getElementById("status").innerHTML = statusText;
+}
+
+function addLog(logTXT) {
+  const log = document.getElementById("log");
+  const now = new Date();
+  const time = String(now.getHours()).padStart(2, '0') + ":" +
+         String(now.getMinutes()).padStart(2, '0') + ":" +
+         String(now.getSeconds()).padStart(2, '0') + " ";
+  log.innerHTML += '<span class="time">' + time + '</span>' + logTXT + '<br>';
+  log.scrollTop = log.scrollHeight;
+  while ((log.innerHTML.match(/<br>/g) || []).length > 20) {
+    var logs_br_position = log.innerHTML.search("<br>");
+    log.innerHTML = log.innerHTML.substring(logs_br_position + 4);
+    log.scrollTop = log.scrollHeight;
+  }
+}
+
+function clearLog() {
+  document.getElementById("log").innerHTML = '';
+}
+
+function hex2bytes(hex) {
+  for (var bytes = [], c = 0; c < hex.length; c += 2)
+    bytes.push(parseInt(hex.substr(c, 2), 16));
+  return new Uint8Array(bytes);
+}
+
+function bytes2hex(data) {
+  return new Uint8Array(data).reduce(
+    function (memo, i) {
+      return memo + ("0" + i.toString(16)).slice(-2);
+    }, "");
+}
+
+function intToHex(intIn) {
+  let stringOut = ("0000" + intIn.toString(16)).substr(-4)
+  return stringOut.substring(2, 4) + stringOut.substring(0, 2);
+}
+
+async function update_image() {
+  let image = new Image();;
+  const image_file = document.getElementById('image_file');
+  if (image_file.files.length > 0) {
+    const file = image_file.files[0];
+    image.src = URL.createObjectURL(file);
+  } else {
+    image.src = document.getElementById('demo-img').src;
+  }
+
+  image.onload = function(event) {
+    URL.revokeObjectURL(this.src);
+    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+    convert_dithering()
+  }
+}
+
+function clear_canvas() {
+  if(confirm('确认清除画布内容?')) {
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+}
+
+function convert_dithering() {
+  const mode = document.getElementById('dithering').value;
+  if (mode === '') return;
+
+  if (mode.startsWith('bwr')) {
+    ditheringCanvasByPalette(canvas, bwrPalette, mode);
+  } else {
+    dithering(ctx, canvas.width, canvas.height, parseInt(document.getElementById('threshold').value), mode);
+  }
+}
+
+function filterDitheringOptions() {
+  const driver = document.getElementById('epddriver').value;
+  const dithering = document.getElementById('dithering');
+  for (let optgroup of dithering.getElementsByTagName('optgroup')) {
+    const drivers = optgroup.getAttribute('data-driver').split('|');
+    const show = drivers.includes(driver);
+    for (option of optgroup.getElementsByTagName('option')) {
+      if (show)
+        option.removeAttribute('disabled');
+      else
+        option.setAttribute('disabled', 'disabled');
+    }
+  }
+  dithering.value = '';
+}
+
+function checkDebugMode() {
+  const link = document.getElementById('debug-toggle');
+  const urlParams = new URLSearchParams(window.location.search);
+  const debugMode = urlParams.get('debug');
+  
+  if (debugMode === 'true') {
+      document.body.classList.add('debug-mode');
+      link.innerHTML = '正常模式';
+      link.setAttribute('href', window.location.pathname);
+      addLog("注意：开发模式功能已开启！不懂请不要随意修改，否则后果自负！");
+  } else {
+      document.body.classList.remove('debug-mode');
+      link.innerHTML = '开发模式';
+      link.setAttribute('href', window.location.pathname + '?debug=true');
+  }
+}
+
+document.body.onload = () => {
+  textDecoder = null;
+  canvas = document.getElementById('canvas');
+  ctx = canvas.getContext("2d");
+
+  updateButtonStatus();
+  update_image();
+  filterDitheringOptions();
+
+  checkDebugMode();
+}