Skip to content

Commit 3e65184

Browse files
ixsixs
committed
Add Counter and Suffix to Generator, rework Javascript slightly.
1 parent 9a8f2f9 commit 3e65184

File tree

2 files changed

+66
-45
lines changed

2 files changed

+66
-45
lines changed

‎index.php‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,16 @@
1616
<form name="main" action="lto.php" method="get">
1717
<div class="form-grid">
1818
<div>
19-
<label for="prefix">Prefix</label>
19+
<label for="prefix">Prefix (optional)</label>
2020
<input name="prefix" type="text" maxlength="6" value="ABC" onkeyup="updateTextlabel()" />
2121
</div>
2222
<div>
23-
<label for="suffix">Suffix</label>
24-
<input name="suffix" type="text" maxlength="6" value="456" onkeyup="updateTextlabel()" />
23+
<label for="count">Z&auml;hler</label>
24+
<input name="count" type="text" maxlength="6" value="34" onkeyup="updateTextlabel()" />
2525
</div>
2626
<div>
27-
<label for="tapeGen">LTO Typ</label>
28-
<select name="tapeGen" onChange="updateTapeGen()">
29-
<option value="1" selected>LTO 1</option>
30-
<option value="2">LTO 2</option>
31-
<option value="3">LTO 3</option>
32-
<option value="4">LTO 4</option>
33-
<option value="5">LTO 5</option>
34-
<option value="6">LTO 6</option>
35-
<option value="7">LTO 7</option>
36-
<option value="8">LTO 8</option>
37-
<option value="9">LTO 9</option>
38-
<option value="U">Universal</option>
39-
</select>
27+
<label for="suffix">Suffix (optional)</label>
28+
<input name="suffix" type="text" maxlength="6" value="T" onkeyup="updateTextlabel()" />
4029
</div>
4130

4231
<div>
@@ -47,26 +36,43 @@
4736
<label><input name="tapeType" type="radio" value="dg" onChange="updateTapeType()" /> Diagnosekasette</label>
4837
</fieldset>
4938
</div>
39+
5040
<div>
5141
<label for="colorscheme">Farbschema (<a href="colors.php">Farbtafel</a>)</label>
5242
<select name="colorscheme" onChange="updateColors()">
53-
<option value="HOT">HOT</option>
54-
<option value="WARM">WARM</option>
55-
<option value="COOL">COOL</option>
56-
<option value="BW">BW</option>
57-
<option value="VIBRANT">VIBRANT</option>
58-
<option value="INV">INV</option>
43+
<?php
44+
foreach (json_decode(file_get_contents('colors.json'), true) as $colorScheme => $colors) {
45+
echo " <option value=\"$colorScheme\">$colorScheme</option>\n";
46+
}
47+
?>
5948
</select>
6049
</div>
50+
51+
<div>
52+
<label for="tapeGen">LTO Typ</label>
53+
<select name="tapeGen" onChange="updateTapeGen()">
54+
<option value="1" selected>LTO 1</option>
55+
<option value="2">LTO 2</option>
56+
<option value="3">LTO 3</option>
57+
<option value="4">LTO 4</option>
58+
<option value="5">LTO 5</option>
59+
<option value="6">LTO 6</option>
60+
<option value="7">LTO 7</option>
61+
<option value="8">LTO 8</option>
62+
<option value="9">LTO 9</option>
63+
<option value="U">Universal</option>
64+
</select>
65+
</div>
66+
6167
<div>
6268
<label><input type="checkbox" name="fontType" value="ocr"> OCR-A Font</label><br />
6369
<label><input type="checkbox" name="colorizeChars" value="1" checked="checked" onChange="updateColors()"> Colorize Characters</label>
6470
</div>
6571
</div>
6672

6773
<div class="buttons">
74+
<input type="reset" onClick="setTimeout(updateTextlabel, 0)" value="Zur&uuml;cksetzen">
6875
<input type="submit" value="Generieren">
69-
<input type="reset" onClick="setTimeout(updateColors, 0)" value="Zurücksetzen">
7076
</div>
7177
</form>
7278

@@ -88,13 +94,13 @@
8894
<section class="description">
8995
<h2>Funktionsbeschreibung</h2>
9096
<p>
91-
Diese Webanwendung generiert <strong>Barcode-Etiketten für LTO-Datenträger</strong> gemäß den Spezifikationen gängiger LTO-Generationen (LTO-1 bis LTO-9 sowie Universal).
92-
Über das Formular können <strong>Präfix</strong> und <strong>Suffix</strong>, der <strong>LTO-Typ</strong>, der <strong>Kassetten-Typ</strong> (Daten-, Reinigungs- oder Diagnosekassette)
93-
sowie das <strong>Farbschema</strong> konfiguriert werden. Zusätzlich können die Verwendung einer <strong>OCR-A-Schriftart</strong> und
97+
Diese Webanwendung generiert <strong>Barcode-Etiketten f&uuml;r LTO-Datentr&auml;ger</strong> gem&auml;&szlig; den Spezifikationen g&auml;ngiger LTO-Generationen (LTO-1 bis LTO-9 sowie Universal).
98+
Über das Formular k&ouml;nnen <strong>Pr&auml;fix</strong> und <strong>Suffix</strong>, der <strong>LTO-Typ</strong>, der <strong>Kassetten-Typ</strong> (Daten-, Reinigungs- oder Diagnosekassette)
99+
sowie das <strong>Farbschema</strong> konfiguriert werden. Zus&auml;tzlich k&ouml;nnen die Verwendung einer <strong>OCR-A-Schriftart</strong> und
94100
<strong>farbige Zeichen</strong> aktiviert werden.
95101
</p>
96102
<p>
97-
Nach dem Absenden wird ein <strong>PDF-Dokument mit 24 fortlaufenden Etiketten</strong> erzeugt, das sich zum Ausdrucken und ausschneiden eignen.
103+
Nach dem Absenden wird ein <strong>PDF-Dokument mit 24 fortlaufenden Etiketten</strong> erzeugt, da&szlig; sich zum Ausdrucken und ausschneiden eignet.
98104
</p>
99105
</section>
100106

