You are not logged in.

Example: iframes (or any other html content) as distorted hotspot

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,499

  • Send private message

1

Sunday, June 7th 2015, 8:59pm

Example: iframes (or any other html content) as distorted hotspot

Hi,

I was asked if it's possible to use iframes as distorted hotspots in krpano.
Here the answer directly for everyone:

Yes, when using the 1.19 version and the new Javascript actions from there, then this would be possible (but HTML5-only of course).

There is currently not 'direct' support for including html elements (but that's already planed), so this will require a 'temporary' hotspot image (can be any small image, e.g. a small 8x8 black or transparent image) to get the hotspot itself created.

Here an example:
http://krpano.com/krpano.html?xml=exampl….xml&html5=only

and here the xml code of that example:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<hotspot name="iframe"
         url="black.png"
         ath="0" atv="0"
         distorted="true"
         onloaded="add_iframe('https://www.youtube.com/embed/p4j18C0CEEg', 640, 360);"
         />

<action name="add_iframe" type="Javascript">
    var iframe = document.createElement("iframe");
    iframe.style.position = "absolute";
    iframe.style.left = 0;
    iframe.style.top = 0;
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = 0;
    iframe.src = args[1];
    caller.registercontentsize(args[2], args[3]);
    caller.sprite.appendChild(iframe);
</action>


This could be also used to add any other html content. Only two things to respect - the size need to be set and this will work only in HTML5.

Best regards,
Klaus

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

2

Sunday, June 7th 2015, 10:56pm

Wow. Very nice example. Amazing.
regards
Umalo

andrew22222

Intermediate

Posts: 397

Location: Australia

  • Send private message

3

Monday, June 8th 2015, 12:35am

Excellent. Thanks for the example *thumbsup*

virtual pete

Intermediate

Posts: 245

Location: Nerja

Occupation: Holiday rentals Nerja Costa del Sol

  • Send private message

4

Monday, June 8th 2015, 10:12am

This is great, Is it possible in this example of the youtube video in the iframe to make the video automatically start?

milemann

Trainee

Posts: 132

  • Send private message

5

Thursday, June 11th 2015, 12:39pm

Quoted from "virtual pete"

This is great, Is it possible in this example of the youtube video in the iframe to make the video automatically start?

sure:

Source code

 
1

onloaded="add_iframe('https://www.youtube.com/embed/p4j18C0CEEg?autoplay=1', 640, 360);"

virtual pete

Intermediate

Posts: 245

Location: Nerja

Occupation: Holiday rentals Nerja Costa del Sol

  • Send private message

6

Thursday, June 11th 2015, 1:00pm

Thanks Milemann :)

deazeredo.lucas

Beginner

Posts: 17

  • Send private message

7

Monday, August 17th 2015, 8:03pm

How could I add text and images to this example?

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

8

Monday, August 17th 2015, 10:57pm

You create a local iframe which has the text and images and the youtube iframe in it (iframe within an iframe)

deazeredo.lucas

Beginner

Posts: 17

  • Send private message

9

Tuesday, August 18th 2015, 6:37am

Do I need any code else? Cause even this Klaus' example doesn't work in my machine. I'm using Safari. Does anybody know?

andrew22222

Intermediate

Posts: 397

Location: Australia

  • Send private message

10

Tuesday, August 18th 2015, 7:46am

Yes there seems to be something wrong with the example.

Try adding the code to your own tour (or make a 1 scene test tour) and view it online.

deazeredo.lucas

Beginner

Posts: 17

  • Send private message

11

Tuesday, August 18th 2015, 7:54am

Does anyone would have a sample code of how to put a iframe inside of a iframe?
Thanks!

andrew22222

Intermediate

Posts: 397

Location: Australia

  • Send private message

12

Wednesday, August 19th 2015, 3:01am

Hey, I was trying out the iframe feature and noticed that displaying an image in the iframe works fine on everything


<hotspot name="iframe"
url="skin/black.png"
ath="0" atv="0"
distorted="true"
onloaded="add_iframe('images/fish.jpg', 522, 335);"
/>



But make it display a website and the site isn't contained within the iframe. Tested on iPad Air, iPhone 6 the full page is shown right down and no scrollbar or drag up and down option.


<hotspot name="iframe"
url="skin/black.png"
ath="0" atv="0"
distorted="true"
onloaded="add_iframe('http://www.krpano.com', 640, 360);"
/>


