Chapter 5 - Interactive Applications/Lesson_5_Integrated_Applications.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "a1b66b0d-29e5-45f4-b7a4-6b0143e52e5a",
   "metadata": {},
   "source": [
    "# Lesson 5: Integrated Applications"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c572c600-a99f-48cf-9d06-6c2594260356",
   "metadata": {},
   "source": [
    "## Creating Numerical Interfaces\n",
    "Using the `Scale` widget with tkinter, we can allow the user to manually input numerical values into a GUI."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "a2ce8273-21f2-4b0e-bbb9-251bf7efb92d",
   "metadata": {},
   "outputs": [],
   "source": [
    "import tkinter \n",
    "from tkinter import ttk\n",
    "import sv_ttk"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "id": "31fffaa4-eeb2-482b-854b-3a98971be760",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "''"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Create a window\n",
    "root = tkinter.Tk()\n",
    "root.title(\"Sliders!\")\n",
    "root.geometry('500x200')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1e7d94f8-a255-48b6-88d7-d51a3e512a90",
   "metadata": {},
   "source": [
    "The following lines of code uses the `Scale` widget to display a horizontal numerical slider from 0 to 200 with a tick interval of 10. The default value of the slider is et to 40."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "id": "0df63675-3e3f-41cb-8ad6-bbbe532084c6",
   "metadata": {},
   "outputs": [],
   "source": [
    "slider = tkinter.Scale(root, from_=0, to=200,tickinterval=20, orient=tkinter.HORIZONTAL, length=400)\n",
    "slider.set(40)\n",
    "slider.pack()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "id": "b527656b-2ef8-4626-8242-89e5476338d1",
   "metadata": {},
   "outputs": [],
   "source": [
    "sv_ttk.set_theme(\"dark\")\n",
    "\n",
    "root.mainloop()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5931038f-8ac6-47b2-9365-f4915c76a98e",
   "metadata": {},
   "source": [
    "## Displaying Plots\n",
    "We can integrate the sliders with matplotlib inside a tkinter interface in order to make configurabale plots!\n",
    "In the example outlined below, we create a display containing a numerical slider which adjust the amplitude of the `sin(x)` function displayed on the matplotlib chart when a button titled \"Generate Chart\" is clicked."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 288,
   "id": "2655fc6c-96a7-43c4-953f-05888b818b45",
   "metadata": {},
   "outputs": [],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "from matplotlib.figure import Figure \n",
    "from matplotlib.backends.backend_tkagg import (FigureCanvasTkAgg,  \n",
    "NavigationToolbar2Tk) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 289,
   "id": "bdc4d9a1-4781-4645-9396-672330452089",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "''"
      ]
     },
     "execution_count": 289,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "root = tkinter.Tk()\n",
    "root.title(\"Custom sin plot\")\n",
    "root.geometry('500x800')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7e1f52b4-2e49-45d8-b120-e2591bcb7072",
   "metadata": {},
   "source": [
    "Code below creates a slider that manipulates the amplitude of our sin function. It goes from 1 to 20 with an interval of 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 290,
   "id": "604d5d21-abe9-4d2b-8ead-e886e9a808bf",
   "metadata": {},
   "outputs": [],
   "source": [
    "amplitude_slider = tkinter.Scale(root, from_=1, to=20, tickinterval=1, orient=tkinter.HORIZONTAL, length=400)\n",
    "amplitude_slider.set(1)\n",
    "amplitude_slider.pack()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 291,
   "id": "d120163d-dee4-4e7d-a075-e0f228d217a1",
   "metadata": {},
   "outputs": [],
   "source": [
    "fig = Figure(figsize = (8, 6), \n",
    "                 dpi = 100) \n",
    "canvas = FigureCanvasTkAgg(fig, master = root) "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "397d9ba6-a7e1-41e6-a04d-c99b34ad9bec",
   "metadata": {},
   "source": [
    "The following function allows us to update the plot when the \"Generate Plot\" button is clicked.\n",
    "It gets the amplitude specified by the user from the numerical slider using `amplitude = amplitude_slider.get()`.\n",
    "Then, it plots the `sin` function with the amplitude."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 293,
   "id": "c86b5d7a-6ec5-48ed-bad9-e85dd95d8728",
   "metadata": {},
   "outputs": [],
   "source": [
    "def generate_plot(canvas, fig):\n",
    "    if fig:\n",
    "        fig.clear()\n",
    "        \n",
    "    amplitude = amplitude_slider.get()\n",
    "    x = np.linspace(0, 10, 100)\n",
    "    y = amplitude * np.sin(x)\n",
    "\n",
    "    plot = fig.add_subplot(111)\n",
    "\n",
    "    plot.plot(x, y)\n",
    "    \n",
    "    canvas.draw() "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 294,
   "id": "b4b18b91-0107-4837-aa20-3edf78f840b4",
   "metadata": {},
   "outputs": [],
   "source": [
    "plot_button = ttk.Button(root, text=\"Generate Plot\", command=lambda: generate_plot(canvas, fig))\n",
    "plot_button.pack()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 295,
   "id": "6303417c-be86-4728-b3dc-700d5f60841b",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas.get_tk_widget().pack()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 296,
   "id": "c7cac00f-04ee-4d29-b7e3-681b7afa0a51",
   "metadata": {},
   "outputs": [],
   "source": [
    "generate_plot(canvas, fig)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 298,
   "id": "af97603d-b0be-4e18-9305-8cb1d13fb2ac",
   "metadata": {},
   "outputs": [],
   "source": [
    "sv_ttk.set_theme(\"dark\")\n",
    "\n",
    "root.mainloop()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "da01316b-a513-4dfb-afc3-2a8d61d45fe1",
   "metadata": {},
   "source": [
    "## Exporting Data File\n",
    "Now, that we have a plot of sin(x) showing, let's create another button within the application that downloads each of the points on the sin(x) plot into a csv file titled \"plot.csv\"."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "7497f352-fb78-4c11-b9a6-0ca619bdb500",
   "metadata": {},
   "outputs": [],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "from matplotlib.figure import Figure \n",
    "from matplotlib.backends.backend_tkagg import (FigureCanvasTkAgg,  \n",
    "NavigationToolbar2Tk) \n",
    "import tkinter \n",
    "from tkinter import ttk\n",
    "import sv_ttk\n",
    "\n",
    "root = tkinter.Tk()\n",
    "root.title(\"Custom sin plot\")\n",
    "root.geometry('500x800')\n",
    "\n",
    "amplitude_slider = tkinter.Scale(root, from_=1, to=20, tickinterval=1, orient=tkinter.HORIZONTAL, length=400)\n",
    "amplitude_slider.set(1)\n",
    "amplitude_slider.pack()\n",
    "\n",
    "fig = Figure(figsize = (8, 6), \n",
    "                 dpi = 100) \n",
    "canvas = FigureCanvasTkAgg(fig, master = root) \n",
    "\n",
    "def generate_plot(canvas, fig):\n",
    "    if fig:\n",
    "        fig.clear()\n",
    "        \n",
    "    amplitude = amplitude_slider.get()\n",
    "    x = np.linspace(0, 10, 100)\n",
    "    y = amplitude * np.sin(x)\n",
    "\n",
    "    plot = fig.add_subplot(111)\n",
    "\n",
    "    plot.plot(x, y)\n",
    "    \n",
    "    canvas.draw() \n",
    "\n",
    "plot_button = ttk.Button(root, text=\"Generate Plot\", command=lambda: generate_plot(canvas, fig))\n",
    "plot_button.pack()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a4a4ff15-cfb1-433c-9bc6-e9218bd245bc",
   "metadata": {},
   "source": [
    "## Adding a Download File Button\n",
    "The following code defines a `download_csv` function which saves the plot data coordinates `(x, sin(x))` using `csv.DictWriter`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "dbf68877-4719-4a74-b4ff-103e2988a1c1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import csv\n",
    "\n",
    "def download_csv():\n",
    "    amplitude = amplitude_slider.get()\n",
    "    x = np.linspace(0, 10, 100)\n",
    "    \n",
    "    with open('download.csv', 'w', newline='') as file:\n",
    "        writer = csv.DictWriter(file, fieldnames=['x', 'y'])\n",
    "        writer.writeheader()\n",
    "        for i in range(len(x)):\n",
    "            y = amplitude * np.sin(x[i])\n",
    "            writer.writerow({'x': x[i], 'y': y})\n",
    "\n",
    "download_button = ttk.Button(root, text=\"Download CSV\", command=download_csv)\n",
    "download_button.pack()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "f144fa8a-1d4d-48cd-8253-63dc1f8be2a5",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas.get_tk_widget().pack()\n",
    "\n",
    "generate_plot(canvas, fig)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2192d880-3f0a-4f59-9710-1c5cd1fdf8b1",
   "metadata": {},
   "outputs": [],
   "source": [
    "sv_ttk.set_theme(\"dark\")\n",
    "\n",
    "root.mainloop()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "93bc6319-9440-4b79-95fb-b72688b662da",
   "metadata": {},
   "source": [
    "## Exercise 1: Create an Interactive Line Plot GUI\n",
    "\n",
    "#### Objectives\n",
    "- Create a tkinter window with the Sun Valley theme\n",
    "- Embed a numerical slider that takes in a number from 1 to 10\n",
    "- Create a button called \"Create Graph\"\n",
    "- Create a plot using matplotlib of a standard line with a slope\n",
    "```\n",
    "x = np.linspace(0, 10, 100)\n",
    "y = m * x\n",
    "```\n",
    "- When the button is clicked, adjust the slope of the plot to the input of the numerical slider\n",
    "- Add another button titled \"Download Data\" which downloads the point coordinates of the graph into a csv file titled `slope.csv`\n",
    "- Display the window"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "88c0502d-06b2-4348-b553-fa06a98ce515",
   "metadata": {},
   "outputs": [],
   "source": [
    "import tkinter \n",
    "from tkinter import ttk\n",
    "import sv_ttk\n",
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "from matplotlib.figure import Figure \n",
    "from matplotlib.backends.backend_tkagg import (FigureCanvasTkAgg,  \n",
    "NavigationToolbar2Tk) \n",
    "import csv"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "98782127-1505-413a-a20a-078ae73057d0",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "d5b6721c-d6e7-459b-b53d-8906e1aa020a",
   "metadata": {},
   "source": [
    "Congratulations! You have officially completed the final lesson of this course! Now, we will move onto the final project where you will create a satellite trajectory monitoring web application using tkinter and matplotlib!"
   ]
  }
 ],
 "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
}