JavaScript.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Notebook com código JavaScript \n",
    "\n",
    "#### Definindo estilo"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">\n",
       ".form-style-6{\n",
       "\tfont: 95% Arial, Helvetica, sans-serif;\n",
       "\tmax-width: 400px;\n",
       "\tmargin: 10px auto;\n",
       "\tpadding: 16px;\n",
       "\tbackground: #F7F7F7;\n",
       "}\n",
       ".form-style-6 h1{\n",
       "\tbackground: #43D1AF;\n",
       "\tpadding: 20px 0;\n",
       "\tfont-size: 140%;\n",
       "\tfont-weight: 300;\n",
       "\ttext-align: center;\n",
       "\tcolor: #fff;\n",
       "\tmargin: -16px -16px 16px -16px;\n",
       "}\n",
       ".form-style-6 input[type=\"text\"],\n",
       ".form-style-6 input[type=\"date\"],\n",
       ".form-style-6 input[type=\"datetime\"],\n",
       ".form-style-6 input[type=\"email\"],\n",
       ".form-style-6 input[type=\"number\"],\n",
       ".form-style-6 input[type=\"search\"],\n",
       ".form-style-6 input[type=\"time\"],\n",
       ".form-style-6 input[type=\"url\"],\n",
       ".form-style-6 textarea,\n",
       ".form-style-6 select \n",
       "{\n",
       "\t-webkit-transition: all 0.30s ease-in-out;\n",
       "\t-moz-transition: all 0.30s ease-in-out;\n",
       "\t-ms-transition: all 0.30s ease-in-out;\n",
       "\t-o-transition: all 0.30s ease-in-out;\n",
       "\toutline: none;\n",
       "\tbox-sizing: border-box;\n",
       "\t-webkit-box-sizing: border-box;\n",
       "\t-moz-box-sizing: border-box;\n",
       "\twidth: 100%;\n",
       "\tbackground: #fff;\n",
       "\tmargin-bottom: 4%;\n",
       "\tborder: 1px solid #ccc;\n",
       "\tpadding: 3%;\n",
       "\tcolor: #555;\n",
       "\tfont: 95% Arial, Helvetica, sans-serif;\n",
       "}\n",
       ".form-style-6 input[type=\"text\"]:focus,\n",
       ".form-style-6 input[type=\"date\"]:focus,\n",
       ".form-style-6 input[type=\"datetime\"]:focus,\n",
       ".form-style-6 input[type=\"email\"]:focus,\n",
       ".form-style-6 input[type=\"number\"]:focus,\n",
       ".form-style-6 input[type=\"search\"]:focus,\n",
       ".form-style-6 input[type=\"time\"]:focus,\n",
       ".form-style-6 input[type=\"url\"]:focus,\n",
       ".form-style-6 textarea:focus,\n",
       ".form-style-6 select:focus\n",
       "{\n",
       "\tbox-shadow: 0 0 5px #43D1AF;\n",
       "\tpadding: 3%;\n",
       "\tborder: 1px solid #43D1AF;\n",
       "}\n",
       "\n",
       ".form-style-6 input[type=\"submit\"],\n",
       ".form-style-6 input[type=\"button\"]{\n",
       "\tbox-sizing: border-box;\n",
       "\t-webkit-box-sizing: border-box;\n",
       "\t-moz-box-sizing: border-box;\n",
       "\twidth: 100%;\n",
       "\tpadding: 3%;\n",
       "\tbackground: #43D1AF;\n",
       "\tborder-bottom: 2px solid #30C29E;\n",
       "\tborder-top-style: none;\n",
       "\tborder-right-style: none;\n",
       "\tborder-left-style: none;\t\n",
       "\tcolor: #fff;\n",
       "}\n",
       ".form-style-6 input[type=\"submit\"]:hover,\n",
       ".form-style-6 input[type=\"button\"]:hover{\n",
       "\tbackground: #2EBC99;\n",
       "}\n",
       "</style>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<style type=\"text/css\">\n",
    ".form-style-6{\n",
    "\tfont: 95% Arial, Helvetica, sans-serif;\n",
    "\tmax-width: 400px;\n",
    "\tmargin: 10px auto;\n",
    "\tpadding: 16px;\n",
    "\tbackground: #F7F7F7;\n",
    "}\n",
    ".form-style-6 h1{\n",
    "\tbackground: #43D1AF;\n",
    "\tpadding: 20px 0;\n",
    "\tfont-size: 140%;\n",
    "\tfont-weight: 300;\n",
    "\ttext-align: center;\n",
    "\tcolor: #fff;\n",
    "\tmargin: -16px -16px 16px -16px;\n",
    "}\n",
    ".form-style-6 input[type=\"text\"],\n",
    ".form-style-6 input[type=\"date\"],\n",
    ".form-style-6 input[type=\"datetime\"],\n",
    ".form-style-6 input[type=\"email\"],\n",
    ".form-style-6 input[type=\"number\"],\n",
    ".form-style-6 input[type=\"search\"],\n",
    ".form-style-6 input[type=\"time\"],\n",
    ".form-style-6 input[type=\"url\"],\n",
    ".form-style-6 textarea,\n",
    ".form-style-6 select \n",
    "{\n",
    "\t-webkit-transition: all 0.30s ease-in-out;\n",
    "\t-moz-transition: all 0.30s ease-in-out;\n",
    "\t-ms-transition: all 0.30s ease-in-out;\n",
    "\t-o-transition: all 0.30s ease-in-out;\n",
    "\toutline: none;\n",
    "\tbox-sizing: border-box;\n",
    "\t-webkit-box-sizing: border-box;\n",
    "\t-moz-box-sizing: border-box;\n",
    "\twidth: 100%;\n",
    "\tbackground: #fff;\n",
    "\tmargin-bottom: 4%;\n",
    "\tborder: 1px solid #ccc;\n",
    "\tpadding: 3%;\n",
    "\tcolor: #555;\n",
    "\tfont: 95% Arial, Helvetica, sans-serif;\n",
    "}\n",
    ".form-style-6 input[type=\"text\"]:focus,\n",
    ".form-style-6 input[type=\"date\"]:focus,\n",
    ".form-style-6 input[type=\"datetime\"]:focus,\n",
    ".form-style-6 input[type=\"email\"]:focus,\n",
    ".form-style-6 input[type=\"number\"]:focus,\n",
    ".form-style-6 input[type=\"search\"]:focus,\n",
    ".form-style-6 input[type=\"time\"]:focus,\n",
    ".form-style-6 input[type=\"url\"]:focus,\n",
    ".form-style-6 textarea:focus,\n",
    ".form-style-6 select:focus\n",
    "{\n",
    "\tbox-shadow: 0 0 5px #43D1AF;\n",
    "\tpadding: 3%;\n",
    "\tborder: 1px solid #43D1AF;\n",
    "}\n",
    "\n",
    ".form-style-6 input[type=\"submit\"],\n",
    ".form-style-6 input[type=\"button\"]{\n",
    "\tbox-sizing: border-box;\n",
    "\t-webkit-box-sizing: border-box;\n",
    "\t-moz-box-sizing: border-box;\n",
    "\twidth: 100%;\n",
    "\tpadding: 3%;\n",
    "\tbackground: #43D1AF;\n",
    "\tborder-bottom: 2px solid #30C29E;\n",
    "\tborder-top-style: none;\n",
    "\tborder-right-style: none;\n",
    "\tborder-left-style: none;\t\n",
    "\tcolor: #fff;\n",
    "}\n",
    ".form-style-6 input[type=\"submit\"]:hover,\n",
    ".form-style-6 input[type=\"button\"]:hover{\n",
    "\tbackground: #2EBC99;\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Cronstruindo a função Python para conversão de cor"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [],
   "source": [
    "from PIL import Image \n",
    "from io import BytesIO\n",
    "import requests \n",
    "\n",
    "def alterar_img(url_img):\n",
    "    img = Image.open(BytesIO(requests.get(url_img).content)).convert(\"LA\")\n",
    "    return img \n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Código JavaScript para leitura e saída de imagem"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 41,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div class=\"form-style-6\">\n",
       "    <h1 cstyle=\"text-align:center\">Alterador de cor de imagens</h1>\n",
       "    <form>\n",
       "        <p style=\"text-align:center\">Digite a URL da imagem que você deseja alterar.</p><br>\n",
       "        <input type=\"text\" placeholder=\"URL da imagem\" onchange='display()' id='url_img'></input>\n",
       "        <img id='img_preview'></img><br>\n",
       "        <input type=\"button\" value=\"Alterar cor\" onclick='alterar_cor()'>\n",
       "        <img id='imgtarget'></img>\n",
       "    </form>\n",
       "</div>\n",
       "\n",
       "<script type=\"text/Javascript\">\n",
       "    function handle_output(out){\n",
       "        document.getElementById('imgtarget').src = 'data:image/png;base64,' + out.content.data['image/png'];\n",
       "    }\n",
       "    \n",
       "    function display(){\n",
       "        var url = document.getElementById('url_img').value;\n",
       "        document.getElementById('img_preview').src = url;\n",
       "    }\n",
       "\n",
       "    function alterar_cor(){\n",
       "        var kernel = IPython.notebook.kernel;\n",
       "        var callbacks = {'iopub': {'output' : handle_output,}};\n",
       "        kernel.execute('url = \"' + document.getElementById('url_img').value + '\"');\n",
       "        kernel.execute('alterar_img(url)', callbacks, {silent:false});\n",
       "    }\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "\n",
    "<div class=\"form-style-6\">\n",
    "    <h1 cstyle=\"text-align:center\">Alterador de cor de imagens</h1>\n",
    "    <form>\n",
    "        <p style=\"text-align:center\">Digite a URL da imagem que você deseja alterar.</p><br>\n",
    "        <input type=\"text\" placeholder=\"URL da imagem\" onchange='display()' id='url_img'></input>\n",
    "        <img id='img_preview'></img><br>\n",
    "        <input type=\"button\" value=\"Alterar cor\" onclick='alterar_cor()'>\n",
    "        <img id='imgtarget'></img>\n",
    "    </form>\n",
    "</div>\n",
    "\n",
    "<script type=\"text/Javascript\">\n",
    "    function handle_output(out){\n",
    "        document.getElementById('imgtarget').src = 'data:image/png;base64,' + out.content.data['image/png'];\n",
    "    }\n",
    "    \n",
    "    function display(){\n",
    "        var url = document.getElementById('url_img').value;\n",
    "        document.getElementById('img_preview').src = url;\n",
    "    }\n",
    "\n",
    "    function alterar_cor(){\n",
    "        var kernel = IPython.notebook.kernel;\n",
    "        var callbacks = {'iopub': {'output' : handle_output,}};\n",
    "        kernel.execute('url = \"' + document.getElementById('url_img').value + '\"');\n",
    "        kernel.execute('alterar_img(url)', callbacks, {silent:false});\n",
    "    }\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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": 2
}