-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
265 lines (229 loc) · 8.07 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<html>
<head>
<!--
Originally created by /u/tollsjo for the /r/homelab community in December 2016
License: Creative Commons CC BY-SA 4.0
Modified by /u/is4m4 dec 2016
-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
body {
font-family: Lato, arial, sans-serif;
}
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#30333A;
top: 0;
left: 0;
color: white;
font-family: Lato, arial, sans-serif;
font-size: 42px;
}
/* Dell Gen11 (3.5in/2.5in) (14*8mm) */
div.dellwide {
width: 1.4cm;
height: 0.8cm;
background: linear-gradient(to bottom, #E0E0E0 50%, #000000 50%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 80%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 80%);
}
div.dellwide div.interface{
vertical-align: top;
text-align: center;
padding-left: 0.1cm;
color: black;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px;
}
div.dellwide div.size{
vertical-align: bottom;
line-height: 0.4cm;
text-align: center;
color: white;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 10px;
}
/* Dell Gen11 (2.5in) (12*12mm) */
div.dellslim {
width: 1.2cm;
height: 1.2cm;
background: linear-gradient(to bottom, #E0E0E0 33%, #000000 33%);
-webkit-clip-path: polygon(0% 20%, 20% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 20%, 20% 0%, 100% 0%, 100% 100%, 0% 100%);
}
div.dellslim div.interface{
vertical-align: top;
text-align: center;
padding-left: 0.1cm;
color: black;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px;
}
div.dellslim div.size{
vertical-align: bottom;
line-height: 0.4cm;
text-align: center;
color: white;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 10px;
white-space: pre-wrap;
}
/* HP Gen 5/6/7 (12.5*9mm)*/
.hp {
width: 1.2cm;
height: 0.9cm;
}
.hp div.speed{
border-top: thin solid #000000;
line-height: 0.2cm;
text-align: center;
background-color: #ffffff;
color: black;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 5px;
}
.hp div.interface{
line-height: 0.2cm;
text-align: center;
background-color: #8B008B;
color: white;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 5px;
}
.hp div.size{
line-height: 0.3cm;
text-align: center;
background-color: #000000;
color: white;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 10px;
}
.hp div.serial{
line-height: 0.2cm;
text-align: center;
background-color: #000000;
color: white;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 4px;
}
</style>
</head>
<body>
<div id="top" class="hide">
<img width="70px" height="70px" src="./reddit-snoo.jpg"/>
Homelab caddy label maker
</div>
<div class="hide" id="frm">
<h3>Print your own labels for drive caddies.</h3>
<p>Fill out the form and print the page from the browser. Make sure to print in the original size. In Safari: Select "Print Backgrounds".</p>
<p>#initfortheblinkenlights</p>
<br/>
First, Pick a base label:
<script>
//types of labels are defined here, the key is the internal name and global class used by the css to apply to the label
//the fields generate inputs and divs with the supplied class
types = {
dellwide: { title : "Dell Gen11 (3.5in/2.5in) (14*8mm)",
fields: [
{ title: "Interface:", class:"interface", type: "text", value:"SATA" },
{ title: "Size/Speed:", class:"size", type: "text", value:"500GB" }
]
},
dellslim: { title : "Dell Gen11 (2.5in) (12*12mm)",
fields: [
{ title: "Interface:", class:"interface", type: "text", value:"SATA" },
{ title: "Size/Speed:", class:"size", type: "text", value:"500GB 10K" }
]
},
hp : { title : "HP Gen 5/6/7 (12.5*9mm)",
fields: [
{ title: "Speed", class:"speed", type: "text", value:"Dual Port 10K" },
{ title: "Interface", class:"interface", type: "text", value:"SAS" },
{ title: "Size", class:"size", type: "text", value:"300 GB" },
{ title: "Serial", class:"serial", type: "text", value:"SPARE 123456-789" }
]
},
}
//generate the type select box with the title and internal name as value
var typeselect = $('<select>').appendTo('#frm');
typeselect.append($("<option>").attr('value', undefined).text(""));
for (var t in types) {
typeselect.append($("<option>").attr('value', t).text(types[t].title));
}
//handler for when the selection of label type changes
//indirectly renders the options with default values, then draws the labels
var renderType = function() {
var type = typeselect.val()
renderOptions()
renderLabels()
}
typeselect.change(renderType)
//generate the options with the defaults defined above
var renderOptions = function() {
var t=typeselect.val() //t = type
var f=types[t].fields //f = the type's options/fields
$("#options").empty().append(types[t].title+":<br />")
for (prop in f) {
console.log(f[prop]["title"]);
$("#options").append(f[prop].title+': <input type="'+f[prop].type+'" class="input-'+f[prop].class+'" value="'+f[prop].value+'" oninput="renderLabels()"><br />');
}
//render the inputs that control number of rows and collumns that renderLabels renders
//min and max options so we don't go below 1 and not over 13, experimentally proven to fill a page
$("#options").append('Collumns: <input type="number" id="cols" value="5" min=1 max=13 onchange="renderLabels()"><br />');
$("#options").append('Rows: <input type="number" id="rows" value="2" min=1 max=20 onchange="renderLabels()"><br />');
}
//actually renders the labels based on the options that are set
var renderLabels = function() {
var t=typeselect.val() //selected type name
var f=types[t].fields //it's option fields
$("#labels").empty()//erase the currently displayed labels, we are regenerating them from scratch
//generate one label, a bit ugly this way
var onelabel = '<td><div class="'+t+'">'
for (prop in f) {
onelabel += '<div class="'+f[prop].class+'">'+$(".input-"+f[prop].class).val()+'</div>'
}
onelabel += '</div></td>'
//create a table row and copy labels into it
var row = $("<tr>")
for (i = 0; i < $("#cols").val(); i++) {
row.append(onelabel)
}
//clone the row as many times as specified
//if we didn't clone it would just move the row into the table multiple times and show up as 1 row
for (i = 0; i < $("#rows").val(); i++) {
$("#labels").append(row.clone())
}
}
//dirty sleep function, probably hangs the tab/window :'(
function sleep(millis){
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
//hides elements with the hide class so we can then print a page without the ink wasting stuff on there :)
//after the browser generates the print version we can switch back.
//using a print specific css could be better but this is a fun hack
var hideandprint = function() {
$(".hide").hide()
sleep(200)
window.print()
sleep(100)
$(".hide").show()
}
</script>
<hr />
<div id="options"></div>
<hr/>
</div>
<table id="labels">
</table>
<button class="hide" onclick="hideandprint()">Print!</button>
<br/>
<p>Originally created by /u/tollsjo for the /r/homelab community in December 2016<p>
<p>Modified by /u/is4m4 because he could<p>
<p>License: Creative Commons CC BY-SA 4.0. Single file source. Download, improve, rehost and share with the community.</p>
</body>
</html>