lunes, 24 de agosto de 2015

Como hacer una barra de progreso

En este ejemplo mostraré como hacer la típica pantalla de carga de datos, donde aparece una barra de progreso que se va llenando según vaya cargando todos los datos.





En el ejemplo utilizamos una imagen llamada "carga.bmp", que la podéis descargar del siguiente link, archivo comprimido en RAR.

Para ello, se crea una clase llamada Barra_Progreso, que es la que se encargará de mostrar por pantalla la barra.

class Barra_Progreso
{
         BITMAP *imagen;
         // posicion donde mostrarlo
         int x,y;
         // numero total de partes en el que se divide la barra de progreso
         int total_partes;
     public:
         // inicializa los valores necesarios para la barra   
         void Inicia( BITMAP* _imagen, int _x, int _y, int _total_partes ); 
         // muestra la barra de progreso segun el valor c
         void Progreso( int c );   
};

void Barra_Progreso::Inicia( BITMAP* _imagen, int _x, int _y, int _total_partes )
{
     imagen = create_bitmap(_imagen->w, _imagen->h);
     blit ( _imagen, imagen, 0,0,0,0, _imagen->w, _imagen->h );
     x = _x;
     y = _y;
     total_partes = _total_partes;
};

void Barra_Progreso::Progreso( int c )
{
       int actual = ( c * 396 ) / total_partes;
       
       rectfill(imagen, x, y, x+actual, y+21, 0x0c2e50 ); 
       rectfill(imagen, x, y, x+actual, y+3,  0x306783 );

       blit ( imagen, screen , 0,0,0,0, imagen->w, imagen->h );

};

Esta clase utiliza:

  • una imagen, que contiene la imagen de fondo que queremos mostrar, según nuestro ejemplo mostrará carga.bmp.
  • una coordenadas (x, y), que contiene donde se inicia a pintar la barra de progreso, es decir, la esquina superior izquierda.
  • total_partes, contiene el numero total de veces que será llamado la función, según nuestro ejemplo le damos el valor 300.
Todos estos datos anteriores, son inicializados mediante el proceso Inicia que serán enviados como parámetros. 

        void Inicia( BITMAP* _imagen, int _x, int _y, int _total_partes ); 

La función Progreso es la que se encarga de mostrar por pantalla la imagen, y la barra de progreso, según el valor enviado de "c".  La variable actual contendrá el tamaño de la barra de progreso, la ecuación aqui utilizada depende de nuestra imagen, en este caso el tamaño total de la barra cuando esta al 100% es de 396 pixels.

Mediante el comando rectfill creamos la barra según el tamaño indicado por actual. 


       rectfill(imagen, x, y, x+actual, y+21, 0x0c2e50 ); 
       rectfill(imagen, x, y, x+actual, y+3,  0x306783 );

Como se puede ver, se pintan dos rectángulos. El primero se crea con un grosor de 21 pixel, y el segundo que se pinta encima del primero con un grosor de 3 pixel.

       blit ( imagen, screen , 0,0,0,0, imagen->w, imagen->h );

Y con esta instrucción muestra por pantalla la imagen con la barra de progreso.

int main() 
{ 
 allegro_init();
 install_keyboard();
 
 set_color_depth(32);
 set_gfx_mode(GFX_AUTODETECT_WINDOWED, 800, 600, 0, 0);
  
 BITMAP *fondo = load_bmp("carga.bmp", NULL);
 
 // numero de partes que tendra la barra de progreso
 int num = 300;
 
 Barra_Progreso Cargando;
   
        Cargando.Inicia( fondo, 203,525, num ); 
     
 for( int i=1; i < num; i++){
         Cargando.Progreso( i );
         rest(100);
        } 

 readkey();
 
 destroy_bitmap(fondo);
 
 return 0;
}

Inicialíza la libreria allegro, se define el tamaño de la ventana a 800x600. Se carga la imagen fondo con la imagen carga.bmp. Se crea la variable Cargando de la clase Barra_Progreso. Se inicialíza la variable con el siguiente comando.
        Cargando.Inicia( fondo, 203,525, num ); 

En el indica que imagen utilizará de fondo, y según la imagen del ejemplo donde debe ir la barra de progreso es en la coordenada 203,525.

Se realiza un bucle for para ir llamando la función Progreso de la clase Barra_Progreso, y se añade un tiempo de espera para que no sea muy rápido, ya que en este ejemplo concreto no se esta cargando nada.

Y finalmente se hace un readkey() para que se detenga el programa y espere a que se pulse una tecla para acabar.

A continuación teneís el código completo del ejemplo.

/*
  Name: Barra de Progreso
  Author: Yadok
  Date: 24/08/15 12:03
  Description: 
      Muestra una pantalla de carga con una barra de progreso.
*/

#include <allegro.h>

class Barra_Progreso
{
         BITMAP *imagen;
         // posicion donde mostrarlo
         int x,y;
         // numero total de partes en el que se divide la barra de progreso
         int total_partes;
     public:
         // inicializa los valores necesarios para la barra   
         void Inicia( BITMAP* _imagen, int _x, int _y, int _total_partes ); 
         // muestra la barra de progreso segun el valor c
         void Progreso( int c );   
};

void Barra_Progreso::Inicia( BITMAP* _imagen, int _x, int _y, int _total_partes )
{
     imagen = create_bitmap(_imagen->w, _imagen->h);
     blit ( _imagen, imagen, 0,0,0,0, _imagen->w, _imagen->h );
     x = _x;
     y = _y;
     total_partes = _total_partes;
};

void Barra_Progreso::Progreso( int c )
{
       int actual = ( c * 396 ) / total_partes;
       
       rectfill(imagen, x, y, x+actual, y+21, 0x0c2e50 ); 
       rectfill(imagen, x, y, x+actual, y+3,  0x306783 );

       blit ( imagen, screen , 0,0,0,0, imagen->w, imagen->h );

};



int main() 
{ 
 allegro_init();
 install_keyboard();
 
 set_color_depth(32);
 set_gfx_mode(GFX_AUTODETECT_WINDOWED, 800, 600, 0, 0);
  
 BITMAP *fondo = load_bmp("carga.bmp", NULL);
 
 // numero de partes que tendra la barra de progreso
 int num = 300;
 
 Barra_Progreso Cargando;
   
        Cargando.Inicia( fondo, 203,525, num ); 
     
 for( int i=1; i < num; i++){
         Cargando.Progreso( i );
         rest(100);
        } 

 readkey();
 
 destroy_bitmap(fondo);
 
 return 0;
}
END_OF_MAIN();

No hay comentarios:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...