Using React buttons/selectors to call functions created by puzzles

Tagged: #react #external_controls

This topic has 13 replies, 3 voices, and was last updated 1 year, 2 months ago by bigmike814.

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

Author

Posts
2023-02-02 at 7:58 pm #60116

bigmike814
Customer

Hello,

I’m getting close to completing the proof of concept for the configurator I’m building and would like to build the website using React. Using the React/Vue tutorial, I was able to create the app that displays the 3D window, but cannot get any of the controls I’ve tested to call functions from the visual_logic.

There is slim to nothing as far as information on it, so this is my last resort.

What I’d like to know is, is this possible (as it seems the only external controls I’ve gotten to work are HTML elements) without the devkit and rewriting the application parameters? And if so, if anyone has any hint. Even if not using react, but able to call the puzzle function from Javascript.

I am new to all of this: Blender, Javascript, everything. So it could be a simple fix, but it’s really easy to get thick into the weeds when there is no path to follow. I’ve managed to figure everything else out, but hit a wall about two weeks ago and can use a favor.

Thanks in advance!

2023-02-03 at 7:02 am #60117

Yuri Kovelenov
Staff

bigmike814 wrote:

Even if not using react, but able to call the puzzle function from Javascript.

Sure! Here you go: https://www.soft8soft.com/docs/manual/en/puzzles/Procedures.html#calling_procedures_javascript

Chief 3D Verger | LinkedIn | Twitter

2023-02-03 at 1:57 pm #60124

bigmike814
Customer

Yuri, I tried the sticking the tag in the button to test and it still isn’t working. <button onclick=puzzles.procedures[‘lw_1’]();> testing</button>

I may have used the wrong terminology in the original post: what I am trying to do is create buttons that use javascript to call the functions that are in the visual logic.

I would be willing to pay you if there’s a possibility that we could zoom and find a solution. I’d also be happy to let your share my website as an example of someone with zero experience can do with this software.

Here’s the link to my project as stands. This is just the proof of concept. I will clean it up once I can crack the rest of the code. https://v3d.net/eru

2023-02-05 at 1:10 am #60144

kdv
Participant

duplicate deleted

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-02-05 at 1:32 am #60145

kdv
Participant

duplicate deleted

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-02-05 at 2:27 am #60147

kdv
Participant

duplicate deleted

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-02-05 at 2:29 am #60149

kdv
Participant

puzzles.procedures is nothing, null, undefined. If you want to get an access to v3d procedures use v3d.puzzles.procedures. If your app is in an iframe than you can get an acces to procedures this way
window[0].v3d.puzzles.procedures (supossing you have only one iframe. otherwise the number inside [] can be different)

And when something goes wrong press F12 and see the console log.
You can type window[0].v3d.puzzles.procedures['lw_1'](); or window[0].v3d.puzzles.procedures.lw_1(); in the console, press Enter and see your procedure working.

bigmike814 wrote:

I would be willing to pay you if there’s a possibility that we could zoom and find a solution.

The solution is found

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-02-05 at 6:55 pm #60156

bigmike814
Customer

I never even thought of looking at how the iframe is being called from the app.Let me give it a shot.

2023-02-05 at 7:08 pm #60157

kdv
Participant

And you’re definitly doing something wrong when modelling and writing the app’s logic via puzzles…

Attachments:
You must be logged in to view attached files.
Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-02-05 at 7:25 pm #60160

bigmike814
Customer

KDV, you’re my hero. It works.

I know the modeling could be better. I’m not as worried about my lack of technique when it comes to that, as my brother-in-law is a professional graphics artist and he is going to help me clean it up. I’m just trying to get the proof of concept before I spend days working on the final product.

But I’m curious, is it the PBR’s that look like crap, or what?

2023-02-05 at 7:38 pm #60161

kdv
Participant

I don’t know why your model looks that way. Play with material parameters. What I see is that your site logic won’t work properly with such errors )))

jquery doesn’t work

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-02-05 at 7:49 pm #60163

bigmike814
Customer

yeah, that’s from the accordion I pulled off codepen. I’m ditching all of that. The actual accordion works when I run it on the app, but for some reason it fails when uploaded to the cloud.

I still have a LOT to learn, but you’ve really helped me out a lot. Much appreciated!

2023-02-05 at 7:52 pm #60164

kdv
Participant

External scripts/files must be requested over HTTPS if the main page is loaded over HTTPS. Otherwise they will be blocked.

And remove this line from my_test.js
object.addEventListener("click", puzzles.procedures.addEventListener['lw_2']());

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2023-02-05 at 9:00 pm #60166

bigmike814
Customer

lol yeah, that’s just me going on tutorial websites and trying whatever I could to get it to work. Obviously nothing worked until you helped out. Thanks again!
Author

Posts