diff --git a/www/custom-print.html b/www/custom-print.html index 8d1da2a..e45a030 100644 --- a/www/custom-print.html +++ b/www/custom-print.html @@ -10,12 +10,12 @@
-

+

Custom Print

- + Select device:

diff --git a/www/custom-print.js b/www/custom-print.js index 9c6a938..22386ad 100644 --- a/www/custom-print.js +++ b/www/custom-print.js @@ -4,7 +4,7 @@ class CustomPrinter { WIDTH = 384; threshold = 0.6; - bluetoothMACInput = document.getElementById('bt_mac'); + bluetoothMACInput = document.getElementById('bluetooth_address_input'); thresholdInput = document.getElementById('filter_threshold'); fileSelection = document.createElement('input'); dummyImage = new Image(); @@ -60,10 +60,13 @@ class CustomPrinter { this.actionInsertQR.addEventListener('click', event => { let div = document.createElement('div'); new QRCode(div, prompt(i18N.get('Content of QRCode:'))); - // QRCode generation is async, currently no better way than wait for a while + // QRCode generation is async, currently have no better way than waiting for a while setTimeout(() => { - let fimage = new fabric.Image(div.lastChild, {}); - fimage.scale(this.WIDTH / div.lastChild.width); + let fimage = new fabric.Image(div.lastChild, { + left: this.WIDTH / 4, + top: this.WIDTH / 4 + }); + fimage.scale((this.WIDTH / 2) / div.lastChild.width); this.fabricCanvas.add(fimage); }, 1000); }); diff --git a/www/help/help.en-US.html b/www/help/help.en-US.html new file mode 100644 index 0000000..5ab909d --- /dev/null +++ b/www/help/help.en-US.html @@ -0,0 +1,33 @@ + + + + + + + Help + + + +

+

Help

+

Here is some useful information.

+

Note

+ +
+

Function

+

Print Image

+

You can print an image to cat printer in that page.

+

Select a photo, click preview, check the preview and adjust threshold.

+

When satisfied, select printer device and print!

+

Print Document

+

Simply copy-paste your document content from office software to that page, the format is preserved and the result can be previewed.

+

Image can't be there because of security policy. Please use "Custom Print" if necessory.

+

Custom Print

+

You can freely arrange the content of a canvas then print it. Insert/edit text, image, or QRCode.

+
+
+ + \ No newline at end of file diff --git a/www/help/help.zh-CN.html b/www/help/help.zh-CN.html new file mode 100644 index 0000000..ce4df85 --- /dev/null +++ b/www/help/help.zh-CN.html @@ -0,0 +1,33 @@ + + + + + + + 帮助 + + + +
+

帮助

+

这里有一些有用的信息。

+

注记

+ +
+

功能

+

打印图片

+

您可以在此页将图像打印至猫咪打印机。

+

选择图片，点击预览，检查预览并调整阈值。

+

感觉满意后，选择打印机设备并打印！

+

打印文档

+

只需把文档从办公软件复制粘贴到此页，文档格式被保留且可以预览。

+

由于安全策略，无法粘贴图像。如果需要请使用“自定义打印”。

+

自定义打印

+

您可以自由排布画布上的内容并打印。插入/编辑文字、图像或二维码。

+
+
+ + \ No newline at end of file diff --git a/www/help/index.html b/www/help/index.html new file mode 100644 index 0000000..3c70f97 --- /dev/null +++ b/www/help/index.html @@ -0,0 +1,18 @@ + + + + + + + Help + + + +

Help Documents

+ +
+ + \ No newline at end of file diff --git a/www/index.html b/www/index.html index 1b0eca8..28d2abb 100644 --- a/www/index.html +++ b/www/index.html @@ -11,11 +11,12 @@

Printer Center

-

- Print Image - Print Document - Custom Print -

+
diff --git a/www/main.css b/www/main.css index 91a9268..ceb9026 100644 --- a/www/main.css +++ b/www/main.css @@ -2,16 +2,16 @@ body { text-align: center; margin: 0; font-size: large; - font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif; + font-family: 'Noto Sans', 'Segoe UI', sans-serif; } -main.mainpage p { +main.mainpage nav { display: flex; justify-content: space-around; flex-wrap: wrap; } -main.mainpage p a { +main.mainpage nav a { display: inline-block; font-size: larger; width: 10em; @@ -29,6 +29,16 @@ main input[type="range"] { width: 16em; } +#notice { + height: 2em; + border-top: 1px dotted currentColor; + border-bottom: 1px dotted currentColor; + position: sticky; + top: 0; + margin: 8px 0; + width: 100%; +} + .reset_styles { font-family: initial; font-size: initial; diff --git a/www/main.js b/www/main.js index d15ae4a..ef8e770 100644 --- a/www/main.js +++ b/www/main.js @@ -6,7 +6,7 @@ function notice(message) { } let device_selection = document.getElementById('device_selection'); let refresh_device_button = document.getElementById('refresh_device'); -let bluetooth_mac_input = document.getElementById('bt_mac'); +let bluetooth_mac_input = document.getElementById('bluetooth_address_input'); function switchDevice() { bluetooth_mac_input.value = device_selection.selectedOptions[0].value; } @@ -31,6 +31,7 @@ if (device_selection != null && refresh_device_button != null && bluetooth_mac_i } xhr.send(); }); + refresh_device_button.click(); } function imageDataColorToMonoSquare(data, threshold) { let newdata_horizonal = new Uint8ClampedArray(data.data.length); diff --git a/www/print-document.html b/www/print-document.html index 0061187..e16a6ed 100644 --- a/www/print-document.html +++ b/www/print-document.html @@ -10,12 +10,12 @@
-

+

Print Document

- + Select device:

@@ -28,7 +28,7 @@

-

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

+

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

Preview

diff --git a/www/print-document.js b/www/print-document.js index f2e3a8a..2e6b8f8 100644 --- a/www/print-document.js +++ b/www/print-document.js @@ -4,7 +4,7 @@ class DocumentPrinter { WIDTH = 384; thresholdInput = document.getElementById('filter_threshold'); - bluetoothMACInput = document.getElementById('bt_mac'); + bluetoothMACInput = document.getElementById('bluetooth_address_input'); container = document.getElementById('container'); printButton = document.getElementById('print_button'); previewButton = document.getElementById('preview_button'); diff --git a/www/print-image.html b/www/print-image.html index e4fb44d..f6e703b 100644 --- a/www/print-image.html +++ b/www/print-image.html @@ -10,12 +10,12 @@
-

+

Print Image

- + Select device:

diff --git a/www/print-image.js b/www/print-image.js index 890871d..4788e7c 100644 --- a/www/print-image.js +++ b/www/print-image.js @@ -4,7 +4,7 @@ class ImagePrinter { WIDTH = 384; threshold = 0.6; - bluetoothMACInput = document.getElementById('bt_mac'); + bluetoothMACInput = document.getElementById('bluetooth_address_input'); thresholdInput = document.getElementById('filter_threshold'); fileSelection = document.getElementById('file_selection'); dummyImage = new Image();