标签: ipywidgets

通过以下最小示例,我可以创建与Jupyter笔记本交互的按钮和HTML表格,该表格显示在笔记本中.

import ipywidgets
from IPython.display import display

from IPython.core.display import HTML

def func(btn):
    print('Hi!')

btn1 = ipywidgets.Button(description="Click me!")
btn1.on_click(func)
btn2 = ipywidgets.Button(description="Click me!")
btn2.on_click(func)
display(btn1)
display(btn2)

display(HTML(
        '<table>' +
        '<tr><td>Something here</td><td>Button 1 here</td></tr>' +
        '<tr><td>Something here</td><td>Button 2 here</td></tr>' +
        '</table>'
    ))

产生的结果是:

我现在想将按钮放在html表中.我尝试调查该方法,Widget._ipython_display_()但这不允许我使用我自己的html表中的按钮.

(请参阅小表作为示例.我想将按钮放在一个大表中,并使用按钮从数据库中删除行.)

在这个问题中,想知道如何相对于彼此放置小部件.在这里,我想将小部件放在其他HTML代码中.

根据这里的Jupyter博客,现在可以在静态网页中嵌入交互式小部件:

现在,通过插入包含序列化窗口小部件状态的html片段,可以将实时交互式窗口小部件嵌入到静态网页或博客中.这也适用于自定义小部件库.请参见http://jupyter.org/embed-jupyter-widgets.html.

当我打开上面的例子,在firefox或chrome中,我得到交互式小部件好吧!

但是,如果我使用相同的python代码创建一个新的笔记本,将笔记本保存为html,然后复制粘贴可嵌入的HTML片段以呈现交互式窗口小部件,它无法正常工作.我充其量只获得了一个小部件状态的图像,但没有任何交互式.

有没有人设法使用交互式小部件复制HTML页面？有什么东西我错过了吗？

我想在IPython(python3)中使用Matplotlib和ipywidgets实现交互式绘图.那么,我如何才能有效地做到这一点(顺利改变,没有延迟)？

另一个问题是为什么这段代码有效？!

from ipywidgets import *
import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline

x = np.linspace(0, 2 * np.pi)

def update(w = 1.0):
    fig = plt.figure()
    ax = fig.add_subplot(1, 1, 1)
    ax.plot(x, np.sin(w * x))

    fig.canvas.draw()

interact(update);

但是,这不起作用？!

from ipywidgets import *
import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline

x = np.linspace(0, 2 * np.pi)
fig = plt.figure()
ax = fig.add_subplot(1, 1, 1)
line, = ax.plot(x, np.sin(x))

def …

目前，我们的团队正在使用 JupyterHub。当我尝试在 JupyterLab 中使用 ipywidgets 时，出现此 JavaScript 错误（https 地址被删除）

代码

