03_fpl_intro_users.ipynb

{
  "cells": [
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "%matplotlib inline"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "# Introduction to `fastplotlib`\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## `fastplotlib` API\n### 1. Graphics - objects that are drawn\n### 2. Layouts\n### 3. Widgets - high level widgets to make repetitive UIs easier\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "import fastplotlib as fpl\nimport numpy as np\nimport imageio.v3 as iio\nimport workshop_utils"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Simple Image\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# create a `Figure` instance\n# by default the figure will have 1 subplot\nfig = fpl.Figure(size=(600, 500))\n\n# get a grayscale image\ndata = iio.imread(\"imageio:camera.png\")\n\n# plot the image data\nimage_graphic = fig[0, 0].add_image(data=data, name=\"sample-image\")\n\n# show the plot\nfig.show(sidecar=True)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "image_graphic.cmap = \"viridis\""
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Slicing data\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "print(image_graphic.data.value.shape)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "image_graphic.data[::15, :] = 1\nimage_graphic.data[:, ::15] = 1"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "image_graphic.data[data > 175] = 255"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "image_graphic.vmin = 50\nimage_graphic.vmax = 150"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "image_graphic.reset_vmin_vmax()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Change graphic properties\n\nNow that we have a better idea of how graphic properties can be dynamically changed, let's practice :D\n\n**Question:** Can you change the data of the image to be random data of the same shape? Hint: Use `np.random.rand()`\nto create the new data.\n\nNote: At first you should see a solid image. You will need to reset the vmin/vmax of the image.\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# enter code here"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "**Question:** Can you change the colormap of the image? See\n[here](https://matplotlib.org/stable/gallery/color/colormap_reference.html) for a list of colormaps.\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# enter code here"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Image updates\nThis examples show how you can define animation functions that run on every render cycle.\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# create another `Figure` instance\nfig_v = fpl.Figure(size=(600, 500))\n\nfig.canvas.max_buffered_frames = 1\n\n# make some random data again\ndata = np.random.rand(512, 512)\n\n# plot the data\n\nfig_v[0, 0].add_image(data=data, name=\"random-image\")\n\n\n# a function to update the image_graphic\n# a plot will pass its plot instance to the animation function as an argument\n\ndef update_data(plot_instance):\n    new_data = np.random.rand(512, 512)\n    plot_instance[0, 0][\"random-image\"].data = new_data\n\n\n# add this as an animation function\n\nfig_v.add_animations(update_data)\n\nfig_v.show(sidecar=True)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# close the plot\nfig_v.close()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Image Practice\n\n**Question:** Can you do the following:\n\n- create a new plot called `practice_fig`\n\n- add an `ImageGraphic` with the following characteristics to the figure:\n\n     - random data in the shape (512, 512)\n\n     - colormap \"viridis\"\n\n     - name \"random-image\"\n\n- set the top-left and bottom-right quadrants of the data to 1 using slicing :D\n\n- add an animation function that updates the top-right and bottom-left quadrants with new random data\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# enter code here"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## `ImageWidget`\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# get zfish data\npath = workshop_utils.fetch_zfish()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# load subsampled snippet of zebrafish data from Martin Haesemeyer\nzfish_data = np.load(path, allow_pickle=False)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# data is tzxy\nprint(zfish_data.shape)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# get the number of planes\nn_planes = zfish_data.shape[1]\nprint(n_planes)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "iw_zfish = fpl.ImageWidget(\n    data=[zfish_data[:, i] for i in range(n_planes)],\n    window_funcs={\"t\": (np.mean, 5)},\n    names=[f\"plane-{i}\" for i in range(n_planes)],\n    cmap=\"gnuplot2\",\n)\n\niw_zfish.show(sidecar=True)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Apply a window function\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "#iw_zfish.window_funcs[\"t\"].func = np.max"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# close the plot\niw_zfish.close()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### z-slider\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "iw_z = fpl.ImageWidget(\n    data=zfish_data, # you can also provide a list of tzxy arrays\n    window_funcs={\"t\": (np.mean, 5)},\n    cmap=\"gnuplot2\",\n)\n\niw_z.show()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# close the plot\niw_z.close()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## 2D Line Plots\n\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### First generate some data\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# linspace, create 100 evenly spaced x values from -10 to 10\nxs = np.linspace(-10, 10, 100)\n# sine wave\nys = np.sin(xs)\nsine = np.column_stack([xs, ys])\n\n# cosine wave\nys = np.cos(xs)\ncosine = np.column_stack([xs, ys])\n\n# sinc function\na = 0.5\nys = np.sinc(xs) * 3\nsinc = np.column_stack([xs, ys])"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# Create a figure\nfig_lines = fpl.Figure()\n# we will add all the lines to the same subplot\nsubplot = fig_lines[0, 0]\n\n# plot sine wave, use a single color\nsine_graphic = subplot.add_line(data=sine, thickness=5, colors=\"magenta\")\n\n# you can also use colormaps for lines!\ncosine_graphic = subplot.add_line(data=cosine, thickness=12, cmap=\"autumn\", offset=(0, 5, 0))\n\n# or a list of colors for each datapoint\ncolors = [\"r\"] * 25 + [\"purple\"] * 25 + [\"y\"] * 25 + [\"b\"] * 25\nsinc_graphic = subplot.add_line(data=sinc, thickness=5, colors=colors, offset=(0, 8, 0))\n\n# show the plot\nfig_lines.show(sidecar=True, sidecar_kwargs={\"title\": \"lines\"})"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Graphic properties support slicing! :D\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# indexing of colors\ncosine_graphic.colors[:15] = \"magenta\"\ncosine_graphic.colors[90:] = \"red\"\ncosine_graphic.colors[60] = \"w\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# indexing to assign colormaps to entire lines or segments\nsinc_graphic.cmap[10:50] = \"gray\"\n\n# setting the colormap based on particular values\nsine_graphic.cmap = \"plasma\"\n# set the cmap transform\nsine_graphic.cmap.transform = [4] * 25 + [1] * 25 + [3] * 25 + [8] * 25"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# close the plot\nfig_lines.close()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# Create a figure\nfig_lines = fpl.Figure()\n\n# we will add all the lines to the same subplot\nsubplot = fig_lines[0, 0]\n\n# plot sine wave, use a single color\nsine_graphic = subplot.add_line(data=sine, thickness=5, colors=\"magenta\")\n\n# you can also use colormaps for lines!\ncosine_graphic = subplot.add_line(data=cosine, thickness=12, cmap=\"autumn\", offset=(0, 5, 0))\n\n# show the plot\nfig_lines.show(sidecar=True, sidecar_kwargs={\"title\": \"lines\"})"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "#### 2D Lines Practice\n**Question:** Can you change the colormap of the sine_graphic to \"hsv\"?\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# enter code here"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "**Question:** Can you change the color of first 50 data points of the sinc_graphic to green?\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# enter code here"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "**Question:** Can you to change the color of last 50 points of the cosine_graphic to equal the colors of the\nlast 50 points of the sine_graphic?\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# enter code here"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "#### Capture changes to graphic properties as events\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# first set the color of the sine and cosine wave to white so that we can better see the changes\ncosine_graphic.colors = \"w\"\nsine_graphic.colors = \"w\"\n\n# will print event data when the color of the cosine graphic changes\n@cosine_graphic.add_event_handler(\"colors\")\ndef callback_func(ev):\n    print(ev.info)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# when the cosine graphic colors change, will also update the sine_graphic colors\ndef change_colors(ev):\n    sine_graphic.colors[ev.info[\"key\"]] = \"magenta\"\n\n\n    \ncosine_graphic.add_event_handler(change_colors, \"colors\")"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "cosine_graphic.colors[:10] = \"g\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "fig_lines.close()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### More Events :D\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# generate some circles\ndef make_circle(center, radius: float, n_points: int = 75) -> np.ndarray:\n    theta = np.linspace(0, 2 * np.pi, n_points)\n    xs = radius * np.sin(theta)\n    ys = radius * np.cos(theta)\n\n    return np.column_stack([xs, ys]) + center\n\n\n# this makes 5 circles\ncircles = list()\nfor x in range(0, 50, 10):\n    circles.append(make_circle(center=(x, 0), radius=4, n_points=100))"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "fig = fpl.Figure()\n\ncircles_graphic = fig[0, 0].add_line_collection(data=circles, cmap=\"tab10\", thickness=10)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "fig.show()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# get the nearest graphic that is clicked and change the color\ndef click_event(ev):\n    # reset colors\n    circles_graphic.cmap = \"tab10\"\n\n    # map the click position to world coordinates\n    xy = fig[0, 0].map_screen_to_world(ev)[:-1]\n\n    # get the nearest graphic to the position\n    nearest = fpl.utils.get_nearest_graphics(xy, circles_graphic)[0]\n\n    # change the closest graphic color to white\n    nearest.colors = \"w\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# add event handler to the renderer\nfig[0, 0].renderer.add_event_handler(click_event, \"click\")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "#### Events Practice\n\n**Question:** Can you add another event handler (using either method) to the circles_graphic that will change the\nthickness of a circle to 5 when you hover over it?\n\nHint: the event type should be \"pointer_move\" :)\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# enter code here"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Selectors\n### `LinearSelector`\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "fig = fpl.Figure()\n\n# same sine data from before\nsine_graphic = fig[0, 0].add_line(data=sine, colors=\"w\")\n\n# add a linear selector the sine wave\nselector = sine_graphic.add_linear_selector()\n\nfig[0, 0].auto_scale()\n\nfig.show(maintain_aspect=False)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# change the color of the sine wave based on the location of the linear selector\n@selector.add_event_handler(\"selection\")\ndef set_color_at_index(ev):\n    # get the selected index\n    ix = ev.get_selected_index()\n    # get the sine graphic\n    g = ev.graphic.parent\n    # change the color of the sine graphic at the index of the selector\n    g.colors[ix] = \"green\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# close the plot\nfig.close()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### `LinearRegionSelector`\n\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "fig = fpl.Figure((2, 1))\n\n# data to plot\nxs = np.linspace(0, 10 * np.pi, 1_000)\n\nsine = np.sin(xs)\nsine += 100\n\n# make sine along x axis\nsine_graphic_x = fig[0, 0].add_line(np.column_stack([xs, sine]), offset=(10, 0, 0))\n\n# add a linear region selector\nls_x = sine_graphic_x.add_linear_region_selector()  # default axis is \"x\"\n\n# get the initial selected date of the linear region selector\nzoomed_init = ls_x.get_selected_data()\n\n# make a line graphic for displaying zoomed data\nzoomed_x = fig[1, 0].add_line(zoomed_init)\n\n\n@ls_x.add_event_handler(\"selection\")\ndef set_zoom_x(ev):\n    \"\"\"sets zoomed x selector data\"\"\"\n    # get the selected data\n    selected_data = ev.get_selected_data()\n\n    # remove the current zoomed data\n    # and update with new selected data\n    global zoomed_x\n\n    fig[1, 0].remove_graphic(zoomed_x)\n    zoomed_x = fig[1, 0].add_line(selected_data)\n    fig[1, 0].auto_scale()\n\n\nfig.show(maintain_aspect=False)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# close the plot\nfig.close()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## For more examples, please see our gallery:\n### https://fastplotlib.readthedocs.io/en/latest/_gallery/index.html\n"
      ]
    }
  ],
  "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.11.9"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}