You are not logged in.

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

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 12,922

  • 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: 356

Location: Australia

  • Send private message

3

Monday, June 8th 2015, 12:35am

Excellent. Thanks for the example *thumbsup*

virtual pete

Intermediate

Posts: 235

  • 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: 127

  • 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: 235

  • 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: 356

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

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

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
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

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

  • 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: 12,922

  • 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