Skip to content

Commit 34d7348

Browse files
jdfrederjdfreder
committed
Merge pull request jupyter#85 from jupyter/ipywidgets
Add ipywidgets static demo
2 parents 34aa018 + 29e4708 commit 34d7348

File tree

1 file changed

+237
-0
lines changed

1 file changed

+237
-0
lines changed

‎embed-jupyter-widgets.html

+237
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="content-type" content="text/html; charset=UTF8">
4+
<script src="https://npmcdn.com/[email protected]/lib/codemirror.js"></script>
5+
<script src="https://npmcdn.com/[email protected]/mode/python/python.js"></script>
6+
<script src="https://npmcdn.com/[email protected]/mode/javascript/javascript.js"></script>
7+
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/[email protected]/lib/codemirror.css">
8+
<script>
9+
document.addEventListener("DOMContentLoaded", function(event) {
10+
var inputarea = document.getElementsByClassName("inputarea")[0];
11+
var editor = CodeMirror(inputarea, {
12+
value: "from ipywidgets import VBox, jsdlink, IntSlider\n" +
13+
"s1 = IntSlider(description='Maximum', min=100, max=200, value=100)\n" +
14+
"s2 = IntSlider(description='Value', value=40)\n" +
15+
"jsdlink((s1, 'value'), (s2, 'max'))\n" +
16+
"VBox([s1, s2])",
17+
mode: "python",
18+
tabSize: 4,
19+
showCursorWhenSelecting: true,
20+
viewportMargin: Infinity,
21+
readOnly: true
22+
});
23+
24+
var snipetarea = document.getElementsByClassName("snipetarea")[0];
25+
var snipet_editor = CodeMirror(snipetarea, {
26+
value:
27+
'\x3cscript src="https://npmcdn.com/jupyter-js-widgets@~1.0.0/dist/embed.js">\x3c/script>\n\
28+
\x3cscript type="application/vnd.jupyter-embedded-widgets">\n\
29+
{\n\
30+
"0b2839e97da34d4db1de1e0a58acb485": {\n\
31+
"model_name": "LayoutModel",\n\
32+
"model_module": "jupyter-js-widgets",\n\
33+
"state": {},\n\
34+
"views": []\n\
35+
},\n\
36+
"637439f04a6c45f79ebe95a520abd86e": {\n\
37+
"model_name": "IntSliderModel",\n\
38+
"model_module": "jupyter-js-widgets",\n\
39+
"state": {\n\
40+
"layout": "IPY_MODEL_0b2839e97da34d4db1de1e0a58acb485",\n\
41+
"description": "Maximum",\n\
42+
"max": 200,\n\
43+
"min": 100,\n\
44+
"value": 100\n\
45+
},\n\
46+
"views": []\n\
47+
},\n\
48+
"9f4fdcbc76764609b3095d1681a1a044": {\n\
49+
"model_name": "LayoutModel",\n\
50+
"model_module": "jupyter-js-widgets",\n\
51+
"state": {},\n\
52+
"views": []\n\
53+
},\n\
54+
"b5e0072bfc0246feb7117b83a8fbc94b": {\n\
55+
"model_name": "IntSliderModel",\n\
56+
"model_module": "jupyter-js-widgets",\n\
57+
"state": {\n\
58+
"layout": "IPY_MODEL_9f4fdcbc76764609b3095d1681a1a044",\n\
59+
"description": "Value",\n\
60+
"value": 40\n\
61+
},\n\
62+
"views": []\n\
63+
},\n\
64+
"aa4288be316142248e0be51c0bb107aa": {\n\
65+
"model_name": "DirectionalLinkModel",\n\
66+
"model_module": "jupyter-js-widgets",\n\
67+
"state": {\n\
68+
"target": [\n\
69+
"IPY_MODEL_b5e0072bfc0246feb7117b83a8fbc94b",\n\
70+
"max"\n\
71+
],\n\
72+
"source": [\n\
73+
"IPY_MODEL_637439f04a6c45f79ebe95a520abd86e",\n\
74+
"value"\n\
75+
]\n\
76+
},\n\
77+
"views": []\n\
78+
},\n\
79+
"b0c77cc378bc4cfca1357e13b049b253": {\n\
80+
"model_name": "LayoutModel",\n\
81+
"model_module": "jupyter-js-widgets",\n\
82+
"state": {\n\
83+
"flex_flow": "column",\n\
84+
"display": "flex"\n\
85+
},\n\
86+
"views": []\n\
87+
},\n\
88+
"bf7d86e0469c4ec8aab2228a438e7120": {\n\
89+
"model_name": "BoxModel",\n\
90+
"model_module": "jupyter-js-widgets",\n\
91+
"state": {\n\
92+
"children": [\n\
93+
"IPY_MODEL_637439f04a6c45f79ebe95a520abd86e",\n\
94+
"IPY_MODEL_b5e0072bfc0246feb7117b83a8fbc94b"\n\
95+
],\n\
96+
"layout": "IPY_MODEL_b0c77cc378bc4cfca1357e13b049b253"\n\
97+
},\n\
98+
"views": [\n\
99+
{}\n\
100+
]\n\
101+
}\n\
102+
}\n\
103+
\x3c/script>',
104+
mode: "javascript",
105+
tabSize: 4,
106+
showCursorWhenSelecting: true,
107+
viewportMargin: Infinity,
108+
readOnly: true
109+
});
110+
111+
});
112+
</script>
113+
<style>
114+
body {
115+
margin-left: auto;
116+
margin-right: auto;
117+
max-width: 900px;
118+
background-color: #eee;
119+
font-family: sans-serif;
120+
}
121+
122+
.jupyter-js-widgets-example {
123+
padding: 10px;
124+
margin-top: 10px;
125+
margin-bottom: 10px;
126+
background-color: white;
127+
overflow: auto;
128+
box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
129+
}
130+
131+
.widgetarea, .inputarea, .snipetarea {
132+
margin: 5px;
133+
}
134+
135+
.CodeMirror {
136+
border: 1px solid #ccc;
137+
height: auto;
138+
background-color: #f7f7f7;
139+
border-radius: 2px;
140+
}
141+
142+
.CodeMirror-Scroll {
143+
height: auto;
144+
}
145+
</style>
146+
</head>
147+
<body>
148+
<h1>Embedding Jupyter Interactive Widgets</h1>
149+
<div class="jupyter-js-widgets-example">
150+
<h2>Notebook Code</h2>
151+
<div class="inputarea"></div>
152+
<h2>Generated Live Widgets</h2>
153+
<div class="widgetarea">
154+
<script src="https://npmcdn.com/jupyter-js-widgets@~1.0.0/dist/embed.js"></script>
155+
<script type="application/vnd.jupyter-embedded-widgets">
156+
{
157+
"0b2839e97da34d4db1de1e0a58acb485": {
158+
"model_name": "LayoutModel",
159+
"model_module": "jupyter-js-widgets",
160+
"state": {},
161+
"views": []
162+
},
163+
"637439f04a6c45f79ebe95a520abd86e": {
164+
"model_name": "IntSliderModel",
165+
"model_module": "jupyter-js-widgets",
166+
"state": {
167+
"layout": "IPY_MODEL_0b2839e97da34d4db1de1e0a58acb485",
168+
"description": "Maximum",
169+
"max": 200,
170+
"min": 100,
171+
"value": 100
172+
},
173+
"views": []
174+
},
175+
"9f4fdcbc76764609b3095d1681a1a044": {
176+
"model_name": "LayoutModel",
177+
"model_module": "jupyter-js-widgets",
178+
"state": {},
179+
"views": []
180+
},
181+
"b5e0072bfc0246feb7117b83a8fbc94b": {
182+
"model_name": "IntSliderModel",
183+
"model_module": "jupyter-js-widgets",
184+
"state": {
185+
"layout": "IPY_MODEL_9f4fdcbc76764609b3095d1681a1a044",
186+
"description": "Value",
187+
"value": 40
188+
},
189+
"views": []
190+
},
191+
"aa4288be316142248e0be51c0bb107aa": {
192+
"model_name": "DirectionalLinkModel",
193+
"model_module": "jupyter-js-widgets",
194+
"state": {
195+
"target": [
196+
"IPY_MODEL_b5e0072bfc0246feb7117b83a8fbc94b",
197+
"max"
198+
],
199+
"source": [
200+
"IPY_MODEL_637439f04a6c45f79ebe95a520abd86e",
201+
"value"
202+
]
203+
},
204+
"views": []
205+
},
206+
"b0c77cc378bc4cfca1357e13b049b253": {
207+
"model_name": "LayoutModel",
208+
"model_module": "jupyter-js-widgets",
209+
"state": {
210+
"flex_flow": "column",
211+
"display": "flex"
212+
},
213+
"views": []
214+
},
215+
"bf7d86e0469c4ec8aab2228a438e7120": {
216+
"model_name": "BoxModel",
217+
"model_module": "jupyter-js-widgets",
218+
"state": {
219+
"children": [
220+
"IPY_MODEL_637439f04a6c45f79ebe95a520abd86e",
221+
"IPY_MODEL_b5e0072bfc0246feb7117b83a8fbc94b"
222+
],
223+
"layout": "IPY_MODEL_b0c77cc378bc4cfca1357e13b049b253"
224+
},
225+
"views": [
226+
{}
227+
]
228+
}
229+
}
230+
</script>
231+
</div>
232+
<h2>Embeddable HTML Snippet</h2>
233+
<p>Paste this code snippet into any html page to generate the above live widgets</p>
234+
<div class="snipetarea"></div>
235+
</div>
236+
</body>
237+
</html>

0 commit comments

Comments
 (0)