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

[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 ??

[Amith225]

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

not separate fields, a single one where you can select which method to use

[Amith225]

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

the dock should be visible always, and a button the edit, only when edit is clicked u can change the inputs, the edit button can become apply change, after changes, when apply change is clicked, change the image and freeze the Dock(but visible, you can disable pointer events in css for this), apply change again becomes -> edit

[Divyansh-0]

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

not separate fields, a single one where you can select which method to

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

not separate fields, a single one where you can select which method to use

Ok You want to take a value as a input and let user select what operation needs to be performed ??

[Divyansh-0]

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

the dock should be visible always, and a button the edit, only when edit is clicked u can change the inputs, the edit button can become apply change, after changes, when apply change is clicked, change the image and freeze the Dock(but visible, you can disable pointer events in css for this), apply change again becomes -> edit

Ok let me say this is again in points:

1. No dropdown for dock
2. Initially an edit button to allow the editing
3. Once clicked it changes to apply changes
4. Apply changes send a array to image
5. Revert the apply changes button to edit and disable editing

[Amith225]

yes

[Amith225]

Ok You want to take a value as a input and let user select what operation needs to be performed ??

[Divyansh-0]

Its a selection field basically not an input field

[Divyansh-0]

made some changes have a look https://neon-daifuku-86d25e.netlify.app/

[Divyansh-0]

for warp items I think there should be checkboxes

[Amith225]

made some changes have a look https://neon-daifuku-86d25e.netlify.app/

cool
can you make it visually appealing?

for warp items I think there should be checkboxes

anything which works

[Divyansh-0]

made some changes have a look https://neon-daifuku-86d25e.netlify.app/

cool can you make it visually appealing?

for warp items I think there should be checkboxes

anything which works

Whats the theme You want??

[Divyansh-0]

Gray and white Works or You need something else??

[Amith225]

@Divyansh-0 not gray and white, i don't know much about themes, but it should look premium. I would advise you to use Material-UI components which already have styles applied, it will be easy

[Divyansh-0]

@Divyansh-0 not gray and white, i don't know much about themes, but it should look premium. I would advise you to use Material-UI components which already have styles applied, it will be easy

I know Material-Ui But i don't prefer it Limits Ur style . I will fix the alignments and all make it professional colors You can tell m e later

[Divyansh-0]

U can track the changes on same link

[Divyansh-0]

For dock secondary You want to call the methods in Selectiontools file when the users selects it??

[Amith225]

For dock secondary You want to call the methods in Selectiontools file when the users selects it??

no for now just have a placeholder, it will call a function in main script nor selectionTools

[Divyansh-0]

Its not related to your project but do you have any idea how can i record user activity on a system using python??

[Amith225]

what type of user activity ?

[Divyansh-0]

what type of user activity ?

Screen time , no of apps opened

[Amith225]

Screen time , no of apps opened

no i dont