You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.

matplotlib_ani2.ipynb 115 kB

6 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790
  1. {
  2. "cells": [
  3. {
  4. "cell_type": "code",
  5. "execution_count": 1,
  6. "metadata": {},
  7. "outputs": [
  8. {
  9. "data": {
  10. "application/javascript": [
  11. "/* Put everything inside the global mpl namespace */\n",
  12. "window.mpl = {};\n",
  13. "\n",
  14. "\n",
  15. "mpl.get_websocket_type = function() {\n",
  16. " if (typeof(WebSocket) !== 'undefined') {\n",
  17. " return WebSocket;\n",
  18. " } else if (typeof(MozWebSocket) !== 'undefined') {\n",
  19. " return MozWebSocket;\n",
  20. " } else {\n",
  21. " alert('Your browser does not have WebSocket support.' +\n",
  22. " 'Please try Chrome, Safari or Firefox ≥ 6. ' +\n",
  23. " 'Firefox 4 and 5 are also supported but you ' +\n",
  24. " 'have to enable WebSockets in about:config.');\n",
  25. " };\n",
  26. "}\n",
  27. "\n",
  28. "mpl.figure = function(figure_id, websocket, ondownload, parent_element) {\n",
  29. " this.id = figure_id;\n",
  30. "\n",
  31. " this.ws = websocket;\n",
  32. "\n",
  33. " this.supports_binary = (this.ws.binaryType != undefined);\n",
  34. "\n",
  35. " if (!this.supports_binary) {\n",
  36. " var warnings = document.getElementById(\"mpl-warnings\");\n",
  37. " if (warnings) {\n",
  38. " warnings.style.display = 'block';\n",
  39. " warnings.textContent = (\n",
  40. " \"This browser does not support binary websocket messages. \" +\n",
  41. " \"Performance may be slow.\");\n",
  42. " }\n",
  43. " }\n",
  44. "\n",
  45. " this.imageObj = new Image();\n",
  46. "\n",
  47. " this.context = undefined;\n",
  48. " this.message = undefined;\n",
  49. " this.canvas = undefined;\n",
  50. " this.rubberband_canvas = undefined;\n",
  51. " this.rubberband_context = undefined;\n",
  52. " this.format_dropdown = undefined;\n",
  53. "\n",
  54. " this.image_mode = 'full';\n",
  55. "\n",
  56. " this.root = $('<div/>');\n",
  57. " this._root_extra_style(this.root)\n",
  58. " this.root.attr('style', 'display: inline-block');\n",
  59. "\n",
  60. " $(parent_element).append(this.root);\n",
  61. "\n",
  62. " this._init_header(this);\n",
  63. " this._init_canvas(this);\n",
  64. " this._init_toolbar(this);\n",
  65. "\n",
  66. " var fig = this;\n",
  67. "\n",
  68. " this.waiting = false;\n",
  69. "\n",
  70. " this.ws.onopen = function () {\n",
  71. " fig.send_message(\"supports_binary\", {value: fig.supports_binary});\n",
  72. " fig.send_message(\"send_image_mode\", {});\n",
  73. " if (mpl.ratio != 1) {\n",
  74. " fig.send_message(\"set_dpi_ratio\", {'dpi_ratio': mpl.ratio});\n",
  75. " }\n",
  76. " fig.send_message(\"refresh\", {});\n",
  77. " }\n",
  78. "\n",
  79. " this.imageObj.onload = function() {\n",
  80. " if (fig.image_mode == 'full') {\n",
  81. " // Full images could contain transparency (where diff images\n",
  82. " // almost always do), so we need to clear the canvas so that\n",
  83. " // there is no ghosting.\n",
  84. " fig.context.clearRect(0, 0, fig.canvas.width, fig.canvas.height);\n",
  85. " }\n",
  86. " fig.context.drawImage(fig.imageObj, 0, 0);\n",
  87. " };\n",
  88. "\n",
  89. " this.imageObj.onunload = function() {\n",
  90. " fig.ws.close();\n",
  91. " }\n",
  92. "\n",
  93. " this.ws.onmessage = this._make_on_message_function(this);\n",
  94. "\n",
  95. " this.ondownload = ondownload;\n",
  96. "}\n",
  97. "\n",
  98. "mpl.figure.prototype._init_header = function() {\n",
  99. " var titlebar = $(\n",
  100. " '<div class=\"ui-dialog-titlebar ui-widget-header ui-corner-all ' +\n",
  101. " 'ui-helper-clearfix\"/>');\n",
  102. " var titletext = $(\n",
  103. " '<div class=\"ui-dialog-title\" style=\"width: 100%; ' +\n",
  104. " 'text-align: center; padding: 3px;\"/>');\n",
  105. " titlebar.append(titletext)\n",
  106. " this.root.append(titlebar);\n",
  107. " this.header = titletext[0];\n",
  108. "}\n",
  109. "\n",
  110. "\n",
  111. "\n",
  112. "mpl.figure.prototype._canvas_extra_style = function(canvas_div) {\n",
  113. "\n",
  114. "}\n",
  115. "\n",
  116. "\n",
  117. "mpl.figure.prototype._root_extra_style = function(canvas_div) {\n",
  118. "\n",
  119. "}\n",
  120. "\n",
  121. "mpl.figure.prototype._init_canvas = function() {\n",
  122. " var fig = this;\n",
  123. "\n",
  124. " var canvas_div = $('<div/>');\n",
  125. "\n",
  126. " canvas_div.attr('style', 'position: relative; clear: both; outline: 0');\n",
  127. "\n",
  128. " function canvas_keyboard_event(event) {\n",
  129. " return fig.key_event(event, event['data']);\n",
  130. " }\n",
  131. "\n",
  132. " canvas_div.keydown('key_press', canvas_keyboard_event);\n",
  133. " canvas_div.keyup('key_release', canvas_keyboard_event);\n",
  134. " this.canvas_div = canvas_div\n",
  135. " this._canvas_extra_style(canvas_div)\n",
  136. " this.root.append(canvas_div);\n",
  137. "\n",
  138. " var canvas = $('<canvas/>');\n",
  139. " canvas.addClass('mpl-canvas');\n",
  140. " canvas.attr('style', \"left: 0; top: 0; z-index: 0; outline: 0\")\n",
  141. "\n",
  142. " this.canvas = canvas[0];\n",
  143. " this.context = canvas[0].getContext(\"2d\");\n",
  144. "\n",
  145. " var backingStore = this.context.backingStorePixelRatio ||\n",
  146. "\tthis.context.webkitBackingStorePixelRatio ||\n",
  147. "\tthis.context.mozBackingStorePixelRatio ||\n",
  148. "\tthis.context.msBackingStorePixelRatio ||\n",
  149. "\tthis.context.oBackingStorePixelRatio ||\n",
  150. "\tthis.context.backingStorePixelRatio || 1;\n",
  151. "\n",
  152. " mpl.ratio = (window.devicePixelRatio || 1) / backingStore;\n",
  153. "\n",
  154. " var rubberband = $('<canvas/>');\n",
  155. " rubberband.attr('style', \"position: absolute; left: 0; top: 0; z-index: 1;\")\n",
  156. "\n",
  157. " var pass_mouse_events = true;\n",
  158. "\n",
  159. " canvas_div.resizable({\n",
  160. " start: function(event, ui) {\n",
  161. " pass_mouse_events = false;\n",
  162. " },\n",
  163. " resize: function(event, ui) {\n",
  164. " fig.request_resize(ui.size.width, ui.size.height);\n",
  165. " },\n",
  166. " stop: function(event, ui) {\n",
  167. " pass_mouse_events = true;\n",
  168. " fig.request_resize(ui.size.width, ui.size.height);\n",
  169. " },\n",
  170. " });\n",
  171. "\n",
  172. " function mouse_event_fn(event) {\n",
  173. " if (pass_mouse_events)\n",
  174. " return fig.mouse_event(event, event['data']);\n",
  175. " }\n",
  176. "\n",
  177. " rubberband.mousedown('button_press', mouse_event_fn);\n",
  178. " rubberband.mouseup('button_release', mouse_event_fn);\n",
  179. " // Throttle sequential mouse events to 1 every 20ms.\n",
  180. " rubberband.mousemove('motion_notify', mouse_event_fn);\n",
  181. "\n",
  182. " rubberband.mouseenter('figure_enter', mouse_event_fn);\n",
  183. " rubberband.mouseleave('figure_leave', mouse_event_fn);\n",
  184. "\n",
  185. " canvas_div.on(\"wheel\", function (event) {\n",
  186. " event = event.originalEvent;\n",
  187. " event['data'] = 'scroll'\n",
  188. " if (event.deltaY < 0) {\n",
  189. " event.step = 1;\n",
  190. " } else {\n",
  191. " event.step = -1;\n",
  192. " }\n",
  193. " mouse_event_fn(event);\n",
  194. " });\n",
  195. "\n",
  196. " canvas_div.append(canvas);\n",
  197. " canvas_div.append(rubberband);\n",
  198. "\n",
  199. " this.rubberband = rubberband;\n",
  200. " this.rubberband_canvas = rubberband[0];\n",
  201. " this.rubberband_context = rubberband[0].getContext(\"2d\");\n",
  202. " this.rubberband_context.strokeStyle = \"#000000\";\n",
  203. "\n",
  204. " this._resize_canvas = function(width, height) {\n",
  205. " // Keep the size of the canvas, canvas container, and rubber band\n",
  206. " // canvas in synch.\n",
  207. " canvas_div.css('width', width)\n",
  208. " canvas_div.css('height', height)\n",
  209. "\n",
  210. " canvas.attr('width', width * mpl.ratio);\n",
  211. " canvas.attr('height', height * mpl.ratio);\n",
  212. " canvas.attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');\n",
  213. "\n",
  214. " rubberband.attr('width', width);\n",
  215. " rubberband.attr('height', height);\n",
  216. " }\n",
  217. "\n",
  218. " // Set the figure to an initial 600x600px, this will subsequently be updated\n",
  219. " // upon first draw.\n",
  220. " this._resize_canvas(600, 600);\n",
  221. "\n",
  222. " // Disable right mouse context menu.\n",
  223. " $(this.rubberband_canvas).bind(\"contextmenu\",function(e){\n",
  224. " return false;\n",
  225. " });\n",
  226. "\n",
  227. " function set_focus () {\n",
  228. " canvas.focus();\n",
  229. " canvas_div.focus();\n",
  230. " }\n",
  231. "\n",
  232. " window.setTimeout(set_focus, 100);\n",
  233. "}\n",
  234. "\n",
  235. "mpl.figure.prototype._init_toolbar = function() {\n",
  236. " var fig = this;\n",
  237. "\n",
  238. " var nav_element = $('<div/>')\n",
  239. " nav_element.attr('style', 'width: 100%');\n",
  240. " this.root.append(nav_element);\n",
  241. "\n",
  242. " // Define a callback function for later on.\n",
  243. " function toolbar_event(event) {\n",
  244. " return fig.toolbar_button_onclick(event['data']);\n",
  245. " }\n",
  246. " function toolbar_mouse_event(event) {\n",
  247. " return fig.toolbar_button_onmouseover(event['data']);\n",
  248. " }\n",
  249. "\n",
  250. " for(var toolbar_ind in mpl.toolbar_items) {\n",
  251. " var name = mpl.toolbar_items[toolbar_ind][0];\n",
  252. " var tooltip = mpl.toolbar_items[toolbar_ind][1];\n",
  253. " var image = mpl.toolbar_items[toolbar_ind][2];\n",
  254. " var method_name = mpl.toolbar_items[toolbar_ind][3];\n",
  255. "\n",
  256. " if (!name) {\n",
  257. " // put a spacer in here.\n",
  258. " continue;\n",
  259. " }\n",
  260. " var button = $('<button/>');\n",
  261. " button.addClass('ui-button ui-widget ui-state-default ui-corner-all ' +\n",
  262. " 'ui-button-icon-only');\n",
  263. " button.attr('role', 'button');\n",
  264. " button.attr('aria-disabled', 'false');\n",
  265. " button.click(method_name, toolbar_event);\n",
  266. " button.mouseover(tooltip, toolbar_mouse_event);\n",
  267. "\n",
  268. " var icon_img = $('<span/>');\n",
  269. " icon_img.addClass('ui-button-icon-primary ui-icon');\n",
  270. " icon_img.addClass(image);\n",
  271. " icon_img.addClass('ui-corner-all');\n",
  272. "\n",
  273. " var tooltip_span = $('<span/>');\n",
  274. " tooltip_span.addClass('ui-button-text');\n",
  275. " tooltip_span.html(tooltip);\n",
  276. "\n",
  277. " button.append(icon_img);\n",
  278. " button.append(tooltip_span);\n",
  279. "\n",
  280. " nav_element.append(button);\n",
  281. " }\n",
  282. "\n",
  283. " var fmt_picker_span = $('<span/>');\n",
  284. "\n",
  285. " var fmt_picker = $('<select/>');\n",
  286. " fmt_picker.addClass('mpl-toolbar-option ui-widget ui-widget-content');\n",
  287. " fmt_picker_span.append(fmt_picker);\n",
  288. " nav_element.append(fmt_picker_span);\n",
  289. " this.format_dropdown = fmt_picker[0];\n",
  290. "\n",
  291. " for (var ind in mpl.extensions) {\n",
  292. " var fmt = mpl.extensions[ind];\n",
  293. " var option = $(\n",
  294. " '<option/>', {selected: fmt === mpl.default_extension}).html(fmt);\n",
  295. " fmt_picker.append(option)\n",
  296. " }\n",
  297. "\n",
  298. " // Add hover states to the ui-buttons\n",
  299. " $( \".ui-button\" ).hover(\n",
  300. " function() { $(this).addClass(\"ui-state-hover\");},\n",
  301. " function() { $(this).removeClass(\"ui-state-hover\");}\n",
  302. " );\n",
  303. "\n",
  304. " var status_bar = $('<span class=\"mpl-message\"/>');\n",
  305. " nav_element.append(status_bar);\n",
  306. " this.message = status_bar[0];\n",
  307. "}\n",
  308. "\n",
  309. "mpl.figure.prototype.request_resize = function(x_pixels, y_pixels) {\n",
  310. " // Request matplotlib to resize the figure. Matplotlib will then trigger a resize in the client,\n",
  311. " // which will in turn request a refresh of the image.\n",
  312. " this.send_message('resize', {'width': x_pixels, 'height': y_pixels});\n",
  313. "}\n",
  314. "\n",
  315. "mpl.figure.prototype.send_message = function(type, properties) {\n",
  316. " properties['type'] = type;\n",
  317. " properties['figure_id'] = this.id;\n",
  318. " this.ws.send(JSON.stringify(properties));\n",
  319. "}\n",
  320. "\n",
  321. "mpl.figure.prototype.send_draw_message = function() {\n",
  322. " if (!this.waiting) {\n",
  323. " this.waiting = true;\n",
  324. " this.ws.send(JSON.stringify({type: \"draw\", figure_id: this.id}));\n",
  325. " }\n",
  326. "}\n",
  327. "\n",
  328. "\n",
  329. "mpl.figure.prototype.handle_save = function(fig, msg) {\n",
  330. " var format_dropdown = fig.format_dropdown;\n",
  331. " var format = format_dropdown.options[format_dropdown.selectedIndex].value;\n",
  332. " fig.ondownload(fig, format);\n",
  333. "}\n",
  334. "\n",
  335. "\n",
  336. "mpl.figure.prototype.handle_resize = function(fig, msg) {\n",
  337. " var size = msg['size'];\n",
  338. " if (size[0] != fig.canvas.width || size[1] != fig.canvas.height) {\n",
  339. " fig._resize_canvas(size[0], size[1]);\n",
  340. " fig.send_message(\"refresh\", {});\n",
  341. " };\n",
  342. "}\n",
  343. "\n",
  344. "mpl.figure.prototype.handle_rubberband = function(fig, msg) {\n",
  345. " var x0 = msg['x0'] / mpl.ratio;\n",
  346. " var y0 = (fig.canvas.height - msg['y0']) / mpl.ratio;\n",
  347. " var x1 = msg['x1'] / mpl.ratio;\n",
  348. " var y1 = (fig.canvas.height - msg['y1']) / mpl.ratio;\n",
  349. " x0 = Math.floor(x0) + 0.5;\n",
  350. " y0 = Math.floor(y0) + 0.5;\n",
  351. " x1 = Math.floor(x1) + 0.5;\n",
  352. " y1 = Math.floor(y1) + 0.5;\n",
  353. " var min_x = Math.min(x0, x1);\n",
  354. " var min_y = Math.min(y0, y1);\n",
  355. " var width = Math.abs(x1 - x0);\n",
  356. " var height = Math.abs(y1 - y0);\n",
  357. "\n",
  358. " fig.rubberband_context.clearRect(\n",
  359. " 0, 0, fig.canvas.width, fig.canvas.height);\n",
  360. "\n",
  361. " fig.rubberband_context.strokeRect(min_x, min_y, width, height);\n",
  362. "}\n",
  363. "\n",
  364. "mpl.figure.prototype.handle_figure_label = function(fig, msg) {\n",
  365. " // Updates the figure title.\n",
  366. " fig.header.textContent = msg['label'];\n",
  367. "}\n",
  368. "\n",
  369. "mpl.figure.prototype.handle_cursor = function(fig, msg) {\n",
  370. " var cursor = msg['cursor'];\n",
  371. " switch(cursor)\n",
  372. " {\n",
  373. " case 0:\n",
  374. " cursor = 'pointer';\n",
  375. " break;\n",
  376. " case 1:\n",
  377. " cursor = 'default';\n",
  378. " break;\n",
  379. " case 2:\n",
  380. " cursor = 'crosshair';\n",
  381. " break;\n",
  382. " case 3:\n",
  383. " cursor = 'move';\n",
  384. " break;\n",
  385. " }\n",
  386. " fig.rubberband_canvas.style.cursor = cursor;\n",
  387. "}\n",
  388. "\n",
  389. "mpl.figure.prototype.handle_message = function(fig, msg) {\n",
  390. " fig.message.textContent = msg['message'];\n",
  391. "}\n",
  392. "\n",
  393. "mpl.figure.prototype.handle_draw = function(fig, msg) {\n",
  394. " // Request the server to send over a new figure.\n",
  395. " fig.send_draw_message();\n",
  396. "}\n",
  397. "\n",
  398. "mpl.figure.prototype.handle_image_mode = function(fig, msg) {\n",
  399. " fig.image_mode = msg['mode'];\n",
  400. "}\n",
  401. "\n",
  402. "mpl.figure.prototype.updated_canvas_event = function() {\n",
  403. " // Called whenever the canvas gets updated.\n",
  404. " this.send_message(\"ack\", {});\n",
  405. "}\n",
  406. "\n",
  407. "// A function to construct a web socket function for onmessage handling.\n",
  408. "// Called in the figure constructor.\n",
  409. "mpl.figure.prototype._make_on_message_function = function(fig) {\n",
  410. " return function socket_on_message(evt) {\n",
  411. " if (evt.data instanceof Blob) {\n",
  412. " /* FIXME: We get \"Resource interpreted as Image but\n",
  413. " * transferred with MIME type text/plain:\" errors on\n",
  414. " * Chrome. But how to set the MIME type? It doesn't seem\n",
  415. " * to be part of the websocket stream */\n",
  416. " evt.data.type = \"image/png\";\n",
  417. "\n",
  418. " /* Free the memory for the previous frames */\n",
  419. " if (fig.imageObj.src) {\n",
  420. " (window.URL || window.webkitURL).revokeObjectURL(\n",
  421. " fig.imageObj.src);\n",
  422. " }\n",
  423. "\n",
  424. " fig.imageObj.src = (window.URL || window.webkitURL).createObjectURL(\n",
  425. " evt.data);\n",
  426. " fig.updated_canvas_event();\n",
  427. " fig.waiting = false;\n",
  428. " return;\n",
  429. " }\n",
  430. " else if (typeof evt.data === 'string' && evt.data.slice(0, 21) == \"data:image/png;base64\") {\n",
  431. " fig.imageObj.src = evt.data;\n",
  432. " fig.updated_canvas_event();\n",
  433. " fig.waiting = false;\n",
  434. " return;\n",
  435. " }\n",
  436. "\n",
  437. " var msg = JSON.parse(evt.data);\n",
  438. " var msg_type = msg['type'];\n",
  439. "\n",
  440. " // Call the \"handle_{type}\" callback, which takes\n",
  441. " // the figure and JSON message as its only arguments.\n",
  442. " try {\n",
  443. " var callback = fig[\"handle_\" + msg_type];\n",
  444. " } catch (e) {\n",
  445. " console.log(\"No handler for the '\" + msg_type + \"' message type: \", msg);\n",
  446. " return;\n",
  447. " }\n",
  448. "\n",
  449. " if (callback) {\n",
  450. " try {\n",
  451. " // console.log(\"Handling '\" + msg_type + \"' message: \", msg);\n",
  452. " callback(fig, msg);\n",
  453. " } catch (e) {\n",
  454. " console.log(\"Exception inside the 'handler_\" + msg_type + \"' callback:\", e, e.stack, msg);\n",
  455. " }\n",
  456. " }\n",
  457. " };\n",
  458. "}\n",
  459. "\n",
  460. "// from http://stackoverflow.com/questions/1114465/getting-mouse-location-in-canvas\n",
  461. "mpl.findpos = function(e) {\n",
  462. " //this section is from http://www.quirksmode.org/js/events_properties.html\n",
  463. " var targ;\n",
  464. " if (!e)\n",
  465. " e = window.event;\n",
  466. " if (e.target)\n",
  467. " targ = e.target;\n",
  468. " else if (e.srcElement)\n",
  469. " targ = e.srcElement;\n",
  470. " if (targ.nodeType == 3) // defeat Safari bug\n",
  471. " targ = targ.parentNode;\n",
  472. "\n",
  473. " // jQuery normalizes the pageX and pageY\n",
  474. " // pageX,Y are the mouse positions relative to the document\n",
  475. " // offset() returns the position of the element relative to the document\n",
  476. " var x = e.pageX - $(targ).offset().left;\n",
  477. " var y = e.pageY - $(targ).offset().top;\n",
  478. "\n",
  479. " return {\"x\": x, \"y\": y};\n",
  480. "};\n",
  481. "\n",
  482. "/*\n",
  483. " * return a copy of an object with only non-object keys\n",
  484. " * we need this to avoid circular references\n",
  485. " * http://stackoverflow.com/a/24161582/3208463\n",
  486. " */\n",
  487. "function simpleKeys (original) {\n",
  488. " return Object.keys(original).reduce(function (obj, key) {\n",
  489. " if (typeof original[key] !== 'object')\n",
  490. " obj[key] = original[key]\n",
  491. " return obj;\n",
  492. " }, {});\n",
  493. "}\n",
  494. "\n",
  495. "mpl.figure.prototype.mouse_event = function(event, name) {\n",
  496. " var canvas_pos = mpl.findpos(event)\n",
  497. "\n",
  498. " if (name === 'button_press')\n",
  499. " {\n",
  500. " this.canvas.focus();\n",
  501. " this.canvas_div.focus();\n",
  502. " }\n",
  503. "\n",
  504. " var x = canvas_pos.x * mpl.ratio;\n",
  505. " var y = canvas_pos.y * mpl.ratio;\n",
  506. "\n",
  507. " this.send_message(name, {x: x, y: y, button: event.button,\n",
  508. " step: event.step,\n",
  509. " guiEvent: simpleKeys(event)});\n",
  510. "\n",
  511. " /* This prevents the web browser from automatically changing to\n",
  512. " * the text insertion cursor when the button is pressed. We want\n",
  513. " * to control all of the cursor setting manually through the\n",
  514. " * 'cursor' event from matplotlib */\n",
  515. " event.preventDefault();\n",
  516. " return false;\n",
  517. "}\n",
  518. "\n",
  519. "mpl.figure.prototype._key_event_extra = function(event, name) {\n",
  520. " // Handle any extra behaviour associated with a key event\n",
  521. "}\n",
  522. "\n",
  523. "mpl.figure.prototype.key_event = function(event, name) {\n",
  524. "\n",
  525. " // Prevent repeat events\n",
  526. " if (name == 'key_press')\n",
  527. " {\n",
  528. " if (event.which === this._key)\n",
  529. " return;\n",
  530. " else\n",
  531. " this._key = event.which;\n",
  532. " }\n",
  533. " if (name == 'key_release')\n",
  534. " this._key = null;\n",
  535. "\n",
  536. " var value = '';\n",
  537. " if (event.ctrlKey && event.which != 17)\n",
  538. " value += \"ctrl+\";\n",
  539. " if (event.altKey && event.which != 18)\n",
  540. " value += \"alt+\";\n",
  541. " if (event.shiftKey && event.which != 16)\n",
  542. " value += \"shift+\";\n",
  543. "\n",
  544. " value += 'k';\n",
  545. " value += event.which.toString();\n",
  546. "\n",
  547. " this._key_event_extra(event, name);\n",
  548. "\n",
  549. " this.send_message(name, {key: value,\n",
  550. " guiEvent: simpleKeys(event)});\n",
  551. " return false;\n",
  552. "}\n",
  553. "\n",
  554. "mpl.figure.prototype.toolbar_button_onclick = function(name) {\n",
  555. " if (name == 'download') {\n",
  556. " this.handle_save(this, null);\n",
  557. " } else {\n",
  558. " this.send_message(\"toolbar_button\", {name: name});\n",
  559. " }\n",
  560. "};\n",
  561. "\n",
  562. "mpl.figure.prototype.toolbar_button_onmouseover = function(tooltip) {\n",
  563. " this.message.textContent = tooltip;\n",
  564. "};\n",
  565. "mpl.toolbar_items = [[\"Home\", \"Reset original view\", \"fa fa-home icon-home\", \"home\"], [\"Back\", \"Back to previous view\", \"fa fa-arrow-left icon-arrow-left\", \"back\"], [\"Forward\", \"Forward to next view\", \"fa fa-arrow-right icon-arrow-right\", \"forward\"], [\"\", \"\", \"\", \"\"], [\"Pan\", \"Pan axes with left mouse, zoom with right\", \"fa fa-arrows icon-move\", \"pan\"], [\"Zoom\", \"Zoom to rectangle\", \"fa fa-square-o icon-check-empty\", \"zoom\"], [\"\", \"\", \"\", \"\"], [\"Download\", \"Download plot\", \"fa fa-floppy-o icon-save\", \"download\"]];\n",
  566. "\n",
  567. "mpl.extensions = [\"eps\", \"jpeg\", \"pdf\", \"png\", \"ps\", \"raw\", \"svg\", \"tif\"];\n",
  568. "\n",
  569. "mpl.default_extension = \"png\";var comm_websocket_adapter = function(comm) {\n",
  570. " // Create a \"websocket\"-like object which calls the given IPython comm\n",
  571. " // object with the appropriate methods. Currently this is a non binary\n",
  572. " // socket, so there is still some room for performance tuning.\n",
  573. " var ws = {};\n",
  574. "\n",
  575. " ws.close = function() {\n",
  576. " comm.close()\n",
  577. " };\n",
  578. " ws.send = function(m) {\n",
  579. " //console.log('sending', m);\n",
  580. " comm.send(m);\n",
  581. " };\n",
  582. " // Register the callback with on_msg.\n",
  583. " comm.on_msg(function(msg) {\n",
  584. " //console.log('receiving', msg['content']['data'], msg);\n",
  585. " // Pass the mpl event to the overridden (by mpl) onmessage function.\n",
  586. " ws.onmessage(msg['content']['data'])\n",
  587. " });\n",
  588. " return ws;\n",
  589. "}\n",
  590. "\n",
  591. "mpl.mpl_figure_comm = function(comm, msg) {\n",
  592. " // This is the function which gets called when the mpl process\n",
  593. " // starts-up an IPython Comm through the \"matplotlib\" channel.\n",
  594. "\n",
  595. " var id = msg.content.data.id;\n",
  596. " // Get hold of the div created by the display call when the Comm\n",
  597. " // socket was opened in Python.\n",
  598. " var element = $(\"#\" + id);\n",
  599. " var ws_proxy = comm_websocket_adapter(comm)\n",
  600. "\n",
  601. " function ondownload(figure, format) {\n",
  602. " window.open(figure.imageObj.src);\n",
  603. " }\n",
  604. "\n",
  605. " var fig = new mpl.figure(id, ws_proxy,\n",
  606. " ondownload,\n",
  607. " element.get(0));\n",
  608. "\n",
  609. " // Call onopen now - mpl needs it, as it is assuming we've passed it a real\n",
  610. " // web socket which is closed, not our websocket->open comm proxy.\n",
  611. " ws_proxy.onopen();\n",
  612. "\n",
  613. " fig.parent_element = element.get(0);\n",
  614. " fig.cell_info = mpl.find_output_cell(\"<div id='\" + id + \"'></div>\");\n",
  615. " if (!fig.cell_info) {\n",
  616. " console.error(\"Failed to find cell for figure\", id, fig);\n",
  617. " return;\n",
  618. " }\n",
  619. "\n",
  620. " var output_index = fig.cell_info[2]\n",
  621. " var cell = fig.cell_info[0];\n",
  622. "\n",
  623. "};\n",
  624. "\n",
  625. "mpl.figure.prototype.handle_close = function(fig, msg) {\n",
  626. " var width = fig.canvas.width/mpl.ratio\n",
  627. " fig.root.unbind('remove')\n",
  628. "\n",
  629. " // Update the output cell to use the data from the current canvas.\n",
  630. " fig.push_to_output();\n",
  631. " var dataURL = fig.canvas.toDataURL();\n",
  632. " // Re-enable the keyboard manager in IPython - without this line, in FF,\n",
  633. " // the notebook keyboard shortcuts fail.\n",
  634. " IPython.keyboard_manager.enable()\n",
  635. " $(fig.parent_element).html('<img src=\"' + dataURL + '\" width=\"' + width + '\">');\n",
  636. " fig.close_ws(fig, msg);\n",
  637. "}\n",
  638. "\n",
  639. "mpl.figure.prototype.close_ws = function(fig, msg){\n",
  640. " fig.send_message('closing', msg);\n",
  641. " // fig.ws.close()\n",
  642. "}\n",
  643. "\n",
  644. "mpl.figure.prototype.push_to_output = function(remove_interactive) {\n",
  645. " // Turn the data on the canvas into data in the output cell.\n",
  646. " var width = this.canvas.width/mpl.ratio\n",
  647. " var dataURL = this.canvas.toDataURL();\n",
  648. " this.cell_info[1]['text/html'] = '<img src=\"' + dataURL + '\" width=\"' + width + '\">';\n",
  649. "}\n",
  650. "\n",
  651. "mpl.figure.prototype.updated_canvas_event = function() {\n",
  652. " // Tell IPython that the notebook contents must change.\n",
  653. " IPython.notebook.set_dirty(true);\n",
  654. " this.send_message(\"ack\", {});\n",
  655. " var fig = this;\n",
  656. " // Wait a second, then push the new image to the DOM so\n",
  657. " // that it is saved nicely (might be nice to debounce this).\n",
  658. " setTimeout(function () { fig.push_to_output() }, 1000);\n",
  659. "}\n",
  660. "\n",
  661. "mpl.figure.prototype._init_toolbar = function() {\n",
  662. " var fig = this;\n",
  663. "\n",
  664. " var nav_element = $('<div/>')\n",
  665. " nav_element.attr('style', 'width: 100%');\n",
  666. " this.root.append(nav_element);\n",
  667. "\n",
  668. " // Define a callback function for later on.\n",
  669. " function toolbar_event(event) {\n",
  670. " return fig.toolbar_button_onclick(event['data']);\n",
  671. " }\n",
  672. " function toolbar_mouse_event(event) {\n",
  673. " return fig.toolbar_button_onmouseover(event['data']);\n",
  674. " }\n",
  675. "\n",
  676. " for(var toolbar_ind in mpl.toolbar_items){\n",
  677. " var name = mpl.toolbar_items[toolbar_ind][0];\n",
  678. " var tooltip = mpl.toolbar_items[toolbar_ind][1];\n",
  679. " var image = mpl.toolbar_items[toolbar_ind][2];\n",
  680. " var method_name = mpl.toolbar_items[toolbar_ind][3];\n",
  681. "\n",
  682. " if (!name) { continue; };\n",
  683. "\n",
  684. " var button = $('<button class=\"btn btn-default\" href=\"#\" title=\"' + name + '\"><i class=\"fa ' + image + ' fa-lg\"></i></button>');\n",
  685. " button.click(method_name, toolbar_event);\n",
  686. " button.mouseover(tooltip, toolbar_mouse_event);\n",
  687. " nav_element.append(button);\n",
  688. " }\n",
  689. "\n",
  690. " // Add the status bar.\n",
  691. " var status_bar = $('<span class=\"mpl-message\" style=\"text-align:right; float: right;\"/>');\n",
  692. " nav_element.append(status_bar);\n",
  693. " this.message = status_bar[0];\n",
  694. "\n",
  695. " // Add the close button to the window.\n",
  696. " var buttongrp = $('<div class=\"btn-group inline pull-right\"></div>');\n",
  697. " var button = $('<button class=\"btn btn-mini btn-primary\" href=\"#\" title=\"Stop Interaction\"><i class=\"fa fa-power-off icon-remove icon-large\"></i></button>');\n",
  698. " button.click(function (evt) { fig.handle_close(fig, {}); } );\n",
  699. " button.mouseover('Stop Interaction', toolbar_mouse_event);\n",
  700. " buttongrp.append(button);\n",
  701. " var titlebar = this.root.find($('.ui-dialog-titlebar'));\n",
  702. " titlebar.prepend(buttongrp);\n",
  703. "}\n",
  704. "\n",
  705. "mpl.figure.prototype._root_extra_style = function(el){\n",
  706. " var fig = this\n",
  707. " el.on(\"remove\", function(){\n",
  708. "\tfig.close_ws(fig, {});\n",
  709. " });\n",
  710. "}\n",
  711. "\n",
  712. "mpl.figure.prototype._canvas_extra_style = function(el){\n",
  713. " // this is important to make the div 'focusable\n",
  714. " el.attr('tabindex', 0)\n",
  715. " // reach out to IPython and tell the keyboard manager to turn it's self\n",
  716. " // off when our div gets focus\n",
  717. "\n",
  718. " // location in version 3\n",
  719. " if (IPython.notebook.keyboard_manager) {\n",
  720. " IPython.notebook.keyboard_manager.register_events(el);\n",
  721. " }\n",
  722. " else {\n",
  723. " // location in version 2\n",
  724. " IPython.keyboard_manager.register_events(el);\n",
  725. " }\n",
  726. "\n",
  727. "}\n",
  728. "\n",
  729. "mpl.figure.prototype._key_event_extra = function(event, name) {\n",
  730. " var manager = IPython.notebook.keyboard_manager;\n",
  731. " if (!manager)\n",
  732. " manager = IPython.keyboard_manager;\n",
  733. "\n",
  734. " // Check for shift+enter\n",
  735. " if (event.shiftKey && event.which == 13) {\n",
  736. " this.canvas_div.blur();\n",
  737. " event.shiftKey = false;\n",
  738. " // Send a \"J\" for go to next cell\n",
  739. " event.which = 74;\n",
  740. " event.keyCode = 74;\n",
  741. " manager.command_mode();\n",
  742. " manager.handle_keydown(event);\n",
  743. " }\n",
  744. "}\n",
  745. "\n",
  746. "mpl.figure.prototype.handle_save = function(fig, msg) {\n",
  747. " fig.ondownload(fig, null);\n",
  748. "}\n",
  749. "\n",
  750. "\n",
  751. "mpl.find_output_cell = function(html_output) {\n",
  752. " // Return the cell and output element which can be found *uniquely* in the notebook.\n",
  753. " // Note - this is a bit hacky, but it is done because the \"notebook_saving.Notebook\"\n",
  754. " // IPython event is triggered only after the cells have been serialised, which for\n",
  755. " // our purposes (turning an active figure into a static one), is too late.\n",
  756. " var cells = IPython.notebook.get_cells();\n",
  757. " var ncells = cells.length;\n",
  758. " for (var i=0; i<ncells; i++) {\n",
  759. " var cell = cells[i];\n",
  760. " if (cell.cell_type === 'code'){\n",
  761. " for (var j=0; j<cell.output_area.outputs.length; j++) {\n",
  762. " var data = cell.output_area.outputs[j];\n",
  763. " if (data.data) {\n",
  764. " // IPython >= 3 moved mimebundle to data attribute of output\n",
  765. " data = data.data;\n",
  766. " }\n",
  767. " if (data['text/html'] == html_output) {\n",
  768. " return [cell, data, j];\n",
  769. " }\n",
  770. " }\n",
  771. " }\n",
  772. " }\n",
  773. "}\n",
  774. "\n",
  775. "// Register the function which deals with the matplotlib target/channel.\n",
  776. "// The kernel may be null if the page has been refreshed.\n",
  777. "if (IPython.notebook.kernel != null) {\n",
  778. " IPython.notebook.kernel.comm_manager.register_target('matplotlib', mpl.mpl_figure_comm);\n",
  779. "}\n"
  780. ],
  781. "text/plain": [
  782. "<IPython.core.display.Javascript object>"
  783. ]
  784. },
  785. "metadata": {},
  786. "output_type": "display_data"
  787. },
  788. {
  789. "data": {
  790. "text/html": [

机器学习越来越多应用到飞行器、机器人等领域,其目的是利用计算机实现类似人类的智能,从而实现装备的智能化与无人化。本课程旨在引导学生掌握机器学习的基本知识、典型方法与技术,通过具体的应用案例激发学生对该学科的兴趣,鼓励学生能够从人工智能的角度来分析、解决飞行器、机器人所面临的问题和挑战。本课程主要内容包括Python编程基础,机器学习模型,无监督学习、监督学习、深度学习基础知识与实现,并学习如何利用机器学习解决实际问题,从而全面提升自我的《综合能力》。

Contributors (1)