Sie sind nicht angemeldet.

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

klaus.krpano

Administrator

  • »klaus.krpano« ist der Autor dieses Themas

Beiträge: 13 499

  • Nachricht senden

1

Sonntag, 7. Juni 2015, 20:59

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:

Quellcode

 
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

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

2

Sonntag, 7. Juni 2015, 22:56

Wow. Very nice example. Amazing.
regards
Umalo

andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

  • Nachricht senden

3

Montag, 8. Juni 2015, 00:35

Excellent. Thanks for the example *thumbsup*

virtual pete

Fortgeschrittener

Beiträge: 245

Wohnort: Nerja

Beruf: Holiday rentals Nerja Costa del Sol

  • Nachricht senden

4

Montag, 8. Juni 2015, 10:12

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

milemann

Schüler

Beiträge: 132

  • Nachricht senden

5

Donnerstag, 11. Juni 2015, 12:39

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

Quellcode

 
1

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

virtual pete

Fortgeschrittener

Beiträge: 245

Wohnort: Nerja

Beruf: Holiday rentals Nerja Costa del Sol

  • Nachricht senden

6

Donnerstag, 11. Juni 2015, 13:00

Thanks Milemann :)

deazeredo.lucas

Anfänger

Beiträge: 17

  • Nachricht senden

7

Montag, 17. August 2015, 20:03

How could I add text and images to this example?

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

8

Montag, 17. August 2015, 22:57

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

deazeredo.lucas

Anfänger

Beiträge: 17

  • Nachricht senden

9

Dienstag, 18. August 2015, 06:37

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

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

  • Nachricht senden

10

Dienstag, 18. August 2015, 07:46

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

Anfänger

Beiträge: 17

  • Nachricht senden

11

Dienstag, 18. August 2015, 07:54

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

andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

  • Nachricht senden

12

Mittwoch, 19. August 2015, 03:01

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

Fortgeschrittener

Beiträge: 244

Wohnort: France

Beruf: Senior Software engineer

  • Nachricht senden

13

Donnerstag, 26. November 2015, 10:40

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 ?

Quellcode

 
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>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »benji33« (26. November 2015, 10:51)

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

14

Donnerstag, 26. November 2015, 10:53

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

Fortgeschrittener

Beiträge: 244

Wohnort: France

Beruf: Senior Software engineer

  • Nachricht senden

15

Freitag, 27. November 2015, 09:53

Thanks for this answer

panorama07

Schüler

Beiträge: 63

  • Nachricht senden

16

Freitag, 18. Dezember 2015, 12:33

feedback

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

justhuang

Anfänger

Beiträge: 1

  • Nachricht senden

17

Montag, 28. Dezember 2015, 02:58

thanks

stevenChen

Anfänger

Beiträge: 18

Wohnort: beijing, china

  • Nachricht senden

18

Mittwoch, 13. April 2016, 09:59

Zitat von »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« ist der Autor dieses Themas

Beiträge: 13 499

  • Nachricht senden

19

Mittwoch, 13. April 2016, 10:54

Hi,

Zitat

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

Quellcode

 
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

Anfänger

Beiträge: 18

Wohnort: beijing, china

  • Nachricht senden

20

Donnerstag, 14. April 2016, 02:42

Zitat von »klaus.krpano«

Hi,

Zitat

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

Quellcode

 
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！

Ähnliche Themen