Gui pisan u c

[mikikg]

Efekti i animacije u grafici nisu jednostavne jer dolazimo opet do sinhronizacije sa video/frame buffer-om, zahtev je prost ali je kompleksna realizacija posebno ako hoćeš da pokriješ više nekih tipova objekata/kontrola, problem je što ne mogu da se koriste bloking funkcije tipa delay/sleep jer bi blokirao ceo thread zbog toga nego mora da se rasparča sve u segmente i da se osvežavanje scene i objekata u njoj radi sinhrono sa predvidjenim frame-rate osvežavanja ekrana.

Konkretno ako hoćeš stvarno sa grafikom da se poigraš u nekom trenutku ćeš doći do OpenGL za Desktop ili OpenGL ES (embedded) varijanta za RPi i slične.
Tu ti je direktan frame-buffer od video kartice dostupan, imaš teksture i 3D objekte ili 2D koji su opet renda u 3D samo je drugi pogled i dodatne mehanizme za pisanje C/C++ programa i shejderi za animaciju do mile volje da kombinuješ.

OpenGL bi valjalo svako da savlada ko se bavi kompjuterskom gradfikom, lično sam "donirao" neke alate i biblioteke u Khronos Group zajednicu, radio sam biblioteku za čitanje GLTF fajl formata i Java/Android parser koji koristi OpenGL ES da te formate "izrenda, animira i prikaže" na ekranu sa sve naprednim tehnikama renderinga poput PBR, Ray-tracing i slično.
GLTF je vrlo dobar format za te stvari, on nosi sve bitne stvari u sebi, teksture, 3D objekte, definicije animacija i same animacije objekata koje mogu da se učitavaju u run-time.

https://www.khronos.org/gltf/

https://github.khronos.org/glTF-Sample-Viewer-Release/

[mikikg]

Ukratko, caka sa GLTF je ta da uzmeš lepo besplatni Blender i nacrtaš kompletan svoj GUI u njemu, sa sve animacijama, definicijom/nazivima objekata, key-frejmovima, pogled kamera, pozicija/intenzitet/boja svetla, sve može da se skocka kao scena i da exportujes kao GLTF koji tvoja APP može sa nekim bibliotekama da učita i bukvalno prikaže orendano 1:1 sa sve animacijom ako ima, i na tebi samo da logički povežeš objekte i dogadjaje (events) koji to mrdaju tamo/vamo pale/gase šta već treba ...
90% stvari si odradio na drugom mestu (u Blenderu ili AutoCad i slični) i uštedelo mnooogo truda da to radiš ti sve ispočetka, ručno ...

[mikikg]

Ovde su neki osnovni primeri sa OpenGL u C preko standardne GLUT biblioteke:
https://www.opengl.org/archives/resource...mples.html

Ovo je isto GLUT samo u C++ varijanti:
https://cs.lmu.edu/~ray/notes/openglexamples/

GLSL - tutorial o shejderima:
https://learnopengl.com/Getting-started/Shaders

Konkretno jedan minimalan primer sa Fontovima i transformacijom

Code:

/* Copyright (c) Mark J. Kilgard, 1994. */

/* This program is freely distributable without licensing fees
   and is provided without guarantee or warrantee expressed or
   implied. This program is -not- in the public domain. */

#include <string.h>
#include <stdio.h>
#include <stdarg.h>
#include <GL/glut.h>

void
bitmap_output(int x, int y, char *string, void *font)
{
  int len, i;

  glRasterPos2f(x, y);
  len = (int) strlen(string);
  for (i = 0; i < len; i++) {
    glutBitmapCharacter(font, string[i]);
  }
}

void
stroke_output(GLfloat x, GLfloat y, char *format,...)
{
  va_list args;
  char buffer[200], *p;

  va_start(args, format);
  vsprintf(buffer, format, args);
  va_end(args);
  glPushMatrix();
  glTranslatef(x, y, 0);
  glScalef(0.005, 0.005, 0.005);
  for (p = buffer; *p; p++)
    glutStrokeCharacter(GLUT_STROKE_ROMAN, *p);
  glPopMatrix();
}

