Edit sdlui: tutorial01: Hello World

Title:

Last edited: 8:57:06 am on 9 May 2023 by 3.0.1.3

(<a href="/Documentacion/1#sdluitutorial">Volver a la lista de tutoriales</a>)
<img src="/Documentacion/uploads/59/sdlui_tutorial01-1.png" style="width:320px;"></img> <img src="/Documentacion/uploads/59/sdlui_tutorial01-2.png" style="width:320px;"></img>
Sources:<a href="/Documentacion/uploads/59/sdlui_tutorial01.tar.gz">sdlui_tutorial01.tar.gz</a>

<div style="border: 1px solid #ccc;font-family: monospace, monospace;"><table border=0><tr><td style="text-align:right; padding-right:14px;"><tt style="font:normal normal 400 14px/normal monospace; color:#ccc;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 </tt></td><td style="overflow-x: scroll; white-space: nowrap;"><tt style="font:normal normal 400 14px/normal monospace; color:#000;">/&ast; &nbsp;&ast; sdlui_tutorial01.c &nbsp;&ast; &nbsp;&ast; "Hello World" &nbsp;&ast;/ &#35;include &lt;stdio.h&gt; &#35;include &lt;stdlib.h&gt; &#35;include &lt;unistd.h&gt; &#35;include &lt;string.h&gt; &#35;include &lt;signal.h&gt; &#35;include "sdlui.h" &#35;define DEFAULTWIDTH 320 &#35;define DEFAULTHEIGHT 200 /&ast; local vars &ast;/ volatile int flag_sigint; /&ast; local func prototypes &ast;/ static int install_signal(int num,void (&ast;f)(int)); static void sigint(int num); int main(int argc, char &ast;argv[]) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_t &ast;sdlui; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_Event event; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int flag_exit; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int neww,newh; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char &ast;actionstr, &ast;actionparams; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char &ast;p; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag_sigint=flag_exit=0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;install_signal(SIGINT,sigint); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if((sdlui=sdlui_init("sdlui tutorial 01: Hello World",DEFAULTWIDTH,DEFAULTHEIGHT))==NULL) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.l","-text \"Hello World!\" -click \"clicked\""); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill both -expand true -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(flag_sigint==0 &amp; flag_exit==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_isdirty(sdlui)) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_ghostrender(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_waitfps(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_render(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_waitfps(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_refreshevents(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(sdlui_getevent(sdlui,&event)==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_event_isquit(sdlui,&event)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag_exit=1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_event_isdirty(sdlui,&event)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_setdirty(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_event_isresize(sdlui,&event,&neww,&newh)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_resize(sdlui,neww,newh); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while((actionstr=sdlui_getactionstr(sdlui,&actionparams))!=NULL) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(strcmp(actionstr,"clicked")==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fprintf(stderr,"Clicked!\n"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_config(sdlui,_F,_L,".l","-text \"Hello World Again!\""); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_free(sdlui),sdlui=NULL; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(0); } /&ast; local func bodies &ast;/ static int install_signal(int num,void (&ast;f)(int)) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct sigaction sact; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sact.sa_handler=f; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sigemptyset(&sact.sa_mask); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sact.sa_flags=0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(sigaction(num,&sact,0)); } static void sigint(int num) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag_sigint=1; } </tt></td></tr></table></div>

A continuaci�n, se explica cada parte relevante.

! Cabecera

<div style="border: 1px solid #ccc;font-family: monospace, monospace;"><table border=0><tr><td style="text-align:right; padding-right:14px;"><tt style="font:normal normal 400 14px/normal monospace; color:#ccc;">12 13 14 15 </tt></td><td style="overflow-x: scroll; white-space: nowrap;"><tt style="font:normal normal 400 14px/normal monospace; color:#000;">&#35;include "sdlui.h" &#35;define DEFAULTWIDTH 320 &#35;define DEFAULTHEIGHT 200 </tt></td></tr></table></div>

El fichero de cabecera que hay que incluir es el "sdlui.h".

En estos momentos, el tama�o de la ventana es fijo. Para que sea f�cil modificarlo, definimos unas constantes con el tama�o deseado.

! Inicializaci�n

Necesitamos dos variables, un "sdlui_t &ast;" para guardar el manejador del ui, y un "char &ast;" para guardar temporalmente el nombre del widget reci�n creado.

