diff --git a/www/main.d.ts b/www/main.d.ts index 98ddf4e..6ceaf44 100644 --- a/www/main.d.ts +++ b/www/main.d.ts @@ -2,9 +2,6 @@ declare interface ImagePrinter { noticeElement: HTMLParagraphElement; thresholdInput: HTMLInputElement; - bluetoothMACInput: HTMLInputElement; - deviceSelection: HTMLSelectElement; - refreshDeviceButton: HTMLButtonElement; fileSelection: HTMLInputElement; dummyImage: HTMLImageElement; imagePreview: HTMLCanvasElement; diff --git a/www/main.js b/www/main.js index f99b2d1..63f49be 100644 --- a/www/main.js +++ b/www/main.js @@ -1,5 +1,36 @@ /// +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) { let newdata_horizonal = new Uint8ClampedArray(data.data.length); let newdata_vertical = new Uint8ClampedArray(data.data.length); diff --git a/www/print-document.html b/www/print-document.html index 2d19780..7d5a84f 100644 --- a/www/print-document.html +++ b/www/print-document.html @@ -5,13 +5,36 @@ Print Document +

-

WIP

+

Print Document

+

+ + Select device: +

+

+ Copy & paste document to box +
+ Threshold: +

+
+
+
+
+
+

From MS Office/WPS/LibreOffice to here, pasted data shall be formatted

+

Preview

+
+
+
+ + + \ No newline at end of file diff --git a/www/print-document.js b/www/print-document.js new file mode 100644 index 0000000..9cf27ac --- /dev/null +++ b/www/print-document.js @@ -0,0 +1,38 @@ +/// +/// + +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(); diff --git a/www/print-image.js b/www/print-image.js index a5746ca..1b2e0f5 100644 --- a/www/print-image.js +++ b/www/print-image.js @@ -4,19 +4,12 @@ class ImagePrinter { WIDTH = 384; threshold = 0.6; - noticeElement = document.getElementById('notice'); 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'); dummyImage = new Image(); imagePreview = document.getElementById('image_preview'); previewButton = document.getElementById('preview_button'); printButton = document.getElementById('print_button'); - notice(message) { - this.noticeElement.innerText = message; - } preview() { let reader = new FileReader(); reader.onload = event1 => { @@ -31,9 +24,6 @@ class ImagePrinter { } reader.readAsDataURL(this.fileSelection.files[0]); } - switchDevice() { - this.bluetoothMACInput.value = this.deviceSelection.selectedOptions[0].value; - } constructor() { this.monoMethod = imageDataColorToMonoSquare; this.fileSelection.addEventListener('input', this.preview.bind(this)); @@ -41,40 +31,21 @@ class ImagePrinter { this.thresholdInput.onchange = event => { 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.printButton.addEventListener('click', event => { // this.preview(); if (this.imagePreview.height == 0) { - this.notice('Please preview image first'); + notice('Please preview image first'); return; } - this.notice('Printing, please wait.') + notice('Printing, please wait.') let context = this.imagePreview.getContext('2d'); let pbm_data = imageDataMonoToPBM(context.getImageData(0, 0, this.WIDTH, this.imagePreview.height)); let xhr = new XMLHttpRequest(); xhr.open('POST', '/~print?address=' + this.bluetoothMACInput.value); xhr.setRequestHeader('Content-Type', 'application-octet-stream'); xhr.onload = () => { - this.notice(xhr.responseText); + notice(xhr.responseText); } xhr.send(pbm_data); });