Paneldesign - Einsteiger - Knobman - mein erster Drehknopf

[wehkah]

REAKTOR TUTORIAL
Knobman - mein erster Drehknopf

Hej Folks,

an dieser Stelle möchte ich der Aufforderung von Herw nachkommen und ein kleines Tutorial zur Benutzung des GUI Design Tools, Knobman bereitstellen.

die aktuelle Knobman Version findet Ihr hier:
http://www.g200kg.com/en/software/knobman.html

1. kurzes Vorwort:

Ich persönlich bin der Meinung, dass eine grafische Oberfläche bei Plugins nur zweitrangig ist, denn eigentlich kommt es ja auf den Sound an. Nur was wäre ein Plugin ohne eine gewisse Eigenständigkeit? Es hat sich bestimmt schon jeder einmal dabei erwischt, ein Produkt gewählt zu haben was schön aussieht jedoch weniger Funktionen hat als das etwas einfach gestaltete. Das ist die negative Seite des Eyecatcher Effekts, denn oft täuscht das Aussehen über Mängel hinweg. Es gibt jedoch auch die andere Seite. Grafische Oberflächen, soweit aufgeräumt und logisch strukturiert, können den Benutzer auch beflügeln oder sogar eine Software einfacher zugänglich machen, da die wichtigsten Elemente sofort in Auge fallen. Des weiteren erzeugt ein Aussehen auch eine Grundstimmung bzw. kann inspirierend wirken. Ich möchte hier den ersten Schritt machen und erklären wie ein einfacher Drehknopf erstellt werden kann um die eigenen Ensembles aufzupeppen.

2. öffnen von Knobman:

Nach dem Start seht Ihr ein in 3 Spalten geteiltes Fenster. Ich werde nicht auf alles im einzelnen eingehen, um die einzelnen Funktionen genau zu erklären, empfehle ich das Hilfedokument zu studieren. Da das Programm leicht zu bedienen ist, sollten sich die meisten Funktionen jedoch von selbst erklären.

Links: Hier werden die einzelnen Ebenen (Layer) angezeigt. Per Drag'n'Drop könnt Ihr die Reihenfolge verändern. Außerdem wird hier die Größe des Knopfes festgelegt, klick hierzu auf Preferences.

Mitte: Hier werden der Typ und die Anzeige-/Animationseigenschaften des angezeigten Elements, also der Layerinhalte festgelegt. Tipp: Layout-Zoom stellt die Größe des Elements ein!

Rechts: Hier findet Ihr eine Vorschau Eures Drehknopfes/Faders. Test zeigt wie sich der Knopf beim drehen verhält.

Bild 1.jpg

3. Vorbereitung:

Ich möchte Euch zeigen wie Ihr einen einfachen Drehknopf mit LED Kranz Optik erstellt. Ich werde jedoch vorerst auf Feinheiten, wie Schatten oder 3D Effekt verzichten.

Der Knopf soll der Einfachheit halber aus 4 Ebenen bestehen. Der Untergrund, der LED Kranz, der Knopf und der Anzeigestrich.

Zuerst wird unter Preferences die Größe von 70x70 Pixel gewählt. Dann erstellt Ihr 4 Layer und wählt die Elementtypen aus.

Layer 1 – Circlefill (hier kann auch Circle gewählt werden, da der knopf die meiste Fläche verdeckt)
Layer 2 – RadiateLine
Layer 3 – CircleFill
Layer 4 – Line

Da der Knopf zum Abschluß als TGA mit Alpha(Transparenz) exportiert wird, ist der Hintergrund in Reaktor frei wählbar und muss nich in Knobman festgelegt werden.

Benennt nun der Übersicht halber die Ebenen entsprechend um. Ich hab mir das angewöhnt um Verwirrungen bei größeren Projekten zu vermeiden.

4 . Einstellen von Größe und Farbe:

Layer 1 – Farbe schwarz, Zoom 100%
Layer 2 – Farbe rot, Zoom 95%, AngleStep 15
Layer 3 – Farbe dunkelgrau, Zoom 70%
Layer 4 – Farbe hellgrau, Width 15, Length 35, Offset -20%

Nun sollte das Ganze so ähnlich aussehen:

Bild 2.jpg

5. Animation:

Was soll beim drehen passieren? Die LEDs sollen abhängig von der Position eingeblendet werden und der Strich soll sich mit der Drehung bewegen.