‎lto.js.php‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22

33
header("Content-Type: text/javascript");
44

5-
echo '
5+
?>
6+
67
var l1, l2, l3, l4, l5, l6;
7-
var suffix, prefix, mediatype, type;
8+
var mediatype, type;
89

910
// define colors
10-
';
11+
<?php
1112

1213
$colors = json_decode(file_get_contents("colors.json"), true);
1314

@@ -30,28 +31,42 @@ function getColor() {
3031
return document.getElementsByName("colorscheme")[0].value;
3132
}
3233

33-
function updateText(prefix, suffix) {
34-
// Concat and cut to 6 Upperchars
35-
string = prefix.value + suffix.value;
36-
string = string.substr(0, 6);
37-
string = string.toUpperCase();
38-
// Pad the string to 6 chars
39-
for (var i = string.length; i <= 6; i++) {
40-
string = string + " ";
34+
function getLabelText() {
35+
let mediatype, count, suffix, prefix, typeType, tapegen;
36+
37+
prefix = document.getElementsByName("prefix")[0].value;
38+
count = document.getElementsByName("count")[0].value;
39+
suffix = document.getElementsByName("suffix")[0].value;
40+
tapeType = document.querySelector('input[name="tapeType"]:checked').value;
41+
tapegen = document.getElementsByName("tapeGen")[0].value;
42+
43+
if (tapeType == "cln") {
44+
mediatype = "C" + tapegen;
45+
} else {
46+
mediatype = "L" + tapegen;
4147
}
4248

49+
count = count.padStart(6 - prefix.length - suffix.length, "0");
50+
let label = (prefix + count + suffix).substr(0, 6) + mediatype;
51+
console.log("label: " + label);
52+
return label;
53+
54+
}
55+
56+
function updateText() {
57+
string = getLabelText();
58+
4359
l1.firstChild.nodeValue = string.charAt(0);
4460
l2.firstChild.nodeValue = string.charAt(1);
4561
l3.firstChild.nodeValue = string.charAt(2);
4662
l4.firstChild.nodeValue = string.charAt(3);
4763
l5.firstChild.nodeValue = string.charAt(4);
4864
l6.firstChild.nodeValue = string.charAt(5);
49-
65+
mediatype.firstChild.nodeValue = string.substr(6, 8);
5066
}
5167

5268
function updateBarcode() {
53-
label = (prefix.value + suffix.value).substr(0, 6) + "L" + document.getElementsByName("tapeGen")[0].value;
54-
JsBarcode("#barcode", label, {
69+
JsBarcode("#barcode", getLabelText(), {
5570
format: "CODE39",
5671
displayValue: false,
5772
height: 45,
@@ -61,7 +76,7 @@ function updateBarcode() {
6176
}
6277

6378
function updateTextlabel() {
64-
updateText(prefix, suffix);
79+
updateText();
6580
updateColors();
6681
updateBarcode();
6782
}
@@ -121,16 +136,19 @@ function updateTapeType() {
121136
document.getElementsByName("prefix")[0].disabled = false;
122137
document.querySelector('input[name="colorizeChars"]').checked = true;
123138
document.querySelector('select[name="colorscheme"]').value = 'HOT';
139+
document.querySelector('select[name="tapeGen"]').value = '1';
124140
} else if (type == "cln") {
125141
document.getElementsByName("prefix")[0].value = "CLN";
126142
document.getElementsByName("prefix")[0].disabled = true;
127143
document.querySelector('input[name="colorizeChars"]').checked = false;
128144
document.querySelector('select[name="colorscheme"]').value = 'BW';
145+
document.querySelector('select[name="tapeGen"]').value = 'U';
129146
} else if (type == "dg") {
130147
document.getElementsByName("prefix")[0].value = "DG ";
131148
document.getElementsByName("prefix")[0].disabled = true;
132149
document.querySelector('input[name="colorizeChars"]').checked = false;
133150
document.querySelector('select[name="colorscheme"]').value = 'INV';
151+
document.querySelector('select[name="tapeGen"]').value = '1';
134152
}
135153
updateTextlabel();
136154
updateColors();
@@ -146,9 +164,6 @@ function Init() {
146164
l6 = document.getElementById("l6");
147165
mediatype = document.getElementById("mediatype");
148166

149-
suffix = document.getElementsByName("suffix")[0];
150-
prefix = document.getElementsByName("prefix")[0];
151-
152167
updateTextlabel();
153168
updateColors();
154169
updateTapeGen();

0 commit comments

Comments
 (0)