def _playback_initialize(self, func, timeout, value, rng,
time_widget, play_widget):
play = play_widget._widget
play.min = rng[0]
play.max = rng[1]
play.value = value
slider = time_widget._widget
jsdlink((play, 'value'), (slider, 'value'))
jsdlink((slider, 'value'), (play, 'value'))
def __init__(self, source, timebase=1/30):
"""Define a new player instance for supplied source
"""
super().__init__()
# Build the parts
self._source = source
self._timebase = timebase
self.wid_video = Video(source, timebase=timebase)
# Video event handlers
self.wid_video.on_displayed(self._handle_displayed)
self.wid_video.on_event(self._handle_loaded_metadata, 'loadedmetadata')
self.wid_video.on_event(self._handle_duration_change, 'durationchange')
self.wid_video.on_event(self._handle_rate_change, 'ratechange')
# Define additional widget components
# self.wid_video.layout.width = '100%' # scale to fit inside parent element
self.wid_video.layout.align_self = 'center'
self.wid_video.layout.border = '1px solid grey'
self.wid_timecode = TimeCode(timebase=timebase)
# wid_button = ipywidgets.Button(icon='play') # http://fontawesome.io/icon/pause/
# Progress bar/slider
self.wid_slider = ipywidgets.FloatSlider(min=0, max=1, step=timebase,
continuous_update=True, orientation='horizontal',
readout=False,
slider_color='blue')
self.wid_slider.layout.width = '50%'
# Text info
self.wid_info = MonoText()
# Assemble the parts
self.wid_box = ipywidgets.HBox(children=[self.wid_timecode, self.wid_slider])
# self.wid_controls_B = ipywidgets.HBox(children=[self.wid_timecode,
# self.wid_slider,
# self.wid_info])
self.children = [self.wid_video, self.wid_box, self.wid_info]
# Link widgets at front end
# ipywidgets.jsdlink((self.wid_video, 'current_time'), (self.wid_progress, 'value'))
ipywidgets.jslink((self.wid_video, 'current_time'), (self.wid_slider, 'value'))
ipywidgets.jsdlink((self.wid_video, 'current_time'), (self.wid_timecode, 'timecode'))
def __init__(self, path):
self.db_view = SimpleDatabaseView()
toolbar = ToolBar(['eye-slash', 'list', 'image'], exclusive=True, current=0)
self.toolbar = toolbar
self.hierarchy_bar = HierarchyBar(path, layout=Layout(width='70%'))
self.length_label = RichLabel('[0]')
self.header = HBox([toolbar, HTML(layout=Layout(width='25px')),
self.hierarchy_bar, HTML(layout=Layout(width='40px')),
self.length_label], layout=Layout(align_content='flex-end'))
self.offset_edit = BoundedIntText(description='offset: ', value=self.db_view.offset, min=0,
layout=Layout(width='150px'))
self.limit_edit = BoundedIntText(description='limit: ', value=self.db_view.limit, min=0, max=self.db_view.limit,
layout=Layout(width='150px'))
self.progress = TinyLoading(layout=Layout(width='150px'))
self.foot = HBox([self.offset_edit, self.limit_edit, HSpace(), self.progress],
layout=Layout(align_items='center'))
jsdlink((self.offset_edit, 'value'), (self.db_view, 'offset'))
jsdlink((self.limit_edit, 'value'), (self.db_view, 'limit'))
jsdlink((self.db_view, 'cache_progress'), (self.progress, 'value'))
def toolbar_handling(button_id):
self.db_view.visible = button_id != 0
self.foot.layout.display = 'none' if button_id == 0 else 'flex'
self.toolbar.on_button_clicked(toolbar_handling)
toolbar_handling(0)
super(DatabaseView, self).__init__([self.header, VSpace(), self.db_view, self.foot])
def schedule_dlink(self, target, update_interval, transport, js=False):
if js and transport:
# use Tone.js Draw for better synchronization
# of sound and visuals
draw = True
else:
draw = False
self.schedule_repeat(update_interval, transport, draw=draw)
if js:
link = ipywidgets.jsdlink((self, self.observed_trait), target)
else:
link = ipywidgets.dlink((self, self.observed_trait), target)
return ToneDirectionalLink(self, link)
def _plot_interactive_buttons(self, select_function, values,
master_widget):
def change_color(axis, line, color):
line.set_color(color)
axis.legend(loc=axis.get_legend()._loc_real).set_draggable(True)
def change_data(axis, line, df, value, shift, scale):
origin = select_function(df, values=[value])
line.set_ydata(origin * scale + shift)
axis.relim()
axis.autoscale_view(True, True, True)
def change_legend(axis, line, legend):
line.set_label(legend)
axis.legend(loc=axis.get_legend()._loc_real).set_draggable(True)
# do not plot interactive buttons if there are too many curves
if len(self.axis.lines) > 15:
return
dfs = self.dfs
shifts = self.shifts
scales = self.scales
axis = self.axis
legends = self.legends
colors = self.colors
index = 0
value_widgets = []
for i in range(len(dfs)):
for j in range(len(values[i])):
value = values[i][j]
shift = shifts[i][j]
scale = scales[i][j]
legend = legends[i][j]
color = colors[i][j]
shift_widget = widgets.FloatText(value=shift,
step=0.01,
readout_format='.2f',
continuous_update=True)
scale_widget = widgets.FloatText(value=scale,
readout_format='.2f',
continuous_update=True)
color_widget = widgets.ColorPicker(concise=True,
description=' ',
value=to_hex(color),
continuous_update=True)
legend_widget = widgets.Text(value=legend,
placeholder='Legend')
value_widget = widgets.FloatText(value=value,
description=' ',
readout_format='.2f',
continuous_update=True)
value_widgets.append(value_widget)
if master_widget is not None:
widgets.jsdlink((master_widget, 'value'),
(value_widget, 'value'))
color_widget.layout.width = '15%'
value_widget.layout.width = '20%'
legend_widget.layout.width = '20%'
shift_widget.layout.width = '15%'
scale_widget.layout.width = '15%'
line = axis.lines[index]
w_color = interactive(change_color,
axis=fixed(axis),
line=fixed(line),
color=color_widget)
w_legend = interactive(change_legend,
axis=fixed(axis),
line=fixed(line),
legend=legend_widget)
w_data = interactive(change_data,
axis=fixed(axis),
line=fixed(line),
df=fixed(dfs[i]),
shift=shift_widget,
scale=scale_widget,
value=value_widget)
hbox = widgets.HBox(
tuple(
list(w_color.children) + list(w_legend.children) +
list(w_data.children)))
display(hbox)
index += 1
return value_widgets
def __init__(self):
# Stores the respective line number and variable changes for each
# exection step
self._tracer = TimeTravelTracer()
self._current_state = None
self._debugger = None
self._code_output = HTML()
self._var_output = Output()
self._watchpoint_output = Output()
self._breakpoint_output = Output()
self._diff_slider = IntSlider(
min=1,
readout=False,
layout=Layout(width="99%"),
tooltip="Execution timeline",
)
self._diff_slider.observe(self._handle_diff_slider, names="value")
self._autoplay = Play(
tooltip="Automatic playback of the execution",
layout=Layout(height="30px"),
)
self._auto_link = jsdlink((self._autoplay, "value"),
(self._diff_slider, "value"))
self._speed_slider = IntSlider(description="Delay (ms)",
min=100,
max=1000,
step=100,
value=500)
self._speed_link = jsdlink((self._speed_slider, "value"),
(self._autoplay, "interval"))
self._reverse_autoplay = ToggleButton(
value=False,
icon="history",
tooltip="Reverse autoplay",
layout=Layout(width="40px"),
)
self._reverse_autoplay.observe(self._handle_reverse_button)
self._watchpoint_input = Text(
layout=Layout(width="150px"),
placeholder="Watch expression",
)
self._add_watchpoint = Button(
icon="plus",
tooltip="Add an expression or variable to watch",
layout=Layout(width="50px"),
)
self._add_watchpoint.on_click(self.watch_command)
self._watchpoint_dropdown = Dropdown(layout=Layout(width="150px"), )
self._remove_watchpoint = Button(
icon="trash",
tooltip="Remove a watchpoint",
layout=Layout(width="50px"),
)
self._remove_watchpoint.on_click(self.unwatch_command)
self._breakpoint_layout = GridspecLayout(3, 1)
self._add_breakpoint = Button(
icon="plus",
tooltip="Add a breakpoint",
name="breakpoint_button",
layout=Layout(width="40px"),
)
self._add_breakpoint.on_click(self._handle_breakpoint)
self._disable_breakpoint_button = Button(
icon="eye-slash",
tooltip="Disable breakpoint",
layout=Layout(width="50px"),
)
self._disable_breakpoint_button.on_click(self.disable_command)
self._remove_breakpoint_button = Button(
icon="trash",
tooltip="Remove breakpoint",
layout=Layout(width="50px"),
)
self._remove_breakpoint_button.on_click(self.delete_command)
self._breakpoint_dropdown = Dropdown(layout=Layout(width="70px"))
self._function_dropdown = Dropdown(layout=Layout(width="200px"))
self._function_dropdown.disabled = True
self._breakpoint_type = Dropdown(
options=["Line", "Function", "Conditional"],
value="Line",
layout=Layout(width="100px"),
)
self._breakpoint_type.observe(self._handle_breakpoint_type,
names="value")
self._condition_input = Text(placeholder="Enter condition",
layout=Layout(width="200px"))
self._condition_input.disabled = True
self._line_input = Text(
placeholder="Line Number",
name="line_input",
layout=Layout(width="100px"),
)
self._breakpoint_layout = VBox([
HBox([
self._add_breakpoint,
self._breakpoint_type,
self._function_dropdown,
self._line_input,
self._condition_input,
self._breakpoint_dropdown,
self._remove_breakpoint_button,
self._disable_breakpoint_button,
]),
self._breakpoint_output,
])
self._search_input = Text(placeholder="Search...")
self._search_input.observe(self._handle_search_input, names="value")
self._search_results = Output()
self._search_layout = VBox([
self._search_input,
self._search_results,
])
# Remove shadows from scrolling
style = """
<style>
.jupyter-widgets-output-area .output_scroll {
border-radius: unset !important;
-webkit-box-shadow: unset !important;
box-shadow: unset !important;
}
</style>
"""
display(HTML(style))
for key, item in self._BUTTONS.items():
self.register_button(key, **item)
self._code_layout = GridspecLayout(4, 4, grid_gap="20px")
self._code_layout[0:4, 0:3] = HBox(
[self._code_output],
layout=Layout(height="500px",
overflow_y="scroll",
border="2px solid black"),
)
self._code_layout[0:2, 3] = self._var_output
self._code_layout[2:4, 3] = VBox([
HBox([self._add_watchpoint, self._watchpoint_input]),
HBox([self._remove_watchpoint, self._watchpoint_dropdown]),
self._watchpoint_output,
])
self._code_nav_layout = VBox([
HBox([
*self.get_buttons(),
self._autoplay,
self._reverse_autoplay,
self._speed_slider,
]),
self._diff_slider,
self._code_layout,
])
self._main_layout = Tab(
[
self._code_nav_layout,
self._breakpoint_layout,
self._search_layout,
],
layout=Layout(height="650px"),
)
self._main_layout.set_title(0, "Code")
self._main_layout.set_title(1, "Breakpoints")
self._main_layout.set_title(2, "Search")
display(self._main_layout)
def load_UI(self):
'''Setting up the interactive visualization tool'''
# UI elements
range_slider = IntRangeSlider(value=[1, self.time_window],
min=1,
max=self.time_window,
description="Range: ",
continuous_update=False)
view_ftr_i = IntSlider(min=1,
max=self.num_features,
default_value=2,
description="View Feature: ",
continuous_update=False)
self.modify_ftr_i = IntSlider(min=1,
max=self.num_features,
default_value=2,
description="Mod Feature: ",
continuous_update=False)
uniform_slider = FloatSlider(value=0,
min=-1,
max=1,
step=0.05,
description='Value:',
continuous_update=False)
radio_button_uni = RadioButtons(options=[('Positive Weights', 1),
('Negative Weights', -1)],
description='Affect:')
select_target = BoundedFloatText(
value=(self.min_target + self.max_target) / 2,
min=self.min_target,
max=self.max_target,
layout={'width': '150px'})
radio_button_xyz7 = RadioButtons(options=[
('Present (' + str(self.forecast_window) + '-last values)', 0),
('Future (' + str(self.forecast_window) + '-next values)', 1)
],
description='Affect:')
enable_iPCA = Checkbox(value=False, description='Enable iPCA')
iml_method = ToggleButtons(options=['LioNets', 'Lime'])
self.forecast = Dropdown(options=[('Neural', 6), ('Static', 7),
('N-Beats', 8)],
description="Forecast: ")
mod = Dropdown(options=[('Original', 0), ('Uniform', 1),
('Mean (Local)', 2), ('Mean (Global)', 3),
('Zeros', 4), ('Noise', 5),
('Forecast (Neural)', 6),
('Forecast (Static)', 7),
('Forecast (N-Beats)', 8),
('Forecast (XYZ7)', 9)],
description="Mods: ")
jsdlink((self.modify_ftr_i, 'value'), (view_ftr_i, 'value'))
# UI layout
interpretable_settings = HBox(
[Label('Interpretation method:'), iml_method, enable_iPCA])
enable_iPCA.layout.margin = '0 0 0 -50px'
interpretable_settings.layout.margin = '20px 0 20px 0'
standard_settings = VBox([self.modify_ftr_i, view_ftr_i])
xyz7_settings = VBox([
HBox([Label('Desired Target:'), select_target]), radio_button_xyz7
])
xyz7_settings.layout.margin = '0 0 0 30px'
self.opt1_settings = VBox([mod])
self.opt2_settings = VBox([mod, range_slider])
self.opt3_settings = HBox([
VBox([mod, range_slider]),
VBox([uniform_slider, radio_button_uni])
])
self.opt4_settings = HBox([VBox([mod, self.forecast]), xyz7_settings])
self.mod_settings = VBox([])
ui = VBox([
interpretable_settings,
HBox([standard_settings, self.mod_settings])
])
# Starting the interactive tool
inter = interactive_output(
self.plot_feature, {
'ftr_i': view_ftr_i,
'mod_ftr_i': self.modify_ftr_i,
'mod': mod,
'rng_sldr': range_slider,
'uni_sldr': uniform_slider,
'rd_btn_uni': radio_button_uni,
'select_target': select_target,
'rd_btn_xyz7': radio_button_xyz7,
'forecast_optns': self.forecast,
'iml_method': iml_method,
'enable_ipca': enable_iPCA
})
display(ui, inter)
from ipywidgets import VBox, jsdlink, IntSlider, Button s1, s2 = IntSlider(max=200, value=100), IntSlider(value=40) b = Button(icon='legal') jsdlink((s1, 'value'), (s2, 'max')) VBox([s1, s2, b])
def tax_output(change):
string = cut_string(str(self.dochodowy * wid_params[5].value))
a = widgets.Text(disabled=True, value = 'Mniej o '+string)
widgets.jsdlink((a, 'value'), (wid_extra_output[5], 'value'))
def dochodowy_minus(change):
string = cut_string(str(self.dochodowy * change['new']))
a = widgets.Text(disabled=True, value = 'Mniej o '+string)
widgets.jsdlink((a, 'value'), (wid_extra_output[5], 'value'))
def vat2(change):
a = widgets.Text(disabled=True, value = 'Brutto '+str(change['new'] * (1+self.VAT2)))
widgets.jsdlink((a, 'value'), (wid_extra_output[4], 'value'))
string = cut_string(str(self.dochodowy * wid_params[5].value))
b = widgets.Text(disabled=True, value = 'Mniej o '+string)
widgets.jsdlink((b, 'value'), (wid_extra_output[5], 'value'))
def wzrost_wartosci(change):
a = widgets.Text(disabled=True, value = 'Nominalnie za metr '+str(wid_params[1].value * change['new']))
widgets.jsdlink((a, 'value'), (wid_extra_output[2], 'value'))
def cena_rzeczoznawcy(change):
a = widgets.Text(disabled=True, value = 'Nominalnie za metr +'+str(wid_params[2].value * change['new']))
widgets.jsdlink((a, 'value'), (wid_extra_output[2], 'value'))
value='The values of range1 and range2 are synchronized')
range1 = widgets.IntSlider(description='Range 1')
range2 = widgets.IntSlider(description='Range 2')
l = widgets.jslink((range1, 'value'), (range2, 'value'))
display(caption, range1, range2)
# NO LAG VERSION
caption = widgets.Label(
value='Changes in source_range values are reflected in target_range')
source_range = widgets.IntSlider(description='Source range')
target_range = widgets.IntSlider(description='Target range')
dl = widgets.jsdlink((source_range, 'value'), (target_range, 'value'))
display(caption, source_range, target_range)
# Function widgets.jslink returns a Link widget. The link can be broken by calling the unlink method.
l.unlink()
dl.unlink()
# The difference between linking in the kernel and linking in the client
'''
Linking in the kernel means linking via python. If two sliders are linked in the kernel, when one slider is changed the browser sends a message to the kernel (python in this case) updating the changed slider, the link widget in the kernel then propagates the change to the other slider object in the kernel, and then the other slider’s kernel object sends a message to the browser to update the other slider’s views in the browser. If the kernel is not running (as in a static web page), then the controls will not be linked.
Linking using jslink (i.e., on the browser side) means contructing the link in Javascript. When one slider is changed, Javascript running in the browser changes the value of the other slider in the browser, without needing to communicate with the kernel at all. If the sliders are attached to kernel objects, each slider will update their kernel-side objects independently.
To see the difference between the two, go to the ipywidgets documentation and try out the sliders near the bottom. The ones linked in the kernel with link and dlink are no longer linked, but the ones linked in the browser with jslink and jsdlink are still linked.
'''