Immediate-Mode-UI / Immediate-Mode-UI/Nuklear

My simple WASM-demo does not work on Android

Open
#814 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
C
Stars
11.4k
Forks
686
Avg merge
4d 1h
Merged PRs (30d)
3

Description

Tools:
- Nuklear 4.12.7
- Android 13

Demo: https://nuklear-opengl-sdl3-c.netlify.app/

It shows a white screen on Android.

And it does not allow to type a text in the edit box on Desktop: https://github.com/Immediate-Mode-UI/Nuklear/issues/760#issuecomment-2952668519

Source: [nuklear-opengl-sdl3-c.zip](https://github.com/user-attachments/files/20644262/nuklear-opengl-sdl3-c.zip)

main.c

```c
#define SDL_MAIN_USE_CALLBACKS 1 // Use the callbacks instead of main()

#include
#include

#ifdef __EMSCRIPTEN__
#include
#else
#include
#endif // __EMSCRIPTEN__

// #define NK_INCLUDE_FIXED_TYPES
// #define NK_INCLUDE_DEFAULT_ALLOCATOR
// #define NK_INCLUDE_VERTEX_BUFFER_OUTPUT
// #define NK_INCLUDE_FONT_BAKING
// #define NK_INCLUDE_DEFAULT_FONT
// #define NK_UINT_DRAW_INDEX // ✅ This is the fix
// #define NK_IMPLEMENTATION
// #define NK_SDL_GL3_IMPLEMENTATION
// #include "nuklear.h"

// #define NK_IMPLEMENTATION

#define NK_INCLUDE_FIXED_TYPES
#define NK_INCLUDE_STANDARD_IO
#define NK_INCLUDE_STANDARD_VARARGS
#define NK_INCLUDE_DEFAULT_ALLOCATOR
#define NK_INCLUDE_VERTEX_BUFFER_OUTPUT
#define NK_INCLUDE_FONT_BAKING
#define NK_INCLUDE_DEFAULT_FONT
#define NK_IMPLEMENTATION
#define NK_SDL_GLES2_IMPLEMENTATION
#include "nuklear.h"
#include "nuklear_sdl3_gles2.h"

static SDL_Window *window = NULL;
SDL_GLContext glContext;

struct nk_context *ctx;

char buffer[256];
int text_len = 0;

// This function runs once at startup
SDL_AppResult SDL_AppInit(void **appState, int argc, char *argv[])
{
if (!SDL_Init(SDL_INIT_VIDEO))
{
SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());
return SDL_APP_FAILURE;
}

SDL_GL_SetAttribute(SDL_GL_MULTISAMPLEBUFFERS, 1); // Enable MULTISAMPLE
SDL_GL_SetAttribute(SDL_GL_MULTISAMPLESAMPLES, 2); // can be 2, 4, 8 or 16

const char *title = "Example in C, SDL3, and OpenGL";
size_t canvasWidth = 350;
size_t canvasHeight = 350;
window = SDL_CreateWindow(title, canvasWidth, canvasHeight, SDL_WINDOW_OPENGL);
if (!window)
{
SDL_Log("Couldn't create the window: %s", SDL_GetError());
return SDL_APP_FAILURE;
}

glContext = SDL_GL_CreateContext(window);
if (!glContext)
{
SDL_Log("Couldn't create the glContext: %s", SDL_GetError());
return SDL_APP_FAILURE;
}

SDL_GL_SetSwapInterval(1); // Turn on vertical sync
SDL_StartTextInput(NULL);

#ifdef __WIN32__
if (!gladLoadGL())
{
SDL_Log("Failed to initialize OpenGL function pointers");
return SDL_APP_FAILURE;
}
#endif // __WIN32__

glClearColor(50.f / 255.f, 50.f / 255.f, 50.f / 255.f, 1.f);
glViewport(0, 0, canvasWidth, canvasHeight);

// Init Nuklear
ctx = nk_sdl_init(window);

// Fonts (optional)
struct nk_font_atlas *atlas;
nk_sdl_font_stash_begin(&atlas);
nk_sdl_font_stash_end();

return SDL_APP_CONTINUE;
}

// This function runs when a new event (mouse input, keypresses, etc) occurs
SDL_AppResult SDL_AppEvent(void *appState, SDL_Event *event)
{
if (event->type == SDL_EVENT_QUIT)
return SDL_APP_SUCCESS;

nk_input_begin(ctx);
nk_sdl_handle_event(event);
nk_input_end(ctx);

return SDL_APP_CONTINUE;
}

// This function runs once per frame, and is the heart of the program
SDL_AppResult SDL_AppIterate(void *appState)
{
// GUI
if (nk_begin(ctx, "Demo", nk_rect(50, 50, 220, 150),
NK_WINDOW_BORDER | NK_WINDOW_MOVABLE | NK_WINDOW_SCALABLE |
NK_WINDOW_MINIMIZABLE | NK_WINDOW_TITLE))
{
// nk_layout_row_static(ctx, 30, 200, 1);
// nk_label(ctx, "Hello, Nuklear!", NK_TEXT_LEFT);
// if (nk_button_label(ctx, "Press Me"))
// {
// SDL_Log("Button was pressed!");
// }

nk_layout_row_dynamic(ctx, 30, 1);
nk_label(ctx, "Enter your name:", NK_TEXT_LEFT);
nk_edit_string(ctx, NK_EDIT_FIELD | NK_EDIT_CLIPBOARD,
buffer, &text_len, sizeof(buffer),
nk_filter_default);

nk_label(ctx, "Hello, Nuklear!", NK_TEXT_LEFT);
if (nk_button_label(ctx, "Press Me"))
{
SDL_Log("Button was pressed!");
}
}
nk_end(ctx);

glClear(GL_COLOR_BUFFER_BIT);
nk_sdl_render(NK_ANTI_ALIASING_ON, 512 * 1024, 128 * 1024);

// Update the screen
SDL_GL_SwapWindow(window);
return SDL_APP_CONTINUE;
}

// This function runs once at shutdown
void SDL_AppQuit(void *appState, SDL_AppResult result)
{
// Cleanup
nk_sdl_shutdown();
SDL_GL_DestroyContext(glContext);

// SDL will clean up the window for us
}
```

It must show:

![Image](https://github.com/user-attachments/assets/9783fb5f-0fba-430d-bfff-4c2d05380dc8)

Contributor guide

Open the contributing guide

Research direction

Start with the attached main.c and the Nuklear 4.12.7 demo, building it on Android 13 and desktop. Reproduce the white screen on Android and the edit-box typing problem, then inspect the SDL3 GLES2 setup and input handling shown in main.c. Done means the demo displays the requested GUI on Android and accepts text input on desktop.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, c, wasm
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.