-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
147 lines (141 loc) · 5.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>APRS Symbols - Demo</title>
<!-- Necessary CSS -->
<link rel="stylesheet" href="aprs-symbols.css"/>
<!-- Optional JS -->
<script src="aprs-symbols.js"></script>
<!-- helper JS for this demo -->
<script src="doc-ready.js"></script>
</head>
<body>
<h1>APRS Symbols - Demo</h1>
<p>
See source code and usage detailed in README of repository: <a href="https://github.com/smarek/aprs-symbols">https://github.com/smarek/aprs-symbols</a>
</p>
<!-- Pure HTML/CSS -->
<div id="pure-html-css">
<h2>Plain HTML/CSS usage</h2>
<h3>24px grid (default) - sample</h3>
<code>
<pre>
<i class="aprs-table0 aprs-address-0-0"></i>
<i class="aprs-table0 aprs-address-0-1"></i>
<i class="aprs-table0 aprs-address-0-2"></i>
<i class="aprs-table0 aprs-address-0-3"></i>
<i class="aprs-table0 aprs-address-0-4"></i>
<i class="aprs-table0 aprs-address-0-5"></i>
<i class="aprs-table0 aprs-address-0-6"></i>
<i class="aprs-table0 aprs-address-0-7"></i>
<i class="aprs-table0 aprs-address-0-8"></i>
<i class="aprs-table0 aprs-address-0-9"></i>
</pre>
</code>
<div>
<i class="aprs-table0 aprs-address-0-0"></i>
<i class="aprs-table0 aprs-address-0-1"></i>
<i class="aprs-table0 aprs-address-0-2"></i>
<i class="aprs-table0 aprs-address-0-3"></i>
<i class="aprs-table0 aprs-address-0-4"></i>
<i class="aprs-table0 aprs-address-0-5"></i>
<i class="aprs-table0 aprs-address-0-6"></i>
<i class="aprs-table0 aprs-address-0-7"></i>
<i class="aprs-table0 aprs-address-0-8"></i>
<i class="aprs-table0 aprs-address-0-9"></i>
</div>
<h3>48px grid - sample</h3>
<code>
<pre>
<i class="aprs-table0-48 aprs-address-48-0-0"></i>
<i class="aprs-table0-48 aprs-address-48-0-1"></i>
<i class="aprs-table0-48 aprs-address-48-0-2"></i>
<i class="aprs-table0-48 aprs-address-48-0-3"></i>
<i class="aprs-table0-48 aprs-address-48-0-4"></i>
<i class="aprs-table0-48 aprs-address-48-0-5"></i>
<i class="aprs-table0-48 aprs-address-48-0-6"></i>
<i class="aprs-table0-48 aprs-address-48-0-7"></i>
<i class="aprs-table0-48 aprs-address-48-0-8"></i>
<i class="aprs-table0-48 aprs-address-48-0-9"></i>
</pre>
</code>
<div>
<i class="aprs-table0-48 aprs-address-48-0-0"></i>
<i class="aprs-table0-48 aprs-address-48-0-1"></i>
<i class="aprs-table0-48 aprs-address-48-0-2"></i>
<i class="aprs-table0-48 aprs-address-48-0-3"></i>
<i class="aprs-table0-48 aprs-address-48-0-4"></i>
<i class="aprs-table0-48 aprs-address-48-0-5"></i>
<i class="aprs-table0-48 aprs-address-48-0-6"></i>
<i class="aprs-table0-48 aprs-address-48-0-7"></i>
<i class="aprs-table0-48 aprs-address-48-0-8"></i>
<i class="aprs-table0-48 aprs-address-48-0-9"></i>
</div>
</div>
<hr/>
<div id="js-helper-1">
<h2>JS helper getAPRSSymbolImageTag(string symbol)</h2>
<code>
<pre>var el = document.getElementById('js-helper-1-inner');
el.innerHTML += getAPRSSymbolImageTag('/['); // outputs: <i class="aprs-table0-24 aprs-address-24-3-10"></i>
el.innerHTML += getAPRSSymbolImageTag('/=', 48); // outputs: <i class="aprs-table0-48 aprs-address-48-1-12"></i>
el.innerHTML += getAPRSSymbolImageTag('/>', 64); // outputs: <i class="aprs-table0-64 aprs-address-64-1-13"></i>
el.innerHTML += getAPRSSymbolImageTag('/p', 128); // outputs: <i class="aprs-table0-128 aprs-address-128-4-15"></i>
</pre>
</code>
<div id="js-helper-1-inner">
</div>
<script type="text/javascript">
docReady(function () {
// use simple when known symbol
var el = document.getElementById('js-helper-1-inner');
el.innerHTML += getAPRSSymbolImageTag('/[');
el.innerHTML += getAPRSSymbolImageTag('/=', 48);
el.innerHTML += getAPRSSymbolImageTag('/>', 64);
el.innerHTML += getAPRSSymbolImageTag('/p', 128);
});
</script>
</div>
<hr/>
<div id="js-helper-2">
<h2>JS helper getAPRSSymbolImageTagByAddress(array address, number size = 24)</h2>
<small>size refers to grid (h/w) size, supported are 24px, 48px, 64px and 128px grids</small>
<code>
<pre>
docReady(function () {
var el = document.getElementById('js-helper-2-inner');
// generate all images from 2 basic tables
for (var table = 0; table < 2; table++) {
for (var row = 0; row < 6; row++) {
for (var col = 0; col < 16; col++) {
el.innerHTML += getAPRSSymbolImageTagByAddress([table, row, col])
}
el.innerHTML += '<br/>';
}
el.innerHTML += '<br/><br/>';
}
</pre>
</code>
<div id="js-helper-2-inner">
</div>
<script type="text/javascript">
docReady(function () {
var el = document.getElementById('js-helper-2-inner');
// generate all images from 2 basic tables
for (var table = 0; table < 2; table++) {
for (var row = 0; row < 6; row++) {
for (var col = 0; col < 16; col++) {
el.innerHTML += getAPRSSymbolImageTagByAddress([table, row, col])
}
el.innerHTML += '<br/>';
}
el.innerHTML += '<br/><br/>';
}
});
</script>
</div>
</body>
</html>