We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Pop up iframe within Application

Home › Forums › Puzzles › Pop up iframe within Application

Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Author
    Posts
  • 2021-05-15 at 9:02 am #41036
    jdhutchinson
    Customer

    Hi Verge3D Users!

    I want to use Puzzles on-click event for annotation objects to load up a 80% x 80% iframe with a link to a Matterport photogrametry tour. Can anybody advise how I would structure this logic?

    I will be usig the Verge3D advice of a styled index.html with the html V3D app embedded, and I’m wondering if i create a third html which is shown on click? The iframe src will be different depending on the clicked annotation (the annotations will point to different parts of the tour).

    I have also seen fancybox library which might show promise – although I don’t know if its a true iframe. Maybe there’s another library I should try importing.

    Application is intended for touchscreen, authoring in Blender.

    edit: I think an accurate description for this is a ‘modal’ window.

    2021-05-17 at 6:50 pm #41066
    jdhutchinson
    Customer

    I can see a similarity to the Industrial Robot example which has a pop up modal window for the ‘help’ which appears on screen.

    Is there anybody that can help discuss this with me please? I can see that the dsiplay:none and display:block are the CSS properties I need to make use of, I think.

    2021-05-18 at 6:51 am #41073
    Mikhail Luzyanin
    Staff

    You just need to create a a HTML element using Webflow or any other HTML editor or make it by hands in text editor then just use Set Style puzzle to change it’s display prop.

    Co-founder and lead graphics specialist at Soft8Soft.

    2021-05-18 at 9:06 am #41080
    jdhutchinson
    Customer

    Thank you Mikhail! How can I add the functionality for a single button to toggle that display property?

    I also used visibility property with hidden/visible, I’m wondering which is best for the optimised result?

    Eventually, these pop up models will be associated to annotations and point to unique urls. I need also some way that when the display goes back to none, that the iframe will be refreshed next time it is opened. So, in the example of the video, each time the iframe window is opened it would need to start the video from the beginning. Maybe there is some sort of reset property?

    I’m currently using Webflow, and it is working really well for me already.

    2021-05-19 at 6:56 am #41088
    Mikhail Luzyanin
    Staff
    jdhutchinson wrote:

    How can I add the functionality for a single button to toggle that display property?

    You need to use HTML Event On Click puzzle for that.

    jdhutchinson wrote:

    I also used visibility property with hidden/visible, I’m wondering which is best for the optimised result?

    They do the same with little difference. Some explanation can be found in the internet.

    jdhutchinson wrote:

    So, in the example of the video, each time the iframe window is opened it would need to start the video from the beginning. Maybe there is some sort of reset property?

    If you need to return your html element to default state but you made changes of it’s text, color or something else you will need manually change the text, color or anything else again with proper puzzles. Do not know about a video, leave this question here may be somebody else can help you.

    Co-founder and lead graphics specialist at Soft8Soft.

    2021-05-19 at 12:40 pm #41122
    jdhutchinson
    Customer

    Hi Mikhail, thanks again for your support!

    Regarding On Event, is there a good way to toggle? For the time being I have made it somewhat functional.

    Regarding display, what I am reading is that once it is set to ‘none’ there is no way the element (the div block which contains the iframe in this case) can be returned to the document. Does this sound right to you? I.e. I can go from Block to None, but not None to Block.

    Regarding the iframe, I think the best I can perhaps to is maybe set the source of the iframe to be blank upon the iframe being closed, with puzzles. Using:

    set prop “src” to – for elem –

    Attachments:
    You must be logged in to view attached files.
    2021-05-19 at 12:44 pm #41124
    Mikhail Luzyanin
    Staff

    You need to create an If condition with a special variable to detect is it hidden or not.

    Co-founder and lead graphics specialist at Soft8Soft.

    2021-05-19 at 3:18 pm #41134
    trelobyte
    Participant

    Hi, a working example of this would be great. This is something I am trying to achieve as well with not much luck.
    Many Thanks

    2021-05-19 at 4:51 pm #41138
    jdhutchinson
    Customer

    I’ll have to try this again. This is what I initially attempted as this is the convenient logic.


    @trelobyte    , I will forward a gif and puzzles to you. I’m new to Verge3D as a modeller and only part time programmer (basic python and learning html/css through webflow) so I’m happy to show my exploits!

    2021-05-19 at 5:05 pm #41140
    trelobyte
    Participant

    This would be very very kind of you thank you!
    What I am trying to do is have the annotations open an iframe which shows the virtual tour based on krpano viewer.
    A similar functionality project is this one.
    https://kroscloud.com/3d/landstejn-castle/3Wz9

    2021-05-19 at 5:26 pm #41143
    jdhutchinson
    Customer

    Hi Mikhail,

    Also, in basic cases as the attached, is it necessary for me to disable these puzzles before I fully implement them? For the purposes of proper debugging.

    See in the image I have made the three different ‘src’ properties I will set to at different moments. Do these ‘run’ without a ‘Do’ action beside them? I am assuming not.

    Attachments:
    You must be logged in to view attached files.
    2021-05-19 at 8:28 pm #41153
    jdhutchinson
    Customer

    Wow! That’s really nice. Did they use V3D?

    I see they useda display: none property. But, they were able to show it again. So I think my mistake must be not putting the right display value back (i.e. not just Block, but whatever the correct display state is.)

    2021-05-20 at 6:37 am #41161
    Mikhail Luzyanin
    Staff
    jdhutchinson wrote:

    See in the image I have made the three different ‘src’ properties I will set to at different moments. Do these ‘run’ without a ‘Do’ action beside them? I am assuming not.

    You need to put them in any Event otherwise they will run on app start.

    Co-founder and lead graphics specialist at Soft8Soft.

    2021-05-23 at 4:27 pm #41269
    jdhutchinson
    Customer

    Thanks Mikhail. That makes sense to me.

    The next issue I’m coming up against is amending the iframe src attribute depending on which iframe is clicked. Alterntaively, I make iframes for each internal tour, however this means I have to have a div in my webflow for every single tour.

    I tried the set src puzzle, but I must not be referencing the src attribute correctly via element id.

    Attachments:
    You must be logged in to view attached files.
    2021-06-08 at 11:56 am #41931
    trelobyte
    Participant

    @jdhutchinson did you get the pop up iframe working ?
    is it possible to share an example ?
    Many thanks

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • You must be logged in to reply to this topic.