Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: Menu widget based on phosphorjs #2232

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

WIP: Menu widget based on phosphorjs #2232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4a512d1
Add support for specifying custom icons in ToggleButtons
astrofrog Aug 25, 2018
aaea487
turn icon into a Icon widget
maartenbreddels Sep 25, 2018
44c71be
update docstring and spec
maartenbreddels Sep 26, 2018
5c40113
do not require the label to be unqique
maartenbreddels Oct 1, 2018
ae6e7cb
renaming: view->this, item->label, items->labels
maartenbreddels Oct 1, 2018
f393b44
give icons a pointer icon as well
maartenbreddels Oct 1, 2018
afa810a
new: add BooleanGroup as an alternative to _Selection
maartenbreddels Oct 5, 2018
0dc1b0e
refactor of menu+button
maartenbreddels Oct 5, 2018
5abd839
context menu support on js side
maartenbreddels Oct 5, 2018
08b85cc
add demo notebook
maartenbreddels Oct 5, 2018
7a8e4f6
added Application widget showing 'menubar' and toolbar
maartenbreddels Oct 8, 2018
bcf2670
application example notebook
maartenbreddels Oct 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
318 changes: 318 additions & 0 deletions application.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,318 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Simple example"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import ipywidgets as widgets"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"menu_maximize = widgets.Menu(description='Fullscreen', icon='arrows-alt', command='fullscreen')\n",
"menu_fullscreen = widgets.Menu(description='Maximize', icon='window-maximize', command='maximize')\n",
"menu_restore = widgets.Menu(description='Restore', icon='window-restore', command='restore')\n",
"menu_window = widgets.Menu(items=[menu_maximize, menu_fullscreen, menu_restore], description='Window', icon='save')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"menubar = widgets.Menu(items=[menu_window])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"text = widgets.Text(value='hi there')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"button_hi = widgets.Button(description='Hi')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"app = widgets.Application(central_widget=text, menubar=menubar, toolbar=[button_hi])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"app"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# bqplot example"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import bqplot.pyplot as plt\n",
"import ipywidgets as widgets\n",
"import numpy as np\n",
"import bqplot\n",
"fig = plt.figure()\n",
"x = np.linspace(0, 2, 10)\n",
"y = x**2\n",
"s = plt.scatter(x, y, display_legend=True)\n",
"s.selected_style = {'fill': 'orange', 'stroke': 'blue'}"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"icon_brush = icon_brush_x = icon_brush_y = icon_brush_lasso = None#'pencil-square-o'\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"icon_brush = icon_brush_x = icon_brush_y = icon_brush_lasso = None#'pencil-square-o'\n",
"\n",
"\n",
"# toggle_button_pan = widgets.ToggleButton(description='Pan/zoom', icon=icon_pan)\n",
"\n",
"\n",
"# action_fullscreen = widgets.Action(command='fullscreen', icon='arrows-alt', description='')\n",
"# button_fullscreen = widgets.Button(description='', default_action=action_fullscreen)\n",
"\n",
"# action_png = widgets.Menu(command='save_png', icon='save', description='Save to PNG')\n",
"# action_svg = widgets.Menu(command='save_svg', icon='save', description='Save to SVG')\n",
"# menu_save = widgets.Menu(items=[action_png, action_svg])\n",
"# button_save = widgets.Button(menu=menu_save, description='Save', icon='save', menu_delay=0)\n",
"\n",
"\n",
"menu_select_rectangle = widgets.Menu(description='Rectangle', icon=icon_brush)\n",
"menu_select_x = widgets.Menu(description='X region', icon=icon_brush_x)\n",
"menu_select_y = widgets.Menu(description='Y region', icon=icon_brush_y)\n",
"menu_select_lasso = widgets.Menu(description='Lasso', icon=icon_brush_lasso)\n",
"menu_items_select = [menu_select_rectangle, menu_select_x, menu_select_y, menu_select_lasso]\n",
"for menu_item in menu_items_select:\n",
" menu_item.checkable = True\n",
"menu_select_rectangle.value = True\n",
"menu_select = widgets.Menu(items=menu_items_select)\n",
"\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"icon_pan = 'arrows'\n",
"toggle_button_panzoom = widgets.ToggleButton(description='Pan/zoom', icon=icon_pan)\n",
"menu_interact_panzoom = widgets.Menu(description='Pan/zoom', icon=icon_pan)\n",
"menu_interact_panzoom.checkable = True\n",
"menu_items_interact = [menu_interact_panzoom] + menu_items_select\n",
"menu_interact = widgets.Menu(description='Interaction', items=menu_items_interact)\n",
"widgets.jslink((toggle_button_panzoom, 'value'), (menu_interact_panzoom, 'value'))"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"scale_x = s.scales['x']\n",
"scale_y = s.scales['y']\n",
"marks = fig.marks\n",
"\n",
"button_select = widgets.Button(menu=menu_select, default_action=menu_select_rectangle, menu_delay=0.5, icon='pencil-square-o')\n",
"\n",
"interact_panzoom = bqplot.PanZoom(scales={'x': [scale_x], 'y': [scale_y]})\n",
"interact_brush = bqplot.interacts.BrushSelector(x_scale=scale_x, y_scale=scale_y, marks=marks)\n",
"interact_brush_x = bqplot.interacts.BrushIntervalSelector(scale=scale_x, color=\"green\", marks=marks)\n",
"interact_brush_y = bqplot.interacts.BrushIntervalSelector(scale=scale_y, color=\"green\", orientation='vertical', marks=marks)\n",
"interact_lasso = bqplot.interacts.LassoSelector(x_scale=scale_x, y_scale=scale_y, marks=marks)\n",
"interactions = [interact_panzoom, interact_brush, interact_brush_x, interact_brush_y, interact_lasso]\n",
"group_interact = widgets.BooleanGroup(group=menu_items_interact, widgets=interactions)\n",
"group_select = widgets.BooleanGroup(group=menu_items_select)#, widgets=interactions[1:])\n",
"widgets.jslink((group_select, 'last_selected'), (button_select, 'default_action'))\n",
"group_select.index = 0\n",
"widgets.jslink((group_interact, 'selected_widget'), (fig, 'interaction'))\n",
"widgets.jslink((group_interact, 'selected'), (group_select, 'selected'))\n",
"group_interact.index = 0\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"menu_maximize = widgets.Menu(description='Fullscreen', icon='arrows-alt', command='fullscreen')\n",
"menu_fullscreen = widgets.Menu(description='Maximize', icon='window-maximize', command='maximize')\n",
"menu_restore = widgets.Menu(description='Restore', icon='window-restore', command='restore')\n",
"# subitem2 = widgets.Menu(description='submenu 2', icon='cloud')\n",
"# TODO: icons don't work yet for submenu\n",
"menu_window = widgets.Menu(items=[menu_maximize, menu_fullscreen, menu_restore], description='Window', icon='save')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"menu_save_svg = widgets.Menu(description='Save as svg', icon='save', command='save_svg')\n",
"menu_save_png = widgets.Menu(description='Save as png', icon='save', command='save_png')\n",
"# item2 = widgets.Menu(description='menu 2', icon='pencil')\n",
"menu_file = widgets.Menu(description='File', items=[menu_save_svg, menu_save_png])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# this menu will expand on click\n",
"button_window = widgets.Button(description='Window', menu=menu_window, icon='window-maximize')\n",
"button_window"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# this menu will expand directly\n",
"button_file = widgets.Button(description='File', menu=menu_file, icon='save', menu_delay=0)\n",
"button_file"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"text = widgets.Text(description=\"Name\")\n",
"text"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# file_menu = widgets.Menu(description='File', items=[item1, item2], icon='save')\n",
"# menu_view = widgets.Menu(description='View', items=[item1, item2])\n",
"menubar = widgets.Menu(items=[menu_file, menu_interact, menu_window])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"app = widgets.Application(central_widget=fig, menubar=menubar, toolbar=[toggle_button_panzoom, button_select, button_file])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"scrolled": false
},
"outputs": [],
"source": [
"app"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"widgets.jslink((group_interact, 'selected_widget'), (fig, 'interaction'))"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
5 changes: 3 additions & 2 deletions ipywidgets/widgets/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
from .trait_types import Color, Datetime, NumberFormat

from .widget_core import CoreWidget
from .widget_bool import Checkbox, ToggleButton, Valid
from .widget_bool import Checkbox, ToggleButton, Valid, BooleanGroup
from .widget_button import Button, ButtonStyle
from .widget_box import Box, HBox, VBox, GridBox
from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider, FloatLogSlider
Expand All @@ -23,5 +23,6 @@
from .interaction import interact, interactive, fixed, interact_manual, interactive_output
from .widget_link import jslink, jsdlink
from .widget_layout import Layout
from .widget_media import Image, Video, Audio
from .widget_media import Image, Icon, Video, Audio
from .widget_menu import Application, Action, Menu
from .widget_style import Style
3 changes: 3 additions & 0 deletions ipywidgets/widgets/domwidget.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
from .trait_types import InstanceDict, TypedTuple
from .widget_layout import Layout
from .widget_style import Style
from traitlets import Instance


class DOMWidget(Widget):
Expand All @@ -16,6 +17,8 @@ class DOMWidget(Widget):
_model_name = Unicode('DOMWidgetModel').tag(sync=True)
_dom_classes = TypedTuple(trait=Unicode(), help="CSS classes applied to widget DOM element").tag(sync=True)
layout = InstanceDict(Layout).tag(sync=True, **widget_serialization)
# BAD: we cannot import ipywidgets.Menu, cicular import, and also see issue in packages/base/src/widget.ts
context_menu = Instance('ipywidgets.Menu', help="Context menu (open by default on right click)", default=None, allow_none=True).tag(sync=True, **widget_serialization).tag(sync=True)

def add_class(self, className):
"""
Expand Down
Loading