v/Cat-Printer
1
0
Fork 0
mirror of https://github.com/NaitLee/Cat-Printer.git synced 2025-05-18 08:10:24 -07:00
Code Issues Packages Projects Releases Wiki Activity

+ Added text-alignment setting

Browse Source
This commit is contained in:
Sync1211 2022-05-25 09:23:01 +02:00
parent 9adf5392cf
commit 1cb3c795d6
No known key found for this signature in database
GPG Key ID: B8878699435E69EC
5 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
www/index.html
View File

@ -190,6 +190,12 @@
</select> </select>
<input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/> <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
<label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label> <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
<label data-i18n="text-align">Align text</label>
<select id="text-align" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
<option value="left" data-i18n="align-left">Left</option>
<option value="center" data-i18n="align-mid">Middle</option>
<option value="right" data-i18n="align-right">Right</option>
</select>
</div> </div>
<div id="text-textarea"> <div id="text-textarea">
<textarea id="insert-text-area"></textarea> <textarea id="insert-text-area"></textarea>

6
www/lang/de-DE.json
View File

@ -107,5 +107,9 @@
"text-font": "Schriftart", "text-font": "Schriftart",
"text-size": "Textgröße", "text-size": "Textgröße",
"enter-text": "Text eingeben", "enter-text": "Text eingeben",
"wrap-by-space": "Autom. Zeilenumbruch" "wrap-by-space": "Autom. Zeilenumbruch",
"text-align": "Textausrichtung",
"align-left": "Linksbündig",
"align-mid": "Zentriert",
"align-right": "Rechtsbündig"
} }

6
www/lang/en-US.json
View File

@ -132,5 +132,9 @@
"text-font": "Font", "text-font": "Font",
"text-size": "Size", "text-size": "Size",
"enter-text": "Enter text", "enter-text": "Enter text",
"wrap-by-space": "Wrap words by spaces" "wrap-by-space": "Wrap words by spaces",
"text-align": "Align text",
"align-left": "Left",
"align-mid": "Center",
"align-right": "Right"
} }

9
www/main.css
View File

@ -660,4 +660,11 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
font-family: 'Unifont'; font-family: 'Unifont';
src: local('Unifont') url('unifont.ttf') url('unifont.otf'); src: local('Unifont') url('unifont.ttf') url('unifont.otf');
} }
#insert-text-area { white-space: pre; height: 50vh; width: var(--paper-width); overflow: hidden auto; white-space: pre-line;} #insert-text-area {
white-space: pre;
height: 50vh;
width: var(--paper-width);
overflow: hidden auto;
white-space: pre-line;
resize:none;
}

8
www/main.js
View File

@ -307,7 +307,7 @@ class CanvasController {
this._thresholdRange = document.querySelector('[name="threshold"]'); this._thresholdRange = document.querySelector('[name="threshold"]');
this._energyRange = document.querySelector('[name="energy"]'); this._energyRange = document.querySelector('[name="energy"]');
this.imageUrl = null; this.imageUrl = null;
this.textAlign = 0; // 0: Left, 1: Center, 2: Right this.textAlign = document.getElementById("text-align");
const prevent_default = (event) => { const prevent_default = (event) => {
event.preventDefault(); event.preventDefault();
@ -330,6 +330,7 @@ class CanvasController {
putEvent('#insert-text' , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value))); putEvent('#insert-text' , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value)));
putEvent('#text-size' , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px"); putEvent('#text-size' , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px");
putEvent('#text-font' , 'change', () => this.textArea.style["font-family"] = this.textFont.value); putEvent('#text-font' , 'change', () => this.textArea.style["font-family"] = this.textFont.value);
putEvent('#text-align' , 'change', () => this.textArea.style["text-align"] = this.textAlign.value);
putEvent('input[name="wrap-by-space"]' , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all"); putEvent('input[name="wrap-by-space"]' , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all");
putEvent('#button-preview' , 'click', this.activatePreview , this); putEvent('#button-preview' , 'click', this.activatePreview , this);
putEvent('#button-reset' , 'click', this.reset , this); putEvent('#button-reset' , 'click', this.reset , this);
@ -513,9 +514,10 @@ class CanvasController {
let y_pos = y_step; let y_pos = y_step;
for (let line of lines) { for (let line of lines) {
let x_pos = 0; let x_pos = 0;
if (this.textAlign == 2) { // Text-alignment
if (this.textAlign.value == "right") {
x_pos = Math.max(max_width - ctx.measureText(line).width, 0) x_pos = Math.max(max_width - ctx.measureText(line).width, 0)
} else if (this.textAlign == 1) { } else if (this.textAlign.value == "center") {
x_pos = Math.max(max_width - ctx.measureText(line).width, 0) / 2; x_pos = Math.max(max_width - ctx.measureText(line).width, 0) / 2;
} }