feat: 完善功能，适配 PRO 设备

assets/main.js

@@ -17,8 +17,17 @@ window.addEventListener('DOMContentLoaded', () => {
   let lastRefreshTime = 0;
 
   // 显示参数
-  const SHOW_WIDTH = 350; // 屏幕宽度
+  let SHOW_WIDTH = 160; // Canvas 显示宽度（用于网页显示）
-  const SHOW_HEIGHT = 172; // 屏幕高度
+  let SHOW_HEIGHT = 80; // Canvas 显示高度（用于网页显示）
+  let LCD_X = 160; // 设备实际宽度
+  let LCD_Y = 80; // 设备实际高度
+
+  // 分辨率选项配置
+  const RESOLUTIONS = {
+    '160x80': { showWidth: 320, showHeight: 240, lcdX: 160, lcdY: 80 },
+    '350x172': { showWidth: 320, showHeight: 240, lcdX: 350, lcdY: 172 },
+    '320x240': { showWidth: 320, showHeight: 240, lcdX: 320, lcdY: 240 }
+  };
 
   // RGB565颜色定义
   const RED = 0xF800;
@@ -167,6 +176,32 @@ window.addEventListener('DOMContentLoaded', () => {
   // 创建全局监控器实例
   const monitor = new SystemMonitor();
 
+  // 分辨率选择事件监听器
+  const resolutionSelect = document.getElementById('resolution');
+
+  resolutionSelect.addEventListener('change', (e) => {
+    
+    const selectedResolution = e.target.value;
+    const resolutionConfig = RESOLUTIONS[selectedResolution];
+    
+    // 更新显示参数
+    SHOW_WIDTH = resolutionConfig.showWidth;
+    SHOW_HEIGHT = resolutionConfig.showHeight;
+    LCD_X = resolutionConfig.lcdX;
+    LCD_Y = resolutionConfig.lcdY;
+    
+    // 更新Canvas尺寸
+    canvas.width = SHOW_WIDTH;
+    canvas.height = SHOW_HEIGHT;
+    
+    // 重新创建显示图像
+    monitor.createDisplayImage();
+    
+    // 显示信息
+    console.log(`分辨率已切换至: ${selectedResolution}`);
+    
+  });
+
   // 连接按钮点击事件
   connectButton.addEventListener('click', async () => {
     try {
@@ -317,69 +352,110 @@ window.addEventListener('DOMContentLoaded', () => {
   }
 
   // 对图像数据进行压缩处理，减少传输数据量
+  // 基于 compaction.c 中的 MSN_compaction 算法移植
   function ScreenDateProcess(photoData) {
     const totalDataSize = photoData.length;
     const dataPerPage = 128;
-    let dataPage1 = 0;
-    let dataPage2 = 0;
     const hexUse = [];
+    let dataIndex = 0;
 
-    // 按页处理数据
+    // 按页处理数据（每页128个像素）
-    for (let i = 0; i < Math.floor(totalDataSize / dataPerPage); i++) {
+    const totalPages = Math.floor(totalDataSize / dataPerPage);
-      dataPage1 = dataPage2;
+    for (let page = 0; page < totalPages; page++) {
-      dataPage2 += dataPerPage;
+      let i = 0;
-      const dataW = photoData.slice(dataPage1, dataPage2);
+      while (i < 128) {
-      const cmpUse = [];
+        let a = 0;
-      for (let j = 0; j < dataW.length; j += 2) {
+        let a_data = photoData[dataIndex];
-        cmpUse.push((dataW[j] << 16) | dataW[j + 1]);
+        
-      }
+        // 统计第一种颜色的连续出现次数（最多15次）
-
+        for (let s = 0; s < 15; s++) {
-      // 找出最频繁的颜色作为背景色
+          if (i < 128 && a_data === photoData[dataIndex]) {
-      const colorCount = {};
+            a++;
-      cmpUse.forEach(color => {
+            i++;
-        colorCount[color] = (colorCount[color] || 0) + 1;
+            dataIndex++;
-      });
+          } else {
-      let maxCount = 0;
+            break;
-      let backgroundColor = 0;
+          }
-      for (const [color, count] of Object.entries(colorCount)) {
-        if (count > maxCount) {
-          maxCount = count;
-          backgroundColor = parseInt(color);
         }
-      }
 
-      hexUse.push(2, 4);
+        let b = 0;
-      hexUse.push(...digitToInts(backgroundColor));
+        let b_data = 0;
-
+        
-      // 只记录与背景色不同的像素
+        // 统计第二种颜色的连续出现次数（最多15次）
-      cmpUse.forEach((cmpValue, index) => {
+        if (i < 128) {
-        if (cmpValue !== backgroundColor) {
+          b_data = photoData[dataIndex];
-          hexUse.push(4, index);
+          for (let s = 0; s < 15; s++) {
-          hexUse.push(...digitToInts(cmpValue));
+            if (i < 128 && b_data === photoData[dataIndex]) {
+              b++;
+              i++;
+              dataIndex++;
+            } else {
+              break;
+            }
+          }
         }
-      });
 
-      hexUse.push(2, 3, 8, 1, 0, 0);
+        // 输出压缩数据：[9, a*16+b, a_data高字节, a_data低字节, b_data高字节, b_data低字节]
+        hexUse.push(9);
+        hexUse.push(a * 16 + b);
+        hexUse.push((a_data >> 8) & 0xFF);
+        hexUse.push(a_data & 0xFF);
+        hexUse.push((b_data >> 8) & 0xFF);
+        hexUse.push(b_data & 0xFF);
+      }
     }
 
     // 处理剩余数据
     const remainingDataSize = totalDataSize % dataPerPage;
     if (remainingDataSize !== 0) {
-      const dataW = photoData.slice(-remainingDataSize);
+      const remainingData = photoData.slice(totalDataSize - remainingDataSize);
-      // 补全数据
+      
-      while (dataW.length < dataPerPage) {
+      // 补全数据到128字节
-        dataW.push(0xFFFF);
+      while (remainingData.length < dataPerPage) {
+        remainingData.push(0xFFFF);
       }
-      const cmpUse = [];
+
-      for (let j = 0; j < dataW.length; j += 2) {
+      let i = 0;
-        cmpUse.push((dataW[j] << 16) | dataW[j + 1]);
+      let dataIndex = 0;
+      while (i < 128) {
+        let a = 0;
+        let a_data = remainingData[dataIndex];
+        
+        for (let s = 0; s < 15; s++) {
+          if (i < 128 && a_data === remainingData[dataIndex]) {
+            a++;
+            i++;
+            dataIndex++;
+          } else {
+            break;
+          }
+        }
+
+        let b = 0;
+        let b_data = 0;
+        
+        if (i < 128) {
+          b_data = remainingData[dataIndex];
+          for (let s = 0; s < 15; s++) {
+            if (i < 128 && b_data === remainingData[dataIndex]) {
+              b++;
+              i++;
+              dataIndex++;
+            } else {
+              break;
+            }
+          }
+        }
+
+        hexUse.push(9);
+        hexUse.push(a * 16 + b);
+        hexUse.push((a_data >> 8) & 0xFF);
+        hexUse.push(a_data & 0xFF);
+        hexUse.push((b_data >> 8) & 0xFF);
+        hexUse.push(b_data & 0xFF);
       }
-      cmpUse.forEach((cmpValue, index) => {
-        hexUse.push(4, index);
-        hexUse.push(...digitToInts(cmpValue));
-      });
-      hexUse.push(2, 3, 8, 0, remainingDataSize * 2, 0);
     }
+
     return hexUse;
   }
 
@@ -438,8 +514,17 @@ window.addEventListener('DOMContentLoaded', () => {
     // 创建显示图像
     const image = monitor.createDisplayImage();
 
-    // 获取图像数据
+    // 创建一个临时Canvas用于图像缩放
-    const imageData = ctx.getImageData(0, 0, SHOW_WIDTH, SHOW_HEIGHT);
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = LCD_X;
+    tempCanvas.height = LCD_Y;
+    const tempCtx = tempCanvas.getContext('2d');
+
+    // 将原始Canvas内容缩放到设备实际分辨率
+    tempCtx.drawImage(canvas, 0, 0, LCD_X, LCD_Y);
+
+    // 获取缩放后的图像数据
+    const imageData = tempCtx.getImageData(0, 0, LCD_X, LCD_Y);
 
     // 转换为RGB565格式
     const rgb565 = rgb888ToRgb565(imageData);
@@ -465,7 +550,7 @@ window.addEventListener('DOMContentLoaded', () => {
       if (deviceState === 1) {
         try {
           // 设置显示区域
-          await LCD_ADD(0, 0, SHOW_WIDTH, SHOW_HEIGHT);
+          await LCD_ADD(0, 0, LCD_X, LCD_Y);
 
           // 显示系统状态
           await showPCState();

index.html

@@ -12,9 +12,17 @@
     <button id="disconnect-button">断开连接</button>
     <button id="start-button">开始发送</button>
     <button id="stop-button">停止发送</button>
+    <div class="resolution-selector">
+      <label for="resolution">分辨率:</label>
+      <select id="resolution">
+        <option value="160x80" selected>160x80</option>
+        <option value="350x172">350x172</option>
+        <option value="320x240">320x240</option>
+      </select>
+    </div>
   </div>
   <div class="canvas-container">
-    <canvas id="monitor-canvas" width="350" height="172"></canvas>
+    <canvas id="monitor-canvas" width="160" height="80"></canvas>
   </div>
   <script src="./assets/main.js"></script>
 </body>