Cómo crear una calculadora en Python con interfaz gráfica (1ª Parte)

Cómo crear una calculadora en Python con interfaz gráfica (1ª Parte)

Python es un lenguaje de programación totalmente gratuito e interpretativo. Marketers, matemáticos, ingenieros, psicólogos, o ramas tan dispares como finanzas o medicina se han sumado a la ola. En este otro artículo, te damos 3 razones para aprender a programar con python. 

Mi nombre es Antonio Alfonso Martínez, y en el siguiente artículo vamos a crear una calculadora con «python» haciendo uso del modulo «Tkinter», el cual, viene instalado en las versiones más recientes de «python».

Como solemos hacer, dividiremos el desarrollo de nuestra explicación en varias partes (2 en este caso):

En la primera parte (correspondiente al presente artículo) nos ocuparemos (en la creación de nuestra calculadora con Python) del aspecto puramente gráfico, en el cual, configuraremos el aspecto visual de nuestra calculadora e incluiremos los «widgets» (elementos gráficos destinados a la interacción del usuario con el programa) que vamos a necesitar para hacer funcionar nuestra calculadora.

En un segundo artículo, nos ocuparemos del aspecto funcional, (las operaciones y funciones necesarias para que nuestra calculadora realice las operaciones aritméticas que le pidamos).

Importaremos la librería gráfica de «python», «tkinter» la cual nos permitirá crear los distintos elementos gráficos de nuestra calculadora. También importaremos el modulo «math», que nos permitirá disponer de ciertas funciones para cálculos matemáticos como el logaritmo o la representación del número «pi».

Una vez que tenemos los módulos necesarios, pasaremos a crear los primeros elementos gráficos. Así, lo primero que haremos será crear nuestra área de trabajo (que se corresponderá con la forma de nuestra futura calculadora y que albergará los diferentes elementos gráficos referidos). A dicha área de trabajo (representada por «Tk()») vamos a darle el nombre de «ventana»:

Con «ventana» habremos creado nuestra área de trabajo. Pero también vamos a darle un nombre a dicha área. Eso lo haremos mediante la función «title», dando a nuestra «ventana» el nombre de «CALCULADORA».

Otra cosa que haremos en esta primera fase, es especificar las dimensiones de nuestra calculadora, mediante la función «geometry», de modo que hemos escogido unas dimensiones de 392×600. Introducida esta primera información, ejecutamos lo que llevamos hecho:

Nos aparece nuestra área de trabajo (lo que será nuestra calculadora) con el nombre («CALCULADORA») que le dimos mediante «title» y con las dimensiones que especificamos mediante la función «geometry».

Ya tenemos nuestra área de trabajo, pero esta se encuentra aún vacía, con lo que el siguiente paso será empezar a incluir los elementos gráficos de nuestra calculadora.

El primer elemento que vamos a incluir, en la parte superior de nuestra área de trabajo, es la «pantalla» de nuestra calculadora, en la cual se irá visualizando las operaciones que vamos a efectuar en ella, así como el resultado de dichas operaciones.

Eso lo haremos mediante una nueva variable (a la que denominamos «Salida») la cual será igual a una serie de parámetros tales como la fuente y tamaños de los caracteres que vamos a introducir en la calculadora (parámetro «font»), la anchura y tamaño de la «pantalla» (parámetros «width» y «bd»), el color de fondo de dicha «pantalla» (parámetro «bg»), el lado de la pantalla por el que aparecerán los caracteres introducidos (parámetro «justify») y las coordenadas dentro del área de trabajo en la que queremos que aparezca (en este caso) la pantalla (lo que haremos con el método «.place»).

A su vez, tenemos que especificar que todos estos elementos aparezcan en nuestra área de trabajo «ventana». Con todo esto tenemos lo siguiente:

Con lo visto hasta ahora, si ejecutamos el programa, veremos como aparece ya la calculadora con su pantalla en la parte superior:

El siguiente elemento que vamos a introducir son los botones, los cuales, ubicaremos debajo de la pantalla creada en el paso anterior.

