Panoramann.de

...und sie dreht sich doch

(Galileo Galilei)

 

Eigene Navigationsbuttons für krpano-Player


Wenn man sich im Netz verschiedene Panorama-Seiten ansieht, fällt meistens anhand der Navigations-Buttons die Verwendung des krpano-Players auf. Das ist an sich nicht weiter schlimm, aber irgendwie doch auch langweilig, dass alle die gleichen (Standard-)Buttons für die Navigation verwenden. In Anbetracht der Komplexität für Einsteiger und der verfügbaren Dokumentation zum Player ist es durchaus verständlich, dass so wenige Benutzer ihre eigenen Buttons verwenden. Vielleicht schaffe ich etwas Klarheit, indem ich mal wieder mein Vorgehen beschreibe. Wie immer ist diese Beschreibung nicht die absolut alleingültige Lösung, sondern stellt nur eine mögliche Möglichkeit dar.

Wo kommen die Buttons her?

Im Verzeichnis der krpano-Tools (verwendete Version: 1.0.8.14) gibt es einen Ordner, der sich "skin" nennt:

krpanotools Verzeichnisstruktur

Je nach Struktur der eigenen Web-Seite liegt der "skin"-Ordner irgendwo in den Tiefen des Verzeichnisses. Wenn man die Templates der krpanotools entsprechend anpasst, ist es möglich für alle Panoramen das gleiche skin-Verzeichnis zu nutzen. Aber das ist eigentlich ein anderes Thema. Wir werfen einen Blick in die "defaultskin.xml":


    <style name="button" url="%SWFPATH%/skin/buttons.png" devices="desktop" keep="true" />
    <!-- some default buttons (zooming, direction, hotspots on/off, fullscreen) -->
    <plugin name="in" devices="desktop" align="bottom" x="-160" y="10" style="button" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" />
    <plugin name="out" devices="desktop" align="bottom" x="-120" y="10" style="button" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);" />
    <plugin name="left" devices="desktop" align="bottom" x="-80" y="10" style="button" crop= "0|0|40|40" onovercrop= "0|40|40|40" ondowncrop= "0|80|40|40" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" />
    <plugin name="right" devices="desktop" align="bottom" x="-40" y="10" style="button" crop= "40|0|40|40" onovercrop= "40|40|40|40" ondowncrop= "40|80|40|40" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" />
    <plugin name="up" devices="desktop" align="bottom" x="+0" y="10" style="button" crop= "80|0|40|40" onovercrop= "80|40|40|40" ondowncrop= "80|80|40|40" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" />
    <plugin name="down" devices="desktop" align="bottom" x="+40" y="10" style="button" crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" />
    <plugin name="starbtn" devices="desktop" align="bottom" x="+80" y="10" style="button" crop="240|0|40|40" onovercrop="240|40|40|40" ondowncrop="240|80|40|40" onhover="showtext(Hide All UI Elements, BUTTONSTYLE);" onclick="hideui();" />
    <plugin name="dragmode" devices="desktop" align="bottom" x="+120" y="10" style="button" crop="400|0|40|40" onovercrop="400|40|40|40" ondowncrop="400|80|40|40" onhover="showtext(Change Controlmode, BUTTONSTYLE);" onclick="dragcursor();" visible="true" />
    <plugin name="movemode" devices="desktop" align="bottom" x="+120" y="10" style="button" crop="360|0|40|40" onovercrop="360|40|40|40" ondowncrop="360|80|40|40" onhover="showtext(Change Controlmode, BUTTONSTYLE);" onclick="qtvrcursor();" visible="false" />
    <plugin name="openfs" devices="desktop" align="bottom" x="+160" y="10" style="button" crop="280|0|40|40" onovercrop="280|40|40|40" ondowncrop="280|80|40|40" onhover="showtext(Fullscreen, BUTTONSTYLE);" onclick="set(fullscreen,true);" visible="true" />
    <plugin name="closefs" devices="desktop" align="bottom" x="+160" y="10" style="button" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onhover="showtext(Exit Fullscreen, BUTTONSTYLE);" onclick="set(fullscreen,false);" visible="false" />