La inicializaci�n de la librer�a se hace con el sdlui_init( char &ast;titulo_ventana, int ancho_ventana_px, int alto_ventana_px). En caso de que la inicializaci�n sea correcta, devuelve el manejador; en caso de error, devuelve NULL y nos salimos del programa.

! Notas sobre los widgets

A continuaci�n creamos el interfaz usando widgets.

Hay tres tipos de widgets principales:
- "label" que es un texto (opcionalmente clicable)
- "frame" que es un contenedor. Es necesario para poder agrupar cosas verticalmente u horizontalmente. Tambi�n es �til para poner diferentes tipos de bordes.
- "image" que es para poner una imagen, icono, etc.

Aparte de esos, hay widgets "compuestos", que son plantillas formadas por varios widgets para conseguir un elemento m�s complicado. Una vez definida la plantilla (que se inicializa usando la funci�n sdlui_composite_register() y luego se rellena de widgets de manera an�loga a como se hace un UI), se puede usar como si fuera un nuevo tipo de widget.

El UI se construye en forma de �rbol, y cada elemento tiene un path dentro de ese �rbol. Los elementos del path se separan por puntos ("."), y el elemento ra�z es s�lamente el ".".

Todos los elementos pueden tener hijos, y los hijos ocupan un porci�n del elemento padre.

As� pues, si queremos generar un label que cuelga del ra�z y le ponemos como nombre "l", su path ser�a ".l".

En un ejemplo m�s complicado podr�amos tener un texto "menu_1" que cuelga de un frame "barra_menu" que a su vez cuelga del ra�z. Eso nos dar�a el nombre ".barra_menu.menu_1".

Para a�adir un elemento al UI, se usa la funci�n sdlui_add(sdlui_t &ast;sdlui, char &ast;debug_file, int debug_line, char &ast;nombre, char &ast;format, ...). Tiene cinco par�metros "obligatorios", del cual el �ltimo es una cadena de formato tipo printf.

En el primer par�metro a sdlui_add() hay que poner el manejador que obtuvimos al inicializar la librer�a. Los siguientes dos par�metros se rellenan con las macros "_F,_L" y son para poder poner mensajes de error por pantalla que te permitan depurar las cadenas tipo printf. A continuaci�n est� el tipo y nombre del widget (con su path completo), separados por un dos-puntos (como en "label:.l"); para el sdlui_config() el tipo no es necesario ponerlo (basta con ".l"). El siguiente par�metro, el de formato, indica los atributos del widget.

Todos los widgets tienen unos atributos asociados (el texto de un label, la imagen de un image, el callback de un click, etc). Los atributos se pueden asignar en el momento de creaci�n con sdlui_add() o bien a�adirlos o modificarlos m�s adelante con sdlui_config().

Cada uno de los atributos se especifica con un gui�n seguido del nombre del atributo, y a continuaci�n (separado por un solo espacio), el contenido del atributo, por ejemplo "-text Hola".

El contenido del atributo puede ser:
- Un literal; si tiene espacios hay que ponerlo entre comillas, como en <tt>sdlui_add(sdlui,_F,_L,"label:.l","-text \"�Hola mundo!\"");</tt>
- Un n�mero pasado como par�metro, <tt>sdlui_add(sdlui,_F,_L,"label:.l","-text %i", 18);</tt>
- Una cadena pasada como par�metro, <tt>sdlui_add(sdlui,_F,_L,"label:.l","-text %s","�Hola mundo!")</tt>
- Un b�ffer pasado como par�metro (que en sdlui se llaman "textvariable"), <tt>char &ast;mibuffer[1024]={"Hola"}; sdlui_add(sdlui,_F,_L,"label:.l","-text %i%s", sizeof(mibuffer),mibuffer);</tt>
- Un callback junto con su userptr (NOTA:additionaldata suele ser NULL) <tt>void micallback(sdlui_t &ast;sdlui,char &ast;widgetname,void &ast;userptr,char &ast;additionaldata); ... sdlui_add(sdlui,_F,_L,"label:.l","-click %p%p", micallback,"miuserptr");</tt>
- Una imagen en un b�ffer rgba+ancho+alto (esto es s�lo un ejemplo intentando no usar m�s API que el que hemos descrito hasta el momento; la librer�a incluye funciones para el manejo de im�genes que simplifican la carga/gesti�n de im�genes usando SDLUI_ASSET(sdlui,assetname)) <tt>#include &lt;sicopng.h&gt; ... char &ast;img; int w,h; if((img=NULL)!=NULL || pngfileinfo("img.png",&w,&h)!=0 || (img=malloc(w&ast;h&ast;4))==NULL || pngfile2raw("img.png",w,h,img)!=0) &nbsp;&nbsp;free(img),img=NULL,w=0,h=0; sdlui_add(sdlui,_F,_L,"image:.l","-src %p%i%i", img, w, h);</tt>

