Comments (34)
Hi everyone,
I see you've made some progress on the design ideas, it looks great :)
On my side I've been working on a small homemade GUI package based on pygame, and after some testing and debugging I think it's working !
It gives a flexible way to design the interface by creating widgets (buttons, sliders, etc.), organizing them into rows and columns, and putting all this in a scrollable panel. It also allows to design different themes (light, dark, etc.) and change the theme dynamically at run time. With this package you'll be able to experiment different interface designs easily :)
I'll open a pull request tomorrow, it's getting late and I'm almost sleeping on my keyboard ^^
I hope you'll like it !
from sorting-algorithms-visualizer.
I dont think having a lot of themes makes sense for a sorting algortihms visualizer, it just looks like we are adding useless features. I think we should add just a toggle button that changes between two themes (light/dark), going futher is not necessary. What do you think @rx112358 @GlacialBlaze?
from sorting-algorithms-visualizer.
The hybrid menu is actually what you see in the picture above. Before clicking on 'Sort' box, there is no list of choices. When you click, the choices will appear on the right as how a 'drop-down' menu would and the menu itself is a 'scroll-down' menu.
from sorting-algorithms-visualizer.
Hey everyone,
This issue looks quite interesting, can I help ?
I'm new to open source but I've been coding in Python for a while now, and even though I'm not familiar with pygame it doesn't seem too complicated.
I could start with @GlacialBlaze 1st idea to see how we could implement a scrolling bar, or dive directly into the 2nd idea (which would probably be better but require a little more time), what would you prefer ?
from sorting-algorithms-visualizer.
Hey, could I work on the hybrid menu? I begun with creating the vertical slider
from sorting-algorithms-visualizer.
Could the theme option be a pop up if there are many themes?
Depending on the number of themes, if there are more than three themes I think a pop up menu would keep the interface cleaner
In the image above, the box is shown as the pop up menu when the user clicks the circle.
Actually, it is a pop-up menu.
On start, the theme menu is just as it is, a lonely little menu sitting at the top left. It's only when the user clicks on it that it will have friends below it for choosing. Also, I long planned it to be a pop-up menu because I had scalability in mind, i.e. expect more themes.
Oh, I think I did not specify that in my previous post. Sorry.
from sorting-algorithms-visualizer.
Well removing the words are good enough.
from sorting-algorithms-visualizer.
@GlacialBlaze It looks great! This algorithms slide window would be constantly open?
from sorting-algorithms-visualizer.
-
Sorry for not mentioning earlier, its just an idea I 'drew' not 'coded'. I cannot do this as I have not touched on Pygame seriously. Those familiar with Pygame should look into this.
-
About the slide window being constantly open, that's up to you. Should also consult others to see if they can improve on this or have even better ways.
from sorting-algorithms-visualizer.
Another suggestion:
In future, the program should advance to a stage where we can select the ordering of data such as 'sorted', 'reversed', 'few unique', 'random', 'partially sorted', and etc..
from sorting-algorithms-visualizer.
If performance is not an issue:
Information on number of comparisons and swaps can be shown at the top left of the bar plot.
from sorting-algorithms-visualizer.
@GlacialBlaze These changes would be really good! Thanks for the suggestion!.
from sorting-algorithms-visualizer.
My observation is that creating the scroll-down shares the same concept and implementation as the Delay slider
. Making it vertical and changing its appearance to a page scroll would effectively get us a proper menu scroll. So the existing delay slider can be a headstart.
Then, we can link each scroll movement with each algorithm. Example, if a user pulls the scrollbar 2 units down, then the algorithm menu shows the next 2 algorithms. Thus, the scroll movement should be fixed to units, not follow a conventional smooth movement.
from sorting-algorithms-visualizer.
Latest idea:
Advantages:
- Almost spaces are cramped with information - visually convenient
- Hybrid menu (pop-up + scroll-down) - compact, practical
- Sort statistics at the bottom - bars will not overlap it (compared to previous versions)
- Changing variables (size, play button, etc.) are kept to one side - good for navigation (compared to previous versions)
Challenges:
- Hybrid menu is difficult to create
from sorting-algorithms-visualizer.
With added light/dark mode:
from sorting-algorithms-visualizer.
@GlacialBlaze how does the hybrid menu look visually(for both options)? is the sort menu overlaying the entire right column
from sorting-algorithms-visualizer.
Hey @mugulmd and @rx112358 ! Are you able to manage it and work together? Maybe @rx112358 could work on the vertical slider and @mugulmd on the interface as proposed by @GlacialBlaze. What do you think?
from sorting-algorithms-visualizer.
Sounds good to me. I could work on the hybrid menu.
from sorting-algorithms-visualizer.
Nice to meet you @rx112358 !
Fine by me, I can work on the side and bottom panels.
from sorting-algorithms-visualizer.
Head start:
- Drop-down: the current choice menu is already a drop-down (upwards), so we can refer to it to make it drop rightwards
- Scroll bar: the current delay slider is already a scroll bar (horizontal), so we can refer to it to make it vertical
However, before the hybrid menu, let's try and see whether we can convert the horizontal bottom menu bar into its vertical version.
Lots of work, but glad to see rising interest and willingness from everyone! ☺☺☺
from sorting-algorithms-visualizer.
With added light/dark mode:
A suggestion: What if the user could choose comparison or distribution before the hybrid menu is shown? And the options for the choosen one would only be shown in the menu
from sorting-algorithms-visualizer.
Interesting. Let's think about the user journey. How will the suggestion differ from the current idea? Which would be better?
I think your suggestion saves more work in drawing because not everything is shown, only the concerned ones are.
Then, let's think about users - what would they have to do to get there? Is there more or less work for them? 🧐
from sorting-algorithms-visualizer.
The user would be shown the options comparison/distribution when they click sort. It would be more work for the user. But would it create much of a difference with the additional step in terms of user work?
If there was no additional step to show the options comparison/distribution, how will the scroll work for both the columns? It would seem a bit confusing for the user I think.
And as you mentioned, in terms of the program there would less work in drawing, which would be good when the list will have many algorithms.
from sorting-algorithms-visualizer.
Noted the observations.
Initially, without the options to choose sort categories, I had in mind that the scroll would work by rewriting with news sort names. Whichever column is shorter will simply be just blank space while the other continues to be updated with new names.
Less drawing should be better, I think.
How about this - I have two ideas for that:
-
For the top, you get to choose everything in fewer clicks because everything is shown. Color contrast is used to signify selected choice.
-
For the bottom, only one column is shown.
What do you all think? 🧐🧐🧐
from sorting-algorithms-visualizer.
Noted the observations.
Initially, without the options to choose sort categories, I had in mind that the scroll would work by rewriting with news sort names. Whichever column is shorter will simply be just blank space while the other continues to be updated with new names.
Less drawing should be better, I think.
How about this - I have two ideas for that:
- For the top, you get to choose everything in fewer clicks because everything is shown. Color contrast is used to signify selected choice.
- For the bottom, only one column is shown.
What do you all think?
I think the first one would be easier for the user to switch between the sorting categories options.
The second one would need the user to click the sort box again to go back to the sorting categories menu, which would also require it to be redrawn each time.
from sorting-algorithms-visualizer.
Easier for the user indeed. Great. It's settled! ☺☺☺
from sorting-algorithms-visualizer.
Improvements to the interface:
- Themes are unrelated to sorting but rather color tastes and will be placed, as a minor option, on the top left
- Sort menu uses color contrast
from sorting-algorithms-visualizer.
Improvements to the interface:
- Themes are unrelated to sorting but rather color tastes and will be placed, as a minor option, on the top left
- Sort menu uses color contrast
A suggestion, could an icon with color be used instead of the text for the themes?
It would be less space consuming, if the text could be replaced with an alternative
from sorting-algorithms-visualizer.
That's a creative idea to save space. I support it.
In fact, it looks slightly similar to the 'L' and 'D' circles that I suggested prior to the theme menu.
Thanks.
from sorting-algorithms-visualizer.
Could the theme option be a pop up if there are many themes?
Depending on the number of themes, if there are more than three themes I think a pop up menu would keep the interface cleaner
In the image above, the box is shown as the pop up menu when the user clicks the circle.
from sorting-algorithms-visualizer.
The main idea is to make the interface as clean as possible, just showing what in necessary, like algorithm name and sorting time. If the user wants to change size, delay or visualization type (we just have one btw), they could open an slide window and change these values.
from sorting-algorithms-visualizer.
I dont think having a lot of themes makes sense for a sorting algortihms visualizer, it just looks like we are adding useless features. I think we should add just a toggle button that changes between two themes (light/dark), going futher is not necessary. What do you think @rx112358 @GlacialBlaze?
A toggle button would be good i think, minimal and easier for user and drawing
from sorting-algorithms-visualizer.
Oh, since we are sticking to only two themes, yes a little toggle button would be exactly enough.
from sorting-algorithms-visualizer.
Oh, since we are sticking to only two themes, yes a little toggle button would be exactly enough.
simplify the toggle button to show only the colors? no icons?
from sorting-algorithms-visualizer.
Related Issues (20)
- Redesign Menu Field HOT 9
- Implement [Exchange Sort]
- Implement [Insertion Sort]
- Implement Patience Sort HOT 2
- Implement Scroll Menu HOT 5
- Implement Double Selection Sort HOT 4
- Compress GIFs HOT 9
- Organize repo HOT 2
- Implement Tree Sort HOT 1
- Update algorithms options HOT 11
- Bogo sort not working properly HOT 4
- Add some docstrings / comments explainning each sorting algorithm HOT 13
- Suggestion : Displaying the values of the bars for better visualization and understanding HOT 8
- Implementing time taken to sort HOT 4
- Bug: Exchange sort throws TypeError HOT 1
- Improve the algorithm selection dropdown HOT 2
- Improve main.py and remove hardcoded values from display.py HOT 7
- BUG: TimSort Algorithm does not finish the sorting
- Bug: sizeBox should not allow null input HOT 1
- Delay, algorithm, and play/stop buttons are too responsive
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sorting-algorithms-visualizer.