En este caso, la función que vamos a emplear para la creación de los botones es la denominada «Button», la cual nos permitirá la creación de cada uno de los botones de nuestra calculadora (representados por sus correspondientes variables).

Para ver el modo en que lo vamos a hacer, examinaremos la manera de crear el primer botón (al que denominamos «Boton0»):

Así vemos que la variable «Boton0» es igual a un conjunto de parámetros incluidos en la función «Button» y dentro del área «ventana».

Dichos parámetros son: «text», mediante el cual indicaremos el texto que aparecerá sobre el botón (en este caso «0»), «width», con el que especificaremos el ancho del botón, el cual, en nuestro caso, hemos definido previamente mediante la variable «ancho_boton» (tal y como se ve en la imagen superior) haciéndola igual a 11. Finalmente, el parámetro «height» expresa la altura de los botones (el cual también hemos definido previamente mediante «alto_boton=3»).

Una vez especificados estos parámetros, posicionaremos el botón, mediante el método «.place» con coordenadas x=17 e y=180.

Hecho esto, ejecutamos nuestro programa y obtenemos el siguiente resultado:

Aparece, así, nuestro primer botón (el destinado al número 0). Acto seguido, continuaremos creando el resto de botones de esta primera fila, empleando el mismo procedimiento:

Con los botones «Boton0», «Boton1», «Boton2» y «Boton3» tendremos completada la primera fila de botones de nuestra calculadora en Python (observese que debido a que los botones creados hasta ahora están en la misma fila, la posición para «y» es la misma en los 4 casos (180) alterándose solo la correspondiente al eje «x»). Si ahora ejecutamos el programa obtendremos:

Pasemos, a continuación al «Boton4» el cual, al encontrarse en la siguiente fila tendrá un valor para «y» distinto, mientras que el valor para «x» ahora coincidirá con el que establecimos para el caso del «Boton0»:

De modo que si volvemos a ejecutar lo hecho hasta ahora nos aparecerá lo siguiente:

El proceso explicado aquí para la creación de botones, lo continuaremos sucesivamente para crear cada uno de los restantes botones de nuestra calculadora, donde incluiremos los botones para el resto de números y operadores:

Una vez que hemos creado todos los botones. Ejecutemos para ver cómo está quedando nuestra calculadora:

Parece que la cosa va bien. Sin embargo, nuestra calculadora resulta demasiado blanca. No hay problema, pues podemos cambiarle el color de los botones y del fondo de la calculadora mediante dos nuevas variables y parámetros:

En primer lugar, para definir el color del fondo de la calculadora (toda el área de trabajo excepto los botones y la pantalla), hacemos uso de la función «configure», con la cual, indicamos que el color del fondo («background») sea de un azul claro («SkyBlue4»). En este caso hemos denominado al color mediante su nombre, haciendo uso de una de las numerosas tablas de colores para «Tkinter» que podemos encontrar en Internet. Veamos como se ve la calculadora con ese nuevo color para el fondo:

Para el caso de los botones, hemos definido (mediante una variable a la que hemos llamado «color_boton») que el color de los botones sea un tono de gris que no desentones excesivamente con el fondo (concretamente «gray77»). Para dar color a los botones, habrá que incluir, para cada uno, un nuevo campo (denominado «bg») el cual será equivalente a la referida variable «color_boton».

Una vez introducido este nuevo dato («bg=color_boton») en cada botón, pasaremos a ejecutar, una vez más, el programa para ver el resultado:

Y así tendríamos creado el aspecto «externo» de nuestra calculadora. Ejecutando el programa, veríamos como podemos hacer «clik» sobre cada uno de los botones. Sin embargo, por el momento, nuestra calculadora tiene el pequeño problema de que no hace absolutamente nada.

Por ello, en el siguiente artículo nos encargaremos del aspecto funcional de nuestra calculadora. Introduciendo las funciones y llamadas necesarias para hacer que la calculadora efectúe las operaciones aritméticas que le pidamos.

Podéis ver el código completo de la calculadora con Python en el siguiente enlace a «Github»:

https://github.com/antonioam82/Calcu/blob/master/CALCULADORA%202.py