Xresources color scheme generator.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Pleochroism\n",
    "### Parameterized Color Scheme Generator\n",
    "\n",
    "This generates a 16-color (4 bit) palettes for terminal emulators and linear gradients (UI Elements and Highlighting) for graphical UI from adjustable parameters. It offers the option of light/dark versions for day/night respective versions. It aims for a balance of utility and perceptual uniformity offered by [Colors.jl](https://github.com/JuliaGraphics/Colors.jl).\n",
    "\n",
    "For uniformity of syntax and clarity of intention, these colors are given names characterized by a alphabetical prefix and a hexadecimal point in 12-bit color space (e.g. df0f for purple). These do not intend to be surjective, though a later version may aim for a embeddings of 12-bit color space in 24-bit color space.\n",
    "\n",
    "| prefix | shape    | use | description   |\n",
    "|--------|----------|------|---------------|\n",
    "| c      | ring     | term | Intense color |\n",
    "| d      | ring     | term | Regular color |\n",
    "| g      | linear   | UI & term  | Desaturated Greyscale |\n",
    "| h      | linear   | UI  | Highlighter |"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "// Immediately-invoked-function-expression to avoid global variables.\n",
       "(function() {\n",
       "    var warning_div = document.getElementById(\"webio-warning-17297477989296242071\");\n",
       "    var hide = function () {\n",
       "        var script = document.getElementById(\"webio-setup-2716555670358831355\");\n",
       "        var parent = script && script.parentElement;\n",
       "        var grandparent = parent && parent.parentElement;\n",
       "        if (grandparent) {\n",
       "            grandparent.style.display = \"none\";\n",
       "        }\n",
       "        warning_div.style.display = \"none\";\n",
       "    };\n",
       "    if (typeof Jupyter !== \"undefined\") {\n",
       "        console.log(\"WebIO detected Jupyter notebook environment.\");\n",
       "        // Jupyter notebook.\n",
       "        var extensions = (\n",
       "            Jupyter\n",
       "            && Jupyter.notebook.config.data\n",
       "            && Jupyter.notebook.config.data.load_extensions\n",
       "        );\n",
       "        if (extensions && extensions[\"webio/main\"]) {\n",
       "            // Extension already loaded.\n",
       "            console.log(\"Jupyter WebIO nbextension detected; not loading ad-hoc.\");\n",
       "            hide();\n",
       "            return;\n",
       "        }\n",
       "        console.warn(\"Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).\");\n",
       "        require([\"/assetserver/322df9fe7e4d3fc81cea9e0c11b19f13f9d7f420-dist/main.js\"], function (webIOModule) {\n",
       "            webIOModule.load_ipython_extension();\n",
       "        });\n",
       "        warning_div.innerHTML = \"<strong>Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).</strong>\";\n",
       "    } else if (window.location.pathname.includes(\"/lab\")) {\n",
       "        // Guessing JupyterLa\n",
       "        console.log(\"Jupyter Lab detected; make sure the @webio/jupyter-lab-provider labextension is installed.\");\n",
       "        hide();\n",
       "        return;\n",
       "    }\n",
       "})();\n",
       "\n",
       "</script>\n",
       "<div\n",
       "    id=\"webio-warning-17297477989296242071\"\n",
       "    class=\"output_text output_stderr\"\n",
       "    style=\"padding: 1em; font-weight: bold;\"\n",
       ">\n",
       "    Unable to load WebIO. Please make sure WebIO works for your Jupyter client.\n",
       "    <!-- TODO: link to installation docs. -->\n",
       "</div>\n"
      ],
      "text/plain": [
       "HTML{String}(\"<script>\\n// Immediately-invoked-function-expression to avoid global variables.\\n(function() {\\n    var warning_div = document.getElementById(\\\"webio-warning-17297477989296242071\\\");\\n    var hide = function () {\\n        var script = document.getElementById(\\\"webio-setup-2716555670358831355\\\");\\n        var parent = script && script.parentElement;\\n        var grandparent = parent && parent.parentElement;\\n        if (grandparent) {\\n            grandparent.style.display = \\\"none\\\";\\n        }\\n        warning_div.style.display = \\\"none\\\";\\n    };\\n    if (typeof Jupyter !== \\\"undefined\\\") {\\n        console.log(\\\"WebIO detected Jupyter notebook environment.\\\");\\n        // Jupyter notebook.\\n        var extensions = (\\n            Jupyter\\n            && Jupyter.notebook.config.data\\n            && Jupyter.notebook.config.data.load_extensions\\n        );\\n        if (extensions && extensions[\\\"webio/main\\\"]) {\\n            // Extension already loaded.\\n            console.log(\\\"Jupyter WebIO nbextension detected; not loading ad-hoc.\\\");\\n            hide();\\n            return;\\n        }\\n        console.warn(\\\"Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).\\\");\\n        require([\\\"/assetserver/322df9fe7e4d3fc81cea9e0c11b19f13f9d7f420-dist/main.js\\\"], function (webIOModule) {\\n            webIOModule.load_ipython_extension();\\n        });\\n        warning_div.innerHTML = \\\"<strong>Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).</strong>\\\";\\n    } else if (window.location.pathname.includes(\\\"/lab\\\")) {\\n        // Guessing JupyterLa\\n        console.log(\\\"Jupyter Lab detected; make sure the @webio/jupyter-lab-provider labextension is installed.\\\");\\n        hide();\\n        return;\\n    }\\n})();\\n\\n</script>\\n<div\\n    id=\\\"webio-warning-17297477989296242071\\\"\\n    class=\\\"output_text output_stderr\\\"\\n    style=\\\"padding: 1em; font-weight: bold;\\\"\\n>\\n    Unable to load WebIO. Please make sure WebIO works for your Jupyter client.\\n    <!-- TODO: link to installation docs. -->\\n</div>\\n\")"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "using Interact\n",
    "settheme!(:bulma);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "using Colors\n",
    "using Crayons\n",
    "using DataFrames\n",
    "\n",
    "# Convenience functions\n",
    "html(s) = display(MIME(\"text/html\"), s)\n",
    "style(el,sty,str) = \"\"\"<$(el) style=\"$(sty)\"> $(str) </$(el)>\"\"\"\n",
    "colorbardiv(fg,bg,text) = style(\"div\",\"color:#$(hex(fg)); font-family:monospace; background-color:#$(hex(bg))\",\"<b>$text</b>\")\n",
    "\n",
    "h_to_rgb = Dict(0=>\"f00\",1=>\"ff0\",2=>\"0f0\",3=>\"0ff\",4=>\"00f\",5=>\"f0f\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.webio.node+json": {
       "children": [
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "n"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 5,
                  "min": 0,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"0\",\"1\",\"2\",\"3\",\"4\",\"5\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\",\"id\":\"ob_02\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\",\"id\":\"ob_01\",\"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\":\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\",\"id\":\"ob_02\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\",\"id\":\"ob_01\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_02",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_01",
              "sync": true,
              "value": 2
             }
            },
            "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_08",
            "name": "obs-node"
           },
           "nodeType": "ObservableNode",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "handlers": {},
          "id": "scope-29e99160-e8db-464e-9e32-189d92cd9e73",
          "imports": {
           "data": [],
           "type": "async_block"
          },
          "mount_callbacks": [],
          "observables": {
           "obs-node": {
            "id": "ob_08",
            "sync": false,
            "value": {
             "children": [
              {
               "children": [],
               "instanceArgs": {
                "namespace": "html",
                "tag": "div"
               },
               "nodeType": "DOM",
               "props": {
                "setInnerHtml": "<pre>2</pre>"
               },
               "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=\"4816281543795786169\"\n",
       ">\n",
       "    <script>\n",
       "    if (window.require && require.defined && require.defined(\"nbextensions/webio/main\")) {\n",
       "        console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
       "    } else if (window.WebIO) {\n",
       "        WebIO.mount(\n",
       "            document.querySelector('[data-webio-mountpoint=\"4816281543795786169\"]'),\n",
       "            {\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_01\\\",\\\"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\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_01\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_02\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_01\",\"value\":2}}},\"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\":[\"n\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":5,\"min\":0,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":\"scope-eef8bf9c-482a-4b1a-badc-5c4eaae5e802\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-node\":{\"sync\":false,\"id\":\"ob_06\",\"value\":{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"setInnerHtml\":\"<pre>2<\\/pre>\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}}}},\"children\":[{\"props\":{},\"nodeType\":\"ObservableNode\",\"type\":\"node\",\"instanceArgs\":{\"id\":\"ob_06\",\"name\":\"obs-node\"},\"children\":[]}]}]},\n",
       "            window,\n",
       "        );\n",
       "    } else {\n",
       "        document\n",
       "            .querySelector('[data-webio-mountpoint=\"4816281543795786169\"]')\n",
       "            .innerHTML = '<strong>WebIO not detected.</strong>';\n",
       "    }\n",
       "    </script>\n",
       "</div>\n"
      ],
      "text/plain": [
       "Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"n\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>5,:min=>0,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "2, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_01\\\",\\\"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\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-f49c9642-633d-49cf-b5d3-83de3bc70caa\\\",\\\"id\\\":\\\"ob_01\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Observable{Any} with 0 listeners. Value:\n",
       "Node{DOM}(DOM(:html, :div), Any[2], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 1)], Dict{Symbol,Any}(), 2)"
      ]
     },
     "execution_count": 3,
     "metadata": {
      "application/vnd.webio.node+json": {
       "kernelId": "f7ab6f71-175e-4208-8343-b4cc5cd7ec8d"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "@manipulate for n=0:5\n",
    "    n\n",
    "end"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.webio.node+json": {
       "children": [
        {
         "children": [
          {
           "children": [],
           "instanceArgs": {
            "namespace": "html",
            "tag": "input"
           },
           "nodeType": "DOM",
           "props": {
            "attributes": {
             "data-bind": "value: value, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
             "type": "color"
            },
            "className": "input ",
            "style": {}
           },
           "type": "node"
          }
         ],
         "instanceArgs": {
          "handlers": {
           "changes": [
            "(function (val){return (val!=this.model[\"changes\"]()) ? (this.valueFromJulia[\"changes\"]=true, this.model[\"changes\"](val)) : undefined})"
           ],
           "value": [
            "(function (val){return (val!=this.model[\"value\"]()) ? (this.valueFromJulia[\"value\"]=true, this.model[\"value\"](val)) : undefined})"
           ]
          },
          "id": "knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca",
          "imports": {
           "data": [
            {
             "name": "knockout",
             "type": "js",
             "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
            },
            {
             "name": "knockout_punches",
             "type": "js",
             "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
            },
            {
             "name": null,
             "type": "js",
             "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
            },
            {
             "name": null,
             "type": "css",
             "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
            },
            {
             "name": null,
             "type": "css",
             "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\",\"id\":\"ob_16\",\"type\":\"observable\"}),\"value\":WebIO.getval({\"name\":\"value\",\"scope\":\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\",\"id\":\"ob_15\",\"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        \n        [this[\"changes\"].subscribe((function (val){!(this.valueFromJulia[\"changes\"]) ? (WebIO.setval({\"name\":\"changes\",\"scope\":\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\",\"id\":\"ob_16\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"value\"].subscribe((function (val){!(this.valueFromJulia[\"value\"]) ? (WebIO.setval({\"name\":\"value\",\"scope\":\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\",\"id\":\"ob_15\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"value\"]=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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
          ],
          "observables": {
           "changes": {
            "id": "ob_16",
            "sync": false,
            "value": 0
           },
           "value": {
            "id": "ob_15",
            "sync": true,
            "value": "#FF0000"
           }
          },
          "systemjs_options": null
         },
         "nodeType": "Scope",
         "props": {},
         "type": "node"
        }
       ],
       "instanceArgs": {
        "namespace": "html",
        "tag": "div"
       },
       "nodeType": "DOM",
       "props": {
        "className": "field interact-widget"
       },
       "type": "node"
      },
      "text/html": [
       "<div\n",
       "    class=\"webio-mountpoint\"\n",
       "    data-webio-mountpoint=\"3397801261866423598\"\n",
       ">\n",
       "    <script>\n",
       "    if (window.require && require.defined && require.defined(\"nbextensions/webio/main\")) {\n",
       "        console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
       "    } else if (window.WebIO) {\n",
       "        WebIO.mount(\n",
       "            document.querySelector('[data-webio-mountpoint=\"3397801261866423598\"]'),\n",
       "            {\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\",\"handlers\":{\"changes\":[\"(function (val){return (val!=this.model[\\\"changes\\\"]()) ? (this.valueFromJulia[\\\"changes\\\"]=true, this.model[\\\"changes\\\"](val)) : undefined})\"],\"value\":[\"(function (val){return (val!=this.model[\\\"value\\\"]()) ? (this.valueFromJulia[\\\"value\\\"]=true, this.model[\\\"value\\\"](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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_16\\\",\\\"type\\\":\\\"observable\\\"}),\\\"value\\\":WebIO.getval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_15\\\",\\\"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        \\n        [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_16\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"value\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"value\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_15\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"value\\\"]=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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_16\",\"value\":0},\"value\":{\"sync\":true,\"id\":\"ob_15\",\"value\":\"#FF0000\"}}},\"children\":[{\"props\":{\"attributes\":{\"type\":\"color\",\"data-bind\":\"value: value, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\"},\"className\":\"input \",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"children\":[]}]}]},\n",
       "            window,\n",
       "        );\n",
       "    } else {\n",
       "        document\n",
       "            .querySelector('[data-webio-mountpoint=\"3397801261866423598\"]')\n",
       "            .innerHTML = '<strong>WebIO not detected.</strong>';\n",
       "    }\n",
       "    </script>\n",
       "</div>\n"
      ],
      "text/plain": [
       "Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Scope(\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\", Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:attributes=>Dict{Any,Any}(:type=>\"color\",Symbol(\"data-bind\")=>\"value: value, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\"),:className=>\"input \",:style=>Dict{Any,Any}()), 0), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"value\"=>(Observable{Any} with 2 listeners. Value:\n",
       "\"#FF0000\", nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")],\"value\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"value\\\"]()) ? (this.valueFromJulia[\\\"value\\\"]=true, this.model[\\\"value\\\"](val)) : undefined})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_16\\\",\\\"type\\\":\\\"observable\\\"}),\\\"value\\\":WebIO.getval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_15\\\",\\\"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        \\n        [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_16\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"value\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"value\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"knockout-component-d5be6ce9-34b7-4983-96b7-55af9e963cca\\\",\\\"id\\\":\\\"ob_15\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"value\\\"]=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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1)"
      ]
     },
     "execution_count": 6,
     "metadata": {
      "application/vnd.webio.node+json": {
       "kernelId": "f7ab6f71-175e-4208-8343-b4cc5cd7ec8d"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colorchoice = colorpicker(colorant\"#ff0000\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.webio.node+json": {
       "children": [
        {
         "children": [],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "webio-observable",
          "setInnerHtml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n     width=\"25mm\" height=\"25mm\" viewBox=\"0 0 1 1\">\n     <rect width=\"1\" height=\"1\"\n           fill=\"#FF0000\" stroke=\"none\"/>\n</svg>\n"
         },
         "type": "node"
        }
       ],
       "instanceArgs": {
        "handlers": {
         "obs-output": [
          "function (value, scope) {\n    scope.setInnerHTML(value);\n}\n"
         ]
        },
        "id": "scope-434910bc-ad43-4b36-9775-a554ad4d3006",
        "imports": {
         "data": [],
         "type": "async_block"
        },
        "mount_callbacks": [],
        "observables": {
         "obs-output": {
          "id": "ob_18",
          "sync": false,
          "value": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n     width=\"25mm\" height=\"25mm\" viewBox=\"0 0 1 1\">\n     <rect width=\"1\" height=\"1\"\n           fill=\"#FF0000\" stroke=\"none\"/>\n</svg>\n"
         }
        },
        "systemjs_options": null
       },
       "nodeType": "Scope",
       "props": {},
       "type": "node"
      },
      "text/html": [
       "<div\n",
       "    class=\"webio-mountpoint\"\n",
       "    data-webio-mountpoint=\"18078505145059418120\"\n",
       ">\n",
       "    <script>\n",
       "    if (window.require && require.defined && require.defined(\"nbextensions/webio/main\")) {\n",
       "        console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
       "    } else if (window.WebIO) {\n",
       "        WebIO.mount(\n",
       "            document.querySelector('[data-webio-mountpoint=\"18078505145059418120\"]'),\n",
       "            {\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"scope-9580e26d-481a-4d98-a830-053471341702\",\"handlers\":{\"obs-output\":[\"function (value, scope) {\\n    scope.setInnerHTML(value);\\n}\\n\"]},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-output\":{\"sync\":false,\"id\":\"ob_17\",\"value\":\"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?>\\n<!DOCTYPE svg PUBLIC \\\"-\\/\\/W3C\\/\\/DTD SVG 1.1\\/\\/EN\\\"\\n \\\"http:\\/\\/www.w3.org\\/Graphics\\/SVG\\/1.1\\/DTD\\/svg11.dtd\\\">\\n<svg xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\" version=\\\"1.1\\\"\\n     width=\\\"25mm\\\" height=\\\"25mm\\\" viewBox=\\\"0 0 1 1\\\">\\n     <rect width=\\\"1\\\" height=\\\"1\\\"\\n           fill=\\\"#FF0000\\\" stroke=\\\"none\\\"\\/>\\n<\\/svg>\\n\"}}},\"children\":[{\"props\":{\"className\":\"webio-observable\",\"setInnerHtml\":\"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?>\\n<!DOCTYPE svg PUBLIC \\\"-\\/\\/W3C\\/\\/DTD SVG 1.1\\/\\/EN\\\"\\n \\\"http:\\/\\/www.w3.org\\/Graphics\\/SVG\\/1.1\\/DTD\\/svg11.dtd\\\">\\n<svg xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\" version=\\\"1.1\\\"\\n     width=\\\"25mm\\\" height=\\\"25mm\\\" viewBox=\\\"0 0 1 1\\\">\\n     <rect width=\\\"1\\\" height=\\\"1\\\"\\n           fill=\\\"#FF0000\\\" stroke=\\\"none\\\"\\/>\\n<\\/svg>\\n\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]},\n",
       "            window,\n",
       "        );\n",
       "    } else {\n",
       "        document\n",
       "            .querySelector('[data-webio-mountpoint=\"18078505145059418120\"]')\n",
       "            .innerHTML = '<strong>WebIO not detected.</strong>';\n",
       "    }\n",
       "    </script>\n",
       "</div>\n"
      ],
      "text/plain": [
       "Observable{Color} with 1 listeners. Value:\n",
       "RGB{N0f8}(1.0,0.0,0.0)"
      ]
     },
     "execution_count": 7,
     "metadata": {
      "application/vnd.webio.node+json": {
       "kernelId": "f7ab6f71-175e-4208-8343-b4cc5cd7ec8d"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colorchoice.output"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# XResources"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "/ (generic function with 109 methods)"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#You have to treat them like linear vector spaces\n",
    "import Base.*, Base.+, Base.-, Base./\n",
    "const Linear3 = Union{XYZ, LMS, Lab, LCHab}\n",
    "+(a::C, b::C) where {C<:Linear3} = C(comp1(a)+comp1(b), comp2(a)+comp2(b), comp3(a)+comp3(b))\n",
    "-(a::C, b::C) where {C<:Linear3} = C(comp1(a)-comp1(b), comp2(a)-comp2(b), comp3(a)-comp3(b))\n",
    "-(a::Linear3) = typeof(a)(-comp1(a), -comp2(a), -comp3(a))\n",
    "*(c::Number, a::Linear3) = base_color_type(a)(c*comp1(a), c*comp2(a), c*comp3(a))\n",
    "/(a::Linear3, c::Number) = base_color_type(a)(comp1(a)/c, comp2(a)/c, comp3(a)/c)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"color:#C27157; font-family:monospace; background-color:#E9AC9C\"> <b>#define cf00 #E9AC9C</b> </div><div style=\"color:#E9AC9C; font-family:monospace; background-color:#C27157\"> <b>#define df00 #C27157</b> </div><div style=\"color:#B09440; font-family:monospace; background-color:#F6C384\"> <b>#define cff0 #F6C384</b> </div><div style=\"color:#F6C384; font-family:monospace; background-color:#B09440\"> <b>#define dff0 #B09440</b> </div><div style=\"color:#5E944C; font-family:monospace; background-color:#BAC172\"> <b>#define c0f0 #BAC172</b> </div><div style=\"color:#BAC172; font-family:monospace; background-color:#5E944C\"> <b>#define d0f0 #5E944C</b> </div><div style=\"color:#1CA790; font-family:monospace; background-color:#99DAA2\"> <b>#define c0ff #99DAA2</b> </div><div style=\"color:#99DAA2; font-family:monospace; background-color:#1CA790\"> <b>#define d0ff #1CA790</b> </div><div style=\"color:#548CA1; font-family:monospace; background-color:#86C6B9\"> <b>#define c00f #86C6B9</b> </div><div style=\"color:#86C6B9; font-family:monospace; background-color:#548CA1\"> <b>#define d00f #548CA1</b> </div><div style=\"color:#BB8699; font-family:monospace; background-color:#CFC8CB\"> <b>#define cf0f #CFC8CB</b> </div><div style=\"color:#CFC8CB; font-family:monospace; background-color:#BB8699\"> <b>#define df0f #BB8699</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#1B2423\"> <b>#define s000 #1B2423</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#3E4A47\"> <b>#define s333 #3E4A47</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#67746D\"> <b>#define s666 #67746D</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#94A194\"> <b>#define s999 #94A194</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#C6CFBE\"> <b>#define sccc #C6CFBE</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#FCFFE9\"> <b>#define sfff #FCFFE9</b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "HCL(x) = whitebalance(x,RGB(1,1,1),RGB(1.0,.992,.804))\n",
    "myColors = Dict{String,ColorTypes.Colorant}()\n",
    "daytime = false # generates dark-on-light color theme\n",
    "h_start = 26 # must be between 0 and 60\n",
    "black = LCHab(13.3, 4.3,188.7) #1B2423\n",
    "white = LCHab(99.2, 11.2, 114.9) #fcffe9\n",
    "#black = LCHab(colorant\"#002B36\") # Solarized\n",
    "#white = LCHab(colorant\"#FDF6E3\") # Solarized\n",
    "\n",
    "huespace = DataFrame(name=String[],c=Color[],d=Color[])\n",
    "for i = map(x->h_start + x, 0:60:359)\n",
    "    h = h_to_rgb[div(i,60)] # analogous 3-bit color name\n",
    "    pc = (mod(div(i,60),2)==0) # Is it a primary color? used for adjustment\n",
    "    c = HCL(LCHab(80 - (daytime ? 25 : 0) + (pc ? -3 : 3),25+ (pc ? 0 : 0), i - 30)) #bright\n",
    "    d = HCL(LCHab(60 + (daytime ? 10 : 0) + (pc ? -3 : 3),35+ (pc ? 0 : 0), i)) #dark\n",
    "    push!(huespace,(\"$(h)\",c,d))\n",
    "end\n",
    "\n",
    "greys = daytime ? range(white,black,length=6) : range(black,white,length=6)\n",
    "greyspace = DataFrame(name=String[],g=Color[])\n",
    "\n",
    "for (i,c) in enumerate(greys)\n",
    "    name =  repeat(string(3*(i-1),base=16),3)\n",
    "    push!(greyspace,(name,c))\n",
    "end\n",
    "\n",
    "body = \"\"\n",
    "for r in huespace |> eachrow\n",
    "    body = body * colorbardiv(r.d,r.c,\"#define c$(r.name) #$(hex(r.c))\")\n",
    "    body = body * colorbardiv(r.c,r.d,\"#define d$(r.name) #$(hex(r.d))\")\n",
    "    #body = body * colorbardiv(r.d,r.c,\"c$(r.name) = \\\"#$(hex(r.c))\\\"\")\n",
    "    #body = body * colorbardiv(r.c,r.d,\"d$(r.name) = \\\"#$(hex(r.d))\\\"\")\n",
    "end\n",
    "for (i,r) in greyspace |> eachrow |> enumerate\n",
    "    body = body * colorbardiv( (daytime ? i <= 3 : i > 3) ? black : white, r.g,\"#define s$(r.name) #$(hex(r.g))\")\n",
    "end\n",
    "# example:  hex(myColors[\"g000\"]) -> \"1B2423\"\n",
    "html(body)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "# dataframe to dictionary\n",
    "myColors=Dict{String,ColorTypes.Colorant}()\n",
    "for r in eachrow(huespace)\n",
    "    myColors[\"c$(r.name)\"]=r.c\n",
    "    myColors[\"d$(r.name)\"]=r.d\n",
    "end\n",
    "for r in eachrow(greyspace)\n",
    "    myColors[\"g$(r.name)\"] = r.g;\n",
    "end"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "renderspectrumhtml (generic function with 2 methods)"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "function makespectrum(hue_start,hue_twist,c_lightness,d_lightness,pc_lightness_offset,base_chroma,chroma_offset)\n",
    "    huespace = DataFrame(name=String[],c=Color[],d=Color[])\n",
    "    for i = map(x->hue_start + x, 0:60:359)\n",
    "        h = h_to_rgb[div(i,60)] # analogous 3-bit color name\n",
    "        pc = (mod(div(i,60),2)==0) # Is it a primary color? used for adjustment\n",
    "        # Bright / Normal\n",
    "        c = HCL(LCHab(c_lightness - (daytime ? 25 : 0) + (pc ? -pc_lightness_offset : pc_lightness_offset),\n",
    "                base_chroma+ (pc ? 0 : 0), i - hue_twist))\n",
    "        # Dark / Intense\n",
    "        d = HCL(LCHab(d_lightness + (daytime ? 10 : 0) + (pc ? -pc_lightness_offset : pc_lightness_offset),\n",
    "                base_chroma+chroma_offset+ (pc ? 0 : 0), i))\n",
    "        push!(huespace,(\"$(h)\",c,d))\n",
    "    end\n",
    "    huespace\n",
    "end\n",
    "\n",
    "function renderspectrum(huespace)\n",
    "    [huespace.c huespace.d] |> x->permutedims(x,[2,1])\n",
    "end\n",
    "\n",
    "function renderspectrumhtml(huespace, body=\"\")\n",
    "    for r in huespace |> eachrow\n",
    "        body = body * colorbardiv(r.d,r.c,\"#define c$(r.name) #$(hex(r.c))\")\n",
    "        body = body * colorbardiv(r.c,r.d,\"#define d$(r.name) #$(hex(r.d))\")\n",
    "    end\n",
    "    body\n",
    "end"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.webio.node+json": {
       "children": [
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                "Slider Hueshift:"
               ],
               "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": "input"
               },
               "nodeType": "DOM",
               "props": {
                "attributes": {
                 "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                 "orient": "horizontal",
                 "type": "range"
                },
                "className": "slider slider is-fullwidth",
                "max": 60,
                "min": 0,
                "step": 1,
                "style": {}
               },
               "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": "knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd",
          "imports": {
           "data": [
            {
             "name": "knockout",
             "type": "js",
             "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
            },
            {
             "name": "knockout_punches",
             "type": "js",
             "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
            },
            {
             "name": null,
             "type": "js",
             "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
            },
            {
             "name": null,
             "type": "css",
             "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
            },
            {
             "name": null,
             "type": "css",
             "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\",\"16\",\"17\",\"18\",\"19\",\"20\",\"21\",\"22\",\"23\",\"24\",\"25\",\"26\",\"27\",\"28\",\"29\",\"30\",\"31\",\"32\",\"33\",\"34\",\"35\",\"36\",\"37\",\"38\",\"39\",\"40\",\"41\",\"42\",\"43\",\"44\",\"45\",\"46\",\"47\",\"48\",\"49\",\"50\",\"51\",\"52\",\"53\",\"54\",\"55\",\"56\",\"57\",\"58\",\"59\",\"60\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\",\"id\":\"ob_20\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\",\"id\":\"ob_19\",\"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\":\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\",\"id\":\"ob_20\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\",\"id\":\"ob_19\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
          ],
          "observables": {
           "changes": {
            "id": "ob_20",
            "sync": false,
            "value": 0
           },
           "index": {
            "id": "ob_19",
            "sync": false,
            "value": 30
           }
          },
          "systemjs_options": null
         },
         "nodeType": "Scope",
         "props": {},
         "type": "node"
        }
       ],
       "instanceArgs": {
        "namespace": "html",
        "tag": "div"
       },
       "nodeType": "DOM",
       "props": {
        "className": "field interact-widget"
       },
       "type": "node"
      },
      "text/html": [
       "<div\n",
       "    class=\"webio-mountpoint\"\n",
       "    data-webio-mountpoint=\"18082433034525165206\"\n",
       ">\n",
       "    <script>\n",
       "    if (window.require && require.defined && require.defined(\"nbextensions/webio/main\")) {\n",
       "        console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
       "    } else if (window.WebIO) {\n",
       "        WebIO.mount(\n",
       "            document.querySelector('[data-webio-mountpoint=\"18082433034525165206\"]'),\n",
       "            {\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\",\\\"21\\\",\\\"22\\\",\\\"23\\\",\\\"24\\\",\\\"25\\\",\\\"26\\\",\\\"27\\\",\\\"28\\\",\\\"29\\\",\\\"30\\\",\\\"31\\\",\\\"32\\\",\\\"33\\\",\\\"34\\\",\\\"35\\\",\\\"36\\\",\\\"37\\\",\\\"38\\\",\\\"39\\\",\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\",\\\"60\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\\\",\\\"id\\\":\\\"ob_20\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\\\",\\\"id\\\":\\\"ob_19\\\",\\\"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\\\":\\\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\\\",\\\"id\\\":\\\"ob_20\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-587f8ae8-69d7-49ca-a3fd-fb2481a11fdd\\\",\\\"id\\\":\\\"ob_19\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_20\",\"value\":0},\"index\":{\"sync\":false,\"id\":\"ob_19\",\"value\":30}}},\"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\":[\"Slider Hueshift:\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":60,\"min\":0,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":[]}]}]}]}]},\n",
       "            window,\n",
       "        );\n",
       "    } else {\n",
       "        document\n",
       "            .querySelector('[data-webio-mountpoint=\"18082433034525165206\"]')\n",
       "            .innerHTML = '<strong>WebIO not detected.</strong>';\n",
       "    }\n",
       "    </script>\n",
       "</div>\n"
      ],
      "text/plain": [
       "(div { className=\"field interact-widget\" }\n",
       "    (div { className=\"interact-flex-row interact-widget\" }\n",
       "    (div { className=\"interact-flex-row-left\" }\n",
       "      (label { className=\"interact \" style=Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\") }\n",
       "        \"Slider Hueshift:\"))\n",
       "    (div { className=\"interact-flex-row-center\" }\n",
       "      (input { max=60 min=0 attributes=Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\") step=1 className=\"slider slider is-fullwidth\" style=Dict{Any,Any}() }))\n",
       "    (div { className=\"interact-flex-row-right\" }\n",
       "      (p { attributes=Dict(\"data-bind\"=>\"text: formatted_val\") }))))"
      ]
     },
     "metadata": {
      "application/vnd.webio.node+json": {
       "kernelId": "f7ab6f71-175e-4208-8343-b4cc5cd7ec8d"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "s = slider(0:60,label=\"Slider Hueshift:\")\n",
    "display(s)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"color:#C27157; font-family:monospace; background-color:#E9AC9C\"> <b>#define cf00 #E9AC9C</b> </div><div style=\"color:#E9AC9C; font-family:monospace; background-color:#C27157\"> <b>#define df00 #C27157</b> </div><div style=\"color:#B09440; font-family:monospace; background-color:#F6C384\"> <b>#define cff0 #F6C384</b> </div><div style=\"color:#F6C384; font-family:monospace; background-color:#B09440\"> <b>#define dff0 #B09440</b> </div><div style=\"color:#5E944C; font-family:monospace; background-color:#BAC172\"> <b>#define c0f0 #BAC172</b> </div><div style=\"color:#BAC172; font-family:monospace; background-color:#5E944C\"> <b>#define d0f0 #5E944C</b> </div><div style=\"color:#1CA790; font-family:monospace; background-color:#99DAA2\"> <b>#define c0ff #99DAA2</b> </div><div style=\"color:#99DAA2; font-family:monospace; background-color:#1CA790\"> <b>#define d0ff #1CA790</b> </div><div style=\"color:#548CA1; font-family:monospace; background-color:#86C6B9\"> <b>#define c00f #86C6B9</b> </div><div style=\"color:#86C6B9; font-family:monospace; background-color:#548CA1\"> <b>#define d00f #548CA1</b> </div><div style=\"color:#BB8699; font-family:monospace; background-color:#CFC8CB\"> <b>#define cf0f #CFC8CB</b> </div><div style=\"color:#CFC8CB; font-family:monospace; background-color:#BB8699\"> <b>#define df0f #BB8699</b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "a = makespectrum(26,30,80,60,3,25,10) |> renderspectrumhtml |> html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"color:#B25259; font-family:monospace; background-color:#FA986C\"> <b>#define cf00 #FA986C</b> </div><div style=\"color:#FA986C; font-family:monospace; background-color:#B25259\"> <b>#define df00 #B25259</b> </div><div style=\"color:#C18137; font-family:monospace; background-color:#EAD161\"> <b>#define cff0 #EAD161</b> </div><div style=\"color:#EAD161; font-family:monospace; background-color:#C18137\"> <b>#define dff0 #C18137</b> </div><div style=\"color:#5E7A1E; font-family:monospace; background-color:#71C36E\"> <b>#define c0f0 #71C36E</b> </div><div style=\"color:#71C36E; font-family:monospace; background-color:#5E7A1E\"> <b>#define d0f0 #5E7A1E</b> </div><div style=\"color:#00A275; font-family:monospace; background-color:#43E6CF\"> <b>#define c0ff #43E6CF</b> </div><div style=\"color:#43E6CF; font-family:monospace; background-color:#00A275\"> <b>#define d0ff #00A275</b> </div><div style=\"color:#007D90; font-family:monospace; background-color:#82B4D2\"> <b>#define c00f #82B4D2</b> </div><div style=\"color:#82B4D2; font-family:monospace; background-color:#007D90\"> <b>#define d00f #007D90</b> </div><div style=\"color:#9984A9; font-family:monospace; background-color:#FFBACB\"> <b>#define cf0f #FFBACB</b> </div><div style=\"color:#FFBACB; font-family:monospace; background-color:#9984A9\"> <b>#define df0f #9984A9</b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "a = makespectrum(3,-30,79,54,6,42,0) |> renderspectrumhtml |> html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"color:#D00001; font-family:monospace; background-color:#FF3F39\"> <b>#define cf00 #FF3F39</b> </div><div style=\"color:#FF3F39; font-family:monospace; background-color:#D00001\"> <b>#define df00 #D00001</b> </div><div style=\"color:#B59100; font-family:monospace; background-color:#FFE200\"> <b>#define cff0 #FFE200</b> </div><div style=\"color:#FFE200; font-family:monospace; background-color:#B59100\"> <b>#define dff0 #B59100</b> </div><div style=\"color:#007100; font-family:monospace; background-color:#00C41D\"> <b>#define c0f0 #00C41D</b> </div><div style=\"color:#00C41D; font-family:monospace; background-color:#007100\"> <b>#define d0f0 #007100</b> </div><div style=\"color:#00B9C3; font-family:monospace; background-color:#00FFFF\"> <b>#define c0ff #00FFFF</b> </div><div style=\"color:#00FFFF; font-family:monospace; background-color:#00B9C3\"> <b>#define d0ff #00B9C3</b> </div><div style=\"color:#0067D6; font-family:monospace; background-color:#00B1FF\"> <b>#define c00f #00B1FF</b> </div><div style=\"color:#00B1FF; font-family:monospace; background-color:#0067D6\"> <b>#define d00f #0067D6</b> </div><div style=\"color:#FB3EC7; font-family:monospace; background-color:#FF9EFF\"> <b>#define cf0f #FF9EFF</b> </div><div style=\"color:#FF9EFF; font-family:monospace; background-color:#FB3EC7\"> <b>#define df0f #FB3EC7</b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "a = makespectrum(30,0,80,50,12,100,0) |> renderspectrumhtml |> html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.webio.node+json": {
       "children": [
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "h_start"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 59,
                  "min": 0,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\",\"16\",\"17\",\"18\",\"19\",\"20\",\"21\",\"22\",\"23\",\"24\",\"25\",\"26\",\"27\",\"28\",\"29\",\"30\",\"31\",\"32\",\"33\",\"34\",\"35\",\"36\",\"37\",\"38\",\"39\",\"40\",\"41\",\"42\",\"43\",\"44\",\"45\",\"46\",\"47\",\"48\",\"49\",\"50\",\"51\",\"52\",\"53\",\"54\",\"55\",\"56\",\"57\",\"58\",\"59\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\",\"id\":\"ob_22\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\",\"id\":\"ob_21\",\"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\":\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\",\"id\":\"ob_22\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\",\"id\":\"ob_21\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_22",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_21",
              "sync": true,
              "value": 29
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "h_offset"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 60,
                  "min": -60,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"-60\",\"-59\",\"-58\",\"-57\",\"-56\",\"-55\",\"-54\",\"-53\",\"-52\",\"-51\",\"-50\",\"-49\",\"-48\",\"-47\",\"-46\",\"-45\",\"-44\",\"-43\",\"-42\",\"-41\",\"-40\",\"-39\",\"-38\",\"-37\",\"-36\",\"-35\",\"-34\",\"-33\",\"-32\",\"-31\",\"-30\",\"-29\",\"-28\",\"-27\",\"-26\",\"-25\",\"-24\",\"-23\",\"-22\",\"-21\",\"-20\",\"-19\",\"-18\",\"-17\",\"-16\",\"-15\",\"-14\",\"-13\",\"-12\",\"-11\",\"-10\",\"-9\",\"-8\",\"-7\",\"-6\",\"-5\",\"-4\",\"-3\",\"-2\",\"-1\",\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\",\"16\",\"17\",\"18\",\"19\",\"20\",\"21\",\"22\",\"23\",\"24\",\"25\",\"26\",\"27\",\"28\",\"29\",\"30\",\"31\",\"32\",\"33\",\"34\",\"35\",\"36\",\"37\",\"38\",\"39\",\"40\",\"41\",\"42\",\"43\",\"44\",\"45\",\"46\",\"47\",\"48\",\"49\",\"50\",\"51\",\"52\",\"53\",\"54\",\"55\",\"56\",\"57\",\"58\",\"59\",\"60\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\",\"id\":\"ob_24\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\",\"id\":\"ob_23\",\"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\":\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\",\"id\":\"ob_24\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\",\"id\":\"ob_23\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_24",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_23",
              "sync": true,
              "value": 0
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "c_lightness"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 100,
                  "min": 60,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"60\",\"61\",\"62\",\"63\",\"64\",\"65\",\"66\",\"67\",\"68\",\"69\",\"70\",\"71\",\"72\",\"73\",\"74\",\"75\",\"76\",\"77\",\"78\",\"79\",\"80\",\"81\",\"82\",\"83\",\"84\",\"85\",\"86\",\"87\",\"88\",\"89\",\"90\",\"91\",\"92\",\"93\",\"94\",\"95\",\"96\",\"97\",\"98\",\"99\",\"100\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\",\"id\":\"ob_26\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\",\"id\":\"ob_25\",\"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\":\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\",\"id\":\"ob_26\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\",\"id\":\"ob_25\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_26",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_25",
              "sync": true,
              "value": 80
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "d_lightness"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 80,
                  "min": 40,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"40\",\"41\",\"42\",\"43\",\"44\",\"45\",\"46\",\"47\",\"48\",\"49\",\"50\",\"51\",\"52\",\"53\",\"54\",\"55\",\"56\",\"57\",\"58\",\"59\",\"60\",\"61\",\"62\",\"63\",\"64\",\"65\",\"66\",\"67\",\"68\",\"69\",\"70\",\"71\",\"72\",\"73\",\"74\",\"75\",\"76\",\"77\",\"78\",\"79\",\"80\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\",\"id\":\"ob_28\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\",\"id\":\"ob_27\",\"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\":\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\",\"id\":\"ob_28\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\",\"id\":\"ob_27\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_28",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_27",
              "sync": true,
              "value": 60
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "pc_lightness_offset"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 20,
                  "min": -20,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"-20\",\"-19\",\"-18\",\"-17\",\"-16\",\"-15\",\"-14\",\"-13\",\"-12\",\"-11\",\"-10\",\"-9\",\"-8\",\"-7\",\"-6\",\"-5\",\"-4\",\"-3\",\"-2\",\"-1\",\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\",\"16\",\"17\",\"18\",\"19\",\"20\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\",\"id\":\"ob_30\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\",\"id\":\"ob_29\",\"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\":\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\",\"id\":\"ob_30\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\",\"id\":\"ob_29\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_30",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_29",
              "sync": true,
              "value": 0
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "base_chroma"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 70,
                  "min": 15,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"15\",\"16\",\"17\",\"18\",\"19\",\"20\",\"21\",\"22\",\"23\",\"24\",\"25\",\"26\",\"27\",\"28\",\"29\",\"30\",\"31\",\"32\",\"33\",\"34\",\"35\",\"36\",\"37\",\"38\",\"39\",\"40\",\"41\",\"42\",\"43\",\"44\",\"45\",\"46\",\"47\",\"48\",\"49\",\"50\",\"51\",\"52\",\"53\",\"54\",\"55\",\"56\",\"57\",\"58\",\"59\",\"60\",\"61\",\"62\",\"63\",\"64\",\"65\",\"66\",\"67\",\"68\",\"69\",\"70\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\",\"id\":\"ob_32\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\",\"id\":\"ob_31\",\"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\":\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\",\"id\":\"ob_32\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\",\"id\":\"ob_31\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_32",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_31",
              "sync": true,
              "value": 42
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "chroma_offset"
                 ],
                 "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": "input"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
                   "orient": "horizontal",
                   "type": "range"
                  },
                  "className": "slider slider is-fullwidth",
                  "max": 20,
                  "min": -20,
                  "step": 1,
                  "style": {}
                 },
                 "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": "knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/c6858b59174ecd55f1125712d4e73346b198da01-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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"formatted_vals\":[\"-20\",\"-19\",\"-18\",\"-17\",\"-16\",\"-15\",\"-14\",\"-13\",\"-12\",\"-11\",\"-10\",\"-9\",\"-8\",\"-7\",\"-6\",\"-5\",\"-4\",\"-3\",\"-2\",\"-1\",\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\",\"16\",\"17\",\"18\",\"19\",\"20\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\",\"id\":\"ob_34\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\",\"id\":\"ob_33\",\"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\":\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\",\"id\":\"ob_34\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\",\"id\":\"ob_33\",\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "changes": {
              "id": "ob_34",
              "sync": false,
              "value": 0
             },
             "index": {
              "id": "ob_33",
              "sync": true,
              "value": 0
             }
            },
            "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_40",
            "name": "obs-node"
           },
           "nodeType": "ObservableNode",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "handlers": {},
          "id": "scope-809298cc-bdc9-47c6-82ef-49201d2d073f",
          "imports": {
           "data": [],
           "type": "async_block"
          },
          "mount_callbacks": [],
          "observables": {
           "obs-node": {
            "id": "ob_40",
            "sync": false,
            "value": {
             "children": [
              {
               "children": [],
               "instanceArgs": {
                "namespace": "html",
                "tag": "div"
               },
               "nodeType": "DOM",
               "props": {
                "setInnerHtml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n     width=\"150.0mm\" height=\"50.0mm\"\n     shape-rendering=\"crispEdges\">\n<rect x=\"0.0mm\" y=\"0.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#FFA97F\" stroke=\"none\" />\n<rect x=\"25.0mm\" y=\"0.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#E1C256\" stroke=\"none\" />\n<rect x=\"50.0mm\" y=\"0.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#8BD679\" stroke=\"none\" />\n<rect x=\"75.0mm\" y=\"0.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#2BD9BF\" stroke=\"none\" />\n<rect x=\"100.0mm\" y=\"0.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#8DC9E3\" stroke=\"none\" />\n<rect x=\"125.0mm\" y=\"0.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#F6AEC3\" stroke=\"none\" />\n<rect x=\"0.0mm\" y=\"25.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#D47455\" stroke=\"none\" />\n<rect x=\"25.0mm\" y=\"25.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#A78D2B\" stroke=\"none\" />\n<rect x=\"50.0mm\" y=\"25.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#559F4F\" stroke=\"none\" />\n<rect x=\"75.0mm\" y=\"25.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#00A291\" stroke=\"none\" />\n<rect x=\"100.0mm\" y=\"25.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#5194B3\" stroke=\"none\" />\n<rect x=\"125.0mm\" y=\"25.0mm\"\n      width=\"24.0mm\" height=\"24.0mm\"\n      fill=\"#BD7995\" stroke=\"none\" />\n</svg>"
               },
               "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=\"17830525873051137668\"\n",
       ">\n",
       "    <script>\n",
       "    if (window.require && require.defined && require.defined(\"nbextensions/webio/main\")) {\n",
       "        console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
       "    } else if (window.WebIO) {\n",
       "        WebIO.mount(\n",
       "            document.querySelector('[data-webio-mountpoint=\"17830525873051137668\"]'),\n",
       "            {\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\",\\\"21\\\",\\\"22\\\",\\\"23\\\",\\\"24\\\",\\\"25\\\",\\\"26\\\",\\\"27\\\",\\\"28\\\",\\\"29\\\",\\\"30\\\",\\\"31\\\",\\\"32\\\",\\\"33\\\",\\\"34\\\",\\\"35\\\",\\\"36\\\",\\\"37\\\",\\\"38\\\",\\\"39\\\",\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_22\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_21\\\",\\\"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\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_22\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_21\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_22\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_21\",\"value\":29}}},\"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\":[\"h_start\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":59,\"min\":0,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":{\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"-60\\\",\\\"-59\\\",\\\"-58\\\",\\\"-57\\\",\\\"-56\\\",\\\"-55\\\",\\\"-54\\\",\\\"-53\\\",\\\"-52\\\",\\\"-51\\\",\\\"-50\\\",\\\"-49\\\",\\\"-48\\\",\\\"-47\\\",\\\"-46\\\",\\\"-45\\\",\\\"-44\\\",\\\"-43\\\",\\\"-42\\\",\\\"-41\\\",\\\"-40\\\",\\\"-39\\\",\\\"-38\\\",\\\"-37\\\",\\\"-36\\\",\\\"-35\\\",\\\"-34\\\",\\\"-33\\\",\\\"-32\\\",\\\"-31\\\",\\\"-30\\\",\\\"-29\\\",\\\"-28\\\",\\\"-27\\\",\\\"-26\\\",\\\"-25\\\",\\\"-24\\\",\\\"-23\\\",\\\"-22\\\",\\\"-21\\\",\\\"-20\\\",\\\"-19\\\",\\\"-18\\\",\\\"-17\\\",\\\"-16\\\",\\\"-15\\\",\\\"-14\\\",\\\"-13\\\",\\\"-12\\\",\\\"-11\\\",\\\"-10\\\",\\\"-9\\\",\\\"-8\\\",\\\"-7\\\",\\\"-6\\\",\\\"-5\\\",\\\"-4\\\",\\\"-3\\\",\\\"-2\\\",\\\"-1\\\",\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\",\\\"21\\\",\\\"22\\\",\\\"23\\\",\\\"24\\\",\\\"25\\\",\\\"26\\\",\\\"27\\\",\\\"28\\\",\\\"29\\\",\\\"30\\\",\\\"31\\\",\\\"32\\\",\\\"33\\\",\\\"34\\\",\\\"35\\\",\\\"36\\\",\\\"37\\\",\\\"38\\\",\\\"39\\\",\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\",\\\"60\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_24\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_23\\\",\\\"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\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_24\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_23\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_24\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_23\",\"value\":0}}},\"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\":[\"h_offset\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":60,\"min\":-60,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":{\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"60\\\",\\\"61\\\",\\\"62\\\",\\\"63\\\",\\\"64\\\",\\\"65\\\",\\\"66\\\",\\\"67\\\",\\\"68\\\",\\\"69\\\",\\\"70\\\",\\\"71\\\",\\\"72\\\",\\\"73\\\",\\\"74\\\",\\\"75\\\",\\\"76\\\",\\\"77\\\",\\\"78\\\",\\\"79\\\",\\\"80\\\",\\\"81\\\",\\\"82\\\",\\\"83\\\",\\\"84\\\",\\\"85\\\",\\\"86\\\",\\\"87\\\",\\\"88\\\",\\\"89\\\",\\\"90\\\",\\\"91\\\",\\\"92\\\",\\\"93\\\",\\\"94\\\",\\\"95\\\",\\\"96\\\",\\\"97\\\",\\\"98\\\",\\\"99\\\",\\\"100\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_26\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_25\\\",\\\"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\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_26\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_25\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_26\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_25\",\"value\":80}}},\"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\":[\"c_lightness\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":100,\"min\":60,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":{\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\",\\\"60\\\",\\\"61\\\",\\\"62\\\",\\\"63\\\",\\\"64\\\",\\\"65\\\",\\\"66\\\",\\\"67\\\",\\\"68\\\",\\\"69\\\",\\\"70\\\",\\\"71\\\",\\\"72\\\",\\\"73\\\",\\\"74\\\",\\\"75\\\",\\\"76\\\",\\\"77\\\",\\\"78\\\",\\\"79\\\",\\\"80\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_28\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_27\\\",\\\"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\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_28\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_27\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_28\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_27\",\"value\":60}}},\"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\":[\"d_lightness\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":80,\"min\":40,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":{\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"-20\\\",\\\"-19\\\",\\\"-18\\\",\\\"-17\\\",\\\"-16\\\",\\\"-15\\\",\\\"-14\\\",\\\"-13\\\",\\\"-12\\\",\\\"-11\\\",\\\"-10\\\",\\\"-9\\\",\\\"-8\\\",\\\"-7\\\",\\\"-6\\\",\\\"-5\\\",\\\"-4\\\",\\\"-3\\\",\\\"-2\\\",\\\"-1\\\",\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_30\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_29\\\",\\\"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\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_30\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_29\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_30\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_29\",\"value\":0}}},\"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\":[\"pc_lightness_offset\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":20,\"min\":-20,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":{\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\",\\\"21\\\",\\\"22\\\",\\\"23\\\",\\\"24\\\",\\\"25\\\",\\\"26\\\",\\\"27\\\",\\\"28\\\",\\\"29\\\",\\\"30\\\",\\\"31\\\",\\\"32\\\",\\\"33\\\",\\\"34\\\",\\\"35\\\",\\\"36\\\",\\\"37\\\",\\\"38\\\",\\\"39\\\",\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\",\\\"60\\\",\\\"61\\\",\\\"62\\\",\\\"63\\\",\\\"64\\\",\\\"65\\\",\\\"66\\\",\\\"67\\\",\\\"68\\\",\\\"69\\\",\\\"70\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_32\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_31\\\",\\\"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\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_32\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_31\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_32\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_31\",\"value\":42}}},\"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\":[\"base_chroma\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":70,\"min\":15,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":{\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/24aef16d8ab373c8951cc4d8c8a2672e3ab38fad-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/231049cd16933b7e9bf3c757999ac1d5f4473f40-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/c6858b59174ecd55f1125712d4e73346b198da01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\",\"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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"-20\\\",\\\"-19\\\",\\\"-18\\\",\\\"-17\\\",\\\"-16\\\",\\\"-15\\\",\\\"-14\\\",\\\"-13\\\",\\\"-12\\\",\\\"-11\\\",\\\"-10\\\",\\\"-9\\\",\\\"-8\\\",\\\"-7\\\",\\\"-6\\\",\\\"-5\\\",\\\"-4\\\",\\\"-3\\\",\\\"-2\\\",\\\"-1\\\",\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_34\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_33\\\",\\\"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\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_34\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_33\\\",\\\"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\\/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_34\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_33\",\"value\":0}}},\"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\":[\"chroma_offset\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":20,\"min\":-20,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"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\":\"scope-e0fcb8e5-f6eb-4129-acac-a65314002a7e\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-node\":{\"sync\":false,\"id\":\"ob_38\",\"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<!DOCTYPE svg PUBLIC \\\"-\\/\\/W3C\\/\\/DTD SVG 1.1\\/\\/EN\\\"\\n \\\"http:\\/\\/www.w3.org\\/Graphics\\/SVG\\/1.1\\/DTD\\/svg11.dtd\\\">\\n<svg xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\" version=\\\"1.1\\\"\\n     width=\\\"150.0mm\\\" height=\\\"50.0mm\\\"\\n     shape-rendering=\\\"crispEdges\\\">\\n<rect x=\\\"0.0mm\\\" y=\\\"0.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#FFA97F\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"25.0mm\\\" y=\\\"0.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#E1C256\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"50.0mm\\\" y=\\\"0.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#8BD679\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"75.0mm\\\" y=\\\"0.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#2BD9BF\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"100.0mm\\\" y=\\\"0.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#8DC9E3\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"125.0mm\\\" y=\\\"0.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#F6AEC3\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"0.0mm\\\" y=\\\"25.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#D47455\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"25.0mm\\\" y=\\\"25.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#A78D2B\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"50.0mm\\\" y=\\\"25.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#559F4F\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"75.0mm\\\" y=\\\"25.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#00A291\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"100.0mm\\\" y=\\\"25.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#5194B3\\\" stroke=\\\"none\\\" \\/>\\n<rect x=\\\"125.0mm\\\" y=\\\"25.0mm\\\"\\n      width=\\\"24.0mm\\\" height=\\\"24.0mm\\\"\\n      fill=\\\"#BD7995\\\" stroke=\\\"none\\\" \\/>\\n<\\/svg>\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}}}},\"children\":[{\"props\":{},\"nodeType\":\"ObservableNode\",\"type\":\"node\",\"instanceArgs\":{\"id\":\"ob_38\",\"name\":\"obs-node\"},\"children\":[]}]}]},\n",
       "            window,\n",
       "        );\n",
       "    } else {\n",
       "        document\n",
       "            .querySelector('[data-webio-mountpoint=\"17830525873051137668\"]')\n",
       "            .innerHTML = '<strong>WebIO not detected.</strong>';\n",
       "    }\n",
       "    </script>\n",
       "</div>\n"
      ],
      "text/plain": [
       "Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"h_start\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>59,:min=>0,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "29, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\",\\\"21\\\",\\\"22\\\",\\\"23\\\",\\\"24\\\",\\\"25\\\",\\\"26\\\",\\\"27\\\",\\\"28\\\",\\\"29\\\",\\\"30\\\",\\\"31\\\",\\\"32\\\",\\\"33\\\",\\\"34\\\",\\\"35\\\",\\\"36\\\",\\\"37\\\",\\\"38\\\",\\\"39\\\",\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_22\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_21\\\",\\\"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\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_22\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-337c14e2-6c37-43d9-8016-74c54101dfab\\\",\\\"id\\\":\\\"ob_21\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"h_offset\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>60,:min=>-60,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "0, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"-60\\\",\\\"-59\\\",\\\"-58\\\",\\\"-57\\\",\\\"-56\\\",\\\"-55\\\",\\\"-54\\\",\\\"-53\\\",\\\"-52\\\",\\\"-51\\\",\\\"-50\\\",\\\"-49\\\",\\\"-48\\\",\\\"-47\\\",\\\"-46\\\",\\\"-45\\\",\\\"-44\\\",\\\"-43\\\",\\\"-42\\\",\\\"-41\\\",\\\"-40\\\",\\\"-39\\\",\\\"-38\\\",\\\"-37\\\",\\\"-36\\\",\\\"-35\\\",\\\"-34\\\",\\\"-33\\\",\\\"-32\\\",\\\"-31\\\",\\\"-30\\\",\\\"-29\\\",\\\"-28\\\",\\\"-27\\\",\\\"-26\\\",\\\"-25\\\",\\\"-24\\\",\\\"-23\\\",\\\"-22\\\",\\\"-21\\\",\\\"-20\\\",\\\"-19\\\",\\\"-18\\\",\\\"-17\\\",\\\"-16\\\",\\\"-15\\\",\\\"-14\\\",\\\"-13\\\",\\\"-12\\\",\\\"-11\\\",\\\"-10\\\",\\\"-9\\\",\\\"-8\\\",\\\"-7\\\",\\\"-6\\\",\\\"-5\\\",\\\"-4\\\",\\\"-3\\\",\\\"-2\\\",\\\"-1\\\",\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\",\\\"21\\\",\\\"22\\\",\\\"23\\\",\\\"24\\\",\\\"25\\\",\\\"26\\\",\\\"27\\\",\\\"28\\\",\\\"29\\\",\\\"30\\\",\\\"31\\\",\\\"32\\\",\\\"33\\\",\\\"34\\\",\\\"35\\\",\\\"36\\\",\\\"37\\\",\\\"38\\\",\\\"39\\\",\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\",\\\"60\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_24\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_23\\\",\\\"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\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_24\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-19e7823c-37ac-4cb0-aee5-7f8aae66e684\\\",\\\"id\\\":\\\"ob_23\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"c_lightness\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>100,:min=>60,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "80, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"60\\\",\\\"61\\\",\\\"62\\\",\\\"63\\\",\\\"64\\\",\\\"65\\\",\\\"66\\\",\\\"67\\\",\\\"68\\\",\\\"69\\\",\\\"70\\\",\\\"71\\\",\\\"72\\\",\\\"73\\\",\\\"74\\\",\\\"75\\\",\\\"76\\\",\\\"77\\\",\\\"78\\\",\\\"79\\\",\\\"80\\\",\\\"81\\\",\\\"82\\\",\\\"83\\\",\\\"84\\\",\\\"85\\\",\\\"86\\\",\\\"87\\\",\\\"88\\\",\\\"89\\\",\\\"90\\\",\\\"91\\\",\\\"92\\\",\\\"93\\\",\\\"94\\\",\\\"95\\\",\\\"96\\\",\\\"97\\\",\\\"98\\\",\\\"99\\\",\\\"100\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_26\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_25\\\",\\\"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\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_26\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb4b05fc-e28b-467f-9c1e-acb0a0c50e54\\\",\\\"id\\\":\\\"ob_25\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"d_lightness\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>80,:min=>40,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "60, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\",\\\"60\\\",\\\"61\\\",\\\"62\\\",\\\"63\\\",\\\"64\\\",\\\"65\\\",\\\"66\\\",\\\"67\\\",\\\"68\\\",\\\"69\\\",\\\"70\\\",\\\"71\\\",\\\"72\\\",\\\"73\\\",\\\"74\\\",\\\"75\\\",\\\"76\\\",\\\"77\\\",\\\"78\\\",\\\"79\\\",\\\"80\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_28\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_27\\\",\\\"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\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_28\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-c3867dff-ef61-40ab-824b-b65b2782cece\\\",\\\"id\\\":\\\"ob_27\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"pc_lightness_offset\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>20,:min=>-20,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "0, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"-20\\\",\\\"-19\\\",\\\"-18\\\",\\\"-17\\\",\\\"-16\\\",\\\"-15\\\",\\\"-14\\\",\\\"-13\\\",\\\"-12\\\",\\\"-11\\\",\\\"-10\\\",\\\"-9\\\",\\\"-8\\\",\\\"-7\\\",\\\"-6\\\",\\\"-5\\\",\\\"-4\\\",\\\"-3\\\",\\\"-2\\\",\\\"-1\\\",\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_30\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_29\\\",\\\"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\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_30\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-bff6484d-46f1-4515-8d03-e0d1cc053273\\\",\\\"id\\\":\\\"ob_29\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"base_chroma\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>70,:min=>15,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "42, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\",\\\"21\\\",\\\"22\\\",\\\"23\\\",\\\"24\\\",\\\"25\\\",\\\"26\\\",\\\"27\\\",\\\"28\\\",\\\"29\\\",\\\"30\\\",\\\"31\\\",\\\"32\\\",\\\"33\\\",\\\"34\\\",\\\"35\\\",\\\"36\\\",\\\"37\\\",\\\"38\\\",\\\"39\\\",\\\"40\\\",\\\"41\\\",\\\"42\\\",\\\"43\\\",\\\"44\\\",\\\"45\\\",\\\"46\\\",\\\"47\\\",\\\"48\\\",\\\"49\\\",\\\"50\\\",\\\"51\\\",\\\"52\\\",\\\"53\\\",\\\"54\\\",\\\"55\\\",\\\"56\\\",\\\"57\\\",\\\"58\\\",\\\"59\\\",\\\"60\\\",\\\"61\\\",\\\"62\\\",\\\"63\\\",\\\"64\\\",\\\"65\\\",\\\"66\\\",\\\"67\\\",\\\"68\\\",\\\"69\\\",\\\"70\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_32\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_31\\\",\\\"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\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_32\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-43ef0e1f-e1cf-4f8f-8dd0-f81aa81d6fa3\\\",\\\"id\\\":\\\"ob_31\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Node{DOM}(DOM(:html, :div), Any[Scope(\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\", Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"chroma_offset\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\"), 2), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :input), Any[], Dict{Symbol,Any}(:max=>20,:min=>-20,:attributes=>Dict{Any,Any}(:type=>\"range\",Symbol(\"data-bind\")=>\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\"=>\"horizontal\"),:step=>1,:className=>\"slider slider is-fullwidth\",:style=>Dict{Any,Any}()), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\"), 1), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text: formatted_val\")), 0)], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"), 1)], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 7), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\"=>(Observable{Int64} with 1 listeners. Value:\n",
       "0, nothing),\"index\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "0, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/home/ntm/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/all.js\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/InteractBase/R8JgH/src/../assets/style.css\"), Asset(\"css\", nothing, \"/home/ntm/.julia/packages/Interact/0klKX/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})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.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(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"formatted_vals\\\":[\\\"-20\\\",\\\"-19\\\",\\\"-18\\\",\\\"-17\\\",\\\"-16\\\",\\\"-15\\\",\\\"-14\\\",\\\"-13\\\",\\\"-12\\\",\\\"-11\\\",\\\"-10\\\",\\\"-9\\\",\\\"-8\\\",\\\"-7\\\",\\\"-6\\\",\\\"-5\\\",\\\"-4\\\",\\\"-3\\\",\\\"-2\\\",\\\"-1\\\",\\\"0\\\",\\\"1\\\",\\\"2\\\",\\\"3\\\",\\\"4\\\",\\\"5\\\",\\\"6\\\",\\\"7\\\",\\\"8\\\",\\\"9\\\",\\\"10\\\",\\\"11\\\",\\\"12\\\",\\\"13\\\",\\\"14\\\",\\\"15\\\",\\\"16\\\",\\\"17\\\",\\\"18\\\",\\\"19\\\",\\\"20\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_34\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_33\\\",\\\"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\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_34\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"knockout-component-cb29e6da-e335-4f45-8dbb-d3a319288ced\\\",\\\"id\\\":\\\"ob_33\\\",\\\"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/e2afb572c53698706b2c50852e78c7b0fb317e3a-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/bbf057b77d483a83c30cbe947a831ccc98aeae5d-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\"), 1), Observable{Any} with 0 listeners. Value:\n",
       "Node{DOM}(DOM(:html, :div), Any[LCHab{Float32}[LCHab{Float32}(78.9437,50.5543,48.0659) LCHab{Float32}(79.1458,56.9942,91.4374) … LCHab{Float32}(77.8638,22.7622,236.104) LCHab{Float32}(78.3096,29.4892,359.413); LCHab{Float32}(59.2124,48.3416,44.0195) LCHab{Float32}(59.3893,52.9579,90.5446) … LCHab{Float32}(58.0886,25.9202,242.465) LCHab{Float32}(58.5746,31.0209,351.977)]], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"), 1)], Dict{Symbol,Any}(), 8)"
      ]
     },
     "execution_count": 16,
     "metadata": {
      "application/vnd.webio.node+json": {
       "kernelId": "f7ab6f71-175e-4208-8343-b4cc5cd7ec8d"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "@manipulate for h_start = 0:59, h_offset = -60:60, c_lightness= 60:100,d_lightness=40:80, pc_lightness_offset = -20:20, base_chroma = 15:70, chroma_offset = -20:20\n",
    "    makespectrum(h_start,h_offset,c_lightness,d_lightness,pc_lightness_offset,base_chroma,chroma_offset) |> renderspectrum\n",
    "end"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Dict{String,Colorant} with 18 entries:\n",
       "  \"df0f\" => LCHab{Float32}(61.5744,23.5045,355.466)\n",
       "  \"cf0f\" => LCHab{Float32}(81.247,2.88548,350.409)\n",
       "  \"d0ff\" => LCHab{Float32}(61.6414,40.4057,177.253)\n",
       "  \"c0f0\" => LCHab{Float32}(75.9962,41.5025,110.604)\n",
       "  \"d00f\" => LCHab{Float32}(55.3027,21.0664,234.265)\n",
       "  \"g333\" => LCHab{Float64}(30.48,5.68,173.94)\n",
       "  \"df00\" => LCHab{Float32}(56.1961,40.8338,44.2151)\n",
       "  \"c0ff\" => LCHab{Float32}(81.6468,38.2719,146.006)\n",
       "  \"dff0\" => LCHab{Float32}(62.3004,47.2148,89.1442)\n",
       "  \"gccc\" => LCHab{Float64}(82.02,9.82,129.66)\n",
       "  \"cff0\" => LCHab{Float32}(81.9015,39.9041,74.8217)\n",
       "  \"cf00\" => LCHab{Float32}(75.6894,26.4325,40.2862)\n",
       "  \"g999\" => LCHab{Float64}(64.84,8.44,144.42)\n",
       "  \"gfff\" => LCHab{Float64}(99.2,11.2,114.9)\n",
       "  \"g000\" => LCHab{Float64}(13.3,4.3,188.7)\n",
       "  \"g666\" => LCHab{Float64}(47.66,7.06,159.18)\n",
       "  \"d0f0\" => LCHab{Float32}(56.2288,45.5946,135.053)\n",
       "  \"c00f\" => LCHab{Float32}(75.355,23.1261,180.304)"
      ]
     },
     "execution_count": 17,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "myColors"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n",
       "     width=\"75.0mm\" height=\"150.0mm\"\n",
       "     shape-rendering=\"crispEdges\">\n",
       "<rect x=\"0.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#E9AC9C\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#C27157\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#1B2423\" stroke=\"none\" />\n",
       "<rect x=\"0.0mm\" y=\"25.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#F6C384\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"25.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#B09440\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"25.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#3E4A47\" stroke=\"none\" />\n",
       "<rect x=\"0.0mm\" y=\"50.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#BAC172\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"50.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#5E944C\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"50.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#67746D\" stroke=\"none\" />\n",
       "<rect x=\"0.0mm\" y=\"75.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#99DAA2\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"75.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#1CA790\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"75.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#94A194\" stroke=\"none\" />\n",
       "<rect x=\"0.0mm\" y=\"100.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#86C6B9\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"100.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#548CA1\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"100.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#C6CFBE\" stroke=\"none\" />\n",
       "<rect x=\"0.0mm\" y=\"125.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#CFC8CB\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"125.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#BB8699\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"125.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#FCFFE9\" stroke=\"none\" />\n",
       "</svg>"
      ],
      "text/plain": [
       "6×3 Array{LCHab{Any},2} with eltype LCHab:\n",
       " LCHab{Float32}(75.6894,26.4325,40.2862)  …  LCHab{Float64}(13.3,4.3,188.7)   \n",
       " LCHab{Float32}(81.9015,39.9041,74.8217)     LCHab{Float64}(30.48,5.68,173.94)\n",
       " LCHab{Float32}(75.9962,41.5025,110.604)     LCHab{Float64}(47.66,7.06,159.18)\n",
       " LCHab{Float32}(81.6468,38.2719,146.006)     LCHab{Float64}(64.84,8.44,144.42)\n",
       " LCHab{Float32}(75.355,23.1261,180.304)      LCHab{Float64}(82.02,9.82,129.66)\n",
       " LCHab{Float32}(81.247,2.88548,350.409)   …  LCHab{Float64}(99.2,11.2,114.9)  "
      ]
     },
     "execution_count": 18,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "[huespace.c huespace.d greyspace.g]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```\n",
    "*background: g000\n",
    "*foreground: gfff\n",
    "*color0:  g333\n",
    "*color7:  g999\n",
    "*color8:  g666\n",
    "*color15: gccc\n",
    "\n",
    "*color1:  df00\n",
    "*color2:  d0f0  \n",
    "*color3:  dff0   \n",
    "*color4:  d00f \n",
    "*color5:  df0f    \n",
    "*color6:  d0ff   \n",
    "*color9:  cf00\n",
    "*color10: c0f0  \n",
    "*color11: cff0   \n",
    "*color12: c00f \n",
    "*color13: cf0f    \n",
    "*color14: c0ff\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"font-family:Ubuntu Mono;color:#1B2423;background-color:#3E4A47\"> <b><span style=\"color:#E9AC9C\"> red </span><span style=\"color:#F6C384\"> yel </span><span style=\"color:#BAC172\"> gre </span><span style=\"color:#99DAA2\"> cya </span><span style=\"color:#86C6B9\"> blu </span><span style=\"color:#CFC8CB\"> mag </span></b> </div><div style=\"font-family:Ubuntu Mono;color:#1B2423;background-color:#3E4A47\"> <b><span style=\"color:#C27157\"> red </span><span style=\"color:#B09440\"> yel </span><span style=\"color:#5E944C\"> gre </span><span style=\"color:#1CA790\"> cya </span><span style=\"color:#548CA1\"> blu </span><span style=\"color:#BB8699\"> mag </span></b> </div><div style=\"font-family:Ubuntu Mono;color:#1B2423;background-color:#C6CFBE\"> <b><span style=\"color:#E9AC9C\"> red </span><span style=\"color:#F6C384\"> yel </span><span style=\"color:#BAC172\"> gre </span><span style=\"color:#99DAA2\"> cya </span><span style=\"color:#86C6B9\"> blu </span><span style=\"color:#CFC8CB\"> mag </span></b> </div><div style=\"font-family:Ubuntu Mono;color:#1B2423;background-color:#C6CFBE\"> <b><span style=\"color:#C27157\"> red </span><span style=\"color:#B09440\"> yel </span><span style=\"color:#5E944C\"> gre </span><span style=\"color:#1CA790\"> cya </span><span style=\"color:#548CA1\"> blu </span><span style=\"color:#BB8699\"> mag </span></b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ss(c,x) = style(\"div\",\"\"\"font-family:Ubuntu Mono;color:#$(hex(myColors[\"g000\"]));background-color:#$(hex(myColors[c]))\"\"\",x)\n",
    "#hex(myColors[\"g000\"])\n",
    "ct(c,tx) = style(\"span\",\"color:#$(hex(myColors[c]))\",tx)\n",
    "#println()\n",
    "html(string(\n",
    " ss(\"g333\",string( \"<b>\",ct(\"cf00\",\"red\"),ct(\"cff0\",\"yel\"),ct(\"c0f0\",\"gre\"),ct(\"c0ff\",\"cya\"),ct(\"c00f\",\"blu\"),ct(\"cf0f\",\"mag\"),\"</b>\" ))\n",
    ",ss(\"g333\",string( \"<b>\",ct(\"df00\",\"red\"),ct(\"dff0\",\"yel\"),ct(\"d0f0\",\"gre\"),ct(\"d0ff\",\"cya\"),ct(\"d00f\",\"blu\"),ct(\"df0f\",\"mag\"),\"</b>\" ))\n",
    ",ss(\"gccc\",string( \"<b>\",ct(\"cf00\",\"red\"),ct(\"cff0\",\"yel\"),ct(\"c0f0\",\"gre\"),ct(\"c0ff\",\"cya\"),ct(\"c00f\",\"blu\"),ct(\"cf0f\",\"mag\"),\"</b>\" ))\n",
    ",ss(\"gccc\",string( \"<b>\",ct(\"df00\",\"red\"),ct(\"dff0\",\"yel\"),ct(\"d0f0\",\"gre\"),ct(\"d0ff\",\"cya\"),ct(\"d00f\",\"blu\"),ct(\"df0f\",\"mag\"),\"</b>\" ))\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# UI Colors"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n",
       "     width=\"180.0mm\" height=\"25.0mm\"\n",
       "     shape-rendering=\"crispEdges\">\n",
       "<rect x=\"0.0mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#00302C\" stroke=\"none\" />\n",
       "<rect x=\"13.846153846153847mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#004034\" stroke=\"none\" />\n",
       "<rect x=\"27.692307692307693mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#00513B\" stroke=\"none\" />\n",
       "<rect x=\"41.53846153846154mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#006343\" stroke=\"none\" />\n",
       "<rect x=\"55.38461538461539mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#00754A\" stroke=\"none\" />\n",
       "<rect x=\"69.23076923076923mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#008752\" stroke=\"none\" />\n",
       "<rect x=\"83.07692307692308mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#269A59\" stroke=\"none\" />\n",
       "<rect x=\"96.92307692307693mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#4FAC62\" stroke=\"none\" />\n",
       "<rect x=\"110.76923076923077mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#70BF6A\" stroke=\"none\" />\n",
       "<rect x=\"124.61538461538461mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#90D174\" stroke=\"none\" />\n",
       "<rect x=\"138.46153846153845mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#B0E37E\" stroke=\"none\" />\n",
       "<rect x=\"152.30769230769232mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#D0F58A\" stroke=\"none\" />\n",
       "<rect x=\"166.15384615384616mm\" y=\"0.0mm\"\n",
       "      width=\"12.846153846153847mm\" height=\"24.0mm\"\n",
       "      fill=\"#F1FF97\" stroke=\"none\" />\n",
       "</svg>"
      ],
      "text/plain": [
       "13-element LinRange{LCHab{Float64}}:\n",
       " LCHab{Float64}(13.3,49.3,188.7),…,LCHab{Float64}(99.2,56.2,114.9)"
      ]
     },
     "execution_count": 20,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "range(LCHab(black.l,black.c+45,black.h),LCHab(white.l,white.c+45,white.h),length=13)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"color:#FCFFE9; font-family:monospace; background-color:#1B2423\"> <b>#define g000 #1B2423</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#26302F\"> <b>#define g111 #26302F</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#323D3A\"> <b>#define g222 #323D3A</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#3E4A47\"> <b>#define g333 #3E4A47</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#4B5853\"> <b>#define g444 #4B5853</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#596660\"> <b>#define g555 #596660</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#67746D\"> <b>#define g666 #67746D</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#75837A\"> <b>#define g777 #75837A</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#859287\"> <b>#define g888 #859287</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#94A194\"> <b>#define g999 #94A194</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#A4B0A2\"> <b>#define gaaa #A4B0A2</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#B5BFB0\"> <b>#define gbbb #B5BFB0</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#C6CFBE\"> <b>#define gccc #C6CFBE</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#D7DFCC\"> <b>#define gddd #D7DFCC</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#E9EFDA\"> <b>#define geee #E9EFDA</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#FCFFE9\"> <b>#define gfff #FCFFE9</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#002B28\"> <b>#define h000 #002B28</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#005E49\"> <b>#define h333 #005E49</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#57946B\"> <b>#define h666 #57946B</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#A4CB91\"> <b>#define h999 #A4CB91</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#F7FFBC\"> <b>#define hccc #F7FFBC</b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "body = \"\"\n",
    "greys = range(black,white,length=16)\n",
    "for (i,c) in enumerate(greys)\n",
    "    body = body * colorbardiv( i > 9 ? black : white, c,\"#define g$(repeat(string((i-1),base=16),3)) #$(hex(c))\")\n",
    "end\n",
    "selection = range(LCHab(black.l,black.c+25,black.h),LCHab(white.l,white.c+25,white.h),length=5)\n",
    "for (i,c) in enumerate(selection)\n",
    "    body = body * colorbardiv( i > 2 ? black : white, c,\"#define h$(repeat(string(3*(i-1),base=16),3)) #$(hex(c))\")\n",
    "end\n",
    "html(body)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Oomox (GTK Theme)\n",
    "for use with https://github.com/actionless/oomox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"color:#1B2423; font-family:monospace; background-color:#D7DFCC\"> <b>name=\"pleochroic-diopside\"</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#D7DFCC\"> <b>BG=D7DFCC</b> </div><div style=\"color:#D7DFCC; font-family:monospace; background-color:#1B2423\"> <b>FG=1B2423</b> </div><div style=\"color:#C6CFBE; font-family:monospace; background-color:#26302F\"> <b>MENU_BG=26302F</b> </div><div style=\"color:#26302F; font-family:monospace; background-color:#C6CFBE\"> <b>MENU_FG=C6CFBE</b> </div><div style=\"color:#57946B; font-family:monospace; background-color:#005E49\"> <b>SEL_BG=005E49</b> </div><div style=\"color:#005E49; font-family:monospace; background-color:#57946B\"> <b>SEL_FG=57946B</b> </div><div style=\"color:#323D3A; font-family:monospace; background-color:#FCFFE9\"> <b>TXT_BG=FCFFE9</b> </div><div style=\"color:#FCFFE9; font-family:monospace; background-color:#323D3A\"> <b>TXT_FG=323D3A</b> </div><div style=\"color:#4B5853; font-family:monospace; background-color:#E9EFDA\"> <b>BTN_BG=E9EFDA</b> </div><div style=\"color:#E9EFDA; font-family:monospace; background-color:#4B5853\"> <b>BTN_FG=4B5853</b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# oomox color scheme\n",
    "oomox_name = \"pleochroic-diopside\"\n",
    "greys = range(black,white,length=16)\n",
    "body = prod([\n",
    "    colorbardiv(greys[1],greys[14],\"name=\\\"$(oomox_name)\\\"\"),\n",
    "    colorbardiv(greys[1],greys[14],\"BG=$(greys[14] |> hex)\"),\n",
    "    colorbardiv(greys[14],greys[1],\"FG=$(greys[1] |> hex)\"),\n",
    "    colorbardiv(greys[13],greys[2],\"MENU_BG=$(greys[2] |> hex)\"),\n",
    "    colorbardiv(greys[2],greys[13],\"MENU_FG=$(greys[13] |> hex)\"),\n",
    "    colorbardiv(selection[3],selection[2],\"SEL_BG=$(selection[2] |> hex)\"),\n",
    "    colorbardiv(selection[2],selection[3],\"SEL_FG=$(selection[3] |> hex)\"),\n",
    "    colorbardiv(greys[3],greys[16],\"TXT_BG=$(greys[16] |> hex)\"),\n",
    "    colorbardiv(greys[16],greys[3],\"TXT_FG=$(greys[3] |> hex)\"),\n",
    "    colorbardiv(greys[5],greys[15],\"BTN_BG=$(greys[15] |> hex)\"),\n",
    "    colorbardiv(greys[15],greys[5],\"BTN_FG=$(greys[5] |> hex)\"),\n",
    "    ])\n",
    "\n",
    "html(body)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"color:#C6CFBE; font-family:monospace; background-color:#323D3A\"> <b>name=\"pleochroic-diopside-dark\"</b> </div><div style=\"color:#C6CFBE; font-family:monospace; background-color:#323D3A\"> <b>BG=323D3A</b> </div><div style=\"color:#323D3A; font-family:monospace; background-color:#C6CFBE\"> <b>FG=C6CFBE</b> </div><div style=\"color:#B5BFB0; font-family:monospace; background-color:#1B2423\"> <b>MENU_BG=1B2423</b> </div><div style=\"color:#1B2423; font-family:monospace; background-color:#B5BFB0\"> <b>MENU_FG=B5BFB0</b> </div><div style=\"color:#002B28; font-family:monospace; background-color:#005E49\"> <b>SEL_BG=005E49</b> </div><div style=\"color:#005E49; font-family:monospace; background-color:#002B28\"> <b>SEL_FG=002B28</b> </div><div style=\"color:#859287; font-family:monospace; background-color:#26302F\"> <b>TXT_BG=26302F</b> </div><div style=\"color:#26302F; font-family:monospace; background-color:#859287\"> <b>TXT_FG=859287</b> </div><div style=\"color:#D7DFCC; font-family:monospace; background-color:#4B5853\"> <b>BTN_BG=4B5853</b> </div><div style=\"color:#4B5853; font-family:monospace; background-color:#D7DFCC\"> <b>BTN_FG=D7DFCC</b> </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# oomox color scheme\n",
    "greys = range(black,white,length=16)\n",
    "body = prod([\n",
    "    colorbardiv(greys[13],greys[3],\"name=\\\"$(oomox_name)-dark\\\"\"),\n",
    "    colorbardiv(greys[13],greys[3],\"BG=$(greys[3] |> hex)\"),\n",
    "    colorbardiv(greys[3],greys[13],\"FG=$(greys[13] |> hex)\"),\n",
    "    colorbardiv(greys[12],greys[1],\"MENU_BG=$(greys[1] |> hex)\"),\n",
    "    colorbardiv(greys[1],greys[12],\"MENU_FG=$(greys[12] |> hex)\"),\n",
    "    colorbardiv(selection[1],selection[2],\"SEL_BG=$(selection[2] |> hex)\"),\n",
    "    colorbardiv(selection[2],selection[1],\"SEL_FG=$(selection[1] |> hex)\"),\n",
    "    colorbardiv(greys[9],greys[2],\"TXT_BG=$(greys[2] |> hex)\"),\n",
    "    colorbardiv(greys[2],greys[9],\"TXT_FG=$(greys[9] |> hex)\"),\n",
    "    colorbardiv(greys[14],greys[5],\"BTN_BG=$(greys[5] |> hex)\"),\n",
    "    colorbardiv(greys[5],greys[14],\"BTN_FG=$(greys[14] |> hex)\"),\n",
    "    ])\n",
    "\n",
    "html(body)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n",
       "     width=\"150.0mm\" height=\"25.0mm\"\n",
       "     shape-rendering=\"crispEdges\">\n",
       "<rect x=\"0.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#021E22\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#1F4447\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#496C6C\" stroke=\"none\" />\n",
       "<rect x=\"75.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#7D958F\" stroke=\"none\" />\n",
       "<rect x=\"100.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#B8BFAF\" stroke=\"none\" />\n",
       "<rect x=\"125.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#FCE9CB\" stroke=\"none\" />\n",
       "</svg>"
      ],
      "text/plain": [
       "6-element Array{RGB{N0f8},1} with eltype RGB{FixedPointNumbers.Normed{UInt8,8}}:\n",
       " RGB{N0f8}(0.008,0.118,0.133)\n",
       " RGB{N0f8}(0.122,0.267,0.278)\n",
       " RGB{N0f8}(0.286,0.424,0.424)\n",
       " RGB{N0f8}(0.49,0.584,0.561) \n",
       " RGB{N0f8}(0.722,0.749,0.686)\n",
       " RGB{N0f8}(0.988,0.914,0.796)"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "[colorant\"#021E22\",colorant\"#1F4447\",colorant\"#496C6C\",colorant\"#7D958f\",colorant\"#B8BFAF\",colorant\"#FCE9CB\"]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n",
       "     width=\"150.0mm\" height=\"25.0mm\"\n",
       "     shape-rendering=\"crispEdges\">\n",
       "<rect x=\"0.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#1B2423\" stroke=\"none\" />\n",
       "<rect x=\"25.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#3E4A47\" stroke=\"none\" />\n",
       "<rect x=\"50.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#67746D\" stroke=\"none\" />\n",
       "<rect x=\"75.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#94A194\" stroke=\"none\" />\n",
       "<rect x=\"100.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#C6CFBE\" stroke=\"none\" />\n",
       "<rect x=\"125.0mm\" y=\"0.0mm\"\n",
       "      width=\"24.0mm\" height=\"24.0mm\"\n",
       "      fill=\"#FCFFE9\" stroke=\"none\" />\n",
       "</svg>"
      ],
      "text/plain": [
       "6-element Array{LCHab{Float64},1} with eltype LCHab{Float64}:\n",
       " LCHab{Float64}(13.3,4.3,188.7)                            \n",
       " LCHab{Float64}(30.480000000000004,5.68,173.94)            \n",
       " LCHab{Float64}(47.66000000000001,7.059999999999999,159.18)\n",
       " LCHab{Float64}(64.84,8.44,144.42000000000002)             \n",
       " LCHab{Float64}(82.02000000000001,9.819999999999999,129.66)\n",
       " LCHab{Float64}(99.2,11.2,114.9)                           "
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "[myColors[\"g$(repeat(string((3*(i-1)),base=16),3))\"]::ColorTypes.LCHab{Float64} for i in 1:6]"
   ]
  }
 ],
 "metadata": {
  "@webio": {
   "lastCommId": "dec621c60e6b41ab814a99cd1ca913d7",
   "lastKernelId": "f7ab6f71-175e-4208-8343-b4cc5cd7ec8d"
  },
  "kernelspec": {
   "display_name": "Julia 1.1.0",
   "language": "julia",
   "name": "julia-1.1"
  },
  "language_info": {
   "file_extension": ".jl",
   "mimetype": "application/julia",
   "name": "julia",
   "version": "1.1.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}