Broad advice on Rescript/React possibilities; also Reprocessing

1

I’ve written a Reprocessing program using ReScript; it’s mostly gone OK so far.

I’d now like to do several more things, in increasing order of difficulty

  1. Put my program into a web page so that others can play with it. I haven’t yet been able to figure out how to do this within React (see below).

  2. The program is a kind of drawing tool made for laser-cutting plywood, and there are a few parameters like “How big should the drawing canvas be?” and “How thick is the plywood you’re using” that I currently set as globals at the top of my ReProcessing program because, as with many programs, this was supposed to be just a one-off thing. :frowning: Is there a way to take a user-provided value from another component and have it become a usable value within my ReProcessing program? I’m imagining something like a dropdown of plywood-thicknesses, for instance. I can probably handle making a dropdown and getting a “prop” from it…but will my ReProcessing program be able to access that somehow?

  3. The end result of the current ReProcessing program is a string (the text of an SVG file) that gets written to a file, but I’d really like to have this be downloadable from the web page. I was thinking I could use [download.js] (download.js) with the string as its argument to do this, but I can’t figure out how to call a “script” function like this from within my ReScript/React structure.

I’m incredibly naive about the structure of modern web applications, so I’ve been following along with (and making guesses about the updated names in a few cases) the stuff presented here, and here without really understanding everything that’s going on. So I’ve got a spinning logo, and even an increment-decrement counter from bobzhang’s example, and I’m beginning to get the big picture.

What I’d like is some advice about whether the things I’m hoping to do are even possible, and if so, any pointers/advice about them.

Thanks in advance.

2

yes, it’s possible. Just get the parameters on a react Form, then call your code with those values and plot the result inside another react component. You have the hard par done already (the calculations). Now just put a nice UI around

3

Thanks. Most of the words you used are still not entirely in my vocabulary, but I’ll go try to make sense of them.

You say “call your code with those values,” but this suggests to me that you might not have programmed using ReProcessing. If you look at the example code here,
you’ll see that the run procedure that gets things started doesn’t accept any external parameters in any way that seems obvious to me. For instance, if I wanted to have the program work in a 200 x k window, where k could be 200, 220, …, 300, it’s not clear to me how the rest of a page could alter k. Also…once a reProcessing program starts to run, the draw procedure gets called repeatedly, forever. I’m not certain how nicely that would play with the rest of the React structure.

4

OK, sorry. I have no experience with the library you mentioned. I just took for granted that you were doing some calculations that were generating svg values and you named it like that. Sorry, I can’t help with this particular thing

5

For number 2, have a look at React Context

Edit: after re-reading your post I’m not sure this is actually a solution for you. It might help if you could share some of your code?

6

I’ll try to do so tomorrow…

7

Actually, I’ve just discovered this, which seem to do all the things I need (turns out you need a "viewport’ and something with web-gl, and various other stuff that I’ll just copy and try to understand as I go along… further updates (with minimal code) as I make progress.