void
display(void)
{
  glClear(GL_COLOR_BUFFER_BIT);
  bitmap_output(40, 35, "This is written in a GLUT bitmap font.",
    GLUT_BITMAP_TIMES_ROMAN_24);
  bitmap_output(30, 210, "More bitmap text is a fixed 9 by 15 font.",
    GLUT_BITMAP_9_BY_15);
  bitmap_output(70, 240, "                Helvetica is yet another bitmap font.",
    GLUT_BITMAP_HELVETICA_18);
  glMatrixMode(GL_PROJECTION);
  glPushMatrix();
  glLoadIdentity();
  gluPerspective(40.0, 1.0, 0.1, 20.0);
  glMatrixMode(GL_MODELVIEW);
  glPushMatrix();
  gluLookAt(0.0, 0.0, 4.0,  /* eye is at (0,0,30) */
    0.0, 0.0, 0.0,      /* center is at (0,0,0) */
    0.0, 1.0, 0.);      /* up is in postivie Y direction */
  glPushMatrix();
  glTranslatef(0, 0, -4);
  glRotatef(50, 0, 1, 0);
  stroke_output(-2.5, 1.1, "  This is written in a");
  stroke_output(-2.5, 0, " GLUT stroke font.");
  stroke_output(-2.5, -1.1, "using 3D perspective.");
  glPopMatrix();
  glMatrixMode(GL_MODELVIEW);
  glPopMatrix();
  glMatrixMode(GL_PROJECTION);
  glPopMatrix();
  glMatrixMode(GL_MODELVIEW);
  glFlush();
}

void
reshape(int w, int h)
{
  glViewport(0, 0, w, h);
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  gluOrtho2D(0, w, 0, h);
  glScalef(1, -1, 1);
  glTranslatef(0, -h, 0);
  glMatrixMode(GL_MODELVIEW);
}

int
main(int argc, char **argv)
{
  glutInit(&argc, argv);
  glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
  glutInitWindowSize(465, 250);
  glutCreateWindow("GLUT bitmap & stroke font example");
  glClearColor(1.0, 1.0, 1.0, 1.0);
  glColor3f(0, 0, 0);
  glLineWidth(3.0);
  glutDisplayFunc(display);
  glutReshapeFunc(reshape);
  glutMainLoop();
  return 0;             /* ANSI C requires main to return int. */
}

[savan]

Video si game u https://github.com/AndrewFromMelbourne/r...aster/game ? Moja ideja je da iskoristim te stvari za skroling... itd, u kombinaciji sa libgd. Libgd bi iskoristio samo da definisem objekte, onda bi te objekte renderovao sa raspidmx, tu mogu da odradim recimo neko dugme kao sto je taj game example tj taj neki efekat slajda ili rotacije. Sa libgd bi mogao da definisem sprite.png sliku kao sto je recimo taj png iz game exampla.. itd. Vec sam napravio jednu funkciju za smestanje tako pripremljenih slika u memoriju nakon generisanja sa libgd, iz memorije posle moze vrlo lako da se ucitavaju u raspidmx bez laga

Code:

static bool loadPng2(IMAGE_T* image, char *img, size_t img_sz)
{
    FILE *file = fmemopen(img, img_sz, "rb");

    if (file == NULL)
    {
        fprintf(stderr, "loadpng2: can't open file for reading\n");
        return false;
    }

    bool result = loadPngFile(image, file);

    fclose(file);

    return result;
}

Za jedan prost i lep gui mislim da je dovoljan raspidmx i da moze da se odradi to dobro i da lepo izgleda. Ne treba mi 3d rotacija i slicno, samo 2d i eventualno tako neki efekat kao na android telefonu kada swipe left-right tako da se ucita novi page..itd tako nesto najprostije sa lepom grafikom, a grafika ce da bude u png. A vec sam kompilovao celu biblioteku staticki tako da aplikacija posle moze da radi recimo i preko ubuntu os... nezavisno od os. Svestan sam da onda necu moci to isto na stm32

