"Pretty" FLTK apps

[aditya siram]

Hi all,

Are there any examples of FLTK apps with nice color themes and widget designs? I'm working giving my app a more polished look and it would be useful to see what others have done.

Thanks!
-deech

[K Dmitrij]

Hi.

I'm using system colors only - Fl::get_system_colors(),

and gradient for boxes.

---

From: aditya siram

 

--
You received this message because you are subscribed to the Google Groups "fltk.general" group.
To unsubscribe from this group and stop receiving emails from it, send an email to fltkgeneral...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Greg Ercolano]

On 10/27/17 16:43, aditya siram wrote:
> Hi all,
>
> Are there any examples of FLTK apps with nice color themes and widget designs? I'm working giving my app a more polished look and it would be useful to see what others have done.

There was a thread about this a few years ago in this group;
search the archive for the Subject: "example of a pretty gui?"

Here's a reprint of that 2013 thread, minus the headers.
(Thunderbird doesn't make it easy to paste those, feelin lazy):
I didn't check if the links still work.

* * *
On 08/28/13 09:01, Joujou Nifujase wrote:
> i want to know, how good looking my app can possibly be if i will choose fltk?

These first two are the best ones I've seen so far.
The last one is my own app's use of FLTK, in some cases just changing
the colormap to get different "looks":

http://prodatum.sourceforge.net/screenshots/current.png
http://prodatum.sourceforge.net/screenshots/v0.99/keyboard.png
http://bp2.blogger.com/_gWjim15JgR4/SBgNOnNSYbI/AAAAAAAAAM4/Hyd5qS6f5uY/s1600-h/FannTool-0.93.jpg
http://www.gouget.org/druids/screenshots/dsurf1.jpg
http://www.pawfal.org/SpiralSynth/images/SpiralSynthBig.png
http://www.seriss.com/rush.103.00/features/

> how customizable is it?

You can customize color maps (see above), and you can chose the "gtk+" scheme
to get nicer looking buttons than the old style. Just put Fl::scheme("gtk+")
at the top of your main().

Some folks have designed new schemes ("gleam" and "gradient") which are currently
in the form of patches, and are in the process of being integrated into FLTK.
(see STR# 2672 and STR# 2675). Currently the "gleam" patch is in good enough shape
to be used by just putting Fl::scheme("gleam") at the top of main(), the "gradient"
patch doesn't have that feature yet.. WIP.

You can also customize the box types yourself (pretty much what the schemes do).
I think we have an article or something on how to do that; can't remember.

FLTK 1.3.x /doesn't/ do 'skins'; you have to do that kind of thing yourself
by overloading the draw() widget or using a paint program to paint your own
widgets and assign these images to widgets (like buttons), or integrate them
yourself by overloading draw(). (the Fl_Gel_Tabs widget is an example of this)
I believe this is what those first two prodatum screenshots do.
* * *
Oh, and if those aren't pretty enough, then take a look at JUCE;
http://www.juce.com/
I don't know much about it, but a friend told me about some folks
he's working with that chose to use it for a new cross platform
app they're developing.

I think the most popular graphics toolkit out there is probably
QT; very extensible/flexible, with lots and lots of widgets.
I think it does skinning, and it comes with boatloads of other
stuff, like string and data manipulation. It's kinda 'heavy' though,
the opposite of FLTK.
* * *
On 08/29/13 03:07, humpty wrote:
> Google "fltk gui"
> Click "images" at the top.

Yes, found some nice ones that way that I'd add to my list.

Some of the matches, though, aren't fltk -- you have to look
at the links to tell. (some of those images are definitely other
toolkits, having to do with how some pages have screenshots of
different toolkits on the same page, and google can't tell which
is which)

These are some good ones that are definitely FLTK; had to go to
each page and search for "FLTK" to verify:

http://non-sequencer.tuxfamily.org/non-pattern-editor.png
http://non-sequencer.tuxfamily.org/non-cursors.png
http://non-daw.tuxfamily.org/tle.png

Those first two are from this page:
http://non-sequencer.tuxfamily.org/MANUAL.html
I like the author's description under "2. The Interface":

"The interface is quite simple and [based on FLTK 1.x]
The author examined many toolkits before beginning,
and has absolutely no interest in pursuing GTK or Qt -- Non simply
doesn't require much of a toolkit, and these are incapable
of providing less than total excess."

Yes, that last bit is why I've been sticking with FLTK too.

* * *

>> http://non-sequencer.tuxfamily.org/non-pattern-editor.png
>> http://non-sequencer.tuxfamily.org/non-cursors.png
>> http://non-daw.tuxfamily.org/tle.png
>
> Such a vast array of leds. I'd love to know how they did that.
> Is that one widget per row, or what ?
>
I didn't look at their code, but yes, could be one custom widget per row,
with a draw() routine that handles drawing each "led". They look like they're
drawn with fl_pie() (filled disk) with thin width and taller height.

fl_pie() draws very quickly, so should be very fast.

The look of the "leds" could be improved by drawing little icon images
for each one; one could then render actual images of lit/dark leds,
or at very least, antialiased shapes if PNG images with alpha channel
drop off on the edges were used.

It could also be done all as one widget (instead of one widget per row),
using Fl_Scroll to scroll around it.

Which way to go (one widget for all, or one widget per row) depends
on what the app wants; if each row needs the behaviors that a widget
can offer, one widget per would be the way to go.. such as being able
to 'deactivate' a row, or have the row light up when the mouse glides
over it (detecting ENTER/LEAVE events), etc..

* * *

thank you Greg, very nice examples, they convinced me.

* * *
Yes, that last bit is why I've been sticking with FLTK too.



FYI those are some pretty ancient screenshots. I no longer use
mainline FLTK, but the fork I've created which uses Cairo for
rendering as well as lots of other changes. The fork is called NTK.

Here's a more recent image:
http://non.tuxfamily.org/non-stuff-huge.png

In the lower righthand corner you'll also notice that Zynaddsubfx
can be optinally built against NTK for much improved appearance.

* * *

Don't want to look like a shameless self-promotion, but you can check
EDE (http://ededesktop.org); the whole stack is built using FLTK 1.x.

After theme engine gets completed, there should be quite a bit of
possibilities for customization, which will include FLTK look too.

Also I'm not sure did anyone mentioned, ZynAddSubFX
(http://zynaddsubfx.sourceforge.net) looks awesome; I think it
even comes with custom theming engine...

Best,
S.

* * *

LOL, EDE is on http://edeproject.org; Emacs somehow got wrong content
inside autocomplete database...

* * *

> Also I'm not sure did anyone mentioned, ZynAddSubFX
> (http://zynaddsubfx.sourceforge.net) looks awesome; I think it
> even comes with custom theming engine...
>
> Best,
> S.

That image of ZynAddSubFX is using NTK, not FLTK. I did the porting myself.

* * *

[Greg Ercolano]

On 10/29/17 08:15, Greg Ercolano wrote:
> On 10/27/17 16:43, aditya siram wrote:

>> [..] nice color themes and widget designs?

>> I'm working giving my app a more polished look and it would
>> be useful to see what others have done.

I'd suggest first set at the top of your code: Fl::scheme("gtk+");
That's the nicer scheme we have.

If designing your own widgets, you don't have to look to fltk
for that; just find whatever UI you like, grab pics of it, convert
the pics to either xpms or pngs, and cut them up so they can be
stretched into your widgets, and craft your own FLTK widgets by
overloading draw() to paste the UI images where they should go.

One example of this is this widget I made as an alternative to Fl_Tabs
which uses small images that 'stretch' to achive the gradient:
http://seriss.com/people/erco/fltk/Fl_Gel_Tabs/
I wrote that in 2005, when OSX's jelly bean buttons were big,
and I still use those tabs to this day in my commercial app
which can be seen here:
http://seriss.com/rush.103.00/features/gifs/submit_maya-103.00-shotgun.png

Similarly, these buttons:
http://seriss.com/people/erco/fltk/Fl_Matte_Button/

Although I think I used inline xpm images there, now you can inline
PNG images, which is better, because PNG supports 256 values of alpha
(unlike XPMs which are colormap only, and can only handle 1 value of alpha).
Use of alphachannels is great for 'seeing through' the image around curves
to the background color, so your widget can have anti-aliased lines around
curves, regardless of the widget's background color/contents.

I use gimp (the open source paint program) quite a bit to whip up the small
icon tiles for widgets. It's like what web developers used to do to put rounded
edges and gradients into the default HTML widgets like <INPUT>, <BUTTON>, <TABLE>,
etc.

[Greg Ercolano]

On 10/29/17 08:30, Greg Ercolano wrote:
> If designing your own widgets, you don't have to look to fltk
> for that; just find whatever UI you like, grab pics of it, convert
> the pics to either xpms or pngs, and cut them up so they can be
> stretched into your widgets, and craft your own FLTK widgets by
> overloading draw() to paste the UI images where they should go.

Here's a few more examples of FLTK widgets constructed from image tiles
on my cheat page. You may want to scroll through that page just to get
other ideas as well.

How to draw text over an image (buttons with gradient backgrounds):
http://seriss.com/people/erco/fltk/#TextOverImage

Bargraph widget with antialiased bars (using inline PNG + alpha):
http://seriss.com/people/erco/fltk/#MultiColorBarGraph
..the cool thing here is only the alpha channel is needed;
the app fills the RGB values dynamically to achieve the different
colors, without having to have a separate image for each color.

Alpha blending with PNG files (a way to get antialiased lines without cairo):
http://seriss.com/people/erco/fltk/#AlphaBlend

How to convert a PNG image to a C++ compatible array for inline use:
http://seriss.com/people/erco/fltk/#Fl_PNG_Hex_Dump
..this avoids having to have PNG files on disk at runtime, so the
executable has no dependency on external files that might get lost
or misplaced.

An altimeter widget:
http://seriss.com/people/erco/fltk/#Altimeter
..this widget is almost entirely constructed from images using
plain FLTK draw functions (no opengl or cairo). Some clever use
of alpha channels gets shadows, antialiasing, and 'realism'.
Only the "needle" suffers from aliasing, because I didn't have
bother to figure out how to rotate a PNG image of the needle.
FLTK may someday have built in ability to rotate images, which
would make that a lot easier.

[Greg Ercolano]

On 10/29/17 09:19, Greg Ercolano wrote:
> How to draw text over an image (buttons with gradient backgrounds):
> http://seriss.com/people/erco/fltk/#TextOverImage

I also just added an SVG example to the cheat page:
http://seriss.com/people/erco/fltk/#Fl_SVG_Image

..which uses FLTK 1.4.x's new nanosvg support.
Also committed into the 1.4.x branch as examples/howto-simple-svg.cxx

SVG images should be really useful for schemes, icons and custom widgets,
since it's an ASCII vector image format that is xml/human readable,
and can easily be inlined into apps, or generated on the fly.

As the demo above shows, nanosvg supports image transformations
(like rotation -- woo hoo!), and I think it's doing antialiasing too.
And since its vector, you can draw over other content for 'see through'
effects (what you would normally do with alpha channels in PNGs).

I can for instance easily see making a demo that rotates the SVG
logo by just using sprintf() to change the "rotate(angle,x,y)"
text in the SVG and re-rendering.

nanosvg support should really open things up for doing nice
looking widgets and scheming in FLTK. It's kinda like having
cairo support, but built-in!

[aditya siram]

Awesome! Thanks for doing that!

[M. D. Schmidt]

I just came across this post. I believe my application RNAStructViz may include a lot of the pretty theming you are looking for.

[aditya siram]

That looks good!

I also tried my hand at re-skinning most of the widgets using SVG. https://github.com/deech/fltkhs-themes-demo

[Remy Oukaour]

I've made a series of themes based on operating systems, GUI toolkits, or specific applications. Most were originally created for this project back in ~2014:

https://github.com/roukaour/viz-brain-visualizer

They're currently used by Tilemap Studio:

https://github.com/Rangi42/tilemap-studio

Screenshots of each:

https://i.imgur.com/A7CvKFe.png

In some cases I had to extend FLTK's widgets classes due to hard-coded boxtypes or colors in order to get the looks just right, so they're not entirely usable as drop-in replacements for any other theme.