1 | <!-- |
---|
2 | /* |
---|
3 | * Übersicht über POST-Parameter, die das Formular stellt bzw. die Seite |
---|
4 | anschließend entgegen nimmt: |
---|
5 | |
---|
6 | *'data-src' = file|input|font |
---|
7 | -> file => 'data-file' (dateiupload) |
---|
8 | -> form => 'data-form' = hex[nl]|oct[nl]|bin[nl]|dec[nl] |
---|
9 | 'data-input' = auf Länge checken und format |
---|
10 | -> font => 'data-text' = auf gute Zeichen checken ([a-zA-Z0-9 ]) |
---|
11 | |
---|
12 | *'format' = PNG|SVG |
---|
13 | *'dimension-src' = width|height|diameter |
---|
14 | -> width => dimension-width |
---|
15 | -> height => dimension-height jeweils auf int checken |
---|
16 | -> diameter => dimension-diameter |
---|
17 | |
---|
18 | *'alignment' => hor-[rtl|ltr]-[l|r] | ver-[btt|ttb]-[u|o] |
---|
19 | |
---|
20 | komponenten = imagebg|tapebg|punched|notpunched|feedholes |
---|
21 | |
---|
22 | *'show-'+[komponenten] (nur toggle an/aus) |
---|
23 | *'color-'+[komponenten] => #RRGGBB |
---|
24 | *'lucency-'+[komponenten] => AA |
---|
25 | |
---|
26 | *'empty-start', 'empty-end' => int |
---|
27 | */ |
---|
28 | --> |
---|
29 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
---|
30 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
---|
31 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> |
---|
32 | <html> |
---|
33 | <head> |
---|
34 | <title>Lochstreifenvisualisierung online - technikum29 Private Zone</title> |
---|
35 | <link rel="stylesheet" href="http://dev.technikum29.de/src/private.design/style.css" type="text/css"/> |
---|
36 | <link rel="stylesheet" href="design/formular.css" type="text/css"/> |
---|
37 | <script type="text/javascript" src="design/teleport_post.js"></script> |
---|
38 | <script type="text/javascript" src="design/formular.js"></script> |
---|
39 | <meta name="date.initial" value="02.04.2008"/> |
---|
40 | <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> |
---|
41 | </head> |
---|
42 | <body> |
---|
43 | <h1><a href="../"><span>technikum29.de interne Projekte:</span></a><strong>Lochstreifenprojekt</strong></h1> |
---|
44 | |
---|
45 | <img src="design/logo.png" style="float:left;" /> |
---|
46 | <h2>Lochstreifenvisualisierung</h2> |
---|
47 | |
---|
48 | <p>Im Rahmen des Lochstreifenprojektes wurde ein ausgabemediumunabhängiges Visualisierungsprogramm |
---|
49 | geschrieben. Unter anderem kann es über ein grafisches Frontend gesteuert werden oder mit einem |
---|
50 | Kommandozeilenfrontend bedient werden. Eine weitere Möglichkeit ist dieses Webfrontend, welches sich |
---|
51 | über das folgende Formular steuern lässt. Hier lassen sich wie auch bei den anderen Verwendungsarten |
---|
52 | alle möglichen Einstellungen vornehmen, wie zum Beispiel Farben, Darstellung und Format. |
---|
53 | <br/>Im Gegensatz zu dem grafischen Programm, welches man auf seinem heimischen Computer laufen hat, |
---|
54 | ist die Online-Variante allerdings einigen Begrenzungen ausgesetzt: Aufgrund der resultierenden |
---|
55 | Bilder mit enormen Ausmaßen (einige hunderttausend Pixel Breite) dürfen nur bis etwa 500kb Daten |
---|
56 | auf einem "virtuellen" Lochstreifen untergebracht werden.</p> |
---|
57 | |
---|
58 | <p>Erste Eindrücke, wie solche Lochstreifenbilder aussehen, kann man in der |
---|
59 | <a href="temp/">Gallerie der bereits erstellten Lochstreifen</a> erlangen.</p> |
---|
60 | |
---|
61 | <form method="POST" action="generator.php" enctype="multipart/form-data" style="clear:both"> |
---|
62 | |
---|
63 | <fieldset class="shown"> |
---|
64 | <h3>Daten</h3> |
---|
65 | <div class="content"> |
---|
66 | <p>Welche Daten sollen auf den Lochstreifen gestanzt werden?</p> |
---|
67 | |
---|
68 | <div class="box"> |
---|
69 | <input type="radio" name="data-src" id="data-src-file" value="file" checked="checked" onChange="en('data-file');dis('data-form data-input data-text')" /> |
---|
70 | <label for="data-src-file">Diese <strong>Datei</strong> stanzen:</label> <input type="file" name="data-file" /> |
---|
71 | <br/><small>Hinweis: Bereits einige Kilobytes potenzieren sich im Bild zu mehreren tausend Pixeln Breite! Erlaubt sind daher |
---|
72 | nur Dateien bis 500kb)</small> |
---|
73 | </div> |
---|
74 | |
---|
75 | <div class="box"> |
---|
76 | <input type="radio" name="data-src" id="data-src-input" value="input" onChange="en('data-form data-input');dis('data-file data-text')" /> |
---|
77 | <label for="data-src-input"><strong>Bytes eingeben</strong>. Wählen sie dazu ihre gewünschte Form:</label> |
---|
78 | <select name="data-form"> |
---|
79 | <option value="hex">Hexadezimal (0f ab 4c 58...)</option> |
---|
80 | <option value="hex0">Hexadezimal nach IBM (0x0f 0xab 0x4c 0x58...)</option> |
---|
81 | <option value="oct">Oktal (271 077 422 712...)</option> |
---|
82 | <option value="bin">Binär (01001010 01001101 01001000...)</option> |
---|
83 | <option value="dec">Dezimal (0 256 15 127 33 97...)</option> |
---|
84 | </select> |
---|
85 | <br/>Die Bytes müssen jeweils durch Leerzeichen oder Zeilenumbrüche voneinander getrennt sein. |
---|
86 | <br/><textarea name="data-input" rows="10" cols="80"> |
---|
87 | 01 23 45 67 89 ab cd ef |
---|
88 | </textarea> |
---|
89 | </div> |
---|
90 | |
---|
91 | <div class="box"> |
---|
92 | <input type="radio" name="data-src" id="data-src-font" value="font" onChange="en('data-text');dis('data-form data-input data-file')" /> |
---|
93 | <label for="data-src-font"> |
---|
94 | <img src="design/beschriftung.jpg" alt="Echter Lochstreifen mit Beschriftung" style="float:right;" /> |
---|
95 | <strong>Text generieren</strong> |
---|
96 | <br/>Mit dem Eingeben von Buchstaben wird das entsprechende Bitmuster – wie im Bild gezeigt – generiert. |
---|
97 | </label>: |
---|
98 | <br/><input type="text" maxlength="500" name="data-text" /> |
---|
99 | <!--<input type="radio" name="data-src" id="data-src-external" value="external" disabled="disabled" /> |
---|
100 | Die Daten durch ein anderes externes Programm auf diesem Server direkt generieren lassen. Zur Verfügung |
---|
101 | stehen z.B. |
---|
102 | <ul> |
---|
103 | <li>der <a href="label-generator.php">Schrift-Generator</a>. |
---|
104 | </ul> |
---|
105 | Zum Benutzen dieser Programme verlassen sie diese Seite und werden durch das entsprechende Programm |
---|
106 | wieder darauf verwiesen.--> |
---|
107 | <div class="clear"> </div> |
---|
108 | </div> |
---|
109 | </div> |
---|
110 | </fieldset> |
---|
111 | |
---|
112 | <fieldset class="initially-hidden"> |
---|
113 | <h3>Ausgabeformat</h3> |
---|
114 | <p class="abstract">In welchem Dateiformat soll das Lochstreifenbild generiert werden? PNG? SVG?</p> |
---|
115 | <div class="content"> |
---|
116 | <p>Zur Verfügung stehen zwei verschiedene Dateiformate:</p> |
---|
117 | |
---|
118 | <div class="box"> |
---|
119 | <input type="radio" name="format" id="format-PNG" value="PNG" checked="checked" /> |
---|
120 | <label for="format-PNG"><strong>PNG-Format</strong>. Damit entstehen Bilder, die man mit |
---|
121 | jedem Bildbearbeitungsprogramm weiterverarbeiten kann und die jeder öffnen kann, daher zieht |
---|
122 | man in der Regel ein PNG-Bild der SVG-Grafik vor.</label> |
---|
123 | </div> |
---|
124 | |
---|
125 | <div class="box"> |
---|
126 | <input type="radio" name="format" id="format-SVG" value="SVG" /> |
---|
127 | <label for="format-SVG"><strong>SVG-Format</strong>. Damit entstehen Vektorgrafiken, die mit |
---|
128 | Vektorgrafikprogrammen (z.B. <a href="http://www.inkscape.org" target="_blank">Inkscape</a>) |
---|
129 | bearbeitet werden können. So können im Nachhinein z.B. einzelne Elemente (Löcher) |
---|
130 | verschoben werden, oder die Bilder schematisch weiterverwendet werden, usw.</label> |
---|
131 | </div> |
---|
132 | </div> |
---|
133 | </fieldset> |
---|
134 | |
---|
135 | <fieldset class="initially-hidden"> |
---|
136 | <h3>Dimension</h3> |
---|
137 | <p class="abstract">Wie groß soll das erzeugte Bild werden?</p> |
---|
138 | <div class="content"> |
---|
139 | <p>Bitte wählen sie die gewünschte Bezugsgröße aus, von der sie die Größe des erzeugten Bildes |
---|
140 | abhängig machen wollen. Geben sie dann eine sinnvolle positive ganze Zahl ein (z.B. <i>156</i> Pixel)</p> |
---|
141 | |
---|
142 | <div class="box"> |
---|
143 | <input type="radio" name="dimension-src" id="dimension-src-width" value="width" onChange="en('dimension-width');dis('dimension-height dimension-diameter')" /> |
---|
144 | <label for="dimension-src-width"><strong>Bildbreite fest setzen</strong>, und zwar auf</label> |
---|
145 | <input type="text" name="dimension-width" /> Pixel. |
---|
146 | <br/>Die Bildhöhe wird dann abhängig von der Anzahl der Bytes, die gestanzt werden. |
---|
147 | </div> |
---|
148 | |
---|
149 | <div class="box"> |
---|
150 | <input type="radio" name="dimension-src" id="dimension-src-height" value="height" onChange="en('dimension-height');dis('dimension-width dimension-diameter')" /> |
---|
151 | <label for="dimension-src-height"><strong>Bildhöhe fest setzen</strong>, und zwar auf</label> |
---|
152 | <input type="text" name="dimension-height" /> Pixel. |
---|
153 | <br/>Die Bildbreite wird dann abhängig von der Anzahl der Anzahl der Bytes die gestanzt werden. |
---|
154 | </div> |
---|
155 | |
---|
156 | <div class="box"> |
---|
157 | <input type="radio" name="dimension-src" id="dimension-src-diameter" value="diameter" checked="checked" onChange="en('dimension-diameter');dis('dimension-width dimension-height')" /> |
---|
158 | <label for="dimension-src-diameter"><strong>Durchmesser der Löcher fest setzen</strong>, und zwar auf</label> |
---|
159 | <input type="text" name="dimension-diameter" value="5" /> Pixel. |
---|
160 | <br/>Die Bildbreite und Bildhöhe ist anschließend abhänigg von der Anzahl der Bytes, die gestanzt werden. |
---|
161 | </div> |
---|
162 | |
---|
163 | <p>Beachten sie: Je nach Ausrichtung des Lochstreifens wechseln die relevanten Faktoren für die jeweilige |
---|
164 | Berechnung der Bildgröße. Bildbreite/Höhe beziehen sich jedoch unabhängig von der Rotation auf die |
---|
165 | tatsächliche Breite/Höhe des resultierenden Bildes (und dürfen dementsprechend nicht mit Breite/Höhe |
---|
166 | des abgebildeten Lochstreifens verwechselt werden). Nur die Angabe des Durchmessers ist unabhängig |
---|
167 | von der Rotation ein Maß für die tatsächliche Größe des Lochstreifens.</p> |
---|
168 | </div> |
---|
169 | </fieldset> |
---|
170 | |
---|
171 | <fieldset class="initially-hidden"> |
---|
172 | <h3>Ausrichtung</h3> |
---|
173 | <p class="abstract">Wie soll der Lochstreifen in dem Bild angeordnet sein?</p> |
---|
174 | <div class="content"> |
---|
175 | <p>Die Ausrichtung des Lochstreifens und gegebenenfalls Spiegelungen horizontal oder vertikal |
---|
176 | bestimmen, wie das Bild am Ende aussieht. Insgesamt gibt es so acht Möglichkeiten, den |
---|
177 | Streifen im Bild anzuordnen. Sie sind schematisch aufgezeigt.</p> |
---|
178 | |
---|
179 | <table class="box"> |
---|
180 | <tr> |
---|
181 | <td><label for="alignment-hor-rtl-o"> |
---|
182 | <input type="radio" name="alignment" value="hor-rtl-u" id="alignment-hor-rtl-o" checked="checked" /> |
---|
183 | <img src="design/hor-rtl-o.png" alt="Von rechts nach links, Führung oberhalb.." /> |
---|
184 | </label></td> |
---|
185 | <td rowspan="2"><label for="alignment-ver-btt-l"> |
---|
186 | <input type="radio" name="alignment" value="ver-btt-l" id="alignment-ver-btt-l" /> |
---|
187 | <img src="design/ver-btt-l.png" alt="Von unten nach oben, Führung links." /> |
---|
188 | </label></td> |
---|
189 | <td rowspan="2"><label for="alignment-ver-btt-r"> |
---|
190 | <input type="radio" name="alignment" value="ver-btt-r" id="alignment-ver-btt-r" /> |
---|
191 | <img src="design/ver-btt-r.png" alt="Von unten nach oben, Führung rechts." /> |
---|
192 | </label></td> |
---|
193 | </tr> |
---|
194 | <tr> |
---|
195 | <td><label for="alignment-hor-rtl-u"> |
---|
196 | <input type="radio" name="alignment" value="hor-rtl-u" id="alignment-hor-rtl-u" /> |
---|
197 | <img src="design/hor-rtl-u.png" alt="Von rechts nach links, Führung unterhalb." /> |
---|
198 | </label></td> |
---|
199 | </tr> |
---|
200 | <tr> |
---|
201 | <td><label for="alignment-hor-ltr-o"> |
---|
202 | <input type="radio" name="alignment" value="hor-ltr-o" id="alignment-hor-ltr-o" /> |
---|
203 | <img src="design/hor-ltr-o.png" alt="Von links nach rechts, Führung oberhalb." /> |
---|
204 | </label></td> |
---|
205 | <td rowspan="2"><label for="alignment-ver-ttb-l"> |
---|
206 | <input type="radio" name="alignment" value="ver-ttb-l" id="alignment-ver-ttb-l" /> |
---|
207 | <img src="design/ver-ttb-l.png" alt="Von oben nach unten, Führung links." /> |
---|
208 | </label></td> |
---|
209 | <td rowspan="2"><label for="alignment-ver-ttb-r"> |
---|
210 | <input type="radio" name="alignment" value="ver-ttb-r" id="alignment-ver-ttb-r" /> |
---|
211 | <img src="design/ver-ttb-r.png" alt="Von oben nach unten, Führung rechts." /> |
---|
212 | </label></td> |
---|
213 | </tr> |
---|
214 | <tr> |
---|
215 | <td><label for="alignment-hor-ltr-u"> |
---|
216 | <input type="radio" name="alignment" value="hor-ltr-u" id="alignment-hor-ltr-u" /> |
---|
217 | <img src="design/hor-ltr-u.png" alt="Von links nach rechts, Führung unterhalb." /> |
---|
218 | </label></td> |
---|
219 | </tr> |
---|
220 | </table> |
---|
221 | </div> |
---|
222 | </fieldset> |
---|
223 | |
---|
224 | <fieldset class="initially-hidden"> |
---|
225 | <h3>Komponenten</h3> |
---|
226 | <p class="abstract">Welche Komponenten des Lochstreifens sollen (nicht) dargestellt werden?</p> |
---|
227 | <div class="content"> |
---|
228 | <p>Kreuzen sie bitte alle Komponenten an, die dargestellt werden sollen.</p> |
---|
229 | |
---|
230 | <div class="box"> |
---|
231 | <input type="checkbox" name="show-imagebg" id="show-imagebg" checked="checked" /> |
---|
232 | <label for="show-imagebg"><strong>Hintergrundfarbe anzeigen</strong>. Wenn nicht angekreuzt, |
---|
233 | wird der Hintergrund (vollständig) transparent.</label> |
---|
234 | </div> |
---|
235 | |
---|
236 | <div class="box"> |
---|
237 | <input type="checkbox" name="show-tapebg" id="show-tapebg" checked="checked" /> |
---|
238 | <label for="show-tapebg"><strong>Lochstreifen anzeigen</strong>. Wenn nicht angekreuzt, |
---|
239 | wird das Lochstreifenpapier nicht gezeichnet, die Löcher "schweben" dann im Bild. |
---|
240 | </label> |
---|
241 | </div> |
---|
242 | |
---|
243 | <div class="box"> |
---|
244 | <input type="checkbox" name="show-punched" id="show-punched" checked="checked" /> |
---|
245 | <label for="show-punched"><strong>Löcher anzeigen</strong>. Wenn nicht angekreuzt, |
---|
246 | werden die gelochten Positionen (logisch 1) nicht mehr angezeigt. |
---|
247 | </label> |
---|
248 | </div> |
---|
249 | |
---|
250 | <div class="box"> |
---|
251 | <input type="checkbox" name="show-notpunched" id="show-notpunched" checked="checked" /> |
---|
252 | <label for="show-notpunched"><strong>Nicht-Löcher anzeigen</strong>. Die "Nicht-Löcher" |
---|
253 | entsprechen den Positionen, wo das Bit logisch 0 ist. Wenn angekreuzt, werden sie |
---|
254 | entsprechend angedeutet. Wenn nicht angekreuzt, wird der Lochstreifen realistischer |
---|
255 | (da man auch in Wirklichkeit die "Nicht-Löcher" nicht sieht), er ist aber ggf. schlechter |
---|
256 | zu analysieren. |
---|
257 | </label> |
---|
258 | </div> |
---|
259 | |
---|
260 | <div class="box"> |
---|
261 | <input type="checkbox" name="show-feedholes" id="show-feedholes" checked="checked" /> |
---|
262 | <label for="show-feedholes"><strong>Führungslöcher anzeigen</strong>. Ohne Führungslöcher |
---|
263 | wäre ein realistischer Lochstreifen unbrauchbar. Der virtuelle Lochstreifen hingegen |
---|
264 | wirkt so ggf. weniger verwirrend, aber deutlich unrealistischer ;-) |
---|
265 | </label> |
---|
266 | </div> |
---|
267 | </div> |
---|
268 | </fieldset> |
---|
269 | |
---|
270 | <fieldset class="initially-hidden"> |
---|
271 | <h3>Farben</h3> |
---|
272 | <p class="abstract">Welche Farben sollen welche Komponenten des Lochstreifens haben?</p> |
---|
273 | <div class="content"> |
---|
274 | <p>Für jeden Komponenten des Lochstreifens kann eine individuelle Farbe festgelegt werden. |
---|
275 | Außerdem kann die Transparenz (Durchsichtigkeit) jedes Komponenten festgelegt werden |
---|
276 | (Alpha-Kanal). Um einen Komponenten nicht anzuzeigen, braucht man ihn nicht komplett |
---|
277 | durchsichtig zu machen – man kann ihn auch einfach deaktivieren (siehe |
---|
278 | Einstellungsblock "Komponenten"). |
---|
279 | <br/>Jede Farbe muss in dem hexadezimale Format eingegeben werden, d.h. |
---|
280 | <strong>#RRGGBB</strong>. Dabei steht R für Rot, G für Grün, B für Blau. Die Werte nehmen |
---|
281 | einen Bereich zwischen 00 und FF an. Siehe dazu auch |
---|
282 | <a href="http://de.wikipedia.org/wiki/Hexadezimale_Farbdefinition">hexadezimale Farbdefinition |
---|
283 | (Wikipedia)</a>. |
---|
284 | <br/>Der Transparenzwert wird extra angegeben und nimmt auch einen Breich zwischen 00 und |
---|
285 | FF an. Dabei steht 00 für <i>gar nicht sichtbar</i> und FF für <i>vollständig sichtbar</i>. |
---|
286 | </p> |
---|
287 | |
---|
288 | <div class="box"> |
---|
289 | <strong>Hintergrundfarbe</strong>: |
---|
290 | <input type="text" name="color-imagebg" maxlength="7" length="7" value="#FFFFFF" onkeyup="color(this, 'color-imagebg')" /> |
---|
291 | <div class="color-tester" id="color-imagebg-field"> </div> |
---|
292 | <br/>Transparenz: <input type="text" name="lucency-imagebg" maxlength="2" length="2" value="FF" /> |
---|
293 | </div> |
---|
294 | |
---|
295 | <div class="box"> |
---|
296 | <strong>Lochstreifenfarbe (Papierfarbe)</strong>: |
---|
297 | <input type="text" name="color-tapebg" maxlength="7" length="7" value="#B3B3B3" onkeyup="color(this, 'color-tapebg')" /> |
---|
298 | <div class="color-tester" id="color-tapebg-field"> </div> |
---|
299 | <br/>Transparenz: <input type="text" name="lucency-tapebg" maxlength="2" length="2" value="FF" /> |
---|
300 | </div> |
---|
301 | |
---|
302 | <div class="box"> |
---|
303 | <strong>Farbe der Löcher</strong>: |
---|
304 | <input type="text" name="color-punched" maxlength="7" length="7" value="#000000" onkeyup="color(this, 'color-punched')" /> |
---|
305 | <div class="color-tester" id="color-punched-field"> </div> |
---|
306 | <br/>Transparenz: <input type="text" name="lucency-punched" maxlength="2" length="2" value="FF" /> |
---|
307 | </div> |
---|
308 | |
---|
309 | <div class="box"> |
---|
310 | <strong>Farbe der "Nicht-Löcher"</strong>: |
---|
311 | <input type="text" name="color-notpunched" maxlength="7" length="7" value="#D3D3D3" onkeyup="color(this, 'color-notpunched')" /> |
---|
312 | <div class="color-tester" id="color-notpunched-field"> </div> |
---|
313 | <br/>Transparenz: <input type="text" name="lucency-notpunched" maxlength="2" length="2" value="FF" /> |
---|
314 | </div> |
---|
315 | |
---|
316 | <div class="box"> |
---|
317 | <strong>Farbe der Führungslöcher</strong>: |
---|
318 | <input type="text" name="color-feedholes" maxlength="7" length="7" value="#0000FF" onkeyup="color(this, 'color-feedholes')" /> |
---|
319 | <div class="color-tester" id="color-feedholes-field"> </div> |
---|
320 | <br/>Transparenz: <input type="text" name="lucency-feedholes" maxlength="2" length="2" value="FF" /> |
---|
321 | </div> |
---|
322 | </div> |
---|
323 | </fieldset> |
---|
324 | |
---|
325 | <fieldset class="initially-hidden"> |
---|
326 | <h3>Nullbytes</h3> |
---|
327 | <p class="abstract">Wie viel Leerlauf soll vor und hinter den Daten auf dem Lochstreifen sein?</p> |
---|
328 | <div class="content"> |
---|
329 | <p>Ein realistischer Lochstreifen fängt nicht direkt mit den Daten an, sondern hat vor noch einige |
---|
330 | Zentimeter, in denen nur die Führungslöcher und keine Daten abgedruckt sind (Nullbytes). Dieser |
---|
331 | Bereich wird benötigt, um den Lochstreifen in das Lesegerät einzuführen. So ähnlich verhält es sich |
---|
332 | mit dem Ende des Streifens. |
---|
333 | <br/>Diese sogenannten "Nullbytes" lassen sich hier auch künstlich erzeugen, um den Lochstreifen |
---|
334 | noch realistischer wirken zu lassen. Geben sie dazu die gewünschte Anzahl von Nullbytes ein, in dem |
---|
335 | sie eine sinnvolle positive ganze Zahl eingeben.</p> |
---|
336 | |
---|
337 | <div class="box"> |
---|
338 | Anzahl <strong>Nullbytes vorne</strong>: <input type="text" name="empty-start" maxlength="4" value="0" /> Bytes. |
---|
339 | </div> |
---|
340 | |
---|
341 | <div class="box"> |
---|
342 | Anzahl <strong>Nullbytes hinten</strong>: <input type="text" name="empty-end" maxlength="4" value="0" /> Bytes. |
---|
343 | </div> |
---|
344 | </div> |
---|
345 | </fieldset> |
---|
346 | |
---|
347 | <fieldset class="initially-hidden"> |
---|
348 | <h3>Das Visualisierungprogramm</h3> |
---|
349 | <p class="abstract">Ein bisschen Werbung für die Offline-Variante</p> |
---|
350 | <div class="content"> |
---|
351 | <p>Diese Online-Lochstreifenvisualisierung obliegt gewisser Beschränkungen (maximal 1MB Datenmenge, die |
---|
352 | visualisiert wird). Mit der Offline-Variante gibt es diese Beschänkungen nicht. Und so sieht sie aus:</p> |
---|
353 | <p style="text-align:center;"><img src="design/screenshot.png" alt="Screenshot des GTK-PRogramms"></p /> |
---|
354 | <p>Es handelt sich um ein <a href="http://www.gtk.org" target="_blank">GTK-Programm</a>, welches |
---|
355 | genau das gleiche System nutzt, wie diese Onlineversion. Sie vereint alle Möglichkeiten, die das |
---|
356 | System bietet (Export von Grafiken, Zoom/Spiegelungen, Anzeige der Werte einzelner Oktetts) und |
---|
357 | ist obendrein in der Lage, selbst mehrer GB große Dateien als Lochstreifen flüssig anzuzeigen.</p> |
---|
358 | </div> |
---|
359 | </fieldset> |
---|
360 | |
---|
361 | <div id="ausklapp-info"> |
---|
362 | <p>(Sie können zu den angezeigten Kategorien Einstellungen vornehmen, in dem sie sie anklicken.)</p> |
---|
363 | </div> |
---|
364 | |
---|
365 | <fieldset class="shown"> |
---|
366 | <!--<h3>Lochstreifen erzeugen!</h3>--> |
---|
367 | <div class="content"> |
---|
368 | <div id="ajax-output"> |
---|
369 | <!-- lässt sich praktisch für eine Hinweisnachricht an den Benutzer nutzen, die nicht weiter |
---|
370 | wichtig ist, und zwar: --> |
---|
371 | <p>Hinweis: Das generierte Bild sowie die verwendeten Einstellungen und eingegebenen/hochgeladenen |
---|
372 | Daten werden (aus technischen Gründen) auf dem Server gespeichert und sind anschließend |
---|
373 | <a href="temp/" target="_blank">in einer Gallerie</a> zugänglich. Das ganze wird nach |
---|
374 | freiem Ermessen des Administrators gespeichert und kann willkürlich gelöscht werden. Es |
---|
375 | besteht kein Anspruch auf die Daten. Alternativ steht eine Offline-Variante mit (mindestens) |
---|
376 | dem selben Funktionsumfang zur Verfügung (siehe oben).</p> |
---|
377 | </div> |
---|
378 | <input id="submit-button" type="submit" value="Lochstreifen generieren..." class="submit" /> |
---|
379 | </div> |
---|
380 | </fieldset> |
---|
381 | |
---|
382 | </form> |
---|
383 | </body> |
---|
384 | </html> |
---|
385 | |
---|
386 | |
---|
387 | |
---|
388 | |
---|
389 | |
---|