PyAr · abadoni5 · Jun 3, 2024 · Jun 3, 2024 · Jun 10, 2024 · Aug 21, 2024
diff --git a/_sources/index.rst b/_sources/index.rst
@@ -31,4 +31,5 @@ Contenidos:
    :maxdepth: 1
 
    index_es
-   index_en
+   index_en
+   pycomponent
diff --git a/_sources/index_en.rst b/_sources/index_en.rst
@@ -34,6 +34,7 @@ Contents:
    lectures/TWP58/toctree_en
    lectures/TWP60/toctree_en
    lectures/TWP65/toctree_en
+   lectures/TWP67/toctree_en
    quiz/Quiz1_en.rst
    quiz/Quiz2_en.rst
    quiz/Quiz3_en.rst

diff --git a/_sources/index_es.rst b/_sources/index_es.rst
@@ -34,6 +34,7 @@ Contenidos:
    lectures/TWP58/toctree
    lectures/TWP60/toctree
    lectures/TWP65/toctree
+   lectures/TWP67/toctree
    quiz/Quiz1.rst
    quiz/Quiz2.rst
    quiz/Quiz3.rst

diff --git a/_sources/lectures/TWP67/TWP67_1_en.rst b/_sources/lectures/TWP67/TWP67_1_en.rst
@@ -0,0 +1,55 @@
+===
+PoC
+===
+
+Try These
+---------
+
+
+.. code-block:: python
+
+    import numpy as np
+    import matplotlib.pyplot as plt
+    from pyscript import display
+
+    # Define the domain
+    N = 55
+    X = np.linspace(-5, 5, N)
+    Y = np.sin(X)
+
+    # Plotting the values
+    plt.plot(X, Y, 'b-')
+    plt.grid(True)
+
+    # Display a message
+    print("The plot is displayed below:")
+
+    # Display the plot on the webpage
+    display(plt, target="output", append=False)
+
+.. code-block:: python
+
+    import ltk
+
+    # Clear the output div before adding new content
+    ltk.find("#output").empty()
+
+    # Create and append new elements to the output div
+    (
+        ltk.VBox(
+            ltk.HBox(
+                ltk.Text("Hello"),
+                ltk.Button(
+                    "World", 
+                    lambda event: 
+                        ltk.find(".ltk-button, a")
+                            .css("color", "red")
+                )
+                .css("color", "blue")
+            )
+        )
+        .appendTo(ltk.find("#output"))  # Append to the output div
+    )
+
+.. raw:: html
+    :file: ../_static/index1.html
diff --git a/_sources/lectures/TWP67/toctree.rst b/_sources/lectures/TWP67/toctree.rst
@@ -0,0 +1,18 @@
+==========
+Editor PoC
+==========
+
+
+.. image:: ../img/TWP10_001.jpeg
+    :height: 14.925cm
+    :width: 9.258cm
+    :align: center
+    :alt:
+
+
+.. toctree::
+   :caption: Contenido
+   :maxdepth: 1
+   :numbered:
+
+   TWP67_1_en.rst
diff --git a/_sources/lectures/TWP67/toctree_en.rst b/_sources/lectures/TWP67/toctree_en.rst
@@ -0,0 +1,18 @@
+==========
+Editor PoC
+==========
+
+
+.. image:: ../img/TWP10_001.jpeg
+    :height: 14.925cm
+    :width: 9.258cm
+    :align: center
+    :alt:
+
+
+.. toctree::
+   :caption: Contenido
+   :maxdepth: 1
+   :numbered:
+
+   TWP67_1_en.rst
diff --git a/_sources/lectures/_static/index1.html b/_sources/lectures/_static/index1.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="./mini-coi.js"></script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <link
+      rel="stylesheet"
+      href="https://pyscript.net/releases/2024.7.1/core.css"
+    />
+    <script
+      type="module"
+      src="https://pyscript.net/releases/2024.7.1/core.js"
+    ></script>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"
+    />
+
+    <style>
+      /* Container for editor and output */
+      #container {
+        border: 2px solid #333; /* Dark border */
+        border-radius: 8px; /* Rounded corners */
+        padding: 20px; /* Space inside the container */
+        margin: 20px auto; /* Center the container horizontally and add top/bottom margin */
+        max-width: 90%; /* Maximum width of the container */
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
+      }
+
+      /* Output Div styling */
+      #output {
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin-top: 10px;
+        overflow: auto;
+        resize: both; /* Allows the div to be resizable */
+        max-width: 100%; /* Ensures it doesn't overflow the viewport */
+        max-height: 80vh; /* Limits height to 80% of viewport height */
+      }
+
+      /* Clear button styling */
+      #clear-output-button {
+        display: block;
+        margin: 10px auto; /* Center the button horizontally */
+        padding: 6px 12px; /* Smaller padding */
+        font-size: 14px; /* Smaller font size */
+        border: none;
+        border-radius: 4px;
+        background-color: #007bff; /* Bootstrap primary color */
+        color: white;
+        cursor: pointer;
+      }
+
+      #clear-output-button:hover {
+        background-color: #0056b3; /* Darker blue on hover */
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <script
+        type="py-editor"
+        config='{
+        "packages": ["pyscript-ltk", "matplotlib", "numpy", "pandas", "sympy"],
+        "files": {
+            "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.js": "ltk/ltk.js",
+            "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.css": "ltk/ltk.css"
+        }}'
+      ></script>
+      <button id="clear-output-button">Clear Display Area</button>
+
+      <!-- Output Div -->
+      <div id="output"></div>
+    </div>
+
+    <script>
+      // JavaScript function to clear the output div
+      document
+        .getElementById("clear-output-button")
+        .addEventListener("click", function () {
+          document.getElementById("output").innerHTML = "";
+        });
+    </script>
+  </body>
+</html>
diff --git a/_sources/lectures/_static/mini-coi.js b/_sources/lectures/_static/mini-coi.js
@@ -0,0 +1,28 @@
+/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
+/*! mini-coi - Andrea Giammarchi and contributors, licensed under MIT */
+(({ document: d, navigator: { serviceWorker: s } }) => {
+    if (d) {
+        const { currentScript: c } = d;
+        s.register(c.src, { scope: c.getAttribute('scope') || '.' }).then(r => {
+            r.addEventListener('updatefound', () => location.reload());
+            if (r.active && !s.controller) location.reload();
+        });
+    }
+    else {
+        addEventListener('install', () => skipWaiting());
+        addEventListener('activate', e => e.waitUntil(clients.claim()));
+        addEventListener('fetch', e => {
+            const { request: r } = e;
+            if (r.cache === 'only-if-cached' && r.mode !== 'same-origin') return;
+            e.respondWith(fetch(r).then(r => {
+                const { body, status, statusText } = r;
+                if (!status || status > 399) return r;
+                const h = new Headers(r.headers);
+                h.set('Cross-Origin-Opener-Policy', 'same-origin');
+                h.set('Cross-Origin-Embedder-Policy', 'require-corp');
+                h.set('Cross-Origin-Resource-Policy', 'cross-origin');
+                return new Response(body, { status, statusText, headers: h });
+            }));
+        });
+    }
+})(self);
diff --git a/pyscript.html b/pyscript.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Refresh Iframe</title>
+    <style>
+    #refreshButton {
+      display: block;
+      margin: auto;
+      margin-bottom: 10px;
+      padding: 8px 16px;
+      background-color: #4caf50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    </style>
+  </head>
+  <body>
+    <div
+      style="padding: 20px 40px; background-color: #fcf8e3; border-radius: 5px"
+    >
+      <button id="refreshButton">Refresh</button>
+      <div>
+        <iframe
+          id="pyScriptFrame"
+          height="300px"
+          width="100%"
+          srcdoc='
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+      <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+      <style>
+        .py-repl-run-button {
+          opacity: 1;
+        }
+        #replOutput {
+          padding: 20px;
+          margin-top: 20px;
+          border: 1px solid #ccc;
+          border-radius: 5px;
+          background-color: #fff;
+        }
+      </style>
+    </head>
+    <body>
+      <py-config>
+        packages = ["numpy", "pandas", "matplotlib"] 
+        terminal = false
+      </py-config>
+
+      <py-repl output="replOutput"> 
+          print("Hello, World!")
+      </py-repl>
+
+      <div id="replOutput"></div>
+    </body>
+  </html>'
+          style="border: 1px solid #ccc; background-color: #fff"
+        >
+        </iframe>
+      </div>
+
+      <script>
+        document
+          .getElementById("refreshButton")
+          .addEventListener("click", function () {
+            // Reload the content of the iframe
+            document
+              .getElementById("pyScriptFrame")
+              .contentWindow.location.reload(true);
+          });
+      </script>
+    </div>
+  </body>
+</html>