root/paper-tape-project/trunk/web-frontend/index.html

Revision 1, 20.0 kB (checked in by sven, 4 years ago)

Erstimport
Line 
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
49geschrieben. Unter anderem kann es über ein grafisches Frontend gesteuert werden oder mit einem
50Kommandozeilenfrontend 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
52alle 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,
54ist die Online-Variante allerdings einigen Begrenzungen ausgesetzt: Aufgrund der resultierenden
55Bilder mit enormen Ausmaßen (einige hunderttausend Pixel Breite) dürfen nur bis etwa 500kb Daten
56auf 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 &ndash; wie im Bild gezeigt &ndash; 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">&nbsp;</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 &ndash; 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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
Note: See TracBrowser for help on using the browser.
© 2008 - 2010 Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License