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.

annotation box and annotation dialog box

Home Forums General Questions annotation box and annotation dialog box

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #14340
    bipin rawat
    Participant

    how to put a close button in annotation dialog box.

    attached a reference image.

    #14355
    bipin rawat
    Participant

    Hi

    Any update on this?

    i am still struggling to find this solution.

    thanks
    Bipin

    #14415

    Hi,

    the stock annotation may be too simplistic to implement that close button feature. However, you can add your own HTML element to the app and make it behave as an annotation using bind element puzzle

    Chief 3D Verger | LinkedIn | Twitter

    #14418
    Crunch
    Customer

    bipin, it might seem overwhelming but you are going to need to learn the basics of html and CSS.
    I would recommend https://www.w3schools.com

    I stuck with it for the past few weeks and its paying off. Here is a quick demo of what I think you are trying to do

    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:e22b7f5039/applications/anndemo/anndemo.html

    Click on the cube to bring up a custom html element, the X button will close it.

    1.) Go over to the initiation tab (not the main tab*, I have found it best that if I am going to create any HTML elements via Verge3d app it is wise to create them in initit tab versus on the fly in the main tab. Tip: If you don’t want the html element(s) to appear on startup without any user interaction, set the display type to “none”.

    2) add a new html div element (see the screen shot)
    3) set the innerhtml tag to this (cut and paste what is below into field)

    <button id=”xcloseybutton”style=”float:right””>×</button> <h3>The Popup Annotation </h3><p> This is where you can add a much more robost annotation using custom HTML! </p>

    4) give the element a name (“alittlewindow” in this example)
    5)set the display style to “none” (this makes it hidden when you first launch app)
    6) in the main puzzles window… see the attached screen shot.

    A couple of pointers, the “&times” text in the button field is actually a code for an “x” symbol.. you can read up on this on the web https://wesbos.com/times-html-entity-close-button/

    The background color is “rgba(201, 76, 76, 0.3)’, that last number, the “.3”, is the opacity. Experiment with changing around the values .. it helps you learn. All of this looked like it was written in Greek to me when I first started learning Verge3d a few months ago. Now I am figuring things out and its getting really fun. Good luck!

    #14420
    bipin rawat
    Participant

    Thanks a lot Crunch.

    exactly i want to do this.

    can you also attach the file of this.
    it will be a great help.

    #14422

    @Crunch Awesome explanation! thanks a lot for helping out!

    Chief 3D Verger | LinkedIn | Twitter

    #14429
    Crunch
    Customer

    opps, mistake in my post above, below is what you should paste into the innerhtml field.

    <div style="background-color: rgba(201, 76, 76, 0.3); width:400px; height:100px; border: 2px solid red; border-radius: 5px;"><button id="xcloseybutton"style="float:right"">&times;</button> <h3>The Popup Annotation </h3><p> This is where you can add a much more robost annotation using custom HTML! </p> </div>

    bpin, i already deleted the source files, sorry– but its just the default scene with the puzzles included in screen shot. that should be all you need to re-create

    #14430
    Crunch
    Customer

    Yuri – the bind html element puzzle is blowing my mind. (in a very good way!)

    I much prefer using HTML based text in my presentations over text objects created in blender. (while on the topic, I don’t think Verge3d respects the text align feature in Blender. ie, if I type up a small text paragraph in Blender and set text align to center, it works, but once it goes into Verge3d, I lose the center alignment.. fyi, not a major big deal anymore now that I can create and format text via HTML and bind it to 3d objects in my blender scene, thanks to the bind puzzle!)

    However, how (where) exactly does it bind the html element to the 3d object?
    I was assuming the HTML element has a bounding box, and the bind function moves (snaps), say, the left corner of the element’s bounding box to the x y origin of 3d object..but after a few experiments I am not sure exactly what two points get snapped together for the bind.

    Can you please provide some explanation?
    Thanks!

    #14446

    However, how (where) exactly does it bind the html element to the 3d object?

    an element’s top left corner is used for binding it to a 3D object’s origin

    Attachments:
    You must be logged in to view attached files.

    Chief 3D Verger | LinkedIn | Twitter

    #14478
    bipin rawat
    Participant

    Hi Crunch ,

    Can i put video source there to play video in that dailog box.

    Thanks
    Bipin

    #14519
    Crunch
    Customer

    Bin the puzzle has created an Div HTML element, you can put whatever you want in there 😊

    Go to youtube, find something you like then click the share button, then select embed option. Youtube will conjure up some mark up to embed that video elsewhere, all you have to is cut and past it over into the existing “innerhtml” field in the puzzle.

    <iframe width="560" height="315" src="https://www.youtube.com/embed/TZE9gVF1QbA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Youtube video should now be playing in the annotation box.
    To get the “CLOSE X” button back, add this inside the new iframe elements so you innerhtml reads:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/TZE9gVF1QbA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><button id="xcloseybutton"style="position: fixed; top: 0; right: 0;">&times;</button>

    To spice it up a bit, make the 3d elements binded to the HTML element(s), movable by dragging. See highlighted box in puzzle attached.

    If you are watching (pressed play) video annotation and you close it out, the music from the youtube video still plays even though the div box it was in is now invisible. I will have to figure out a way to solve that.. too late right now to even attempt it. Goodluck bin

    here is link to demo
    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:e22b7f5039/applications/anndemo/anndemo.html

    #14521

    here is link to demo

    :good: :good: :good:

    Chief 3D Verger | LinkedIn | Twitter

    #14523
    Andrejus
    Participant

    :good:

    #29128
    solid
    Customer

    bpin, i already deleted the source files, sorry– but its just the default scene with the puzzles included in screen shot. that should be all you need to re-create

    Webgl Interactive Development https://www.blend3dweb.ru/

    #37949
    ocularvr
    Customer

    Mr Crunch, just want to say how grateful :) i am for the really informative tutorial. I really appreciate your enthusiasm and good vibes.
    Thank you!

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