notebooks/misc/image streaming demo.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "<img src=\"streaming.png\" width=\"500\">\n",
    "\n",
    "# Streaming a numpy array into an image\n",
    "\n",
    "The `jp_doodle` package includes the `stream_image_array` module which provides\n",
    "functionality for displaying the contents of an array.  After the widget is displayed\n",
    "the image content may be updated dynamically.\n",
    "\n",
    "Below we create a simple gray scale image display as a \"hello world\" image display example."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "from jp_doodle.stream_image_array import StreamImageArray\n",
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "\n",
    "import numpy as np\n",
    "A = np.zeros((3,5))\n",
    "for i in range(3):\n",
    "    A[i] = [0,244,0,244,0]\n",
    "for j in range(2,5):\n",
    "    A[:,j] = [0,233,130]\n",
    "A"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "w = StreamImageArray(A, width=500, height=300)\n",
    "w"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# Dynamically updating the image with new array data\n",
    "\n",
    "After the widget is created the image may be updated dynamically with the content\n",
    "of an array with the same width and height of the original array using the\n",
    "`widget.update_image(array)` method.\n",
    "\n",
    "Below we define a function which generates an array using\n",
    "four parameters and initialize a `StreamImageArray` widget for viewing arrays of that shape.\n",
    "The widget looks like this when running:\n",
    "\n",
    "<img src=\"streaming.png\" width=\"500\"/>\n",
    "\n",
    "The cell after the widget adds an `interactive` widget which updates the\n",
    "image using different parameter values dynamically when the user adjusts the slider controls."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "(nx, ny) = (200, 300)\n",
    "#(nx, ny) = (512,512)\n",
    "x = np.linspace(-3, 3, nx)\n",
    "y = np.linspace(-2, 3, ny)\n",
    "xv, yv = np.meshgrid(x, y)\n",
    "blue = np.array([0,0,255]).reshape([1,1,3])\n",
    "yellow = np.array([255,255,0]).reshape([1,1,3])\n",
    "\n",
    "def testArray(a=1, b=-1, c=2, d=-2):\n",
    "    level =  (1 + np.sin(a * xv * xv + b * yv * yv + c * xv * yv + d))\n",
    "    level = level.reshape(level.shape + (1,))\n",
    "    return level * blue + (1 - level) * yellow\n",
    "\n",
    "A = testArray()\n",
    "A.shape"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "w = StreamImageArray(A, width=500, height=300)\n",
    "#w = StreamImageArray(A, width=512, height=512)\n",
    "\n",
    "def update(a=1, b=-1, c=2, d=-2):\n",
    "    A = testArray(a, b, c, d)\n",
    "    w.update_image(A)\n",
    "\n",
    "w"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "wi = interactive(update, a=(-3.3, 3.3), b=(-3.3, 3.3), c=(-3.3, 3.3), d=(-3.3, 3.3))\n",
    "wi"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# Using a dual canvas\n",
    "\n",
    "To you can also reload an image dynamically in a dual canvas.\n",
    "This has the advantage of providing event handling and coordinate\n",
    "conversion conveniences, but it may be less responsive due to\n",
    "additional overhead."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "from jp_doodle import dual_canvas\n",
    "\n",
    "canvas = dual_canvas.SnapshotCanvas(\"image test.png\", width=820, height=320)\n",
    "frame = canvas.rframe(1, 1)\n",
    "\n",
    "def update_canvas(a=1, b=-1, c=2, d=-2):\n",
    "    A = testArray(a, b, c, d)\n",
    "    canvas.name_image_array(\"test image\", A)\n",
    "    with canvas.delay_redraw():\n",
    "        frame.reset_frame()\n",
    "        frame.named_image(\"test image\", 0, 0, 200, 200)\n",
    "        frame.lower_left_axes(min_x=0, max_x=200, min_y=0, max_y=200)\n",
    "\n",
    "update_canvas()\n",
    "canvas.fit()\n",
    "canvas"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "wi = interactive(update_canvas, a=(-3.3, 3.3), b=(-3.3, 3.3), c=(-3.3, 3.3), d=(-3.3, 3.3))\n",
    "wi"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}