EKG graphical user interface library

[MrsRina]

Oi oi, sou nowva aqui 🐈 achei muito incrível os projetos existentes aqui no fórum, parabéns para todos de verdade 🐈‍⬛

🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈

Gostaria de mostrar um projeto que estou programando a mais de 1 ano, é a EKG, EKG é uma biblioteca de interface gráfica feita para SDL contendo suporte para OpenGL 4 e Vulkan (supostamente 🍰). Atualmente esse projeto já foi reescrito muitas vezes, 3 vezes no total, e essa é a versão definitiva EKG 3, alguns pontos dela aqui:

• Multi plataforma com suporte para NDK (lê e processa input de tela touch para funcionar com os widgets), windows, linux e com um bom desempenho.
• Simples de usar e de forma não imediata.

Para detalhes mais específicos e técnicos de como utilizar ela, são encontradas lá no repositório, mas aqui está um showcase dela:

ekg-text-box-scrollable.mp4

EKG contém uns detalhes e serviços que são significativos, queria escrever aqui (mas é muita coisa mesmo):
1- Ela tem um serviço para processamento de layout e organização de filhos de uma container (qualquer widget que possa ter widgets como filhos), esse processamento de layout não é chamado toda hora, apenas quando você redimensiona algum container ou altera qualquer dimensão de qualquer filho widget. Também dentro desse serviço tem uma feature chamada layout mask, que gerencia vários retângulos e organiza eles por dock você insere vários retângulo e o dock de cada, processa as posições de cada retângulo e gera um retângulo final chamado mask, isso ajuda muito na hora de desenhar qualquer tipo de geometria dentro de um widget, fazendo ele ser organizado de forma dinâmica e precisamente alinhado.

2- Runtime CPU task handler, esse serviço embutido dentro do core, é um sistema de eventos por callback, mas diferente de um event manager, ele não tem tanta flexibilidade, é usado só para eventos de callback tipo, você cria um callback com uma função lambda e associa em um botão, ai toda vez que você clicka, esse callback é chamado. Isso também é usado na hora de processar os eventos internos da UI, o ponto principal é ter um bom desempenho, qualquer alteração na UI deve ser feita apenas uma única vez, quanto menos iterações desnecessárias melhor, justamente por esse motivo é usado esse sistema de callback/task.

Toda vez que é preciso redesenhar a GUI, é chamado um evento/task de redraw, isso também para layout processing, reload de um widget, atualização da stack de widgets, processar o scissor (já digo que não uso glScissor) de containers mães e dois são reservados para adicionar widgets novos e deletar da memória.

3- Widgets, bom, os widgets atuais existentes na biblioteca são: Frame, button, checkbox, label, slider, popup, e textbox. Em breve vou escrever mais widgets e melhorar a parte de temas e esquema de cores. O theme/scheme color permite você alterar a cor de tudo da UI, isso inclui string, highlight, pressed, activy, border, background etc.

Bom é isso, o projeto pode ser encontrado aqui: https://github.com/vokegpu/ekg-ui-library

🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈
🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈

Eu uso essa biblioteca em outro projeto que é uma engine PBR-based, mas não vou comentar aqui para não misturar, é isso, fico muito feliz em saber que existem pessoas que se interessam lovely por graphics programming e game programming. 🐱

Sei que a EKG está longe de ser uma biblioteca boa, mas com o tempo as coisas vão criando forma e com muito amor, as coisas se desenvolvem muito melhor. <3 🐈

🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈

Queria fazer um apelo também: Continuem com seus projetos pessoais, não deixem de fazer o que amam, programação é incrível e mesmo que ninguém entenda o que nós passamos, dias programando, o esforço que damos, dias que não se sentimos bem... o que importa é a relação entre nós e nossos queridos projetos, que nos dão propósito de viver <3 mesmo em uma selva de horrores da realidade.

🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈

Aldaron - Forest Path <- Música de fundo do vídeo

[MrsRina]

ekg-embedded-scroll-bar-ui.mp4

Agora tem scroll bar no texto, mas esse scroll bar não é unicamente do textbox, é um widget embedded, que não interage com o core da biblioteca, ele pode ser embutido em qualquer widget, em breve vou adicionar um widget chamado scroll que usa desse embedded widget para processar o scroll dentro de frames/containers.

O scroll é normalizado e escalado com um valor mínimo, não tem problema com longas linhas de texto.

The Devecote - Fort Exile
🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈 🐈

[MrsRina]

