Program Interface

[lucaspilla]

Program Interface

[mugulmd]

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 !

[LucasPilla]

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?

[GlacialBlaze]

@rx112358

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.

[mugulmd]

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 ?

[rx112358]

Hey, could I work on the hybrid menu? I begun with creating the vertical slider

[GlacialBlaze]

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.

[GlacialBlaze]

Well removing the words are good enough.

[LucasPilla]

@GlacialBlaze It looks great! This algorithms slide window would be constantly open?

[GlacialBlaze]

1. 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.

2. 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.

[GlacialBlaze]

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..

[GlacialBlaze]

If performance is not an issue:

Information on number of comparisons and swaps can be shown at the top left of the bar plot.

[LucasPilla]

@GlacialBlaze These changes would be really good! Thanks for the suggestion!.

[GlacialBlaze]

@LucasPilla

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.

[GlacialBlaze]

@LucasPilla

Latest idea:

Advantages:

1. Almost spaces are cramped with information - visually convenient
2. Hybrid menu (pop-up + scroll-down) - compact, practical
3. Sort statistics at the bottom - bars will not overlap it (compared to previous versions)
4. Changing variables (size, play button, etc.) are kept to one side - good for navigation (compared to previous versions)

Challenges:

1. Hybrid menu is difficult to create

[GlacialBlaze]

With added light/dark mode:

[rx112358]

@GlacialBlaze how does the hybrid menu look visually(for both options)? is the sort menu overlaying the entire right column

[LucasPilla]

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?

[rx112358]

Sounds good to me. I could work on the hybrid menu.

[mugulmd]

Nice to meet you @rx112358 !
Fine by me, I can work on the side and bottom panels.

[GlacialBlaze]

Head start:

1. Drop-down: the current choice menu is already a drop-down (upwards), so we can refer to it to make it drop rightwards
2. 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! ☺☺☺

[rx112358]

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

[GlacialBlaze]

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

[rx112358]

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.

[GlacialBlaze]

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:

1. For the top, you get to choose everything in fewer clicks because everything is shown. Color contrast is used to signify selected choice.

2. For the bottom, only one column is shown.

What do you all think? 🧐🧐🧐

[rx112358]

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:

1. For the top, you get to choose everything in fewer clicks because everything is shown. Color contrast is used to signify selected choice.
2. 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.

[GlacialBlaze]

Easier for the user indeed. Great. It's settled! ☺☺☺

[GlacialBlaze]

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

[rx112358]

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

[GlacialBlaze]

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.

[rx112358]

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.

[LucasPilla]

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.

[rx112358]

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

[GlacialBlaze]

@LucasPilla

Oh, since we are sticking to only two themes, yes a little toggle button would be exactly enough.

[rx112358]

@LucasPilla

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?