arno
/
trezor-firmware
mirror of https://github.com/trezor/trezor-firmware.git
1
0
Fork 0
Code Issues Releases Wiki Activity

core/tools: add quick'n'dirty dialog-designer tool

Browse Source
pull/971/head
Pavol Rusnak 4 years ago
parent 7579ac5274
commit d9d5511858
No known key found for this signature in database
GPG Key ID: 91F3B339B9A02A3D
4 changed files with 108 additions and 0 deletions
Show Stats Download Patch File Download Diff File

25
core/tools/dialog-designer/index.html
Unescape View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trezor Dialog Designer</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<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>Confirm:</td><td><input id="confirm" value=""></td></tr>
</table>
<!-- keep these lines here so the fonts are preloaded -->
<div style="font-size: 20px; font-family: 'Roboto';"> </div>
<div style="font-size: 20px; font-family: 'Roboto'; font-weight: bold;"> </div>
<div style="font-size: 20px; font-family: 'Roboto Mono';"> </div>
<div style="font-size: 20px; font-family: 'Roboto Mono'; font-weight: bold;"> </div>
<script src="script.js"></script>
</body>
</html>

BIN
core/tools/dialog-designer/screen-confirm.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
core/tools/dialog-designer/screen-yes-no.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

83
core/tools/dialog-designer/script.js
Unescape View File

@ -0,0 +1,83 @@
var img_confirm = new Image();
img_confirm.src = "screen-confirm.png";
var img_yesno = new Image();
img_yesno.src = "screen-yes-no.png";
function setFont(ctx, bold, mono) {
ctx.fillStyle = 'white';
var font = bold ? 'bold ' : '';
font += '20px "Roboto';
font += mono ? ' 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 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 confirm_str = document.getElementById("confirm").value;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (confirm_str) {
ctx.drawImage(img_confirm, 0, 0);
} else {
ctx.drawImage(img_yesno, 0, 0);
}
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);
}
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;
document.getElementById("confirm").onkeyup = render;
render();
}
Write Preview
Loading…
Cancel
Save