Saltar a contenido

Paso 6: Configuración de Botones

En este paso, añadiremos todos los botones de la calculadora usando la función crear_boton() que definimos en el paso anterior. Los botones están organizados por categorías y colores para una experiencia de usuario intuitiva.

📦 Código a añadir

Añade el siguiente código antes de la línea ventana.mainloop() en tu archivo calculadora.py:

    # Fila 1: Funciones de memoria y limpieza
    crear_boton(ventana, "MC", 1, 0, memoria_limpiar, "#e74c3c", "white")
    crear_boton(ventana, "MR", 1, 1, memoria_recuperar, "#e74c3c", "white")
    crear_boton(ventana, "M+", 1, 2, memoria_sumar, "#e74c3c", "white")
    crear_boton(ventana, "M-", 1, 3, memoria_restar, "#e74c3c", "white")
    crear_boton(ventana, "C", 1, 4, limpiar, "#f39c12", "white")
    crear_boton(ventana, "←", 1, 5, borrar, "#f39c12", "white")

    # Fila 2: Funciones científicas superiores
    crear_boton(ventana, "sin", 2, 0, seno, "#3498db", "white")
    crear_boton(ventana, "cos", 2, 1, coseno, "#3498db", "white")
    crear_boton(ventana, "tan", 2, 2, tangente, "#3498db", "white")
    crear_boton(ventana, "log", 2, 3, logaritmo, "#3498db", "white")
    crear_boton(ventana, "ln", 2, 4, logaritmo_natural, "#3498db", "white")
    crear_boton(ventana, "(", 2, 5, lambda: escribir("("), "#95a5a6", "white")

    # Fila 3: Más funciones científicas
    crear_boton(ventana, "√", 3, 0, raiz_cuadrada, "#3498db", "white")
    crear_boton(ventana, "x²", 3, 1, lambda: escribir("**2"), "#3498db", "white")
    crear_boton(ventana, "xʸ", 3, 2, potencia, "#3498db", "white")
    crear_boton(ventana, "x!", 3, 3, factorial, "#3498db", "white")
    crear_boton(ventana, "%", 3, 4, porcentaje, "#3498db", "white")
    crear_boton(ventana, ")", 3, 5, lambda: escribir(")"), "#95a5a6", "white")

    # Fila 4: Constantes y división
    crear_boton(ventana, "π", 4, 0, lambda: escribir(str(math.pi)), "#9b59b6", "white")
    crear_boton(ventana, "e", 4, 1, lambda: escribir(str(math.e)), "#9b59b6", "white")
    crear_boton(ventana, "exp", 4, 2, exponencial, "#3498db", "white")
    crear_boton(ventana, "7", 4, 3, lambda: escribir("7"), "#ecf0f1", "black")
    crear_boton(ventana, "8", 4, 4, lambda: escribir("8"), "#ecf0f1", "black")
    crear_boton(ventana, "9", 4, 5, lambda: escribir("9"), "#ecf0f1", "black")

    # Fila 5: Números y multiplicación
    crear_boton(ventana, "÷", 5, 0, lambda: escribir("/"), "#34495e", "white")
    crear_boton(ventana, "×", 5, 1, lambda: escribir("*"), "#34495e", "white")
    crear_boton(ventana, "-", 5, 2, lambda: escribir("-"), "#34495e", "white")
    crear_boton(ventana, "4", 5, 3, lambda: escribir("4"), "#ecf0f1", "black")
    crear_boton(ventana, "5", 5, 4, lambda: escribir("5"), "#ecf0f1", "black")
    crear_boton(ventana, "6", 5, 5, lambda: escribir("6"), "#ecf0f1", "black")

    # Fila 6: Números y suma
    crear_boton(ventana, "+", 6, 0, lambda: escribir("+"), "#34495e", "white")
    crear_boton(ventana, "±", 6, 1, lambda: escribir("-"), "#34495e", "white")
    crear_boton(ventana, ".", 6, 2, lambda: escribir("."), "#34495e", "white")
    crear_boton(ventana, "1", 6, 3, lambda: escribir("1"), "#ecf0f1", "black")
    crear_boton(ventana, "2", 6, 4, lambda: escribir("2"), "#ecf0f1", "black")
    crear_boton(ventana, "3", 6, 5, lambda: escribir("3"), "#ecf0f1", "black")

    # Fila 7: Cero y igual
    crear_boton(ventana, "0", 7, 0, lambda: escribir("0"), "#ecf0f1", "black", ancho=3)
    crear_boton(ventana, "=", 7, 3, calcular, "#27ae60", "white", ancho=3)

    # Información en la parte inferior
    info_label = tk.Label(
        ventana, 
        text="Calculadora Científica v1.0 | Tkinter",
        bg="#2c3e50", 
        fg="#bdc3c7", 
        font=("Arial", 8)
    )
    info_label.grid(row=8, column=0, columnspan=6, pady=5)