[savan]

Zanimljiv je taj glfw!

Ali potrebno mi je mnogo biblioteka da kompilujem, vec u startu ne postoji na apt da se downloaduje libxrandr tako da bi pola tih stvari morao da kompilujem i pitanje je dali ce mi posle toga svega i instalacije i sam x window sistem raditi kako treba.

Code:

-- Looking for IceConnectionNumber in ICE - found
CMake Error at src/CMakeLists.txt:192 (message):
  RandR headers not found; install libxrandr development package


-- Configuring incomplete, errors occurred!
See also "/root/glfw/build/CMakeFiles/CMakeOutput.log".
See also "/root/glfw/build/CMakeFiles/CMakeError.log".
root@rpi4:~/glfw# apt install libxrandr
Reading package lists... Done
Building dependency tree
Reading state information... Done
E: Unable to locate package libxrandr

ili

Code:

root@rpi4:~/glfw# apt install xrandr
Reading package lists... Done
Building dependency tree
Reading state information... Done
Package xrandr is not available, but is referred to by another package.
This may mean that the package is missing, has been obsoleted, or
is only available from another source
However the following packages replace it:
  x11-xserver-utils

E: Package 'xrandr' has no installation candidate
root@rpi4:~/glfw# apt install x11-xserver-utils
Reading package lists... Done
Building dependency tree
Reading state information... Done
x11-xserver-utils is already the newest version (7.7+8+rpi1).
x11-xserver-utils set to manually installed.

Ocigledno da je package vec instaliran ali mu fali xrandr, tako da nebi da pobrljavim postojeci operativni sistem koji dolazi uz rpi4. Cak mislim da sam negde procitao da ni ubuntu jos uvek nema pristup nativnoj grafici na rpi4 kao sto to ima standardni operativni sistem koji dolazi uz rpi4

[savan]

Gen_icons_header.c

Code:

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <inttypes.h>
#include <dirent.h>

void strip_ext(char *fname)
{
    char *end = fname + strlen(fname);

    while (end > fname && *end != '.' && *end != '\\' && *end != '/')
    {
        --end;    
    }

    if ((end > fname && *end == '.') && (*(end - 1) != '\\' && *(end - 1) != '/'))
    {
        *end = '\0';
    }  
}

void usage(char *arg)
{
    printf("Usage: %s append|new\n", arg);
}

