fixup good enough

plot.py

@@ -10,15 +10,17 @@
 import numpy.ma as ma
 import pandas as pd
 from pyodide.http import open_url
+from pyscript import display
+from pyscript.web import div, page
 
 import metpy.calc as mpcalc
 from metpy.plots import add_metpy_logo, add_unidata_logo, SkewT
 from metpy.units import units, pandas_dataframe_to_unit_arrays
 
 
-def get_data_clicked():
-    station = Element('station_id').value
-    dt = datetime.fromisoformat(Element('datetime').value)
+def get_data_clicked(event):
+    station = page["#station_id"][0].value
+    dt = datetime.fromisoformat(page["#datetime"][0].value)
     console.log(f'Data for {station} at {dt} requested')
     try:
         plotter.get_data(station, dt)
@@ -32,8 +34,8 @@ def show_profile_clicked():
 
 
 class Plotter:
-    def __init__(self, div):
-        self._div = div
+    def __init__(self, divid):
+        self._divid = divid
         self._data = {}
         self._init_plot()
 
@@ -138,7 +140,6 @@ def enable_profile(self, enabled):
         self.draw()
 
     def draw(self):
-        Element(self._div).write(self._fig)
-
+        display(self._fig, target="skewt")
 
 plotter = Plotter('skewt')

pyscript.toml

@@ -0,0 +1,9 @@
+name = "MetPy Skew-T in PyScript"
+description = "Exploration for Doug/Drew-n-Drew/Doug's Daily Dose of Data."
+packages = [
+    "lzma",
+    "matplotlib",
+    "metpy",
+    "numpy",
+    "pandas",
+]

test.html

@@ -3,14 +3,11 @@
     <title>MetPy Skew-T in PyScript</title>
     <meta charset="utf-8">
 
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
-    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/2024.11.1/core.css" />
+    <script type="module" src="https://pyscript.net/releases/2024.11.1/core.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
-    <py-config>
-      packages = ["lzma", "metpy"]
-    </py-config>
-    <py-script src="plot.py"></py-script>
+    <script type="py" src="plot.py" config="pyscript.toml"></script>
     <style>
         #skewt img {
             display: inline-block;
@@ -29,7 +26,7 @@ <h1 class="text-3xl font-bold uppercase text-gray-800">MetPy SkewT PyScript Demo
         <input id="datetime" class="border rounded" type="datetime-local" value="1999-05-03T12:00">
       </div>
       <div>
-        <button id="update" class="btn btn-primary" type="submit" py-click="get_data_clicked()">Get Data</button>
+        <button id="update" class="btn btn-primary" type="submit" py-click="get_data_clicked">Get Data</button>
       </div>
       <div class="form-check form-switch">
         <input class="form-check-input" type="checkbox" role="switch" id="showprofile" py-click="show_profile_clicked()">