{"id":3776,"date":"2022-03-18T13:15:20","date_gmt":"2022-03-18T05:15:20","guid":{"rendered":"https:\/\/egonlin.com\/?p=3776"},"modified":"2022-03-18T13:15:20","modified_gmt":"2022-03-18T05:15:20","slug":"%e7%ac%ac%e4%ba%8c%e8%8a%82%ef%bc%9aipywidgets","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=3776","title":{"rendered":"\u7b2c\u4e8c\u8282\uff1aipywidgets"},"content":{"rendered":"

ipywidgets<\/h1>\n

ipywidgets\u53ef\u4ee5\u7528\u4e8e\u5728jupyter notebook\u5f53\u4e2d\u8fdb\u884c\u754c\u9762\u8bbe\u8ba1\uff0c\u4ee5\u53ca\u4e00\u4e9b\u7b80\u5355\u7684\u4ea4\u4e92\u5f0f\u63a7\u4ef6\u64cd\u4f5c\u3002<\/p>\n

\u5b98\u65b9\u6587\u6863\u6709\u8be6\u7ec6\u4ecb\u7ecd\uff0c\u672c\u6587\u4e3b\u8981\u5c06\u5e38\u7528\u7684\u90e8\u4ef6\u8fdb\u884c\u4e86\u6f14\u793a\uff0c\u5982\u9700\u8be6\u7ec6\u7814\u7a76\uff0c\u8bf7\u79fb\u6b65\u5b98\u65b9\u6587\u6863ipywidgets<\/a><\/p>\n

\u4e00\u3001\u5b89\u88c5<\/h2>\n
pip install ipywidgets<\/code><\/pre>\n
\u4e8c\u3001\u57fa\u7840\u65b9\u6cd5<\/h2>\n
1\u3001\u6ed1\u5757interact<\/h3>\n
interact\u65b9\u6cd5\u53ef\u4ee5\u5b9e\u73b0\u4e00\u4e9b\u57fa\u7840\u7684\u4ea4\u4e92\u5f0f\u63a7\u4ef6,\u53ef\u4ee5\u81ea\u52a8\u751f\u6210\u51fd\u6570\u53c2\u6570\u7684UI\u63a7\u4ef6\u3002<\/p>\n
from ipywidgets import interact,fixed\n\n# \u5b9a\u4e49\u4e00\u4e2a\u53ef\u4f9b\u64cd\u4f5c\u7684\u51fd\u6570\ndef foo(x):\n    return x<\/code><\/pre>\n
\n
\u5f53\u4f20\u9012\u4e00\u4e2a\u53c2\u6570x=10,\u4f1a\u751f\u6210\u4e00\u4e2a\u6ed1\u5757\u5e76\u4e14\u7ed1\u5b9a\u5230\u51fd\u6570\u53c2\u6570<\/p>\n<\/blockquote>\n
interact(foo,x=10)<\/code><\/pre>\n
\n
\u4f20\u9012\u5e03\u5c14\u503c\uff0c\u751f\u6210\u590d\u9009\u6846<\/p>\n<\/blockquote>\n
interact(foo,x=True)<\/code><\/pre>\n
\n
\u4f20\u9012\u5b57\u7b26\u4e32\uff0c\u751f\u6210\u6587\u672c\u6846<\/p>\n<\/blockquote>\n
interact(foo,x="hello world")<\/code><\/pre>\n
\n
\u4f20\u9012\u5217\u8868\uff0c\u751f\u6210\u4e0b\u62c9\u6846<\/p>\n<\/blockquote>\n
interact(foo,x=['a','b','c','d'])<\/code><\/pre>\n
\n
\u4f20\u9012\u5b57\u5178\uff0c\u751f\u6210\u4e0b\u62c9\u6846\uff0c\u952e\u503c\u5bf9\u5e94<\/p>\n<\/blockquote>\n
interact(foo,x={"a":1,"b":2,"c":3})<\/code><\/pre>\n
\n
\u4f20\u9012\u5143\u7ec4\uff0c\uff08min,max,step\uff09\u6700\u5c0f\u503c\uff0c\u6700\u5927\u503c\uff0c\u6b65\u957f<\/p>\n<\/blockquote>\n
interact(foo,x=(1,9,1))<\/code><\/pre>\n
\u8865\u5145\uff1a\u8fd8\u53ef\u4ee5\u4f7f\u7528\u6d6e\u70b9\u6570\uff0c\u751f\u6210\u6d6e\u70b9\u6570\u6ed1\u5757\u3002<\/p>\n
\u4ee5\u4e0a\u65b9\u6cd5\u90fd\u662f\u5c06\u4e00\u4e2a\u53c2\u6570\u751f\u6210\u4e3a\u7279\u5b9a\u503c\uff0c\u5f53\u9700\u8981\u591a\u4e2a\u53c2\u6570\u65f6\u5c31\u9700\u8981\u7528\u5230fixed<\/code><\/strong>\u53c2\u6570\u3002<\/p>\n
def func(p,q):\n    return (p,q)\n\ninteract(func,p=5,q=fixed(20))  # \u8bbe\u5b9a20\u4e3a\u56fa\u5b9a\u503c<\/code><\/pre>\n
\"\"<\/div><\/p>\n
2\u3001\u6309\u94ae<\/h3>\n
import ipywidgets as widgets\nfrom ipywidgets import Layout<\/code><\/pre>\n
1\u3001button\uff08\u666e\u901a\u6309\u94ae\uff09<\/h4>\n
widgets.Button(\n    description='\u70b9\u6211\u554a\uff01\uff01\uff01',  # \u6309\u94ae\u63d0\u793a\n    disabled=False,\n    button_style='info', # 'success', 'info', 'warning', 'danger' or '' \u6309\u94ae\u6837\u5f0f\n    tooltip='Click me',\n    layout = Layout(width="98%",height="50px"),  # \u6309\u94ae\u5927\u5c0f\u8c03\u6574\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
2\u3001ToggleButton\uff08\u5e03\u5c14\u503c\u6309\u94ae\uff09<\/h4>\n
\u7528\u4e8e\u663e\u793a\u5e03\u5c14\u503c<\/p>\n
widgets.ToggleButton(\n    value=False,\n    description='\u70b9\u6211\uff01\uff01',\n    disabled=False,\n    button_style='warning', # 'success', 'info', 'warning', 'danger' or ''\n    tooltip='Description',\n    icon='check',\n    layout = Layout(width="60%",height='30px')\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
3\u3001RadioButtons\uff08\u5355\u9009\u6309\u94ae\uff09<\/h4>\n
widgets.RadioButtons(\n    options=['numpy', 'pandas', 'matplotlib'],\n#     value='pineapple',\n    description='',\n    disabled=False\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
4\u3001ToggleButtons<\/h4>\n
widgets.ToggleButtons(\n    options=['numpy', 'pandas', 'matplotlib'],\n    description='Speed:',\n    disabled=False,\n    button_style='success', # 'success', 'info', 'warning', 'danger' or ''\n#     tooltips=['Description of slow', 'Description of regular', 'Description of fast'],\n#     icons=['check'] * 3\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
3\u3001\u9009\u62e9\u5c0f\u90e8\u4ef6<\/h3>\n
1\u3001Dropdown\uff08\u4e0b\u62c9\u6846\uff09<\/p>\n
widgets.Dropdown(\n    options=['1', '2', '3'],\n    value='2',\n    description='Number:',\n    disabled=False,\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
2\u3001Select\uff08\u5355\u9009\u6846\uff09<\/p>\n
widgets.Select(\n    options=['Linux', 'Windows', 'OSX'],\n    value='OSX',\n    # rows=10,\n    description='OS:',\n    disabled=False\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
3\u3001SelectionSlider\uff08\u6ed1\u52a8\u90e8\u4ef6\uff09<\/p>\n
widgets.SelectionSlider(\n    options=['low level', 'ordinary', 'well', 'excellent'],\n    value='ordinary',\n    description='\u6211\u7684Python\u7b49\u7ea7',\n    disabled=False,\n    continuous_update=False,\n    orientation='horizontal',\n    readout=True\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
4\u3001SelectMultiple\uff08\u590d\u9009\u6846\uff09<\/p>\n
widgets.SelectMultiple(\n    options=['Apples', 'Oranges', 'Pears'],\n    value=['Oranges'],\n    #rows=10,\n    description='Fruits',\n    disabled=False\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
3\u3001\u8fdb\u5ea6\u6761<\/h3>\n
1\u3001IntProgress (\u6574\u6570\u578b\u8fdb\u5ea6\u6761)<\/h4>\n
widgets.IntProgress(\n    value=5,  # \u8fdb\u5ea6\u6761\u6570\u503c\n    min=0,\n    max=10,\n    step=1,\n    description='Loading:',\n    bar_style='danger', # 'success', 'info', 'warning', 'danger' or ''\n    orientation='horizontal'\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
2\u3001FloatProgress (\u6d6e\u70b9\u578b\u8fdb\u5ea6\u6761)<\/h4>\n
widgets.FloatProgress(\n    value=5.5,\n    min=0,\n    max=10.0,\n    step=0.1,\n    description='Loading:',\n    bar_style='warning',\n    orientation='horizontal'\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
4\u3001\u6587\u672c<\/h3>\n
1\u3001Text(\u56fa\u5b9a\u5927\u5c0f)<\/h4>\n
widgets.Text(\n    value='Hello World',\n    placeholder='Type something',\n    description='String:',\n    disabled=False\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
2\u3001Textarea(\u53ef\u62c9\u4f38)<\/h4>\n
widgets.Textarea(\n    value='Hello World',\n    placeholder='Type something',\n    description='String:',\n    disabled=False\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
3\u3001BoundedIntText\u3001BoundedFloatText\uff08\u9650\u503c\u6587\u672c\uff09<\/h4>\n
# \u6574\u6570\nwidgets.BoundedIntText(\n    value=7,\n    min=0,\n    max=10,\n    step=1,\n    description='Text:',\n    disabled=False\n)\n# \u6d6e\u70b9\u6570\nwidgets.BoundedFloatText(\n    value=7.5,\n    min=0,\n    max=10.0,\n    step=0.1,\n    description='Text:',\n    disabled=False\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
5\u3001\u56fe\u7247<\/h3>\n
file = open("\u5c0f\u5b9d\u8d1d.jpg", "rb")\nimage = file.read()\nwidgets.Image(\n    value=image,\n    format='jpg',\n    width=300,\n    height=400,\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
6\u3001\u65e5\u671f\u9009\u62e9\u5668<\/h3>\n
widgets.DatePicker(\n    description='Pick a Date',\n    disabled=False\n)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
7\u3001\u5bb9\u5668\/\u5e03\u5c40\u5c0f\u90e8\u4ef6<\/h3>\n
1\u3001Box<\/h4>\n
\u7528\u4e8e\u663e\u793a\u7ec4\u4ef6\u5f53\u4e2d\u7684\u591a\u4e2a\u5c0f\u90e8\u4ef6<\/p>\n
words = ['correct', 'horse', 'battery', 'staple']\nitems = [Button(description=w) for w in words]\nBox([items[0], items[1], items[2], items[3]])<\/code><\/pre>\n
\"\"<\/div><\/p>\n
2\u3001HBox<\/h4>\n
\u6c34\u5e73\u663e\u793a\u7ec4\u4ef6\u4e2d\u591a\u4e2a\u5c0f\u90e8\u4ef6<\/p>\n
words = ['correct', 'horse', 'battery', 'staple']\nitems = [Button(description=w) for w in words]\nHBox([items[0], items[1], items[2], items[3]])<\/code><\/pre>\n
\"\"<\/div><\/p>\n
3\u3001VBox<\/h4>\n
\u5782\u76f4\u663e\u793a\u7ec4\u4ef6\u4e2d\u7684\u591a\u4e2a\u5c0f\u90e8\u4ef6<\/p>\n
words = ['correct', 'horse', 'battery', 'staple']\nitems = [Button(description=w) for w in words]\nVBox([items[0], items[1], items[2], items[3]])<\/code><\/pre>\n
\"\"<\/div><\/p>\n
4\u3001\u6298\u53e0\u6570\u636e<\/h4>\n
accordion = widgets.Accordion(children=[widgets.IntSlider(), widgets.Text()])\naccordion.set_title(0, '\u6ed1\u5757')\naccordion.set_title(1, '\u6587\u672c')\naccordion<\/code><\/pre>\n
\"\"<\/div><\/p>\n
5\u3001\u6807\u7b7e<\/h4>\n
tab_contents = ['\u57fa\u672c', '\u80a1\u6c60', '\u4e70\u7b56', '\u5356\u7b56', '\u9009\u80a1']\nchildren = [widgets.Text(description=name) for name in tab_contents]\ntab = widgets.Tab()\ntab.children = children\nfor index,i in enumerate(tab_contents):\n    tab.set_title(index,i)  # \u9700\u8981\u7d22\u5f15\u4e0e\u503c\u4e24\u4e2a\u53c2\u6570\ntab<\/code><\/pre>\n
\"\"<\/div><\/p>\n
6\u3001\u6298\u53e0\u6570\u636e\u4e0e\u6807\u7b7e\u5d4c\u5957<\/h4>\n
tab_nest = widgets.Tab()\ntab_nest.children = [accordion, accordion]\ntab_nest.set_title(0, '\u7b2c\u4e00\u5757')\ntab_nest.set_title(1, '\u7b2c\u4e8c\u5757')\ntab_nest<\/code><\/pre>\n
\"\"<\/div><\/p>\n
8\u3001\u64ad\u653e\u52a8\u753b\u5c0f\u90e8\u4ef6<\/h3>\n
# \u64ad\u653e\u52a8\u753b\u7ed3\u5408\u8fdb\u5ea6\u6761\nplay = widgets.Play(\n#     interval=10,\n    value=0,\n    min=0,\n    max=100,\n    step=1,\n    description="Press play",\n    disabled=False\n)\n\nslider = widgets.IntProgress(\n    value=100,# \u8fdb\u5ea6\u6761\u6570\u503c\n    min=0,\n    max=100,\n    step=1,\n    description='Loading:',\n    bar_style='danger', # 'success', 'info', 'warning', 'danger' or ''\n    orientation='horizontal'\n)\n\nwidgets.jslink((play, 'value'), (slider, 'value'))\nwidgets.HBox([play, slider])<\/code><\/pre>\n
\"\"<\/div><\/p>\n
\u4e09\u3001\u5e38\u7528\u4e8b\u4ef6<\/h2>\n
1\u3001on_click()<\/h3>\n
# \u67e5\u770b\u67d0\u4e2a\u90e8\u4ef6\u7684\u6587\u6863\nprint(widgets.Button.on_click.__doc__)<\/code><\/pre>\n
\u6309\u94ae\u70b9\u51fb\u662f\u65e0\u72b6\u6001\u53d1\u751f\u7684\uff0c\u56e0\u6b64\u60f3\u8981\u5c06\u4e8b\u4ef6\u7531\u524d\u7aef\u4f20\u9012\u5230\u540e\u7aef\uff0c\u5c31\u9700\u8981\u901a\u8fc7on_click<\/code>\u65b9\u6cd5\uff0c\u5728\u70b9\u51fb\u65f6\u6267\u884c\u76f8\u5e94\u7684\u51fd\u6570\uff1a<\/p>\n
button = widgets.Button(description="\u70b9\u6211\u554a\uff01\uff01")\ndisplay(button)\n\n# \u70b9\u51fb\u6267\u884c\u4e8b\u4ef6\uff0c\u70b9\u51fb\u4e00\u6b21\uff0c\u6267\u884c\u4e00\u6b21\ndef on_button_clicked(b):\n    print("Button clicked.")\n\nbutton.on_click(on_button_clicked)<\/code><\/pre>\n
\"\"<\/div><\/p>\n
2\u3001Traitlet\u4e8b\u4ef6<\/h3>\n
observe<\/h4>\n
observe\u65b9\u6cd5\u53ef\u4ee5\u7528\u4e8e\u6ce8\u518c\u56de\u8c03<\/p>\n
int_range = widgets.IntSlider()\ndisplay(int_range)\n\n# \u6bcf\u4e00\u6b21\u4e8b\u4ef6\u90fd\u4f1a\u56de\u8c03\u5f53\u524d\u51fd\u6570\uff0c\u7136\u540e\u6253\u5370`change['new']`\u4e2d\u5bf9\u5e94\u7684\u503c\ndef on_value_change(change):\n    print(change['new'])\n\nint_range.observe(on_value_change, names='value')<\/code><\/pre>\n
\"\"<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
ipywidgets ipywidgets\u53ef\u4ee5\u7528\u4e8e\u5728jupyter notebook\u5f53\u4e2d\u8fdb\u884c\u754c\u9762\u8bbe\u8ba1\uff0c\u4ee5\u53ca\u4e00\u4e9b […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[319,310],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/3776"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3776"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/3776\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}