##// END OF EJS Templates
Fixed some more example files (see list below)......
Jonathan Frederic -
Show More
@@ -11,8 +11,12
11 11 "cell_type": "code",
12 12 "collapsed": false,
13 13 "input": [
14 "# Widget related imports\n",
14 15 "from IPython.html import widgets\n",
15 "from IPython.display import display, Javascript, clear_output\n",
16 "from IPython.display import display, clear_output, Javascript\n",
17 "from IPython.utils.traitlets import Unicode\n",
18 "\n",
19 "# nbconvert related imports\n",
16 20 "from IPython.nbconvert import get_export_names, export_by_name\n",
17 21 "from IPython.nbconvert.writers import FilesWriter\n",
18 22 "from IPython.nbformat import current"
@@ -26,15 +30,14
26 30 "cell_type": "markdown",
27 31 "metadata": {},
28 32 "source": [
29 "Create and *display* a StringWidget without a view. The StringWidget will be used to store the notebook name which is otherwise only available in the front-end."
33 "Create a textbox Widget without displaying it. The widget will be used to store the notebook's name which is otherwise only available in the front-end."
30 34 ]
31 35 },
32 36 {
33 37 "cell_type": "code",
34 38 "collapsed": false,
35 39 "input": [
36 "notebook_name = widgets.StringWidget(default_view_name='')\n",
37 "display(notebook_name)"
40 "notebook_name = widgets.TextBoxWidget()"
38 41 ],
39 42 "language": "python",
40 43 "metadata": {},
@@ -52,9 +55,9
52 55 "cell_type": "code",
53 56 "collapsed": false,
54 57 "input": [
55 "js = \"\"\"var model = IPython.notebook.kernel.comm_manager.comms['{comm_id}'].model;\n",
58 "js = \"\"\"var model = IPython.notebook.kernel.widget_manager.get_model('{model_id}');\n",
56 59 "model.set('value', IPython.notebook.notebook_name);\n",
57 "model.save();\"\"\".format(comm_id=notebook_name._comm.comm_id)\n",
60 "model.save();\"\"\".format(model_id=notebook_name.model_id)\n",
58 61 "display(Javascript(data=js))"
59 62 ],
60 63 "language": "python",
@@ -62,14 +65,14
62 65 "outputs": [
63 66 {
64 67 "javascript": [
65 "var model = IPython.notebook.kernel.comm_manager.comms['af0fadc224134034af6141995abf625a'].model;\n",
68 "var model = IPython.notebook.kernel.widget_manager.get_model('8c6583524eb3422c99491730a3e1ce6c');\n",
66 69 "model.set('value', IPython.notebook.notebook_name);\n",
67 70 "model.save();"
68 71 ],
69 72 "metadata": {},
70 73 "output_type": "display_data",
71 74 "text": [
72 "<IPython.core.display.Javascript at 0x3756790>"
75 "<IPython.core.display.Javascript at 0x164ea50>"
73 76 ]
74 77 }
75 78 ],
@@ -107,17 +110,9
107 110 "cell_type": "code",
108 111 "collapsed": false,
109 112 "input": [
110 "container = widgets.ContainerWidget()\n",
111 "container.vbox()\n",
112 "container.align_center()\n",
113 "\n",
114 "options = widgets.ContainerWidget(parent=container)\n",
115 "options.hbox()\n",
116 "options.align_center()\n",
117 "exporter_names = widgets.SelectionWidget(parent=options, values=get_export_names(), value='html')\n",
118 "export_button = widgets.ButtonWidget(parent=options, description=\"Export\")\n",
119 "\n",
120 "download_link = widgets.StringWidget(parent=container, default_view_name=\"HTMLView\", visible=False)"
113 "exporter_names = widgets.DropdownWidget(values=get_export_names(), value='html')\n",
114 "export_button = widgets.ButtonWidget(description=\"Export\")\n",
115 "download_link = widgets.HTMLWidget(visible=False)"
121 116 ],
122 117 "language": "python",
123 118 "metadata": {},
@@ -154,17 +149,8
154 149 " write_results = file_writer.write(output, resources, notebook_name=notebook_name)\n",
155 150 " \n",
156 151 " download_link.value = \"<br>Results: <a href='files/{filename}'><i>\\\"{filename}\\\"</i></a>\".format(filename=write_results)\n",
157 " download_link.visible = True"
158 ],
159 "language": "python",
160 "metadata": {},
161 "outputs": [],
162 "prompt_number": 6
163 },
164 {
165 "cell_type": "code",
166 "collapsed": false,
167 "input": [
152 " download_link.visible = True\n",
153 " \n",
168 154 "def handle_export():\n",
169 155 " with open(filename, 'r') as f:\n",
170 156 " export(filename, current.read(f, 'json'))\n",
@@ -173,19 +159,25
173 159 "language": "python",
174 160 "metadata": {},
175 161 "outputs": [],
176 "prompt_number": 7
162 "prompt_number": 6
163 },
164 {
165 "cell_type": "markdown",
166 "metadata": {},
167 "source": [
168 "Display the controls."
169 ]
177 170 },
178 171 {
179 172 "cell_type": "code",
180 173 "collapsed": false,
181 174 "input": [
182 "download_link.visible = False\n",
183 "display(container)"
175 "display(exporter_names, export_button, download_link)"
184 176 ],
185 177 "language": "python",
186 178 "metadata": {},
187 179 "outputs": [],
188 "prompt_number": 8
180 "prompt_number": 7
189 181 }
190 182 ],
191 183 "metadata": {}
@@ -17,11 +17,10
17 17 "cell_type": "code",
18 18 "collapsed": false,
19 19 "input": [
20 "from __future__ import print_function # py 2.7 compat\n",
21 "\n",
22 20 "import base64\n",
23 "from IPython.html import widgets # Widget definitions\n",
24 "from IPython.display import display # Used to display widgets in the notebook"
21 "from __future__ import print_function # py 2.7 compat.\n",
22 "from IPython.html import widgets # Widget definitions.\n",
23 "from IPython.utils.traitlets import Unicode # Traitlet needed to add synced attributes to the widget."
25 24 ],
26 25 "language": "python",
27 26 "metadata": {},
@@ -29,31 +28,44
29 28 "prompt_number": 1
30 29 },
31 30 {
32 "cell_type": "heading",
33 "level": 1,
31 "cell_type": "markdown",
34 32 "metadata": {},
35 33 "source": [
36 "Custom Widget"
34 "This is a custom widget that allows the user to upload file data to the notebook server. The file data is sent via a statefull `value` attribute of the widget. The widget has an upload failed event that fires in the front-end and is echoed to the back-end using a custom msg."
37 35 ]
38 36 },
39 37 {
40 38 "cell_type": "code",
41 39 "collapsed": false,
42 40 "input": [
43 "# Import the base Widget class and the traitlets Unicode class.\n",
44 "from IPython.html.widgets import Widget\n",
45 "from IPython.utils.traitlets import Unicode, Int\n",
46 "\n",
47 "# Define our FileWidget and its target model and default view.\n",
48 "class FileWidget(Widget):\n",
49 " target_name = Unicode('FileWidgetModel')\n",
50 " default_view_name = Unicode('FilePickerView')\n",
51 " \n",
52 " # Define the custom state properties to sync with the front-end\n",
53 " _keys = ['value', 'filename']\n",
54 " value = Unicode('')\n",
55 " filename = Unicode('')\n",
56 " on_failed = Int(0)"
41 "class FileWidget(widgets.DOMWidget):\n",
42 " _view_name = Unicode('FilePickerView', sync=True)\n",
43 " value = Unicode(sync=True)\n",
44 " filename = Unicode(sync=True)\n",
45 " \n",
46 " def __init__(self, **kwargs):\n",
47 " \"\"\"Constructor\"\"\"\n",
48 " widgets.DOMWidget.__init__(self, **kwargs) # Call the base.\n",
49 " \n",
50 " # Allow the user to register error callbacks with the following signatures:\n",
51 " # callback()\n",
52 " # callback(sender)\n",
53 " self.errors = widgets.CallbackDispatcher(accepted_nargs=[0, 1])\n",
54 " \n",
55 " # Listen for custom msgs\n",
56 " self.on_msg(self._handle_custom_msg)\n",
57 "\n",
58 " def _handle_custom_msg(self, content):\n",
59 " \"\"\"Handle a msg from the front-end.\n",
60 "\n",
61 " Parameters\n",
62 " ----------\n",
63 " content: dict\n",
64 " Content of the msg.\"\"\"\n",
65 " if 'event' in content and content['event'] == 'error':\n",
66 " self.errors()\n",
67 " self.errors(self)\n",
68 " "
57 69 ],
58 70 "language": "python",
59 71 "metadata": {},
@@ -66,46 +78,50
66 78 "input": [
67 79 "%%javascript\n",
68 80 "\n",
69 "require([\"notebook/js/widget\"], function(){\n",
70 " \n",
71 " // Define the FileModel and register it with the widget manager.\n",
72 " var FileModel = IPython.WidgetModel.extend({});\n",
73 " IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
81 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
74 82 " \n",
75 " // Define the FilePickerView\n",
76 83 " var FilePickerView = IPython.WidgetView.extend({\n",
77 " \n",
78 84 " render: function(){\n",
79 " var that = this;\n",
80 " this.$el = $('<input />')\n",
81 " .attr('type', 'file')\n",
82 " .change(function(evt){ that.handleFileChange(evt) });\n",
85 " // Render the view.\n",
86 " this.setElement($('<input />')\n",
87 " .attr('type', 'file'));\n",
88 " },\n",
89 " \n",
90 " events: {\n",
91 " // List of events and their handlers.\n",
92 " 'change': 'handle_file_change',\n",
83 93 " },\n",
84 94 " \n",
85 " // Handles: User input\n",
86 " handleFileChange: function(evt) { \n",
95 " handle_file_change: function(evt) { \n",
96 " // Handle when the user has changed the file.\n",
87 97 " \n",
88 98 " //Retrieve the first (and only!) File from the FileList object\n",
99 " var file = evt.target.files[0];\n",
100 " if (file) {\n",
101 "\n",
102 " // Read the file's textual content and set value to those contents.\n",
89 103 " var that = this;\n",
90 " var f = evt.target.files[0];\n",
91 " if (f) {\n",
92 " var r = new FileReader();\n",
93 " r.onload = function(e) {\n",
104 " var file_reader = new FileReader();\n",
105 " file_reader.onload = function(e) {\n",
94 106 " that.model.set('value', e.target.result);\n",
95 " that.model.update_other_views(that);\n",
107 " that.touch();\n",
96 108 " }\n",
97 " r.readAsText(f);\n",
109 " file_reader.readAsText(file);\n",
98 110 " } else {\n",
99 " this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
100 " this.model.update_other_views(this);\n",
111 "\n",
112 " // The file couldn't be opened. Send an error msg to the\n",
113 " // back-end.\n",
114 " this.send({ 'event': 'error' });\n",
101 115 " }\n",
102 " this.model.set('filename', f.name);\n",
103 " this.model.update_other_views(this);\n",
116 "\n",
117 " // Set the filename of the file.\n",
118 " this.model.set('filename', file.name);\n",
119 " this.touch();\n",
104 120 " },\n",
105 121 " });\n",
106 122 " \n",
107 123 " // Register the DatePickerView with the widget manager.\n",
108 " IPython.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
124 " WidgetManager.register_widget_view('FilePickerView', FilePickerView);\n",
109 125 "});"
110 126 ],
111 127 "language": "python",
@@ -114,63 +130,66
114 130 {
115 131 "javascript": [
116 132 "\n",
117 "require([\"notebook/js/widget\"], function(){\n",
133 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
118 134 " \n",
119 " // Define the FileModel and register it with the widget manager.\n",
120 " var FileModel = IPython.WidgetModel.extend({});\n",
121 " IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
122 " \n",
123 " // Define the FilePickerView\n",
124 135 " var FilePickerView = IPython.WidgetView.extend({\n",
125 " \n",
126 136 " render: function(){\n",
127 " var that = this;\n",
128 " this.$el = $('<input />')\n",
129 " .attr('type', 'file')\n",
130 " .change(function(evt){ that.handleFileChange(evt) });\n",
137 " // Render the view.\n",
138 " this.setElement($('<input />')\n",
139 " .attr('type', 'file'));\n",
140 " },\n",
141 " \n",
142 " events: {\n",
143 " // List of events and their handlers.\n",
144 " 'change': 'handle_file_change',\n",
131 145 " },\n",
132 146 " \n",
133 " // Handles: User input\n",
134 " handleFileChange: function(evt) { \n",
147 " handle_file_change: function(evt) { \n",
148 " // Handle when the user has changed the file.\n",
135 149 " \n",
136 150 " //Retrieve the first (and only!) File from the FileList object\n",
151 " var file = evt.target.files[0];\n",
152 " if (file) {\n",
153 "\n",
154 " // Read the file's textual content and set value to those contents.\n",
137 155 " var that = this;\n",
138 " var f = evt.target.files[0];\n",
139 " if (f) {\n",
140 " var r = new FileReader();\n",
141 " r.onload = function(e) {\n",
156 " var file_reader = new FileReader();\n",
157 " file_reader.onload = function(e) {\n",
142 158 " that.model.set('value', e.target.result);\n",
143 " that.model.update_other_views(that);\n",
159 " that.touch();\n",
144 160 " }\n",
145 " r.readAsText(f);\n",
161 " file_reader.readAsText(file);\n",
146 162 " } else {\n",
147 " this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
148 " this.model.update_other_views(this);\n",
163 "\n",
164 " // The file couldn't be opened. Send an error msg to the\n",
165 " // back-end.\n",
166 " this.send({ 'event': 'error' });\n",
149 167 " }\n",
150 " this.model.set('filename', f.name);\n",
151 " this.model.update_other_views(this);\n",
168 "\n",
169 " // Set the filename of the file.\n",
170 " this.model.set('filename', file.name);\n",
171 " this.touch();\n",
152 172 " },\n",
153 173 " });\n",
154 174 " \n",
155 175 " // Register the DatePickerView with the widget manager.\n",
156 " IPython.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
176 " WidgetManager.register_widget_view('FilePickerView', FilePickerView);\n",
157 177 "});"
158 178 ],
159 179 "metadata": {},
160 180 "output_type": "display_data",
161 181 "text": [
162 "<IPython.core.display.Javascript at 0x7f14f1c78cd0>"
182 "<IPython.core.display.Javascript at 0x22870d0>"
163 183 ]
164 184 }
165 185 ],
166 186 "prompt_number": 3
167 187 },
168 188 {
169 "cell_type": "heading",
170 "level": 1,
189 "cell_type": "markdown",
171 190 "metadata": {},
172 191 "source": [
173 "Usage"
192 "The following shows how the file widget can be used."
174 193 ]
175 194 },
176 195 {
@@ -178,22 +197,28
178 197 "collapsed": false,
179 198 "input": [
180 199 "file_widget = FileWidget()\n",
181 "display(file_widget)\n",
182 200 "\n",
201 "# Register an event to echo the filename when it has been changed.\n",
183 202 "def file_loading():\n",
184 203 " print(\"Loading %s\" % file_widget.filename)\n",
204 "file_widget.on_trait_change(file_loading, 'filename')\n",
185 205 "\n",
206 "# Register an event to echo the filename and contents when a file\n",
207 "# has been uploaded.\n",
186 208 "def file_loaded():\n",
187 209 " print(\"Loaded, file contents: %s\" % file_widget.value)\n",
210 "file_widget.on_trait_change(file_loaded, 'value')\n",
188 211 "\n",
189 "def file_failed(name, old_value, new_value):\n",
190 " if new_value > old_value:\n",
212 "# Register an event to print an error message when a file could not\n",
213 "# be opened. Since the error messages are not handled through\n",
214 "# traitlets but instead handled through custom msgs, the registration\n",
215 "# of the handler is different than the two examples above. Instead\n",
216 "# the API provided by the CallbackDispatcher must be used.\n",
217 "def file_failed():\n",
191 218 " print(\"Could not load file contents of %s\" % file_widget.filename)\n",
219 "file_widget.errors.register_callback(file_failed)\n",
192 220 "\n",
193 "\n",
194 "file_widget.on_trait_change(file_loading, 'filename')\n",
195 "file_widget.on_trait_change(file_loaded, 'value')\n",
196 "file_widget.on_trait_change(file_failed, 'on_failed')"
221 "file_widget"
197 222 ],
198 223 "language": "python",
199 224 "metadata": {},
@@ -11,61 +11,20
11 11 "cell_type": "code",
12 12 "collapsed": false,
13 13 "input": [
14 "# Console related imports.\n",
14 15 "from subprocess import Popen, PIPE\n",
15 16 "import fcntl\n",
16 17 "import os\n",
18 "from IPython.utils.py3compat import bytes_to_str, string_types\n",
17 19 "\n",
20 "# Widget related imports.\n",
18 21 "from IPython.html import widgets\n",
19 "from IPython.display import display\n",
20 "from IPython.utils.py3compat import bytes_to_str, string_types"
22 "from IPython.display import display"
21 23 ],
22 24 "language": "python",
23 25 "metadata": {},
24 26 "outputs": [],
25 "prompt_number": 1
26 },
27 {
28 "cell_type": "markdown",
29 "metadata": {},
30 "source": [
31 "Create the output, input, and console toggle widgets."
32 ]
33 },
34 {
35 "cell_type": "code",
36 "collapsed": false,
37 "input": [
38 "console_container = widgets.ContainerWidget(visible=False)\n",
39 "console_container.set_css('padding', '10px')\n",
40 "\n",
41 "console_style = {\n",
42 " 'font-family': 'monospace',\n",
43 " 'color': '#AAAAAA',\n",
44 " 'background': 'black',\n",
45 " 'width': '800px',\n",
46 "}\n",
47 "\n",
48 "output_box = widgets.StringWidget(parent=console_container, default_view_name='TextAreaView')\n",
49 "output_box.set_css(console_style)\n",
50 "output_box.set_css('height', '400px')\n",
51 "\n",
52 "input_box = widgets.StringWidget(parent=console_container)\n",
53 "input_box.set_css(console_style)\n",
54 "\n",
55 "toggle_button = widgets.ButtonWidget(description=\"Start Console\")\n",
56 "def toggle_console():\n",
57 " console_container.visible = not console_container.visible\n",
58 " if console_container.visible:\n",
59 " toggle_button.description=\"Stop Console\"\n",
60 " input_box.disabled = False\n",
61 " else:\n",
62 " toggle_button.description=\"Start Console\"\n",
63 "toggle_button.on_click(toggle_console)\n"
64 ],
65 "language": "python",
66 "metadata": {},
67 "outputs": [],
68 "prompt_number": 2
27 "prompt_number": 6
69 28 },
70 29 {
71 30 "cell_type": "markdown",
@@ -154,7 +113,42
154 113 "language": "python",
155 114 "metadata": {},
156 115 "outputs": [],
157 "prompt_number": 3
116 "prompt_number": 7
117 },
118 {
119 "cell_type": "markdown",
120 "metadata": {},
121 "source": [
122 "Create the console widgets without displaying them."
123 ]
124 },
125 {
126 "cell_type": "code",
127 "collapsed": false,
128 "input": [
129 "console_container = widgets.ContainerWidget(visible=False)\n",
130 "console_container.set_css('padding', '10px')\n",
131 "\n",
132 "console_style = {\n",
133 " 'font-family': 'monospace',\n",
134 " 'color': '#AAAAAA',\n",
135 " 'background': 'black',\n",
136 " 'width': '800px',\n",
137 "}\n",
138 "\n",
139 "output_box = widgets.TextAreaWidget()\n",
140 "output_box.set_css(console_style)\n",
141 "output_box.set_css('height', '400px')\n",
142 "\n",
143 "input_box = widgets.TextBoxWidget()\n",
144 "input_box.set_css(console_style)\n",
145 "\n",
146 "console_container.children = [output_box, input_box]"
147 ],
148 "language": "python",
149 "metadata": {},
150 "outputs": [],
151 "prompt_number": 8
158 152 },
159 153 {
160 154 "cell_type": "markdown",
@@ -195,26 +189,36
195 189 "language": "python",
196 190 "metadata": {},
197 191 "outputs": [],
198 "prompt_number": 4
192 "prompt_number": 9
199 193 },
200 194 {
201 195 "cell_type": "markdown",
202 196 "metadata": {},
203 197 "source": [
204 "Show the console"
198 "Create the button that will be used to display and hide the console. Display both the console container and the new button used to toggle it."
205 199 ]
206 200 },
207 201 {
208 202 "cell_type": "code",
209 203 "collapsed": false,
210 204 "input": [
205 "toggle_button = widgets.ButtonWidget(description=\"Start Console\")\n",
206 "def toggle_console():\n",
207 " console_container.visible = not console_container.visible\n",
208 " if console_container.visible:\n",
209 " toggle_button.description=\"Stop Console\"\n",
210 " input_box.disabled = False\n",
211 " else:\n",
212 " toggle_button.description=\"Start Console\"\n",
213 "toggle_button.on_click(toggle_console)\n",
214 "\n",
211 215 "display(toggle_button)\n",
212 216 "display(console_container)"
213 217 ],
214 218 "language": "python",
215 219 "metadata": {},
216 220 "outputs": [],
217 "prompt_number": 5
221 "prompt_number": 10
218 222 }
219 223 ],
220 224 "metadata": {}
@@ -59,8 +59,7
59 59 "- [Export As (nbconvert)](Export As (nbconvert%29.ipynb) \n",
60 60 "- [Nonblocking Console](Nonblocking Console.ipynb) \n",
61 61 "- [D3](D3.ipynb) \n",
62 "- [File Upload Widget](File Upload Widget.ipynb) \n",
63 "- [Dialogs](Dialogs.ipynb) "
62 "- [File Upload Widget](File Upload Widget.ipynb) "
64 63 ]
65 64 }
66 65 ],
General Comments 0
You need to be logged in to leave comments. Login now