🔍 Explicación detallada

Organización por filas y categorías

Fila 1: Memoria y Limpieza

crear_boton(ventana, "MC", 1, 0, memoria_limpiar, "#e74c3c", "white")
  • 🔴 Botones de memoria (rojo #e74c3c): MC, MR, M+, M-
  • 🟠 Botones de limpieza (naranja #f39c12): C (Clear), ← (Backspace)
  • Ubicación: Primera fila para acceso rápido a funciones de gestión

Fila 2-3: Funciones Científicas

crear_boton(ventana, "sin", 2, 0, seno, "#3498db", "white")
  • 🔵 Color azul (#3498db): Identifica funciones matemáticas avanzadas
  • Trigonométricas: sin, cos, tan
  • Logarítmicas: log (base 10), ln (logaritmo natural)
  • Especiales: √, x², xʸ, x!, %, exp
  • 🔘 Paréntesis (gris #95a5a6): ( y ) para agrupar operaciones

Fila 4-6: Números y Operadores

crear_boton(ventana, "7", 4, 3, lambda: escribir("7"), "#ecf0f1", "black")
crear_boton(ventana, "÷", 5, 0, lambda: escribir("/"), "#34495e", "white")
  • 🟣 Constantes (púrpura #9b59b6): π (pi), e (euler)
  • ⚪ Números (gris claro #ecf0f1): 0-9 con texto negro para contraste
  • ⚫ Operadores (gris oscuro #34495e): +, -, ×, ÷, ±, . (punto decimal)

Fila 7: Botones Especiales

crear_boton(ventana, "0", 7, 0, lambda: escribir("0"), "#ecf0f1", "black", ancho=3)
crear_boton(ventana, "=", 7, 3, calcular, "#27ae60", "white", ancho=3)
  • Botón 0 extendido: Ocupa 3 columnas (ancho=3) como calculadoras reales
  • 🟢 Botón igual verde (#27ae60): Destaca la función principal de cálculo
  • Ambos usan ancho=3: Mejor usabilidad y estética

🎨 Esquema de colores completo

Color Hex Categoría Botones
🔴 Rojo #e74c3c Memoria MC, MR, M+, M-
🟠 Naranja #f39c12 Limpieza C, ←
🔵 Azul #3498db Científicas sin, cos, tan, log, ln, √, x², xʸ, x!, %, exp
🟣 Púrpura #9b59b6 Constantes π, e
⚪ Gris claro #ecf0f1 Números 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
⚫ Gris oscuro #34495e Operadores +, -, ×, ÷, ±, .
🔘 Gris medio #95a5a6 Paréntesis (, )
🟢 Verde #27ae60 Igual =

🔧 Uso de funciones lambda

Muchos botones usan lambda para crear funciones anónimas simples:

lambda: escribir("7")          # Escribe el número 7
lambda: escribir("**2")        # Escribe **2 para elevar al cuadrado
lambda: escribir(str(math.pi)) # Escribe el valor numérico de pi

¿Por qué lambda? - Funciones simples: Para acciones que solo requieren una línea - Parámetros específicos: Cada botón numérico necesita escribir su propio valor - Consistencia: Todas las funciones de botón tienen la misma estructura

📏 Layout final de la calculadora

[MC] [MR] [M+] [M-] [ C] [ ←]  ← Fila 1: Memoria y limpieza
[sin][cos][tan][log][ln ] [ (]  ← Fila 2: Funciones científicas
[ √] [x²] [xʸ] [x!] [ %] [ )]  ← Fila 3: Más funciones científicas  
[ π] [ e] [exp][ 7] [ 8] [ 9]  ← Fila 4: Constantes y números
[ ÷] [ ×] [ -] [ 4] [ 5] [ 6]  ← Fila 5: Operadores y números
[ +] [±] [ .] [ 1] [ 2] [ 3]  ← Fila 6: Más operadores y números
[    0    ] [    =    ]        ← Fila 7: Cero y igual extendidos
 Calculadora Científica v1.0   ← Fila 8: Información

📋 Label informativo

info_label = tk.Label(
    ventana, 
    text="Calculadora Científica v1.0 | Tkinter",
    bg="#2c3e50", 
    fg="#bdc3c7", 
    font=("Arial", 8)
)
  • Propósito: Branding y información de versión
  • Color sutil: No distrae del contenido principal
  • Posición: Parte inferior, ocupando todo el ancho

✅ Verificación

Después de añadir este código: 1. Guarda el archivo 2. NO ejecutes todavía - necesitas completar el Paso 7 3. Verifica que no hay errores de sintaxis

➡️ Siguiente paso

Continúa con Paso 7: Bucle Principal para finalizar la calculadora y hacerla funcional.