TD7_interface_Graphique_final.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "NpRAN2UYkOiW"
   },
   "source": [
    "\n",
    "<h1><strong>Informatique 3</strong></h1> <h2><strong>TD7 : Interface Graphique - Partie 1 </strong></h2><strong>EOST - Université de Strasbourg</strong> - Licence ST - Semestre 5 - 20 décembre 2021 \n",
    "\n",
    "*Informatique 3 - D. Zigone - zigone@unistra.fr* \n",
    "\n",
    "---------\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "_dwTAG9UkOiZ"
   },
   "source": [
    "#Introduction\n",
    "\n",
    "Comme promis, on va travailler sur les interfaces graphiques. Ce TD prendra 2 séances, et est composé de deux parties. Dans la première partie, vous allez simplement suivre par étape l'utisation d'élements graphique simple. Dans la deuxième partie, vous allez construire une interface graphique pour votre programme de profilage géographique.\n",
    "\n",
    "**Note Importante :** Dans ce TD nous verons quelques outils graphiques pour des notebooks. Les notebooks sont particulièrement disdactiques et intéractifs comme vous avez pu le constater dans nos séances. Toutefois, les notebooks en lignes comme ceux que nous utilisons ne possèdent pas d'outils graphiques à proprement parlé. Il n'est pas possible d'ouvrir un figure pour ensuite y afficher des éléments. Cela limite donc les possibilités graphique de ces notebooks en ligne (type Google Colab). Il existe toutefois des solutions qui permettent malgré tout de travailler comme nous allons le voir par la suite. En revanche, il est important que vous sachiez que `Python` en natif sur un ordinateur peut faire de l'affichage graphique sans problème. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "W8dMEz3iXDOB"
   },
   "source": [
    "# 1. Les Widgets\n",
    "\n",
    "Nous vous présentons ici comment les widgets peuvent vous permettre d'enrichir vos notebooks. \n",
    "\n",
    "Dans un premier temps, il est important de charger les bonnes librairies et les bonnes dépendances : \n",
    "\n",
    "En particuliers nous aurons besoin des dépendances suivantes : \n",
    "   - `ipywidgets` : que nous importerons comme \"widgets\". Il nous faudra aussi importer directement la fonction `interact` de `ipywidgets`. \n",
    "   - `numpy` : comme dans les TDs précédents \n",
    "   - `matplotlib` : comme dans les TDs précédents il faudra importer la sous-librairie `pyplot` de `matplotlib`\n",
    "   - `random` : simplement la librairie random"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "W_l9SvNiXkoe"
   },
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from ipywidgets import interact, interactive\n",
    "import numpy as np\n",
    "import matplotlib.pyplot as plt\n",
    "import bqplot as bq\n",
    "import random "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "_zFyTKKWYlHp"
   },
   "source": [
    "## Découvrir la fonction `interact`\n",
    "\n",
    "`interact` est une fonction de la bibliothèque `ipywidgets` qui crée automatiquement un contrôle permettant l'affichage interactif de la sortie d'une fonction. C'est le moyen le plus simple de commencer avec les widgets Ipython. \n",
    "\n",
    "La méthode `interact` prend en entrée le nom de la fonction qu'elle contrôle, ainsi que les valeurs par défaut des variables d'entrée de cette fonction. En fonction de ces valeurs par défaut, le type de contrôle affiché va varier. \n",
    "\n",
    "| Variable d'entrée  |  Contrôle affiché |\n",
    "|:---|:---|\n",
    "| Un booléen | Une case à cocher  |\n",
    "| Une chaîne de caractères | Une zone de texte   |\n",
    "| Une valeur entière ou un tuple d'entiers : (min, max) ou (min, max, step) | Un curseur pour la sélection d'un entier  |\n",
    "| Une valeur réelle ou un tuple de réels : (min, max) ou (min, max, step)  |  Un curseur pour la sélection d'un flottant |\n",
    "| Une liste ou un dictionnaire | Une liste déroulante   |\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "N4UNVx14LGMq"
   },
   "source": [
    "### Un premier exemple simple avec une variable en entrée\n",
    "#### Définition d'une fonction"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "K_7T8GkWLGMq",
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "# My function\n",
    "def f(x):\n",
    "    \"\"\"\n",
    "    This function returns directly its input parameter.\n",
    "    \"\"\"\n",
    "    return x"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "FdNo_5ZiLGMq"
   },
   "source": [
    "#### `Interact` avec un entier"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 85,
     "referenced_widgets": [
      "92c92846345043c5998dff3cb8be0722",
      "6c03ff5751b44345ac4fa93918c3fac5",
      "018f2b22a1f64e49bf40ed1311a7b011",
      "6a8d805fac614ce6910b4cb3babee54a",
      "33747965cf13405995de457f2ad03a97",
      "d9e56673dc57444cb5bf5da813868013",
      "056ae5a9ad444b9092b728201c57dc96"
     ]
    },
    "executionInfo": {
     "elapsed": 801,
     "status": "ok",
     "timestamp": 1607968585150,
     "user": {
      "displayName": "Dimitri Zigone",
      "photoUrl": "",
      "userId": "10414056445206806314"
     },
     "user_tz": -60
    },
    "id": "JPil34T7LGMq",
    "outputId": "26fb4c91-30d1-4f1c-e4d6-6d5954898757"
   },
   "outputs": [],
   "source": [
    "# The input is an integer\n",
    "interact(f, x=10)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "B-ImVaBLLGMs"
   },
   "source": [
    "#### `Interact` avec un booléen"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 83,
     "referenced_widgets": [
      "7ac567cc1fc44903b33e6a181e001fbb",
      "7cc12f430e59460b905e4a77f53a6c49",
      "0f56c322ea224fb49df8147b587d1564",
      "d782e971740a448abceaf68c2b5bfcd4",
      "0ec556cb35f448009238c221f4835a49",
      "638618228e934cfebc8b1023f776a011",
      "8a14be5f1d9141b59fd05bcc87e149a2"
     ]
    },
    "executionInfo": {
     "elapsed": 772,
     "status": "ok",
     "timestamp": 1607968604784,
     "user": {
      "displayName": "Dimitri Zigone",
      "photoUrl": "",
      "userId": "10414056445206806314"
     },
     "user_tz": -60
    },
    "id": "pGMOLaXDLGMs",
    "outputId": "eeb0d6e7-90dc-492d-fbba-cec2773db06c"
   },
   "outputs": [],
   "source": [
    "# The input is a boolean\n",
    "interact(f, x=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "iwWjlNp_LGMs"
   },
   "source": [
    "#### `Interact` avec une chaîne de caractères"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 87,
     "referenced_widgets": [
      "67437a822c5c44238bb1708c8ad5bafa",
      "fabdf61fa24e48ab95339140d103b172",
      "dd91bfc447454e77b32a7400ab2b3f8a",
      "6d8fee8c4ec44080a4b4c7aac967b448",
      "069ce9507e3b47e99653a03564a0d8ec",
      "b7715886cee4473e961fe28fc8e83bd2",
      "5c72ba0b935e4a7abefe0e4b54ca3ebf"
     ]
    },
    "executionInfo": {
     "elapsed": 824,
     "status": "ok",
     "timestamp": 1607968613138,
     "user": {
      "displayName": "Dimitri Zigone",
      "photoUrl": "",
      "userId": "10414056445206806314"
     },
     "user_tz": -60
    },
    "id": "BB_vl1kcLGMs",
    "outputId": "ba8dfd94-c8b8-47b2-d75d-26b63d4b0309"
   },
   "outputs": [],
   "source": [
    "# The input is a string\n",
    "interact(f, x='My text')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "NgRGKM6yLGMs"
   },
   "source": [
    "#### `Interact` avec un dictionnaire"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 83,
     "referenced_widgets": [
      "17dfab7182f54d049d3cfe1e18417d48",
      "8164cf404e2044bf9c4760bed1c7ce11",
      "8f19fecf6e8c41fa87550d65a737660c",
      "e97fddeb05ac4ae896decda9c0c610e5",
      "08288a422e984cc0b79165a4b2ddac68",
      "74cd78d711344293952ecbdf88e4d3ae",
      "38b3ad234a8843f6ad47790efc671e0f"
     ]
    },
    "executionInfo": {
     "elapsed": 980,
     "status": "ok",
     "timestamp": 1607968623212,
     "user": {
      "displayName": "Dimitri Zigone",
      "photoUrl": "",
      "userId": "10414056445206806314"
     },
     "user_tz": -60
    },
    "id": "S2eeYo_mLGMs",
    "outputId": "b453df68-7e15-4460-d993-f69385d5beef"
   },
   "outputs": [],
   "source": [
    "# The input is a dictionnary\n",
    "interact(f, x={\"one\":1, \"two\":2, \"three\":3})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `interactive`\n",
    "\n",
    "En plus de `interact`, IPython fournit une autre fonction, `interactive`, qui est utile lorsque vous voulez réutiliser les widgets qui sont produits ou accéder aux données qui sont liées aux contrôles de l'interface utilisateur.\n",
    "\n",
    "Notez que contrairement à `interact`, la valeur de retour de la fonction ne sera pas affichée automatiquement, mais vous pouvez afficher une valeur à l'intérieur de la fonction avec `IPython.display.display`.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Voici une fonction qui affiche la somme de ses deux arguments et retourne la somme. La ligne `display` peut être omise si vous ne voulez pas afficher le résultat de la fonction."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display\n",
    "def f(a, b):\n",
    "    display(a + b)\n",
    "    return a+b"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Contrairement à `interact`, `interactive` retourne une instance de `Widget` plutôt que d'afficher immédiatement le widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = interactive(f, a=10, b=20)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Pour afficher réellement les widgets, vous pouvez utiliser la fonction `display` d'IPython."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "display(w)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "À ce stade, les contrôles de l'interface utilisateur fonctionnent comme ils le feraient si `interact` avait été utilisé. Vous pouvez les manipuler de manière interactive et la fonction sera appelée. Cependant, l'instance du widget retournée par `interactive` vous donne également accès aux arguments du mot-clé courant et à la valeur de retour de la fonction Python sous-jacente. \n",
    "\n",
    "Voici les arguments actuels du mot-clé. Si vous réexécutez cette cellule après avoir manipulé les curseurs, les valeurs auront changé."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w.kwargs"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Vous pouvez aussi extraire les résultats : "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w.result"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "9u0v9VeILGMs"
   },
   "source": [
    "### Avec plusieurs variables en entrée\n",
    "\n",
    "La fonction contrôlée par `interact` peut avoir plusieurs variables d'entrée. Dans ce cas, chacune de ces variables pourra être sélectionnée par un contrôle dédié. \n",
    "\n",
    "Exemple :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 346,
     "referenced_widgets": [
      "8267231270dd4a76847859c2fea53074",
      "e5d3a631b1f247378124099f4d3f10e3",
      "9558a5c21f6a4d07a3807e757b4f6853",
      "213c332a9ceb4bba828dfa1408a0b40a",
      "fe6f3aa6db5b4da5b17418599d04caaa",
      "c61a5be442a34389a4dbca37956e45b5",
      "1fdbd99ec4de4d0186f22892863d71fb",
      "0660662f383543a09c2880e6a769f7f8",
      "af86b65fffe9419f8b1746cd5b66bcbc",
      "af26a9e7703140e6892020afbecebc77"
     ]
    },
    "executionInfo": {
     "elapsed": 1137,
     "status": "ok",
     "timestamp": 1607968662076,
     "user": {
      "displayName": "Dimitri Zigone",
      "photoUrl": "",
      "userId": "10414056445206806314"
     },
     "user_tz": -60
    },
    "id": "ylLt_mQQLGMs",
    "outputId": "55f33b57-4f7e-4f3d-9ae5-94eef758f24e",
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "# Function definition\n",
    "def signal_plot(amplitude, color):\n",
    "    \"\"\"\n",
    "    Draw a signal plot\n",
    "    :param amplitude : signal amplitude\n",
    "    :param color : line color\n",
    "    \"\"\"\n",
    "    # Create a figure\n",
    "    fig, ax = plt.subplots(figsize=(5, 4))\n",
    "    # Add a grid\n",
    "    ax.grid(color='#EEEEEE', linewidth=2, linestyle='solid')\n",
    "    # Define the x range\n",
    "    x = np.linspace(0, 10, 1000)\n",
    "    # Plot the sinusoid\n",
    "    ax.plot(x, amplitude * np.sin(x), color=color, lw=5, alpha=0.6)\n",
    "    # Define the x and y limits\n",
    "    ax.set_xlim(0, 10)\n",
    "    ax.set_ylim(-1.1, 1.1)\n",
    "    plt.show()\n",
    "\n",
    "    \n",
    "# Interact call\n",
    "interact(signal_plot,\n",
    "         amplitude=(0, 1.0, 0.1),\n",
    "         color=['blue', 'green', 'red'])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "YpIG2MfFLGMt"
   },
   "source": [
    "La fonction `interact` est un raccourci vers un ensemble de widgets graphiques avec des choix faits par défaut selon le type d’objet (*int, float, bool, list, etc*) passé à la fonction associée. Il est possible d’avoir plus de libertés dans ces choix en paramétrant le widget à la main comme nous allons le voir maintenant."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Vous pouvez aussi utiliser `interactive` pour visualiser cette fonction : "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "z = interactive(signal_plot,\n",
    "         amplitude=(0, 1.0, 0.1),\n",
    "         color=['blue', 'green', 'red'])\n",
    "display(z)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "Dtbge5XXLGMt"
   },
   "source": [
    "## Combiner les contrôles\n",
    "\n",
    "Dans cette partie, nous allons créer une petite interface utilisateur qui permettra la visualisation de marches aléatoires. L'idée est de générer un trajet d'un nombre aléatoire de pas tiré dans un intervalle choisi par l'utilisateur, et de permettre le changement de couleur ou de style du tracé.\n",
    "\n",
    "Voici l'aperçu de ce à quoi nous voulons arriver :\n",
    "\n",
    "![](img/randomwalk_ui.png)\n",
    "\n",
    "Cette interface se compose d'un générateur de nombre aléatoire, d'un cadre central pour l'affichage graphique, et d'un panneau pour la configuration des options graphiques. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "XjJ67X9nLGMt"
   },
   "source": [
    "### Créer un générateur de nombre aléatoire\n",
    "\n",
    "L'idée ici est de combiner plusieurs contrôles afin de permettre à l'utilisateur de choisir un intervalle dans un lequel un nombre sera tiré aléatoirement. Nous avons donc besoin :\n",
    "- d'un sélecteur permettant de choisir un intervalles de nombres entiers ;\n",
    "- d'un bouton ;\n",
    "- et d'une zone de texte pour afficher le résultat.\n",
    "\n",
    "L'ensemble des contrôles disponibles dans la bibliothèque `ipywidgets` sont listés et documentés [**ici**](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "ZRtpwq7RLGMt"
   },
   "source": [
    "#### Initialisation d'un sélecteur d'entiers\n",
    "\n",
    "Pour le moment, rien de compliqué. Nous initialisons seulement le contrôle dont nous avons besoin, à savoir un `IntRangeSlider`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "bS8AKI1QQVAn"
   },
   "source": [
    "### Créer un générateur de nombre aléatoire\n",
    "\n",
    "L'idée ici est de combiner plusieurs contrôles afin de permettre à l'utilisateur de choisir un intervalle dans un lequel un nombre sera tiré aléatoirement. Nous avons donc besoin :\n",
    "- d'un sélecteur permettant de choisir un intervalles de nombres entiers ;\n",
    "- d'un bouton ;\n",
    "- et d'une zone de texte pour afficher le résultat.\n",
    "\n",
    "L'ensemble des contrôles disponibles dans la bibliothèque `ipywidgets` sont listés et documentés [**ici**](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "IybMje_OQVAo"
   },
   "source": [
    "#### Initialisation d'un sélecteur d'entiers\n",
    "\n",
    "Pour le moment, rien de compliqué. Nous initialisons seulement le contrôle dont nous avons besoin, à savoir un `IntRangeSlider`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "iEkw2h2sQVAo"
   },
   "outputs": [],
   "source": [
    "# Create a slider to select a range\n",
    "range_layout = widgets.Layout(\n",
    "    display='flex',\n",
    "    flex_flow='column',\n",
    "    height='230px',\n",
    "    width='130px'\n",
    ")\n",
    "\n",
    "my_range = widgets.IntRangeSlider(\n",
    "    description='Intervalle choisi :',\n",
    "    min=0,\n",
    "    max=10000,\n",
    "    value=(1000,5000),\n",
    "    style={'description_width': 'initial'},\n",
    "    orientation='vertical',\n",
    "    layout=range_layout\n",
    ")\n",
    "\n",
    "# display(my_range) # to show the widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "M9aPb6ziQVAo"
   },
   "source": [
    "L'intervalle choisi est accessible sous forme d'un tuple par l'attribut `value`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "ZOglpuAzQVAp",
    "outputId": "a74e0e1b-93a2-445c-de6d-dea394338a09"
   },
   "outputs": [],
   "source": [
    "my_range.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "l4dvL_InQVAq"
   },
   "source": [
    "#### Création d'un bouton\n",
    "\n",
    "Nous faison de même pour initialiser le bouton de notre interface."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "DceX-IUDQVAq"
   },
   "outputs": [],
   "source": [
    "# Create a button\n",
    "button_layout = widgets.Layout(\n",
    "    width='130px'\n",
    ")\n",
    "\n",
    "my_button = widgets.Button(\n",
    "    description='Générer',\n",
    "    button_style='', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Générer un nombre aléatoire',\n",
    "    layout=button_layout\n",
    ")\n",
    "\n",
    "# display(my_button) # to show the widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "PL0cQyj1QVAr"
   },
   "source": [
    "#### Création d'une zone de texte \n",
    "\n",
    "Nous ajoutons maintenant une zone de texte pour afficher le résultat."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "Lin0vwZfQVAr"
   },
   "outputs": [],
   "source": [
    "my_text = widgets.IntText(\n",
    "    description = 'Résultat :',\n",
    "    disabled = True,\n",
    "    style={'description_width': 'initial'},\n",
    "    layout=button_layout\n",
    ")\n",
    "\n",
    "# display(my_text) # to show the widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "mJ-AZvA0QVAr"
   },
   "source": [
    "Le contenu de cette zone de texte est accessible par l'attribut `value`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "EcD-VWFcQVAr",
    "outputId": "6d3dc5c9-d25d-46a9-b643-12b25c2fcfde"
   },
   "outputs": [],
   "source": [
    "my_text.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "WYPViziGQVAs"
   },
   "source": [
    "#### Communication des contrôles entre eux\n",
    "\n",
    "Nous voulons désormais que nos trois contrôles communiquent entre eux : au clic sur le bouton, un nombre doit être tiré dans l'intervalle du sélecteur et affiché dans le champ de résultat. \n",
    "\n",
    "Pour cela, les boutons de la bibliothèque `ipywidgets` possèdent une méthode `on_click` permettant de gérer les événements qui doivent avoir lieu au clic. Cette méthode prend en paramètre le nom de la fonction à exécuter."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "referenced_widgets": [
      "3025762b3145485da5d00d5bb5f89dbc",
      "d21b3d9a569047c99dbcd3993a26a612",
      "eac5d4e334d1408aba9c1a22ea181343"
     ]
    },
    "id": "HQGMavBqQVAt",
    "outputId": "42730413-feb1-45ac-9b60-13c59f8d8ef3",
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "def on_button_clicked(event):\n",
    "    \"\"\"\n",
    "    Function called by click on the button\n",
    "    \"\"\"\n",
    "    # Get the selected range \n",
    "    my_min = my_range.value[0]\n",
    "    my_max = my_range.value[1]\n",
    "    # If a correct range is selected\n",
    "    if(my_min < my_max):\n",
    "        # Get a random int in this range\n",
    "        my_nb = np.random.randint(my_min, my_max)\n",
    "        # Display this number in the text area\n",
    "        my_text.value = my_nb\n",
    "        # Update the button style\n",
    "        my_button.button_style = 'success'\n",
    "        my_button.icon = 'check'\n",
    "    else:\n",
    "        # Update the button style\n",
    "        my_button.button_style = 'danger'\n",
    "        my_button.icon = ''\n",
    "  \n",
    "# Define the 'on_click' event    \n",
    "my_button.on_click(on_button_clicked)\n",
    "\n",
    "# Display the three widgets\n",
    "display(my_range)\n",
    "display(my_button)\n",
    "display(my_text)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "BoGZa7hiQVAt"
   },
   "source": [
    "#### Encapsulation des contrôles \n",
    "\n",
    "Ces trois contrôles peuvent désormais être assemblés dans une boîte commune (`Box`, `VBox` ou `HBox`) qui servira à construire l'interface finale."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "O6gNwL9nQVAu"
   },
   "outputs": [],
   "source": [
    "box_layout = widgets.Layout(\n",
    "            width='135px'\n",
    ")\n",
    "\n",
    "my_LVBox = widgets.VBox(\n",
    "    [my_range, my_button, my_text],\n",
    "    layout=box_layout\n",
    ")\n",
    "\n",
    "# display(my_LVBox) # to show the widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "l8NnvlXxQVAu"
   },
   "source": [
    "### Afficher une marche aléatoire à partir du nombre généré\n",
    "\n",
    "Le résultat que nous obtenons grâce à notre générateur de nombres aléatoires va désormais nous servir au tracé d'une marche aléatoire. \n",
    "\n",
    "Tout d'abord, voici la fonction de marche aléatoire que nous utiliserons :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "s1RaBcsdQVAv"
   },
   "outputs": [],
   "source": [
    "def get_random_walk(n):  \n",
    "    \"\"\"\n",
    "    This function creates two array containing x and y coordinates of the random walk. \n",
    "    :param n : number of steps\n",
    "    \"\"\"\n",
    "    #creating two arrays for containing x and y coordinates \n",
    "    #of size equals to the number of size and filled up with 0's \n",
    "    x = np.zeros(n) \n",
    "    y = np.zeros(n) \n",
    "\n",
    "    # filling the coordinates with random variables \n",
    "    for i in range(1, n): \n",
    "        val = random.randint(1, 4) \n",
    "        if val == 1: \n",
    "            x[i] = x[i - 1] + 1\n",
    "            y[i] = y[i - 1] \n",
    "        elif val == 2: \n",
    "            x[i] = x[i - 1] - 1\n",
    "            y[i] = y[i - 1] \n",
    "        elif val == 3: \n",
    "            x[i] = x[i - 1] \n",
    "            y[i] = y[i - 1] + 1\n",
    "        else: \n",
    "            x[i] = x[i - 1] \n",
    "            y[i] = y[i - 1] - 1\n",
    "            \n",
    "    return x,y"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "bX4QQYR2QVAw"
   },
   "source": [
    "Cette fonction prend en entrée un nombre de pas et retourne deux tableaux contenant les coordonnées x et y du tracé."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "gKwOnUNUQVAx"
   },
   "source": [
    "#### `bqplot`, un \"graphique widget\"\n",
    "\n",
    "Pour afficher le tracé, nous utilisons la bibliothèque `bqplot`. Dans notre exemple, elle va nous permettre d'intéragir avec le graphique (changer le tracé, modifier la couleur, etc) sans avoir à recharger à chaque fois toute la figure (ce que `Matplotlib` nous obligerait à faire). "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "referenced_widgets": [
      "55cb9aa405434d00b82ef61e1816be08"
     ]
    },
    "id": "4ly7zbhuQVAx",
    "outputId": "f1f15a05-36bc-48cb-9f0b-1f58bc0a6c8b"
   },
   "outputs": [],
   "source": [
    "# Initialize the random walk with 0 steps\n",
    "walk_x, walk_y = get_random_walk(0)\n",
    "\n",
    "# Use linear scales\n",
    "sc_x = bq.LinearScale()\n",
    "sc_y = bq.LinearScale()\n",
    "\n",
    "# Create the line with the coordinates of the random walk\n",
    "walk = bq.Lines(x=walk_x, y=walk_y, scales={'x': sc_x,'y': sc_y}, opacities=[0.6])\n",
    "\n",
    "# Define axis\n",
    "ax_x = bq.Axis(scale=sc_x)\n",
    "ax_y = bq.Axis(scale=sc_y, orientation='vertical')\n",
    "\n",
    "# Create a figure\n",
    "fig = bq.Figure(marks=[walk], axes=[ax_x, ax_y],\n",
    "                fig_margin=dict(top=20, bottom=20, left=20, right=20))\n",
    "\n",
    "# Fix the figure size\n",
    "fig.layout.height = '450px'\n",
    "fig.layout.width = '450px'\n",
    "\n",
    "fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "CnkamgYAQVAx"
   },
   "source": [
    "#### Lier le générateur de nombre aléatoire à l'affichage graphique\n",
    "\n",
    "Maintenant, grâce à `bqplot`, nous pouvons facilement redessiner le tracé à chaque fois qu'un nouveau nombre alétoire est généré. \n",
    "\n",
    "Pour cela, nous utilisons la méthode `observe` de notre zone de texte qui permet d'appeler une fonction à chaque fois que sa valeur change. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "2XWRlGCWQVAy"
   },
   "outputs": [],
   "source": [
    "def on_value_change(change):\n",
    "    \"\"\"\n",
    "    Update the random walk when a new number is generated.\n",
    "    \"\"\"\n",
    "    # Random number\n",
    "    n = my_text.value\n",
    "    # Calculate a new random walk\n",
    "    wx, wy = get_random_walk(n)\n",
    "    # Update the plot\n",
    "    walk.x = wx\n",
    "    walk.y = wy\n",
    "    \n",
    "my_text.observe(on_value_change,'value')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "wq61CjaUQVAy"
   },
   "source": [
    "### Rendre configurable des options graphiques\n",
    "\n",
    "Dernière partie de notre interface, nous allons ajouter quelques contrôles pour pouvoir changer facilement la couleur ou/et le style du tracé."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "Y497iM2PQVAy"
   },
   "source": [
    "#### Changer la couleur du tracé"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "wu-jmgK3QVAz"
   },
   "outputs": [],
   "source": [
    "layout =  widgets.Layout(\n",
    "            display='flex',\n",
    "            flex_flow='column',\n",
    "            height='60px',\n",
    "            width='100px'\n",
    "        )\n",
    "\n",
    "my_color = widgets.Dropdown(\n",
    "    options=['blue', 'green', 'red'],\n",
    "    value='blue',\n",
    "    description='Couleur:',\n",
    "    disabled=False,\n",
    "    style={'description_width': 'initial'},\n",
    "    layout=layout\n",
    ")\n",
    "\n",
    "def on_color_change(change):\n",
    "    \"\"\"\n",
    "    Change the plot color\n",
    "    \"\"\"\n",
    "    walk.colors = [my_color.value]\n",
    "        \n",
    "my_color.observe(on_color_change, 'value')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "-XVfJYjBQVAz"
   },
   "source": [
    "#### Changer le style du tracé"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "eAQPFcGeQVAz"
   },
   "outputs": [],
   "source": [
    "my_line = widgets.Dropdown(\n",
    "    options=['solid', 'dashed', 'dotted', 'dash_dotted'],\n",
    "    value='solid',\n",
    "    description='Style des lignes:',\n",
    "    disabled=False,\n",
    "    style={'description_width': 'initial'},\n",
    "    layout=layout\n",
    ")\n",
    "\n",
    "def on_line_change(change):\n",
    "    \"\"\"\n",
    "    Change the line style\n",
    "    \"\"\"\n",
    "    walk.line_style = my_line.value\n",
    "        \n",
    "my_line.observe(on_line_change, 'value')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "YTf_Gt89QVA0"
   },
   "source": [
    "#### Ajouter une image et encapsuler les contrôles"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "IY9AZXhVQVA0"
   },
   "outputs": [],
   "source": [
    "# Open the file containing our image and read it\n",
    "with open('img/pedestrians-1209316_1920.jpg','rb') as my_file:\n",
    "    img = my_file.read()\n",
    "\n",
    "# Create an Image widget to display it in the UI\n",
    "my_img = widgets.Image(\n",
    "    value=img,\n",
    "    format='jpg'\n",
    ")\n",
    "\n",
    "# Create a box containing the three widgets\n",
    "b_layout = widgets.Layout(\n",
    "    width='200px'\n",
    ")\n",
    "\n",
    "my_RVBox = widgets.VBox(\n",
    "    children=[my_img, my_color, my_line],\n",
    "    layout=b_layout\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "uRA9NxMaQVA0"
   },
   "source": [
    "### Interface complète\n",
    "\n",
    "Ca y est, nous avons tous les morceaux de notre interface. Pour la construire, il nous suffit maintenant de les rassembler dans un `AppLayout`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "referenced_widgets": [
      "d892b09c72b942f8a80f30d0047f735b"
     ]
    },
    "id": "--s8D4BmQVA0",
    "outputId": "33bbe04f-bf2e-4a2e-c226-c5e0229f0015"
   },
   "outputs": [],
   "source": [
    "widgets.AppLayout(\n",
    "    header=None,\n",
    "    left_sidebar=my_LVBox,\n",
    "    center=fig,\n",
    "    right_sidebar=my_RVBox,\n",
    "    footer=None,\n",
    "    align_items=\"center\",\n",
    "    width='85%'\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "colab": {
   "collapsed_sections": [],
   "name": "TD7_interface_G.ipynb",
   "provenance": []
  },
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "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.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}