int main(int argc, char *argv[])
{
    DIR *dir = NULL;
    struct dirent *ep = NULL;
    char *extension = NULL;
    char *fname = NULL;

    char *buf = NULL;
    char *ident = NULL;
    uint32_t i=0, file_size=0, need_comma=0;

    FILE *f_input = NULL;
    FILE *f_output = NULL;

    if (argc != 2)
    {
        usage(argv[0]);
        return 0;
    }

    if ((dir = opendir("icons")) != NULL)
    {
        while ((ep = readdir(dir)) != NULL)
        {
            /*if (ep->d_type == DT_REG)*/
            {
                if (strcmp(ep->d_name, ".") != 0 && strcmp(ep->d_name, "..") != 0)
                {
                    if ((extension = strrchr(ep->d_name, '.')) != NULL)
                    {
                        if (strcmp(extension, ".png") == 0)
                        {
                            char *filename = NULL;
                            size_t filename_sz = strlen(ep->d_name) + 6 + 1;

                            if ((filename = (char *)malloc(filename_sz)) == NULL)
                            {
                                fprintf(stderr, "%s: can't malloc %d bytes!\n", argv[0], filename_sz);
                                return -1;
                            }

                            snprintf(filename, filename_sz, "icons/%s", ep->d_name);

                            if ((f_input = fopen(filename, "rb")) == NULL)
                            {
                                fprintf(stderr, "%s: can't open %s for reading!\n", argv[0], filename);
                                free(filename);
                                return -1;
                            }

                            free(filename);

                            fseek(f_input, 0, SEEK_END);
                            file_size = ftell(f_input);
                            fseek(f_input, 0, SEEK_SET);

                            if ((buf = (char *)malloc(file_size)) == NULL)
                            {
                                fprintf(stderr, "%s: can't malloc %d bytes!\n", argv[0], file_size);
                                return -1;
                            }

                            fread(buf, file_size, 1, f_input);
                            fclose(f_input);

                            if (memcmp(argv[1], "append", 6) == 0)
                            {
                                printf("Appending icons to the saviola_icons.h header file.\n");

                                if ((f_output = fopen("include/saviola_icons.h", "a")) == NULL)
                                {
                                    fprintf(stderr, "%s: can't open include/saviola_icons.h for writing\n", argv[0]);
                                    free(buf);
                                    return -1;
                                }
                            }
                            else if (memcmp(argv[1], "new", 2) == 0)
                            {
                                printf("Cleaning saviola_icons.h header file and generating saviola_icons.h header file.\n");

                                if ((f_output = fopen("include/saviola_icons.h", "w")) == NULL)
                                {
                                    fprintf(stderr, "%s: can't open include/saviola_icons.h for writing\n", argv[0]);
                                    free(buf);
                                    return -1;
                                }
                            }
                            else
                            {
                                usage(argv[0]);
                                free(buf);
                                return 0;
                            }

                            printf("Processing: %s\n\n", ep->d_name);

                            fname = ep->d_name;
                            strip_ext(fname);
                            ident = fname;
                            need_comma = 0;

                            fprintf(f_output, "size_t %s_size = %u;\n\n", ident, file_size);
                            fprintf(f_output, "char %s[%u] = {", ident, file_size);

                            for (i = 0; i < file_size; ++i)
                            {
                                if (need_comma)
                                    fprintf(f_output, ", ");
                                else
                                    need_comma = 1;

                                if ((i % 11) == 0)
                                    fprintf(f_output, "\n\t");

                                fprintf(f_output, "0x%.2x", buf[i] & 0xff);
                            }

                            fprintf(f_output, "\n};\n\n");

                            fclose(f_output);
                            free(buf);
                        }
                    }
                }
            }
        }
    }

    closedir(dir);

    return 0;
}

Ovo sam napravio da mi sve slike iz foldera icons generise u header fajl koji kompilujem preko make. Onda slike smestim u memoriju sa loadPng2 funkcijom. Kasnije razmisljam da implementiram jednu funkciju za libgd koji ce da generise sprite.png sliku kao sto je u onom primeru iz raspidmx/game , u libgd mogu da rotiram png sliku u nekoliko uglova potrebnih za taj sprite.png pa za raspidmx rotaciju... itd, imam dosta ideja koje cu da sprovedem u delo. Ima tu jos dosta stvari da se modifikuje u raspidmx za neke finije stvari al otom potom doce i to na red

[mikikg]

Kapiram da hoćeš da smestiš sve svoje "assete" u jedan binarni izvršni fajl i zato bitmape pakuješ u header fajl.

To nije loše i generalno nije problem ali upotreba i baratanje sa tim podacima je malo problematično.

Prvo što ti asset stoji u programskoj memoriji, zauzima RAM, onda si te iste podatke učitavao u radni RAM da bi mogao da ih procesiraš i usput trošiš ogromno CPU vreme sa libGD koji tehnički nema nikakve akceleracije za grafičku obradu i na kraju te obradjene bitmape premeštaš 50/60 puta u sekundi u frame-buffer od GPU samo da se prikažu.
Pristup je totalno neefikasan, šta ako su ti asseti veliki 1MB, 10MB, 100MB i više?

Mnogo je bolja varijanta i tako je predvidjeno da radi da se asseti učitaju u VRAM od GPU, ako imaš bitmape onda su to za GPU teksture koja se jednom učita ali se zato koristi stalno samo se rade transformacije na samom GPU, CPU je potpuno oslobodjen od toga i ne troši se RAM, ima samo logika koja spaja dogadjaje kada se šta radi ali procesiranje grafike treba da se radi na GPU i svi asseti da stoje u VRAM.

[savan]