Das sieht auf den ersten Blick mal wieder sehr kompliziert aus, also nehmen wir uns mal die einzelnen Zeilen vor und suchen die wichtigsten Parameter zusammen.

Die erste Zeile definiert einen "style", auf den in den folgenden Zeilen verwiesen wird. Die wichtigsten Parameter:

<style name="button"
der Name des "style"
url="%SWFPATH%/skin/buttons.png"
der Verweis auf die Datei, in der die Buttons versteckt sind.

Ein Blick in die "buttons.png" zeigt, dass alle verwendeten Buttons in dieser Datei enthalten sind. Die obere Zeile enthält die "normalen" Buttons, die mittleren werden angezeigt, wenn mit der Maus darüber gefahren wird und die untere Zeile enthält die Buttons die beim klicken angezeigt werden:

krpano-Buttons

Die weiteren Zeilen der "defaultskin.xml" sind für die Darstellung der einzelnen Buttons zuständig:

<plugin name="in"
der Name des "plugin", in diesem Fall "in", also der Button für das Einzoomen.
devices="desktop"
der Button wird auf dem "Desktop" dargestellt, d.h. folgende Koordinatenangaben beziehen sich auf das "Browser-Fenster" des Panos.
align="bottom"
der Button wird am unteren Rand dargestellt.
x="-160"
x-Koordinate des Button (0 = Mitte des Browserfensters).
y="10"
y-Koordinate des Button.
style="button"
der Verweis auf den vorher definierten "style".
crop="160|0|40|40"
hier wird der Teil für den "normalen" Button aus der Datei "buttons.png" definiert, wobei die Parameter in der Reihenfolge Start-x|Start-y|Länge-x|Länge-y stehen und 0/0 oben links ist.
onovercrop="160|40|40|40"
hier wird der Teil für den Hoover-Button aus der Datei "buttons.png" definiert.
ondowncrop="160|80|40|40"
hier wird der Teil für den MouseDown-Button aus der Datei "buttons.png" definiert.
ondown="set(fov_moveforce,-1);"
Aktion für das "Mousedown-Event".
onup="set(fov_moveforce,0);"
Aktion für das "Mouseup-Event".

Für die ersten Versuche lassen wir die Datei "defaultskin.xml" unverändert. Um die Buttons an unseren eigenen Stil anzupassen, reicht es die "buttons.png" entsprechend zu ändern. Wie das ohne viel Fummelei möglich ist, sehen wir gleich. Zunächst mal halten wir fest: die einzelnen Buttons sind jeweils 40 Pixel hoch und 40 Pixel breit.

Matrix krpano-Buttons

Eigene Buttons erstellen

Nun könnte man auf die Idee kommen, die vorhandene "buttons.png" zu bearbeiten und das Aussehen der Buttons zu verändern. Klar - geht. Geht aber auch etwas komfortabler ohne pixelgenaue Fummelei.

Mit einem beliebigen Grafikprogramm erstellen wir zunächst unsere Buttons in der Größe 40 x 40 Pixel. Die Teile, die später transparent erscheinen sollen, sollten zunächst nicht transparent gestaltet werden, sondern in einer nicht verwendeten Farbe. Der Grund dafür wird später deutlich. Meine Buttons sehen also erstmal so aus:

01_button_l.png 01_button_r.png 01_button_u.png 12_button_l_hover.png 13_button_r_hover.png 14_button_u_hover.png 23_button_l_click.png 24_button_r_click.png 25_button_u_click.png

Sind alle Buttons erstellt (33 in der Standard-Version) geht es an das Zusammenfügen. Hierzu habe ich in den mir zur Verfügung stehenden Programmen zunächst keine vernünftige Funktion gefunden und Pixelgenau platzieren ist auch nicht unbedingt einfach. Aber es gibt eine Lösung, nämlich Irfanview, welches auf jeden Fall für den privaten Gebrauch kostenlos ist. Mit der Panorama-Funktion von Irvanview können wir Bilder horizontal oder vertikal zusammenfügen.

