examples/jupyter/multi-tasks.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "e35ebf43-5752-47ba-96d5-74bf14ec2288",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "from trame.app import get_server\n",
    "from trame.ui.html import DivLayout\n",
    "from trame.widgets import html\n",
    "\n",
    "\n",
    "class Slider:\n",
    "    def __init__(self, server_name=None):\n",
    "        self.server = get_server(server_name, client_type=\"vue2\")\n",
    "        with DivLayout(self.server, height=\"20px\") as self.ui:\n",
    "            with html.Div(style=\"display: flex;\"):\n",
    "                html.Input(type=\"range\", v_model=(\"resolution\", 0), min=0, max=10)\n",
    "                html.Div(\"{{ resolution }}\")\n",
    "\n",
    "    @property\n",
    "    def resolution(self):\n",
    "        return self.server.state.resolution\n",
    "\n",
    "    @resolution.setter\n",
    "    def resolution(self, v):\n",
    "        with self.server.state as state:\n",
    "            state.resolution = v"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "1042cbbc-816b-4e0b-bb8a-f01fba2659fd",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "21be32c94aa84f3cabd1fecaa364a603",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HTML(value='<iframe id=\"a_trame__template_main\" src=\"http://localhost:52268/index.html?ui=main&reconnect=auto\"…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "a = Slider(\"a\")\n",
    "b = Slider(\"b\")\n",
    "c = Slider(\"c\")\n",
    "\n",
    "await a.ui.ready\n",
    "await b.ui.ready\n",
    "await c.ui.ready\n",
    "\n",
    "a.ui"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "12961773-2d56-42e4-967b-561755bf0580",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f6c8c75611534a36a0fa956d9f3ddd98",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(HTML(value='<iframe id=\"a_trame__template_main\" src=\"http://localhost:52268/index.html?ui=main&…"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from ipywidgets import HBox\n",
    "\n",
    "HBox(\n",
    "    [\n",
    "        a.ui.ipywidget,\n",
    "        b.ui.ipywidget,\n",
    "        c.ui.ipywidget,\n",
    "        a.ui.ipywidget,\n",
    "        b.ui.ipywidget,\n",
    "        c.ui.ipywidget,\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "885e43be-a04e-43d3-8e47-360c59df226f",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "a.resolution = 2\n",
    "b.resolution = 5\n",
    "c.resolution = 9"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0bc9e95a-f7a7-445d-b6f5-ffafeb46847c",
   "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.9.17"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}