Bom outra att, eventualmente iria adicionar temas diferentes (até porque temas é uma das últimas coisas que se escolhe quando se desenvolve uma GUI), tem algumas surpresinhas novas: scroll widget, text scroll targeting, tema escuro e claro.

(essa é uma calculadora que fiz usando a biblioteca).
https://github.com/gamedevs-do-apocalipse/gamedevs-do-apocalipse/assets/37088203/bf6591ea-f08f-4cfa-8a2e-e138b97dca4a

Esse é um programa feito só com o frame da calculadora, ele é redimensionado conforme o tamanho da janela.

Em breve vai existir docking dos frames e também na atualização dos layouts dele.
Falta muitas coisas como dynamic atlas para o font renderin e escalação de fontes dinamicamente (talvez via gpu).

---

Música do fundo é de uma grande artista Brasileira chamada Onoskelis.

[Andre-LA]

Muito bom! Uma dúvida, como o leiaute é resolvido?

[MrsRina]

Existe um serviço para isso, toda vez que um widget mãe (frame) é redimensionado, é calculado as posições e tamanho de cada widget, nesse caso existe uma regra.

[MrsRina]

bom eu to sendo chata kkk mas é que eu gosto de posta coisinhas.... prioridades
agora tem prioridades de scrolling e também quando tem muitos scrolls ele deixa um espaço reservado para o scroll não interagir com outro.

A parte de criar código é simples:

auto framemaster = ekg::frame("frame mamae", {20, 20}, {200, 200});
ekg::button("botao", ekg::dock::fill | ekg::dock::next);

auto framechild = ekg::frame("frame filho", {200, 200}, ekg::dock::fill | ekg::dock::next);
// adiciona botões etc
ekg::button("botao", ekg::dock::fill | ekg::dock::next);
ekg::button("botao", ekg::dock::fill | ekg::dock::next);
ekg::button("botao", ekg::dock::fill | ekg::dock::next);
ekg::button("botao", ekg::dock::fill | ekg::dock::next);
ekg::scroll("scroll do frame child");

framemaster->add_child(framechild); // adiciona o frame filho
framemaster->add_child(ekg::scroll("scroll da mamae")); // adiciona scroll

O scroll não é necessario, é opcional. Quando colocado é preciso sempre colocar o scroll por ultimo, se você criar outros widgets, lembra de adicionar o scroll apenas no final do frame que você quer, isso inclui adicionar o scroll depois de construir a GUI com vários sub-widgets.

ekg3-scrolling-priority+frame-docking.mp4

---

Música de fundo: What World is This? - Trädvarelse

[MrsRina]

EKG rodando no meu celular (é um Samsung J2 com GLES3).

Também houve uma melhoria realmente significativa no parte de "clipamento" (scissoring) dos widgets na tela, ao invés de existir uma tarefa evento que era chamada para resolver o clip de fragmentos, agora é feito na mesma tarefa de enviar dados para o batch de renderização. Diferente de antes que precisava coletar todos os widgets filhos e também mamãe para comparar seus limites, agora é processado dinamicamente na hora de enviar os dados para o allocador (não gera um CPU-side overload) reduzindo a allocação de eventos no task-service da biblioteca.

[MrsRina]

Ações básicas e utilidades na caixa de texto mas ainda não foi otimizado 🐱
Em breve vai ser possivel escrever com um analisador semântico, com identação dinâmica palavras em tempo real 🐈
Dá para customizar tudo, desde as keybinds usadas em todos os widgets até o ctrl + a.

---

pompom-textbox-select-utils.mp4

musica de fundo é a versão piano do GUNNM

[MrsRina]

Não ficou muito explicito como funciona o sistema de cursores da caixa de texto mas ele é multi-line, por enquanto só estou usando o primário mas cada cursor tem 2 posições no texto (uma A e a outra B), quando as posições do cursor A e B estão iguais, significa que o cursor não está selecionando nenhum texto. Cada processamento de texto é feito individual por cursor, e o sistema de cursors é multi-line, isso significa que voê pode criar multiplos cursores e digitar tudo ao mesmo tempo (agindo de forma independente de cada um dos cursors).

Mas ainda contém alguns erros de texto e a renderização da caixa selecionado não é otimizada.

[MrsRina]

Performance melhorada no widget de caixa de texto, são 176K de linhas em um único widget.
Agora a renderização só começa a renderizar o texto necessário sem precisar iterar todos as linhas, em tempo real mesmo dando scroll.