Dazu stellt Ihr folgende Werte ein:

Layer 2:
- AnimMask ein
- Type: Rotate, 0, SingleDir
- Start from -140
- Stop from -140 to 140

Layer 4:
- Layout – Angle(deg) from to -135

Nun könnt Ihr den Knopf testen, klickt dazu einfach im Vorschaufenster auf den Button Test. Jetzt werden die einzelnen Bilder berechnet und Ihr könnt mit dem Schieberegler die Knopfbewegung testen.

6. Export:

Um die TGA Datei zu exportieren, wählt Ihr im File Menü den Punkt ExportImage aus. Vergebt dort den Dateinamen (ich habe 1stknob gewählt) und das Format TGA. PNG wird leider nicht von Reaktor unterstützt. Reaktor erlaubt ausschließlich die Verwendung von TGA und BMP Dateien.

7. Drehknopf in Reaktor konfigurieren:

Öffnet dazu Reaktor und erzeugt ein leeres Instrument. Nun erzeugt Ihr noch einen Knopf, diesen findet Ihr unter Built-In Module → Panel → Knob. Als nächstes öffnet Ihr die View Properties. Im unteren Abschnitt „Style“, Skin Bitmap(Picture) via „open from file...“ die vorher exportierte TGA Datei geladen.

Jetzt hat sich das Fenster „Picture Properties“ geöffnet und Ihr seht den Bilderstreifen(Strip) der Animation. Setzt jetzt noch den Haken bei „Has Alpha Channel“. Um eine Einzelbildanzeige zu bekommen, stellt Ihr bei „Animation Height“ 70 px ein. Resizeability sollte ausgeschaltet sein. OK!

Nun ist der Knopf schon fast fertig, es muss nur noch der Regelbereich festgelegt werden. Dazu klickt Ihr in den Knob Properties auf „Function“.

Wählt für „Range“ folgende Werte:

Max 128
Min 1
Default 1
Stepsize 1

So sieht das Ergebnis jetzt aus:

Bild 3.jpg

Für eine größere Genauigkeit mit der der Knopf durch eine Mausbewegung den Wert ändert, empfehle bei „Mouse Resolution“ ich höhere Werte als 127 zu testen. Ich habe hier 512 eingestellt.

8. Fazit:

Jetzt ist der erste Knopf fertig und kann nach Lust und Laune verändert werden. Die Erstellung eines Faders ist ähnlich, also relativ einfach. Durch die Kombination verschiedener Elemente, Texturen und Schattierungen können fast alle Wünsche umgesetzt werden. Es ist in Knobman auch möglich mit in gängigen Bildverarbeitungsprogrammen erstellte Grafiken zu verwenden.

Ich würde mir nur noch eine PNG Implementierung in Reaktor wünschen, da aufwendige bzw. größere Elemente die Dateigröße schnell anwachsen lassen. Wenn in Reaktor ein Knopf mit Design dupliziert wird, wird auch die Ensemble Datei fast doppelt so groß. Eventuell gibt es hier ja Optimierungsmöglichkeiten.

Ich hoffe mit dem Tutorial den Einstieg für den ein oder anderen etwas einfacher gemacht zu haben. Jedenfalls wünsche ich viel Spass beim basteln.

Downloads

Das Tutorial als PDF mit allen Dateien findet Ihr in der Userlibrary:
https://co.native-instruments.com/index ... tchid=9753

First Knobs v1.0
https://co.native-instruments.com/index ... tchid=7485

the big knob v1.1
https://co.native-instruments.com/index ... tchid=9751

[herw]

Hi, das nenne ich mal ein klares Tutorial - sehr anschaulich.

Zum Schluss habe ich eine kleine Frage: du sagst, dass beim Duplizieren eines Knopfs das Ensemble doppelt so groß wird. Benutzen nicht alle duplizierten Drehknöpfe dieselbe Bilddatei?

ciao herw

PS: einen Fader fände ich jetzt aber auch noch interessant

[wehkah]

Hi, das nenne ich mal ein klares Tutorial - sehr anschaulich.

Zum Schluss habe ich eine kleine Frage: du sagst, dass beim Duplizieren eines Knopfs das Ensemble doppelt so groß wird. Benutzen nicht alle duplizierten Drehknöpfe dieselbe Bilddatei?

ciao herw

PS: einen Fader fände ich jetzt aber auch noch interessant

