On 4/26/21 11:29 PM, Webb Hinton wrote:
What do people think about offering a "Flat" scheme for FLTK?
I think this would make for a lot of out of the box appeal, and when people are shopping around for GUI libraries, having a couple style options is certainly a big plus.
I think there's no arguing as well that GUI design trends have moved away form skeuomorphisms.
I know this might go against the "Light" in FLTK, but could go a long way into giving the library a more modern look.
Hello,What do people think about offering a "Flat" scheme for FLTK?I think this would make for a lot of out of the box appeal, and when people are shopping around for GUI libraries, having a couple style options is certainly a big plus.
On 4/27/21 1:33 AM, wea...@gmail.com wrote:
[..]On the other hand these flat UIs have the downside that you can't tell what's a button, what's a menu and what's a label or just a background. You can hardly tell them apart. Sometimes it's even hard to tell with hovering your mouse over them, because the highlight coloring is also not that different from normal coloring.
Even Apple fell into this sinkhole with iOS; for a while
buttons weren't even delineated,
just clickable black text. If there were any delineation
clues, they were very low contrast,
bad for folks who have a hard time seeing subtle shades of
gray/colors. Horrible UI design.
I noticed iOS improved over the last year or so, getting more
consistent using e.g. blue text
for most things that are clickable, since people are used to
clicking "underlined blue text"
links in browsers.
I think in the OP's example though, it's mostly clear what's a
button (blue) and what isn't.
But it sure is easy for flat buttons to be suddenly confusing.
(Do I push the "green things"
or the "blue things"?) And at the top left in the OP's
screenshot, I expect a lot of people
wouldn't know if they can click "ROAST" and "RECIPES" or not,
and might not get that
they act like tabs until they click them.
In silly apps it's OK for people to "feel around" the UI to
explore it,
but e.g. for industrial control, randomly clicking things
could send equipment through a wall,
so it's a good idea for the UI to be clear about what's a
button and what isn't..!
We'd just have to pick a clear widget set where tabs are
clearly tabs, buttons are buttons, etc.
On the plus side this flat style (available in win10 and maybe win8) is looking nice and clean. On the other hand these flat UIs have the downside that you can't tell what's a button, what's a menu and what's a label or just a background. You can hardly tell them apart. Sometimes it's even hard to tell with hovering your mouse over them, because the highlight coloring is also not that different from normal coloring.With proper/stronger coloring I think a "flat" FLTK UI can be way better than any default win10 UI.
Anyway, returning to the original question, a flat style is actually pretty easy to make in fltk since the stock widgets all support a FL_FLAT_BOX style. If the UI is reasonably simple it is easy to set all the widgets box styles to flat and set "sensible" colours (for some value of sensible) and that's about it...
There are some limitations of what we can do with FLTK schemes.
[ . . . ]
I've been working on this and my basic API design is a base class
Fl_Scheme with derived classes
[ . . . ]
I got the basics working but there's still much to do before I can
provide a fully working prototype.
Is there a way to globally change styles for buttons? Or do you have to code each one individually?
Anyway, returning to the original question, a flat style is actually pretty easy to make in fltk since the stock widgets all support a FL_FLAT_BOX style.
Yes, and I found in fluid you can set a button's Box: to Boxes -> RFLAT_BOX to get a round-edged button that, when colored blue, can look like this in an excerpt of an application screenshot:
And in the above, the "rounded frame" is just an Fl_Box with the Box: set to Frames -> ROUNDED_FRAME in fluid,
and the "Upgrade Firmware" that interrupts the frame line is just an Fl_Box over it that has the Box: set to boxes -> FLAT_BOX
with a color matching the window's background color (which has been made an almost-white).
That's all pretty trivial styling just with stock widgets. I didn't change the Fl::scheme() at all. For flat widgets, the default
FLTK scheme is best, since it doesn't introduce any gradients and such that would affect the flat look.