Navigationsleiste responsiv gestalten

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

1

Dienstag, 26. Januar 2016, 15:15

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.

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

toosten

Fortgeschrittener

Beiträge: 521

Wohnort: Berlin

Beruf: Software-Entwickler bei VR-Easy ( HTML, JS, PHP, krpano, C++, Java )

2

Mittwoch, 27. Januar 2016, 07:31

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

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

.
.
Wir machen VR »EASY« - Erstelle ganz einfach virtuelle 360° Rundgänge.
We make VR »EASY« - Create virtual 360° tours easily.

Zum Seitenanfang

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

3

Donnerstag, 28. Januar 2016, 19:55

Danke, werde mir die Links mal angucken.

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

4

Freitag, 29. Januar 2016, 17:34

Zitat von »toosten«

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

http://krpano.com/docu/actions/#stagewidth & http://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. *confused*

Quellcode

<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>

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

toosten

Fortgeschrittener

Beiträge: 521

Wohnort: Berlin

Beruf: Software-Entwickler bei VR-Easy ( HTML, JS, PHP, krpano, C++, Java )

5

Sonntag, 31. Januar 2016, 11:03

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

.
.
Wir machen VR »EASY« - Erstelle ganz einfach virtuelle 360° Rundgänge.
We make VR »EASY« - Create virtual 360° tours easily.

Zum Seitenanfang

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

6

Montag, 1. Februar 2016, 17:07

Zitat von »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:

Quellcode

	<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...

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

toosten

Fortgeschrittener

Beiträge: 521

Wohnort: Berlin

Beruf: Software-Entwickler bei VR-Easy ( HTML, JS, PHP, krpano, C++, Java )

7

Montag, 1. Februar 2016, 22:20

Eine action programmieren, die deine sichtbaren Buttons mittig sortieren. *thumbsup*

.
.
Wir machen VR »EASY« - Erstelle ganz einfach virtuelle 360° Rundgänge.
We make VR »EASY« - Create virtual 360° tours easily.

Zum Seitenanfang

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

8

Dienstag, 2. Februar 2016, 11:34

Zitat von »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. *huh*

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

toosten

Fortgeschrittener

Beiträge: 521

Wohnort: Berlin

Beruf: Software-Entwickler bei VR-Easy ( HTML, JS, PHP, krpano, C++, Java )

9

Dienstag, 2. Februar 2016, 18:10

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

.
.
Wir machen VR »EASY« - Erstelle ganz einfach virtuelle 360° Rundgänge.
We make VR »EASY« - Create virtual 360° tours easily.

Zum Seitenanfang

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

10

Dienstag, 2. Februar 2016, 20:23

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. *evil*

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

toosten

Fortgeschrittener

Beiträge: 521

Wohnort: Berlin

Beruf: Software-Entwickler bei VR-Easy ( HTML, JS, PHP, krpano, C++, Java )

11

Dienstag, 2. Februar 2016, 22:52

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. *thumbsup*

.
.
Wir machen VR »EASY« - Erstelle ganz einfach virtuelle 360° Rundgänge.
We make VR »EASY« - Create virtual 360° tours easily.

Zum Seitenanfang

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

12

Mittwoch, 3. Februar 2016, 11:32

Jaja, die Programmierer, nur Zahlen im Kopf und keinen Blick für Ästhetik. *whistling*

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. *thumbup*

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

Fotophoto

Anfänger

Beiträge: 19

Wohnort: Köln

Beruf: Fotograf

13

Donnerstag, 18. Februar 2016, 15:04

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. *w00t*

Ich würde mein ganzes Leben retuschieren. (Dusty Springfield)

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

14

Freitag, 19. Februar 2016, 07:57

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

Zum Seitenanfang