J'ai essayé de créer une interface graphique interactive avec Jupyter, mais la largeur du curseur était petite et il était difficile à utiliser, et je ne savais pas comment organiser plusieurs contrôles, alors je l'ai étudié.
Vous pouvez ajuster le style avec une description de type CSS
La largeur est étroite et difficile à utiliser, je souhaite donc effectuer divers réglages
from ipywidgets import IntSlider
IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
Spécifiez une largeur de 60% et une hauteur de 100 pixels.
from ipywidgets import IntSlider, Layout
IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ",
orientation='horizontal',
layout=Layout(width='60%', height='100px'))
J'ajouterai également une bordure.
from ipywidgets import IntSlider, Layout
IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ",
orientation='horizontal',
layout=Layout(width='60%', height='100px', border='solid'))
Chaque widget a également son propre style. Par exemple, la poignée du curseur peut être colorée.
from ipywidgets import IntSlider
year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year1.style.handle_color = 'lightblue'
year1
La poignée est maintenant bleu clair.
Vous pouvez voir les styles disponibles ci-dessous.
year1.style.keys
Vous pouvez ajuster divers autres styles. La documentation officielle répertorie les styles disponibles. Layout and Styling of Jupyter widgets — Jupyter Widgets 7.5.1 documentation
Si vous disposez de plusieurs widgets, vous pouvez également les organiser en fonction de la disposition.
Les widgets peuvent être placés dans des conteneurs horizontaux (HBox) et verticaux (VBox).
from ipywidgets import IntSlider, Layout, HBox, VBox
year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year2 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2: ")
year3 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year3: ")
year4 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year4: ")
year5 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year5: ")
year6 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year6: ")
VBox([HBox([year1,year2,year3]),HBox([year4,year5,year6])])
Vous pouvez organiser les widgets dans une disposition 2x2.
from ipywidgets import IntSlider, TwoByTwoLayout
year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year2 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2: ")
year3 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year3: ")
year4 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year4: ")
TwoByTwoLayout(top_left=year1,
top_right=year2,
bottom_right=year3,
bottom_left=year4)
Vous pouvez placer des widgets sur une grille de n'importe quelle taille n x m.
from ipywidgets import IntSlider, GridspecLayout
grid = GridspecLayout(2, 3)
grid[0,0] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-1: ")
grid[0,1] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-2: ")
grid[0,2] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-3 ")
grid[1,0] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-1: ")
grid[1,1] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-2: ")
grid[1,2] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-3: ")
grid
Vous pouvez le trouver dans les documents suivants sur le site officiel. Vous pouvez également utiliser la mise en page d'application de type application. Using Layout Templates — Jupyter Widgets 7.5.1 documentation
Si vous utilisez Jupyter, vous n'avez pas besoin de créer une interface utilisateur sophistiquée, mais si vous rendez les contrôles plus faciles à utiliser ou si vous paraissez un peu mieux, ce sera plus facile à utiliser. J'espère que cela sera utile pour ceux qui veulent faire de telles choses.