99 [補充] Jupyter 裡的 Widgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 07sup Jupyter 裡的 Widgets\n",
    "\n",
    "有很多同學問到, 我們用 `ipywidgets` 的 `interact` 或 `interact_manual` 可以做得更漂亮、更客制化我們想要的功能嗎?\n",
    "\n",
    "答案是肯定的。\n",
    "\n",
    "這就要用到眾多很酷的 widgets。雖然每次設定麻煩一點點, 但不管是種類還是自由度都高很多。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 07sup-1 Widgets 概念\n",
    "\n",
    "我們先來引入一個 `widget`, 然後大概介紹這有可能可以做什麼。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from ipywidgets.widgets import *\n",
    "from IPython.display import display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "這裡要注意, 有個 `widget` 叫 `HTML`, 但這和之前我們引入的\n",
    "\n",
    "```python\n",
    "from IPython.display import HTML\n",
    "```\n",
    "\n",
    "是<b style=\"color:red;\">不同的</b>!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html = HTML('<h1>Hi</h1>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "這目前看來一樣? 不一樣是我們可以 display 很多次, 而且你可以之後修改顯示內容。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html.value = '<h1 style=\"color:red;\">你好</h1>'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "你會發現, 兩次的 display 都改了!! 這有什麼好處呢? 這就是我們放上一個在網頁上的 widget, 我們可以去改變它呈現的樣子。\n",
    "\n",
    "為了示範一個「小動畫」例子, 我們做一隻會跑的蟲。為了不要讓蟲蟲「瞬間移動」, 我們引入 `sleep`。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from time import sleep"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "worm = HTML('<div style=\"color:green;\">oooo</div>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(worm)\n",
    "for i in range(80):\n",
    "    htmlbase = '<div style=\"color:green;\">%s</div>'\n",
    "    html = htmlbase % (\"&nbsp;\" * (i+1) + \"oooo\")\n",
    "    worm.value = html\n",
    "    sleep(0.2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "這裡說明一下, 我們用到的\n",
    "\n",
    "    &nbsp;\n",
    "\n",
    "是 HTML 的空白。直接打空白你會發現 HTML 不理你, 當然你也可以直接打「全型的空白」, 因為 HTML 基本上當成一個文字, 所以會乖乖顯示。\n",
    "\n",
    "而 \n",
    "\n",
    "    sleep(0.2)\n",
    "    \n",
    "是說讓 Python 「睡」 0.2 秒, 再繼繼下一個動作。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### [練習] 讓蟲蟲爬回來\n",
    "\n",
    "有同學問到, 可以自動讓蟲蟲爬回來可以嗎? 當然可以啊, 試試看吧 :)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 07sup-2 進度條\n",
    "\n",
    "進度條就是像我們下載大型檔案時, 電腦會出現目前已進行多少百分比的進度那個指示條。你可以看到反正每次要使用一個 widget, 就是先宣告一個 widget, 然後用 <b>`display`</b> 顯示出來。再來就是可以改一些裡面的設定, 最常改的就是 <b>`value`</b>。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "p = IntProgress()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "這空空的進度條當然沒什麼好看的, 我們可以設任一個 0 到 100 的數字給它, 比如說:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "p.value=55"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "當然會動的進度表更有感覺 :)\n",
    "\n",
    "為了看清楚, 我們再一次顯示同一個進度表, 注意和之前的進度表是完全連動的!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(p)\n",
    "\n",
    "for i in range(101):\n",
    "    p.value = i\n",
    "    sleep(0.1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 07sup-3 老朋友, 數值滑桿\n",
    "\n",
    "我們回來看看之前用 `interact` 就會出現的數值滑桿。我們為何要自已呼叫呢? 因為更可以完全客制化, 更彈性的運用。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "s = IntSlider(min=1, max=10)\n",
    "s.color=\"#44AF69\"\n",
    "s.slider_color=\"#FCAB10\"\n",
    "s.background_color=\"#1FDE91\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "display(s)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "倒底有什麼參數可以改呢? 我們可以列出來看看。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['font_style',\n",
       " 'orientation',\n",
       " '_range',\n",
       " 'layout',\n",
       " '_model_module',\n",
       " 'font_weight',\n",
       " 'slider_color',\n",
       " 'readout',\n",
       " '_view_module',\n",
       " 'font_size',\n",
       " 'min',\n",
       " 'continuous_update',\n",
       " 'value',\n",
       " '_dom_classes',\n",
       " 'visible',\n",
       " 'step',\n",
       " 'description',\n",
       " '_view_name',\n",
       " 'font_family',\n",
       " 'color',\n",
       " 'background_color',\n",
       " 'readout_format',\n",
       " '_model_name',\n",
       " 'msg_throttle',\n",
       " 'disabled',\n",
       " 'max']"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "s.keys"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "而且, 我們還可以客制化的精美數值滑桿用到之前的 `interact` 中。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from ipywidgets import interact"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "def f(x):\n",
    "    print(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "6\n"
     ]
    }
   ],
   "source": [
    "interact(f, x=s);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 07sup-4 應該有個叫按鈕的東西\n",
    "\n",
    "互動介面中, 我們常常用到的按鈕, 應該有個吧? 那是當然的。按鈕和之前的應用有點不一樣的是, 按下去應該要執行一個動作, 這個動作我們通常會寫成一個函數。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "b = Button(\n",
    "    description='按我',\n",
    "    button_style='info', # 這風格還有 'success', 'warning', 'danger' 等等 \n",
    "    width='100px'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(b)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "目前按一按沒有什麼特別效果, 我們為了示範, 先來寫個耍寶小程式。\n",
    "\n",
    "首先我們用 `HTML` 讀入一張圖。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "img_html = HTML(\"<img src='images/numpy.png'>\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(img_html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "試著讓圖動一下。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(img_html)\n",
    "for i in range(60):\n",
    "    img_html.value = \"&nbsp;\" * i + \"<img src='images/numpy.png'>\"\n",
    "    sleep(0.1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "接下來我們想按按鈕, 就讓這隻熊熊開始動。我們再度顯示按鈕和熊熊。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(b)\n",
    "display(img_html)\n",
    "\n",
    "def on_button_clicked(b):\n",
    "    for i in range(60):\n",
    "        img_html.value = \"&nbsp;\" * i + \"<img src='images/numpy.png'/>\"\n",
    "        sleep(0.1)\n",
    "\n",
    "b.on_click(on_button_clicked)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 07sup-5 文字框輸入後...\n",
    "\n",
    "大家還記得我們要做「拍拍機器人」。這就要用文字框輸入, 然後 <b>`submit`</b> 後機器人會回話。如下圖。\n",
    "\n",
    "<img src=\"images/pipibot.png\" width=250px>\n",
    "\n",
    "首先, 我們先弄個文字框。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "me = Text(\"輸入訊息...\")\n",
    "me.description = \"輸入\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "再來用盡洪荒之力, 把所有會的 CSS 都弄上去。一個風格是準備給自己的發言 (`style1`), 一個是給拍拍機器人 (`style2`)。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "style1 = \"<p style='position:relative; left:80px; padding:10px; border-radius:25px; color:white; background:#4080FF; width:200px;'>\"\n",
    "style2 = \"<p style='padding:10px; border-radius:25px; background:#F1F0F0; width:200px;'>\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "我們「高級」對話程式來了, 當文字框被 `submit`, 我們就要把我們說的話、拍拍機器人的回話顯示出來。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "def pipi(sender):\n",
    "    display(HTML(style1 + me.value + '</p> <br>'))\n",
    "    display(HTML(style2 + '拍拍' + '</p> <br>'))\n",
    "    me.value = ''"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "告訴我們的文字輸入框, 如果按下 enter, 也就是 `submit`, 就執行 `pipi` 這個函數。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "me.on_submit(pipi)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "最後 display 我們的輸入框就好了!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(me)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### [練習] \n",
    "其實這拍拍機器人還有很多不完美的地方 (當然包括 AI, 但現在我們說的是界面上的問題), 想辦法改善它!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 07sub-6 連結兩個 widgets\n",
    "\n",
    "有時我們想同時可以用文字對話框輸入數字, 也可以用數值滑桿輸同一個數字, 這要怎麼做到呢? 這就要新開啟一個神秘套件叫 `"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from traitlets import link"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "設個數字輸入框、數值滑桿。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "ftxt = FloatText()\n",
    "fsld = FloatSlider()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "設好連結, 把兩個 widgets 的物件同步。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "mylink = link((ftxt, 'value'), (fsld, 'value'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "顯示出來試試是不是真的同步了。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(ftxt, fsld)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "我們也可以取消同步。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "mylink.unlink()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 07-sup-7 Layout\n",
    "\n",
    "我們想排一排我們的 widgets, 可以用 `HBox`, `VBox`, `Tabs` 等等來達成。\n",
    "\n",
    "<img src=\"images/layout.png\" width=200px>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 35,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "buttons = [Button(description=str(i)) for i in range(1,10)]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "稍稍設一下 9 個按鈕的風格。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "for b in buttons:\n",
    "    b.button_style = \"info\"\n",
    "    b.width = \"50px\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "顯示出來!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "groups = [buttons[3*i:3*i+3] for i in range(3)] "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "layout = VBox([HBox(groups[0]), HBox(groups[1]), HBox(groups[2])])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "display(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### [練習]\n",
    "\n",
    "試試可不可以寫出一個 Jupyter 計算機!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    " ## 07sup-8 延伸活動\n",
    " \n",
    " 在哪裡還可以找到一些 `ipywidgets` 更深入的資訊、範例呢? 這裡介紹一些, 都是很適合<b style=\"color:red;\">閃電秀</b>的主題哦。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### `ipywidgets` 官方文件\n",
    "\n",
    "通常官方文件都不是聽來很令人振奮的東西, 不過 `ipywidgets` 的官方文件目前還是大概包含最多資訊、包括一些基礎教學的地方。\n",
    "\n",
    "[`ipywidgets` 官方文件](http://ipywidgets.readthedocs.io/)\n",
    "\n",
    "比如說, 我們可以在這找到[所有可以用的 widgets 列表](http://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html)。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 進階應用\n",
    "\n",
    "這麼炫的工具當然也有人寫了進階應用的套件。我們來看三個例子:\n",
    "\n",
    "* [bqplot](https://github.com/bloomberg/bqplot): 可以做 2D 互動畫圖的函式庫。\n",
    "* [pythreejs](https://github.com/jovyan/pythreejs): 讓你在 Jupyter 中使用 [three.js](https://threejs.org/) 這個 JavaScript 3D 函式庫!\n",
    "* [ipyleaflet](https://github.com/ellisonbg/ipyleaflet): 在 Jupyter 中用 [Leaflet](http://leafletjs.com/) 個互動地圖!"
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python [conda root]",
   "language": "python",
   "name": "conda-root-py"
  },
  "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.5.2"
  },
  "widgets": {
   "state": {
    "35b90cc5266e4f8a9917b3859333474a": {
     "views": [
      {
       "cell_index": 24
      }
     ]
    },
    "3febbfa0e4b34ee59ac741dd233559c6": {
     "views": [
      {
       "cell_index": 17
      },
      {
       "cell_index": 21
      }
     ]
    },
    "42858a3eab244fe6af6620a660921148": {
     "views": [
      {
       "cell_index": 33
      },
      {
       "cell_index": 40
      }
     ]
    },
    "68de8d537fc84e10879807bb6c9875db": {
     "views": [
      {
       "cell_index": 36
      },
      {
       "cell_index": 38
      },
      {
       "cell_index": 40
      }
     ]
    },
    "738725f598e540e781a99e5c15685b57": {
     "views": [
      {
       "cell_index": 30
      }
     ]
    },
    "8d30863e64574eed8f5f7132b655d0bc": {
     "views": [
      {
       "cell_index": 12
      }
     ]
    },
    "a2bc488bb09a4fef9ec6613c8f04f7ea": {
     "views": [
      {
       "cell_index": 50
      }
     ]
    },
    "d1e799b6d06c495baf696b5ba5d57727": {
     "views": [
      {
       "cell_index": 5
      },
      {
       "cell_index": 7
      }
     ]
    }
   },
   "version": "1.2.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}