Ipywidgets box

In [1]:

# import geemap
# Map = geemap.Map()
# Map

In [2]:

import ipywidgets as widgets

In [3]:

widget_width = "250px"
padding = "0px 0px 0px 4px"  # upper, right, bottom, left

icon: https://fontawesome.com/v4.7.0/icons/

In [4]:

toolbar_button = widgets.ToggleButton(
    value=False,
    tooltip="Toolbar",
    icon="gear",
    layout=widgets.Layout(width="28px", height="28px", padding=padding),
)
toolbar_button

In [5]:

# toolbar_button.layout.width = "28px"

In [6]:

toolbar_button.value

Out[6]:

False

In [7]:

close_button = widgets.ToggleButton(
    value=False,
    tooltip="Close the tool",
    icon="times",
    button_style="primary",
    layout=widgets.Layout(height="28px", width="28px", padding=padding),
)
close_button

In [8]:

widgets.HBox([close_button, toolbar_button])

In [9]:

box = widgets.HBox()
box.children = [close_button, toolbar_button]
box

In [10]:

checkbox = widgets.Checkbox(
    description="Checkbox",
    indent=False,
    layout=widgets.Layout(padding=padding, width=widget_width),
)
checkbox

In [11]:

dropdown = widgets.Dropdown(
    options=["Option 1", "Option 2", "Option 3"],
    value=None,
    description="Dropdown:",
    layout=widgets.Layout(width=widget_width, padding=padding),
    style={"description_width": "initial"},
)
dropdown

In [12]:

int_slider = widgets.IntSlider(
    min=1,
    max=100,
    description="Int Slider: ",
    readout=False,
    continuous_update=True,
    layout=widgets.Layout(width="220px", padding=padding),
    style={"description_width": "initial"},
)
int_slider

In [13]:

int_slider_label = widgets.Label()
widgets.jslink((int_slider, "value"), (int_slider_label, "value"))

Link(source=(IntSlider(value=1, description='Int Slider: ', layout=Layout(padding='0px 0px 0px 4px', width='22…

In [14]:

widgets.HBox([int_slider, int_slider_label])

In [15]:

float_slider = widgets.FloatSlider(
    min=1,
    max=100,
    description="Float Slider: ",
    readout=False,
    continuous_update=True,
    layout=widgets.Layout(width="220px", padding=padding),
    style={"description_width": "initial"},
)

float_slider_label = widgets.Label()
widgets.jslink((float_slider, "value"), (float_slider_label, "value"))
widgets.HBox([float_slider, float_slider_label])

In [16]:

color = widgets.ColorPicker(
    concise=False,
    description="Color:",
    value="white",
    style={"description_width": "initial"},
    layout=widgets.Layout(width=widget_width, padding=padding),
)
color

In [17]:

text = widgets.Text(
    value="",
    description="Textbox:",
    placeholder="Enter sth.",
    style={"description_width": "initial"},
    layout=widgets.Layout(width=widget_width, padding=padding),
)
text

In [18]:

textarea = widgets.Textarea(
    placeholder="Placeholder",
    layout=widgets.Layout(width=widget_width),
)
textarea

In [19]:

buttons = widgets.ToggleButtons(
    value=None,
    options=["Apply", "Reset", "Close"],
    tooltips=["Apply", "Reset", "Close"],
    button_style="primary",
)
buttons.style.button_width = "80px"
buttons

In [20]:

output = widgets.Output(layout=widgets.Layout(width=widget_width, padding=padding))
with output:
    output.clear_output()
    print("Running ...")
output

In [21]:

toolbar_widget = widgets.VBox()
toolbar_widget.children = [
    widgets.HBox([close_button, toolbar_button]),
    checkbox,
    widgets.HBox([int_slider, int_slider_label]),
    widgets.HBox([float_slider, float_slider_label]),
    dropdown,
    text,
    color,
    textarea,
    buttons,
    output,
]
toolbar_widget

---

Last update: 2021-05-07