diff --git a/examples/jupyter/webinar/gui.ipynb b/examples/jupyter/webinar/gui.ipynb new file mode 100644 index 00000000..65d9fa63 --- /dev/null +++ b/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 +} diff --git a/examples/jupyter/webinar/pyvista.ipynb b/examples/jupyter/webinar/pyvista.ipynb new file mode 100644 index 00000000..97c6b7b8 --- /dev/null +++ b/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 +} diff --git a/examples/jupyter/webinar/requirements.txt b/examples/jupyter/webinar/requirements.txt new file mode 100644 index 00000000..4b738591 --- /dev/null +++ b/examples/jupyter/webinar/requirements.txt @@ -0,0 +1,3 @@ +pyvista[jupyter] +jupyterlab +trame-jupyter-extension diff --git a/examples/jupyter/webinar/trame.ipynb b/examples/jupyter/webinar/trame.ipynb new file mode 100644 index 00000000..097febac --- /dev/null +++ b/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 +}