Wieso das so ist, weis ich nicht. Vielelicht gibt es ja eine Möglichkeit das zu unterbinden. Ich habe nur testweise den Knob dupliziert und nach dem speichern war das Ensemble doppelt so groß. Eventuell kannst Du das ja in Erfahrung bringen. Ich hätte auch gedacht, das die Grafiken nur verlinkt werden.

Das mit dem Fader kann ich gern noch machen. Da gibt es ja noch einiges zum Thema Paneldesign. Wie man Speicher sparen kann würde mich jetzt aber doch schon interessieren.

Gruß&Sonne
Tino

PS: vielen Dank des Lobes

[herw]

Hi, das nenne ich mal ein klares Tutorial - sehr anschaulich.

Zum Schluss habe ich eine kleine Frage: du sagst, dass beim Duplizieren eines Knopfs das Ensemble doppelt so groß wird. Benutzen nicht alle duplizierten Drehknöpfe dieselbe Bilddatei?

Wieso das so ist, weis ich nicht. Vielleicht gibt es ja eine Möglichkeit das zu unterbinden. Ich habe nur testweise den Knob dupliziert und nach dem speichern war das Ensemble doppelt so groß. Eventuell kannst Du das ja in Erfahrung bringen. Ich hätte auch gedacht, das die Grafiken nur verlinkt werden.
[...]

Die Verdoppelung des Speichers kann ich nicht bestätigen:

• leeres Ensemble 8kB
• Ensemble mit einem annimierten Regler aus dem modular m1 : 856kb
• Ensemble mit einem zusätzlich duplizierten Regler: 881kb

Viel Speicherplatz kannst du sparen bei großen Bildern (Ensemble- und Makro-Hintergrund), wenn du die resizability in den Properties einstellst, aber das passt jetzt hier nicht unbedingt zu deinem Thema.

[wehkah]

Sehr interessant! Ich werd das nochmal testen. Eventuell kannst Du das mal mit der ENS Datei aus dem Tutorial ausprobieren. Würde mich sehr freuen, eventuell ist das reproduzierbar. Kennst Du eigentlich eine Möglichkeit aus bereits fertigen Ensembles die Grafiken zu extrahieren?

Gruß
Tino

[wehkah]

Soooo, ich habe das jetzt nochmal probiert und es funktioniert. Da freu ich mich. Ich konnte es auch reproduzieren.

1. new Ensemble
2. Knob erstellt
3. Grafik geladen und konfiguriert
4. gespeichert mit neuem Namen - 601kb
5. Knob mehrfach dupliziert & gespeichert - 1,2mb
6. anderes Ensemble geladen und Knob Datei erneut geladen / Reaktor neustarten geht auch
7. alle Knobs gelöscht und neu erstellt
8. gespeichert - 611kb
9. gewundert

Mich dolcht es könnte ein Bug sein, was meinst Du? Ich werde das mal beobachten und diese Frage nochmal im NI Forum stellen.

Cheers
Tino

[herw]

Soooo, ich habe das jetzt nochmal probiert und es funktioniert. Da freu ich mich. Ich konnte es auch reproduzieren.

1. new Ensemble
2. Knob erstellt
3. Grafik geladen und konfiguriert
4. gespeichert mit neuem Namen - 601kb
5. Knob mehrfach dupliziert & gespeichert - 1,2mb
6. anderes Ensemble geladen und Knob Datei erneut geladen / Reaktor neustarten geht auch
7. alle Knobs gelöscht und neu erstellt
8. gespeichert - 611kb
9. gewundert

Mich dolcht es könnte ein Bug sein, was meinst Du? Ich werde das mal beobachten und diese Frage nochmal im NI Forum stellen.

Cheers
Tino

ich denke nicht, dass das ein Bug ist. Während einer Sitzung scheint REAKTOR zunächst mal alle Grafiken im RAM abzulegen. Ein Neustart bringt offenbar Ordnung in das ganze, so dass es auch nicht zu einer Mehrfachreservierung derselben Grafik kommt.

[herw]

[...]Kennst Du eigentlich eine Möglichkeit aus bereits fertigen Ensembles die Grafiken zu extrahieren?

Gruß
Tino

leider nicht, man muss die Grafiken selbst erstellen.
Viele Ideen findest aber hier
http://www.kvraudio.com/forum/viewtopic ... sc&start=0
ein sehr alter und langer thread; vielleicht fängst du von hinten an zu lesen. Dort gibt es sehr viele ausgefallene Tricks.
oder hier:
http://www.kvraudio.com/forum/viewtopic.php?t=232629

