basic website

[Amith225]

A Two page website with 4 main contents:

Page 1:

1. Image: must be able to receive a js array and display it whenever its called
2. Dock Primary:
   • Appropriate inputs and defaults for frequency(32 > int > 1), wavelength(float > 0), ~_range(tuple of 2 floats)~ etc...
   • These will contain all the parameters of Noise class
   • whenever input changes, should call appropriate method
3. Dock Secondary:
   • This will contain appropriate drop down menus, selection menus etc, for Gradient and LinearColorGradient classes
   • whenever a selection or a parameter changes, should call appropriate method

Page2:

4. Info Page:
   • No specification, can include all docs organized, showing usage as gifs, images etc
   • Creative liberty can be taken

for initial commits / PRs, the python runtime connection need not be implemented, but placeholders can be created.

to be accepted for PR, Page1 (1, 2, 3) must be implemented or Page2 (4) must be implemented

[Divyansh-0]

So you need a website which serves as a replacement of the current GUI??

[Amith225]

@Divyansh-0 yes

[Divyansh-0]

Okk i will try and replicate the features but i have never integrated a python app to a webpage

[Amith225]

for initial commits / PRs, the python runtime connection need not be implemented, but placeholders can be created.

@Divyansh-0 But if you're interested you can look into pyodide, and use PyLink component from here

[Amith225]

@Divyansh-0 do you want me to assign this issue to you?

[Divyansh-0]

Yeah

[Divyansh-0]

i didn't get what u want in dock secondary. Also i saw Your image code in the repo u shared why are You not using that??

[Amith225]

i didn't get what u want in dock secondary

if u look at Warp, Gradient, LinearColorGradient in selectionTools.py, they have @classmethods which can be used as predefined options. All those options should be made available for selecting(dropdown menu?)

[Amith225]

Also i saw Your image code in the repo u shared why are You not using that?

if u mean DImg component, yes it converts arrays to image, but its not well optimized

[Divyansh-0]

I get that part i have to store those changed values and then where should i transfer them??

[Divyansh-0]

if u mean DImg component, yes it converts arrays to image, but its not well optimized

U want it to be fast or leaner??

[Amith225]

where should i transfer them??

u can have a place-holder method which gets called whenever the state changes for now, latter it can make an API call to python runtime to change settings

[Amith225]

U want it to be fast or leaner??

fast would be good, but not the rule. you can improve upon DImg

[Divyansh-0]

where should i transfer them??

u can have a place-holder method which gets called whenever the state changes for now, latter it can make an API call to python runtime to change settings

For state change detection u can just use useState hook it would it ll return the current state. Also what is a place-holder method never heard of it in state management context of react

[Divyansh-0]

U want it to be fast or leaner??

fast would be good, but not the rule. you can improve upon DImg

So the logic has complications??

[Amith225]

so here's what the API would be like, pyodide will run a python script when component mounts, it will have a noise instance created and send an array to be shown, now whenever Primary Dock parameters is changed by user, it will call a function in js specifying the change, which intern will call the noise.set<method> and again new noise values will be sent for display.

Secondary Dock does a very similar thing, but instead of change the noise parameters, it will ask for new gradient and color, which is again handled by the python script

the only thing js has to do is invoke python functions using pyodide, which will return an array to be displayed

[Amith225]

So the logic has complications??

no not really, there might be small adjustments to be made.

[Amith225]

i will commit the python script by today, so that you have a better idea.

for now just have a empty method which just console logs the change, and renders a random image

[Divyansh-0]

so here's what the API would be like, pyodide will run a python script when component mounts, it will have a noise instance created and send an array to be shown, now whenever Primary Dock parameters is changed by user, it will call a function in js specifying the change, which intern will call the noise.set<method> and again new noise values will be sent for display.

Secondary Dock does a very similar thing, but instead of change the noise parameters, it will ask for new gradient and color, which is again handled by the python script

the only thing js has to do is invoke python functions using pyodide, which will return an array to be displayed

So basically You want to track the changes in the input fields and then user for instance presses a button then make an api call to transfer the newly collected params then py script does the work

[Amith225]

For state change detection u can just use useState hook it would it ll return the current state. Also what is a place-holder method never heard of it in state management context of react.

no by placeholder i mean a function which doesn't do anything, it's just used for latter sake. it's a simple js function

