Design Check

[philippReist]

Feedback by Phyllis: Bei Custom Moves finde ich das grün/gelb beisst sich mit dem anderen gelb

[philippReist]

With all the design changes, it would be great if you could have another look, @robinhanhart. Thank you!

[philippReist]

@robinhanhart, another friend who is a professional GUI designer had a quick look and had the following input:

• Change the layout of the primitive settings boxes to resemble a tab-layout: Move the controls up to hug the radio buttons and then make it visually clear, i.e. like a tab, that the settings belong to the active radio button/tab.
• Add icons to the primitives that reflect, on a high level, what the robot will do, i.e. a turning arrow for spin that turns in the right direction. A two-ways turning arrow for twist, a straight two way for back and forth, etc.
• Change the mouse pointer to the move icon (four-way cross) when hover over primitive in timer bar. Also when hover, show a hint that it can be resized by dragging on the right (similar to handles that you would use to resize an item in a graphics program, e.g. a little box.

I think except for the primitive-icons, those suggestions are quite straightforward to implement. I like the better hinting as well. What do you think? Let's discuss on Wed!

[philippReist]

Ah, re: tab-layout: Moving controls plus primitives up makes the dragging distance bigger again, so not sure.

[robinhanhart]

Not sure what exactly you mean with tab-layout.

• Was actually thinking the same thing with the move icon on hover in the timer bar
• Resize handles make sense for me too.
• Maybe also restyle the text for the primitives a bit.

I think the position marker could be a bit more prominent. Maybe something like this.

What do you think @philippReist ?

[robinhanhart]

Meeting Notes from today with changes and tasks:

• Philipp Make beat pixel distances in timer bars independent of BPM (slower and faster songs result in same beat density in timer bar, but time indicator moves faster and slower depending on bpm)
• Philipp Add resize handles on right following Robins draft, change mouse pointer to cross
• Robin New color concept: Dimmer timerbar colors and simpler spectrum for primitives (e.g. moves are yellow - red, and leds are blue - violet)
• Philipp Tabify settings boxes (pull up dark grey to create tab) and have same color for radio button as primitive.
• Robin change LED active radio button color.

Removed from list, as we'll consider the icons only in the next version:

• Robin Icons to show in primitives. Icons are designed to look good for four beat primitive and are ok to disappear when primitive gets smaller than that.

[robinhanhart]

Possible new color scheme. Make colors more simple. Use yellow to orange tones for "moves" and blue to purple for "lights". Also changed "lights" color to muted blue and dimmed both the timer bars for better visibility.

[philippReist]

I like it! Especially that it makes it clearer what is moves and what is lights, and the more muted colors of the timer bars.

I updated all the points above except for tabifying the settings. I can do this until next week and then you can have a final design change? Or you could already implement the changes - just pull develop before changing things on top.

[philippReist]

Hi Robin,

Finally, I got around to tabify the settings, see below. You can pull the branch tabifySettings to view the changes and implement the new color scheme: https://github.com/philippReist/dancebots_gui/tree/tabifySettings

Detailed changelist:

• Moved settings background rectangle up to hug radio buttons
• Radio buttons switch border to settings background rectangle color to look like tabs
• Streamlined spacing in settings: All spacings are equal to appWindow.guiMargin now. Same spacing also for custom left/right speed controls, but spacing between L and R is 2x guiMargin.
• Total settings box height is now set automatically so that it fits the largest controls (custom drive), so the heightRatio for primitiveControls could be removed.

Philipp

[robinhanhart]

Hi

Ich changed some design stuff:

• More spacing under tabs
• Updated color scheme
• Changed styling of vertical titles to match new color scheme and more muted.
• Small change on primitive handles.

[robinhanhart]

• Handle little rectangle enable opacity
• Fix margin under tabs
• LED Box: Setting do not scale correctly
• Primitive resize handle make always half-width of beat width. Center small handle