Zurück

Neue Orgel selbst konstruieren

Beispiel einer einfachen Orgel mit 5 Registern: orgel5register.html

Das hier vorgestellte Beispiel gibt es am Ende der Seite als Download!

1) Vorbereitung

Mache Fotos von der Orgel. Die Registernamen müssen lesbar sein. Auf Koppeln (Fuss-Schalter) nicht vergessen. Für spätere Auswahl der Literatur könnte auch der Tastenumfang und Pedalumfang hilfreich sein.

2a) Erstellen der Orgel mit Orgeleditor

FÜR NICHT-PROGRAMMIERER:

Mit dem Orgeleditor kann eine komplette Orgel erstellt und lokal gespeichert werden.

FÜR PROGRAMMIERER

Als Programmierer*in kann man den Orgeleditor zum Erstellen der SVG-Grafik nutzen und die restlichen Dateien selbst erstellen, Pfade anpassen und alles in Ordnern organisieren (Ordnerstruktur siehe Ende diese Seite).

TIPP:
Der Code des SVG kann mit einem Button in das darunter liegende Textfeld geschrieben werden, dort verändert (z.B. auch Größe des SVG) und dann wieder als Grafik eingesetzt werden.

2b) Selbst erstellen

Grundsatz: Jede Orgel in einem eigenen Ordner

Wenn das SVG selbst erstellt wird, können auch andere Registerformen gezeichnet werden, speziell mit <path>.

SVG-Grafik der Orgel

Der Source-Code (SVG) der Beispielorgel:

<svg id="orgelGrafik" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" height="100vH" viewBox="0 0 1200 600">

<defs>
	<pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500">
		<image href="../_data/holz01.jpg" x="0" y="0" width="500" height="500" preserveAspectRatio="xMidYMid slice" />
	</pattern>
</defs>

	<style>
	svg {
//		background-color: #FEFFFA !important;
		max-width: 100%;
		display: block;
		margin:0 auto;
		box-sizing: border-box;
	}
	</style>

<rect id="hg" x="0" y="0" rx="30" ry="30" width="1200" height="600" fill="url(#img1)" />

//Texte
<text id="info"  class="info" x="600" y="25"></text>
<text id="orgelBez" class="organLabel" x="600" y="70" style="font-size:1.5em;">Orgel Prototyp</text>
<text id="man" class="organLabel" x="150" y="150">Manual</text>
<text id="ped" class="organLabel" x="850" y="150">Pedal</text>


//Register Manual
<circle class="regform" id="1" cx="150" cy="250" r="45"><title>1</title></circle> //Prinzipal 8'
<circle class="regform" id="2" cx="150" cy="350" r="45"><title>2</title></circle> // Flöte 8'
<circle class="regform" id="3" cx="150" cy="450" r="45"><title>3</title></circle> // Oktave 4'

//Register Pedal
<circle class="regform" id="4" cx="850" cy="300" r="45"><title>4</title></circle> //Subbass 16'
<circle class="regform" id="5" cx="850" cy="400" r="45"><title>5</title></circle> //Gedacktbass 8'



//Registernamen Manual
<text class="regname" id="t1" x="150" y="250"><tspan>Prinzipal</tspan><tspan x="150" dy="1em">8'</tspan></text>
<text class="regname" id="t2" x="150" y="350"><tspan>Flöte</tspan><tspan x="150" dy="1em">8'</tspan></text>
<text class="regname" id="t3" x="150" y="450"><tspan>Oktave</tspan><tspan x="150" dy="1em">4'</tspan></text>

//Registernamen Pedal
<text class="regname" id="t4" x="850" y="300"><tspan>Subbass</tspan><tspan x="850" dy="1em">16'</tspan></text>
<text class="regname" id="t5" x="850" y="400"><tspan>Gedacktbass</tspan><tspan x="850" dy="1em">8'</tspan></text>

</svg>

WICHTIG SIND:

ANMERKUNGEN:

HTML-Datei

Prototyp: new_organ.html

Für eigene Orgeln kann diese Datei als Grundlage dienen.

SVG

Ein SVG ist in der HTML-Datei bereits als Inline-SVG eingebaut.

Das neue SVG (ev. erstellt mit Orgeleditor) muss anstelle des vorhandenen eingebaut werden, bzw. das alte entsprechend verändert werden.

CSS

Alle CSS-Angaben sind in der HTML-Datei enthalten.

Vorbereiten der Symbole für den Ausdruck in eine Textdatei

  • Der Menüeintrag Options (Export reg) - COPY symbols muss zuerst erstellt werden:
    <option value="copySymbolsToClipboard2" title="COPY registration symbols to clipboard">COPY symbols</option>
    (einfügen an der richtigen Stelle bei <optgroup label="Export reg">)
  • Ein script - Bereich mit der Variablen printPos muss vor <script src="../orgel.js"></script> eingefügt werden:
    Das folgende Script gilt für die Beispielorgel mit 5 Registern. Zahlen im Array sind Registernummern, sie werden später beim Kopieren durch die Formen ⚪, bzw. ☐ ersetzt.
    Strings dienen zur Plazierung im Text. Es ist nicht immer einfach (manchmal fast unmöglich), den Text so zu konstruieren, dass die Reihenfolge der Register der realen Orgel entspricht. Am besten geht es bei Orgeln, deren Register in Reihen angeordnet sind. Verwende in den Strings Leerzeichen, Tabulatoren (\t) und Zeilenumbrüche (\n). Dazu die Online-Orgeln studieren!
    <script>
    printPos=[1,
    "\n\t",4,
    "\n",2,
    "\n\t",5,
    "\n",3];
    </script>

    • orgel.js

    Damit die Orgel funktioniert, muss die HTML-Datei auf orgel.js zugreifen können.

    orgel.js wird im übergeordneten Ordner erwartet. Siehe Orgelstruktur am Ende dieser Seite.

    standard.js

    Am Ende muss noch eine Standard-Registrierung (standard.js) mit der Javascript-Variablen 'standard' erstellt werden, damit die Orgel beim Start schon über einige Registrierungen verfügt.

    standard.js wird im Ordner erwartet, indem sich auch die HTML-Seite befindet. Siehe Orgelstruktur am Ende dieser Seite.

    Musterbeispiel

    var standard='<option value="">••• Standard Registrations •••</option>\
<option value="1,">Test 1</option>\
<option value="1,2,">Test 2</option>\
<option value="1,2,3,">Test 3</option>\
';

    Angepasste Werte als 'standard.js' speichern.

    Download

    Alle notwendigen Dateien: Orgelregister.zip

    Die Ordnerstruktur (weitere Orgel in einem neuen Ordner parallel zu 'orgel01' einbauen):

    Orgelregister/
│  index.html
│  orgel.js
├─ _data/
│     holz01.jpg
│     holz01a.jpg
│     holz01b.jpg
│     holz02.jpg
│     holz02a.jpg
│     holz02b.jpg
├─ Orgeleditor/
│     index.html
│     new_organ.html
│     orgeleditor.html
│     standard.js
└─ orgel01/
      orgel5register.html
      Registrationen01.txt
      standard.js