Project-VolVisWeb

HTML5-Code

Der erste abgearbeitete Teil des Programms ist in der Auszeichnungssprache HTML(Hypertext Markup Language). Die Version HTML5 ermöglicht die Nutzung des, für WebGL benötigten, Canvas-Elements.

Das HTML-Fenster öffnet durch die Zeile body onload=“webGLStart();” die, in Javascript geschriebene, webGLStart-Funktion. 
<body onload="webGLStart();">

Danach wird die Überschrift und das Logo der Ohm-Hochschule eingefügt.
   <br/>
   <span style="font-family:Verdana,sans-serif">
      <font size="4">

         <table border="0" width="100%">
          ... Anzeige der Ueberschrift und des Logos
         </table>

      </font>
   </span>

Der Name des verwendeten Canvas-Elements wird als “webgl-canvas” spezifiziert. 
 
   <p/>
   <canvas id="webgl-canvas"> </canvas>
   <p/>

Der untere Teil des Fensters kann nun beschrieben werden. Hierfür wird eine Tabellenstruktur mit 4 Spalten verwendet.

Zuerst werden jeweils 2 Spalten mit colspan=“2” zusammengefasst und mit den Ãœberschriften versehen. 

   <span style="font-family:Verdana,sans-serif">
      <font size="4">

         <table border="0" width="100%">
            <tr>
               <th colspan="2"><b><u>Options</u></b></th>
               <th colspan="2"><b><u>Controls</u></b></th>
            </tr>

In der nächsten Zeile wird zuerst eine Beschreibung und daneben der jeweilige Eingabeparameter dargestellt. Daneben befindet sich eine kurze Erklärung für die Bedienung des Renderers. 
            <tr>
               <td>Link to Datafolder: </td>
               <td><input type="text" id="link" value="" /></td>
               <td>left/right arrow: </td>
               <td>change rotation speed</td>
            </tr>
            ...
         </table>
      </font>
   </span>

</body>

Die folgenden Programmteile der HTML-Datei sind in der Skriptsprache Javascript geschrieben.

← Firefox-Settings | ● | webGLStart-Funktion →

Options: