<!--
/*
* Übersicht über POST-Parameter, die das Formular stellt bzw. die Seite
anschließend entgegen nimmt:
*'data-src' = file|input|font
-> file => 'data-file' (dateiupload)
-> form => 'data-form' = hex[nl]|oct[nl]|bin[nl]|dec[nl]
'data-input' = auf Länge checken und format
-> font => 'data-text' = auf gute Zeichen checken ([a-zA-Z0-9 ])
*'format' = PNG|SVG
*'dimension-src' = width|height|diameter
-> width => dimension-width
-> height => dimension-height jeweils auf int checken
-> diameter => dimension-diameter
*'alignment' => hor-[rtl|ltr]-[l|r] | ver-[btt|ttb]-[u|o]
komponenten = imagebg|tapebg|punched|notpunched|feedholes
*'show-'+[komponenten] (nur toggle an/aus)
*'color-'+[komponenten] => #RRGGBB
*'lucency-'+[komponenten] => AA
*'empty-start', 'empty-end' => int
*/
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
<title>Lochstreifenvisualisierung online - technikum29 Private Zone</title>
<link rel="stylesheet" href="http://dev.technikum29.de/src/private.design/style.css" type="text/css"/>
<link rel="stylesheet" href="design/formular.css" type="text/css"/>
<script type="text/javascript" src="design/teleport_post.js"></script>
<script type="text/javascript" src="design/formular.js"></script>
<meta name="date.initial" value="02.04.2008"/>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1><a href="../"><span>technikum29.de interne Projekte:</span></a><strong>Lochstreifenprojekt</strong></h1>
<img src="design/logo.png" style="float:left;" />
<h2>Lochstreifenvisualisierung</h2>
<p>Im Rahmen des Lochstreifenprojektes wurde ein ausgabemediumunabhängiges Visualisierungsprogramm
geschrieben. Unter anderem kann es über ein grafisches Frontend gesteuert werden oder mit einem
Kommandozeilenfrontend bedient werden. Eine weitere Möglichkeit ist dieses Webfrontend, welches sich
über das folgende Formular steuern lässt. Hier lassen sich wie auch bei den anderen Verwendungsarten
alle möglichen Einstellungen vornehmen, wie zum Beispiel Farben, Darstellung und Format.
<br/>Im Gegensatz zu dem grafischen Programm, welches man auf seinem heimischen Computer laufen hat,
ist die Online-Variante allerdings einigen Begrenzungen ausgesetzt: Aufgrund der resultierenden
Bilder mit enormen Ausmaßen (einige hunderttausend Pixel Breite) dürfen nur bis etwa 500kb Daten
auf einem "virtuellen" Lochstreifen untergebracht werden.</p>
<p>Erste Eindrücke, wie solche Lochstreifenbilder aussehen, kann man in der
<a href="temp/">Gallerie der bereits erstellten Lochstreifen</a> erlangen.</p>
<form method="POST" action="generator.php" enctype="multipart/form-data" style="clear:both">
<fieldset class="shown">
<h3>Daten</h3>
<div class="content">
<p>Welche Daten sollen auf den Lochstreifen gestanzt werden?</p>
<div class="box">
<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')" />
<label for="data-src-file">Diese <strong>Datei</strong> stanzen:</label> <input type="file" name="data-file" />
<br/><small>Hinweis: Bereits einige Kilobytes potenzieren sich im Bild zu mehreren tausend Pixeln Breite! Erlaubt sind daher
nur Dateien bis 500kb)</small>
</div>
<div class="box">
<input type="radio" name="data-src" id="data-src-input" value="input" onChange="en('data-form data-input');dis('data-file data-text')" />
<label for="data-src-input"><strong>Bytes eingeben</strong>. Wählen sie dazu ihre gewünschte Form:</label>
<select name="data-form">
<option value="hex">Hexadezimal (0f ab 4c 58...)</option>
<option value="hex0">Hexadezimal nach IBM (0x0f 0xab 0x4c 0x58...)</option>
<option value="oct">Oktal (271 077 422 712...)</option>
<option value="bin">Binär (01001010 01001101 01001000...)</option>
<option value="dec">Dezimal (0 256 15 127 33 97...)</option>
</select>
<br/>Die Bytes müssen jeweils durch Leerzeichen oder Zeilenumbrüche voneinander getrennt sein.
<br/><textarea name="data-input" rows="10" cols="80">
01 23 45 67 89 ab cd ef
</textarea>
</div>
<div class="box">
<input type="radio" name="data-src" id="data-src-font" value="font" onChange="en('data-text');dis('data-form data-input data-file')" />
<label for="data-src-font">
<img src="design/beschriftung.jpg" alt="Echter Lochstreifen mit Beschriftung" style="float:right;" />
<strong>Text generieren</strong>
<br/>Mit dem Eingeben von Buchstaben wird das entsprechende Bitmuster – wie im Bild gezeigt – generiert.
</label>:
<br/><input type="text" maxlength="500" name="data-text" />
<!--<input type="radio" name="data-src" id="data-src-external" value="external" disabled="disabled" />
Die Daten durch ein anderes externes Programm auf diesem Server direkt generieren lassen. Zur Verfügung
stehen z.B.
<ul>
<li>der <a href="label-generator.php">Schrift-Generator</a>.
</ul>
Zum Benutzen dieser Programme verlassen sie diese Seite und werden durch das entsprechende Programm
wieder darauf verwiesen.-->
<div class="clear"> </div>
</div>
</div>
</fieldset>
<fieldset class="initially-hidden">
<h3>Ausgabeformat</h3>
<p class="abstract">In welchem Dateiformat soll das Lochstreifenbild generiert werden? PNG? SVG?</p>
<div class="content">
<p>Zur Verfügung stehen zwei verschiedene Dateiformate:</p>
<div class="box">
<input type="radio" name="format" id="format-PNG" value="PNG" checked="checked" />
<label for="format-PNG"><strong>PNG-Format</strong>. Damit entstehen Bilder, die man mit
jedem Bildbearbeitungsprogramm weiterverarbeiten kann und die jeder öffnen kann, daher zieht
man in der Regel ein PNG-Bild der SVG-Grafik vor.</label>
</div>
<div class="box">
<input type="radio" name="format" id="format-SVG" value="SVG" />
<label for="format-SVG"><strong>SVG-Format</strong>. Damit entstehen Vektorgrafiken, die mit
Vektorgrafikprogrammen (z.B. <a href="http://www.inkscape.org" target="_blank">Inkscape</a>)
bearbeitet werden können. So können im Nachhinein z.B. einzelne Elemente (Löcher)
verschoben werden, oder die Bilder schematisch weiterverwendet werden, usw.</label>
</div>
</div>
</fieldset>
<fieldset class="initially-hidden">
<h3>Dimension</h3>
<p class="abstract">Wie groß soll das erzeugte Bild werden?</p>
<div class="content">
<p>Bitte wählen sie die gewünschte Bezugsgröße aus, von der sie die Größe des erzeugten Bildes
abhängig machen wollen. Geben sie dann eine sinnvolle positive ganze Zahl ein (z.B. <i>156</i> Pixel)</p>
<div class="box">
<input type="radio" name="dimension-src" id="dimension-src-width" value="width" onChange="en('dimension-width');dis('dimension-height dimension-diameter')" />
<label for="dimension-src-width"><strong>Bildbreite fest setzen</strong>, und zwar auf</label>
<input type="text" name="dimension-width" /> Pixel.
<br/>Die Bildhöhe wird dann abhängig von der Anzahl der Bytes, die gestanzt werden.
</div>
<div class="box">
<input type="radio" name="dimension-src" id="dimension-src-height" value="height" onChange="en('dimension-height');dis('dimension-width dimension-diameter')" />
<label for="dimension-src-height"><strong>Bildhöhe fest setzen</strong>, und zwar auf</label>
<input type="text" name="dimension-height" /> Pixel.
<br/>Die Bildbreite wird dann abhängig von der Anzahl der Anzahl der Bytes die gestanzt werden.
</div>
<div class="box">
<input type="radio" name="dimension-src" id="dimension-src-diameter" value="diameter" checked="checked" onChange="en('dimension-diameter');dis('dimension-width dimension-height')" />
<label for="dimension-src-diameter"><strong>Durchmesser der Löcher fest setzen</strong>, und zwar auf</label>
<input type="text" name="dimension-diameter" value="5" /> Pixel.
<br/>Die Bildbreite und Bildhöhe ist anschließend abhänigg von der Anzahl der Bytes, die gestanzt werden.
</div>
<p>Beachten sie: Je nach Ausrichtung des Lochstreifens wechseln die relevanten Faktoren für die jeweilige
Berechnung der Bildgröße. Bildbreite/Höhe beziehen sich jedoch unabhängig von der Rotation auf die
tatsächliche Breite/Höhe des resultierenden Bildes (und dürfen dementsprechend nicht mit Breite/Höhe
des abgebildeten Lochstreifens verwechselt werden). Nur die Angabe des Durchmessers ist unabhängig
von der Rotation ein Maß für die tatsächliche Größe des Lochstreifens.</p>
</div>
</fieldset>
<fieldset class="initially-hidden">
<h3>Ausrichtung</h3>
<p class="abstract">Wie soll der Lochstreifen in dem Bild angeordnet sein?</p>
<div class="content">
<p>Die Ausrichtung des Lochstreifens und gegebenenfalls Spiegelungen horizontal oder vertikal
bestimmen, wie das Bild am Ende aussieht. Insgesamt gibt es so acht Möglichkeiten, den
Streifen im Bild anzuordnen. Sie sind schematisch aufgezeigt.</p>
<table class="box">
<tr>
<td><label for="alignment-hor-rtl-o">
<input type="radio" name="alignment" value="hor-rtl-u" id="alignment-hor-rtl-o" checked="checked" />
<img src="design/hor-rtl-o.png" alt="Von rechts nach links, Führung oberhalb.." />
</label></td>
<td rowspan="2"><label for="alignment-ver-btt-l">
<input type="radio" name="alignment" value="ver-btt-l" id="alignment-ver-btt-l" />
<img src="design/ver-btt-l.png" alt="Von unten nach oben, Führung links." />
</label></td>
<td rowspan="2"><label for="alignment-ver-btt-r">
<input type="radio" name="alignment" value="ver-btt-r" id="alignment-ver-btt-r" />
<img src="design/ver-btt-r.png" alt="Von unten nach oben, Führung rechts." />
</label></td>
</tr>
<tr>
<td><label for="alignment-hor-rtl-u">
<input type="radio" name="alignment" value="hor-rtl-u" id="alignment-hor-rtl-u" />
<img src="design/hor-rtl-u.png" alt="Von rechts nach links, Führung unterhalb." />
</label></td>
</tr>
<tr>
<td><label for="alignment-hor-ltr-o">
<input type="radio" name="alignment" value="hor-ltr-o" id="alignment-hor-ltr-o" />
<img src="design/hor-ltr-o.png" alt="Von links nach rechts, Führung oberhalb." />
</label></td>
<td rowspan="2"><label for="alignment-ver-ttb-l">
<input type="radio" name="alignment" value="ver-ttb-l" id="alignment-ver-ttb-l" />
<img src="design/ver-ttb-l.png" alt="Von oben nach unten, Führung links." />
</label></td>
<td rowspan="2"><label for="alignment-ver-ttb-r">
<input type="radio" name="alignment" value="ver-ttb-r" id="alignment-ver-ttb-r" />
<img src="design/ver-ttb-r.png" alt="Von oben nach unten, Führung rechts." />
</label></td>
</tr>
<tr>
<td><label for="alignment-hor-ltr-u">
<input type="radio" name="alignment" value="hor-ltr-u" id="alignment-hor-ltr-u" />
<img src="design/hor-ltr-u.png" alt="Von links nach rechts, Führung unterhalb." />
</label></td>
</tr>
</table>
</div>
</fieldset>
<fieldset class="initially-hidden">
<h3>Komponenten</h3>
<p class="abstract">Welche Komponenten des Lochstreifens sollen (nicht) dargestellt werden?</p>
<div class="content">
<p>Kreuzen sie bitte alle Komponenten an, die dargestellt werden sollen.</p>
<div class="box">
<input type="checkbox" name="show-imagebg" id="show-imagebg" checked="checked" />
<label for="show-imagebg"><strong>Hintergrundfarbe anzeigen</strong>. Wenn nicht angekreuzt,
wird der Hintergrund (vollständig) transparent.</label>
</div>
<div class="box">
<input type="checkbox" name="show-tapebg" id="show-tapebg" checked="checked" />
<label for="show-tapebg"><strong>Lochstreifen anzeigen</strong>. Wenn nicht angekreuzt,
wird das Lochstreifenpapier nicht gezeichnet, die Löcher "schweben" dann im Bild.
</label>
</div>
<div class="box">
<input type="checkbox" name="show-punched" id="show-punched" checked="checked" />
<label for="show-punched"><strong>Löcher anzeigen</strong>. Wenn nicht angekreuzt,
werden die gelochten Positionen (logisch 1) nicht mehr angezeigt.
</label>
</div>
<div class="box">
<input type="checkbox" name="show-notpunched" id="show-notpunched" checked="checked" />
<label for="show-notpunched"><strong>Nicht-Löcher anzeigen</strong>. Die "Nicht-Löcher"
entsprechen den Positionen, wo das Bit logisch 0 ist. Wenn angekreuzt, werden sie
entsprechend angedeutet. Wenn nicht angekreuzt, wird der Lochstreifen realistischer
(da man auch in Wirklichkeit die "Nicht-Löcher" nicht sieht), er ist aber ggf. schlechter
zu analysieren.
</label>
</div>
<div class="box">
<input type="checkbox" name="show-feedholes" id="show-feedholes" checked="checked" />
<label for="show-feedholes"><strong>Führungslöcher anzeigen</strong>. Ohne Führungslöcher
wäre ein realistischer Lochstreifen unbrauchbar. Der virtuelle Lochstreifen hingegen
wirkt so ggf. weniger verwirrend, aber deutlich unrealistischer ;-)
</label>
</div>
</div>
</fieldset>
<fieldset class="initially-hidden">
<h3>Farben</h3>
<p class="abstract">Welche Farben sollen welche Komponenten des Lochstreifens haben?</p>
<div class="content">
<p>Für jeden Komponenten des Lochstreifens kann eine individuelle Farbe festgelegt werden.
Außerdem kann die Transparenz (Durchsichtigkeit) jedes Komponenten festgelegt werden
(Alpha-Kanal). Um einen Komponenten nicht anzuzeigen, braucht man ihn nicht komplett
durchsichtig zu machen – man kann ihn auch einfach deaktivieren (siehe
Einstellungsblock "Komponenten").
<br/>Jede Farbe muss in dem hexadezimale Format eingegeben werden, d.h.
<strong>#RRGGBB</strong>. Dabei steht R für Rot, G für Grün, B für Blau. Die Werte nehmen
einen Bereich zwischen 00 und FF an. Siehe dazu auch
<a href="http://de.wikipedia.org/wiki/Hexadezimale_Farbdefinition">hexadezimale Farbdefinition
(Wikipedia)</a>.
<br/>Der Transparenzwert wird extra angegeben und nimmt auch einen Breich zwischen 00 und
FF an. Dabei steht 00 für <i>gar nicht sichtbar</i> und FF für <i>vollständig sichtbar</i>.
</p>
<div class="box">
<strong>Hintergrundfarbe</strong>:
<input type="text" name="color-imagebg" maxlength="7" length="7" value="#FFFFFF" onkeyup="color(this, 'color-imagebg')" />
<div class="color-tester" id="color-imagebg-field"> </div>
<br/>Transparenz: <input type="text" name="lucency-imagebg" maxlength="2" length="2" value="FF" />
</div>
<div class="box">
<strong>Lochstreifenfarbe (Papierfarbe)</strong>:
<input type="text" name="color-tapebg" maxlength="7" length="7" value="#B3B3B3" onkeyup="color(this, 'color-tapebg')" />
<div class="color-tester" id="color-tapebg-field"> </div>
<br/>Transparenz: <input type="text" name="lucency-tapebg" maxlength="2" length="2" value="FF" />
</div>
<div class="box">
<strong>Farbe der Löcher</strong>:
<input type="text" name="color-punched" maxlength="7" length="7" value="#000000" onkeyup="color(this, 'color-punched')" />
<div class="color-tester" id="color-punched-field"> </div>
<br/>Transparenz: <input type="text" name="lucency-punched" maxlength="2" length="2" value="FF" />
</div>
<div class="box">
<strong>Farbe der "Nicht-Löcher"</strong>:
<input type="text" name="color-notpunched" maxlength="7" length="7" value="#D3D3D3" onkeyup="color(this, 'color-notpunched')" />
<div class="color-tester" id="color-notpunched-field"> </div>
<br/>Transparenz: <input type="text" name="lucency-notpunched" maxlength="2" length="2" value="FF" />
</div>
<div class="box">
<strong>Farbe der Führungslöcher</strong>:
<input type="text" name="color-feedholes" maxlength="7" length="7" value="#0000FF" onkeyup="color(this, 'color-feedholes')" />
<div class="color-tester" id="color-feedholes-field"> </div>
<br/>Transparenz: <input type="text" name="lucency-feedholes" maxlength="2" length="2" value="FF" />
</div>
</div>
</fieldset>
<fieldset class="initially-hidden">
<h3>Nullbytes</h3>
<p class="abstract">Wie viel Leerlauf soll vor und hinter den Daten auf dem Lochstreifen sein?</p>
<div class="content">
<p>Ein realistischer Lochstreifen fängt nicht direkt mit den Daten an, sondern hat vor noch einige
Zentimeter, in denen nur die Führungslöcher und keine Daten abgedruckt sind (Nullbytes). Dieser
Bereich wird benötigt, um den Lochstreifen in das Lesegerät einzuführen. So ähnlich verhält es sich
mit dem Ende des Streifens.
<br/>Diese sogenannten "Nullbytes" lassen sich hier auch künstlich erzeugen, um den Lochstreifen
noch realistischer wirken zu lassen. Geben sie dazu die gewünschte Anzahl von Nullbytes ein, in dem
sie eine sinnvolle positive ganze Zahl eingeben.</p>
<div class="box">
Anzahl <strong>Nullbytes vorne</strong>: <input type="text" name="empty-start" maxlength="4" value="0" /> Bytes.
</div>
<div class="box">
Anzahl <strong>Nullbytes hinten</strong>: <input type="text" name="empty-end" maxlength="4" value="0" /> Bytes.
</div>
</div>
</fieldset>
<fieldset class="initially-hidden">
<h3>Das Visualisierungprogramm</h3>
<p class="abstract">Ein bisschen Werbung für die Offline-Variante</p>
<div class="content">
<p>Diese Online-Lochstreifenvisualisierung obliegt gewisser Beschränkungen (maximal 1MB Datenmenge, die
visualisiert wird). Mit der Offline-Variante gibt es diese Beschänkungen nicht. Und so sieht sie aus:</p>
<p style="text-align:center;"><img src="design/screenshot.png" alt="Screenshot des GTK-PRogramms"></p />
<p>Es handelt sich um ein <a href="http://www.gtk.org" target="_blank">GTK-Programm</a>, welches
genau das gleiche System nutzt, wie diese Onlineversion. Sie vereint alle Möglichkeiten, die das
System bietet (Export von Grafiken, Zoom/Spiegelungen, Anzeige der Werte einzelner Oktetts) und
ist obendrein in der Lage, selbst mehrer GB große Dateien als Lochstreifen flüssig anzuzeigen.</p>
</div>
</fieldset>
<div id="ausklapp-info">
<p>(Sie können zu den angezeigten Kategorien Einstellungen vornehmen, in dem sie sie anklicken.)</p>
</div>
<fieldset class="shown">
<!--<h3>Lochstreifen erzeugen!</h3>-->
<div class="content">
<div id="ajax-output">
<!-- lässt sich praktisch für eine Hinweisnachricht an den Benutzer nutzen, die nicht weiter
wichtig ist, und zwar: -->
<p>Hinweis: Das generierte Bild sowie die verwendeten Einstellungen und eingegebenen/hochgeladenen
Daten werden (aus technischen Gründen) auf dem Server gespeichert und sind anschließend
<a href="temp/" target="_blank">in einer Gallerie</a> zugänglich. Das ganze wird nach
freiem Ermessen des Administrators gespeichert und kann willkürlich gelöscht werden. Es
besteht kein Anspruch auf die Daten. Alternativ steht eine Offline-Variante mit (mindestens)
dem selben Funktionsumfang zur Verfügung (siehe oben).</p>
</div>
<input id="submit-button" type="submit" value="Lochstreifen generieren..." class="submit" />
</div>
</fieldset>
</form>
</body>
</html>
