Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

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

2

Sonntag, 7. Juni 2015, 22:56

Wow. Very nice example. Amazing.
regards
Umalo

3

Montag, 8. Juni 2015, 00:35

Excellent. Thanks for the example *thumbsup*

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?

5

Donnerstag, 11. Juni 2015, 12:39

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);"

6

Donnerstag, 11. Juni 2015, 13:00

Thanks Milemann :)

7

Montag, 17. August 2015, 20:03

How could I add text and images to this example?

Zephyr

Profi

Beiträge: 994

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)
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

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?

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.

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!

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 023

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*
http://www.virtualtuur.com
Skype:studiotuur

benji33

Fortgeschrittener

Beiträge: 244

Wohnort: France

Beruf: Senior Software engineer

  • Nachricht senden

15

Freitag, 27. November 2015, 09:53

Thanks for this answer

16

Freitag, 18. Dezember 2015, 12:33

feedback

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

17

Montag, 28. Dezember 2015, 02:58

thanks

18

Mittwoch, 13. April 2016, 09:59

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

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

20

Donnerstag, 14. April 2016, 02:42

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!