Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Program Interface #88

Closed
GlacialBlaze opened this issue Feb 19, 2021 · 34 comments
Closed

Program Interface #88

GlacialBlaze opened this issue Feb 19, 2021 · 34 comments
Assignees
Labels
enhancement New feature or request

Comments

@GlacialBlaze
Copy link
Contributor

This is the current display:

image

This is my suggestion:

image

For algorithms:

  1. It does not overlap things at its back
  2. It is scalable when more algorithms are introduced
  3. It is more orderly and tidy

For the action buttons, the play becomes pause when sorting and vice versa. The stop button is always there so that at any state, the user can opt to finish it.

@GlacialBlaze GlacialBlaze added the enhancement New feature or request label Feb 19, 2021
@LucasPilla
Copy link
Owner

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

@GlacialBlaze
Copy link
Contributor Author

GlacialBlaze commented Feb 19, 2021

  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
Copy link
Contributor Author

Another suggestion:

image

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
Copy link
Contributor Author

If performance is not an issue:

image

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

@LucasPilla
Copy link
Owner

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

@GlacialBlaze
Copy link
Contributor Author

GlacialBlaze commented Feb 27, 2021

@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 GlacialBlaze changed the title Different Display Program Interface Feb 27, 2021
@GlacialBlaze
Copy link
Contributor Author

GlacialBlaze commented Mar 31, 2021

@LucasPilla

Latest idea:

image

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
Copy link
Contributor Author

With added light/dark mode:

image

@rx112358
Copy link
Contributor

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

@GlacialBlaze
Copy link
Contributor Author

@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
Copy link
Contributor

mugulmd commented Aug 24, 2021

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
Copy link
Contributor

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

@LucasPilla
Copy link
Owner

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
Copy link
Contributor

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

@mugulmd
Copy link
Contributor

mugulmd commented Aug 25, 2021

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

@GlacialBlaze
Copy link
Contributor Author

GlacialBlaze commented Aug 26, 2021

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
Copy link
Contributor

With added light/dark mode:

image

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
Copy link
Contributor Author

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
Copy link
Contributor

rx112358 commented Aug 27, 2021

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
Copy link
Contributor Author

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:

image

  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
Copy link
Contributor

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:

image

  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
Copy link
Contributor Author

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

@mugulmd
Copy link
Contributor

mugulmd commented Aug 27, 2021

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 !

@GlacialBlaze
Copy link
Contributor Author

GlacialBlaze commented Sep 2, 2021

Improvements to the interface:

image

  • 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
Copy link
Contributor

rx112358 commented Sep 6, 2021

Improvements to the interface:

image

  • 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
theme

@GlacialBlaze
Copy link
Contributor Author

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
Copy link
Contributor

rx112358 commented Sep 6, 2021

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.

@GlacialBlaze
Copy link
Contributor Author

GlacialBlaze commented Sep 6, 2021

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.

@LucasPilla
Copy link
Owner

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

@LucasPilla
Copy link
Owner

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
Copy link
Contributor

rx112358 commented Sep 6, 2021

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

A toggle button would be good i think, minimal and easier for user and drawing

@GlacialBlaze
Copy link
Contributor Author

GlacialBlaze commented Sep 6, 2021

@LucasPilla

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

@rx112358
Copy link
Contributor

rx112358 commented Sep 6, 2021

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

@GlacialBlaze
Copy link
Contributor Author

Well removing the words are good enough.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants