Skip to content

Instantly share code, notes, and snippets.

@shashi

shashi/JuliaGizmos-Introduction.ipynb

Last active May 12, 2022 16:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shashi/3c3bc877ab1b5096232586cfbba0ef8b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shashi/3c3bc877ab1b5096232586cfbba0ef8b to your computer and use it in GitHub Desktop.
Download ZIP
It's back!
Display the source blob
Display the rendered blob
Raw
JuliaGizmos-Introduction.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"using WebIO\n",
"using Interact\n",
"using Colors, Plots"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Outline\n",
"\n",
"- How to HTML & JavaScript with Julia\n",
"- How to communicate between JavaScript and Julia\n",
"- Loading assets\n",
"- Interact.jl -- a thing built with WebIO\n",
"- Deploying your gizmos\n",
"- Rendering custom types\n",
"- The big picture of WebIO"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Hello Web!"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
"Hello, JuliaCon!"
],
"instanceArgs": {
"namespace": "html",
"tag": "marquee"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"15071821510104511983\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"15071821510104511983\"]'),\n",
" {\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"marquee\"},\"children\":[\"Hello, JuliaCon!\"]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"15071821510104511983\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(marquee\n",
" \"Hello, JuliaCon!\")"
]
},
"execution_count": 3,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"node(:marquee, \"Hello, JuliaCon!\")"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Hello!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"World!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "ol"
},
"nodeType": "DOM",
"props": {
"style": {
"fontFamily": "cursive"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"7360890509673279104\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"7360890509673279104\"]'),\n",
" {\"props\":{\"style\":{\"fontFamily\":\"cursive\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"ol\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"Hello!\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"World!\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"7360890509673279104\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(ol { style=Dict(\"fontFamily\" => \"cursive\") }\n",
" (li\n",
" \"Hello!\")\n",
" (li\n",
" \"World!\"))"
]
},
"execution_count": 6,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"node(\n",
" :ol,\n",
" node(:li,\"Hello!\"),\n",
" node(:li, \"World!\"),\n",
" style=Dict(\"fontFamily\"=>\"cursive\"),\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Hello!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "ol"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"7540900897576254859\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"7540900897576254859\"]'),\n",
" {\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"ol\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"Hello!\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"7540900897576254859\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(ol\n",
" (li\n",
" \"Hello!\"))"
]
},
"execution_count": 7,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"n1 = node(:ol, node(:li, \"Hello!\"))"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Hello!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"World!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "ol"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"6763486756698045420\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"6763486756698045420\"]'),\n",
" {\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"ol\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"Hello!\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"World!\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"6763486756698045420\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(ol\n",
" (li\n",
" \"Hello!\")\n",
" (li\n",
" \"World!\"))"
]
},
"execution_count": 8,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"n2 = n1(node(:li, \"World!\"))"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Hello!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"World!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "ol"
},
"nodeType": "DOM",
"props": {
"style": {
"color": "purple"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"4708870258812261055\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"4708870258812261055\"]'),\n",
" {\"props\":{\"style\":{\"color\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"ol\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"Hello!\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"World!\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"4708870258812261055\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(ol { style=Dict(\"color\" => \"purple\") }\n",
" (li\n",
" \"Hello!\")\n",
" (li\n",
" \"World!\"))"
]
},
"execution_count": 12,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"n3 = n2(style=Dict(\"color\" => \"purple\"))"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Hello!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"World!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "ol"
},
"nodeType": "DOM",
"props": {
"style": {
"color": "purple",
"fontWeight": "bold"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"15359162568343161228\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"15359162568343161228\"]'),\n",
" {\"props\":{\"style\":{\"color\":\"purple\",\"fontWeight\":\"bold\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"ol\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"Hello!\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"World!\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"15359162568343161228\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(ol { style=Dict{Any,Any}(\"color\" => \"purple\",\"fontWeight\" => \"bold\") }\n",
" (li\n",
" \"Hello!\")\n",
" (li\n",
" \"World!\"))"
]
},
"execution_count": 13,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"n3(Dict(:style=>Dict(\"fontWeight\" => \"bold\")))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# CSSUtils"
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {},
"outputs": [],
"source": [
"using CSSUtil"
]
},
{
"cell_type": "code",
"execution_count": 15,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"Dict{Symbol,Dict{Symbol,String}} with 1 entry:\n",
" :style => Dict(:fontWeight=>\"bold\")"
]
},
"execution_count": 15,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"style1 = style(:fontWeight=>\"bold\")"
]
},
{
"cell_type": "code",
"execution_count": 20,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"Dict{Symbol,Dict{String,Symbol}} with 1 entry:\n",
" :style => Dict(\"fontWeight\"=>:bold)"
]
},
"execution_count": 20,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"fontweight(:bold) # from CSSUtil"
]
},
{
"cell_type": "code",
"execution_count": 17,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Hello!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"World!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "ol"
},
"nodeType": "DOM",
"props": {
"style": {
"fontWeight": "bold"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"6280138718091789694\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"6280138718091789694\"]'),\n",
" {\"props\":{\"style\":{\"fontWeight\":\"bold\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"ol\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"Hello!\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"World!\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"6280138718091789694\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(ol { style=Dict(:fontWeight => \"bold\") }\n",
" (li\n",
" \"Hello!\")\n",
" (li\n",
" \"World!\"))"
]
},
"execution_count": 17,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"n2(style1)"
]
},
{
"cell_type": "code",
"execution_count": 19,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Hello!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"World!"
],
"instanceArgs": {
"namespace": "html",
"tag": "li"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "ol"
},
"nodeType": "DOM",
"props": {
"style": {
"fontWeight": "bold"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"2707736368171462444\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"2707736368171462444\"]'),\n",
" {\"props\":{\"style\":{\"fontWeight\":\"bold\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"ol\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"Hello!\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"li\"},\"children\":[\"World!\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"2707736368171462444\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(ol { style=Dict(\"fontWeight\" => :bold) }\n",
" (li\n",
" \"Hello!\")\n",
" (li\n",
" \"World!\"))"
]
},
"execution_count": 19,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"n2(fontweight(:bold))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Layouts"
]
},
{
"cell_type": "code",
"execution_count": 33,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "purple",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"10136587123101111342\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"10136587123101111342\"]'),\n",
" {\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"10136587123101111342\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"purple\") })"
]
},
"execution_count": 33,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"purplebox = node(:div)(background(\"purple\"))(width(4em))(height(4em))"
]
},
{
"cell_type": "code",
"execution_count": 34,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"11134752724773005119\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"11134752724773005119\"]'),\n",
" {\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"11134752724773005119\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"pink\") })"
]
},
"execution_count": 34,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"pinkbox = node(:div)(background(\"pink\"))(width(4em))(height(4em))"
]
},
{
"cell_type": "code",
"execution_count": 36,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "purple",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "column"
}
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "purple",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "column"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "row"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"1744227489634259611\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"1744227489634259611\"]'),\n",
" {\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"row\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"column\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},{\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"column\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"1744227489634259611\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"row\") }\n",
" (div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"column\") }\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"purple\") })\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"pink\") }))\n",
" (div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"column\") }\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"pink\") })\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"purple\") })))"
]
},
"execution_count": 36,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"hbox(vbox(purplebox, pinkbox),\n",
" vbox(pinkbox, purplebox))"
]
},
{
"cell_type": "code",
"execution_count": 38,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "purple",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "column"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"height": "0.0px",
"width": "1.0em"
}
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "purple",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "column"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "row"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"17698097862705776143\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"17698097862705776143\"]'),\n",
" {\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"row\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"column\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},{\"props\":{\"style\":{\"height\":\"0.0px\",\"width\":\"1.0em\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"column\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"17698097862705776143\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"row\") }\n",
" (div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"column\") }\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"purple\") })\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"pink\") }))\n",
" (div { style=Dict{String,Measures.Length{U,Float64} where U}(\"height\" => 0.0px,\"width\" => 1.0em) })\n",
" (div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"column\") }\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"pink\") })\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"purple\") })))"
]
},
"execution_count": 38,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"hbox(vbox(purplebox, pinkbox),\n",
" hskip(1em),# give a horizontal spacing of 1em\n",
" vbox(pinkbox, purplebox))"
]
},
{
"cell_type": "code",
"execution_count": 39,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "purple",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"height": "1.0em",
"width": "0.0px"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "column"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"height": "0.0px",
"width": "1.0em"
}
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"height": "1.0em",
"width": "0.0px"
}
},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "purple",
"height": "4.0em",
"width": "4.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "column"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "row"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"3465778324418013709\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"3465778324418013709\"]'),\n",
" {\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"row\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"column\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"1.0em\",\"width\":\"0.0px\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},{\"props\":{\"style\":{\"height\":\"0.0px\",\"width\":\"1.0em\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"column\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"1.0em\",\"width\":\"0.0px\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{\"style\":{\"height\":\"4.0em\",\"width\":\"4.0em\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"3465778324418013709\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"row\") }\n",
" (div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"column\") }\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"purple\") })\n",
" (div { style=Dict{String,Measures.Length{U,Float64} where U}(\"height\" => 1.0em,\"width\" => 0.0px) })\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"pink\") }))\n",
" (div { style=Dict{String,Measures.Length{U,Float64} where U}(\"height\" => 0.0px,\"width\" => 1.0em) })\n",
" (div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"column\") }\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"pink\") })\n",
" (div { style=Dict{String,Measures.Length{U,Float64} where U}(\"height\" => 1.0em,\"width\" => 0.0px) })\n",
" (div { style=Dict{Any,Any}(\"height\" => 4.0em,\"width\" => 4.0em,\"background\" => \"purple\") })))"
]
},
"execution_count": 39,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"# also add vertical spacing\n",
"hbox(vbox(purplebox, vskip(1em), pinkbox),\n",
" hskip(1em),\n",
" vbox(pinkbox, vskip(1em), purplebox))"
]
},
{
"cell_type": "code",
"execution_count": 66,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [
"Hello, Markdown!"
],
"instanceArgs": {
"namespace": "html",
"tag": "h1"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"Lorem ipsum"
],
"instanceArgs": {
"namespace": "html",
"tag": "h2"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
"Cauchy-Schwartz inequality:"
],
"instanceArgs": {
"namespace": "html",
"tag": "p"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"handlers": {},
"id": "14719678409497755242",
"imports": {
"data": [
{
"name": null,
"type": "js",
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
},
{
"name": null,
"type": "css",
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = (function (katex) {\nkatex.render(\"\\\\left(\\\\sum_{k=1}^n a_k b_k \\\\right)^2 \\\\leq\\n \\\\left(\\\\sum_{k=1}^n a_k^2 \\\\right) \\\\left(\\\\sum_{k=1}^n b_k^2 \\\\right)\", this.dom, {displayMode: true})\n});\n (WebIO.importBlock({\"data\":[{\"name\":null,\"type\":\"js\",\"url\":\"https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
},
{
"children": [
"function gcd(a::T, b::T) where T<:Integer\n while b != 0\n t = b\n b = rem(a, b)\n a = t\n end\n checked_abs(a)\nend"
],
"instanceArgs": {
"namespace": "html",
"tag": "pre"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "jl-markdown",
"style": {
"display": "flex",
"flex-direction": "column"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "#fff1f0",
"padding": "1.0em"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"3974995998940764670\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"3974995998940764670\"]'),\n",
" {\"props\":{\"style\":{\"padding\":\"1.0em\",\"background\":\"#fff1f0\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"jl-markdown\",\"style\":{\"display\":\"flex\",\"flex-direction\":\"column\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"h1\"},\"children\":[\"Hello, Markdown!\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"h2\"},\"children\":[\"Lorem ipsum\"]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"p\"},\"children\":[\"Cauchy-Schwartz inequality:\"]},{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":null,\"type\":\"js\",\"url\":\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/[email protected]\\/dist\\/katex.min.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/[email protected]\\/dist\\/katex.min.css\"}],\"type\":\"async_block\"},\"id\":\"7101932001672824845\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = (function (katex) {\\nkatex.render(\\\"\\\\\\\\left(\\\\\\\\sum_{k=1}^n a_k b_k \\\\\\\\right)^2 \\\\\\\\leq\\\\n \\\\\\\\left(\\\\\\\\sum_{k=1}^n a_k^2 \\\\\\\\right) \\\\\\\\left(\\\\\\\\sum_{k=1}^n b_k^2 \\\\\\\\right)\\\", this.dom, {displayMode: true})\\n});\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":null,\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/[email protected]\\/dist\\/katex.min.js\\\"},{\\\"name\\\":null,\\\"type\\\":\\\"css\\\",\\\"url\\\":\\\"https:\\/\\/cdn.jsdelivr.net\\/npm\\/[email protected]\\/dist\\/katex.min.css\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{}},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"pre\"},\"children\":[\"function gcd(a::T, b::T) where T<:Integer\\n while b != 0\\n t = b\\n b = rem(a, b)\\n a = t\\n end\\n checked_abs(a)\\nend\"]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"3974995998940764670\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div { style=Dict{Any,Any}(\"padding\" => 1.0em,\"background\" => \"#fff1f0\") }\n",
" # Hello, Markdown!\n",
"\n",
"## Lorem ipsum\n",
"\n",
"Cauchy-Schwartz inequality:\n",
"\n",
"$$\n",
"\\left(\\sum_{k=1}^n a_k b_k \\right)^2 \\leq\n",
" \\left(\\sum_{k=1}^n a_k^2 \\right) \\left(\\sum_{k=1}^n b_k^2 \\right)\n",
"$$\n",
"\n",
"```julia\n",
"function gcd(a::T, b::T) where T<:Integer\n",
" while b != 0\n",
" t = b\n",
" b = rem(a, b)\n",
" a = t\n",
" end\n",
" checked_abs(a)\n",
"end\n",
"```\n",
")"
]
},
"execution_count": 66,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"using Markdown\n",
"mymarkdown = md\"\"\"\n",
"# Hello, Markdown!\n",
"## Lorem ipsum\n",
"\n",
"Cauchy-Schwartz inequality:\n",
"\n",
"$$\\left(\\sum_{k=1}^n a_k b_k \\right)^2 \\leq\n",
" \\left(\\sum_{k=1}^n a_k^2 \\right) \\left(\\sum_{k=1}^n b_k^2 \\right)$$\n",
" \n",
"```julia\n",
"function gcd(a::T, b::T) where T<:Integer\n",
" while b != 0\n",
" t = b\n",
" b = rem(a, b)\n",
" a = t\n",
" end\n",
" checked_abs(a)\n",
"end\n",
"```\n",
"\"\"\"\n",
"\n",
"pad(1em, mymarkdown)(background(\"#fff1f0\"))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# JavaScript in Julia"
]
},
{
"cell_type": "code",
"execution_count": 70,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"WebIO.JSString(\"function () {\\n alert(\\\"hi\\\") // you can interpolate Julia variables!\\n}\\n\")"
]
},
"execution_count": 70,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"message = \"hi\"\n",
"\n",
"callback = js\"\"\"\n",
"function () {\n",
" alert($message) // you can interpolate Julia variables!\n",
"}\n",
"\"\"\"\n",
"\n",
"# note: if you change the value of message on Julia, it will not notify\n",
"# javascript about it."
]
},
{
"cell_type": "code",
"execution_count": 71,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
"Click me"
],
"instanceArgs": {
"namespace": "html",
"tag": "button"
},
"nodeType": "DOM",
"props": {
"events": {
"click": "function () {\n alert(\"hi\") // you can interpolate Julia variables!\n}\n"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"16293503924028961542\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"16293503924028961542\"]'),\n",
" {\"props\":{\"events\":{\"click\":\"function () {\\n alert(\\\"hi\\\") \\/\\/ you can interpolate Julia variables!\\n}\\n\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"button\"},\"children\":[\"Click me\"]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"16293503924028961542\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(button { events=Dict(\"click\" => WebIO.JSString(\"function () {\\n alert(\\\"hi\\\") // you can interpolate Julia variables!\\n}\\n\")) }\n",
" \"Click me\")"
]
},
"execution_count": 71,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"node(:button,\n",
" \"Click me\",\n",
" events=Dict(\"click\" => callback)\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 72,
"metadata": {},
"outputs": [],
"source": [
"using JSExpr"
]
},
{
"cell_type": "code",
"execution_count": 74,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"JSString(\"(function (x){return alert(\\\"hi\\\")})\")"
]
},
"execution_count": 74,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"fancy_callback = @js x -> alert(\"hi\")"
]
},
{
"cell_type": "code",
"execution_count": 76,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
"Click me"
],
"instanceArgs": {
"namespace": "html",
"tag": "button"
},
"nodeType": "DOM",
"props": {
"events": {
"click": "(function (){return alert(\"hello, there!\")})"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"1222987624974631736\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"1222987624974631736\"]'),\n",
" {\"props\":{\"events\":{\"click\":\"(function (){return alert(\\\"hello, there!\\\")})\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"button\"},\"children\":[\"Click me\"]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"1222987624974631736\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(button { events=Dict(\"click\" => JSString(\"(function (){return alert(\\\"hello, there!\\\")})\")) }\n",
" \"Click me\")"
]
},
"execution_count": 76,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"node(:button,\n",
" \"Click me\",\n",
" events = Dict(\n",
" \"click\" => @js ()->alert(\"hello, there!\")\n",
" )\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Communicating between Julia and JavaScript"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## A Digression: Observables\n",
"\n",
"They are like Refs but you can listen to their changes."
]
},
{
"cell_type": "code",
"execution_count": 77,
"metadata": {},
"outputs": [],
"source": [
"using Observables"
]
},
{
"cell_type": "code",
"execution_count": 78,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "webio-observable",
"setInnerHtml": "<pre>\"hi\"</pre>"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"obs-output": [
"function (value, scope) {\n scope.setInnerHTML(value);\n}\n"
]
},
"id": "15495096306132713210",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"obs-output": {
"id": "ob_03",
"sync": false,
"value": "<pre>\"hi\"</pre>"
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"17775047496620892880\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"17775047496620892880\"]'),\n",
" {\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"17171178640437660256\",\"handlers\":{\"obs-output\":[\"function (value, scope) {\\n scope.setInnerHTML(value);\\n}\\n\"]},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-output\":{\"sync\":false,\"id\":\"ob_02\",\"value\":\"<pre>\\\"hi\\\"<\\/pre>\"}}},\"children\":[{\"props\":{\"className\":\"webio-observable\",\"setInnerHtml\":\"<pre>\\\"hi\\\"<\\/pre>\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"17775047496620892880\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"Observable{String} with 0 listeners. Value:\n",
"\"hi\""
]
},
"execution_count": 78,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"observ = Observable(\"hi\")"
]
},
{
"cell_type": "code",
"execution_count": 80,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"\"Life\""
]
},
"execution_count": 80,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"observ[] = \"Life\""
]
},
{
"cell_type": "code",
"execution_count": 81,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"\"Life\""
]
},
"execution_count": 81,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"observ[]"
]
},
{
"cell_type": "code",
"execution_count": 84,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"#15 (generic function with 1 method)"
]
},
"execution_count": 84,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"on(observ) do val\n",
" println(\"my value was updated to \", val)\n",
"end"
]
},
{
"cell_type": "code",
"execution_count": 85,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"my value was updated toWorld\n",
"my value was updated to World\n"
]
},
{
"data": {
"text/plain": [
"\"World\""
]
},
"execution_count": 85,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"observ[] = \"World\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## JavaScript $\\rightarrow$ Julia"
]
},
{
"cell_type": "code",
"execution_count": 87,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"Click me"
],
"instanceArgs": {
"namespace": "html",
"tag": "button"
},
"nodeType": "DOM",
"props": {
"events": {
"click": "(function (){return WebIO.setval({\"name\":\"clicks\",\"scope\":\"7370501144646710674\",\"id\":\"ob_05\",\"type\":\"observable\"},(WebIO.getval({\"name\":\"clicks\",\"scope\":\"7370501144646710674\",\"id\":\"ob_05\",\"type\":\"observable\"})+1))})"
}
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {},
"id": "7370501144646710674",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"clicks": {
"id": "ob_05",
"sync": false,
"value": 0
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"5809074401153711930\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"5809074401153711930\"]'),\n",
" {\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"7370501144646710674\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"clicks\":{\"sync\":false,\"id\":\"ob_05\",\"value\":0}}},\"children\":[{\"props\":{\"events\":{\"click\":\"(function (){return WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"},(WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"})+1))})\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"button\"},\"children\":[\"Click me\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"5809074401153711930\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :button), Any[\"Click me\"], Dict{Symbol,Any}(:events => Dict(\"click\" => JSString(\"(function (){return WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"},(WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"})+1))})\")))), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"clicks\" => (Observable{Int64} with 0 listeners. Value:\n",
"0, nothing)), Set(String[]), nothing, Asset[], Dict{Any,Any}(), WebIO.ConnectionPool(Any[], Set(AbstractConnection[])), JSString[])"
]
},
"execution_count": 87,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"click_counter = Observable(0)\n",
"\n",
"btn_scope = Scope()\n",
"btn_scope[\"clicks\"] = click_counter\n",
"\n",
"btn_scope.dom = node(:button,\n",
" \"Click me\",\n",
" events=Dict(\n",
" \"click\" => @js ()-> $click_counter[] = $click_counter[] + 1))\n",
"\n",
"btn_scope"
]
},
{
"cell_type": "code",
"execution_count": 88,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "webio-observable",
"setInnerHtml": "<pre>1</pre>"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"obs-output": [
"function (value, scope) {\n scope.setInnerHTML(value);\n}\n"
]
},
"id": "2309555699408527752",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"obs-output": {
"id": "ob_07",
"sync": false,
"value": "<pre>1</pre>"
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"2617584537423343819\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"2617584537423343819\"]'),\n",
" {\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"2645189172194288632\",\"handlers\":{\"obs-output\":[\"function (value, scope) {\\n scope.setInnerHTML(value);\\n}\\n\"]},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-output\":{\"sync\":false,\"id\":\"ob_06\",\"value\":\"<pre>1<\\/pre>\"}}},\"children\":[{\"props\":{\"className\":\"webio-observable\",\"setInnerHtml\":\"<pre>1<\\/pre>\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"2617584537423343819\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"Observable{Int64} with 0 listeners. Value:\n",
"1"
]
},
"execution_count": 88,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"click_counter"
]
},
{
"cell_type": "code",
"execution_count": 90,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [
"Click me"
],
"instanceArgs": {
"namespace": "html",
"tag": "button"
},
"nodeType": "DOM",
"props": {
"events": {
"click": "(function (){return WebIO.setval({\"name\":\"clicks\",\"scope\":\"7370501144646710674\",\"id\":\"ob_05\",\"type\":\"observable\"},(WebIO.getval({\"name\":\"clicks\",\"scope\":\"7370501144646710674\",\"id\":\"ob_05\",\"type\":\"observable\"})+1))})"
}
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {},
"id": "7370501144646710674",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"clicks": {
"id": "ob_05",
"sync": true,
"value": 6
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
},
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"height": "0.0px",
"width": "1.0em"
}
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "webio-observable",
"setInnerHtml": "<pre>6</pre>"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"obs-output": [
"function (value, scope) {\n scope.setInnerHTML(value);\n}\n"
]
},
"id": "8899154570880275304",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"obs-output": {
"id": "ob_11",
"sync": false,
"value": "<pre>6</pre>"
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"display": "flex",
"flex-direction": "row"
}
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"5240645875890987944\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"5240645875890987944\"]'),\n",
" {\"props\":{\"style\":{\"display\":\"flex\",\"flex-direction\":\"row\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"7370501144646710674\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"clicks\":{\"sync\":true,\"id\":\"ob_05\",\"value\":6}}},\"children\":[{\"props\":{\"events\":{\"click\":\"(function (){return WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"},(WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"})+1))})\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"button\"},\"children\":[\"Click me\"]}]},{\"props\":{\"style\":{\"height\":\"0.0px\",\"width\":\"1.0em\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]},{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"915057829176174243\",\"handlers\":{\"obs-output\":[\"function (value, scope) {\\n scope.setInnerHTML(value);\\n}\\n\"]},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-output\":{\"sync\":false,\"id\":\"ob_10\",\"value\":\"<pre>6<\\/pre>\"}}},\"children\":[{\"props\":{\"className\":\"webio-observable\",\"setInnerHtml\":\"<pre>6<\\/pre>\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"5240645875890987944\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div { style=Dict(\"display\" => \"flex\",\"flex-direction\" => \"row\") }\n",
" (button { events=Dict(\"click\" => JSString(\"(function (){return WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"},(WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7370501144646710674\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"})+1))})\")) }\n",
" \"Click me\")\n",
" (div { style=Dict{String,Measures.Length{U,Float64} where U}(\"height\" => 0.0px,\"width\" => 1.0em) })\n",
" Observable{Int64} with 4 listeners. Value:\n",
"6)"
]
},
"execution_count": 90,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"# You can place an observable in the DOM, and it will auto-update\n",
"hbox(btn_scope, hskip(1em), click_counter)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Julia $\\rightarrow$ JavaScript"
]
},
{
"cell_type": "code",
"execution_count": 97,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"id": "prog",
"style": {
"background": "purple",
"float": "left",
"height": "1.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"style": {
"background": "pink",
"height": "1.0em"
}
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"progress": [
"(function (prog){return this.dom.querySelector(\"#prog\").style.width=((prog*100)+\"%\")})"
]
},
"id": "13546428288764428217",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"progress": {
"id": "ob_17",
"sync": false,
"value": 0
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"14028909905232333563\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"14028909905232333563\"]'),\n",
" {\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"13546428288764428217\",\"handlers\":{\"progress\":[\"(function (prog){return this.dom.querySelector(\\\"#prog\\\").style.width=((prog*100)+\\\"%\\\")})\"]},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"progress\":{\"sync\":false,\"id\":\"ob_17\",\"value\":0.0}}},\"children\":[{\"props\":{\"style\":{\"height\":\"1.0em\",\"background\":\"pink\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"id\":\"prog\",\"style\":{\"height\":\"1.0em\",\"float\":\"left\",\"background\":\"purple\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"14028909905232333563\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[], Dict{Symbol,Any}(:id => \"prog\",:style => Dict{Symbol,Any}(:height => 1.0em,:float => :left,:background => \"purple\")))], Dict{Symbol,Any}(:style => Dict{Symbol,Any}(:height => 1.0em,:background => \"pink\"))), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"progress\" => (Observable{Float64} with 1 listeners. Value:\n",
"0.0, nothing)), Set(String[]), nothing, Asset[], Dict{Any,Any}(\"progress\" => Any[JSString(\"(function (prog){return this.dom.querySelector(\\\"#prog\\\").style.width=((prog*100)+\\\"%\\\")})\")]), WebIO.ConnectionPool(Any[], Set(AbstractConnection[])), JSString[])"
]
},
"execution_count": 97,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"prog_scope = Scope()\n",
"progress = Observable(prog_scope, \"progress\", 0.0)\n",
"prog_scope.dom = node(:div,\n",
" style=Dict(\n",
" :height=>1em,\n",
" :background => \"pink\"),\n",
" node(:div,\n",
" id=\"prog\",\n",
" style=Dict(\n",
" :height=>1em,\n",
" :float=>:left,\n",
" :background=>\"purple\")))\n",
"\n",
"callback = @js function (prog)\n",
" # `this` refers to the scope object in javascript\n",
" # `this.dom` is the DOM where the scope's content\n",
" # is rendered.\n",
" this.dom.querySelector(\"#prog\").style.width = prog*100+\"%\"\n",
"end\n",
"onjs(progress, callback)\n",
"\n",
"prog_scope"
]
},
{
"cell_type": "code",
"execution_count": 101,
"metadata": {},
"outputs": [],
"source": [
"for i=1:100\n",
" progress[] = i/100\n",
" sleep(0.01)\n",
"end"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Loading assets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\"Assets\" in web development jargon means helper or dependency files that maybe JavaScript, CSS, images or even HTML.\n",
"\n",
"- **Problem:** The browser cannot load arbitrary files from your computer, for obvious security reasons. So you need to serve it using a web server.\n",
"- **Solution:** serve the required file or directory over HTTP and use the URL it is available at.\n",
"- **But** WebIO does not have a HTTP server of its own. It needs to work with Jupyter/Atom/Mux.\n",
"\n",
"\n",
"We solve this problem through the package AssetRegistry.jl -- you can use `AssetRegistry.register` to register a file to be served. This function gives back a URL the file is available at. WebIO has plugins for Jupyter/Atom/Mux which will make sure that these files are available to you at the URL AssetRegistry said it will be at.\n",
"\n",
"TODO: add picture!"
]
},
{
"cell_type": "code",
"execution_count": 103,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"\u001b[32m\u001b[1m Resolving\u001b[22m\u001b[39m package versions...\n",
"\u001b[32m\u001b[1m Updating\u001b[22m\u001b[39m `~/code/proj/Project.toml`\n",
" \u001b[90m [bf4720bc]\u001b[39m\u001b[92m + AssetRegistry v0.1.0\u001b[39m\n",
"\u001b[32m\u001b[1m Updating\u001b[22m\u001b[39m `~/code/proj/Manifest.toml`\n",
"\u001b[90m [no changes]\u001b[39m\n"
]
}
],
"source": [
"]add AssetRegistry"
]
},
{
"cell_type": "code",
"execution_count": 104,
"metadata": {},
"outputs": [],
"source": [
"using AssetRegistry"
]
},
{
"cell_type": "code",
"execution_count": 105,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"\"/assetserver/be9ed2bf33cc1e4959156f5bb22d7fff96fc938f-animated-logo.gif\""
]
},
"execution_count": 105,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"gif_url = AssetRegistry.register(\"./animated-logo.gif\")"
]
},
{
"cell_type": "code",
"execution_count": 106,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "img"
},
"nodeType": "DOM",
"props": {
"src": "/assetserver/be9ed2bf33cc1e4959156f5bb22d7fff96fc938f-animated-logo.gif"
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"17990052306197891946\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"17990052306197891946\"]'),\n",
" {\"props\":{\"src\":\"\\/assetserver\\/be9ed2bf33cc1e4959156f5bb22d7fff96fc938f-animated-logo.gif\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"img\"},\"children\":[]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"17990052306197891946\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(img { src=\"/assetserver/be9ed2bf33cc1e4959156f5bb22d7fff96fc938f-animated-logo.gif\" })"
]
},
"execution_count": 106,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"node(:img, src=gif_url)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# JavaScript Loading\n",
"\n",
"Loading a JavaScript file is almost always followed by executing some code which uses functions from that file.\n",
"\n",
"\n",
"The WebIO way to load a JavaScript file is to provide a URL or filepath to the javascript file as the `imports` key word argument when creating a `Scope`. Then you can use `onimport` to define a callback that is run when the javascript file is loaded."
]
},
{
"cell_type": "code",
"execution_count": 109,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"\"moment.min.js\""
]
},
"execution_count": 109,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# Let's first download a javascript file\n",
"if !isfile(\"moment.min.js\")\n",
" download(\n",
" \"https://momentjs.com/downloads/moment.min.js\",\n",
" \"moment.min.js\")\n",
"end"
]
},
{
"cell_type": "code",
"execution_count": 122,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
"<loading moment>"
],
"instanceArgs": {
"namespace": "html",
"tag": "span"
},
"nodeType": "DOM",
"props": {
"id": "humantime"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {},
"id": "7648452420955637455",
"imports": {
"data": [
{
"name": null,
"type": "js",
"url": "/assetserver/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = ((function (moment){return this.dom.querySelector(\"#humantime\").textContent=moment(\"19470815\",\"YYYYMMDD\").fromNow()}));\n (WebIO.importBlock({\"data\":[{\"name\":null,\"type\":\"js\",\"url\":\"/assetserver/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"9573706033311565573\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"9573706033311565573\"]'),\n",
" {\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js\"}],\"type\":\"async_block\"},\"id\":\"7648452420955637455\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = ((function (moment){return this.dom.querySelector(\\\"#humantime\\\").textContent=moment(\\\"19470815\\\",\\\"YYYYMMDD\\\").fromNow()}));\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":null,\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{}},\"children\":[{\"props\":{\"id\":\"humantime\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"span\"},\"children\":[\"<loading moment>\"]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"9573706033311565573\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :span), Any[\"<loading moment>\"], Dict{Symbol,Any}(:id => \"humantime\")), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(), Set(String[]), nothing, Asset[Asset(\"js\", nothing, \"./moment.min.js\")], Dict{Any,Any}(), WebIO.ConnectionPool(Any[], Set(AbstractConnection[])), JSString[JSString(\"function () {\\n var handler = ((function (moment){return this.dom.querySelector(\\\"#humantime\\\").textContent=moment(\\\"19470815\\\",\\\"YYYYMMDD\\\").fromNow()}));\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":null,\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])"
]
},
"execution_count": 122,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"# Scope automatically asks AssetRegistry to register any local JS paths\n",
"# you can also use a publicly available URL instead of a file path\n",
"moment_scope = Scope(imports=[\"./moment.min.js\"])\n",
"\n",
"moment_scope.dom = node(:span, id=\"humantime\", \"<loading moment>\")\n",
"\n",
"onimport(moment_scope,\n",
" @js function (moment) # The javascript module!\n",
" this.dom.querySelector(\"#humantime\").textContent =\n",
" moment(\"19470815\", \"YYYYMMDD\").fromNow()\n",
" end)"
]
},
{
"cell_type": "code",
"execution_count": 132,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"fromnow (generic function with 1 method)"
]
},
"execution_count": 132,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"function fromnow(date)\n",
" # Scope automatically asks AssetRegistry to register any local JS paths\n",
" # you can also use a publicly available URL instead of a file path\n",
" moment_scope = Scope(imports=[\"./moment.min.js\"])\n",
"\n",
" moment_scope.dom = node(:span, id=\"humantime\", \"<loading moment>\")\n",
"\n",
" onimport(moment_scope,\n",
" @js function (moment) # The javascript module!\n",
" this.dom.querySelector(\"#humantime\").textContent =\n",
" moment($date, \"YYYYMMDD\").fromNow()\n",
" end)\n",
"end"
]
},
{
"cell_type": "code",
"execution_count": 134,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
"Cassini flew by Jupiter ",
{
"children": [
{
"children": [
"<loading moment>"
],
"instanceArgs": {
"namespace": "html",
"tag": "span"
},
"nodeType": "DOM",
"props": {
"id": "humantime"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {},
"id": "8554139375619075289",
"imports": {
"data": [
{
"name": null,
"type": "js",
"url": "/assetserver/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = ((function (moment){return this.dom.querySelector(\"#humantime\").textContent=moment(\"20001230\",\"YYYYMMDD\").fromNow()}));\n (WebIO.importBlock({\"data\":[{\"name\":null,\"type\":\"js\",\"url\":\"/assetserver/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"17959802266582396073\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"17959802266582396073\"]'),\n",
" {\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[\"Cassini flew by Jupiter \",{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js\"}],\"type\":\"async_block\"},\"id\":\"8554139375619075289\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = ((function (moment){return this.dom.querySelector(\\\"#humantime\\\").textContent=moment(\\\"20001230\\\",\\\"YYYYMMDD\\\").fromNow()}));\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":null,\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/7725b6ae2e5f457bed4150c081fe6cca2acdf495-moment.min.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{}},\"children\":[{\"props\":{\"id\":\"humantime\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"span\"},\"children\":[\"<loading moment>\"]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"17959802266582396073\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"(div\n",
" \"Cassini flew by Jupiter \"\n",
" (span { id=\"humantime\" }\n",
" \"<loading moment>\"))"
]
},
"execution_count": 134,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"node(:div, \"Cassini flew by Jupiter \", fromnow(\"20001230\"))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Interact.jl"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## `@manipulate` macro\n",
"\n",
"Very handy if you know you want to twiddle with something very simple. Not ideal for customizing look and feel or complicated interactions.\n",
"\n",
"The syntax is simple:"
]
},
{
"cell_type": "code",
"execution_count": 140,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"children": [
"f"
],
"instanceArgs": {
"namespace": "html",
"tag": "label"
},
"nodeType": "DOM",
"props": {
"className": "interact ",
"style": {
"padding": "5px 10px 0px 10px"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-left"
},
"type": "node"
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "label"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "text : key"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "span"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "click: function (){$root.update(val)}, css: {'is-primary is-selected' : $root.index() == val, 'interact-widget is-medium button ' : true}"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "foreach : options_js"
},
"className": "buttons has-addons is-centered"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-center"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-right"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row interact-widget"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"index": [
"(function (val){return (val!=this.model[\"index\"]()) ? (this.valueFromJulia[\"index\"]=true, this.model[\"index\"](val)) : undefined})"
],
"options_js": [
"(function (val){return (val!=this.model[\"options_js\"]()) ? (this.valueFromJulia[\"options_js\"]=true, this.model[\"options_js\"](val)) : undefined})"
]
},
"id": "6083925807642789398",
"imports": {
"data": [
{
"name": "knockout",
"type": "js",
"url": "/assetserver/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js"
},
{
"name": "knockout_punches",
"type": "js",
"url": "/assetserver/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js"
},
{
"name": null,
"type": "js",
"url": "/assetserver/fd342c95c6b542a2ab29ad43937683e5d4bbd9b2-all.js"
},
{
"name": null,
"type": "css",
"url": "/assetserver/e724d2e59c10a05e8154eb2538ac3a12a97e0536-style.css"
},
{
"name": null,
"type": "css",
"url": "/assetserver/773faa13090337de1aa44e713fea3a818cb60fc7-bulma_confined.min.css"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = (function (ko, koPunches) {\n ko.punches.enableAll();\n ko.bindingHandlers.numericValue = {\n init: function(element, valueAccessor, allBindings, data, context) {\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\n stringified.subscribe(function(value) {\n var val = parseFloat(value);\n if (!isNaN(val)) {\n valueAccessor()(val);\n }\n });\n valueAccessor().subscribe(function(value) {\n var str = JSON.stringify(value);\n if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n return;\n if ([\"null\", \"\"].indexOf(str) >= 0)\n return;\n stringified(str);\n });\n ko.applyBindingsToNode(\n element,\n {\n value: stringified,\n valueUpdate: allBindings.get('valueUpdate'),\n },\n context,\n );\n }\n };\n var json_data = {\"options_js\":WebIO.getval({\"name\":\"options_js\",\"scope\":\"6083925807642789398\",\"id\":\"ob_78\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"6083925807642789398\",\"id\":\"ob_77\",\"type\":\"observable\"})};\n var self = this;\n function AppViewModel() {\n for (var key in json_data) {\n var el = json_data[key];\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n }\n [this[\"update\"]=function (val) {this.index(val)}]\n \n [this[\"options_js\"].subscribe((function (val){!(this.valueFromJulia[\"options_js\"]) ? (WebIO.setval({\"name\":\"options_js\",\"scope\":\"6083925807642789398\",\"id\":\"ob_78\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"options_js\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"6083925807642789398\",\"id\":\"ob_77\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"index\"]=false}),self)]\n \n }\n self.model = new AppViewModel();\n self.valueFromJulia = {};\n for (var key in json_data) {\n self.valueFromJulia[key] = false;\n }\n ko.applyBindings(self.model, self.dom);\n}\n);\n (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {
"index": {
"id": "ob_77",
"sync": true,
"value": 1
},
"options_js": {
"id": "ob_78",
"sync": false,
"value": [
{
"id": "idTQoIYdM5",
"key": "sin",
"val": 1
},
{
"id": "id4tE0cwO5",
"key": "cos",
"val": 2
},
{
"id": "idyeV0U2Rd",
"key": "tan",
"val": 3
}
]
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-widget"
},
"type": "node"
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"children": [
"ϕ"
],
"instanceArgs": {
"namespace": "html",
"tag": "label"
},
"nodeType": "DOM",
"props": {
"className": "interact ",
"style": {
"padding": "5px 10px 0px 10px"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-left"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-center"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "p"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "text: formatted_val"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-right"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row interact-widget"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"changes": [
"(function (val){return (val!=this.model[\"changes\"]()) ? (this.valueFromJulia[\"changes\"]=true, this.model[\"changes\"](val)) : undefined})"
],
"index": [
"(function (val){return (val!=this.model[\"index\"]()) ? (this.valueFromJulia[\"index\"]=true, this.model[\"index\"](val)) : undefined})"
]
},
"id": "4398754796527860844",
"imports": {
"data": [
{
"name": "knockout",
"type": "js",
"url": "/assetserver/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js"
},
{
"name": "knockout_punches",
"type": "js",
"url": "/assetserver/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js"
},
{
"name": null,
"type": "js",
"url": "/assetserver/fd342c95c6b542a2ab29ad43937683e5d4bbd9b2-all.js"
},
{
"name": null,
"type": "css",
"url": "/assetserver/e724d2e59c10a05e8154eb2538ac3a12a97e0536-style.css"
},
{
"name": null,
"type": "css",
"url": "/assetserver/773faa13090337de1aa44e713fea3a818cb60fc7-bulma_confined.min.css"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = (function (ko, koPunches) {\n ko.punches.enableAll();\n ko.bindingHandlers.numericValue = {\n init: function(element, valueAccessor, allBindings, data, context) {\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\n stringified.subscribe(function(value) {\n var val = parseFloat(value);\n if (!isNaN(val)) {\n valueAccessor()(val);\n }\n });\n valueAccessor().subscribe(function(value) {\n var str = JSON.stringify(value);\n if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n return;\n if ([\"null\", \"\"].indexOf(str) >= 0)\n return;\n stringified(str);\n });\n ko.applyBindingsToNode(\n element,\n {\n value: stringified,\n valueUpdate: allBindings.get('valueUpdate'),\n },\n context,\n );\n }\n };\n var json_data = {\"formatted_vals\":[\"0.0\",\"0.05\",\"0.1\",\"0.15\",\"0.2\",\"0.25\",\"0.3\",\"0.35\",\"0.4\",\"0.45\",\"0.5\",\"0.55\",\"0.6\",\"0.65\",\"0.7\",\"0.75\",\"0.8\",\"0.85\",\"0.9\",\"0.95\",\"1.0\",\"1.05\",\"1.1\",\"1.15\",\"1.2\",\"1.25\",\"1.3\",\"1.35\",\"1.4\",\"1.45\",\"1.5\",\"1.55\",\"1.6\",\"1.65\",\"1.7\",\"1.75\",\"1.8\",\"1.85\",\"1.9\",\"1.95\",\"2.0\",\"2.05\",\"2.1\",\"2.15\",\"2.2\",\"2.25\",\"2.3\",\"2.35\",\"2.4\",\"2.45\",\"2.5\",\"2.55\",\"2.6\",\"2.65\",\"2.7\",\"2.75\",\"2.8\",\"2.85\",\"2.9\",\"2.95\",\"3.0\",\"3.05\",\"3.1\",\"3.15\",\"3.2\",\"3.25\",\"3.3\",\"3.35\",\"3.4\",\"3.45\",\"3.5\",\"3.55\",\"3.6\",\"3.65\",\"3.7\",\"3.75\",\"3.8\",\"3.85\",\"3.9\",\"3.95\",\"4.0\",\"4.05\",\"4.1\",\"4.15\",\"4.2\",\"4.25\",\"4.3\",\"4.35\",\"4.4\",\"4.45\",\"4.5\",\"4.55\",\"4.6\",\"4.65\",\"4.7\",\"4.75\",\"4.8\",\"4.85\",\"4.9\",\"4.95\",\"5.0\",\"5.05\",\"5.1\",\"5.15\",\"5.2\",\"5.25\",\"5.3\",\"5.35\",\"5.4\",\"5.45\",\"5.5\",\"5.55\",\"5.6\",\"5.65\",\"5.7\",\"5.75\",\"5.8\",\"5.85\",\"5.9\",\"5.95\",\"6.0\",\"6.05\",\"6.1\",\"6.15\",\"6.2\",\"6.25\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"4398754796527860844\",\"id\":\"ob_81\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"4398754796527860844\",\"id\":\"ob_80\",\"type\":\"observable\"})};\n var self = this;\n function AppViewModel() {\n for (var key in json_data) {\n var el = json_data[key];\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n }\n \n [this[\"formatted_val\"]=ko.computed( function(){\n return this.formatted_vals()[parseInt(this.index())-(1)];\n }\n,this)]\n [this[\"changes\"].subscribe((function (val){!(this.valueFromJulia[\"changes\"]) ? (WebIO.setval({\"name\":\"changes\",\"scope\":\"4398754796527860844\",\"id\":\"ob_81\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"4398754796527860844\",\"id\":\"ob_80\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"index\"]=false}),self)]\n \n }\n self.model = new AppViewModel();\n self.valueFromJulia = {};\n for (var key in json_data) {\n self.valueFromJulia[key] = false;\n }\n ko.applyBindings(self.model, self.dom);\n}\n);\n (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {
"changes": {
"id": "ob_81",
"sync": false,
"value": 0
},
"index": {
"id": "ob_80",
"sync": true,
"value": 63
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "field interact-widget"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"id": "ob_87",
"name": "obs-node"
},
"nodeType": "ObservableNode",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"handlers": {},
"id": "10791015728500222133",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"obs-node": {
"id": "ob_87",
"sync": false,
"value": {
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"setInnerHtml": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"600\" height=\"400\" viewBox=\"0 0 2400 1600\">\n<defs>\n <clipPath id=\"clip8400\">\n <rect x=\"0\" y=\"0\" width=\"2400\" height=\"1600\"/>\n </clipPath>\n</defs>\n<path clip-path=\"url(#clip8400)\" d=\"\nM0 1600 L2400 1600 L2400 0 L0 0 Z\n \" fill=\"#ffffff\" fill-rule=\"evenodd\" fill-opacity=\"1\"/>\n<defs>\n <clipPath id=\"clip8401\">\n <rect x=\"480\" y=\"0\" width=\"1681\" height=\"1600\"/>\n </clipPath>\n</defs>\n<path clip-path=\"url(#clip8400)\" d=\"\nM182.008 1487.47 L2352.76 1487.47 L2352.76 47.2441 L182.008 47.2441 Z\n \" fill=\"#ffffff\" fill-rule=\"evenodd\" fill-opacity=\"1\"/>\n<defs>\n <clipPath id=\"clip8402\">\n <rect x=\"182\" y=\"47\" width=\"2172\" height=\"1441\"/>\n </clipPath>\n</defs>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 243.444,1487.47 243.444,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 569.799,1487.47 569.799,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 896.154,1487.47 896.154,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 1222.51,1487.47 1222.51,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 1548.86,1487.47 1548.86,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 1875.22,1487.47 1875.22,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 2201.57,1487.47 2201.57,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,1446.72 2352.76,1446.72 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,1107.04 2352.76,1107.04 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,767.36 2352.76,767.36 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,427.68 2352.76,427.68 \n \"/>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,88 2352.76,88 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1487.47 2352.76,1487.47 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1487.47 182.008,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 243.444,1487.47 243.444,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 569.799,1487.47 569.799,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 896.154,1487.47 896.154,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 1222.51,1487.47 1222.51,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 1548.86,1487.47 1548.86,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 1875.22,1487.47 1875.22,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 2201.57,1487.47 2201.57,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1446.72 208.057,1446.72 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1107.04 208.057,1107.04 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,767.36 208.057,767.36 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,427.68 208.057,427.68 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,88 208.057,88 \n \"/>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 243.444, 1541.47)\" x=\"243.444\" y=\"1541.47\">0</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 569.799, 1541.47)\" x=\"569.799\" y=\"1541.47\">2</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 896.154, 1541.47)\" x=\"896.154\" y=\"1541.47\">4</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 1222.51, 1541.47)\" x=\"1222.51\" y=\"1541.47\">6</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 1548.86, 1541.47)\" x=\"1548.86\" y=\"1541.47\">8</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 1875.22, 1541.47)\" x=\"1875.22\" y=\"1541.47\">10</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 2201.57, 1541.47)\" x=\"2201.57\" y=\"1541.47\">12</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 1464.22)\" x=\"158.008\" y=\"1464.22\">-1.0</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 1124.54)\" x=\"158.008\" y=\"1124.54\">-0.5</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 784.86)\" x=\"158.008\" y=\"784.86\">0.0</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 445.18)\" x=\"158.008\" y=\"445.18\">0.5</text>\n</g>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 105.5)\" x=\"158.008\" y=\"105.5\">1.0</text>\n</g>\n<polyline clip-path=\"url(#clip8402)\" style=\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 243.444,739.112 251.603,773.072 259.762,807.017 267.921,840.864 276.08,874.526 284.239,907.921 292.398,940.964 300.556,973.574 308.715,1005.67 316.874,1037.17 \n 325.033,1067.99 333.192,1098.06 341.351,1127.31 349.51,1155.66 357.668,1183.03 365.827,1209.37 373.986,1234.6 382.145,1258.67 390.304,1281.5 398.463,1303.05 \n 406.622,1323.26 414.781,1342.09 422.939,1359.47 431.098,1375.38 439.257,1389.77 447.416,1402.6 455.575,1413.84 463.734,1423.47 471.893,1431.45 480.051,1437.78 \n 488.21,1442.43 496.369,1445.4 504.528,1446.67 512.687,1446.24 520.846,1444.11 529.005,1440.3 537.163,1434.8 545.322,1427.63 553.481,1418.81 561.64,1408.37 \n 569.799,1396.32 577.958,1382.7 586.117,1367.54 594.276,1350.89 602.434,1332.77 610.593,1313.24 618.752,1292.35 626.911,1270.14 635.07,1246.68 643.229,1222.01 \n 651.388,1196.22 659.546,1169.35 667.705,1141.47 675.864,1112.66 684.023,1082.99 692.182,1052.53 700.341,1021.36 708.5,989.548 716.659,957.184 724.817,924.345 \n 732.976,891.114 741.135,857.574 749.294,823.808 757.453,789.901 765.612,755.937 773.771,722.003 781.929,688.181 790.088,654.558 798.247,621.216 806.406,588.24 \n 814.565,555.711 822.724,523.712 830.883,492.321 839.042,461.618 847.2,431.679 855.359,402.579 863.518,374.391 871.677,347.185 879.836,321.03 887.995,295.989 \n 896.154,272.128 904.312,249.503 912.471,228.174 920.63,208.192 928.789,189.607 936.948,172.467 945.107,156.814 953.266,142.686 961.425,130.12 969.583,119.147 \n 977.742,109.794 985.901,102.085 994.06,96.038 1002.22,91.6693 1010.38,88.9895 1018.54,88.0053 1026.7,88.7192 1034.85,91.1292 1043.01,95.2295 1051.17,101.01 \n 1059.33,108.456 1067.49,117.548 1075.65,128.265 1083.81,140.58 1091.97,154.461 1100.13,169.873 1108.28,186.78 1116.44,205.137 1124.6,224.9 1132.76,246.018 \n 1140.92,268.44 1149.08,292.109 1157.24,316.965 1165.4,342.948 1173.56,369.991 1181.71,398.027 1189.87,426.986 1198.03,456.797 1206.19,487.383 1214.35,518.669 \n 1222.51,550.577 1230.67,583.027 1238.83,615.938 1246.98,649.226 1255.14,682.811 1263.3,716.606 1271.46,750.529 1279.62,784.493 1287.78,818.415 1295.94,852.209 \n 1304.1,885.791 1312.26,919.077 1320.41,951.983 1328.57,984.429 1336.73,1016.33 1344.89,1047.61 1353.05,1078.19 1361.21,1107.99 1369.37,1136.95 1377.53,1164.97 \n 1385.69,1192.01 1393.84,1217.98 1402,1242.83 1410.16,1266.48 1418.32,1288.9 1426.48,1310 1434.64,1329.75 1442.8,1348.1 1450.96,1364.99 1459.12,1380.39 \n 1467.27,1394.26 1475.43,1406.56 1483.59,1417.26 1491.75,1426.34 1499.91,1433.77 1508.07,1439.53 1516.23,1443.62 1524.39,1446.01 1532.55,1446.71 1540.7,1445.71 \n 1548.86,1443.02 1557.02,1438.64 1565.18,1432.57 1573.34,1424.85 1581.5,1415.48 1589.66,1404.5 1597.82,1391.92 1605.97,1377.77 1614.13,1362.11 1622.29,1344.95 \n 1630.45,1326.36 1638.61,1306.36 1646.77,1285.02 1654.93,1262.39 1663.09,1238.51 1671.25,1213.46 1679.4,1187.3 1687.56,1160.08 1695.72,1131.89 1703.88,1102.78 \n 1712.04,1072.83 1720.2,1042.12 1728.36,1010.73 1736.52,978.722 1744.68,946.189 1752.83,913.209 1760.99,879.865 1769.15,846.239 1777.31,812.416 1785.47,778.481 \n 1793.63,744.518 1801.79,710.612 1809.95,676.848 1818.11,643.309 1826.26,610.082 1834.42,577.247 1842.58,544.887 1850.74,513.083 1858.9,481.915 1867.06,451.461 \n 1875.22,421.796 1883.38,392.994 1891.54,365.129 1899.69,338.269 1907.85,312.481 1916.01,287.83 1924.17,264.378 1932.33,242.183 1940.49,221.301 1948.65,201.784 \n 1956.81,183.68 1964.97,167.035 1973.12,151.891 1981.28,138.285 1989.44,126.251 1997.6,115.82 2005.76,107.017 2013.92,99.8647 2022.08,94.3809 2030.24,90.5792 \n 2038.39,88.4691 2046.55,88.0559 2054.71,89.3406 2062.87,92.3199 2071.03,96.9866 2079.19,103.329 2087.35,111.331 2095.51,120.972 2103.67,132.23 2111.82,145.074 \n 2119.98,159.475 2128.14,175.394 2136.3,192.793 2144.46,211.629 2152.62,231.853 2160.78,253.416 2168.94,276.263 2177.1,300.338 2185.25,325.58 2193.41,351.927 \n 2201.57,379.312 2209.73,407.666 2217.89,436.92 2226.05,467 2234.21,497.83 2242.37,529.334 2250.53,561.434 2258.68,594.047 2266.84,627.094 2275,660.492 \n 2283.16,694.157 2291.32,728.004 \n \"/>\n<path clip-path=\"url(#clip8400)\" d=\"\nM1989.93 251.724 L2280.76 251.724 L2280.76 130.764 L1989.93 130.764 Z\n \" fill=\"#ffffff\" fill-rule=\"evenodd\" fill-opacity=\"1\"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 1989.93,251.724 2280.76,251.724 2280.76,130.764 1989.93,130.764 1989.93,251.724 \n \"/>\n<polyline clip-path=\"url(#clip8400)\" style=\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 2013.93,191.244 2157.93,191.244 \n \"/>\n<g clip-path=\"url(#clip8400)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:start;\" transform=\"rotate(0, 2181.93, 208.744)\" x=\"2181.93\" y=\"208.744\">y1</text>\n</g>\n</svg>\n"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row interact-widget"
},
"type": "node"
}
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"8030639635149409360\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"8030639635149409360\"]'),\n",
" {\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/fd342c95c6b542a2ab29ad43937683e5d4bbd9b2-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/e724d2e59c10a05e8154eb2538ac3a12a97e0536-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/773faa13090337de1aa44e713fea3a818cb60fc7-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"6083925807642789398\",\"handlers\":{\"options_js\":[\"(function (val){return (val!=this.model[\\\"options_js\\\"]()) ? (this.valueFromJulia[\\\"options_js\\\"]=true, this.model[\\\"options_js\\\"](val)) : undefined})\"],\"index\":[\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"options_js\\\":WebIO.getval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_78\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_77\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n [this[\\\"update\\\"]=function (val) {this.index(val)}]\\n \\n [this[\\\"options_js\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"options_js\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_78\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"options_js\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_77\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"options_js\":{\"sync\":false,\"id\":\"ob_78\",\"value\":[{\"key\":\"sin\",\"val\":1,\"id\":\"idTQoIYdM5\"},{\"key\":\"cos\",\"val\":2,\"id\":\"id4tE0cwO5\"},{\"key\":\"tan\",\"val\":3,\"id\":\"idyeV0U2Rd\"}]},\"index\":{\"sync\":true,\"id\":\"ob_77\",\"value\":1}}},\"children\":[{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact-flex-row-left\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact \",\"style\":{\"padding\":\"5px 10px 0px 10px\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[\"f\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"foreach : options_js\"},\"className\":\"buttons has-addons is-centered\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"click: function (){$root.update(val)}, css: {'is-primary is-selected' : $root.index() == val, 'interact-widget is-medium button ' : true}\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"span\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"text : key\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[]}]}]}]},{\"props\":{\"className\":\"interact-flex-row-right\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]}]}]},{\"props\":{\"className\":\"field interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/fd342c95c6b542a2ab29ad43937683e5d4bbd9b2-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/e724d2e59c10a05e8154eb2538ac3a12a97e0536-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/773faa13090337de1aa44e713fea3a818cb60fc7-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"4398754796527860844\",\"handlers\":{\"changes\":[\"(function (val){return (val!=this.model[\\\"changes\\\"]()) ? (this.valueFromJulia[\\\"changes\\\"]=true, this.model[\\\"changes\\\"](val)) : undefined})\"],\"index\":[\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"formatted_vals\\\":[\\\"0.0\\\",\\\"0.05\\\",\\\"0.1\\\",\\\"0.15\\\",\\\"0.2\\\",\\\"0.25\\\",\\\"0.3\\\",\\\"0.35\\\",\\\"0.4\\\",\\\"0.45\\\",\\\"0.5\\\",\\\"0.55\\\",\\\"0.6\\\",\\\"0.65\\\",\\\"0.7\\\",\\\"0.75\\\",\\\"0.8\\\",\\\"0.85\\\",\\\"0.9\\\",\\\"0.95\\\",\\\"1.0\\\",\\\"1.05\\\",\\\"1.1\\\",\\\"1.15\\\",\\\"1.2\\\",\\\"1.25\\\",\\\"1.3\\\",\\\"1.35\\\",\\\"1.4\\\",\\\"1.45\\\",\\\"1.5\\\",\\\"1.55\\\",\\\"1.6\\\",\\\"1.65\\\",\\\"1.7\\\",\\\"1.75\\\",\\\"1.8\\\",\\\"1.85\\\",\\\"1.9\\\",\\\"1.95\\\",\\\"2.0\\\",\\\"2.05\\\",\\\"2.1\\\",\\\"2.15\\\",\\\"2.2\\\",\\\"2.25\\\",\\\"2.3\\\",\\\"2.35\\\",\\\"2.4\\\",\\\"2.45\\\",\\\"2.5\\\",\\\"2.55\\\",\\\"2.6\\\",\\\"2.65\\\",\\\"2.7\\\",\\\"2.75\\\",\\\"2.8\\\",\\\"2.85\\\",\\\"2.9\\\",\\\"2.95\\\",\\\"3.0\\\",\\\"3.05\\\",\\\"3.1\\\",\\\"3.15\\\",\\\"3.2\\\",\\\"3.25\\\",\\\"3.3\\\",\\\"3.35\\\",\\\"3.4\\\",\\\"3.45\\\",\\\"3.5\\\",\\\"3.55\\\",\\\"3.6\\\",\\\"3.65\\\",\\\"3.7\\\",\\\"3.75\\\",\\\"3.8\\\",\\\"3.85\\\",\\\"3.9\\\",\\\"3.95\\\",\\\"4.0\\\",\\\"4.05\\\",\\\"4.1\\\",\\\"4.15\\\",\\\"4.2\\\",\\\"4.25\\\",\\\"4.3\\\",\\\"4.35\\\",\\\"4.4\\\",\\\"4.45\\\",\\\"4.5\\\",\\\"4.55\\\",\\\"4.6\\\",\\\"4.65\\\",\\\"4.7\\\",\\\"4.75\\\",\\\"4.8\\\",\\\"4.85\\\",\\\"4.9\\\",\\\"4.95\\\",\\\"5.0\\\",\\\"5.05\\\",\\\"5.1\\\",\\\"5.15\\\",\\\"5.2\\\",\\\"5.25\\\",\\\"5.3\\\",\\\"5.35\\\",\\\"5.4\\\",\\\"5.45\\\",\\\"5.5\\\",\\\"5.55\\\",\\\"5.6\\\",\\\"5.65\\\",\\\"5.7\\\",\\\"5.75\\\",\\\"5.8\\\",\\\"5.85\\\",\\\"5.9\\\",\\\"5.95\\\",\\\"6.0\\\",\\\"6.05\\\",\\\"6.1\\\",\\\"6.15\\\",\\\"6.2\\\",\\\"6.25\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_81\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_80\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n \\n [this[\\\"formatted_val\\\"]=ko.computed( function(){\\n return this.formatted_vals()[parseInt(this.index())-(1)];\\n }\\n,this)]\\n [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_81\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_80\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_81\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_80\",\"value\":63}}},\"children\":[{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact-flex-row-left\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact \",\"style\":{\"padding\":\"5px 10px 0px 10px\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[\"ϕ\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},{\"props\":{\"className\":\"interact-flex-row-right\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"text: formatted_val\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"p\"},\"children\":[]}]}]}]}]},{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"17133837661144886022\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-node\":{\"sync\":false,\"id\":\"ob_85\",\"value\":{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"setInnerHtml\":\"<?xml version=\\\"1.0\\\" encoding=\\\"utf-8\\\"?>\\n<svg xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\" xmlns:xlink=\\\"http:\\/\\/www.w3.org\\/1999\\/xlink\\\" width=\\\"600\\\" height=\\\"400\\\" viewBox=\\\"0 0 2400 1600\\\">\\n<defs>\\n <clipPath id=\\\"clip8000\\\">\\n <rect x=\\\"0\\\" y=\\\"0\\\" width=\\\"2400\\\" height=\\\"1600\\\"\\/>\\n <\\/clipPath>\\n<\\/defs>\\n<path clip-path=\\\"url(#clip8000)\\\" d=\\\"\\nM0 1600 L2400 1600 L2400 0 L0 0 Z\\n \\\" fill=\\\"#ffffff\\\" fill-rule=\\\"evenodd\\\" fill-opacity=\\\"1\\\"\\/>\\n<defs>\\n <clipPath id=\\\"clip8001\\\">\\n <rect x=\\\"480\\\" y=\\\"0\\\" width=\\\"1681\\\" height=\\\"1600\\\"\\/>\\n <\\/clipPath>\\n<\\/defs>\\n<path clip-path=\\\"url(#clip8000)\\\" d=\\\"\\nM182.008 1487.47 L2352.76 1487.47 L2352.76 47.2441 L182.008 47.2441 Z\\n \\\" fill=\\\"#ffffff\\\" fill-rule=\\\"evenodd\\\" fill-opacity=\\\"1\\\"\\/>\\n<defs>\\n <clipPath id=\\\"clip8002\\\">\\n <rect x=\\\"182\\\" y=\\\"47\\\" width=\\\"2172\\\" height=\\\"1441\\\"\\/>\\n <\\/clipPath>\\n<\\/defs>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 243.444,1487.47 243.444,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 569.799,1487.47 569.799,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 896.154,1487.47 896.154,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 1222.51,1487.47 1222.51,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 1548.86,1487.47 1548.86,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 1875.22,1487.47 1875.22,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 2201.57,1487.47 2201.57,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,1446.72 2352.76,1446.72 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,1107.04 2352.76,1107.04 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,767.36 2352.76,767.36 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,427.68 2352.76,427.68 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,88 2352.76,88 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1487.47 2352.76,1487.47 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1487.47 182.008,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 243.444,1487.47 243.444,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 569.799,1487.47 569.799,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 896.154,1487.47 896.154,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 1222.51,1487.47 1222.51,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 1548.86,1487.47 1548.86,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 1875.22,1487.47 1875.22,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 2201.57,1487.47 2201.57,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1446.72 208.057,1446.72 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1107.04 208.057,1107.04 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,767.36 208.057,767.36 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,427.68 208.057,427.68 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,88 208.057,88 \\n \\\"\\/>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 243.444, 1541.47)\\\" x=\\\"243.444\\\" y=\\\"1541.47\\\">0<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 569.799, 1541.47)\\\" x=\\\"569.799\\\" y=\\\"1541.47\\\">2<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 896.154, 1541.47)\\\" x=\\\"896.154\\\" y=\\\"1541.47\\\">4<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 1222.51, 1541.47)\\\" x=\\\"1222.51\\\" y=\\\"1541.47\\\">6<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 1548.86, 1541.47)\\\" x=\\\"1548.86\\\" y=\\\"1541.47\\\">8<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 1875.22, 1541.47)\\\" x=\\\"1875.22\\\" y=\\\"1541.47\\\">10<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 2201.57, 1541.47)\\\" x=\\\"2201.57\\\" y=\\\"1541.47\\\">12<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 1464.22)\\\" x=\\\"158.008\\\" y=\\\"1464.22\\\">-1.0<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 1124.54)\\\" x=\\\"158.008\\\" y=\\\"1124.54\\\">-0.5<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 784.86)\\\" x=\\\"158.008\\\" y=\\\"784.86\\\">0.0<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 445.18)\\\" x=\\\"158.008\\\" y=\\\"445.18\\\">0.5<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 105.5)\\\" x=\\\"158.008\\\" y=\\\"105.5\\\">1.0<\\/text>\\n<\\/g>\\n<polyline clip-path=\\\"url(#clip8002)\\\" style=\\\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 243.444,739.112 251.603,773.072 259.762,807.017 267.921,840.864 276.08,874.526 284.239,907.921 292.398,940.964 300.556,973.574 308.715,1005.67 316.874,1037.17 \\n 325.033,1067.99 333.192,1098.06 341.351,1127.31 349.51,1155.66 357.668,1183.03 365.827,1209.37 373.986,1234.6 382.145,1258.67 390.304,1281.5 398.463,1303.05 \\n 406.622,1323.26 414.781,1342.09 422.939,1359.47 431.098,1375.38 439.257,1389.77 447.416,1402.6 455.575,1413.84 463.734,1423.47 471.893,1431.45 480.051,1437.78 \\n 488.21,1442.43 496.369,1445.4 504.528,1446.67 512.687,1446.24 520.846,1444.11 529.005,1440.3 537.163,1434.8 545.322,1427.63 553.481,1418.81 561.64,1408.37 \\n 569.799,1396.32 577.958,1382.7 586.117,1367.54 594.276,1350.89 602.434,1332.77 610.593,1313.24 618.752,1292.35 626.911,1270.14 635.07,1246.68 643.229,1222.01 \\n 651.388,1196.22 659.546,1169.35 667.705,1141.47 675.864,1112.66 684.023,1082.99 692.182,1052.53 700.341,1021.36 708.5,989.548 716.659,957.184 724.817,924.345 \\n 732.976,891.114 741.135,857.574 749.294,823.808 757.453,789.901 765.612,755.937 773.771,722.003 781.929,688.181 790.088,654.558 798.247,621.216 806.406,588.24 \\n 814.565,555.711 822.724,523.712 830.883,492.321 839.042,461.618 847.2,431.679 855.359,402.579 863.518,374.391 871.677,347.185 879.836,321.03 887.995,295.989 \\n 896.154,272.128 904.312,249.503 912.471,228.174 920.63,208.192 928.789,189.607 936.948,172.467 945.107,156.814 953.266,142.686 961.425,130.12 969.583,119.147 \\n 977.742,109.794 985.901,102.085 994.06,96.038 1002.22,91.6693 1010.38,88.9895 1018.54,88.0053 1026.7,88.7192 1034.85,91.1292 1043.01,95.2295 1051.17,101.01 \\n 1059.33,108.456 1067.49,117.548 1075.65,128.265 1083.81,140.58 1091.97,154.461 1100.13,169.873 1108.28,186.78 1116.44,205.137 1124.6,224.9 1132.76,246.018 \\n 1140.92,268.44 1149.08,292.109 1157.24,316.965 1165.4,342.948 1173.56,369.991 1181.71,398.027 1189.87,426.986 1198.03,456.797 1206.19,487.383 1214.35,518.669 \\n 1222.51,550.577 1230.67,583.027 1238.83,615.938 1246.98,649.226 1255.14,682.811 1263.3,716.606 1271.46,750.529 1279.62,784.493 1287.78,818.415 1295.94,852.209 \\n 1304.1,885.791 1312.26,919.077 1320.41,951.983 1328.57,984.429 1336.73,1016.33 1344.89,1047.61 1353.05,1078.19 1361.21,1107.99 1369.37,1136.95 1377.53,1164.97 \\n 1385.69,1192.01 1393.84,1217.98 1402,1242.83 1410.16,1266.48 1418.32,1288.9 1426.48,1310 1434.64,1329.75 1442.8,1348.1 1450.96,1364.99 1459.12,1380.39 \\n 1467.27,1394.26 1475.43,1406.56 1483.59,1417.26 1491.75,1426.34 1499.91,1433.77 1508.07,1439.53 1516.23,1443.62 1524.39,1446.01 1532.55,1446.71 1540.7,1445.71 \\n 1548.86,1443.02 1557.02,1438.64 1565.18,1432.57 1573.34,1424.85 1581.5,1415.48 1589.66,1404.5 1597.82,1391.92 1605.97,1377.77 1614.13,1362.11 1622.29,1344.95 \\n 1630.45,1326.36 1638.61,1306.36 1646.77,1285.02 1654.93,1262.39 1663.09,1238.51 1671.25,1213.46 1679.4,1187.3 1687.56,1160.08 1695.72,1131.89 1703.88,1102.78 \\n 1712.04,1072.83 1720.2,1042.12 1728.36,1010.73 1736.52,978.722 1744.68,946.189 1752.83,913.209 1760.99,879.865 1769.15,846.239 1777.31,812.416 1785.47,778.481 \\n 1793.63,744.518 1801.79,710.612 1809.95,676.848 1818.11,643.309 1826.26,610.082 1834.42,577.247 1842.58,544.887 1850.74,513.083 1858.9,481.915 1867.06,451.461 \\n 1875.22,421.796 1883.38,392.994 1891.54,365.129 1899.69,338.269 1907.85,312.481 1916.01,287.83 1924.17,264.378 1932.33,242.183 1940.49,221.301 1948.65,201.784 \\n 1956.81,183.68 1964.97,167.035 1973.12,151.891 1981.28,138.285 1989.44,126.251 1997.6,115.82 2005.76,107.017 2013.92,99.8647 2022.08,94.3809 2030.24,90.5792 \\n 2038.39,88.4691 2046.55,88.0559 2054.71,89.3406 2062.87,92.3199 2071.03,96.9866 2079.19,103.329 2087.35,111.331 2095.51,120.972 2103.67,132.23 2111.82,145.074 \\n 2119.98,159.475 2128.14,175.394 2136.3,192.793 2144.46,211.629 2152.62,231.853 2160.78,253.416 2168.94,276.263 2177.1,300.338 2185.25,325.58 2193.41,351.927 \\n 2201.57,379.312 2209.73,407.666 2217.89,436.92 2226.05,467 2234.21,497.83 2242.37,529.334 2250.53,561.434 2258.68,594.047 2266.84,627.094 2275,660.492 \\n 2283.16,694.157 2291.32,728.004 \\n \\\"\\/>\\n<path clip-path=\\\"url(#clip8000)\\\" d=\\\"\\nM1989.93 251.724 L2280.76 251.724 L2280.76 130.764 L1989.93 130.764 Z\\n \\\" fill=\\\"#ffffff\\\" fill-rule=\\\"evenodd\\\" fill-opacity=\\\"1\\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 1989.93,251.724 2280.76,251.724 2280.76,130.764 1989.93,130.764 1989.93,251.724 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip8000)\\\" style=\\\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 2013.93,191.244 2157.93,191.244 \\n \\\"\\/>\\n<g clip-path=\\\"url(#clip8000)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:start;\\\" transform=\\\"rotate(0, 2181.93, 208.744)\\\" x=\\\"2181.93\\\" y=\\\"208.744\\\">y1<\\/text>\\n<\\/g>\\n<\\/svg>\\n\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}}}},\"children\":[{\"props\":{},\"nodeType\":\"ObservableNode\",\"type\":\"node\",\"instanceArgs\":{\"id\":\"ob_85\",\"name\":\"obs-node\"},\"children\":[]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"8030639635149409360\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :label), Any[\"f\"], Dict{Symbol,Any}(:className => \"interact \",:style => Dict{Any,Any}(:padding => \"5px 10px 0px 10px\")))], Dict{Symbol,Any}(:className => \"interact-flex-row-left\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :span), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :label), Any[], Dict{Symbol,Any}(:attributes => Dict(\"data-bind\" => \"text : key\")))], Dict{Symbol,Any}(:attributes => Dict(\"data-bind\" => \"click: function (){\\$root.update(val)}, css: {'is-primary is-selected' : \\$root.index() == val, 'interact-widget is-medium button ' : true}\")))], Dict{Symbol,Any}(:attributes => (\"data-bind\" => \"foreach : options_js\"),:className => \"buttons has-addons is-centered\"))], Dict{Symbol,Any}(:className => \"interact-flex-row-center\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[], Dict{Symbol,Any}())], Dict{Symbol,Any}(:className => \"interact-flex-row-right\"))], Dict{Symbol,Any}(:className => \"interact-flex-row interact-widget\")), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"options_js\" => (Observable{Any} with 1 listeners. Value:\n",
"OrderedDict[OrderedDict{String,Any}(\"key\" => \"sin\",\"val\" => 1,\"id\" => \"idTQoIYdM5\"), OrderedDict{String,Any}(\"key\" => \"cos\",\"val\" => 2,\"id\" => \"id4tE0cwO5\"), OrderedDict{String,Any}(\"key\" => \"tan\",\"val\" => 3,\"id\" => \"idyeV0U2Rd\")], nothing),\"index\" => (Observable{Any} with 2 listeners. Value:\n",
"1, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/shashi/.julia/packages/Knockout/1sDlc/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/shashi/.julia/packages/Knockout/1sDlc/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/shashi/.julia/packages/InteractBase/9mFwe/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/shashi/.julia/packages/InteractBase/9mFwe/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/shashi/.julia/dev/Interact/src/../assets/bulma_confined.min.css\")], Dict{Any,Any}(\"options_js\" => Any[JSString(\"(function (val){return (val!=this.model[\\\"options_js\\\"]()) ? (this.valueFromJulia[\\\"options_js\\\"]=true, this.model[\\\"options_js\\\"](val)) : undefined})\")],\"index\" => Any[JSString(\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\")]), WebIO.ConnectionPool(Any[], Set(AbstractConnection[])), JSString[JSString(\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"options_js\\\":WebIO.getval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_78\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_77\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n [this[\\\"update\\\"]=function (val) {this.index(val)}]\\n \\n [this[\\\"options_js\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"options_js\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_78\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"options_js\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"6083925807642789398\\\",\\\"id\\\":\\\"ob_77\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className => \"interact-widget\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :label), Any[\"ϕ\"], Dict{Symbol,Any}(:className => \"interact \",:style => Dict{Any,Any}(:padding => \"5px 10px 0px 10px\")))], Dict{Symbol,Any}(:className => \"interact-flex-row-left\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[], Dict{Symbol,Any}())], Dict{Symbol,Any}(:className => \"interact-flex-row-center\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes => Dict(\"data-bind\" => \"text: formatted_val\")))], Dict{Symbol,Any}(:className => \"interact-flex-row-right\"))], Dict{Symbol,Any}(:className => \"interact-flex-row interact-widget\")), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\" => (Observable{Int64} with 1 listeners. Value:\n",
"0, nothing),\"index\" => (Observable{Any} with 2 listeners. Value:\n",
"63, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/shashi/.julia/packages/Knockout/1sDlc/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/shashi/.julia/packages/Knockout/1sDlc/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/shashi/.julia/packages/InteractBase/9mFwe/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/shashi/.julia/packages/InteractBase/9mFwe/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/shashi/.julia/dev/Interact/src/../assets/bulma_confined.min.css\")], Dict{Any,Any}(\"changes\" => Any[JSString(\"(function (val){return (val!=this.model[\\\"changes\\\"]()) ? (this.valueFromJulia[\\\"changes\\\"]=true, this.model[\\\"changes\\\"](val)) : undefined})\")],\"index\" => Any[JSString(\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\")]), WebIO.ConnectionPool(Any[], Set(AbstractConnection[])), JSString[JSString(\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"formatted_vals\\\":[\\\"0.0\\\",\\\"0.05\\\",\\\"0.1\\\",\\\"0.15\\\",\\\"0.2\\\",\\\"0.25\\\",\\\"0.3\\\",\\\"0.35\\\",\\\"0.4\\\",\\\"0.45\\\",\\\"0.5\\\",\\\"0.55\\\",\\\"0.6\\\",\\\"0.65\\\",\\\"0.7\\\",\\\"0.75\\\",\\\"0.8\\\",\\\"0.85\\\",\\\"0.9\\\",\\\"0.95\\\",\\\"1.0\\\",\\\"1.05\\\",\\\"1.1\\\",\\\"1.15\\\",\\\"1.2\\\",\\\"1.25\\\",\\\"1.3\\\",\\\"1.35\\\",\\\"1.4\\\",\\\"1.45\\\",\\\"1.5\\\",\\\"1.55\\\",\\\"1.6\\\",\\\"1.65\\\",\\\"1.7\\\",\\\"1.75\\\",\\\"1.8\\\",\\\"1.85\\\",\\\"1.9\\\",\\\"1.95\\\",\\\"2.0\\\",\\\"2.05\\\",\\\"2.1\\\",\\\"2.15\\\",\\\"2.2\\\",\\\"2.25\\\",\\\"2.3\\\",\\\"2.35\\\",\\\"2.4\\\",\\\"2.45\\\",\\\"2.5\\\",\\\"2.55\\\",\\\"2.6\\\",\\\"2.65\\\",\\\"2.7\\\",\\\"2.75\\\",\\\"2.8\\\",\\\"2.85\\\",\\\"2.9\\\",\\\"2.95\\\",\\\"3.0\\\",\\\"3.05\\\",\\\"3.1\\\",\\\"3.15\\\",\\\"3.2\\\",\\\"3.25\\\",\\\"3.3\\\",\\\"3.35\\\",\\\"3.4\\\",\\\"3.45\\\",\\\"3.5\\\",\\\"3.55\\\",\\\"3.6\\\",\\\"3.65\\\",\\\"3.7\\\",\\\"3.75\\\",\\\"3.8\\\",\\\"3.85\\\",\\\"3.9\\\",\\\"3.95\\\",\\\"4.0\\\",\\\"4.05\\\",\\\"4.1\\\",\\\"4.15\\\",\\\"4.2\\\",\\\"4.25\\\",\\\"4.3\\\",\\\"4.35\\\",\\\"4.4\\\",\\\"4.45\\\",\\\"4.5\\\",\\\"4.55\\\",\\\"4.6\\\",\\\"4.65\\\",\\\"4.7\\\",\\\"4.75\\\",\\\"4.8\\\",\\\"4.85\\\",\\\"4.9\\\",\\\"4.95\\\",\\\"5.0\\\",\\\"5.05\\\",\\\"5.1\\\",\\\"5.15\\\",\\\"5.2\\\",\\\"5.25\\\",\\\"5.3\\\",\\\"5.35\\\",\\\"5.4\\\",\\\"5.45\\\",\\\"5.5\\\",\\\"5.55\\\",\\\"5.6\\\",\\\"5.65\\\",\\\"5.7\\\",\\\"5.75\\\",\\\"5.8\\\",\\\"5.85\\\",\\\"5.9\\\",\\\"5.95\\\",\\\"6.0\\\",\\\"6.05\\\",\\\"6.1\\\",\\\"6.15\\\",\\\"6.2\\\",\\\"6.25\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_81\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_80\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n \\n [this[\\\"formatted_val\\\"]=ko.computed( function(){\\n return this.formatted_vals()[parseInt(this.index())-(1)];\\n }\\n,this)]\\n [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_81\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"4398754796527860844\\\",\\\"id\\\":\\\"ob_80\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/a6e9b27f34b5175286601208e22a91ff6b122982-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/a6d3a9765b859ab1789f4070b66424f637c7679a-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className => \"field interact-widget\")), Observable{Any} with 0 listeners. Value:\n",
"Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Plot{Plots.GRBackend() n=1}], Dict{Symbol,Any}(:className => \"interact-flex-row interact-widget\"))], Dict{Symbol,Any}())"
]
},
"execution_count": 140,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"using Plots\n",
"@manipulate for f in [sin, cos, tan], ϕ in 0:0.05:2π\n",
" x = 0:0.05:4π\n",
" Plots.plot(x, f.(x .+ ϕ))\n",
"end"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Deploying your gizmos"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## using Blink.jl\n",
"\n",
"Makes your app look like a desktop app!\n",
"\n",
"```julia\n",
"using Blink\n",
"\n",
"window = Window()\n",
"body!(window, widget)\n",
"\n",
"# widget can be any node, or scope or `@manipulate` or Interact widget\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## using Mux.jl\n",
"\n",
"Makes your app look like a web app!\n",
"\n",
"```julia\n",
"using Mux\n",
"\n",
"function myapp(request)\n",
" # optionally look at request params\n",
" widget # widget can be any node, or scope or\n",
" # `@manipulate` or Interact widget\n",
"\n",
"end\n",
"\n",
"fetch(WebIO.webio_serve(page(\"/\", myapp), PORT))\n",
"\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## in Atom / Juno\n",
"\n",
"If you execute any expression that returns a WebIO-based widget, then it will just appear in the Atom plot pane, and you can interact with it.\n",
"\n",
"\n",
"\n",
"## Demos\n",
"\n",
"[See here](https://youtu.be/A3_vpuFqb-0?t=924) for a quick demo of making WebIO widgets work in all these 3 front ends."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Using WebIO to render your custom types"
]
},
{
"cell_type": "code",
"execution_count": 141,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"LatLong(12.9063, 77.5857)"
]
},
"execution_count": 141,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"struct LatLong\n",
" lat::Float64\n",
" long::Float64\n",
"end\n",
"\n",
"here = LatLong(42.3601, -71.0942)\n",
"there = LatLong(12.9063, 77.5857)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"WebIO provides `@register_renderable` macro to help you easily display your own types interactively. This takes care of defining a number of methods that will allow your type to be displayed inside any WebIO content on any frontend."
]
},
{
"cell_type": "code",
"execution_count": 147,
"metadata": {},
"outputs": [],
"source": [
"using WebIO\n",
"import WebIO: @register_renderable\n",
"\n",
"function latlongurl(loc::LatLong)\n",
" return \"https://maps.google.com/maps?q=$(loc.lat),$(loc.long)&t=&z=17&ie=UTF8\"\n",
"end\n",
"\n",
"@register_renderable(LatLong) do loc\n",
" return WebIO.render(node(:iframe,\n",
" src=latlongurl(loc),\n",
" attributes=Dict(\n",
" \"height\"=>400,\n",
" \"width\"=>600,\n",
" \"frameborder\"=>0)))\n",
"end"
]
},
{
"cell_type": "code",
"execution_count": 148,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "iframe"
},
"nodeType": "DOM",
"props": {
"attributes": {
"frameborder": 0,
"height": 400,
"width": 600
},
"src": "https://maps.google.com/maps?q=42.3601,-71.0942&t=&z=17&ie=UTF8"
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"13505944573190687648\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"13505944573190687648\"]'),\n",
" {\"props\":{\"src\":\"https:\\/\\/maps.google.com\\/maps?q=42.3601,-71.0942&t=&z=17&ie=UTF8\",\"attributes\":{\"height\":400,\"width\":600,\"frameborder\":0}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"iframe\"},\"children\":[]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"13505944573190687648\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"LatLong(42.3601, -71.0942)"
]
},
"execution_count": 148,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"here"
]
},
{
"cell_type": "code",
"execution_count": 146,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "iframe"
},
"nodeType": "DOM",
"props": {
"attributes": {
"frameborder": 0,
"height": 400,
"width": 600
},
"src": "https://maps.google.com/maps?q=12.9063,77.5857&t=&z=17"
},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"9953590750113043830\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"9953590750113043830\"]'),\n",
" {\"props\":{\"src\":\"https:\\/\\/maps.google.com\\/maps?q=12.9063,77.5857&t=&z=17\",\"attributes\":{\"height\":400,\"width\":600,\"frameborder\":0}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"iframe\"},\"children\":[]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"9953590750113043830\"]')\n",
" .innerHTML = (\n",
" '<strong>WebIO not detected. Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.' +\n",
" '</strong>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"LatLong(12.9063, 77.5857)"
]
},
"execution_count": 146,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
}
},
"output_type": "execute_result"
}
],
"source": [
"there"
]
}
],
"metadata": {
"@webio": {
"lastCommId": "b2194e8bbdbf4eaf92219b203f45c14f",
"lastKernelId": "4b66a38e-9c8d-4ab9-be6a-301dec8a7b02"
},
"kernelspec": {
"display_name": "Julia 1.3.0",
"language": "julia",
"name": "julia-1.3"
},
"language_info": {
"file_extension": ".jl",
"mimetype": "application/julia",
"name": "julia",
"version": "1.3.0"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment