{ "cells": [ { "cell_type": "markdown", "id": "7e9e9a56-c560-4e9d-b912-b7f04cc42465", "metadata": {}, "source": [ "# Using SVG Visualizations" ] }, { "cell_type": "code", "execution_count": 1, "id": "39d7c8bf-c258-4de2-8f13-f5363cdc4d70", "metadata": {}, "outputs": [ { "data": { "text/plain": [ "''" ] }, "execution_count": 1, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Here is how the basic drawing works: functions that return text!\n", "import svg_snip.Elements as e2d\n", "e2d.circle(cx=30, cy=20, r=5, stroke='yellow', fill='red')" ] }, { "cell_type": "code", "execution_count": 2, "id": "b60a1e54-8486-46ec-8130-1113732803d4", "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "\n", "\n" ] } ], "source": [ "# you can actually write your own like so:\n", "def x(x=0, y=0, **kwargs):\n", " return f\"\"\"\\\n", "\n", "\"\"\"\n", "\n", "print(x(20,30))" ] }, { "cell_type": "code", "execution_count": 3, "id": "ea8aa128-6d15-4bc4-8900-e2db856fbc55", "metadata": {}, "outputs": [ { "data": { "text/html": [ "
show html
<svg  width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n",
       "  <rect x="0.00" y="0.00" width="100.00" height="100.00" />\n",
       "  <line x1="45" y1="45" x2="55" y2="55" stroke="white"/>\n",
       "  <line x1="45" y1="55" x2="55" y2="45" stroke="white"/>\n",
       "  <g transform="translate(30, 20)">\n",
       "    <!-- This is the svg_g Group -->\n",
       "    <circle r="5.00" fill="red" stroke="yellow" />\n",
       "  </g>\n",
       "  <g transform="translate(45, 25)">\n",
       "    <!-- This is the svg_g Group -->\n",
       "    <circle r="5.00" fill="red" stroke="yellow" />\n",
       "  </g>\n",
       "</svg>
\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "from svg_snip.Composer import Composer\n", "from svg_snip.Composer import Group, comment\n", "\n", "svg = Composer((100,100))\n", "svg.add(e2d.rect, x=0, y=0, width=100, height=100)\n", "svg.add(x, x=50, y=50)\n", "\n", "svg_g = Group()\n", "svg_g.add(comment, text=\"This is the svg_g Group\")\n", "svg_g.add(e2d.circle, r=5, stroke='yellow', fill='red')\n", "\n", "# draw the group in multiple locations\n", "svg.add(svg_g, transform='translate(30, 20)')\n", "svg.add(svg_g, transform='translate(45, 25)')\n", "\n", "\n", "svg.display(debug=True)" ] }, { "cell_type": "markdown", "id": "141dfd77-45af-4137-8467-0a6bee0a78e6", "metadata": {}, "source": [ "# How to interact with simple UI elements\n", "\n", "Jupyter is decently fast with updating short HTML fragments.\n", "You loose most time because running the python kernel in the backend and sending resulting text to the frontend.\n", "\n", "For debugging and scientific visualizations, this is quite fast enough." ] }, { "cell_type": "code", "execution_count": 4, "id": "4aa0a3df-a00d-4b0e-998e-efafcf3e39d6", "metadata": { "scrolled": true }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "6d8079c3bfc947098198234ef25301a2", "version_major": 2, "version_minor": 0 }, "text/plain": [ "IntSlider(value=0, description='Angle', max=360, step=2)" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "c1f211ab393143299ce97ff32c7a7ccd", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Output()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import ipywidgets as w\n", "from IPython.display import clear_output, display\n", "\n", "s = w.IntSlider(value=0, min=0, max=360, step=2, description='Angle')\n", "out = w.Output()\n", "\n", "def update(c):\n", " with out:\n", " clear_output(wait=True)\n", " svg = Composer((100,100))\n", " svg.add(e2d.rect, x=0, y=0, width=100, height=100)\n", " g = Group()\n", " g.add(e2d.rect, x=20, y=20, width=30, height=30, fill='blue')\n", " svg.add(g, transform=f'rotate({c[\"new\"]} 50 50)')\n", " svg.display()\n", "\n", "s.observe(update, names='value')\n", "display(s, out)\n", "update({\"new\": s.value})" ] }, { "cell_type": "markdown", "id": "ff734d53-40a9-4a98-a002-918592912223", "metadata": {}, "source": [ "# Using 3D Visualizations\n", "\n", "This example shows how CanvasWithOverlay also supports basic mouse events.\n", "\n", "This is easily fast enough to support interactively tuning parameters and rotating the camera for simple 3D geometry.\n", "\n", "SVG itself does not suport 3D rendering. The python backend does the heavy lifting.\n", "\n", "The results is a vector graphic that is easily exported and used in papers, for example.\n", "\n", "Note that the backface removal is based on the normal. So shaded faces work only for simple, convex geometry." ] }, { "cell_type": "code", "execution_count": 5, "id": "6b749423-44b2-4842-9638-ec351c97ff9d", "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "a0ae858839fb42a58b2504c7ce5aad55", "version_major": 2, "version_minor": 0 }, "text/plain": [ "IntSlider(value=0, description='R', max=255)" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "5e51e61fa0e6454eb083b32aa0468808", "version_major": 2, "version_minor": 0 }, "text/plain": [ "IntSlider(value=120, description='G', max=255)" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "3c0e5eafe2ca478499e27cea3bb93351", "version_major": 2, "version_minor": 0 }, "text/plain": [ "IntSlider(value=255, description='B', max=255)" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "85c1ca36a6b240c9b1df43c7afa6caae", "version_major": 2, "version_minor": 0 }, "text/plain": [ "VBox(children=(HTML(value='\\n