UX dans Jupyter des composants pour votre interface
UX dans Jupyter des composants pour votre interface
Il vous ait déjà certainement arrivé d’avoir à modifier les valeurs de vos variables sur votre Notebook. Nous allons voir comment intergrer des composants ( widget ) afin de rendre les modifications de vos valeurs plus esthétique et intuitif.
En plus de tous ces avantages, vous apprendrez également les concepts d’interface utilisateur et le code de test qui gère les entrées utilisateur. Explorons quelques entrées utilisateur essentielles.
Cet article se concentrera sur l’utilisation du package ipywidgets pour gérer les entrées utilisateurs.
Installation de la bibliothèque ipywidgets
Pour installer à l’aide de pip, exécutez:
pip installer ipywidgets
Pour les utilisateurs d’Anaconda Navigator cette librairie doit déjà être installée par défaut :
Créez un nouveau Notebook et importer votre librairie comme indiqué ci-dessous :
import ipywidgets as widgets
Présentation des composants simple de ipywidgets
repr
Les widgets ont leur propre affichage repr qui leur permet d’être affichés à l’aide du cadre d’affichage d’IPython. La construction et le retour d’un IntSlider affiche automatiquement le widget (comme indiqué ci-dessous). Les widgets sont affichés dans la zone de sortie sous la cellule de code. Effacer la sortie de la cellule supprimera également le widget.
Widgets numériques
Il existe de nombreux widgets distribués avec ipywidgets qui sont conçus pour afficher des valeurs numériques. Des widgets existent pour afficher les entiers et les flottants, à la fois bornés et illimités. Les widgets entiers partagent un schéma de dénomination similaire à leurs homologues à virgule flottante. En remplaçant Float par Int dans le nom du widget, vous pouvez trouver l’équivalent Integer (entier).
Composant Slider
widgets.IntSlider()
Slider Interger avec ses paramètres:
widgets.IntSlider(
value=7,
min=0,
max=10,
step=1,
description='Test:',
disabled=False,
continuous_update=False,
orientation='horizontal',
readout=True,
readout_format='d'
)
Pour finir veuillez trouver l’intégralité du code de ce tutoriel :