-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (124 loc) · 4.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<title>Tepra Web</title>
</head>
<body>
<fieldset>
<label>
Tape:
<select id="height" name="height">
<option value="44">4 mm (44 px)</option>
<option value="72">6 mm (72 px)</option>
<option value="108" selected>9 mm (108 px)</option>
<option value="144">12 mm (144 px)</option>
<option value="216">18 mm (216 px)</option>
<option value="288">24 mm (288 px)</option>
<option value="384">36 mm (284 px)</option>
</select>
</label>
<br>
<label>
Max Length: <input type="number" value="-1" id="width" name="width"> px
</label>
<br>
<label>
Line Margin: <input type="number" value="6" id="margin" name="margin"> px
</label>
<br>
<label>
Vertical Space: <input type="number" value="12" id="vertical" name="vertical"> px
</label>
<br>
<label>
Horizontal Space: <input type="number" value="10" id="horizontal" name="horizontal"> px
</label>
<br>
<label>
Font: <input type="text" value="sans" id="font" name="font">
</label>
<br>
<label>
Text:<br>
<textarea id="text" name="text">test</textarea>
</label>
<br>
<button id="print">Print</button>
<span id="message"></span>
</fieldset>
<canvas id="canvas" style="border: 1px solid black; margin: 10px;"></canvas>
<script>
const printElement = document.getElementById('print');
const messageElement = document.getElementById('message');
const heightElement = document.getElementById('height');
const widthElement = document.getElementById('width');
const marginElement = document.getElementById('margin');
const verticalElement = document.getElementById('vertical');
const horizontalElement = document.getElementById('horizontal');
const fontElement = document.getElementById('font');
const textElement = document.getElementById('text');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function render() {
const lines = textElement.value.split('\n');
const height = Number(heightElement.value);
const maxWidth = widthElement.valueAsNumber;
const margin = marginElement.valueAsNumber;
let verticalSpace = verticalElement.valueAsNumber;
const horizontalSpace = horizontalElement.valueAsNumber;
const font = fontElement.value;
let fontSize = Math.floor((height - (lines.length-1)*margin - verticalSpace*2) / lines.length);
canvas.height = height;
ctx.font = `${fontSize}px ${font}`;
canvas.width = horizontalSpace*2 + Math.ceil(Math.max(...lines.map(s => ctx.measureText(s).width)));
ctx.font = `${fontSize}px ${font}`;
if (maxWidth > 0 && canvas.width > maxWidth) {
canvas.width = maxWidth;
while (fontSize > 0) {
fontSize--;
ctx.font = `${fontSize}px ${font}`;
const measured = horizontalSpace*2 + Math.ceil(Math.max(...lines.map(s => ctx.measureText(s).width)));
if (measured <= maxWidth) {
break;
}
}
verticalSpace = Math.floor((height - lines.length*fontSize - (lines.length-1)*margin) / 2);
}
ctx.textBaseline = 'top';
lines.forEach((text, i) => {
ctx.fillText(text, horizontalSpace, verticalSpace + (i+1)*margin + i*fontSize);
});
}
async function print() {
if (printElement.disabled) return;
printElement.disabled = true;
messageElement.textContent = 'Printing...';
try {
const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
const form = new FormData();
form.append('tape', blob, 'tape.png');
const resp = await fetch('/print', {
method: 'POST',
body: form,
});
const response = await resp.json();
printElement.disabled = false;
messageElement.textContent = response.message;
} catch (e) {
console.error(e);
printElement.disabled = false;
messageElement.textContent = `failed to request: ${e}`;
}
}
heightElement.addEventListener('input', render);
widthElement.addEventListener('input', render);
marginElement.addEventListener('input', render);
verticalElement.addEventListener('input', render);
horizontalElement.addEventListener('input', render);
fontElement.addEventListener('input', render);
textElement.addEventListener('input', render);
render();
printElement.addEventListener('click', print);
</script>
</body>
</html>