Navigationsleiste responsiv gestalten

Fotophoto · January 26, 2016 at 3:15 PM

Hallo,

ich habe mit dem Make VTour Multires Template eine Tour erstellt. Die Navigation darin habe ich grafisch angepasst und noch Buttons für Autorotation und Hotspots hinzugefügt. Die Navigation soll mittig am unteren Rand des Bildschirms stehen. Auf dem IPad funktioniert dies auch, da dort der Fullscreen Button nicht angezeigt wird. Auf einem normalen Monitor sitzt die Navileiste dann aber nicht mehr mittig, wenn alle 10 Buttons angezeigt werden und auf nem WindowsPhone werden die Buttons teilweise links und rechts angezeigt. Zumindest die, die angezeigt werden. Manche überlagern sich und werden unterschiedlich groß dargestellt.
Meine Frage ist, ob oder besser, wie man es hinbekommt, dass alle Buttons angezeigt werden und dass nur die Größe der Navigation, abhängig vom darstellenden Medium, angepasst wird. Also die Leiste soll, abgesehen vom Fullscreen Button beim Ipad, immer mittig stehen und alle sonstigen Buttons anzeigen.
Habe schon rumexperimentiert, aber noch keine Lösung gefunden.

toosten · January 27, 2016 at 7:31 AM

https://krpano.com/docu/xml/#layer.align auf center, dann ist der Layer immer mittig

https://krpano.com/docu/actions/#stagewidth & https://krpano.com/docu/xml/#events.onresize

Fotophoto · January 28, 2016 at 7:55 PM

Danke, werde mir die Links mal angucken.

Fotophoto · January 29, 2016 at 5:34 PM

Quote from toosten

https://krpano.com/docu/xml/#layer.align auf center, dann ist der Layer immer mittig
https://krpano.com/docu/actions/#stagewidth & https://krpano.com/docu/xml/#events.onresize

Hallo toosten,

habe die Links mal angeguckt. Meine Navigation ist bereits auf "bottom" gesetzt.
Ich packe hier mal den Code ran, vielleicht bringt das ne schnelle Lösung. Also grundlegend geht es mir erst mal darum, dass die Navigation Mittig steht...
Wenn Du also mal kurz drüberlesen würdest, wär das wirklich klasse. Vielleicht hab ich ja einfach ne Kleinigkeit übersehen oder aber wirklich grundlegend was vergeigt.

Code