Ok kontam i ima logike. Ali zar nije to ovo https://github.com/AndrewFromMelbourne/r...aster/game ? Nemam nameru da libgd koristim 50/60 x sekundi, nego libgd mi je one time only, samo da napravi srprite lajere kao na tom gore game linku! Sve ostalo odradjuje dispanx ili ti raspidmx biblioteka koja koristi dispmanx. Moram pogledati detaljnije malo raylib, onaj njihov gui i dali je moguce zameniti one njegove asete koji su mi ruzni. Kako si ti odradio one menije na YT videu sa raylib? Pisao example ili si uzeo vec gotov?

[savan]

Moram se posvetiti i Embeded Wizardu, deluje mi mocno a ima debelu podrsku za razne platforme od stm32, microchip... tako da ako bi pravio neki projekat gde nemam rpi nego recimo rp2040 onda moram traziti nesto jednostavno a mocno za gui

[mikikg]

>>> Kako si ti odradio one menije na YT videu sa raylib? Pisao example ili si uzeo vec gotov?
Tu sam skockao svoje menu objekte, prosto četvrtasti buton + ima rešeno mouse akcije i to je sve, ostalo je moja logika koja tu pali/gasi opcije, to mi je od Lidar skener-aplikacije.
Jedina bitmapa koja je korišćena je bio logo firme : ), stavljen u header fajl pod imenom "koeficijenti" i "slučajno" sam koristio 27. 53. i 77. byte iz te arrey za "neku kalkulaciju"

[savan]

Ok. Kad budem nastavio sa razvojem gui-a okacicu ovde jedan bin za demonstraciju, cekam za koji dan mi stizu dve plocice pa cu imati posla oko njih pa tek kad to zavrsim onda konacno radim gui i zavrsavam moj amp projekat

[mikikg]

Ne mora GUI da bude explicitno 2D, može i 3D i da se koristi malo naprednije metode za rendering.

Na primer sa Physically-Based Rendering (PBR) mogu da se dobiju sjajni rezultati poput ovih koje GPU odraduje u realnom vremenu sa recimo 1% CPU zauzeća kada se krene sa interaktivnom animacijom istih po ekranu 50/60 puta u sekundi.

Pogledaj objektiv kako je iscrtao, da se naježiš, to je 3D model ...

https://marmoset.co/posts/physically-bas...u-can-too/




Da se dobije tako nešto mora da se isprocesiraju bitmape poput ovoga, pogledaj kako je to spakovano da se uštedi prostor u VRAM!

[savan]

Nebi ja to razumeo za sto godina niti imam potrebu da se bavim grafikom, treba mi nesto jednostavno u 2D

Ovako je zamisljen uredjaj, druga slika, prva slika je kako izgleda izradjen uredjaj. E sad, embeded wizard ne moze da radi u isto vreme sa x window sistemom znaci otpada solucija sa njim. Raylib moram prostudirati da vidim sta mogu sa njim ili da ovako odradim kako sam zamislio. Bitno mi je da imam overlay preko x window sistema, znaci kad kliknem neko dugme na daljinskom upravljacu otvori se overlay i prikaze nesto preko celog ekrana, i tu da dodajem gadgete da mogu i preko touch screen da radim kontrolu, znaci ukupno mi treba tri menija, glavni meni kao na slici, meni gde se podesava bass/treble/format, i jos jedan meni kada je fm radio, tu ce da bude rds/stanica i eventualno kasnije da dodam par dugmica za memorisane kanale, i to je to sto se tice gui-a na uredjaju koji mi treba. Sve ostalo sam vec implementirao i sve funkcionise. Bass/treble stigla mi je ina849 koju sam cekao 4 meseca, ostaje mi da mi stignu plocice i d zavrsavam to pre nego pocnem da radim gui i zatvorim poklopac na uredjaju.

[savan]

Odradio rotacionu masku za rotaciono dugme, u sredinu cu neki graphic i text, treba da odradim logiku smer, brzina na osnovu touch event

https://www.youtube.com/watch?v=-Px2u4OBW6g