! Creaci�n del interfaz

Hay dos fases para a�adir un widget:
1. Creaci�n del widget son sdlui_add()
2. Especificar c�mo se pone dicho widget usando sdlui_pack() (alternativa: ponerlo en una posici�n fija usando sdlui_place() y no usar sdlui_pack()&nbsp;)

Adem�s, a posteriori podemos reconfigurar el widget:
- modificar atributos con sdlui_config()

sdlui_add(): En el caso que nos ocupa, el widget tipo label tiene un atributo llamado "-text" que es el texto a poner en el label. Adem�s damos de alta otro atributo llamado "-click" que le dice una acci�n a realizar cuando se clica en el elemento. El texto lo ponemos como un literal, y en el caso de click, al poner una cadena le decimos que en vez un un callback, queremos que mande una "actionstr" al bucle principal.

sdlui_pack(): Las opciones del pack no son atributos, sino que son est�ticas. En caso de querer cambiarlas, hay que hacer un nuevo pack. Las opciones que hay que poner normalmente son:
- "-side { top | left | right | bottom }" A qu� lado del hueco que representa el widget padre, despu�s de haber quitado lo que ocupan los widgets ya empaquetados en dicho widget padre.
- "-fill { x | y | both | none }" Si se quiere que ampl�e el tama�o del widget al tama�o del hueco que queda libre o no.
- "-expand { true | false }" Es el modo "avaricioso"; los que tienen "-expand true" se llevan el espacio libre, sin dejar nada para los que tienen "-expand false".
- "-anchor { nw | n | ne | w | center | e | sw | s | se }" Las letras representan la inicial de los puntos cardinales (north, east, south, west), y esto sirve para colocar el texto o la imagen pegado/a a donde digan esas iniciales.

Para el resto de las opciones de sdlui_pack(), ver "sdlui.h".

! Refresco de la pantalla

En el bucle principal hay que poner el refresco de la pantalla. Se hace la manera que dice este c�digo para que no haya saltos en las animaciones.

- ghostrender hace los c�lculos previos y deja preparada la imagen para poner en pantalla.
- waitfps hace un sleep de los ms necesarios hasta que sea el momento del siguiente refresco (si est� a 60fps, son a lo m�s 17ms).
- render pone en pantalla la imagen que corresponde al momento actual.

! Eventos y acciones

Para obtener los eventos (tanto del gestor de ventanas como del teclado/rat�n), hay que llamar primero a sdlui_refreshevents().

Una vez hecho esto, hay que obtener evento a evento y comprobar si es alguno de los que queremos actuar, y realizar la acci�n que queramos en su caso.

Si hemos usado "actionstr" (si se han usando literales como callbacks de click, o se ha llamado a sdl_putactionstr() en alguna parte de nuestro c�digo), deberemos obtenerlas una a una y realizar las acciones que veamos convenientes en cada una de ellas.

! Salida del programa

<div style="border: 1px solid #ccc;font-family: monospace, monospace;"><table border=0><tr><td style="text-align:right; padding-right:14px;"><tt style="font:normal normal 400 14px/normal monospace; color:#ccc;">63 64 </tt></td><td style="overflow-x: scroll; white-space: nowrap;"><tt style="font:normal normal 400 14px/normal monospace; color:#000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_free(sdlui),sdlui=NULL; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(0); </tt></td></tr></table></div>

Para liberar la memoria ocupada por la librer�a, basta con llamar a sdlui_free().

- lock this page
- enter new password
- reenter same password

Send e-mail alerts to these addresses upon next save: