Interfaces Graficas De Usuarios

Tema: Programacin de una Interfaz Grfica de Procesos Markovianos y Simulacin de Pronsticos del Clima.

Integrantes: Guillermo Henrquez. Pablo Lincoqueo. Profesor: Luis Alberto Caro. Fecha: 12 de octubre de 2011.

ndice.

Contenido

pgina

Introduccin Desarrollo. Desarrollo cdigo Python.. Variables y funciones (Python)....... Desarrollo cdigo C++.... Variables y funciones C++. Conclusiones.. Referencias.

3 4 - 15 4-6 7 - 10 11 12 13 15 16 17

Introduccin
En el presente informe, se explicara cmo realizar una aplicacin que sea capaz de realizar un pronstico climtico, mediante el uso de cadenas Markovianas e interfaces graficas en dos lenguajes de programacin como Python y C, utilizando libreras especficas de cada uno de los lenguajes respectivamente PyGame y SDL. Gracias a los datos de veinticuatro muestras de temperatura y humedad por da, obtenidos mediante el uso de cadenas Markovianas de primer orden, se implementaran dos grficos que servirn para que los usuarios, puedan apreciar los datos de manera ms simplificada y dinmica, facilitando su comprensin de los mismos. Estos grficos sern incorporados a la aplicacin que a su vez contendr dos imgenes distintas, una de un sol para indicarle al usuario que el da ser soleado, y una imagen de una nube que indicara da lluvioso de esta manera se facilitara mayormente la comprensin por parte del usuario que vea esta aplicacin grfica.

Desarrollo
En el comienzo de este trabajo realizamos el clculo del estado, que es el que define si ser un da lluvioso o un da soleado, estos clculos fueron obtenidos atreves del uso del mtodo de cadenas Markovianas de primer orden, este mtodo est basado en el uso de probabilidades. Las probabilidades de que ocurra un evento dependen de lo que haya ocurrido en el evento anterior. Luego de obtener los estados de los trecientos sesenta y cinco das del ao dependiendo del tipo de estado ya sea 1(soleado), o 2 (lluvioso), se obtienen los valores randomicos con simulacin basado en muestras de temperatura y humedad en las veinticuatro horas de un da. Posteriormente a la generacin de estos valores, se procedi a la creacin de un archivo binario que obtendr todos y cada uno de los registros de estado, temperatura y humedad de cada uno de los trecientos sesenta y cinco das del ao. Posteriormente se realizara la lectura del archivo para obtener los datos guardados en el anteriormente para poder realizar los grficos que nos entregan los datos de temperatura o humedad de una manera grfica y ms simplificada para la comprensin del usuario. Debido a que nuestra simulacin consta de trecientos sesenta y cinco das, fueron generados los grficos de temperatura y de humedad respectivamente, a los datos correspondientes a cada da, dependiendo del estado al cual correspondiese dicho da ya sea estado uno (soleado) las temperaturas fluctan entre dieciocho a treinta y cinco grados Celsius, y la humedad desde 10% a 20% , o estado dos (lluvioso) donde las temperaturas varan entre menos diez grados a diez grados Celsius, y la humedad desde 20% a 80%. A su vez tambin fueron incorporadas dos imgenes para indicar el estado climtico en el cual se encuentra cada da (soleado, lluvioso). Estas imgenes tambin aparecen de forma dinmica en la aplicacin, apareciendo de izquierda a derecha en la pantalla e indicando a cual da de la simulacin corresponden. Desarrollo cdigo Python utilizando librera grfica Pygame Lo fundamental para el xito en el desarrollo de esta actividad fue plantearnos la problemtica en cuatro partes o capas, que fueron obtener los estados con el mtodo de cadenas Markovianas de primer orden mencionado anteriormente.

Para el clculo del estado utilizamos el mtodo Markoviano traspasado a lenguaje Python de la siguiente forma: X=[0 for i in range(0,365)] p=[0.2,0.8] Pxj=[[0.7,0.3], [0.4,0.6]] U=[ra.random() for i in range(0,365)] for t in range(0,365): X[t]=1*(U[t]<=p[0])+2*(U[t]>p[0]) p=Pxj[X[t]-1][:] Donde declaramos las variables X el que ser llenado con trecientos sesenta y cinco ceros. La variable p, es la probabilidad de que el clima sea soleado o lluvioso. La variable Pxj contiene la matriz con la cual se simularan los estados de los das siguientes dependiendo del resultado obtenido anteriormente. El papel de la variable U es generar nmeros randomicos entre 0 y 1 que sern guardados en un arreglo de trecientos sesenta y cinco posiciones. La siguiente fue el cmo obtener los nmeros randomicos de temperatura y humedad dependiendo del estado que se obtiene, dichos datos sern grabados en un archivo binario utilizando la estructura de la siguiente forma.

Donde atreves de un ciclo for obtenemos el rango de temperatura y humedad para el estado uno y mediante el mismo proceso para el estado dos. La tercera capa que utilizamos, fue leer datos desde el archivo por medio de la estructura anteriormente mencionada.

Nuestra cuarta capa o parte del desarrollo del programa, es generar la interfaz de los grficos en pantalla de manera dinmica. for i in range(0,365): sc.fill((0,0,0)) pinta(r2[i+1].estado,40) pinta(r2[i+2].estado,170) pinta(r2[i+3].estado,300) pinta(r2[i+4].estado,430) pinta(r2[i+5].estado,560) pinta(r2[i+6].estado,690) pinta(r2[i+7].estado,820) grado=fuente3.render("Temperatura Dia: "+str(i+1),0,(nRGB2)) sc.blit(grado,(120,260)) grado=fuente3.render("Humedad Dia: "+str(i+1),0,(nRGB2)) sc.blit(grado,(530,260)) i=i+1 gGrado(r2[i].g1,r2[i].g2,r2[i].g3,r2[i].g4,r2[i].g5,r2[i].g6,r2[i].g7,r2[i].g8,r2[i].g9,r2[i]. g10,r2[i].g11,r2[i].g12, r2[i].g13,r2[i].g14,r2[i].g15,r2[i].g16,r2[i].g17,r2[i].g18,r2[i].g19,r2[i].g20,r2[i].g21,r2[i].g22 ,r2[i].g23,r2[i].g24) gHumedad(r2[i].h1,r2[i].h2,r2[i].h3,r2[i].h4,r2[i].h5,r2[i].h6,r2[i].h7,r2[i].h8,r2[i].h9, r2[i].h10,r2[i].h11,r2[i].h12, r2[i].h13,r2[i].h14,r2[i].h15,r2[i].h16,r2[i].h17,r2[i].h18,r2[i].h19,r2[i].h20,r2[i].h21,r2[i].h2 2,r2[i].h23,r2[i].h24) El cdigo mostrado son fragmentos del total del cdigo utilizado, este trozo contiene las partes ms esenciales para el movimiento de los estados, y la representacin de los grficos de temperatura y humedad. A continuacin en los siguientes anexos, veremos algunas de las variables y funciones que nos permitieron realizar la actividad propuesta.

Salida cdigo Python.

Variables y funciones utilizadas para la realizacin de esta actividad (anexo) Funcin Cargar imagen: def Load_Image(fotito,transp=False): try: image = pygame.image.load(fotito) except pygame.error,message: raise SystemExit,message image = image.convert() if transp: color = image.get_at((0,0)) image.set_colorkey(color,RLEACCEL) return image Esta funcin es la encargada de cargar la imagen y transformarla a formato Pygame para poder utilizarse dentro de la aplicacin. Tambin tenemos la opcin de definir cierto color de la imagen como transparente, en este caso fue el color negro. Esta funcin tambin maneja los errores que se puedan producir al momento de cargar y convertir la imagen, y nos retorna la imagen lista para usarse con todos los cambios efectuados.

Funcin pinta: def pinta(imagen,x): if imagen==1: # x y # sc.blit(sol,(x,60)) if imagen==2: sc.blit(lluvia,(x,60)) return Esta funcin es la que nos cargara una imagen determinada segn el estado climtico de un da, en caso que sea estado 1 cargara la imagen sol, y en caso de ser estado 2 cargara la imagen de una nube lluviosa.

Funcin gGrado: def gGrado(g1,g2,g3,g4,g5,g6,g7, ,g24): nX=45 nY=500 nRGB=(0,255,0) grado=[g1,g2,g3,g4,g5,g6,g7,.. ,g24] for i in range(0,24): # x y x y pygame.draw.line(sc,nRGB,(nX,(nY)-5*grado[i]),(nX,nY),10) nX=nX+14 return Esta funcin es la encargada de dibujar el grfico de temperatura, dicha funcin recibe los parmetros desde el archivo binario, y asigna las coordenadas del grfico. Funcion gHumedad: def gHumedad(h1,h2,h3,h4,.. ,h24): nX=490 nY=550 nRGB=(255,0,255) nRGB2=(255,255,255) humedad=*h1,h2,h3,h4, ,h24+ for i in range(0,24): # x y x y pygame.draw.line(sc,nRGB,(nX,(nY)-3*humedad[i]),(nX,nY),10) if i<=22:

pygame.draw.line(sc,nRGB2,(nX,(nY)-3*humedad[i]),(nX+14,(nY)3*humedad[i+1]),4) nX=nX+14 return Esta funcin es la encargada de dibujar el grafico de humedad, dicha funcin recibe los parmetros desde el archivo binario, y asigna las coordenadas del grfico y dibuja el histograma referente al grfico de barras.

Estructura eReg: class eReg(ctypes.Structure): _fields_ = [ #Grado en las 24 horas# ('estado',ctypes.c_ushort),('g1',ctypes.c_short),('g2',ctypes.c_short),('g3',ctypes.c_s hort),('g4',ctypes.c_short) ,('g5',ctypes.c_short),('g6',ctypes.c_short),('g7',ctypes.c_short),('g8',ctypes.c_short) ,('g9',ctypes.c_short) ,('g10',ctypes.c_short),('g11',ctypes.c_short),('g12',ctypes.c_short),('g13',ctypes.c_s hort),('g14',ctypes.c_short) ,('g15',ctypes.c_short),('g16',ctypes.c_short),('g17',ctypes.c_short),('g18',ctypes.c_s hort),('g19',ctypes.c_short) ,('g20',ctypes.c_short),('g21',ctypes.c_short),('g22',ctypes.c_short),('g23',ctypes.c_s hort),('g24',ctypes.c_short) #Humedad durante las 24 horas# ,('h1',ctypes.c_short),('h2',ctypes.c_short),('h3',ctypes.c_short),('h4',ctypes.c_short ),('h5',ctypes.c_short),('h6',ctypes.c_short) ,('h7',ctypes.c_short),('h8',ctypes.c_short),('h9',ctypes.c_short),('h10',ctypes.c_sho rt),('h11',ctypes.c_short),('h12',ctypes.c_short) ,('h13',ctypes.c_short),('h14',ctypes.c_short),('h15',ctypes.c_short),('h16',ctypes.c_ short),('h17',ctypes.c_short),('h18',ctypes.c_short) ,('h19',ctypes.c_short),('h20',ctypes.c_short),('h21',ctypes.c_short),('h22',ctypes.c_ short),('h23',ctypes.c_short),('h24',ctypes.c_short)]

Esta estructura es la que se utiliz al momento de asignar datos al archivo, y tambin para obtener los datos desde el archivo. Contiene los datos de estado, temperatura y humedad. Algunas de las variables utilizadas en el programa: X=[0 for i in range(0,365)] nGrado=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] nHumedad=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] p=[0.2,0.8] Pxj=[[0.7,0.3], [0.4,0.6]] U=[ra.random() for i in range(0,365)] archivo = open('temperatura.txt','wb') r1=[eReg()for i in range (0,365)] nRes = (1000,600) sol = Load_Image('imagenes/sol.png',True) lluvia = Load_Image('imagenes/lluvia.png',True) leeo=open('temperatura.txt','rb') fuente3=pygame.font.Font(None,35) fuente1=pygame.font.Font(None,15) nnY=35 nRGB=(255,255,255) nRGB2=(255,255,0) nlineY=500 nnlineY=550

10

Desarrollo cdigo C++ utilizando librera grfica SDL: De la misma manera en la cual afrontamos la problemtica en lenguaje Python orientamos la solucin en lenguaje C++ con librera SDL y SDL_gfx. Para calcular el estado climtico uno (soleado), dos (lluvioso), utilizamos variables donde tambin se encuentra una matriz de dos por dos para poder utilizar el mtodo Markoviano. Variables utilizadas en el mtodo Markoviano. srand(time(NULL)); int X[365]; int U[365]; double p[]={0.2,0.8}; double Pxj[2][2]; Pxj[0][0]=0.7; Pxj[0][1]=0.3; Pxj[1][0]=0.4; Pxj[1][1]=0.6; Usando este conjunto de variables fue como traspasamos el mtodo Markoviano a lenguaje C++. Mediante un ciclo for llenamos el arreglo X con trecientos sesenta y cinco, ceros y de igual forma llenamos el arreglo U con valores randomicos entre cero y uno, trecientas sesenta y cinco veces. Y atreves del siguiente ciclo for se generan los estados climticos uno o dos. La probabilidad de que se genere cada uno de estos estados depende del estado anterior. for(t=0; t<=365; t++) { X[t]=1*(U[t]<=p[0])+2*(U[t]>p[0]); p[0]=Pxj[X[t]-1][0]; p[1]=Pxj[X[t]-1][1]; } Dependiendo de los estados climticos obtenidos, generaremos los datos de temperatura y humedad para cada da, generando una simulacin de toma de veinticuatro datos que representan todas las horas de un da.

