Hinweis vorab

Einleitung

Voraussetzungen

Das schnelle Erfolgserlebnis

Das noch schnellere Erfolgserlebnis

Eigene Forschung

Panorama auf Webserver laden

Nützliches (Gut zu wissen)

Options Plugin

Editor Plugin

Zeilen auskommentieren

Einbinden externer xml-Dateien

Logkey abschalten

Kontextmenü

In meiner externen Datei habe ich u.a. das Kontextmenu eingebunden, dass beim Klick mit der rechten Maustaste im Panorama erscheint. Mit diesem Kontextmenu gebe ich dem Betrachter die Möglichkeit, zwischen verschiedenen Projektionsarten zu wählen. Auch hier ist die Praxis wieder einfacher als die Theorie. Also starten wir wieder mit dem einfachen Teil.
Dazu wählen wir aus den Examples der Version 1.0.7 das Beispiel Kontextmenu. Der wesentliche Teil steht gleich am Anfang der Datei:

    <!-- right-click context menu to change the viewing settings -->   
    <contextmenu>
        <item caption="KRPANO"     />
        <item caption="FULLSCREEN" />
        <item caption="normal view"        onclick="action(rectview);"          separator="true" />
        <item caption="fisheye view"       onclick="action(fisheyeview);"       />
        <item caption="architectural view" onclick="action(architectural);"     />
        <item caption="stereographic view" onclick="action(stereofisheyeview);" />
        <item caption="little planet view" onclick="action(littleplanet);"      />
    </contextmenu>

Damit sind erstmal die Menü-Einträge vorhanden. Die Zeilen beginnen jeweils mit "item" (sinngemäß sowas wie "Eintrag" oder "Teil") und daneben wird die "caption" angegeben. Das ist genau der Text, der als Menüzeile später im Menü erscheint. Als nächstes folgt die onclick-Definition, die nichts weiter bedeutet als "wenn diese Menuzeile angeklickt wird, dann führe die bezeichnete Aktion mit dem Namen xxx aus". Eine Aktion ist nichts anderes als eine Reihe von Anweisungen, die uns im verwendeten Beispiel auch schon auf dem Silbertablett serviert werden:

    <!-- actions for view changing -->
    <action name="rectview">
        tween(view.fovmax,       155.0, distance(179, 0.25), easeoutquad);
        tween(view.architectural,  0.0, distance(1.0, 0.25), easeoutquad);
        tween(view.fisheye,        0.0, distance(1.0, 0.25), easeoutquad, set(view.stereographic,false); );
    </action>
   
    <action name="fisheyeview">
        tween(view.architectural, 0.0, distance(1.0, 0.25), easeoutquad);
        tween(view.fisheye,       0.0 ,distance(1.0, 0.20), easeoutquad,
                set(view.stereographic,false);
                set(view.fovmax,179);
                tween(view.fisheye, 0.35, distance(1.0, 1.25));
             );
    </action>
   
    <action name="stereofisheyeview">
        tween(view.architectural, 0.0, distance(1.0, 0.25), easeoutquad);
        tween(view.fisheye,       0.0 ,distance(1.0, 0.10), easeoutquad,
                set(view.stereographic,true);
                tween(view.fisheye, 1.0, distance(1.0, 1.25));
                tween(view.fovmax,  150, distance(179, 1.25));
             );
    </action>
   
    <action name="littleplanet">
        tween(view.architectural, 0.0, distance(1.0, 0.25), easeoutquad);
        tween(view.fisheye,       0.0 ,distance(1.0, 0.10), easeoutquad,
                set(view.stereographic,true);
                tween(view.fisheye, 1.0, distance(1.0, 0.75));
                tween(view.fov,     130, distance(179, 0.75), easeoutquad, set(view.fovmax,150););
                tween(view.vlookat,  90, distance(179, 0.75), easeoutquad);
             );
    </action>
   
    <action name="architectural">
        tween(view.fovmax,       155.0, distance(179, 0.25), easeoutquad);
        tween(view.architectural,  1.0, distance(1.0, 0.25), easeoutquad);
        tween(view.fisheye,        0.0, distance(1.0, 0.25), easeoutquad, set(view.stereographic,false); );
    </action>

