You are not logged in.

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.

riefa

Beginner

  • "riefa" started this thread

Posts: 25

Location: Jakarta, Indonesia

Occupation: VR Photographer

  • Send private message

1

Wednesday, January 15th 2014, 4:19pm

How to create pop up window using a button?

Hello :)

I am trying to incorporate an "Info Button" on my virtual tour skin, which will have to behave like this:

  • The button will be placed near the navigation buttons, or on the far left/right before the thumbnail button / hide toolbar button.
  • When clicked, it has to show a pop-up window, displaying information about the currently displayed scene
  • When the scene changed and the same info button is clicked, the information should also change in relation to the respective scene.

How can I create that kind of info button?

And also, where should the information regarding each scene is stored? Do I have to create a .png files for each scene, or is it possible to put the information of each scene somewhere in the xml files and then call it each time the "info button" clicked?
I want the pop-up window to be black transparent background and the information is using a white text, is this possible to create without having to create images (containing description) for each scene?

This is the link to the virtual tour i want to have the info button: http://www.idvr360.com/client/umn/final/

I don't understand coding very well, so an example would be very helpful :)

Thank you :)
Cheers,
Riefa Istamar
www.idVR360.com

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

2

Wednesday, January 15th 2014, 6:58pm

- Define additional textfield element similar like you already have to show title name above the buttons.
- Size it, position e.g. center and color as needed.
- Add new attribute in your scene definition e.g. info_text="This panorma presents........."
- When loaded set html of this new plugin reading this new attbibute info_text
- Add new button in your GUI that will toggle visibility of you plugin.
(Still not sure this will be nice and easy but can be done. I would still prefere some image based info per scene. Similar as above than not needed textfield but regular image plugin e.g. change url of the info_image for each scene)

Try exploring your code, examples and try by your self.

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

3

Wednesday, January 15th 2014, 8:25pm

Some help you can also see here: Link
It displays image based info box onstart of scene. With small code adaptation it can works for you too ;) Try

riefa

Beginner

  • "riefa" started this thread

Posts: 25

Location: Jakarta, Indonesia

Occupation: VR Photographer

  • Send private message

4

Thursday, January 16th 2014, 6:35am

Hello Umalo,

thank you for your reply :)

I have (finally :p) able to incorporate your code so it can work with the info button :D

You can see the result here: http://www.idvr360.com/client/umn/final/

It is still using the blue info box from your example, but now I just need to create a new info box which suite my clients taste..:)

Now, another questions related to code at my tour skin (www.idvr360.com/client/umn/final/skin/vtourskin.xml ):
  • To close the info box, user need to click / tap the X button. Is it possible that user can click / anywhere inside the box to close it? What code and where should I put the code? :)
  • I want the info button to be visible when viewing on iOS device. Currently, it is visible, but I can't fide which code to change to make it displayed correctly. I have made some changes at <krpano devices="mobile"> section for alternative layout but the button don't change position.

    Source code

    1
    
    <layer name="skin_btn_info"   scale="1" y="0" align="left" x="380" />
    Any clue?


Thank you :)
Cheers,
Riefa Istamar
www.idVR360.com

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

5

Thursday, January 16th 2014, 10:00pm

Adapt this in info_box plugin:

Source code

1
onclick="set(plugin[info_box].visible,false);"

and

Source code

1
handcursor="true"

if you want info_box also to capture onclick event and close them self with his child. But than you don't need this x as separate image and elements as whole image will be responsive to onclick.

Try with ipad simulator to test in iphone view to see how your code for <krpano devices="mobile"> is set.