Chapter 5 - Interactive Applications/Lesson_1_GUI.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "ea4d9c94-cf6b-4e89-95b8-f503dc5d69f2",
   "metadata": {},
   "source": [
    "# Lesson 1: GUI"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4a80d958-5d38-49a0-8eee-bdc436f03699",
   "metadata": {},
   "source": [
    "## What is a GUI (Graphical User Interface)?\n",
    "A graphical user interface (GUI) is a type of user interface that allows users to interact with it using its graphical elements such as buttons, text input fields, selection menus, etc. GUIs pervade the modern world from desktop operating systems to mobile applications to web browsers.\n",
    "\n",
    "![https://miro.medium.com/v2/resize:fit:1400/1*I5uCg2d3Q4G4a3M-vtvI8w.jpeg](https://miro.medium.com/v2/resize:fit:1400/1*I5uCg2d3Q4G4a3M-vtvI8w.jpeg)\n",
    "\n",
    "[Image Source](https://futuretechnoindia.medium.com/graphical-user-interface-gui-and-command-line-interface-cli-c1fd7c951c39)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ed817b0b-dba6-435e-ae88-7de52bb894d3",
   "metadata": {},
   "source": [
    "## What is tkinter?\n",
    "Tkinter is a standard GUI toolkit for Python. It is the de-facto standard GUI library for Python providing a wide selection of components.\n",
    "\n",
    "Learn can learn more about it here:\n",
    "\n",
    "[https://docs.python.org/3/library/tkinter.html](https://docs.python.org/3/library/tkinter.html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "3c5fcf37-c0bf-47d7-861d-0d582372d704",
   "metadata": {},
   "outputs": [],
   "source": [
    "# NOTE: you may have to install python-tk: \n",
    "import tkinter as tk"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "54827352-5cf4-4a86-b14b-59ba157c9246",
   "metadata": {},
   "source": [
    "## Creating a Basic GUI using tkinter\n",
    "Now that we have tkinter installed, we can create a window display that contains text stating \"Hello World\"."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "cd00025e-5277-4bbf-8e16-f26b8b132e78",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Creates a window display by initializing the Tk class\n",
    "window = tk.Tk()\n",
    "# Creates a Label (text) widget\n",
    "label = tk.Label(text=\"Hello World\")\n",
    "# Organizes the label on the window \n",
    "label.pack()\n",
    "# Creates the main loop of the application which continuously listens for user input\n",
    "window.mainloop()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9f60329e-512b-4532-97f5-7e6dce4c1468",
   "metadata": {},
   "source": [
    "## Exercise 1: Create your own Tkinter Display\n",
    "\n",
    "#### Objectives\n",
    "- Create a Tkinter window display using the `tkinter` library\n",
    "- Add text onto the window display stating \"My First Display\"\n",
    "- Display the window"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "319e5301-737d-424f-a39e-89406c684db7",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "af458c06-3f82-4667-9c8c-bb09e25bcaa6",
   "metadata": {},
   "source": [
    "## Getting User Input using Tkinter\n",
    "We can use more widgets within Tkinter to get input from the user and display it onto the screen! Lets create an application that asks an user for their name and age and then prints the info onto a label."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "b52fb982-e2bf-4a73-8741-d59b0ebdf248",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "''"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Creates a window titled User Form\n",
    "window = tk.Tk()\n",
    "window.title(\"User Form\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1c9b35d8-e774-42e7-982e-f5e99e889ca4",
   "metadata": {},
   "source": [
    "## Grids within Tkinter\n",
    "One important concept to cover in terms of layouting of components within a window are grids.\n",
    "\n",
    "![https://i.stack.imgur.com/xQ71D.png](https://i.stack.imgur.com/xQ71D.png)\n",
    "\n",
    "[Image Source](https://stackoverflow.com/questions/71165564/tkinter-grid-positionning)\n",
    "\n",
    "The grid manager allows you to specify the row and column positions of widgets in the grid, as well as additional options such as padding and alignment."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "8153c984-2915-4463-ada3-728b76138e5a",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Creates two labels \"Name\" on row 0 and \"Age\" on row 1 with Padding-X of 10 and Padding-Y of 5\n",
    "# sticky=\"e\" means that the widget will stick to the east (right) edge of its grid cell\n",
    "tk.Label(window, text=\"Name:\").grid(row=0, column=0, padx=10, pady=5, sticky=\"e\")\n",
    "tk.Label(window, text=\"Age:\").grid(row=1, column=0, padx=10, pady=5, sticky=\"e\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ab623906-535d-40bf-91b6-9bff0e7420cf",
   "metadata": {},
   "source": [
    "## Creating Text Inputs\n",
    "The `Entry` widget allows us to get direct input from the user via fields.\n",
    "In the following code we create two inputs for the name and age with Padding-X of 10 and Padding-Y of 5."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "5d6f71ba-a44b-435c-a11f-7257f0576622",
   "metadata": {},
   "outputs": [],
   "source": [
    "name_entry = tk.Entry(window)\n",
    "name_entry.grid(row=0, column=1, padx=10, pady=5)\n",
    "age_entry = tk.Entry(window)\n",
    "age_entry.grid(row=1, column=1, padx=10, pady=5)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4dc52274-76f1-442b-8026-860b1373cfab",
   "metadata": {},
   "source": [
    "## Creating a Button and Action Function\n",
    "Lastly, we can add a submit button to our form using the `Button` widget.\n",
    "The code adds a \"Submit\" button on row 2 that spans 2 columns with both paddings set to 10.\n",
    "\n",
    "When this button is clicked, it triggers the `print_info` function that sets the `info_label` to display the name and age of the user."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "6536335b-771f-494a-9bf1-99ddc387f196",
   "metadata": {},
   "outputs": [],
   "source": [
    "def print_info():\n",
    "    info_label.config(text=f\"Name: {name_entry.get()}, Age: {age_entry.get()}\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "faf374e5-fd21-4799-a943-ff8d8122bf0e",
   "metadata": {},
   "outputs": [],
   "source": [
    "tk.Button(window, text=\"Submit\", command=print_info).grid(row=2, column=0, columnspan=2, padx=10, pady=10)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3f6b43c0-0292-48a4-93bc-ae9180108f16",
   "metadata": {},
   "source": [
    "## Creating Dynamic Labels\n",
    "We can place variable values into labels to show dynamic input (in this case, the user's entered name and age) onto the window after a specific action has occurred (submit button clicked)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "2a56b1e8-f9c4-4bd0-816f-18a5020e1b7c",
   "metadata": {},
   "outputs": [],
   "source": [
    "info_label = tk.Label(window, text=\"\")\n",
    "info_label.grid(row=3, column=0, columnspan=2)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "35f4f872-378b-4e63-b547-c900e415d0da",
   "metadata": {},
   "source": [
    "## Run the Application"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "22b21602-32c6-4628-bbb8-d96448b55b85",
   "metadata": {},
   "outputs": [],
   "source": [
    "window.mainloop()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d43b7cf4-f496-4f35-ae3b-fc8328691ff0",
   "metadata": {},
   "source": [
    "## Exercise 2: Create an Addition Calculator\n",
    "\n",
    "#### Objectives\n",
    "- Create a Tkinter window display using the `tkinter` library\n",
    "- Add text onto the window display stating \"Addition Calculator\"\n",
    "- Add two inputs onto the window and store the inputs into variables `number1` and `number2` respectively\n",
    "- Create a button titled \"Add\" \n",
    "- Create a Label on the window that shows the sum of `number1` and `number2` when the `Add` button is clicked\n",
    "- Display the window"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ba6c088c-282f-4bbf-a7ef-c564436f7a19",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "f163af00-1ffc-4d0f-8852-451993bb3366",
   "metadata": {},
   "source": [
    "Congrats on making it through the first lesson of the module! In the next lesson, we will work on integrating aerospace data into our GUIs."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "\"Python/Mu (mu_venv-38-20220319-163202)\"",
   "language": "python",
   "name": "mu_venv-38-20220319-163202"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.11"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}