<layer name="skin_control_bar" keep="true" type="container" bgcolor="0xffffff" bgalpha="0" align="bottom" width="100%" height="40" x="0" y="20" y_opened="20" y_closed="-42" zorder="3">
    	
    	<layer name="skin_btn_fs" 	style="skin_base|skin_glow" crop="0|576|64|64"  align="bottom"  	x="-220"  y="4"   scale="0.5" onclick="switch(fullscreen);" devices="fullscreensupport" />
    	
    	<layer name="btn_autorot" 	style="skin_base|skin_glow"  crop="64|128|64|64"   align="bottom"  	x="140"   y="4"  scale="0.5" onclick="switch(autorotate.enabled);" />
    	
    	<layer name="skin_btn_thumbs" style="skin_base|skin_glow" crop="0|128|64|64"  align="bottom"  x="-140"   y="4"   scale="0.5" ondown2="skin_showthumbs();" />
    	
		<layer name="skin_btn_lt" 	style="skin_base|skin_glow" crop="0|192|64|64"  align="bottom"  	x="-100" y="4"   scale="0.5" ondown2="set(hlookat_moveforce,-0.1);" onup2="set(hlookat_moveforce,0);" />
    	
		<layer name="skin_btn_rt" 	style="skin_base|skin_glow" crop="64|192|64|64" align="bottom"  	x="-60"  y="4"   scale="0.5" ondown2="set(hlookat_moveforce,+0.1);" onup2="set(hlookat_moveforce,0);" />
    	
		<layer name="skin_btn_up" 	style="skin_base|skin_glow" crop="0|256|64|64"  align="bottom"  	x="-20"  y="4"   scale="0.5" ondown2="set(vlookat_moveforce,-0.1);" onup2="set(vlookat_moveforce,0);" />
    	
		<layer name="skin_btn_dn" 	style="skin_base|skin_glow" crop="64|256|64|64" align="bottom"  	x="20"  y="4"   scale="0.5" ondown2="set(vlookat_moveforce,+0.1);" onup2="set(vlookat_moveforce,0);" />
    	
		<layer name="skin_btn_in" 	style="skin_base|skin_glow" crop="0|512|64|64"  align="bottom"  	x="60"  y="4"   scale="0.5" ondown2="set(fov_moveforce,-0.1);" 	onup2="set(fov_moveforce,0);" />
    	
		<layer name="skin_btn_ou" 	style="skin_base|skin_glow" crop="64|512|64|64" align="bottom"  	x="100" y="4"   scale="0.5" ondown2="set(fov_moveforce,+0.1);" 	onup2="set(fov_moveforce,0);" />
    	
	   <layer name="skin_btn_hide"   style="skin_base|skin_glow" crop="0|448|64|64"  align="bottom"   	x="180"   y="4"   scale="0.5" onclick="skin_hideskin()" />
    	
		<layer name="skin_btn_show"   style="skin_base|skin_glow" crop="64|448|64|64" align="right"   	x="15"	y="-50" scale="0.5" alpha="0" visible="false" onclick="skin_showskin()" />
    	
    	<layer name="skin_btn_hotspots"   style="skin_base|skin_glow" crop="0|0|64|64"  align="bottom"   	x="-180"   y="4"   scale="0.5" onclick="hideallhotspots();" />
	</layer>
	
	
		<!-- Alternative small screen layout for mobile devices (override/extend settings) -->


	<krpano devices="mobile">


		<layer name="skin_control_bar" height="64" y="0" y_opened="0" y_closed="-68">
        	<layer name="skin_btn_thumbs" scale="1" y="0" align="bottom" x="-140" />
			<layer name="skin_btn_lt" 	visible="false" />
			<layer name="skin_btn_rt" 	visible="false" />
			<layer name="skin_btn_up" 	visible="false" />
			<layer name="skin_btn_dn" 	visible="false" />
			<layer name="skin_btn_in" 	visible="false" />
			<layer name="skin_btn_ou" 	visible="false" />
			<layer name="skin_btn_fs" 	scale="1" y="0" align="bottom" x="140" />
			<layer name="skin_btn_hide"   scale="1" x="5" />
			<layer name="skin_btn_show"   scale="1" x="0" y="-58" />
        	<layer name="autorotate" 	visible="false" />
        	<layer name="skin_btn_hotspots" scale="1" y="0" align="bottom" x="-140" />
		</layer>

Display More

toosten · January 31, 2016 at 11:03 AM

die Kind-Elemente von "skin_control_bar" müssen sich an align="center" ausrichten und von da mit x="+/-" positioniert werden

Fotophoto · February 1, 2016 at 5:07 PM

Quote from toosten

die Kind-Elemente von "skin_control_bar" müssen sich an align="center" ausrichten und von da mit x="+/-" positioniert werden

Ich habe die Navigation angepasst. Hier ein Auszug:

Code

<layer name="skin_control_bar" keep="true" type="container" bgcolor="0x000000" bgalpha="0" align="bottom" width="100%" height="40" x="0" y="20" y_opened="20" y_closed="-42" zorder="3">
    	
    	<layer name="skin_btn_fs" 	style="skin_base|skin_glow" crop="0|576|64|64"  align="center"  	x="-200"  y="-0.5"   scale="0.5" onclick="switch(fullscreen);" devices="fullscreensupport" />
    	
    	<layer name="skin_btn_hotspots"   style="skin_base|skin_glow" crop="0|0|64|64"  align="center"   	x="-160"   y="-0.5"   scale="0.5" onclick="hideallhotspots();" />
    	
    	<layer name="skin_btn_thumbs" style="skin_base|skin_glow" crop="0|128|64|64"  align="center"  x="-120"   y="-0.5"   scale="0.5" ondown2="skin_showthumbs();" />
...

Ich muss meine Frage aber umformulieren oder präzisieren. Denn das die Buttons per x und y Wert innerhalb des Navigationslayers platziert werden, verstehe ich ja.
Meine Frage ist eher die, wenn ich das Panorama auf einem Gerät anzeigen lasse, das kein Fullscreen unterstützt, wird ja auch der entsprechende Button nicht angezeigt. Wie bekomme ich es hin, dass die anderen Buttons dann trotzdem mittig auf dem Bildschirm stehen?
Es entsteht ja dann ein "Loch", wo vorher der Button für die Vollbild Anzeige war...

toosten · February 1, 2016 at 10:20 PM

Eine action programmieren, die deine sichtbaren Buttons mittig sortieren.

Fotophoto · February 2, 2016 at 11:34 AM

Quote from toosten

