docs(webinar): add jupyter examples

examples/jupyter/webinar/gui.ipynb

@@ -0,0 +1,218 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "359db8cb-d713-48b1-8da3-fa2c31b6af17",
+   "metadata": {},
+   "source": [
+    "## Trame imports"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "cded0a67-5de0-4f94-bfd1-33df84e42b83",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from trame.app import get_server\n",
+    "from trame.ui.vuetify3 import VAppLayout\n",
+    "from trame.widgets import vuetify3 as v3, html\n",
+    "\n",
+    "server = get_server(\"my_gui_demo\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "596e240b-4679-416d-8f38-5d22229fceaa",
+   "metadata": {},
+   "source": [
+    "## Create custom widget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0f2ccdc8-f9f3-40a0-8e6b-cf24ae21cbac",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class StatCard(v3.VCard):\n",
+    "    def __init__(self, card_name=\"card\", **kwargs):\n",
+    "        super().__init__(elevation=4, rounded=\"lg\", **kwargs)\n",
+    "        with self:\n",
+    "            with html.Div(classes=\"pa-4\"):\n",
+    "                html.Div(f\"{{{{ {card_name}.title }}}}\", classes=\"ps-4 text-caption text-medium-emphasis\")\n",
+    "                with v3.VCardTitle(classes=\"pt-0 mt-n1 d-flex align-center\"):\n",
+    "                    html.Div(f\"{{{{ {card_name}.value }}}}\", classes=\"me-2\")\n",
+    "                    with v3.VChip(\n",
+    "                        classes=\"pe-1\", \n",
+    "                        color=(f\"{card_name}.color\",),\n",
+    "                        label=True,\n",
+    "                        prepend_icon=(f\"`mdi-arrow-${{ {card_name}.change.startsWith('-') ? 'down' : 'up'}}`\",),\n",
+    "                        size=\"x-small\",\n",
+    "                    ):\n",
+    "                        with v3.Template(raw_attrs=['#prepend']):\n",
+    "                            v3.VIcon(size=10)\n",
+    "                        html.Span(f\"{{{{ {card_name}.change }}}}\", classes=\"text-caption\")\n",
+    "\n",
+    "            v3.VSparkline(\n",
+    "                color=(f\"{card_name}.color\",),\n",
+    "                fill=True,\n",
+    "                gradient=(f\"[`${{ {card_name}.color }}E6`, `${{ {card_name}.color }}33`, `${{ {card_name}.color }}00`]\",),\n",
+    "                height=50,\n",
+    "                line_width=1,\n",
+    "                min=0,\n",
+    "                model_value=(f\"{card_name}.data\",),\n",
+    "                padding=0,\n",
+    "                smooth=True,\n",
+    "            )"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "694abcad-c826-4271-9da8-03e34ef21e22",
+   "metadata": {},
+   "source": [
+    "## Data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e13bd151-c966-415a-851f-52b1de7f3ff6",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "data = [\n",
+    "    {\n",
+    "      \"title\": 'Bandwidth Used',\n",
+    "      \"value\": '1.01 TB',\n",
+    "      \"change\": '-20.12%',\n",
+    "      \"color\": '#da5656',\n",
+    "      \"data\": [5, 2, 5, 9, 5, 10, 3, 5, 3, 7, 1, 8, 2, 9, 6],\n",
+    "    },\n",
+    "    {\n",
+    "      \"title\": 'Requests Served',\n",
+    "      \"value\": '7.96 M',\n",
+    "      \"change\": '-7.73%',\n",
+    "      \"color\": '#FFB300',\n",
+    "      \"data\": [1, 3, 8, 2, 9, 5, 10, 3, 5, 3, 7, 6, 8, 2, 9, 6, 1, 3, 8, 2],\n",
+    "    },\n",
+    "    {\n",
+    "      \"title\": 'Waves',\n",
+    "      \"value\": '95.69 %',\n",
+    "      \"change\": '0.75%',\n",
+    "      \"color\": '#2fc584',\n",
+    "      \"data\": [1, 2, 1, 3, 1, 4, 1, 5, 1, 6],\n",
+    "    },\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "b0a0d0e4-4a82-4247-947b-ad14bf4df98a",
+   "metadata": {},
+   "source": [
+    "## Data manipulation"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "23519a3b-4749-454f-8cb4-06a5d638fe6f",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import random\n",
+    "import asyncio\n",
+    "\n",
+    "state = server.state\n",
+    "state.playing = False\n",
+    "\n",
+    "@state.change(\"size\")\n",
+    "def update_data(size, **_):\n",
+    "    state.data = []\n",
+    "    for i in range(size):\n",
+    "        state.data.append(random.choice(data))\n",
+    "\n",
+    "def update_graph(data):\n",
+    "    return [v + 0.5 if v < 9 else 0 for v in data]\n",
+    "\n",
+    "async def animation():\n",
+    "    while True:\n",
+    "        await asyncio.sleep(0.15)\n",
+    "        if state.playing:\n",
+    "            with state:\n",
+    "                for entry in state.data:\n",
+    "                    entry[\"data\"] = update_graph(entry.get(\"data\"))\n",
+    "                state.dirty(\"data\")\n",
+    "\n",
+    "asyncio.create_task(animation())"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "faccffd4-0431-4004-94c7-b291361242e1",
+   "metadata": {},
+   "source": [
+    "## Graphical Interface Definition"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5b61e737-cb7b-4cc8-a540-1fef2482078c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "with VAppLayout(server, fill_height=True) as layout:\n",
+    "    with v3.VContainer(classes=\"pa-md-12\", fluid=True):\n",
+    "        with v3.VRow(dense=True):\n",
+    "            v3.VSlider(\n",
+    "                v_model=(\"size\", 1), \n",
+    "                min=1, max=9, step=1,\n",
+    "            )\n",
+    "            v3.VBtn(\n",
+    "                icon=\"mdi-refresh\", \n",
+    "                click=(update_data, \"[size]\"), \n",
+    "                density=\"compact\", hide_details=True, classes=\"ml-4\"\n",
+    "            )\n",
+    "            v3.VBtn(\n",
+    "                icon=(\"`${playing ? 'mdi-stop':'mdi-play'}`\",), \n",
+    "                click=\"playing = !playing\", \n",
+    "                density=\"compact\", hide_details=True, classes=\"ml-4\",\n",
+    "            )\n",
+    "        with v3.VRow(dense=True):\n",
+    "            with v3.VCol(v_for=\"item, idx in data\", key=\"idx\", cols=12, sm=6, md=4):  \n",
+    "                StatCard(card_name=\"item\")\n",
+    "\n",
+    "await layout.ready\n",
+    "\n",
+    "\n",
+    "layout"
+   ]
+  }
+ ],
+ "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.10.14"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

examples/jupyter/webinar/pyvista.ipynb

@@ -0,0 +1,74 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b0350ca0-e7b6-4068-b026-fe00d7522024",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "points = [\n",
+    "   [-8.64208925, -7.34294559, -9.13803458],\n",
+    "   [-8.25601497, -2.54814702, 0.93860914],\n",
+    "   [-0.30179377, -3.21555997, -4.19999019],\n",
+    "   [3.24099167, 2.05814768, 3.39041509],\n",
+    "   [4.39935227, 4.18804542, 8.96391132],\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "1e268da7-46c0-482f-ad70-2120336ab9ef",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pyvista as pv\n",
+    "\n",
+    "mesh = pv.Wavelet()\n",
+    "\n",
+    "p = pv.Plotter()\n",
+    "p.add_mesh(mesh.outline(), color='black')\n",
+    "p.add_mesh_slice_spline(mesh, initial_points=points, n_handles=5)\n",
+    "p.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "39cb56c0-8932-4077-946a-6874b71d75d2",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "97579cdf-2d90-49b1-b68c-d9bb48db0722",
+   "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.10.14"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

examples/jupyter/webinar/requirements.txt

@@ -0,0 +1,3 @@
+pyvista[jupyter]
+jupyterlab
+trame-jupyter-extension

examples/jupyter/webinar/trame.ipynb

@@ -0,0 +1,47 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8cd93ca4-9761-4a8a-8ac3-4a957b3a6177",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from trame.app.demo import Cone\n",
+    "\n",
+    "app = Cone()\n",
+    "await app.ui.ready\n",
+    "app.ui"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b96876c5-b0aa-4422-b3d0-2a7c6fc4c81e",
+   "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.10.14"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}