It does however work fine on the Samsung Galaxy S5 and desktop.

Any reason why iPads and iPhones are once again buggering it all up?

Thanks.

benji33

Intermediate

Posts: 244

Location: France

Occupation: Senior Software engineer

  • Send private message

13

Thursday, November 26th 2015, 10:40am

Tested into a square hotspot with ath/atv/width/height/rx/ry/rz values but I have issues with iPhone device.
The iframe goes to the nadir and it doesn't apply the "height".

Reproduced ?

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<hotspot name="spotwebcontent"
       	devices="html5"
       	tag="webcontent"
       	visible="false"
       	distorted="true"
       	url="%FIRSTXML%/graphics/transparent.png"
       	ath="-52.435618"
       	atv="-4.781611"
       	width="273"
       	height="280"
       	rx="-9.1404811779001989"
       	ry="-10.966652145640637"
       	rz="-2.0164699792494596"
       	enabled="true"
       	capture="false"
       	handcursor="false"
       	zorder="2"
       	zorder_backup="2"
       	onloaded="add_iframe(http://www.krpano.com, get(width), get(height));"
       	/>
<action name="add_iframe" type="Javascript" devices="html5">
	var iframe = document.createElement("iframe");
	iframe.style.position = "absolute";
	iframe.style.left = 0;
	iframe.style.top = 0;
	iframe.style.width = "100%";
	iframe.style.height = "100%";
	iframe.style.border = 0;
	iframe.src = args[1];
	caller.registercontentsize(args[2], args[3]);
	caller.sprite.appendChild(iframe);
</action>

This post has been edited 1 times, last edit by "benji33" (Nov 26th 2015, 10:51am)

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

14

Thursday, November 26th 2015, 10:53am

Hi,
Yes this a known browser bug.
Hope it helps
Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

benji33

Intermediate

Posts: 244

Location: France

Occupation: Senior Software engineer

  • Send private message

15

Friday, November 27th 2015, 9:53am

Thanks for this answer

panorama07

Trainee

Posts: 63

  • Send private message

16

Friday, December 18th 2015, 12:33pm

feedback

Thank you! A very good decision! That feedback: http://panorama07.ru/effects/iframe/bar.html

justhuang

Beginner

Posts: 1

  • Send private message

17

Monday, December 28th 2015, 2:58am

thanks

stevenChen

Beginner

Posts: 18

Location: beijing, china

  • Send private message

18

Wednesday, April 13th 2016, 9:59am

Quoted from "klaus.krpano"

This could be also used to add any other html content. Only two things to respect - the size need to be set and this will work only in HTML5.
Hi klaus:
could you give come example foe add any other html content to hostspot? it will be best for include some text and image element

and i copy your demo code to my code it does not works
Firefox browser:
INFO: krpano 1.19-pr4 (build 2016-04-07)
INFO: HTML5/Desktop - Firefox 45.0 - WebGL
INFO: ready to hideInputDialog
ERROR: add_iframe - TypeError: caller.sprite is null

Chrome browser:
INFO: krpano 1.19-pr4 (build 2016-04-07)
INFO: HTML5/Desktop - Chrome 47.0 - WebGL
INFO: ready to hideInputDialog
ERROR: add_iframe - TypeError: Cannot read property 'appendChild' of null

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,499

  • Send private message

19

Wednesday, April 13th 2016, 10:54am

Hi,

Quoted

ERROR: add_iframe - TypeError: caller.sprite is null
add:

Source code

 
1

renderer="css3d"
to your <hotspot> element.

See also here:
http://krpano.com/docu/xml/#hotspot.sprite
and here:
http://krpano.com/docu/xml/#hotspot.renderer

Best regards,
Klaus

stevenChen

Beginner

Posts: 18

Location: beijing, china

  • Send private message

20

Thursday, April 14th 2016, 2:42am

Quoted from "klaus.krpano"

Hi,

Quoted

ERROR: add_iframe - TypeError: caller.sprite is null
add:

Source code

 
1

renderer="css3d"
to your element.

See also here:
http://krpano.com/docu/xml/#hotspot.sprite
and here:
http://krpano.com/docu/xml/#hotspot.renderer

Best regards,
Klaus
hi klaus:

thank you for reply! You have worked hard *g*

i also find the reason！

Similar threads