Eine action programmieren, die deine sichtbaren Buttons mittig sortieren.

Aber na klar! Dann leg ich gleich mal los...

Aber mal ernsthaft, ich komme also auch für eine solch grundlegende Funktion nicht drum herum, mir tiefer gehende Programmierkenntnisse anzueignen? Ist im Grunde genommen sicher machbar, mit genügend Zeiteinsatz. Aber gibt es nicht einen Leitfaden, wo erklärt wird, wie man grundlegend Aktionen programmiert. Die fehlende oder von mir bisher noch nicht gefundene Suchfunktion in der Krpano Doku, macht das ganze ziemlich zeitaufwändig, wenn man eben keinerlei Übersicht hat, wie programmiert wird und vor allem, wie man in Krpano Aktionen schreibt oder wie die einzelnen Dinge zusammen hängen. Dein Hinweis auf Java, hat mich schon etwas weiter gebracht, aber Krpano ist ja doch "anders".
Aber naja. Probieren geht über...

Also. Ich würde in der Aktion abfragen müssen, wie viele Buttons angezeigt werden und dann eine veränderte Darstellung anzeigen, also ein zweites Menü, nehme ich an.

toosten · February 2, 2016 at 6:10 PM

Knipsen kann jeder, fotografieren nicht unbedingt - genauso ist es beim programmieren!

Fotophoto · February 2, 2016 at 8:23 PM

Knipsen kann jeder, da stimme ich Dir zu. Aber egal, ob knipsen oder ernsthaft fotografieren, jeder kann lernen, wie man grundlegend eine Kamera bedienen muss. Einschalten, Zeit und Blende einstellen etc. Kurzum die grundlegenden Zusammenhänge sind logisch nachvollziehbar und könne nachgelesen werden...
Ich will hier ja schließlich nichts weltbewegendes programmieren, aber irgendwo muss man doch die grundlegende Vorgehensweise und eben im Bezug auf Krpano, die Logik des Aufbaus einer Aktion nachlesen und lernen können.

toosten · February 2, 2016 at 10:52 PM

Ja, dafür ist die umfangreiche Doku von Klaus da - man kann alle Elemente per action abfragen und setzen, ein bischen Mathe und man hat eine dynamische Sortierung.

Fotophoto · February 3, 2016 at 11:32 AM

Jaja, die Programmierer, nur Zahlen im Kopf und keinen Blick für Ästhetik.
Die Doku ist super, kein Zweifel. Sehr umfangreich, nur eben ohne Suchfunktion. Wenn man genau weiß, was man braucht und wo man es dann finden kann, sehr gut. Aber ohne allgemeine Programmierkenntnisse eben schwer zu durchschauen. Nur so nebenbei, schaue mir fleißig Tutorials zu den Grundlagen der Programmierung an und nach und nach fügt sich das Puzzle. Doch nutze ich natürlich auch das Forum, um eben mehr Hinweise zu bekommen, wie ich das finde oder programmieren kann, was ich gerade vorhabe.
Für kommerzielle Projekte würde ich mir sicher auch einen Programmierer suchen, das wäre definitiv effektiver. Ist aber noch nicht der Fall, also FORUM.

Fotophoto · February 18, 2016 at 3:04 PM

Nur ums wirklich komplett abzuschließen, ich habe dann mittlerweile selber gemerkt, dass es im Browser eine Suchfunktion gibt, mit der man die Webseite durchsuchen kann.

klaus.krpano · February 19, 2016 at 7:57 AM

Hi,

das Default VTOUR Skin (die vtourskin.xml) ist dafür gedacht schnell und einfach Touren erstellen zu können - daher sind alle relevanten Einstellungen dort in die <skin_settings> ausgelagert. Der vtourskin.xml XML Code selbst ist aber teilweise komplexer und mit mehr mehreren internen Beziehungen zueinander und nicht für die Bearbeitung von Neueinsteigern gedacht.

Zum Erlernen der XML und zum gestalten eigener Wünsche wäre es besser mit einer leeren XML zu beginnen und dort Stück für Stück zu versuchen ein UI zu bauen.

Falls aber dennoch versucht die vtourskin.xml zu bearbeiten - es gibt dort die 'skin_arrange_buttons' <action> - in dieser werden die Button Positionen - abhängig von mehrere Bedingungen (auch der Bildschirmgröße) - berechnet und gesetzt.

Schöne Grüße,
Klaus

Navigationsleiste responsiv gestalten

Participate now!

Users Viewing This Thread