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

replace texture with external file, based on element content in parent doc

Home › Forums › Puzzles › replace texture with external file, based on element content in parent doc

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • 2020-05-23 at 5:52 pm #27941
    swatchyb
    Customer

    probably an easy one:
    getting started on my first project, and would like to replace a texture in a given material for an object every time the user selects from elements in the parent document. I am assuming that the “replace texture” puzzle is the right start, and I have “flexible texture input” checked. But the value in the “with” would need to use the value of a populated element in the parent doc – the same element (inp_mat1) that the puzzle is listening for a change (?). There are 100’s of possible textures, and they are located outside of the v3d part of the app, so have to be referenced externally and loaded as needed. Annotated puzzle below and suggestions appreciated.

    2020-05-23 at 11:18 pm #27943
    swatchyb
    Customer

    never mind, think I got it using with – get attr value from elem “inp_mat1” in parent.
    I am sure there will be other questions…

    2020-05-24 at 4:55 am #27947
    Yuri Kovelenov
    Staff

    :good:

    Chief 3D Verger | LinkedIn | Twitter

    2020-05-28 at 2:19 pm #28136
    swatchyb
    Customer

    Hi again. continuing on the above…
    SO close to this working beautifully, but have one snag.
    In the parent doc, when a fabric/ material is selected it sets a session variable which in turn populates (dynamic attr) an input (mat1) with the url of the new texture. However, Verge does not respond to that input unless I manually place the cursor in the input and add a space (which seems) to wake up the listener in a way that just programmatically setting the value does not.
    Any suggestions on how to give it a kick?
    Thanks very much again!

    (ps had put the input in a form and submit, which works, but of course refreshes iframe too :-/
    also, everything works on manual entry – the console shows it is listening as I type a value)

    2020-05-29 at 8:54 am #28165
    Ivan Lyubovnikov
    Staff

    Hi,

    If the input’s value is set somehow via js, then it doesn’t automatically trigger the “input” event which you use in the puzzles.

    To fix that you can trigger the event explicitly in the code right after the input’s value is changed (i.e. the place where it’s set dynamically from that session variable you mentioned), it should be something like this:

    
myInput.dispatchEvent(new Event('input'));

    (replace myInput with the actual name of the variable that holds the input element).

    Co-founder and lead developer at Soft8Soft.

    2020-05-29 at 5:06 pm #28172
    swatchyb
    Customer

    MAGIC!
    thank you Ivan – this is so cool. that little bit of js opened the gate to the rest of the exciting project.
    thanks again!

    2020-06-07 at 9:15 pm #28499
    swatchyb
    Customer

    Hi Ivan and Yuri,
    This was working well, but unfortunately the compexity and diversity of items I need to configure made setting session vars (20-30 simultaneous) and putting them in text inputs, clumsy. To really make things dynamic, I am trying to use a query/table of fields in the parent, that dynamically change the id, name and value on loading, with v3d listening for those id’s. On the DOM/html side, this seems to be working.

    for example:
    id name value
    inp_mat1 mat1 ../../assets/media/MAT/CreamBasic.jpg
    inp_mat2 mat2 ../../assets/media/MAT/StoneLace.jpg
    inp_mat3 mat3 ../../assets/media/MAT/TanLace.jpg
    inp_mat4 mat4 ../../assets/media/MAT/BlueLace.jpg

    The problem is that now we are back to v3d only reacting when a space is manually added to a field after load or change despite using the dispatchEvent that you offered and that worked when everything was static (names and id’s).

    <input dmx-bind:id=”Dyn_MAT_id”
    dmx-bind:name=”Dyn_MAT_name”
    type=”text” class=”form-control”
    dmx-bind:value=”MAT_repeat_url”
    onupdated=”Dyn_MAT_id.dispatchEvent(new Event(‘input’));”>

    My coding “coach” gave a try adding a script to help, and diagnose, but with no luck.
    <script>
    function updateInput(elString) {
    console.log(elString);
    var el = document.getElementById(elString);
    console.log(el);
    el.dispatchEvent(new Event(‘input’));
    }
    </script>

    I thought it might be a sequence of events thing – that the html had to load before v3d, so that the id’s would be in place, but it also does not see them in an unload/load to replace (gltf’s) scenario, so not sure that is it.

    As well, sometimes the dynamically/externally referenced gftl’s load on initial launch, and other times they do not. Attached is an example of a console message if that helps.

    Any suggestions very appreciated. /sb

    2020-06-08 at 1:11 am #28509
    swatchyb
    Customer

    another error message with hope that it is helpful.
    thanks!

    2020-06-10 at 12:41 am #28595
    swatchyb
    Customer

    sorry to bug you guys on this, but hoping you could give some direction as to how to approach this, or even if you think it is outside of v3d. My developer is very experienced, and believes that it is just something that v3d is not picking up. Again, the strangest thing is that it loads properly about 1 in 10 times on (with dymamic id’s) and, changes (material texture replace, or gltf unload load (to replace a part)) work only by manually adding a space to the input, even with the dispatch.
    With thanks in advance for your help.
    /sb

    2020-06-11 at 11:06 am #28713
    Ivan Lyubovnikov
    Staff

    Hi swatchyb,

    Just to be sure, do your puzzles listen to the same ids that you change dynamically in the application? I suppose that they do, otherwise they wouldn’t work at all even after adding spaces manually. I guess, you added several “on event of …” puzzles each with their corresponding id to make v3d react to all of them.

    swatchyb wrote:

    <input dmx-bind:id=”Dyn_MAT_id”
    dmx-bind:name=”Dyn_MAT_name”
    type=”text” class=”form-control”
    dmx-bind:value=”MAT_repeat_url”
    onupdated=”Dyn_MAT_id.dispatchEvent(new Event(‘input’));”>

    If I understand correctly, after changing the “Dyn_MAT_id” variable the input calls its “onupdated” method. So, have you tried calling that “updateInput” debug function you mentioned to see what’s going on? For example like this:

    
<input dmx-bind:id=”Dyn_MAT_id”
dmx-bind:name=”Dyn_MAT_name”
type=”text” class=”form-control”
dmx-bind:value=”MAT_repeat_url”
onupdated=”updateInput(Dyn_MAT_id);”>

    If all goes well, it should print the current id and the input element in the browser console.

    Regarding the error screenshots, the first error saying about “ProgressEvent” indicates that you tried to load a non-existent url and the server just returned 404.
    The second error “Unexpected token < …” can happen if you try to load a non-existent url, but the server redirected you to some html file instead. Either way there’s something wrong with gltf urls. It’s better to check if they are valid or not.

    Co-founder and lead developer at Soft8Soft.

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