arno/trezor-firmware
1
0
Fork 0
mirror of https://github.com/trezor/trezor-firmware.git synced 2024-12-23 23:08:14 +00:00
Code Issues Releases Wiki Activity

core/tools: refactor dialog-designer tool

Browse Source
This commit is contained in:
Pavol Rusnak 2020-06-04 21:39:47 +02:00
parent d9d5511858
commit 5ed64a0736
No known key found for this signature in database
GPG Key ID: 91F3B339B9A02A3D
2 changed files with 28 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
core/tools/dialog-designer/index.html
View File

@ -8,11 +8,11 @@
<body>
<table>
<tr><td>Title:</td><td><input id="title" value="SD card protection"></td><td rowspan="7"><canvas id="canvas" width="240" height="240" style="margin: 10px; background: black;"></canvas></td></tr>
<tr><td>Line1:</td><td><input id="line1" value="Do you really want to"><input type="checkbox" id="bold_line1"><input type="checkbox" id="mono_line1"></td></tr>
<tr><td>Line2:</td><td><input id="line2" value="secure your device with"><input type="checkbox" id="bold_line2"><input type="checkbox" id="mono_line2"></td></tr>
<tr><td>Line3:</td><td><input id="line3" value="SD card protection?"><input type="checkbox" id="bold_line3"><input type="checkbox" id="mono_line3"></td></tr>
<tr><td>Line4:</td><td><input id="line4" value=""><input type="checkbox" id="bold_line4"><input type="checkbox" id="mono_line4"></td></tr>
<tr><td>Line5:</td><td><input id="line5" value=""><input type="checkbox" id="bold_line5"><input type="checkbox" id="mono_line5"></td></tr>
<tr><td>Line 1:</td><td><input id="line1" value="Do you really want to"><input type="checkbox" id="bold_line1"><input type="checkbox" id="mono_line1"></td></tr>
<tr><td>Line 2:</td><td><input id="line2" value="secure your device with"><input type="checkbox" id="bold_line2"><input type="checkbox" id="mono_line2"></td></tr>
<tr><td>Line 3:</td><td><input id="line3" value="SD card protection?"><input type="checkbox" id="bold_line3"><input type="checkbox" id="mono_line3"></td></tr>
<tr><td>Line 4:</td><td><input id="line4" value=""><input type="checkbox" id="bold_line4"><input type="checkbox" id="mono_line4"></td></tr>
<tr><td>Line 5:</td><td><input id="line5" value=""><input type="checkbox" id="bold_line5"><input type="checkbox" id="mono_line5"></td></tr>
<tr><td>Confirm:</td><td><input id="confirm" value=""></td></tr>
</table>
<!-- keep these lines here so the fonts are preloaded -->

66
core/tools/dialog-designer/script.js
View File

@ -12,33 +12,27 @@ function setFont(ctx, bold, mono) {
ctx.font = font;
}
function measureWidth(ctx, text, bold, mono) {
setFont(ctx, bold, mono);
return ctx.measureText(text).width;
}
function text(ctx, x, y, text, bold, mono) {
setFont(ctx, bold, mono);
ctx.fillText(text, x, y);
}
function textCenter(ctx, x, y, text, bold, mono) {
setFont(ctx, bold, mono);
var w = ctx.measureText(text).width;
ctx.fillText(text, x - w / 2, y);
}
function render() {
var title_str = document.getElementById("title").value;
var line1_str = document.getElementById("line1").value;
var line2_str = document.getElementById("line2").value;
var line3_str = document.getElementById("line3").value;
var line4_str = document.getElementById("line4").value;
var line5_str = document.getElementById("line5").value;
var bold1 = document.getElementById("bold_line1").checked;
var bold2 = document.getElementById("bold_line2").checked;
var bold3 = document.getElementById("bold_line3").checked;
var bold4 = document.getElementById("bold_line4").checked;
var bold5 = document.getElementById("bold_line5").checked;
var mono1 = document.getElementById("mono_line1").checked;
var mono2 = document.getElementById("mono_line2").checked;
var mono3 = document.getElementById("mono_line3").checked;
var mono4 = document.getElementById("mono_line4").checked;
var mono5 = document.getElementById("mono_line5").checked;
var line_str = [];
var bold = [];
var mono = [];
for (var i = 1; i <= 5; i++) {
line_str[i] = document.getElementById("line" + i).value;
bold[i] = document.getElementById("bold_line" + i).checked;
mono[i] = document.getElementById("mono_line" + i).checked;
}
var confirm_str = document.getElementById("confirm").value;
var canvas = document.getElementById('canvas');
@ -51,33 +45,19 @@ function render() {
}
text(ctx, 44, 35, title_str, true);
text(ctx, 14, 48 + 26 * 1, line1_str, bold1, mono1);
text(ctx, 14, 48 + 26 * 2, line2_str, bold2, mono2);
text(ctx, 14, 48 + 26 * 3, line3_str, bold3, mono3);
text(ctx, 14, 48 + 26 * 4, line4_str, bold4, mono4);
text(ctx, 14, 48 + 26 * 5, line5_str, bold5, mono5);
var w = measureWidth(ctx, confirm_str);
text(ctx, 120 - w / 2, 215, confirm_str, true);
for (var i = 1; i <= 5; i++) {
text(ctx, 14, 48 + 26 * i, line_str[i], bold[i], mono[i]);
}
textCenter(ctx, 120, 215, confirm_str, true);
}
window.onload = function() {
document.getElementById("title").onkeyup = render;
document.getElementById("line1").onkeyup = render;
document.getElementById("line2").onkeyup = render;
document.getElementById("line3").onkeyup = render;
document.getElementById("line4").onkeyup = render;
document.getElementById("line5").onkeyup = render;
document.getElementById("bold_line1").onclick = render;
document.getElementById("bold_line2").onclick = render;
document.getElementById("bold_line3").onclick = render;
document.getElementById("bold_line4").onclick = render;
document.getElementById("bold_line5").onclick = render;
document.getElementById("mono_line1").onclick = render;
document.getElementById("mono_line2").onclick = render;
document.getElementById("mono_line3").onclick = render;
document.getElementById("mono_line4").onclick = render;
document.getElementById("mono_line5").onclick = render;
for (var i = 1; i <= 5; i++) {
document.getElementById("line" + i).onkeyup = render;
document.getElementById("bold_line" + i).onclick = render;
document.getElementById("mono_line" + i).onclick = render;
}
document.getElementById("confirm").onkeyup = render;
render();
}