docs/notebooks/python/interactive_svg.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "55em7ge2-AnR"
      },
      "source": [
        "# Interactive SVG\n",
        "\n",
        "\n",
        "[![Open in Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/google/pyglove/blob/main/docs/notebooks/python/interactive_svg.ipynb)\n",
        "\n",
        "This notebook demostrates how to develope components with direct manipulations.\n",
        "This example implements the [Command](https://en.wikipedia.org/wiki/Command_pattern) pattern using PyGlove patcher, which allows instructions from the commandline be easily applied on symbolic objects."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "eaz3-2SAwuh_"
      },
      "outputs": [],
      "source": [
        "!pip install pyglove"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "3QkxNgr3wwS3"
      },
      "outputs": [],
      "source": [
        "import pyglove as pg"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "x0tsCzhAAWXN"
      },
      "outputs": [],
      "source": [
        "import abc\n",
        "from colabtools import publish\n",
        "\n",
        "def color_spec():\n",
        "  return pg.typing.Enum(\n",
        "      'white', ['white', 'black', 'yellow', 'blue', 'red', 'green'])\n",
        "\n",
        "@pg.members([\n",
        "  ('fill', color_spec()),\n",
        "  ('stroke', color_spec()),\n",
        "  ('stroke_width', pg.typing.Int(min_value=1))\n",
        "])\n",
        "class Shape(pg.Object):\n",
        "  \n",
        "  TAG = None\n",
        "  \n",
        "  def _on_init(self):\n",
        "    _CANVAS.shapes.append(self)\n",
        "\n",
        "  def __del__(self):\n",
        "    _CANVAS.shapes.remove(self)\n",
        "    super().__del__(self)\n",
        "\n",
        "  def to_svg(self):\n",
        "    return self._to_svg(self.TAG, **self.sym_init_args)\n",
        "\n",
        "  def _to_svg(self, tag_name, **kwargs):\n",
        "    svg = f'\u003c{tag_name}'\n",
        "    for k, v in kwargs.items():\n",
        "      svg += f' {k}=\"{v}\"'\n",
        "    svg += '/\u003e'\n",
        "    return svg\n",
        "\n",
        "\n",
        "@pg.members([\n",
        "  ('cx', pg.typing.Int()),\n",
        "  ('cy', pg.typing.Int()),\n",
        "  ('r', pg.typing.Int(min_value=1))\n",
        "])\n",
        "class Circle(Shape):\n",
        "  TAG = 'circle'\n",
        "\n",
        "\n",
        "@pg.members([\n",
        "   ('shapes', pg.typing.List(pg.typing.Object(Shape), default=[]))\n",
        "])\n",
        "class Canvas(pg.Object):\n",
        "\n",
        "  def _on_bound(self):\n",
        "    super()._on_bound()\n",
        "    if self.shapes:\n",
        "      self.render()\n",
        "\n",
        "  def render(self):\n",
        "    svg = '\u003chtml\u003e\u003cbody\u003e\u003csvg\u003e\\n'\n",
        "    for s in self.shapes:\n",
        "      svg += s.to_svg() + '\\n'\n",
        "      svg += '\u003c/svg\u003e\u003c/body\u003e\u003c/html\u003e'\n",
        "    publish.html(svg)\n",
        "\n",
        "_CANVAS = Canvas()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "height": 172
        },
        "executionInfo": {
          "elapsed": 57,
          "status": "ok",
          "timestamp": 1660957259229,
          "user": {
            "displayName": "",
            "userId": ""
          },
          "user_tz": 420
        },
        "id": "4dpAbK-tl9-u",
        "outputId": "54603300-f146-48ca-958f-51fc925e942c"
      },
      "outputs": [
        {
          "data": {
            "text/html": [
              "\u003chtml\u003e\u003cbody\u003e\u003csvg\u003e\n",
              "\u003ccircle fill=\"white\" stroke=\"blue\" stroke_width=\"4\" cx=\"50\" cy=\"50\" r=\"25\"/\u003e\n",
              "\u003c/svg\u003e\u003c/body\u003e\u003c/html\u003e"
            ],
            "text/plain": [
              "\u003cIPython.core.display.HTML object\u003e"
            ]
          },
          "metadata": {},
          "output_type": "display_data"
        }
      ],
      "source": [
        "# Create a circle and render it using SVG.\n",
        "circle = Circle(cx=50, cy=50, r=25, stroke='blue', stroke_width=4, fill='white')"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "X11EWnlQlk97"
      },
      "source": [
        "Let's create patcher to move a circle by command. As a result, we can use URI-like string to manipulate a circle object."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "5Rh6115nlj51"
      },
      "outputs": [],
      "source": [
        "@pg.patcher([\n",
        "  ('x', pg.typing.Int()),\n",
        "  ('y', pg.typing.Int()),\n",
        "])\n",
        "def move(circle, x, y):\n",
        "  return {\n",
        "      'cx': circle.cx + x,\n",
        "      'cy': circle.cy + y,\n",
        "  }\n",
        "\n",
        "def action(shape, command):\n",
        "  pg.patch(shape, [command])\n",
        "  "
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "6aNI19RamK28"
      },
      "source": [
        "Invoke the patcher to move the circle:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "height": 481
        },
        "executionInfo": {
          "elapsed": 57,
          "status": "ok",
          "timestamp": 1660957259669,
          "user": {
            "displayName": "",
            "userId": ""
          },
          "user_tz": 420
        },
        "id": "8p8S-gPEHX4i",
        "outputId": "29b9a0f4-4588-44f6-b215-fa7d1c91bfba"
      },
      "outputs": [
        {
          "data": {
            "text/html": [
              "\u003chtml\u003e\u003cbody\u003e\u003csvg\u003e\n",
              "\u003ccircle fill=\"white\" stroke=\"blue\" stroke_width=\"4\" cx=\"100\" cy=\"70\" r=\"25\"/\u003e\n",
              "\u003c/svg\u003e\u003c/body\u003e\u003c/html\u003e"
            ],
            "text/plain": [
              "\u003cIPython.core.display.HTML object\u003e"
            ]
          },
          "metadata": {},
          "output_type": "display_data"
        },
        {
          "data": {
            "text/html": [
              "\u003chtml\u003e\u003cbody\u003e\u003csvg\u003e\n",
              "\u003ccircle fill=\"white\" stroke=\"blue\" stroke_width=\"4\" cx=\"150\" cy=\"70\" r=\"25\"/\u003e\n",
              "\u003c/svg\u003e\u003c/body\u003e\u003c/html\u003e"
            ],
            "text/plain": [
              "\u003cIPython.core.display.HTML object\u003e"
            ]
          },
          "metadata": {},
          "output_type": "display_data"
        },
        {
          "data": {
            "text/html": [
              "\u003chtml\u003e\u003cbody\u003e\u003csvg\u003e\n",
              "\u003ccircle fill=\"white\" stroke=\"blue\" stroke_width=\"4\" cx=\"200\" cy=\"70\" r=\"25\"/\u003e\n",
              "\u003c/svg\u003e\u003c/body\u003e\u003c/html\u003e"
            ],
            "text/plain": [
              "\u003cIPython.core.display.HTML object\u003e"
            ]
          },
          "metadata": {},
          "output_type": "display_data"
        }
      ],
      "source": [
        "action(circle, 'move?x=50\u0026y=20')\n",
        "action(circle, 'move?x=50\u0026y=0')\n",
        "action(circle, 'move?x=50\u0026y=0')"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "7kY9WPmAJm6N"
      },
      "outputs": [],
      "source": [
        "del circle"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "collapsed_sections": [],
      "last_runtime": {
        "build_target": "//learning/deepmind/dm_python:dm_notebook3",
        "kind": "private"
      },
      "name": "Interactive SVG",
      "provenance": []
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}