examples/notebooks/geemap_and_ipywidgets.ipynb

{
    "cells": [
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "<a href=\"https://githubtocolab.com/gee-community/geemap/blob/master/examples/notebooks/geemap_and_ipywidgets.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open in Colab\"/></a>\n",
                "\n",
                "Uncomment the following line to install [geemap](https://geemap.org) if needed."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "# !pip install geemap"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "from ipywidgets import interact, interactive, fixed, interact_manual\n",
                "import ipywidgets as widgets"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "def f(x):\n",
                "    return x"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "interact(f, x=10);"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "interact(f, x=True);"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "interact(f, x='Hi there!')"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "@interact(x=True, y=1.0)\n",
                "def g(x, y):\n",
                "    return (x, y)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "def h(p, q):\n",
                "    return (p, q)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "interact(h, p=5, q=fixed(20))"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.IntSlider()"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "w = widgets.IntSlider()\n",
                "display(w)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "display(w)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "w.close()"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "w = widgets.IntSlider(value=10)\n",
                "display(w)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "w.value"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "w.value = 50"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "w.keys"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Text(value='Hello World!', disabled=True)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "a = widgets.FloatText()\n",
                "b = widgets.FloatSlider()\n",
                "display(a, b)\n",
                "\n",
                "mylink = widgets.jslink((a, 'value'), (b, 'value'))"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "mylink.unlink()"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.IntSlider(\n",
                "    value=7,\n",
                "    min=0,\n",
                "    max=10,\n",
                "    step=1,\n",
                "    description='Test:',\n",
                "    disabled=False,\n",
                "    continuous_update=False,\n",
                "    orientation='horizontal',\n",
                "    readout=True,\n",
                "    readout_format='d',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.FloatSlider(\n",
                "    value=7.5,\n",
                "    min=0,\n",
                "    max=10.0,\n",
                "    step=0.1,\n",
                "    description='Test:',\n",
                "    disabled=False,\n",
                "    continuous_update=False,\n",
                "    orientation='horizontal',\n",
                "    readout=True,\n",
                "    readout_format='.1f',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.FloatSlider(\n",
                "    value=7.5,\n",
                "    min=0,\n",
                "    max=10.0,\n",
                "    step=0.1,\n",
                "    description='Test:',\n",
                "    disabled=False,\n",
                "    continuous_update=False,\n",
                "    orientation='vertical',\n",
                "    readout=True,\n",
                "    readout_format='.1f',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.FloatLogSlider(\n",
                "    value=10,\n",
                "    base=10,\n",
                "    min=-10,  # max exponent of base\n",
                "    max=10,  # min exponent of base\n",
                "    step=0.2,  # exponent step\n",
                "    description='Log Slider',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.IntRangeSlider(\n",
                "    value=[5, 7],\n",
                "    min=0,\n",
                "    max=10,\n",
                "    step=1,\n",
                "    description='Test:',\n",
                "    disabled=False,\n",
                "    continuous_update=False,\n",
                "    orientation='horizontal',\n",
                "    readout=True,\n",
                "    readout_format='d',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.FloatRangeSlider(\n",
                "    value=[5, 7.5],\n",
                "    min=0,\n",
                "    max=10.0,\n",
                "    step=0.1,\n",
                "    description='Test:',\n",
                "    disabled=False,\n",
                "    continuous_update=False,\n",
                "    orientation='horizontal',\n",
                "    readout=True,\n",
                "    readout_format='.1f',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.IntProgress(\n",
                "    value=6,\n",
                "    min=0,\n",
                "    max=10,\n",
                "    step=1,\n",
                "    description='Loading:',\n",
                "    bar_style='',  # 'success', 'info', 'warning', 'danger' or ''\n",
                "    orientation='horizontal',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.BoundedIntText(\n",
                "    value=7, min=0, max=10, step=1, description='Text:', disabled=False\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.IntText(value=7, description='Any:', disabled=False)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.ToggleButton(\n",
                "    value=False,\n",
                "    description='Click me',\n",
                "    disabled=False,\n",
                "    button_style='info',  # 'success', 'info', 'warning', 'danger' or ''\n",
                "    tooltip='Description',\n",
                "    icon='check',  # (FontAwesome names without the `fa-` prefix)\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Checkbox(value=False, description='Check me', disabled=False, indent=False)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Valid(\n",
                "    value=False,\n",
                "    description='Valid!',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Valid(\n",
                "    value=False,\n",
                "    description='Valid!',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Dropdown(\n",
                "    options=['1', '2', '3'],\n",
                "    value='2',\n",
                "    description='Number:',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Dropdown(\n",
                "    options=[('One', 1), ('Two', 2), ('Three', 3)],\n",
                "    value=2,\n",
                "    description='Number:',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.RadioButtons(\n",
                "    options=['pepperoni', 'pineapple', 'anchovies'],\n",
                "    #    value='pineapple', # Defaults to 'pineapple'\n",
                "    #    layout={'width': 'max-content'}, # If the items' names are long\n",
                "    description='Pizza topping:',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Box(\n",
                "    [\n",
                "        widgets.Label(value='Pizza topping with a very long label:'),\n",
                "        widgets.RadioButtons(\n",
                "            options=[\n",
                "                'pepperoni',\n",
                "                'pineapple',\n",
                "                'anchovies',\n",
                "                'and the long name that will fit fine and the long name that will fit fine and the long name that will fit fine ',\n",
                "            ],\n",
                "            layout={'width': 'max-content'},\n",
                "        ),\n",
                "    ]\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Select(\n",
                "    options=['Linux', 'Windows', 'OSX'],\n",
                "    value='OSX',\n",
                "    # rows=10,\n",
                "    description='OS:',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.SelectionSlider(\n",
                "    options=['scrambled', 'sunny side up', 'poached', 'over easy'],\n",
                "    value='sunny side up',\n",
                "    description='I like my eggs ...',\n",
                "    disabled=False,\n",
                "    continuous_update=False,\n",
                "    orientation='horizontal',\n",
                "    readout=True,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "import datetime\n",
                "\n",
                "dates = [datetime.date(2015, i, 1) for i in range(1, 13)]\n",
                "options = [(i.strftime('%b'), i) for i in dates]\n",
                "widgets.SelectionRangeSlider(\n",
                "    options=options, index=(0, 11), description='Months (2015)', disabled=False\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.ToggleButtons(\n",
                "    options=['Slow', 'Regular', 'Fast'],\n",
                "    description='Speed:',\n",
                "    disabled=False,\n",
                "    button_style='',  # 'success', 'info', 'warning', 'danger' or ''\n",
                "    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],\n",
                "    #     icons=['check'] * 3\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.SelectMultiple(\n",
                "    options=['Apples', 'Oranges', 'Pears'],\n",
                "    value=['Oranges'],\n",
                "    # rows=10,\n",
                "    description='Fruits',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Text(\n",
                "    value='Hello World',\n",
                "    placeholder='Type something',\n",
                "    description='String:',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Textarea(\n",
                "    value='Hello World',\n",
                "    placeholder='Type something',\n",
                "    description='String:',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Combobox(\n",
                "    # value='John',\n",
                "    placeholder='Choose Someone',\n",
                "    options=['Paul', 'John', 'George', 'Ringo'],\n",
                "    description='Combobox:',\n",
                "    ensure_option=True,\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Password(\n",
                "    value='password',\n",
                "    placeholder='Enter password',\n",
                "    description='Password:',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.HBox([widgets.Label(value=\"The $m$ in $E=mc^2$:\"), widgets.FloatSlider()])"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.HTML(\n",
                "    value=\"Hello <b>World</b>\",\n",
                "    placeholder='Some HTML',\n",
                "    description='Some HTML',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.HTMLMath(\n",
                "    value=r\"Some math and <i>HTML</i>: \\(x^2\\) and $$\\frac{x+1}{x-1}$$\",\n",
                "    placeholder='Some HTML',\n",
                "    description='Some HTML',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "file = open(\"/home/qiusheng/Pictures/t-mo.png\", \"rb\")\n",
                "image = file.read()\n",
                "widgets.Image(\n",
                "    value=image,\n",
                "    format='png',\n",
                "    width=300,\n",
                "    height=400,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Button(\n",
                "    description='Click me',\n",
                "    disabled=False,\n",
                "    button_style='warning',  # 'success', 'info', 'warning', 'danger' or ''\n",
                "    tooltip='Click me',\n",
                "    icon='check',  # (FontAwesome names without the `fa-` prefix)\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "play = widgets.Play(\n",
                "    value=50,\n",
                "    min=0,\n",
                "    max=100,\n",
                "    step=1,\n",
                "    interval=500,\n",
                "    description=\"Press play\",\n",
                "    disabled=False,\n",
                ")\n",
                "slider = widgets.IntSlider()\n",
                "widgets.jslink((play, 'value'), (slider, 'value'))\n",
                "widgets.HBox([play, slider])"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.DatePicker(description='Pick a Date', disabled=False)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.FileUpload(\n",
                "    accept='',  # Accepted file extension e.g. '.txt', '.pdf', 'image/*', 'image/*,.pdf'\n",
                "    multiple=False,  # True to accept multiple files upload else False\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Controller(\n",
                "    index=0,\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "items = [widgets.Label(str(i)) for i in range(4)]\n",
                "widgets.Box(items)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "items = [widgets.Label(str(i)) for i in range(4)]\n",
                "widgets.HBox(items)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "items = [widgets.Label(str(i)) for i in range(4)]\n",
                "left_box = widgets.VBox([items[0], items[1]])\n",
                "right_box = widgets.VBox([items[2], items[3]])\n",
                "widgets.HBox([left_box, right_box])"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "items = [widgets.Label(str(i)) for i in range(8)]\n",
                "widgets.GridBox(items, layout=widgets.Layout(grid_template_columns=\"repeat(3, 100px)\"))"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']\n",
                "children = [widgets.Text(description=name) for name in tab_contents]\n",
                "tab = widgets.Tab()\n",
                "tab.children = children\n",
                "tab.titles = [str(i) for i in range(len(children))]\n",
                "tab"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "out = widgets.Output(layout={'border': '1px solid black'})\n",
                "out"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "with out:\n",
                "    for i in range(10):\n",
                "        print(i, 'Hello world!')"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "from IPython.display import YouTubeVideo\n",
                "\n",
                "with out:\n",
                "    display(YouTubeVideo('eWzY2nGfkXk'))"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "with out:\n",
                "    display(widgets.IntSlider())"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "out = widgets.Output(layout={'border': '1px solid black'})\n",
                "out.append_stdout('Output appended with append_stdout')\n",
                "out.append_display_data(YouTubeVideo('eWzY2nGfkXk'))\n",
                "out"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "out.clear_output()"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "from IPython.display import display\n",
                "\n",
                "button = widgets.Button(description=\"Click Me!\")\n",
                "output = widgets.Output()\n",
                "\n",
                "display(button, output)\n",
                "\n",
                "\n",
                "def on_button_clicked(b):\n",
                "    with output:\n",
                "        print(\"Button clicked.\")\n",
                "\n",
                "\n",
                "button.on_click(on_button_clicked)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "int_range = widgets.IntSlider()\n",
                "output2 = widgets.Output()\n",
                "\n",
                "display(int_range, output2)\n",
                "\n",
                "\n",
                "def on_value_change(change):\n",
                "    with output2:\n",
                "        print(change['new'])\n",
                "\n",
                "\n",
                "int_range.observe(on_value_change, names='value')"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": []
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": []
        }
    ],
    "metadata": {
        "kernelspec": {
            "display_name": "Python 3",
            "language": "python",
            "name": "python3"
        }
    },
    "nbformat": 4,
    "nbformat_minor": 5
}