change to notebook

pages/01_sine_widget.ipynb

@@ -0,0 +1,124 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipyreact\n",
+    "from traitlets import List, Any\n",
+    "import numpy as np\n",
+    "\n",
+    "class TldrawSineWidget(ipyreact.ReactWidget):\n",
+    "    points = List(List(Any())).tag(sync=True)\n",
+    "    _esm = \"\"\"\n",
+    "    import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\n",
+    "    import * as React from \"react\";\n",
+    "\n",
+    "    export default function App({ points }) {\n",
+    "\n",
+    "        const [app, setApp] = React.useState()\n",
+    "\n",
+    "        const handleMount = React.useCallback((app: Tldraw) => {\n",
+    "            setApp(app)\n",
+    "        }, []);\n",
+    "\n",
+    "        React.useEffect(() => {\n",
+    "            if (app) {\n",
+    "            app.createShapes({\n",
+    "                type: \"draw\",\n",
+    "                id: \"draw1\",\n",
+    "                color: 'red',\n",
+    "                points: points,\n",
+    "            });\n",
+    "            }\n",
+    "        }, [points, app])\n",
+    "\n",
+    "        return (\n",
+    "            <div\n",
+    "            style={{\n",
+    "                position: \"relative\",\n",
+    "                width: \"800px\",\n",
+    "                height: \"450px\",\n",
+    "            }}\n",
+    "            >\n",
+    "            <Tldraw onMount={handleMount} onChange={e => console.log(\"hii\")} />\n",
+    "            </div>\n",
+    "        );\n",
+    "}\n",
+    "\n",
+    "    \"\"\"\n",
+    "\n",
+    "import solara\n",
+    "import numpy as np\n",
+    "\n",
+    "float_value = solara.reactive(0)\n",
+    "\n",
+    "@solara.component\n",
+    "def Page():\n",
+    "    dispersion = \"high\" # \"high\", \"low\", \"const\"\n",
+    "    def n(wj):\n",
+    "        if dispersion == \"high\":\n",
+    "            return 1 + wj * 0.1\n",
+    "        if dispersion == \"low\":\n",
+    "            return 1.1 - wj * 0.01\n",
+    "        if dispersion == \"const\":\n",
+    "            return 1\n",
+    "\n",
+    "    c = 1\n",
+    "    num_of_waves = 121\n",
+    "    start_w = 1\n",
+    "    end_w = 7\n",
+    "    x = np.linspace(-2, 10, 1001)\n",
+    "    \n",
+    "    def g(x, t):\n",
+    "        u1 = 0\n",
+    "        for wj in np.linspace(start_w, end_w, num_of_waves):\n",
+    "            u1 += np.exp(1j * (wj * n(wj) / c * x - t * wj))\n",
+    "        return u1.real\n",
+    "\n",
+    "    ooo = 38    \n",
+    "    points = np.column_stack((x*50+ooo, g(x, float_value.value)+150)).tolist()\n",
+    "    points = points[100:]\n",
+    "    points[0] = [ooo-40, 0]\n",
+    "\n",
+    "\n",
+    "    # solara.Markdown(\" \\psi(x, t) = \\sum \\limits_j C_j \\cdot e^{\\mathrm{i}( - k_j \\cdot x + \\omega_j \\cdot t )}, \\omega_j= \\frac{k_j}{c(k_j)} $\")\n",
+    "    # solara.Markdown(f\"**t**: {float_value.value}\")\n",
+    "\n",
+    "\n",
+    "    with solara.Row():\n",
+    "        solara.Button(\"Reset\", on_click=lambda: float_value.set(0))\n",
+    "        solara.FloatSlider(\"Time t\", value=float_value, min=0, max=4*np.pi, step=0.1)\n",
+    "    TldrawSineWidget.element(points=points)\n",
+    "\n",
+    "\n",
+    "\n",
+    "Page()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "napari-env2",
+   "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.15"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

pages/01_sine_widget.py

@@ -1,90 +0,0 @@
-import ipyreact
-from traitlets import List, Any
-import numpy as np
-
-class TldrawSineWidget(ipyreact.ReactWidget):
-    points = List(List(Any())).tag(sync=True)
-    _esm = """
-    import { TDShapeType, Tldraw } from "@tldraw/tldraw";
-    import * as React from "react";
-
-    export default function App({ points }) {
-
-        const [app, setApp] = React.useState()
-
-        const handleMount = React.useCallback((app: Tldraw) => {
-            setApp(app)
-        }, []);
-
-        React.useEffect(() => {
-            if (app) {
-            app.createShapes({
-                type: "draw",
-                id: "draw1",
-                color: 'red',
-                points: points,
-            });
-            }
-        }, [points, app])
-
-        return (
-            <div
-            style={{
-                position: "relative",
-                width: "800px",
-                height: "450px",
-            }}
-            >
-            <Tldraw onMount={handleMount} onChange={e => console.log("hii")} />
-            </div>
-        );
-}
-
-    """
-
-import solara
-import numpy as np
-
-float_value = solara.reactive(0)
-
-@solara.component
-def Page():
-    dispersion = "high" # "high", "low", "const"
-    def n(wj):
-        if dispersion == "high":
-            return 1 + wj * 0.1
-        if dispersion == "low":
-            return 1.1 - wj * 0.01
-        if dispersion == "const":
-            return 1
-
-    c = 1
-    num_of_waves = 121
-    start_w = 1
-    end_w = 7
-    x = np.linspace(-2, 10, 1001)
-    
-    def g(x, t):
-        u1 = 0
-        for wj in np.linspace(start_w, end_w, num_of_waves):
-            u1 += np.exp(1j * (wj * n(wj) / c * x - t * wj))
-        return u1.real
-
-    ooo = 38    
-    points = np.column_stack((x*50+ooo, g(x, float_value.value)+150)).tolist()
-    points = points[100:]
-    points[0] = [ooo-40, 0]
-
-
-    # solara.Markdown(" \psi(x, t) = \sum \limits_j C_j \cdot e^{\mathrm{i}( - k_j \cdot x + \omega_j \cdot t )}, \omega_j= \frac{k_j}{c(k_j)} $")
-    # solara.Markdown(f"**t**: {float_value.value}")
-
-
-    with solara.Row():
-        solara.Button("Reset", on_click=lambda: float_value.set(0))
-        solara.FloatSlider("Time t", value=float_value, min=0, max=4*np.pi, step=0.1)
-    TldrawSineWidget.element(points=points)
-
-
-
-Page()