[wehkah]

]leider nicht, man muss die Grafiken selbst erstellen.
Viele Ideen findest aber hier
http://www.kvraudio.com/forum/viewtopic ... sc&start=0
ein sehr alter und langer thread; vielleicht fängst du von hinten an zu lesen. Dort gibt es sehr viele ausgefallene Tricks.
oder hier:
http://www.kvraudio.com/forum/viewtopic.php?t=232629

Danke dafür! Ich denke nur, dass es für den ein oder anderen hilfreich wäre, die Grafiken separat archivieren zu können.

[herw]

Danke dafür! Ich denke nur, dass es für den ein oder anderen hilfreich wäre, die Grafiken separat archivieren zu können.

ja das gibt schnell Chaos, wenn man es übertreibt. Mittlerweile gefallen mir die Standard NI-Panelelemente ganz gut. Ich habe für mich noch einige Ergänzungen gemacht (Button, Mehrfachbutton für switches, Panelbuchsen ). Knobman ist dabei ein guter Helfer.

[wehkah]

Als nächstes würde ich gern mal Bipolare Knöpfe austesten. So ähnlich wie beim Massive, ich brauch da aber erstmal etwas Erfahrung mit Multipictures. Ich finde die Idee super, die Regelbereiche eingeben zu können. Das mit den Farbringen ist auch etwas tricky. Eventuell kann mir ja jemand einen guten Tipp geben.

Gruß & Sonne
Tino

[wehkah]

Hej Folks,

ich bin grad dabei mal etwas mit Blender zu arbeiten. Ich habe hier ein Testrendering meines ersten Versuchs hochgeladen. Ich muss noch etwas mit den Materialien spielen und andere Modelle basteln, wird sicher noch .

http://www.youtube.com/watch?v=Nch-2MqZ254

Gruß&Sonne
T

[herw]

Hej Folks,

ich bin grad dabei mal etwas mit Blender zu arbeiten. Ich habe hier ein Testrendering meines ersten Versuchs hochgeladen. Ich muss noch etwas mit den Materialien spielen und andere Modelle basteln, wird sicher noch .

http://www.youtube.com/watch?v=Nch-2MqZ254

Gruß&Sonne
T

sieht toll aus; hab leider keine Zeit für so was: Die Gestaltung des GUI habe ich auf das Notwendigste reduziert, da ich lieber die Energie in die Ensemblestruktur stecke.
Trotzdem, absolut gut. Die Frage ist allerdings, wie benutzt man so etwas in einem Ensemble? Mehrere solcher Knöpfe über oder nebeneinander sehen dann wegen der ungewöhnlichen starren Perspektive fremd aus. Eine wechselnde Perspektive für jeden Knopf ist dann schon arg übertrieben. Das soll aber in keinster Weise deine Arbeit schmälern. Ich habe mal vor ein paar Jahren Blender ausprobiert; ich fand es ganz schön komplex (besser lernintensiv).

ciao herw

[wehkah]

@Herw:

Der Knopf war auch eher eine Machbarkeitsstudie. Ich finde VSTs die zu sehr Perspektive haben meist unhandlich, generell lassen sich mit Blender sehr schön Materialien nachbasteln und die Sache auch gleich als PNG mit Alpha Rendern. Ist jedoch wie Du schon sagtest sehr lernintensiv. Vieleicht mach ich dazu mal noch ein Tut.

Gruß
T

[herw]

kleine Neuigkeit für Mac-User:
es gibt eine Java-Version für Mac.
Auf der Herstellerseite g200kg gibt es den Downoad JKnobman in der Version 1.3.2.
Es wird ein Ordner heruntergeladen. Die Application wird beim Doppelklick als beschädigt angegeben mit Löschempfehlung. Ich habe daraufhin mit Rechtsklick (ctrl linksclick) den Paketinhalt der JKnobMan.app anzeigen lassen und fand unter Contents/MacOs die JavaApplicationStub. Ein Doppelklick darauf startet JKnobman völlig problemlos. Das ist viel praktischer als z.B. mit Parallels unter Windows zu arbeiten.
Die Hilfedatei kann man online aufrufen http://www.g200kg.com/en/docs/jknobman/ .

ciao herw