OpenGL / menus

[holm.h...@gmail.com]

Hello,

I would like some user interface in a OpenGL window, something like :

https://blog.desdelinux.net/wp-content/uploads/2014/04/freedroid_menu1-600x450.png.webp

Any support for similar in fltk ?

Best regards
Håvard

[Gonzalo Garramuño]

El 19/2/22 a las 16:52, holm.h...@gmail.com escribió:

Sadly, no.  FLTK only provides OpenGL drawing support.  It is up to you
to implement the menus and the handle (button selection) support.

[Matthias Melcher]

Actually yes. Starting with one of the latests GitHub commit (Fab. 6th), FLTK can finally do this. Fl_Gl_Window is a group with 0,0 at the top left corner. Just add widgets to it like you would in any other (sub)window. If you want transparency, you can add an alpha value to colors in the lookup table for existing box type, or implement your very own box type with transparencies.

I would love feedback if you end up using the feature.

 - Matthias

[holm.h...@gmail.com]

Hi Matthias,

I downloaded the latest github commit and did run the "test/cube" program. I am very happy. If this works for most of fltk's widgets, I think this is an important step for fltk. It will open for making more modern-looking user interfaces.

Thanks and best regards
Håvard

[Mo_Al_]

Nice. I just tried it on Windows and it works. 

#include <FL/Fl.H>

#include <FL/Enumerations.H>

#include <FL/Fl_Gl_Window.H>

#include <FL/Fl_Button.H>

int main(int argc, char** argv) {

    auto win = new Fl_Gl_Window(300, 200);

    win->box(FL_FLAT_BOX);

    win->begin();

    auto btn = new Fl_Button(110, 100, 80, 30, "Button 1");

    win->end();

    win->resizable(win);

    win->show();

    return Fl::run();

}

From what I understand, the begin call is required, since the Fl_Gl_Window constructor calls end(). Setting a box type for the window is preferable, otherwise it's an FL_NO_BOX (also set in the constructor) which will show artifacts on resizing the window for example. 
I tried with Fl_Glut_Window, but it seems it requires an Fl_Gl_Window::draw() in its draw virtual method.

[Gonzalo Garramuño]

El 19/2/22 a las 18:47, 'Matthias Melcher' via fltk.general escribió:

> Actually yes. Starting with one of the latests GitHub commit (Fab.
> 6th), FLTK can finally do this. Fl_Gl_Window is a group with 0,0 at
> the top left corner. Just add widgets to it like you would in any
> other (sub)window. If you want transparency, you can add an alpha
> value to colors in the lookup table for existing box type, or
> implement your very own box type with transparencies.
>
> I would love feedback if you end up using the feature.
>
>  - Matthias

Oh, wow!  Sorry for spreading misinformation.  This is a really cool
feature, that I wished my program would use.

[Gonzalo Garramuño]

El 19/2/22 a las 18:47, 'Matthias Melcher' via fltk.general escribió:

> If you want transparency, you can add an alpha value to colors in the
> lookup table for existing box type, or implement your very own box
> type with transparencies.
>
> I would love feedback if you end up using the feature.
>

Matthias, do you have an example with a button with transparency?

[Matthias Melcher]

The FLTK widget is the yellow transparent box in the top left corner. Could be a button or any other element.

[Gonzalo Garramuño]

El 20/2/22 a las 18:09, 'Matthias Melcher' via fltk.general escribió:

> The FLTK widget is the yellow transparent box in the top left corner.
> Could be a button or any other element.

Cool, but I meant the source code to it.

[Matthias Melcher]

Oh, I did not mention that. The cube example app is part of the FLTK git release: https://github.com/fltk/fltk/blob/master/test/cube.cxx . Line 218 and following add the widget over GL.

[Ian MacArthur]

On Sunday, 20 February 2022 at 17:18:21 UTC Mo wrote:

Nice. I just tried it on Windows and it works. 

#include <FL/Fl.H>

#include <FL/Enumerations.H>

#include <FL/Fl_Gl_Window.H>

#include <FL/Fl_Button.H>

int main(int argc, char** argv) {

    auto win = new Fl_Gl_Window(300, 200);

    win->box(FL_FLAT_BOX);

    win->begin();

    auto btn = new Fl_Button(110, 100, 80, 30, "Button 1");

    win->end();

    win->resizable(win);

    win->show();

    return Fl::run();

}

From what I understand, the begin call is required, since the Fl_Gl_Window constructor calls end(). Setting a box type for the window is preferable, otherwise it's an FL_NO_BOX (also set in the constructor) which will show artifacts on resizing the window for example. 
I tried with Fl_Glut_Window, but it seems it requires an Fl_Gl_Window::draw() in its draw virtual method.

This might be (i.e. is!) somewhat tangential to the original question, but I would caution that I'm somewhat wary of Mo's example here, since he is using a "bare" Fl_Gl_Window as the outer "main" window of the app., and I have a lingering sense that there's something non-portable about that; that in fact it would be better to have the "main" window be a simple Fl_Window and then have the Fl_Gl_Window as a child of that...

But... I'm not sure why I believe that, and it may be some historical constraint that no longer applies...

[Gonzalo Garramuño]

El 20/2/22 a las 20:07, 'Matthias Melcher' via fltk.general escribió:

> Oh, I did not mention that. The cube example app is part of the FLTK
> git release: https://github.com/fltk/fltk/blob/master/test/cube.cxx .
> Line 218 and following add the widget over GL.
>

Cool.  Is there a speed penalty for the fltk widgets like that.  I am
thinking of replacing my gl_draw() of texts in my program with a simple
Fl_Output widget, but don't know if that would incur in a speed penalty.

[Matthias Melcher]

There is no big penalty, particularly if you are already using `gl_draw()` which uses basically the same commands.

Setting up and restoring the environment has close to no impact. Drawing lines and rectangles is as fast as classic OpenGL can go. Rendering text is relatively slow under OpenGL generally. Also, the entire UI inside the OpenGL window has to be re-rendered every time the 3d scene changes.

[holm.h...@gmail.com]

Hi Matthias,

You asked for feedback. I attach an image from my application, showing how transparent widgets (button on right side) can be used.

Keep up the good work !

Best regards
Håvard

[Matthias Melcher]

Oh, that is very cool! Thanks for the feedback! Much appreciated.

[holm.h...@gmail.com]

Hi,

Based on the nice work by Matthias, I make a FL_Group in my Fl_Gl_Window. This do support transparent colors, as can be seen in the attached image.

This looks just like I wanted. However there are a few issues:
1) The event handling is not always ok. I suspect that my Fl_Gl_Window captrues it. This may be my mistake.
2) Clicking on the buttons causes a redraw, and that may lead to the Fl_Group is "blinking". Is the problem that my Fl_Gl_Window/draw() uses too much time ?

Best regards

Håvard