videohotspots exclude from mobiles

Q&A about the latest versions
Post Reply
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

is it possible to tag the videohotspots (the thing that is placed from the tour browser) to hide on mobiles?
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi, just use the visible logic block
Is Mobile, =, True, Visible: false
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

Where do I access the logic block for these guys?
Unbenannt-1.jpg
Unbenannt-1.jpg (278.34 KiB) Viewed 5801 times
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

HUmmmm,
Video hotspots, "ht_video" or pinned video?
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

how can I tel which is which.
there is this camera icon in the window and i used this to place a hotspot to align the video to the screen.
if there is another way to achieve this with a ht_video, all my problems will be solved.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

how can I tel which is which.
If it looks like this it's a pinned video.

pinned-video1.jpg
pinned-video1.jpg (696.18 KiB) Viewed 5788 times
is it possible to tag the videohotspots to hide on mobiles?
You can use the same detect technique as we discussed in viewtopic.php?f=6&t=12496 but with Android included in the list of devices to detect. As the pinned hotspots don't require specific skin elements all you have to do is to copy the pano.xml, rename it to pano-novideo.xml, remove the 'media' tag from each 'panorama id' and then use the detect code to select it when it detects a mobile device. All mobile devices (within the scope of the detection) will not show the videos, desktops will.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

Excellent. Thank you Tony.

@ boys from ggnome dev team:
Can we agree that this is too clumsy for such an important element and needs to be changed in #6?
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

