Hiding an Object using an HTML button

Home Forums Programming Hiding an Object using an HTML button

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #23513
    jstubbjstubb
    Newbie

    Hello,

    I am currently attempting to program a simple, scalable interaction between clicking an HTML button on screen which hides an object in the Verge3d iframe.

    I am fairly new to javascript and have read through the documentation surrounding calling JS functions from Puzzles and calling Puzzles from JS multiple times but the solution to my issue is still not evident to me.

    The following code runs as expect when placed inside the runCode() section of my application javascript file:

    v3d.puzzles.procedures.hide()

    However, I am unsure how to create a function that can be referenced in a separate javascript file.

    The ideal flow would be:
    User presses html button -> calls onclick -> onclick calls a function in a separate JS file -> script file calls hide function in application JS file -> object is hidden via puzzles

    I realize this process is a bit tedious but it must be for this workflow to be useful to my application.

    Any advice or suggestions would be much appreciated.

    • This topic was modified 1 week ago by jstubbjstubb.
    #23522
    Yuri KovelenovYuri Kovelenov
    Developer

    Hi,

    script file calls hide function in application JS file

    Yes you can do that, but you need to make this function global to be accessed from outside.
    E.g.

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23541
    jstubbjstubb
    Newbie

    Hello Yuri,

    Thank you for your response. I have written the code you detailed in the application javascript file just below the auto-generated runCode() function.

    I can now successfully call the myFunction() from my script file however I still receive an error when attempting to call: v3d.puzzles.procedures.hide()

    The error states the following:
    Uncaught TypeError: v3d.puzzles.procedures.hide is not a function

    This error exists despite runCode() running the above function and hiding the object successfully when the model loads.

    Any idea what may be the cause of this issue?

    #23551
    Yuri KovelenovYuri Kovelenov
    Developer

    Hi,

    The runCode() function works because the call to puzzles must be performed after the visual_logic.js file is loaded. May be you are calling your function prematurely?

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23569
    jstubbjstubb
    Newbie

    Hello,

    This is unlikely to be the cause of the issue because the hide function that I am using is set to hide and then show a target object a couple of seconds later. I only attempt to test this function with the button after runCode() has run the function and the object has reappeared.

    Would there be another way to test this function to help troubleshoot the issue?

    #23578
    Yuri KovelenovYuri Kovelenov
    Developer

    If you try triggering the puzzles function via browser console, will it work?

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23656
    jstubbjstubb
    Newbie

    Calling the function from the console works when I host the application html file but it does not work when I attempt to call the function while hosting my index.html file. Instead, it returns the following error:

    NOTE: I am uncertain if this is absolutely relevant/ necessary but the index.html does contain all of the local script files via the <script> tag.

    #23665
    Yuri KovelenovYuri Kovelenov
    Developer

    When you save your Puzzles, it generates a js file called visual_logic.js. Can you check if the “hide” procedure is in this file? This file is loaded by your_app.html file (there is special code in your_app.js for that).

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23692
    jstubbjstubb
    Newbie

    The function appears in the visual_logic.js file as follows:

    It is also referred to in the same file in the following statement (not sure if relevant):
    this.procedures["hide"] = hide;

    #23693
    Yuri KovelenovYuri Kovelenov
    Developer

    Looks like this function is in place. I wonder if visual_logic.js is loaded. Do your other Puzzles work? E.g. make some animation or shift an object with timer – will it work?

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23695
    jstubbjstubb
    Newbie

    I do have some puzzles that hide an object when the particular object is clicked. They are working as intended inside the iframe.

    #23709
    Yuri KovelenovYuri Kovelenov
    Developer

    can you temporarily upload your app to Verge3D Network and post here the link? We’d take a look

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23788
    jstubbjstubb
    Newbie

    I have submitted many responses with the links but none of them seem to be posting despite the forum thread posts indicating I have made an edit to this thread. I will check later to see if this changes. :unsure:

    Edit: I have attempted to make another submission with only the links and it is not going through. Is there another way to post them?

    Edit 2: I also attempted to upload a .txt file with the links written and that has not uploaded correctly and any attempt to add links to this response via edit simply deletes the response. :wacko:

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.