wired-elements.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "d7a38a85-20b5-45e4-b6df-2152b9346948",
   "metadata": {},
   "source": [
    "# Wired Elements: experimenting Web Components"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "edf6655c-b256-4b9a-a370-a8863f4392d6",
   "metadata": {},
   "source": [
    "https://github.com/rough-stuff/wired-elements"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "06631031-93ce-4692-bcfe-5f8635d05a8e",
   "metadata": {},
   "source": [
    "## Libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "3f7ea62d-07af-4ecc-87b7-3583abfb57de",
   "metadata": {},
   "outputs": [],
   "source": [
    "from httpserver import start, stop\n",
    "from http.server import SimpleHTTPRequestHandler, HTTPServer\n",
    "import os\n",
    "from urllib.parse import urlparse, parse_qs\n",
    "import ipywidgets as widgets\n",
    "import time\n",
    "from IPython.display import HTML"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ee800515-4e3e-4f26-ab70-aa7bf9e5d42d",
   "metadata": {},
   "source": [
    "## Backend: the HTTP server"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "06e3ae33-d0d7-4e1c-8f2b-119503f794db",
   "metadata": {
    "tags": []
   },
   "source": [
    "### Widgets python implementation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "3cba3676-578b-4799-97e5-a01dfcff416e",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e336962c7a634c93b4a72b8093da8dd1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Textarea(value='', layout=Layout(width='50%'))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "logsw=widgets.Textarea(layout=widgets.Layout(width='50%'))\n",
    "logsw.value = \"\"\n",
    "bag ={}\n",
    "class myHTTPRequestHandler(SimpleHTTPRequestHandler):\n",
    "    callback={}\n",
    "    def __init__(self, *args, directory=None,bag=bag, **kwargs):\n",
    "        self.bag = bag\n",
    "        self.directory = os.path.join(os.getcwd(),\"widgets\")\n",
    "        super().__init__(*args, directory=self.directory, **kwargs)\n",
    "        # print(self.directory)\n",
    "    def end_headers(self):\n",
    "        super().end_headers()\n",
    "    def do_GET(self):\n",
    "        self.parsed_path = urlparse(self.path)\n",
    "        self.queryparams = parse_qs(self.parsed_path.query)\n",
    "        if self.path.endswith('/version'):\n",
    "            self.version()\n",
    "        elif self.parsed_path.path.endswith('/setvalue'):\n",
    "            self.setvalue()\n",
    "        else:\n",
    "            super().do_GET()\n",
    "    def version(self):\n",
    "        ans = '{\"version\": \"0.0\"}'\n",
    "        eans = ans.encode()        \n",
    "        self.send_response(200)\n",
    "        self.send_header(\"Content-type\", \"application/json\")\n",
    "        self.send_header(\"Content-Length\",len(eans))\n",
    "        self.end_headers()\n",
    "        self.wfile.write(eans)\n",
    "    def setvalue(self):\n",
    "        self.bag.update({self.queryparams['variable'][0]:self.queryparams['value'][0]})\n",
    "        if self.queryparams['variable'][0] in myHTTPRequestHandler.callback:\n",
    "            self.callback[self.queryparams['variable'][0]](self.queryparams['value'][0])\n",
    "        self.version() \n",
    "    def log_message(self, format, *args):\n",
    "        global logsw\n",
    "        v = format % args\n",
    "        t = time.localtime()\n",
    "        current_time = time.strftime(\"%H:%M:%S\", t)\n",
    "        logsw.value += current_time + \" \" + v +\"\\n\"\n",
    "logsw"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "f7a87a40-6467-41e8-a437-578a79b40172",
   "metadata": {},
   "outputs": [],
   "source": [
    "start(handler_class=myHTTPRequestHandler, port=8085)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "30fb5a22-3772-42a5-a37d-f8aca44b7837",
   "metadata": {},
   "source": [
    "## Frontend"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1f444025-d26e-431b-8c96-20937ed4893e",
   "metadata": {},
   "source": [
    "### Widget javascript implementation: Using Web Components"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "0ee1ada7-b525-458e-aff2-510e8461634e",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Starting httpd...\n",
      "\n"
     ]
    }
   ],
   "source": [
    "class LoadModule(object):\n",
    "    \"\"\"This class is loading modules\"\"\"\n",
    "    def _repr_javascript_(self):\n",
    "        return '''\n",
    "debugger;\n",
    "const modulename = 'wired-elements';\n",
    "let module = document.getElementById('modulename'+'.js');\n",
    "if (module === null){\n",
    "    let css_urls = [{\"url\": 'https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap', \"rel\": \"stylesheet\"},\n",
    "                        {\"url\": \"/proxy/8085/wired-elements/style.css\", \"rel\": \"stylesheet\", \"type\": \"text/css\"}\n",
    "                       ];\n",
    "    let js_urls = [{\"url\": 'https://unpkg.com/wired-elements?module', \"id\": modulename+'.js'}\n",
    "                  ];\n",
    "    for (const css_url in css_urls){\n",
    "        let fileref = document.createElement('link');\n",
    "        fileref.rel = css_urls[css_url].rel;\n",
    "        if ('type' in css_urls[css_url]){\n",
    "            fileref.type = css_urls[css_url].type;\n",
    "        }\n",
    "        fileref.href = css_urls[css_url].url;\n",
    "        document.head.append(fileref);\n",
    "    }\n",
    "    for (const js_url in js_urls){\n",
    "        let script_= document.createElement('script');\n",
    "        script_.src = js_urls[js_url].url;\n",
    "        script_.type = \"module\"\n",
    "        script_.id = js_urls[js_url].id\n",
    "        document.head.appendChild(script_);\n",
    "    }\n",
    "}\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "d8ebf9b5-46d0-4d7b-a645-bbb071c85963",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "debugger;\n",
       "const modulename = 'wired-elements';\n",
       "let module = document.getElementById('modulename'+'.js');\n",
       "if (module === null){\n",
       "    let css_urls = [{\"url\": 'https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap', \"rel\": \"stylesheet\"},\n",
       "                        {\"url\": \"/proxy/8085/wired-elements/style.css\", \"rel\": \"stylesheet\", \"type\": \"text/css\"}\n",
       "                       ];\n",
       "    let js_urls = [{\"url\": 'https://unpkg.com/wired-elements?module', \"id\": modulename+'.js'}\n",
       "                  ];\n",
       "    for (const css_url in css_urls){\n",
       "        let fileref = document.createElement('link');\n",
       "        fileref.rel = css_urls[css_url].rel;\n",
       "        if ('type' in css_urls[css_url]){\n",
       "            fileref.type = css_urls[css_url].type;\n",
       "        }\n",
       "        fileref.href = css_urls[css_url].url;\n",
       "        document.head.append(fileref);\n",
       "    }\n",
       "    for (const js_url in js_urls){\n",
       "        let script_= document.createElement('script');\n",
       "        script_.src = js_urls[js_url].url;\n",
       "        script_.type = \"module\"\n",
       "        script_.id = js_urls[js_url].id\n",
       "        document.head.appendChild(script_);\n",
       "    }\n",
       "}\n"
      ],
      "text/plain": [
       "<__main__.LoadModule at 0x72eafab0>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "LoadModule()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "4e9197c7-80de-4c79-9cb1-de12fc23c130",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<main>\n",
       "  <wired-card elevation=\"5\">\n",
       "    <h1>wired-elements demo</h1>\n",
       "  </wired-card>\n",
       "  <section>\n",
       "    <wired-input placeholder=\"your name\"></wired-input>\n",
       "    <wired-button elevation=\"2\">Submit</wired-button>\n",
       "  </section>\n",
       "</main>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f81dbcd4493242bf9f522504bfd73ece",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Label(value='')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def cb_monnom(value):\n",
    "    global monnom\n",
    "    monnom.value = value\n",
    "myHTTPRequestHandler.callback.update({'monnom': cb_monnom})\n",
    "wired = HTML(\"\"\"\n",
    "<main>\n",
    "  <wired-card elevation=\"5\">\n",
    "    <h1>wired-elements demo</h1>\n",
    "  </wired-card>\n",
    "  <section>\n",
    "    <wired-input placeholder=\"your name\"></wired-input>\n",
    "    <wired-button elevation=\"2\">Submit</wired-button>\n",
    "  </section>\n",
    "</main>\n",
    "\"\"\")\n",
    "monnom = widgets.Label()\n",
    "display(wired,monnom)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "adf73337-4da8-45bb-a344-5569366b199b",
   "metadata": {},
   "outputs": [],
   "source": [
    "class ExecuteModule(object):\n",
    "    \"\"\"This class execute the code once the module is loaded\"\"\"\n",
    "    def _repr_javascript_(self):\n",
    "        return '''debugger;\n",
    "let script_= document.createElement('script');\n",
    "script_.src = \"/proxy/8085/wired-elements/main.js\";\n",
    "script_.type = \"module\"\n",
    "document.head.appendChild(script_);\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "3d2dfede-85dc-4f73-a06b-03dd82276105",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "debugger;\n",
       "let script_= document.createElement('script');\n",
       "script_.src = \"/proxy/8085/wired-elements/main.js\";\n",
       "script_.type = \"module\"\n",
       "document.head.appendChild(script_);\n"
      ],
      "text/plain": [
       "<__main__.ExecuteModule at 0x72eafe70>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "ExecuteModule()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "df1dd093-636a-44f6-ac8c-284043991a48",
   "metadata": {},
   "outputs": [],
   "source": [
    "#stop()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cf5b624f-a19b-4e91-b938-5295195503d4",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}