Beim Erstellen der einzelnen Bilder macht es Sinn, diese im Namen mit führender Nummerierung zu versehen. Das erleichtert später die Sortierung und spart Arbeit. Nachdem die einzelnen Bilder für die Buttons in der Grösse 40 x 40 Pixel erstellt wurden, starten wir Irfanview und wählen die ersten 11 Bilder für die obere Reihe mit den "normalen" Buttons aus.

Auswahl Reihe

Im Menü "Datei" finden wir den Eintrag "Start Panorama dialog with selected files..."

Panorama Dialog

Im öffnenden Fenster wählen wir für "Direction" Horizontal, denn wir wollen ja eine Reihe erstellen. Die Liste der Input-Images ist nun schon aufgrund unserer führenden Nummerierung sortiert. Falls mein Rat für die Nummerierung nicht befolgt wurde, kann die Liste noch umsortiert werden, indem das jeweilige Bild (oder auch mehrere) ausgewählt werden und mit Hilfe der Buttons rechts neben der Liste entsprechend verschoben werden.

Create Panorama

Entspricht die Sortierung unseren Bedürfnissen, klicken wir "Create Image" und wie von Geisterhand werden unsere Buttons schön ein einer Reihe angeordnet.

Reihe 01

Das sieht ja schonmal gut aus. Als nächstes im Menü "Datei", "Save as" auswählen und als Dateiformat "png" wählen.

Reihe speichern unter

Wichtig ist, in den Optionen den Haken bei "Save Transparent Color" zu entfernen, falls dieser gesetzt ist. Die Transparenz legen wir später fest. Falls die eigenen Buttons keine Transparenz enthalten und formatfüllend 40 x 40 Picel groß sind, kann diese Option Ignoriert werden. Nun noch einen Intelligenten Namen für die erste Reihe vergeben und speichern.

Create Panorama Options

Somit haben wir die erste Reihe fertig. Diese Schritte wiederholen wir nun für die beiden weiteren Reihen, so dass am Ende drei fertige Reihen irgendwo auf unserem Rechner liegen. Mit diesen drei Reihen gehen wir im Prinzip genauso vor, wie bisher mit den einzelnen Buttons: Auswählen, Panorama-Dialog und Speichern. Aber halt! Im "Create Panorama Dialog" wählen wir jetzt natürlich "Vertical" für die "Direction", denn die Reihen sollen ja untereinander gesetzt werden.

Create Panorama Reihen

Bei den Optionen für den "Save as-Dialog" setzen wir nun den Haken bei "Save Transparent Color":

Create Panorama Options

Damit später die "defaultskin.xml" nicht geändert werden muss, habe ich meine Datei "buttons.png" (wie das Original) genannt. Wird ein anderer Name gewählt, muss die "defaultskin.xml" entsprechend angepasst werden.

Als nächstes öffnet sich nun ein Fenster mit den angeordneten Reihen, in dem wir die Farbe auswählen, die später transparent werden soll. In meinem Beispiel das herzhafte Grün. Einmal mit der Maus darauf klicken und fertig.

Transparent Color

Nun brauchen wir die fertige Datei nur noch im Ordner "skin" zu platzieren und schon sind die Standard-Buttons gegen unsere eigenen getauscht.

Ich wünsche viel Spaß beim creativen Entwerfen eigener Buttons!!



Sollte ich mich irgendwo irgendwie vollkommen unverständlich ausgedrückt haben, oder sogar falsche Fehler übersehen haben, wäre ich für Rückmeldung (Kontaktformular) dankbar. 

Weitergehende Fragen empfehle ich im Forum (krpano.com oder www.panorama-forum.net) zu stellen. Dort gibt es meistens hilfreiche Antworten. Ich kann, will und werde keinen Support für krpano leisten...

Viel Spaß beim ausprobieren!



© Volker Uhl www.panoramann.de