I have a very strange issue here.
When I remove the media tag from the xml, the videos are removed and it works as expected.
But when I replace the videos with static images, they will not load but instead the videos are loaded (the xml code clearly tags image and directs to a jpg.
I tested this on several devices and can't get my head around what's going wrong here.

After much more testing I come to the conclusion that there must be a mistake in the code to change the XML.
The skins a re switcing, but not so the xml as I have generated two sets of xml and skin files, each with their own html.
One set with the videos and one set with static images instead of the videos. Called from their unique html they work fine, but when I try to use an html the detects the devices, the xml are not changed, only the skins

And what is REALLY odd, when I alter the line <pano.readConfigUrl("pano_iphone.xml");> to go to like pano_something.xml the player complains that he can't find the panorama.xml. So there must be some kind of connection, but whatever I try, the proper files are never loaded.

Code: Select all

<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
		<script type="text/javascript" src="pano2vr_player.js">
		</script>
		<script type="text/javascript" src="skin.js">
		</script>
		<div id="container" style="width:100%;height:100%;overflow:hidden;">
		<br>Loading...<br><br>
		This content requires HTML5 with CSS3 3D Transforms or WebGL.
		</div>
		<script type="text/javascript">
	
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
		// add the skin object
		skin=new pano2vrSkin(pano);
		// load the configuration
		window.addEventListener("load", function() {
			pano.readConfigUrlAsync("pano.xml");
		});
		</script>
		
		<script type="text/javascript">
		var detect = (function detect() {
			function isiPhone() {
				return navigator.userAgent.match(/iPhone/i) != null;
			}
			function isiPad() {
				return navigator.userAgent.match(/iPad/i) != null;
			}
			return {
				isiPhone: isiPhone(),
				isiPad: isiPad()
			};
		})();

		var deferredLoad = (function deferredLoad() { 
			function javascript(file, cb) { 
				var scr = document.createElement("script");
				scr.setAttribute("type", "text/javascript");
				scr.setAttribute("src", file);
				scr.onload = cb;
				document.head.appendChild(scr);
			}

			return {
				javascript: javascript
			};
		})();
		
				if (ggHasHtml5Css3D() || ggHasWebGL()) { // check for CSS3 3D transformations and WebGL
			var loadPano = (function () {
				// create the panorama player with the container
				pano=new pano2vrPlayer("container");
				// add the skin object
				skin=new pano2vrSkin(pano);
				// load the configuration
				window.addEventListener("load", function() {
					pano.readConfigUrlAsync("pano.xml",function() {  gyro=new pano2vrGyro(pano,"container"); gyro.disable();});
				});

				// Deliver the correct skin and images
				 if (detect.isiPhone) { 
				 	pano=new pano2vrPlayer("container");
					skin=new pano2vrSkin(pano);
					pano.readConfigUrl("pano_iphone.xml");
				 } else if (detect.isiPad) { 
				 	pano=new pano2vrPlayer("container");
					skin=new pano2vrSkin(pano);
					pano.readConfigUrl("pano.xml");
				 } else {
					pano=new pano2vrPlayer("container");
					skin=new pano2vrSkin(pano);
					pano.readConfigUrl("pano_iphone.xml");
				}
				hideUrlBar();
			});

			if (detect.isiPhone)
				deferredLoad.javascript("skin_iphone.js", loadPano);
			else if (detect.isiPad)
				deferredLoad.javascript("skin_iphone.js", loadPano);
			else 
				deferredLoad.javascript("skin.js", loadPano);
		} else {
			// no html5 support..
			document
				.getElementById("container").innerHTML = "Your web browser does not support HTML5.";
		}
		</script>
		
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - --> 
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi J,

Okay so I'm trying to follow along here but I'm a bit confused as to what you actually want to happen and why are you replacing the videos with still images.

Is it because on mobile devices you only want to show the stills while on desktop you want to show the video? Is this the sort of workflow you are hoping to achieve?

testing5.jpg
testing5.jpg (137.23 KiB) Viewed 5761 times
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi J,

Taking a look at the code sample you provided it looks like you have additional code that shouldn't be there. I've created a new sample https://rebrand.ly/p2vr-detect-still that has the following work flow...

testing6.jpg
testing6.jpg (90.59 KiB) Viewed 5756 times

iPhone - iPad

1. Browsing to the URL on iPhone or iPad loads the ios.xml and the ios_skin.js
2. The ios.xml has still images in place of the video, the ios_skin.js has a simplex menu without the fullscreen button and the 3 navigation buttons; Home | English | French
3. Selecting the English button loads the 'English' image and selecting French loads the 'French' image. Both images are pinned using the same preferences as the videos

Android - Desktop

1. Browsing to the URL on Android or Desktop loads the pano.xml and the skin.js
2. The pano.xml has the pinned videos, the skin.js has a simplex menu with the fullscreen button and the 3 navigation buttons; Home | English | French
3. Selecting the English button loads the 'English' video and selecting French loads the 'French' video. Both videos are pinned using the same preferences as the images

Both .xml files point to a single tiles folder so all similar nodes use the same images.

Here is a copy of the code from the index.html page of the sample project...

Code: Select all

<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
		<script type="text/javascript" src="pano2vr_player.js"></script>
		<script type="text/javascript" src="pano2vrgyro.js"></script>
		<div id="container" style="width:100%;height:100%;overflow:hidden;">
		</div>
		
		<script type="text/javascript">
		var detect = (function detect() {
			function isiPhone() {
				return navigator.userAgent.match(/iPhone/i) != null;
			}
			function isiPad() {
				return navigator.userAgent.match(/iPad/i) != null;
			}
			return {
				isiPhone: isiPhone(),
				isiPad: isiPad()
			};
		})();

		var deferredLoad = (function deferredLoad() { 
			function javascript(file, cb) { 
				var scr = document.createElement("script");
				scr.setAttribute("type", "text/javascript");
				scr.setAttribute("src", file);
				scr.onload = cb;
				document.head.appendChild(scr);
			}

			return {
				javascript: javascript
			};
		})();
		
				if (ggHasHtml5Css3D() || ggHasWebGL()) { // check for CSS3 3D transformations and WebGL
			var loadPano = (function () {
				// create the panorama player with the container
				pano=new pano2vrPlayer("container");
				// add the skin object
				skin=new pano2vrSkin(pano);

				// Deliver the correct skin and images
				 if (detect.isiPhone) { 
				 	pano=new pano2vrPlayer("container");
					skin=new pano2vrSkin(pano);
					pano.readConfigUrl("ios.xml");
				 } else if (detect.isiPad) { 
				 	pano=new pano2vrPlayer("container");
					skin=new pano2vrSkin(pano);
					pano.readConfigUrl("ios.xml");
				 } else {
					pano=new pano2vrPlayer("container");
					skin=new pano2vrSkin(pano);
					pano.readConfigUrl("pano.xml");
				}
				hideUrlBar();
			});

			if (detect.isiPhone)
				deferredLoad.javascript("ios_skin.js", loadPano);
			else if (detect.isiPad)
				deferredLoad.javascript("ios_skin.js", loadPano);
			else 
				deferredLoad.javascript("skin.js", loadPano);
		} else {
			// no html5 support..
			document
				.getElementById("container").innerHTML = "Your web browser does not support HTML5.";
		}
		</script>
		
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - --> 
cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

Thanl you so much Tony, donating your time at that time of the year is highly appreciated.
We're getting closer now, but to make it a bit more complicated I also need to detect Android phones.
As your code sample now seems to be working also for me, I maybe can get my head around to also add an Android user agent.

Let me explain why it is so many options:
Skin is clear. At the moment it's only used to hide the FS button from i-Devices.

Different pano.xml is used to hide pinned videos on certain devices as th client wants them to run after the node has loaded.
Which means a node with two or more pinned videos will crash any smartphone. Hence the idea to show only static images on screens on smartphones.
As the pinned videos seem to work on ipad (further testing needed) I want to exclude these only on iphone and android while they remain on ipad and others.

*/some time later/*

PUH, GOT iT.
Santa, I'm coming!

And thanks again, Tony, I owe you quite a couple of beers.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

PUH, GOT iT. Santa, I'm coming!
Great news!
And thanks again, Tony, I owe you quite a couple of beers.
Anytime mate, glad I could help.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

Well, to be honest, my life would have been less painful if the code in the sample you had given me initially would have been correct :-)
It changes the skin but led to the problem with not working change of the xml.

As you mentioned earlier it contains a few lines that don't belong there. I even could narrow it down to the culprit, but as I have no idea about java script I wasn't able to fix it myself. Luckily I received your correction in time :-)
But maybe you want to fix the source also for other if they stumble upon it from the other thread.

https://s3-ap-southeast-2.amazonaws.com ... ndex3.html
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Well, to be honest, my life would have been less painful if the code in the sample you had given me initially would have been correct :-)
Every successful person travels a painful journey. Suffering is an integral and essential part of any real pursuit of success 8)
As you mentioned earlier it contains a few lines that don't belong there. I even could narrow it down to the culprit, but as I have no idea about java script I wasn't able to fix it myself. Luckily I received your correction in time :-)
Glad it worked for you, wasn't aware you were under a deadline :shock:
But maybe you want to fix the source also for other if they stumble upon it from the other thread.
The code example in the other thread viewtopic.php?f=6&t=12496 works perfectly for that project, there is nothing wrong with the code if you use the same .xml structure. It's only when you use the default pano.xml do you need to change it. :wink: That said I have updated the project to avoid confusion.

https://s3-ap-southeast-2.amazonaws.com ... index.html

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Post Reply