Hiding an Object using an HTML button

Home Forums Programming Hiding an Object using an HTML button

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #23513
    jstubbjstubb
    Licensee

    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 month, 3 weeks 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
    Licensee

    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
    Licensee

    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
    Licensee

    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
    Licensee

    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
    Licensee

    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 | 新浪微博

    #23777
    jstubbjstubb
    Licensee

    Thank you for your response. I have attached the link below along with the following description of the code to help decipher the origin of the issue.

    The main index html loads the iframe for the verge3d model and also displays a button (labelled “Test Button”) with an onClick event.

    The onClick event triggers a method in the verge_node.js file. This is the custom javascript file I would like to be able to access the puzzle functions from even if it means using a global object such as window.

    The function then triggered from the verge_node.js file (window.hideTest()) is defined a couple lines below the runCode function inside N12.js. This is where the console reports the error when the button is pressed:

    `

    Other notes:
    As mentioned previously, it appears the method can be referenced from the console if the N12.html is loaded directly instead of index.html but this is not a feasible solution for my application.

    Each of the coloured balls hovering outside the box have a hide puzzle which will hide them and later make them reappear. This puzzle activates when the respective ball is clicked.

    Thanks again for all your help with this matter.

    Links: index.html-https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:57e73ecf67/applications/iframe_component/index.html

    N12.html-https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:57e73ecf67/applications/iframe_component/N12.html

    #23815
    Yuri KovelenovYuri Kovelenov
    Developer

    Hi,

    sorry for troubles with the forum. After an update, some posts are set to Pending status. We’ll figure it out.

    The hide function is seemly absent in v3d.puzzles.procedures. This may happen if puzzle were not initialised with
    v3d.PL.init(app, initOptions);
    this method should be called in your_app.js file.
    I don’t have your app sources to be certain (and we usually do not debug user applications other than under the terms of Tech support plan) but may be this hint helps.

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

    #23830
    jstubbjstubb
    Licensee

    I just investigated this possibility. I made certain that v3d.PL.init(app, initOptions); was called and logged in the console from within PL.init to ensure it was being run.

    Even after experimenting with defining the hide() function as a global function from within PL.init it still cannot be accessed elsewhere in the code.

    Any ideas?

    Even a non-optimal workaround would be beneficial :)

    • This reply was modified 1 month, 1 week ago by jstubbjstubb.
Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.