11

Luego de haber grabado el archivo binario, atreves de la estructura generada con los datos obtenidos, se procede a leer el archivo para obtener los datos con los cuales se graficaran las temperaturas y humedades, dependiendo del estado climtico si es uno o dos. Posteriormente dichos grficos sern realizados con el siguiente cdigo:

Ac podemos observar que se entregan los parmetros obtenidos de la estructura al mtodo pinta, que es el encargado de pintar en la interfaz grfica, el estado climtico de soleado o lluvioso (uno o dos), generando un movimiento en la pantalla de izquierda a derecha, por la progresiva lectura de estados provenientes del archivo binario.

12

Salida de pantalla cdigo C++.

Variables y funciones utilizadas para la realizacin de esta actividad (anexo)

Mtodo Pinta:

Este mtodo recibe como parmetro el estado climtico, la ventana donde se mostraran los grficos, y sus coordenadas del eje X, dichos parmetros de estado devolvern sol si el estado corresponde a uno y lluvia si el estado corresponde a dos.

13

Mtodo gGrado: void gGrado(SDL_Surface *screen,int t1,int t2,int t3, int t4,.. int t24) { int grado[]={t1,t2,t3,t4,. ,t24}; int pos=0; int nY=500; for(int w=0;w<=23;w++){ boxRGBA(screen,35+pos,nY,44+pos,(nY)-5*grado[w],0,255,0,255); pos=pos+13; } return; } Este mtodo recibe como parmetro los datos de temperatura de cada uno de los das, para luego ser graficado y mostrado por pantalla.

Mtodo gHumedad: void gHumedad(SDL_Surface *screen,int h1,int h2,int h3, ., int h24) { int humedad[]={h1,h2,h3,.. ,h24}; int pos=0; int nY=555; for(int w=0;w<=23;w++){ boxRGBA(screen,480+pos,nY,489+pos,(nY)-3*humedad[w],0,255,0,255); pos=pos+13; } } Este mtodo tambin recibe como parmetro los datos de humedad de cada uno de los das para posteriormente ser mostrados por pantalla en la interfaz grfica de nuestra aplicacin.

14

Estructura eReg: struct tem{ int estado; signed char t1; signed char t2; signed char t3; signed char t4; signed char t5; signed char t6; signed char t7; signed char t8; signed char t9; signed char t10; signed char t11; signed char t12; signed char t13;signed char t14;signed char t15;signed char t16;signed char t17;signed char t18;signed char t19;signed char t20;signed char t21;signed char t22;signed char t23;signed char t24; unsigned short h1;int h2;int h3;int h4;int h5;int h6;int h7;int h8;int h9;int h10;int h11;int h12; int h13;int h14;int h15;int h16;int h17;int h18;int h19;int h20;int h21;int h22;int h23;int h24; }eReg;

15

Conclusiones C1: El uso de mtodos matemticos, incorporndolos con la informtica para solucionar problemticas cotidianas, es de gran utilidad puesto que facilitan enormemente el trabajo del programador ahorrando mucho tiempo en el desarrollo de algn software especfico. C2: La simulacin no abre una gamma posibilidades al momento de querer resolver una problemtica, puesto que no siempre contamos con los datos reales. Pero sin embargo los datos obtenidos mediante la simulacin de algn suceso nos permiten generar un modelamiento para as poder guiarnos y buscar una solucin ms acotada a un problema. C3: lo fundamental para el xito en el desarrollo de esta actividad fue plantearnos la problemtica en cuatro partes o capas, que fueron obtener los estados con el mtodo de cadenas Markovianas de primer orden mencionado anteriormente, despus obtener los datos de humedad y temperatura posteriormente debimos grabarlos en un archivo estructurado de tipo binario, para poder ser rescatados desde dicho archivo para poder realizar los grficos correspondientes, a cada uno de los estados.

16

Referencias 1.- En el siguiente sitio se obtuvo informacin sobre la librera Pygame y cmo utilizarla para poder realizar los grficos en lenguaje Python. http://www.pygame.org/docs/ 2.- Tambin utilizamos la API de Python para comprender el funcionamiento de algunas funciones. http://docs.python.org/c-api/ 3.- En el siguiente sitio se obtuvo informacin sobre la librera SDL y cmo utilizarla para poder realizar los grficos en lenguaje C. http://www.libsdl.org/intro.es/toc.html 4.- Recurrimos a la API de C para encontrar la forma de hacer algunas cosas. http://www.acm.uiuc.edu/webmonkeys/book/c_guide/

17