source: projects/paper-tape-project/trunk/web-frontend/index.html @ 73

Last change on this file since 73 was 73, checked in by sven, 6 years ago

PaperTape Restauration: Fixed various bugs to bring back Web and visualisation CLI application:

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