v/Cat-Printer
1
0
Fork 0
mirror of https://github.com/NaitLee/Cat-Printer.git synced 2025-05-21 09:40:10 -07:00
Code Issues Packages Projects Releases Wiki Activity

Notify device selection; update document

Browse Source
This commit is contained in:
NaitLee 2021-09-07 19:55:19 +08:00
parent 36b9eb63e7
commit a2dcfcca89
5 changed files with 26 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -9,6 +9,7 @@ English | [简体中文](README.zh-CN.md)
## Features ## Features
- Print jpg/png images directly to cat printer from a web interface - Print jpg/png images directly to cat printer from a web interface
- Print a document (.doc, .docx, .odt etc) by copy-paste
- (more will be here...) - (more will be here...)
## How to use ## How to use
@ -50,21 +51,6 @@ Possible features:
- Remote print with printer protocols - Remote print with printer protocols
### Other
Routine of image data when printing:
`Image.png -> paint to canvas rawdata -> monochrome filter -> collect canvas rawdata to pbm format -> send to server -> extract information -> compile to raw data for printer -> bluetooth communication to printer`
Note: PBM is a easy monochrome image format:
```
P4
# {comment}
{width} {height}
{raw bytes, one byte for 8 bits of 0 or 1, these consists the image visually}
```
### Files ### Files
- `server.py`: Contains a BaseHTTP server that hooks user actions and printer driver - `server.py`: Contains a BaseHTTP server that hooks user actions and printer driver

30
README.zh-CN.md
View File

@ -9,6 +9,7 @@
## 功能 ## 功能
- 直接从网页界面打印 jpg/png 图像到猫咪打印机 - 直接从网页界面打印 jpg/png 图像到猫咪打印机
- 复制粘贴文档内容（.doc, .docx, .odt 等）以打印
- （会有更多……） - （会有更多……）
## 如何使用 ## 如何使用
@ -29,37 +30,28 @@ TODO
## 开发者注记 ## 开发者注记
此 App 使用服务器/客户端模型，且拥有尽可能少的依赖。 此 App 使用服务器/客户端模型，且拥有尽可能少的服务端依赖。
您所需要的只有 Python3 (pip 可有可无) 以及一个浏览器。 ### 准备
- Python3 与浏览器
- [fabric.min.js](https://github.com/fabricjs/fabric.js/tree/master/dist)
- [html2canvas.min.js](https://html2canvas.hertzen.com/)
### 支持的平台
它同时包含对 Windows 和 GNU/Linux 的支持。Windows 发行包将包含一个**普通**用户所需要的所有。 它同时包含对 Windows 和 GNU/Linux 的支持。Windows 发行包将包含一个**普通**用户所需要的所有。
计划： ### 计划
- 支持（富）文本的直接打印，使用 HTML canvas - 支持高级编辑，如同官方应用 (iPrint & 精准学习)
- 使 web 界面的远程打印标准化/兼容/安全 - 使 web 界面的远程打印标准化/兼容/安全
可能的功能： 可能的功能：
- 支持高级编辑，如同官方应用 (iPrint & 精准学习)
- 使用打印协议的远程打印 - 使用打印协议的远程打印
打印时的图像数据路线：
`图像.png -> 绘制到 canvas 纯数据 -> 双色化滤镜 -> 将 canvas 数据转为 pbm 格式 -> 发送至服务器 -> 分析出数据 -> 编译至打印机纯数据 -> 与打印机蓝牙通讯`
注：PBM 是一种简单的双色图像格式：
```
P4
# {注释}
{宽} {高}
{纯数据，一字节代表 8 比特的 0 或 1，它们从视觉上构成图像}
```
## 文件 ## 文件
- `index.html`: 打印机的前端接口入口
- `server.py`: 包含一个 BaseHTTP 服务器，关联用户操作与打印机驱动 - `server.py`: 包含一个 BaseHTTP 服务器，关联用户操作与打印机驱动
- `printer.py`: 包含蓝牙猫咪打印机的驱动，依赖 bleak。您也可以在命令行中运行此文件。 - `printer.py`: 包含蓝牙猫咪打印机的驱动，依赖 bleak。您也可以在命令行中运行此文件。

1
www/custom-print.html
View File

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Print</title> <title>Custom Print</title>
<link rel="stylesheet" href="main.css" />
</head> </head>
<body> <body>
<main> <main>

7
www/print-document.js
View File

@ -15,6 +15,11 @@ class DocumentPrinter {
this.threshold = this.thresholdInput.value; this.threshold = this.thresholdInput.value;
} }
this.printButton.addEventListener('click', event => { this.printButton.addEventListener('click', event => {
let mac_address = this.bluetoothMACInput.value;
if (mac_address == '') {
notice('Please select a device');
return;
}
html2canvas(this.container).then(canvas => { html2canvas(this.container).then(canvas => {
notice('Printing, please wait.'); notice('Printing, please wait.');
let context = canvas.getContext('2d'); let context = canvas.getContext('2d');
@ -24,7 +29,7 @@ class DocumentPrinter {
this.imagePreview.appendChild(canvas); this.imagePreview.appendChild(canvas);
let pbm_data = imageDataMonoToPBM(mono_imagedata); let pbm_data = imageDataMonoToPBM(mono_imagedata);
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.open('POST', '/~print?address=' + this.bluetoothMACInput.value); xhr.open('POST', '/~print?address=' + mac_address);
xhr.setRequestHeader('Content-Type', 'application-octet-stream'); xhr.setRequestHeader('Content-Type', 'application-octet-stream');
xhr.onload = () => { xhr.onload = () => {
notice(xhr.responseText); notice(xhr.responseText);

9
www/print-image.js
View File

@ -38,11 +38,16 @@ class ImagePrinter {
notice('Please preview image first'); notice('Please preview image first');
return; return;
} }
notice('Printing, please wait.') let mac_address = this.bluetoothMACInput.value;
if (mac_address == '') {
notice('Please select a device');
return;
}
notice('Printing, please wait.');
let context = this.imagePreview.getContext('2d'); let context = this.imagePreview.getContext('2d');
let pbm_data = imageDataMonoToPBM(context.getImageData(0, 0, this.WIDTH, this.imagePreview.height)); let pbm_data = imageDataMonoToPBM(context.getImageData(0, 0, this.WIDTH, this.imagePreview.height));
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.open('POST', '/~print?address=' + this.bluetoothMACInput.value); xhr.open('POST', '/~print?address=' + mac_address);
xhr.setRequestHeader('Content-Type', 'application-octet-stream'); xhr.setRequestHeader('Content-Type', 'application-octet-stream');
xhr.onload = () => { xhr.onload = () => {
notice(xhr.responseText); notice(xhr.responseText);