Effects and Transitions

[guerratron]

Greetings everyone, I'm starting to get interested in this project, although I'm a newbie.
I was wondering if effects and transitions can be implemented.
...I don't know, I've searched and can't find anything about it...

Sorry for my English, I use google-translate

[frang75]

Hi @guerratron and welcome to NAppGUI.
I'm not sure what you mean by Effects and Transitions. With NAppGUI you can create Custom Views where you can implement any type of drawings or animations.

[guerratron]

Thanks for responding, frang75.

I was looking for transitions between panels, for example to simulate a gradual fade-in/fade-out, or perhaps when selecting to show a given column/row with "layout_show_col(..)" or "layout_show_row(..)".
I thought maybe through the "Clock" object I can move controls until they disappear...

Anyway, I'll take a look at what you suggest "Custom Views", I assume you mean this:

View* view_custom(const bool_t scroll, const bool_t border);

Thank you so much.

[guerratron]

I've been looking into the API and maybe it will allow me to move GUI elements and apply effects if I use tasks

osapp_task(tdata, .04, i_task_main, i_task_update, i_task_end, TaskData);

I'll try this afternoon to see if I can do it.

[frang75]

The best way (and safer) to create animations in GUI widgets or Custom views is using the osmain_sync instead osmain, which add the update method.

/* NAppGUI Hello World */

#include <nappgui.h>

typedef struct _app_t App;

struct _app_t
{
    Window *window;
    TextView *text;
    ListBox *listbox;
    real64_t time;
    uint32_t clicks;
    uint32_t state;
};

/*---------------------------------------------------------------------------*/

static void i_OnButton(App *app, Event *e)
{
    textview_printf(app->text, "Button click (%d)\n", app->clicks);
    app->clicks += 1;
    unref(e);
}

/*---------------------------------------------------------------------------*/

static Panel *i_panel(App *app)
{
    Panel *panel = panel_create();
    Layout *layout = layout_create(1, 4);
    Label *label = label_create();
    Button *button = button_push();
    TextView *text = textview_create();
    ListBox *list = listbox_create();
    app->text = text;
    app->listbox = list;
    label_text(label, "Hello!, I'm a label");
    button_text(button, "Click Me!");
    button_OnClick(button, listener(app, i_OnButton, App));
    listbox_add_elem(list, "Item1", NULL);
    listbox_add_elem(list, "Item2", NULL);
    listbox_add_elem(list, "Item3", NULL);
    listbox_add_elem(list, "Item4", NULL);
    layout_label(layout, label, 0, 0);
    layout_button(layout, button, 0, 1);
    layout_textview(layout, text, 0, 2);
    layout_listbox(layout, list, 0, 3);
    layout_hsize(layout, 0, 250);
    layout_vsize(layout, 2, 100);
    layout_margin(layout, 5);
    layout_vmargin(layout, 0, 5);
    layout_vmargin(layout, 1, 5);
    layout_vmargin(layout, 2, 5);
    panel_layout(panel, layout);
    return panel;
}

/*---------------------------------------------------------------------------*/

static void i_OnClose(App *app, Event *e)
{
    osapp_finish();
    unref(app);
    unref(e);
}

/*---------------------------------------------------------------------------*/

static App *i_create(void)
{
    App *app = heap_new0(App);
    Panel *panel = i_panel(app);
    app->window = window_create(ekWINDOW_STD);
    app->state = 0;
    app->time = 0;
    window_panel(app->window, panel);
    window_title(app->window, "Hello, World!");
    window_origin(app->window, v2df(500, 200));
    window_OnClose(app->window, listener(app, i_OnClose, App));
    window_show(app->window);
    return app;
}

/*---------------------------------------------------------------------------*/

static void i_destroy(App **app)
{
    window_destroy(&(*app)->window);
    heap_delete(app, App);
}

/*---------------------------------------------------------------------------*/

static void i_update(App *app, const real64_t ptime, const real64_t ctime)
{
    if (ctime - app->time > 0.3)
    {
        if (app->state == 0)
            listbox_color(app->listbox, 0, kCOLOR_RED);
        else if (app->state == 1)
            listbox_color(app->listbox, 0, kCOLOR_GREEN);
        else if (app->state == 2)
            listbox_color(app->listbox, 0, kCOLOR_BLUE);

        app->time = ctime;
        app->state += 1;
        if (app->state == 3)
            app->state = 0;
    }
}

/*---------------------------------------------------------------------------*/

#include "osmain.h"
osmain_sync(0.04, i_create, i_destroy, i_update, "", App)

[guerratron]

Yeah! this is the key.
The "update" method. Well, thank you! I'll go that way and if I get something interesting I'll show it here.
Thank you very much, @frang75.
You have done an impressive job with the SDK, also with the "cMakes helpers". My respects

[frang75]

We have also a Discord server. Email me with your username and I'll add you to de server.

[guerratron]

thank you very kind. Discord username: guerratron24 El lun, 12 feb 2024 a las 22:20, Francisco García Collado (< ***@***.***>) escribió:

…

We have also a Discord server. Email me with your username and I'll add you to de server. — Reply to this email directly, view it on GitHub <#101 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABDGJKA44LZAYCWIOP7IONDYTKBRXAVCNFSM6AAAAABDCF6NSWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DINBWHE4TQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- ... que la fuerza t'acompañe ..

[guerratron]

Greetings,
Around the effects-transitions I wanted to build something like transition tabs or similar.
This is what I have managed to do, as if it were a kind of "widget" to add content in the form of a "showcase" (for example for a visualization of options)..

AniTabsv1-horz-mini.mp4

AniTabsv1-vert-mini.mp4

..it is very basic and lacks stylization...