-
Notifications
You must be signed in to change notification settings - Fork 27
/
generator.html
137 lines (124 loc) · 4.26 KB
/
generator.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
<!DOCTYPE html>
<html>
<head>
<title>Unicode progress bars</title>
<meta charset="utf-8"/>
<style>
noscript {
display: inline-block;
margin: 1em 0;
padding: 8px 14px;
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body { margin: 0; padding: 0; display: inline-block; min-width: 100%; }
#container { padding: 0 10px; }
table { margin-top: 2em; border-spacing: 1em 0; }
tr { white-space: nowrap; }
#sans-serif { font-size: 14px; line-height: 18px; }
#sans-serif tr > :nth-child(1) { font-family: "Helvetica Neue" }
#sans-serif tr > :nth-child(2) { font-family: Arial }
#sans-serif tr > :nth-child(3) { font-family: sans-serif }
#serif { font-size: 22px; line-height: 28px; }
#serif tr > :nth-child(1) { font-family: Georgia }
#serif tr > :nth-child(2) { font-family: "Times New Roman" }
#serif tr > :nth-child(3) { font-family: serif }
input[type=number] { width: 3em; }
label { display: inline-block; margin-right: 1em; }
</style>
<script>
var bar_styles = [
'▁▂▃▄▅▆▇█',
'⣀⣄⣤⣦⣶⣷⣿',
'⣀⣄⣆⣇⣧⣷⣿',
'○◔◐◕⬤',
'□◱◧▣■',
'□◱▨▩■',
'□◱▥▦■',
'░▒▓█',
'░█',
'⬜⬛',
'▱▰',
'▭◼',
'▯▮',
'◯⬤',
'⚪⚫',
];
function repeat(s, i) {
var r = '';
for(var j=0; j<i; j++) r += s;
return r;
}
function make_bar(p, bar_style, min_size, max_size) {
var d, full, m, middle, r, rest, x,
min_delta = Number.POSITIVE_INFINITY,
full_symbol = bar_style[bar_style.length-1],
n = bar_style.length - 1;
if(p == 100) return {str: repeat(full_symbol, 10), delta: 0};
p = p / 100;
for(var i=max_size; i>=min_size; i--) {
x = p * i;
full = Math.floor(x);
rest = x - full;
middle = Math.floor(rest * n);
if(p != 0 && full == 0 && middle == 0) middle = 1;
d = Math.abs(p - (full+middle/n)/i) * 100;
if(d < min_delta) {
min_delta = d;
m = bar_style[middle];
if(full == i) m = '';
r = repeat(full_symbol, full) + m + repeat(bar_style[0], i-full-1);
}
}
return {str: r, delta: min_delta};
}
function generate() {
var r1 = document.getElementById('sans-serif-body'),
r2 = document.getElementById('serif-body'),
p = new Number(document.getElementById('percentage').value),
min_size = new Number(document.getElementById('min-size').value),
max_size = new Number(document.getElementById('max-size').value);
document.getElementById('sans-serif').style.display = 'table';
document.getElementById('serif').style.display = 'table';
r1.innerHTML = '';
r2.innerHTML = '';
var bars = [];
for(var i=0; i<bar_styles.length; i++) {
bars.push(make_bar(p, bar_styles[i], min_size, max_size));
}
bars.sort(function (a, b) { return a.delta - b.delta; });
for(var i=0; i<bars.length; i++) {
bar = '<td>'+bars[i].str+' '+p+'%</td>';
delta = '<td>'+bars[i].delta.toPrecision(2)+'%</td>';
row = '<tr>'+repeat(bar, 3)+delta+'</tr>'
r1.innerHTML += row;
r2.innerHTML += row;
}
}
</script>
</head>
<body>
<a href="https://github.com/Changaco/unicode-progress-bars"><img style="float: right; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div id="container">
<p>This program generates progress bars made of Unicode symbols.</p>
<form onsubmit="generate(); return false">
<label>Percentage: <input type="number" min=0 max=100 step="any" id="percentage" /></label>
<label>Min size: <input type="number" min=1 value=7 id="min-size" /></label>
<label>Max size: <input type="number" min=1 value=13 id="max-size" /></label>
<input type="submit" value="Generate" />
</form>
<noscript>This application requires JavaScript.</noscript>
<table id="sans-serif" style="display: none">
<thead><tr><th>Helvetica Neue<th>Arial<th>sans-serif<th>Delta</thead>
<tbody id="sans-serif-body"></tbody>
</table>
<table id="serif" style="display: none">
<thead><tr><th>Georgia<th>Times New Roman<th>serif<th>Delta</thead>
<tbody id="serif-body"></tbody>
</table>
</div>
</body>
</html>