bitmap_service/app.py

@@ -27,35 +27,32 @@ def bitmap():
 
     try:
         image_stream = io.BytesIO(file.read())
-
         img = Image.open(image_stream)
-        img.save('test.png')
+        grayscale_img = img.convert('L')
-        print(img.tobytes())
+        bitmap_data = list(grayscale_img.getdata())
-        # 1. 確保尺寸符合你的硬體需求 (296x152)
-        # 如果你的圖片不是這個尺寸，建議先 resize
-        img = img.resize((296, 152)).convert('1').transpose(Image.Transpose.ROTATE_90).transpose(Image.Transpose.FLIP_LEFT_RIGHT)
         
-        # 2. 直接獲取二進制數據 (Bit-packed)
+        payload = 'P5\n296 152\n255\n'
-        # Pillow '1' 模式的 tobytes() 會將 8 個像素縮成 1 個 byte
+        payload += ''.join([chr(i) for i in bitmap_data])
-        raw_bits = img.tobytes() 
+        print(payload)
-
+        req = requests.put('http://host.docker.internal:8080/api/tag', data=chunk_gen(bitmap_data), headers={
-        # 3. 組合 PBM P4 標頭與數據
+            'Content-Type': 'image/x-portable-greymap'
-        header = f'P4\n152 296\n'.encode('ascii')
+        })
-        payload = header + raw_bits
+        return jsonify({'payload': payload, 'code': req.status_code})
-        print(raw_bits)
+        # return jsonify({'code': req.status_code})
-        # 測試寫入檔案 (必須用 'wb' 模式)
-        with open('test.pbm', mode='wb') as f:
-            f.write(payload)
-
-        # 4. 發送請求
-        req = requests.put('http://172.16.0.130/api/tag', 
-                        data=payload, 
-                        headers={'Content-Type': 'image/x-portable-bitmap'})
-
-        return jsonify({'message': 'success', 'bytes_sent': len(payload)})
 
     except Exception as e:
-        return jsonify({"error": str(e)}), 500
+        return jsonify({"error": e}), 500
+
+
+def chunk_gen(bitmap_data):
+    header = f'P5\n296 152\n255\n'
+    yield header.encode('latin-1') 
+
+    chunk_size = 1024
+    for i in range(0, len(bitmap_data), chunk_size):
+        chunk = bitmap_data[i:i + chunk_size]
+        yield bytes(chunk)
+
 
 if __name__ == '__main__':
-    app.run('0.0.0.0', port=80, debug=1)
+    app.run('0.0.0.0', port=80)

bitmap_service/dockerfile

@@ -6,6 +6,4 @@ COPY . .
 
 RUN pip3 install pillow flask flask-cors requests
 
-# RUN apt update && apt install nano
-
 CMD ["python3", "app.py"]

bitmap_service/run.sh

@@ -1,5 +0,0 @@
-#remote="127.0.0.1:8080"
-remote="172.16.0.131"
-#curl -v -T./logo-rotate.pbm "http://${remote}/api/tag" -H "Content-Type: image/x-portable-bitmap"
-curl -v -T./logo.pbm "http://${remote}/api/tag" -H "Content-Type: image/x-portable-bitmap"
-# url -v -T./test.pgm "http://127.0.0.1:8080/api/tag" -H "Content-Type: image/x-portable-greymap"

docker-compose.yml

@@ -9,7 +9,6 @@ services:
     container_name: backend_service
     ports:
       - "12001:80"
-      
   bitmap_service:
     build: ./bitmap_service
     container_name: bitmap_service

frontend_service/app/routes/components/canvas.tsx

@@ -15,14 +15,13 @@ const Canva = forwardRef<HTMLCanvasElement, CanvaProps>((props, ref) => {
         
         canvas.width = 296
         canvas.height = 152
-        context.fillStyle = "#ffffff"
+        context.clearRect(0, 0, canvas.width, canvas.height)
-        context.fillRect(0, 0, canvas.width, canvas.height)
         context.font = "24px 'Inter', Arial"
         context.textAlign = "center"
-        context.fillStyle = "#000000"
+        context.fillStyle = "#374151"
         context.fillText(props.name, canvas.width/2, 50)
         context.font = "48px 'Inter', Arial";
-        context.fillStyle = "#000000";
+        context.fillStyle = "#111827";
         context.fillText(`$${props.price}`, canvas.width / 2, 110);
         
     }, [props.name, props.price, ref]);