mirror of
https://github.com/NaitLee/Cat-Printer.git
synced 2025-05-16 07:10:30 -07:00
Optimization, add help.
This commit is contained in:
NaitLee
parent
cb74daef01
commit
bde24855e0
@ -10,12 +10,12 @@
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p id="notice" style="height: 2em; border: 1px dotted gray;">
|
||||
<p id="notice">
|
||||
<noscript>Javascript should be enabled</noscript>
|
||||
</p>
|
||||
<h2>Custom Print</h2>
|
||||
<p>
|
||||
<input style="display: none;" type="text" id="bt_mac" value="" />
|
||||
<input style="display: none;" type="text" id="bluetooth_address_input" value="" />
|
||||
<span>Select device:</span><select id="device_selection"></select><button id="refresh_device">Refresh</button>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
33
www/help/help.en-US.html
Normal file
33
www/help/help.en-US.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Help</title>
|
||||
<link rel="stylesheet" href="../skin.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Help</h1>
|
||||
<p>Here is some useful information.</p>
|
||||
<h2>Note</h2>
|
||||
<ul>
|
||||
<li>Preview (and printed) image is mono-colored. Only black and white.</li>
|
||||
<li>Threshold is the "darkness" required for image pixels to turning black. The higher it is, the image is brighter.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2>Function</h2>
|
||||
<h3>Print Image</h3>
|
||||
<p>You can print an image to cat printer in that page.</p>
|
||||
<p>Select a photo, click preview, check the preview and adjust threshold.</p>
|
||||
<p>When satisfied, select printer device and print!</p>
|
||||
<h3>Print Document</h3>
|
||||
<p>Simply copy-paste your document content from office software to that page, the format is preserved and the result can be previewed.</p>
|
||||
<p>Image can't be there because of security policy. Please use "Custom Print" if necessory.</p>
|
||||
<h3>Custom Print</h3>
|
||||
<p>You can freely arrange the content of a canvas then print it. Insert/edit text, image, or QRCode.</p>
|
||||
<hr />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
33
www/help/help.zh-CN.html
Normal file
33
www/help/help.zh-CN.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>帮助</title>
|
||||
<link rel="stylesheet" href="../skin.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>帮助</h1>
|
||||
<p>这里有一些有用的信息。</p>
|
||||
<h2>注记</h2>
|
||||
<ul>
|
||||
<li>预览与打印出的图像是单色的。只有黑色和白色。</li>
|
||||
<li>阈值是像素变为黑色所需的“黑度”。它的值越高，图像越亮。</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2>功能</h2>
|
||||
<h3>打印图片</h3>
|
||||
<p>您可以在此页将图像打印至猫咪打印机。</p>
|
||||
<p>选择图片，点击预览，检查预览并调整阈值。</p>
|
||||
<p>感觉满意后，选择打印机设备并打印！</p>
|
||||
<h3>打印文档</h3>
|
||||
<p>只需把文档从办公软件复制粘贴到此页，文档格式被保留且可以预览。</p>
|
||||
<p>由于安全策略，无法粘贴图像。如果需要请使用“自定义打印”。</p>
|
||||
<h3>自定义打印</h3>
|
||||
<p>您可以自由排布画布上的内容并打印。插入/编辑文字、图像或二维码。</p>
|
||||
<hr />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
18
www/help/index.html
Normal file
18
www/help/index.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Help</title>
|
||||
<link rel="stylesheet" href="../skin.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Help Documents</h1>
|
||||
<nav>
|
||||
<a href="help.en-US.html">English</a>
|
||||
<a href="help.zh-CN.html">简体中文</a>
|
||||
</nav>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
@ -11,11 +11,12 @@
|
||||
<body>
|
||||
<main class="mainpage">
|
||||
<h1>Printer Center</h1>
|
||||
<p>
|
||||
<a href="print-image.html">Print Image</a>
|
||||
<a href="print-document.html">Print Document</a>
|
||||
<a href="custom-print.html">Custom Print</a>
|
||||
</p>
|
||||
<nav>
|
||||
<a href="print-image.html" target="_blank">Print Image</a>
|
||||
<a href="print-document.html" target="_blank">Print Document</a>
|
||||
<a href="custom-print.html" target="_blank">Custom Print</a>
|
||||
<a href="help/index.html" target="_blank">Help</a>
|
||||
</nav>
|
||||
</main>
|
||||
<textarea id="i18-N" style="display: none;">
|
||||
[zh-CN]
|
||||
@ -23,6 +24,7 @@ Printer Center=打印机中心
|
||||
Print Image=打印图片
|
||||
Print Document=打印文档
|
||||
Custom Print=自定义打印
|
||||
Help=帮助
|
||||
</textarea>
|
||||
<script src="i18n.js"></script>
|
||||
</body>
|
||||
|
||||
16
www/main.css
16
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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p id="notice" style="height: 2em; border: 1px dotted gray;">
|
||||
<p id="notice">
|
||||
<noscript>Javascript should be enabled</noscript>
|
||||
</p>
|
||||
<h2>Print Document</h2>
|
||||
<p>
|
||||
<input style="display: none;" type="text" id="bt_mac" value="" />
|
||||
<input style="display: none;" type="text" id="bluetooth_address_input" value="" />
|
||||
<span>Select device:</span><select id="device_selection"></select><button id="refresh_device">Refresh</button>
|
||||
</p>
|
||||
<p>
|
||||
@ -28,7 +28,7 @@
|
||||
<div class="reset_styles" contenteditable="true" style="width: 384px; min-height: 3em;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-style: italic; color: gray;">From Webpage/MS Office/WPS/LibreOffice to here, pasted data shall be formatted</p>
|
||||
<p><i>From Webpage/MS Office/WPS/LibreOffice to here, pasted data shall be formatted</i></p>
|
||||
<p>Preview</p>
|
||||
<div id="image_preview" style="width: 384px; margin: auto;"></div>
|
||||
</main>
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p id="notice" style="height: 2em; border: 1px dotted gray;">
|
||||
<p id="notice">
|
||||
<noscript>Javascript should be enabled</noscript>
|
||||
</p>
|
||||
<h2>Print Image</h2>
|
||||
<p>
|
||||
<input style="display: none;" type="text" id="bt_mac" value="" />
|
||||
<input style="display: none;" type="text" id="bluetooth_address_input" value="" />
|
||||
<span>Select device:</span><select id="device_selection"></select><button id="refresh_device">Refresh</button>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user