-
Notifications
You must be signed in to change notification settings - Fork 0
/
digital-score.html
75 lines (75 loc) · 3.31 KB
/
digital-score.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
<!DOCTYPE html>
<html>
<head>
<title>Digital Score</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
body {background-color: #222; position: relative; left: 10px; width: 90vw; height: 90vh;}
a, h1, p, span {color: #fff; font-family: verdana;}
input {margin: 4px 0px; display: block;}
</style>
</head>
<body>
<h1>Digital Score</h1>
<p>Display a classic 7 segment score with 8 digits maximum. Decimals and negatives also supported.</p>
<input type="number" id="scoreDisplay" value="0">
<canvas id="myCanvas" width="1090" height="290"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let supported = ["10111110", "00000110", "11101100", "11100110", "01010110", "11110010", "11111010", "10000110", "11111110", "11110110", "10111111", "00000111", "11101101", "11100111", "01010111", "11110011", "11111011", "10000111", "11111111", "11110111", "01000000"];
setInterval(function() {
let score = document.getElementById("scoreDisplay").value;
score = score.replaceAll("0.", "a");
score = score.replaceAll("1.", "b");
score = score.replaceAll("2.", "c");
score = score.replaceAll("3.", "d");
score = score.replaceAll("4.", "e");
score = score.replaceAll("5.", "f");
score = score.replaceAll("6.", "g");
score = score.replaceAll("7.", "h");
score = score.replaceAll("8.", "i");
score = score.replaceAll("9.", "j");
c.width = String(score).length * 180 + 10;
if (c.width > 1450) {c.width = 0;}
if (c.width === 10) {c.width = 0;}
ctx.fillStyle = "#000";
ctx.fillRect(1, 0, c.width, c.height);
function displaySegmentForChar(cc) {
if (String(cc) === "1") {
ctx.fillStyle = "#f00";
} else {
ctx.fillStyle = "#200";
}
}
function displayDigit(char, offset) {
displaySegmentForChar(String(char).charAt(0));
ctx.fillRect(offset, 5, 100, 20);
displaySegmentForChar(String(char).charAt(1));
ctx.fillRect(offset, 135, 100, 20);
displaySegmentForChar(String(char).charAt(2));
ctx.fillRect(offset, 265, 100, 20);
displaySegmentForChar(String(char).charAt(3));
ctx.fillRect(offset - 25, 30, 20, 100);
displaySegmentForChar(String(char).charAt(4));
ctx.fillRect(offset - 25, 160, 20, 100);
displaySegmentForChar(String(char).charAt(5));
ctx.fillRect(offset + 105, 30, 20, 100);
displaySegmentForChar(String(char).charAt(6));
ctx.fillRect(offset + 105, 160, 20, 100);
displaySegmentForChar(String(char).charAt(7));
ctx.fillRect(offset + 130, 265, 20, 20);
}
for (i = 0; i < String(score).length; i++) {
if (String(score).charCodeAt(i) >= 97) {
displayDigit((supported[String(score).charCodeAt(i) - 87]), 35 + i * 180);
} else if (String(score).charCodeAt(i) === 45) {
displayDigit(supported[20], 35 + i * 180);
} else {
displayDigit((supported[String(score).charCodeAt(i) - 48]), 35 + i * 180);
}
}
});
</script>
</body>
</html>