Visual Editor about algorithm-visualizer HOT 12 OPEN

@duaraghav8, I've made some progress on my branch for the sandbox style tracers. Right now I have a simple example working with a 2D Matrix tracer.

Sandbox/2D Matrix and you can use the buttons/input fields on the right hand side.

Some TODOs/fixes

• better placing of the js files?
• my container (with the butons and input fields) is always there, need to only show this when in the sandbox tab
• input tags inside the 2dmatrix tracers don't scale when scaling the tracer
• make things look pretty
• make drag & drop?

also my way is kinda hacky because i didn't want to mess with the tracer's code too much.

from algorithm-visualizer.

I am thinking we could edit the 2D tracer to instead create input tags in the cells then we could just read those values and print out the code. I wrote some code to read a table and print out the generate javascript but I am running into some issue with the 2D tracer and changing its html.

from algorithm-visualizer.

@nadr0 ok then we were already on the same page I guess! Even I thought that this feature would be in a separate editor (not inside other algorithms), Its cleaner that way. So yeah, agreed

from algorithm-visualizer.

@nadr0 that's great!
But I didn't fully understand the 1st & the last fix. Could you send a screenshot? I'll be able to understand better.

Also, even in case you feel like there are some changes that absolutely need to be made with the tracers' code, no problem. Just discuss with us:)

from algorithm-visualizer.

I have a prototype working on the branch. Right now I don't have it with Drag-&-Drop which you mentioned in your first post. Also what I mean by "betting placing of the js files", is I am unsure if the placement of my javascript files is in the proper directories. i.e. does it make sense for the files to be in that folder? is this a good way of calling my code? etc..

My only todo right now is to make my container have a divider with the workspace so you can edit the sizes of each box. Its the vertical split divider code but I was having some trouble getting it working with my container. (the thing you can drag left and right between the workspace and editor to make the sizes of the containers larger and smaller)

from algorithm-visualizer.

Great job, and javascript files seem to be located in the proper directories!

However, I guess it will be little dizzy for users to go to sandbox, generate the code of Array2DTracer, copy it, go back to scratch paper, and paste it.

How do you think of putting a Generator button, or something like that, on the top navigation bar and when clicking it, showing up a pop up (not a new window but an overlaid div) which looks like that screenshot?

from algorithm-visualizer.

Would you have something get populated with the generated code and they would copy and paste it into their data.js file?

from algorithm-visualizer.

Yes, the idea is that the user simply works on the visuals, no need to touch code.
So if one was to make a table like:

2 -12 90
29 39 10
11 11 11

and name it myTable

the code generated looks like this:

let myTable = [ [2,-12,90], [29,39,10], [11,11,11] ]
let myTableTracer = new Array2DTracer ('<TITLE>')

myTableTracer._setData (myTable)

We can attach a logger to it as well, but what that logger prints out during runtime is upto us to decide.

And since we're brainstorming so much, why not go ahead an provide a button for "Export to Scratch Pad", so the pad is opened instantly with data.js pre-filled =)

from algorithm-visualizer.

So you mean that the user could open up any algorithm (say for eg - Knapsack 0-1), edit the matrix data, then run it and the algo will run with the new values?
Is my understanding correct?

If yes, this is a really good idea! If you'd like, you can share the code and I'll try finding out why those issues occur.

from algorithm-visualizer.

I didn't have that in mind, it was more to reuse the tracer code. Say if there was some "sandbox" page you could click create 2DMatrix and you would tell the number of rows and columns then the 2DMatrix tracer would appear with the correct size and you could just change the values inside that tracer just created. Then code would run to read those values and output the javascript for you can copy and paste. Its similar to what you said but I was thinking it would be in its own page not inside each algorithm. It could work both ways though.

from algorithm-visualizer.

Also I am going to be working off this branch if you want to take a look.
https://github.com/nadr0/AlgorithmVisualizer/tree/auto-generate-tracers

from algorithm-visualizer.

For reference: #203,

thanks for the merge
TODOs:
(I realized that the 1d array tracer actually creates [ [x,y,z] ], which is wrong it just needs to be [x,y,z]. Also the type should be text for input fields in the matrix because some examples use characters for the algorithms.)

from algorithm-visualizer.