-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (160 loc) · 5.27 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/img/icon.png" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Binary-Coded Decimal Clock - Javascript Implementation</title>
<link rel="stylesheet" href="./bcdc.css">
<style>
.navbar .logo {
width: 48px;
}
.container a {
text-decoration: none;
}
.github a {
color: #666;
}
.github img {
width: 24px;
}
#tb-legend th,
#tb-legend td {
text-align: center;
vertical-align: middle;
}
#tb-legend tr td:nth-child(5) {
font-weight: bold;
}
#tb-legend .signal-on,
#tb-legend .signal-off {
border-radius: 50%;
width: 10px;
height: 10px;
margin: 1px auto;
}
#tb-legend .signal-off {
background: lightblue;
}
#tb-legend .signal-on {
background: red;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container">
<div class="navbar-brand">
<img src="./img/icon.png" class="logo"> Binary Clock
</div>
<div class="github">
<a href="https://github.com/feroli1000/binary-clock"><img src="./img/github.png"> Github</a>
</div>
</div>
</nav>
<main class="container py-5">
<h3>Binary-Coded Decimal Clock - Javascript Implementation</h3>
<h6><a href="https://en.wikipedia.org/wiki/Binary_clock"
target="_blank">https://en.wikipedia.org/wiki/Binary_clock</a></h6>
<table id="tb-clock" class="table table-bordered">
<!-- Dinamic content -->
</table>
<div class="row mt-5">
<div class="col-xl-6">
<table id="tb-legend" class="table table-bordered table-striped">
<thead>
<tr>
<th colspan="4">Binary</th>
<th>Decimal</th>
<th colspan="2">Leds</th>
</tr>
</thead>
<tbody>
<!-- Dinamic content -->
</tbody>
</table>
<div class="my-5">
<a href="https://github.com/feroli1000/binary-clock" class="btn btn-outline-primary"><img
src="./img/github.png"> <span class="h5">Source Code</span></a>
</div>
</div>
<div class="col-xl-6">
<h4>Binary-coded decimal clocks</h4>
<div>
<p><b>Each column represents a single decimal digit</b>, a format known as binary-coded decimal (BCD). The
bottom row
in each column represents 1 (or 20), with each row above representing higher powers of two, up to 23 (or 8).
</p>
<p>To read each individual digit in the time, the user adds the values that each illuminated LED represents,
then reads these from left to right.</p>
<p>The first two columns represent the hour, the next two represent the minute and the last two represent the
second. Since zero digits are not illuminated, the positions of each digit must be memorized if the clock is
to be usable in the dark.</p>
<div class="card" style="width: 18rem;">
<img src="./img/220px-Binary_clock.svg.png" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Reading a binary-coded decimal clock: Add the values of each column of LEDs to get
six decimal digits. There are two columns each for hours, minutes and seconds</p>
</div>
</div>
<p>Font: <a href="https://en.wikipedia.org/wiki/Binary_clock" target="_blank">Wikipedia</a></p>
</div>
</div>
</div>
</main>
<script src="./bcdc.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
(new BinaryDecimalClock('tb-clock')).init();
fillTableLegend();
}, false);
const LEDS_NUMBERS = [
[0], // 0
[1], // 1
[2], // 2
[2, 1], // 3
[4], // 4
[4, 1], // 5
[4, 2], // 6
[4, 2, 1], // 7
[8], // 8
[8, 1], // 9
];
function getBinaryArray(num) {
return num.toString(2).padStart(4, '0').split('');
}
function getDisplay(digit) {
const nums = getBinaryArray(digit);
let ret = '';
nums.forEach(elem => {
const signal = elem > 0 ? 'signal-on' : 'signal-off';
ret += `<div class="${signal}"></div>`;
});
return ret;
}
function fillTableLegend() {
const table = document.getElementById('tb-legend');
const tbody = table.getElementsByTagName('tbody')[0];
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(elem => {
const binary = getBinaryArray(elem);
const display = getDisplay(elem);
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${binary[0]}</td>
<td>${binary[1]}</td>
<td>${binary[2]}</td>
<td>${binary[3]}</td>
<td>${elem}</td>
<td>${LEDS_NUMBERS[elem]}</td>
<td>${display}</td>
`;
tbody.append(tr);
});
}
</script>
</body>
</html>