Cairo - Canvas and intermediate output.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "%reload_ext cairo_jupyter"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 35,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "ImageSurface\n"
     ]
    },
    {
     "data": {
      "image/png": "iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABmJLR0QA/wD/AP+gvaeTAAABGklEQVR4nO3SsQ2AMAwAQWDybA4FC6QABPxdbcmW/MsCAAAAAPzfOjs4xr7feQinMdbpn1xhe3IZ7yOAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQAAAAAAAAAAAAAAAAAAPAhB6RBBLSNE97hAAAAAElFTkSuQmCC\n",
      "text/plain": [
       "<cairo.ImageSurface at 0x7f709fdc2d50>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "SVG to buffer\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"90pt\" height=\"90pt\" viewBox=\"0 0 90 90\" version=\"1.1\">\n",
       "<defs>\n",
       "<clipPath id=\"clip1\">\n",
       "  <rect x=\"0\" y=\"0\" width=\"600\" height=\"200\"/>\n",
       "</clipPath>\n",
       "<g id=\"surface570\" clip-path=\"url(#clip1)\">\n",
       "<path style=\" stroke:none;fill-rule:nonzero;fill:rgb(50%,50%,100%);fill-opacity:1;\" d=\"M 10 10 L 100 10 L 100 100 L 10 100 Z M 10 10 \"/>\n",
       "</g>\n",
       "</defs>\n",
       "<g id=\"surface567\">\n",
       "<use xlink:href=\"#surface570\"/>\n",
       "</g>\n",
       "</svg>"
      ],
      "text/plain": [
       "<IPython.core.display.SVG object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=a5e044dc8-2391-42a0-8478-ea00cd19ae48> \n",
       "        <style>\n",
       "            div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .hll { background-color: #ffffcc }\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .c { color: #408080; font-style: italic } /* Comment */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .err { border: 1px solid #FF0000 } /* Error */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .k { color: #008000; font-weight: bold } /* Keyword */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .o { color: #666666 } /* Operator */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .ch { color: #408080; font-style: italic } /* Comment.Hashbang */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .cm { color: #408080; font-style: italic } /* Comment.Multiline */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .cp { color: #BC7A00 } /* Comment.Preproc */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .c1 { color: #408080; font-style: italic } /* Comment.Single */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .cs { color: #408080; font-style: italic } /* Comment.Special */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gd { color: #A00000 } /* Generic.Deleted */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .ge { font-style: italic } /* Generic.Emph */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gr { color: #FF0000 } /* Generic.Error */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gh { color: #000080; font-weight: bold } /* Generic.Heading */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gi { color: #00A000 } /* Generic.Inserted */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .go { color: #888888 } /* Generic.Output */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gp { color: #000080; font-weight: bold } /* Generic.Prompt */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gs { font-weight: bold } /* Generic.Strong */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gu { color: #800080; font-weight: bold } /* Generic.Subheading */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .gt { color: #0044DD } /* Generic.Traceback */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .kc { color: #008000; font-weight: bold } /* Keyword.Constant */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .kp { color: #008000 } /* Keyword.Pseudo */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .kt { color: #B00040 } /* Keyword.Type */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .m { color: #666666 } /* Literal.Number */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .s { color: #BA2121 } /* Literal.String */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .na { color: #7D9029 } /* Name.Attribute */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nb { color: #008000 } /* Name.Builtin */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nc { color: #0000FF; font-weight: bold } /* Name.Class */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .no { color: #880000 } /* Name.Constant */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nd { color: #AA22FF } /* Name.Decorator */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .ni { color: #999999; font-weight: bold } /* Name.Entity */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .ne { color: #D2413A; font-weight: bold } /* Name.Exception */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nf { color: #0000FF } /* Name.Function */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nl { color: #A0A000 } /* Name.Label */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nt { color: #008000; font-weight: bold } /* Name.Tag */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .nv { color: #19177C } /* Name.Variable */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .w { color: #bbbbbb } /* Text.Whitespace */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .mb { color: #666666 } /* Literal.Number.Bin */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .mf { color: #666666 } /* Literal.Number.Float */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .mh { color: #666666 } /* Literal.Number.Hex */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .mi { color: #666666 } /* Literal.Number.Integer */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .mo { color: #666666 } /* Literal.Number.Oct */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .sa { color: #BA2121 } /* Literal.String.Affix */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .sb { color: #BA2121 } /* Literal.String.Backtick */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .sc { color: #BA2121 } /* Literal.String.Char */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .dl { color: #BA2121 } /* Literal.String.Delimiter */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .s2 { color: #BA2121 } /* Literal.String.Double */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .sh { color: #BA2121 } /* Literal.String.Heredoc */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .sx { color: #008000 } /* Literal.String.Other */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .sr { color: #BB6688 } /* Literal.String.Regex */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .s1 { color: #BA2121 } /* Literal.String.Single */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .ss { color: #19177C } /* Literal.String.Symbol */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .bp { color: #008000 } /* Name.Builtin.Pseudo */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .fm { color: #0000FF } /* Name.Function.Magic */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .vc { color: #19177C } /* Name.Variable.Class */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .vg { color: #19177C } /* Name.Variable.Global */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .vi { color: #19177C } /* Name.Variable.Instance */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .vm { color: #19177C } /* Name.Variable.Magic */\n",
       "div.a5e044dc8-2391-42a0-8478-ea00cd19ae48 .il { color: #666666 } /* Literal.Number.Integer.Long */\n",
       "        </style>\n",
       "        <div class=\"highlight\"><pre><span></span><span class=\"nt\">&lt;svg</span> <span class=\"na\">xmlns=</span><span class=\"s\">&quot;http://www.w3.org/2000/svg&quot;</span> <span class=\"na\">xmlns:xlink=</span><span class=\"s\">&quot;http://www.w3.org/1999/xlink&quot;</span> <span class=\"na\">width=</span><span class=\"s\">&quot;90pt&quot;</span> <span class=\"na\">height=</span><span class=\"s\">&quot;90pt&quot;</span> <span class=\"na\">viewBox=</span><span class=\"s\">&quot;0 0 90 90&quot;</span> <span class=\"na\">version=</span><span class=\"s\">&quot;1.1&quot;</span><span class=\"nt\">&gt;</span>\n",
       "  <span class=\"nt\">&lt;defs&gt;</span>\n",
       "    <span class=\"nt\">&lt;clipPath</span> <span class=\"na\">id=</span><span class=\"s\">&quot;clip1&quot;</span><span class=\"nt\">&gt;</span>\n",
       "      <span class=\"nt\">&lt;rect</span> <span class=\"na\">x=</span><span class=\"s\">&quot;0&quot;</span> <span class=\"na\">y=</span><span class=\"s\">&quot;0&quot;</span> <span class=\"na\">width=</span><span class=\"s\">&quot;600&quot;</span> <span class=\"na\">height=</span><span class=\"s\">&quot;200&quot;</span><span class=\"nt\">/&gt;</span>\n",
       "    <span class=\"nt\">&lt;/clipPath&gt;</span>\n",
       "    <span class=\"nt\">&lt;g</span> <span class=\"na\">id=</span><span class=\"s\">&quot;surface570&quot;</span> <span class=\"na\">clip-path=</span><span class=\"s\">&quot;url(#clip1)&quot;</span><span class=\"nt\">&gt;</span>\n",
       "      <span class=\"nt\">&lt;path</span> <span class=\"na\">style=</span><span class=\"s\">&quot; stroke:none;fill-rule:nonzero;fill:rgb(50%,50%,100%);fill-opacity:1;&quot;</span> <span class=\"na\">d=</span><span class=\"s\">&quot;M 10 10 L 100 10 L 100 100 L 10 100 Z M 10 10 &quot;</span><span class=\"nt\">/&gt;</span>\n",
       "    <span class=\"nt\">&lt;/g&gt;</span>\n",
       "  <span class=\"nt\">&lt;/defs&gt;</span>\n",
       "  <span class=\"nt\">&lt;g</span> <span class=\"na\">id=</span><span class=\"s\">&quot;surface567&quot;</span><span class=\"nt\">&gt;</span>\n",
       "    <span class=\"nt\">&lt;use</span> <span class=\"na\">xlink:href=</span><span class=\"s\">&quot;#surface570&quot;</span><span class=\"nt\">/&gt;</span>\n",
       "  <span class=\"nt\">&lt;/g&gt;</span>\n",
       "<span class=\"nt\">&lt;/svg&gt;</span>\n",
       "</pre></div>\n",
       "\n",
       "    </div>\n",
       "    "
      ],
      "text/plain": [
       "<display_xml.xml.XML at 0x7f70acdd1a60>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "continue drawing...\n",
      "Display final surface\n"
     ]
    },
    {
     "data": {
      "image/png": "iVBORw0KGgoAAAANSUhEUgAAAlgAAADICAYAAAA0n5+2AAAABmJLR0QA/wD/AP+gvaeTAAACz0lEQVR4nO3WMQ6DQBAEwcMf9/FyCByRgdQWElTFG0ywQY8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDRcvZwzm375xB+vmO9e8IrLHOe/n0AuOpz9wAAgKcRWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL7MDBN0FtMgsuZoAAAAASUVORK5CYII=\n",
      "text/plain": [
       "<cairo.RecordingSurface at 0x7f709fdc2a30>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "(10.0, 10.0, 180.0, 90.0)"
      ]
     },
     "execution_count": 35,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import cairo\n",
    "\n",
    "from io import BytesIO\n",
    "from IPython.display import SVG, display\n",
    "\n",
    "from display_xml import XML\n",
    "\n",
    "\n",
    "class BufferedCanvas:\n",
    "    \"\"\"\n",
    "    BufferedCanvas is backed by a RecordingSurface\n",
    "    to keep track of the current drawing state and\n",
    "    allow saving of the intermediate state to\n",
    "    other surfaces.\n",
    "    \"\"\"\n",
    "    def __init__(self):\n",
    "        self.surface = cairo.RecordingSurface(cairo.CONTENT_COLOR_ALPHA, \n",
    "                                              #None\n",
    "                                              (0, 0, 600, 200)\n",
    "                                             )\n",
    "    \n",
    "    def save_svg(self, f, dimensions=None):\n",
    "        if dimensions is None:\n",
    "            extents = self.surface.ink_extents()\n",
    "            dimensions = extents[2], extents[3]\n",
    "        \n",
    "        surface = cairo.SVGSurface(svgio, *dimensions)\n",
    "        \n",
    "        # Draw self.surface onto surface\n",
    "        cr = cairo.Context(surface)\n",
    "        cr.set_source_surface(self.surface)\n",
    "        cr.paint()\n",
    "        del cr\n",
    "\n",
    "        surface.finish()\n",
    "        return f\n",
    "    \n",
    "    def save_png(self, f, dimensions=None):\n",
    "        surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, 128, 128)\n",
    "        \n",
    "        # Draw self.surface onto surface\n",
    "        cr = cairo.Context(surface)\n",
    "        cr.set_source_surface(self.surface)\n",
    "        cr.paint(surface)\n",
    "        del cr\n",
    "        \n",
    "        surface.write_to_png(f)\n",
    "    \n",
    "class ShoebotRunner:\n",
    "    def run_once(self, code):\n",
    "        pass\n",
    "\n",
    "canvas = BufferedCanvas()\n",
    "ctx = cairo.Context(canvas.surface)\n",
    "ctx.set_source_rgb(.5, .5, 1.)\n",
    "ctx.rectangle(10, 10, 90, 90)\n",
    "ctx.fill()\n",
    "\n",
    "# intermediate ImageSurface 1\n",
    "print(\"ImageSurface\")\n",
    "surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, 128, 128)\n",
    "_ctx = cairo.Context(surface)\n",
    "_ctx.set_source_surface(canvas.surface)\n",
    "_ctx.paint()\n",
    "display(surface)\n",
    "\n",
    "# intermediate SVGSurface to buffer\n",
    "print(\"SVG to buffer\")\n",
    "with BytesIO() as svgio:\n",
    "    canvas.save_svg(svgio)\n",
    "    display(SVG(data=svgio.getvalue()))\n",
    "    display(XML(svgio.getvalue()))\n",
    "\n",
    "# continue drawing\n",
    "print(\"continue drawing...\")\n",
    "ctx.set_source_rgb(1., .5, .5)\n",
    "ctx.rectangle(100, 10, 90, 90)\n",
    "ctx.fill()\n",
    "\n",
    "del ctx\n",
    "\n",
    "print(\"Display final surface\")\n",
    "display(canvas.surface)\n",
    "\n",
    "canvas.surface.ink_extents()"
   ]
  },
  {
   "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.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}