import ipywidgets as widgets\n\nslider = widgets.FloatSlider(description=\'$x$\')\ntext = widgets.FloatText(disabled=True, description=\'$x^2$\')\n\ndef compute(*ignore):\n    text.value = str(slider.value ** 2)\n\nslider.observe(compute, \'value\')\n\nslider.value = 4\n\nwidgets.VBox([slider, text])\n

笔记本上的错误：

[Open Browser Console for more detailed log - Double click to close this message]\nFailed to load model class \'VBoxModel\' from module \'@jupyter-widgets/controls\'\nError: Module @jupyter-widgets/controls, version ^1.5.0 is not registered, however,         2.0.0 is\n    at f.loadClass (/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/134.bcbea9feb6e7c4da7530.js?v=bcbea9feb6e7c4da7530:1:74977)\n    at f.loadModelClass (/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/150.3e1e5adfd821b9b96340.js?v=3e1e5adfd821b9b96340:1:10729)\n    at f._make_model (/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/150.3e1e5adfd821b9b96340.js?v=3e1e5adfd821b9b96340:1:7517)\n    at f.new_model (/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/150.3e1e5adfd821b9b96340.js?v=3e1e5adfd821b9b96340:1:5137)\n    at f.handle_comm_open …

我创建了一个应该在选项卡小部件中显示绘图的笔记本。据我了解，要在选项卡小部件中包含类似绘图的内容，我需要将其包装在输出小部件中。在笔记本本身中它可以工作，但是当我通过 nbconvert 将其转换为 html 时，它会产生错误的输出。

滑块、按钮或文本等小部件出现在标签小部件中应有的位置，但是当我使用输出小部件捕捉绘图（甚至来自 print() 函数的一些文本）时，它出现在标签环境之前，该环境本身是空的.

这是每个选项卡一个绘图的外观（在笔记本中工作）： 在笔记本中的选项卡中绘图

这就是它在 nbconvert 之后的样子（在 html 中）。这些图出现在标签环境之前： Plots before tabs in html

请注意，nbconvert 包含其他小部件以及具有其他内容的选项卡。

这是使用的代码：

# Import libraries
import pandas as pd
import matplotlib.pyplot as plt
import ipywidgets as widgets
import numpy as np

# Generated data for plotting
data = pd.DataFrame()
for i in range(5):
    data[i] = np.random.normal(size = 50)

现在这部分在笔记本中有效，但在 html 中无效，但正如您将看到的，它似乎与输出小部件有关，因为我不处理绘图或打印文本。

# This does not work with plots
children = []
for i in range(data.shape[1]):
    out = …

我想知道是否可以从笔记本端（即在 Python 中）清除 Jupyter 笔记本中单元格的小部件区域。IPython.display.clear_output()只清除单元格的输出区域而不是小部件区域。

更新：这在最新的 Notebook 和 ipywidgets 中似乎仍然是一个问题。这里有两个最小的例子来说明我正在努力解决的问题。我特别想清除的小部件输出是由qgrid呈现的数据帧。在这两种情况下，尽管尝试清除前一个小部件输出，但后续选择会导致在前一个后追加一个表格。每个新表都作为一个带有 class 的 div 附加p-Widget。

import pandas as pd
import numpy as np
import qgrid
from ipywidgets import interact
from IPython.display import display, clear_output
import notebook
import ipywidgets

print('Jupyter Notebook version: {}'.format(notebook.__version__))
print('ipywidgets version: {}'.format(ipywidgets.__version__))

max_columns = 10
max_rows = 10    
col_opts = list(range(1, max_columns + 1))
row_opts = list(range(1, max_rows + 1))

第一次尝试使用交互：

@interact(columns=col_opts, rows=row_opts)
def submit(columns, rows):
    df = pd.DataFrame(np.random.randint(0, 100, size=(rows, columns))) …

我想从 jupyter 文本小部件捕获鼠标选择的文本。

import ipywidgets as widgets
text = widgets.Textarea(
    value='Hello World',
    description='String:',
    disabled=False
)
display(text)

在下面的示例中，当选择世界并完成左键单击时，我想捕获突出显示的文本。

我在新 PC 上复制 Jupyter Lab 安装时遇到问题。它在我的前一个上工作得很好。我无法显示简单的小部件（例如 ipywidgets 或 ipyvuetify 中的复选框）。我检查了 jupyter-widgets 是否已通过 jupyter labextension list 启用。结果是：

    jupyter-vue v1.7.0 enabled ok
    jupyter-vuetify v1.8.4 enabled ok
    @jupyter-widgets/jupyterlab-manager v5.0.2 enabled ok (python, jupyterlab_widgets)

在笔记本中，当我尝试显示小部件时，单元格显示 JavaScript 错误：

    [Open Browser Console for more detailed log - Double click to close this message]
    Failed to load model class 'CheckboxModel' from module '@jupyter-widgets/controls'
    Error: Module @jupyter-widgets/controls, version ^1.5.0 is not registered, however,         
    2.0.0 is
    at f.loadClass (http://localhost:8888/lab/extensions/@jupyter-widgets/jupyterlab- 
    manager/static/134.083e6b37f2f7b2f04b5e.js?v=083e6b37f2f7b2f04b5e:1:74976)
    at f.loadModelClass (http://localhost:8888/lab/extensions/@jupyter-widgets/jupyterlab- 
    manager/static/150.467514c324d2bcc23502.js?v=467514c324d2bcc23502:1:10721)
    at f._make_model (http://localhost:8888/lab/extensions/@jupyter-widgets/jupyterlab- 
    manager/static/150.467514c324d2bcc23502.js?v=467514c324d2bcc23502:1:7517)
    at …

我使用ipywidgets来显示进程的异步结果.

import ipywidgets as widgets

results = widgets.HTML()
display(results)

它运行良好,结果显示正确,但是当保存笔记本时,小部件不再存在.有没有办法用笔记本保存它们？

我正在使用jupyter-cadquery可视化一些用CadQuery制作的 3D 模型。

在 Jupyter 笔记本上可视化模型时，一切都按预期进行。

但是，当尝试将小部件嵌入 HTML 文档时，似乎相机在加载时指向(0, 0, 0)，而不是预期的那样。与小部件交互后，相机将指向预期的坐标。

这是重现错误的代码和上述问题的动画（请参阅下面有关如何使用 Binder 重现它的说明）：

from cadquery import Workplane
from ipywidgets import embed
from jupyter_cadquery.cad_view import CadqueryView
from jupyter_cadquery.cadquery import Assembly
from jupyter_cadquery.cadquery import Part


# Create a simple assembly
box1 = Workplane('XY').box(10, 10, 10).translate((0, 0, 5))
a1 = Assembly([Part(box1)], "example 1")

# Generate HTML
a1.collect_shapes()
view = CadqueryView()
for shape in a1.collect_shapes():
    view.add_shape(shape["name"], shape["shape"], shape["color"])
renderer = view.render()
embed.embed_minimal_html('export.html', views=renderer, title='Renderer')

renderer

注意立方体的视图是如何在交互时突然“跳跃”的。

这可能是一个问题 …