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 :

librairie ipywidgets sous anaconda navigator

Créez un nouveau Notebook et importer votre librairie comme indiqué ci-dessous :

import ipywidgets as widgets

import ipywidgets as widgets sous jupyter

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 :

https://gist.github.com/ideva-SAS/099c0b256e832da07f30ea9366c1b8b3
19 mai 2021