Die Actions auch noch in die externe Datei eingefügt und schon ist das Thema Kontextmenu für's erste abgefrühstückt. Und da behaupte noch jemand, krpano sei kryptisch oder kompliziert. Die eigentliche Programmierarbeit ist doch schon erledigt, wir müssen uns nur die gewünschten Teile aus den Examples zusammenkopieren. Wer jetzt noch genauer wissen möchte was da passiert, der sei auf die Dokumentation der krpano-Seite verwiesen.

Buttons

Eigenes Logo einbinden

Tween

Da dieses Logo ziemlich groß ist, wollen wir den Betrachter nicht permanent damit belästigen. Also lassen wir das Logo nach einer bestimmten Zeit einfach verschwinden. Die Action dafür sieht so aus:

<action name="ausblenden">
    tween(plugin[logo].alpha,0,7,easeInExpo,set(plugin[logo].visible,false));
    </action>

Die genaue Beschreibung der Syntax ist auf der krpano-Seite zu finden (nach "tween" suchen), daher verzichte ich hier auf eine genauere Beschreibung. Wir wollen uns ja schließlich nicht mit Fachwissen quälen, sondern Ergebnisse sehen ;)) Grundsätzlich kann man sich "tween" als eine Eieruhr vorstellen, der wir eine Variable nennen (plugin[logo].alpha), den Zielwert (0, also vollkommen ausgeblendet) und die Zeit in Sekunden (hier 7) bis die Aktion abgeschlossen sein soll. Zu allem Überfluss (welch ein Luxus) können wir auch noch eine weitere Aktion angeben, die ausgeführt werden soll, wenn die eigentliche Aktion fertig ist. In unserem Fall setzen wir die Eigenschaft "visible" auf "false", also sichtbar = falsch. Jetzt kann man natürlich zu recht fragen, warum wir die Sichtbarkeit abschalten, wenn die Grafik doch schon ausgeblendet ist. Ganz einfach: damit der Link nicht mehr funktioniert. Die Tatsache, dass etwas ausgeblendet ist, bedeutet ja nicht, dass es nicht mehr da ist. Fragt mich jetzt aber bitte nicht nach dem Unterschied zwischen ausgeblendet und unsichtbar. Das ist höhere Programmiererlogik, der wir uns im Tutorial Nummer 628 widmen werden... ;))
 
Wo wird die action nun aufgerufen? Mit der Deklaration alleine ist es ja noch nicht getan. Das Logo ist bei jedem Aufruf eines Panoramas sichtbar. Also rufen wir die action doch einfach auf, sobald das Pano startet. Dazu platzieren wir den Aufruf in die Kopfzeile der Panorama-xml:

<krpano version="1.0.8" onstart="action(ausblenden);">

Wer sich noch an den ersten Teil des Tutorials erinnert, dem ist klar, dass natürlich die Kopfzeile des Templates entsprechend angepasst wird, damit das für zukünftige Panoramen automatisch enthalten ist. Da die externe (allpanos.xml) ja in andere xml-Dateien eingebunden wird, hat diese selbst keine Kopfzeile.

Jetzt fehlt eigentlich nur noch der letzte Parameter und die tween-Funktion ist schon vollständig erklärt. Dann will ich den mal nicht vorenthalten: Dieser Parameter steuert den Ablauf der "Eieruhr". Also z.B. langsam starten, dann Beschleunigen und am Schluss langsam ausklingen. Hier gibt's eine schöne Darstellung der verschiedenen Parameter. Durch anklicken der grauen Rechtecke und beobachten des Punktes rechts von der Grafik erhält man einen sehr schönen Eindruck über die Wirkung der möglichen Parameter. Hier gibt's noch eine schöne Gesamtübersicht.

Nadirlogo

Viel Spaß beim ausprobieren!




© Volker Uhl (www.panoramann.de)