{ "metadata": { "name": "04_Color_Picker" }, "nbformat": 3, "nbformat_minor": 0, "worksheets": [ { "cells": [ { "cell_type": "heading", "level": 1, "metadata": {}, "source": [ "Example Application: A Color Selector" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Here we'll go through an example that incorporates both widgets and key bindings\n", "to create a color selector natively in matplotlib. We'll go through the pieces\n", "sequentially: if you close the plot window, you'll have to re-run the script from\n", "the beginning.\n", "\n", "Again, we'll start with enabling pylab mode:" ] }, { "cell_type": "code", "collapsed": false, "input": [ "%pylab" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "markdown", "metadata": {}, "source": [ "We'd like a way for the user to visually (and interactively) pick any\n", "of the $256^3$ RGB colors available to matplotlib. We'll start by\n", "displaying an image of all the red and green values, with the blue\n", "set to zero. This can be done through the imshow command:" ] }, { "cell_type": "code", "collapsed": false, "input": [ "im_arr = np.zeros((256, 256, 3), dtype=np.float32)\n", "im_arr[:, :, 0] = np.linspace(0, 1, 256)\n", "im_arr[:, :, 1] = np.linspace(0, 1, 256)[:, np.newaxis]\n", "\n", "fig = plt.figure(figsize=(8, 8))\n", "main_ax = plt.axes([0.1, 0.15, 0.8, 0.8], xticks=[], yticks=[])\n", "im = main_ax.imshow(im_arr, origin='lower', extent=[0, 1, 0, 1])" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Next we need a way for the user to express the blue value. We can use\n", "a widget for this. Let's add a slider widget to the window which changes\n", "the blue pixel value, and adjusts the color we see in the window when it's\n", "picked:" ] }, { "cell_type": "code", "collapsed": false, "input": [ "from matplotlib.widgets import Slider, AxesWidget\n", "slider_ax = plt.axes([0.1, 0.1, 0.8, 0.02])\n", "slider = Slider(slider_ax, 'Blue', 0.0, 1.0, valinit=0.0, color='#AAAAFF')\n", "\n", "def update(val):\n", " im_arr[:, :, 2] = val\n", " im.set_data(im_arr)\n", " fig.canvas.draw()\n", "\n", "slider.on_changed(update)" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Now that we can **visualize** any possible RGB color, let's create a way to **pick** any\n", "RGB color. Let's first make a tiny axes and text box where we can display a chosen color\n", "and its hex identifier:" ] }, { "cell_type": "code", "collapsed": false, "input": [ "cbox_ax = plt.axes([0.1, 0.04, 0.04, 0.04], xticks=[], yticks=[])\n", "cbox_im = cbox_ax.imshow(np.ones((1, 1, 3)))\n", "cbox_txt = cbox_ax.text(1.5, 0.5, \"(text)\", transform=cbox_ax.transAxes,\n", " fontsize=20, va='center', ha='left')" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Now we can create a **pick** event that lets us pick the appropriate color.\n", "Here's where our pre-planning has paid off: the image extent goes from 0 to 1,\n", "which is exactly the scale of the color values. So if we pick an event at\n", "data coordinate (x, y), then we can set (R, G, B) = (x, y, B), with B set\n", "by the value of the slider:" ] }, { "cell_type": "code", "collapsed": false, "input": [ "from matplotlib.colors import rgb2hex\n", "\n", "def on_pick(event):\n", " r = event.mouseevent.xdata\n", " g = event.mouseevent.ydata\n", " b = slider.val\n", " cbox_im.set_data([[[r, g, b]]])\n", " cbox_txt.set_text(rgb2hex((r, g, b)).upper())\n", " fig.canvas.draw()\n", " \n", "im.set_picker(True)\n", "fig.canvas.mpl_connect('pick_event', on_pick)" ], "language": "python", "metadata": {}, "outputs": [] } ], "metadata": {} } ] }