v/Cat-Printer
1
0
Fork 0
mirror of https://github.com/NaitLee/Cat-Printer.git synced 2025-05-16 15:20:12 -07:00
Code Issues Packages Projects Releases Wiki Activity

Print Document feature; move some methods to main.js

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

3
www/main.d.ts vendored
View File

@ -2,9 +2,6 @@
declare interface ImagePrinter { declare interface ImagePrinter {
noticeElement: HTMLParagraphElement; noticeElement: HTMLParagraphElement;
thresholdInput: HTMLInputElement; thresholdInput: HTMLInputElement;
bluetoothMACInput: HTMLInputElement;
deviceSelection: HTMLSelectElement;
refreshDeviceButton: HTMLButtonElement;
fileSelection: HTMLInputElement; fileSelection: HTMLInputElement;
dummyImage: HTMLImageElement; dummyImage: HTMLImageElement;
imagePreview: HTMLCanvasElement; imagePreview: HTMLCanvasElement;

31
www/main.js
View File

@ -1,5 +1,36 @@
///<reference path="main.d.ts" /> ///<reference path="main.d.ts" />
let notice_element = document.getElementById('notice');
function notice(message) {
notice_element.innerText = message;
}
let device_selection = document.getElementById('device_selection');
let refresh_device_button = document.getElementById('refresh_device');
let bluetooth_mac_input = document.getElementById('bt_mac');
function switchDevice() {
bluetooth_mac_input.value = device_selection.selectedOptions[0].value;
}
if (device_selection != null && refresh_device_button != null && bluetooth_mac_input != null) {
refresh_device_button.addEventListener('click', event => {
notice('Searching devices. Please wait for 5 seconds.')
device_selection.childNodes.forEach(e => e.remove());
let xhr = new XMLHttpRequest();
xhr.open('GET', '/~getdevices');
xhr.onload = () => {
for (let i of xhr.responseText.split('\n')) {
let [name, address] = i.split(',');
if (address == undefined) continue;
let option = document.createElement('option');
option.value = address;
option.innerText = `${name} - ${address}`;
device_selection.appendChild(option);
}
device_selection.selectedIndex = 0;
switchDevice();
}
xhr.send();
});
}
function imageDataColorToMonoSquare(data, threshold) { function imageDataColorToMonoSquare(data, threshold) {
let newdata_horizonal = new Uint8ClampedArray(data.data.length); let newdata_horizonal = new Uint8ClampedArray(data.data.length);
let newdata_vertical = new Uint8ClampedArray(data.data.length); let newdata_vertical = new Uint8ClampedArray(data.data.length);

25
www/print-document.html
View File

@ -5,13 +5,36 @@
<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>Print Document</title> <title>Print Document</title>
<link rel="stylesheet" href="main.css" />
</head> </head>
<body> <body>
<main> <main>
<p id="notice" style="height: 2em; border: 1px dotted gray;"> <p id="notice" style="height: 2em; border: 1px dotted gray;">
<noscript>Javascript should be enabled</noscript> <noscript>Javascript should be enabled</noscript>
</p> </p>
<h2>WIP</h2> <h2>Print Document</h2>
<p>
<input style="display: none;" type="text" id="bt_mac" value="" />
<span>Select device:</span><select id="device_selection"></select><button id="refresh_device">Refresh</button>
</p>
<p>
<span>Copy & paste document to box</span>
<button id="print_button">Print</button><br />
<span>Threshold:</span><input type="range" min="0" max="2" step="0.05" value="0.6" id="filter_threshold" />
</p>
<div style="margin: auto; border: 1px solid black; width: 384px; min-height: 3em;">
<div id="container" style="padding: 0.5em 0;">
<div contenteditable="true" style="width: 384px; min-height: 3em;"></div>
</div>
</div>
<p style="font-style: italic; color: gray;">From MS Office/WPS/LibreOffice to here, pasted data shall be formatted</p>
<p>Preview</p>
<div style="margin: auto; border: 1px solid gray; width: 384px; min-height: 3em;">
<div id="image_preview" style="width: 384px; min-height: 3em;"></div>
</div>
</main> </main>
<script src="html2canvas.min.js"></script>
<script src="main.js"></script>
<script src="print-document.js"></script>
</body> </body>
</html> </html>

38
www/print-document.js Normal file
View File

@ -0,0 +1,38 @@
///<reference path="main.js" />
///<reference path="main.d.ts" />
class DocumentPrinter {
WIDTH = 384;
thresholdInput = document.getElementById('filter_threshold');
bluetoothMACInput = document.getElementById('bt_mac');
container = document.getElementById('container');
printButton = document.getElementById('print_button');
threshold = 0.6;
imagePreview = document.getElementById('image_preview');
monoMethod = imageDataColorToMonoSquare;
constructor() {
this.thresholdInput.onchange = event => {
this.threshold = this.thresholdInput.value;
}
this.printButton.addEventListener('click', event => {
html2canvas(this.container).then(canvas => {
notice('Printing, please wait.');
let context = canvas.getContext('2d');
let imagedata = context.getImageData(0, 0, this.WIDTH, canvas.height);
let mono_imagedata = this.monoMethod(imagedata, this.threshold);
context.putImageData(mono_imagedata, 0, 0);
this.imagePreview.appendChild(canvas);
let pbm_data = imageDataMonoToPBM(mono_imagedata);
let xhr = new XMLHttpRequest();
xhr.open('POST', '/~print?address=' + this.bluetoothMACInput.value);
xhr.setRequestHeader('Content-Type', 'application-octet-stream');
xhr.onload = () => {
notice(xhr.responseText);
}
xhr.send(pbm_data);
})
});
}
}
var document_printer = new DocumentPrinter();

35
www/print-image.js
View File

@ -4,19 +4,12 @@
class ImagePrinter { class ImagePrinter {
WIDTH = 384; WIDTH = 384;
threshold = 0.6; threshold = 0.6;
noticeElement = document.getElementById('notice');
thresholdInput = document.getElementById('filter_threshold'); thresholdInput = document.getElementById('filter_threshold');
deviceSelection = document.getElementById('device_selection');
refreshDeviceButton = document.getElementById('refresh_device');
bluetoothMACInput = document.getElementById('bt_mac');
fileSelection = document.getElementById('file_selection'); fileSelection = document.getElementById('file_selection');
dummyImage = new Image(); dummyImage = new Image();
imagePreview = document.getElementById('image_preview'); imagePreview = document.getElementById('image_preview');
previewButton = document.getElementById('preview_button'); previewButton = document.getElementById('preview_button');
printButton = document.getElementById('print_button'); printButton = document.getElementById('print_button');
notice(message) {
this.noticeElement.innerText = message;
}
preview() { preview() {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = event1 => { reader.onload = event1 => {
@ -31,9 +24,6 @@ class ImagePrinter {
} }
reader.readAsDataURL(this.fileSelection.files[0]); reader.readAsDataURL(this.fileSelection.files[0]);
} }
switchDevice() {
this.bluetoothMACInput.value = this.deviceSelection.selectedOptions[0].value;
}
constructor() { constructor() {
this.monoMethod = imageDataColorToMonoSquare; this.monoMethod = imageDataColorToMonoSquare;
this.fileSelection.addEventListener('input', this.preview.bind(this)); this.fileSelection.addEventListener('input', this.preview.bind(this));
@ -41,40 +31,21 @@ class ImagePrinter {
this.thresholdInput.onchange = event => { this.thresholdInput.onchange = event => {
this.threshold = this.thresholdInput.value; this.threshold = this.thresholdInput.value;
} }
this.refreshDeviceButton.addEventListener('click', event => {
this.notice('Searching devices. Please wait for 5 seconds.')
this.deviceSelection.childNodes.forEach(e => e.remove());
let xhr = new XMLHttpRequest();
xhr.open('GET', '/~getdevices');
xhr.onload = () => {
for (let i of xhr.responseText.split('\n')) {
let [name, address] = i.split(',');
if (address == undefined) continue;
let option = document.createElement('option');
option.value = address;
option.innerText = `${name} - ${address}`;
this.deviceSelection.appendChild(option);
}
this.deviceSelection.selectedIndex = 0;
this.switchDevice();
}
xhr.send();
});
this.deviceSelection.addEventListener('input', this.switchDevice.bind(this)); this.deviceSelection.addEventListener('input', this.switchDevice.bind(this));
this.printButton.addEventListener('click', event => { this.printButton.addEventListener('click', event => {
// this.preview(); // this.preview();
if (this.imagePreview.height == 0) { if (this.imagePreview.height == 0) {
this.notice('Please preview image first'); notice('Please preview image first');
return; return;
} }
this.notice('Printing, please wait.') 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=' + this.bluetoothMACInput.value);
xhr.setRequestHeader('Content-Type', 'application-octet-stream'); xhr.setRequestHeader('Content-Type', 'application-octet-stream');
xhr.onload = () => { xhr.onload = () => {
this.notice(xhr.responseText); notice(xhr.responseText);
} }
xhr.send(pbm_data); xhr.send(pbm_data);
}); });