[Divyansh-0]

So the logic has complications??

no not really, there might be small adjustments to

For state change detection u can just use useState hook it would it ll return the current state. Also what is a place-holder method never heard of it in state management context of react.

no by placeholder i mean a function which doesn't do anything, it's just used for latter sake. it's a simple js function

Ok i thought there are placeholder methods in Tenserflow and all . So i thought i might not be updated about React

[Divyansh-0]

i will commit the python script by today, so that you have a better idea.

for now just have a empty method which just console logs the change, and renders a random image

Ook

[Amith225]

So basically You want to track the changes in the input fields and then user for instance presses a button then make an api call to transfer the newly collected params then py script does the work

yes spot on, but introduce some delay to the call, so its invoked only after user has made their desired change, we dont want to spam new request for every value the slider moves

[Divyansh-0]

So basically You want to track the changes in the input fields and then user for instance presses a button then make an api call to transfer the newly collected params then py script does the work

yes spot on, but introduce some delay to the call, so its invoked only after user has made their desired change, we dont want to spam new request for every value the slider moves

Thats what i was thinking that u should have a second confirmation by a button or something

[Divyansh-0]

Or a timeout maybe??

[Amith225]

Or a timeout maybe??

yes

[Divyansh-0]

Ok i will in the first draft have a button to apply changes see how it goes and then re-configure it

[Divyansh-0]

Do you want me to create a repo for the website so that you can see how will it look before i do a PR ??

[Divyansh-0]

ALso u need a double range slider for range??

[Amith225]

fork this repo, make your changes there, and then do a PR

[Amith225]

ALso u need a double range slider for range??

i think there is no need for range slider, as it won't be displayed anywhere

[Divyansh-0]

ALso u need a double range slider for range??

i think there is no need for range slider, as it won't be displayed anywhere

You mentioned in point 1 of dock 1st that u need a range which accepts two params

[Divyansh-0]

Also i will PR the dock primary first U can suggest changes then i can make changes to both primary and secondary docks

[Amith225]

You mentioned in point 1 of dock 1st that u need a range which accepts two params

right ignore it, no need for range, implement other parameters

[Amith225]

@Divyansh-0 PR to 19-basic-website branch not master

[Divyansh-0]

OK

[Amith225]

@Divyansh-0 is it possible to host your files to vercel or some other place, to see the website?

[Divyansh-0]

@Divyansh-0 is it possible to host your files to vercel or some other place, to see the website

ok i will host on netlify with ur image section then i can keep making changes and u can see them

[Divyansh-0]

Also u should update contribution guidelines docs

[Amith225]

Also u should update contribution guidelines docs

yes ik, but i am busy for few days, it will be done soon

[Divyansh-0]

https://63516c06886e1c581b8d1596--neon-daifuku-86d25e.netlify.app/ check this

[Divyansh-0]

Tell me the changes i will fix tmrw And let me know the theme You want to go for the webpage then It will be good for styling

[Amith225]

@Divyansh-0, Warp should be a drop down menu of Warp options (see selectionTools.py), waveLength should be an input of say step 128. And after Apply change is pressed all the values change, it should be visible all the time

[Divyansh-0]

Ok that input fields i will fix . For the apply change you dont want it to go back to original state??

[Divyansh-0]

Warp will take a N- dimensional array?? and a nested array ??

[Amith225]

Warp is a class, it has different options, to choose from, see selectionTools.py, the options are the classmethods

[Amith225]

Ok that input fields i will fix . For the apply change you dont want it to go back to original state??

no it should be visible what the selected parameters are, you can disable the div, and enable it back when user clicks edit

[Divyansh-0]

Ok that input fields i will fix . For the apply change you dont want it to go back to original state??

no it should be visible what the selected parameters are, you can disable the div, and enable it back when user clicks edit

Ok you want it to be visible all the time not only when the user edit??

[Divyansh-0]

Ok that input fields i will fix . For the apply change you dont want it to go back to original state??

no it should be visible what the selected parameters are, you can disable the div, and enable it back when user clicks edit

Ok you want it to be visible all the time not only when the user edit??

Sorry can you explain it clearly I can't get what you want ?

[Divyansh-0]

Warp is a class, it has different options, to choose from, see selectionTools.py, the options are the classmethods

Like the lerp cosine cubic and all?? You want separate fields for them ??