adds intro ltk lesson

.gitignore

@@ -66,3 +66,7 @@ docs/_build/
 target/
 
 .vscode
+
+# Build Files
+.tool-versions
+build-info

_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

_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

_sources/lectures/TWP67/TWP67_1.rst

@@ -0,0 +1,67 @@
+===================
+Introduction to LTK
+===================
+
+What is LTK?
+------------
+
+LTK, or Layout Toolkit, is a powerful library designed to work with PyScript. PyScript allows developers to run Python code directly in the browser, leveraging web technologies to build dynamic and responsive web applications. LTK builds on this by providing a set of tools and components that make it easy to manipulate the DOM, create layouts, and add interactive elements without needing to write JavaScript.
+
+What Can LTK Do?
+----------------
+
+LTK provides a variety of components and utilities that simplify common web development tasks. Some of the key features of LTK include:
+
+- **DOM Manipulation**: Create and modify HTML elements using Python.
+- **Layout Components**: Use components like `Div`, `Span`, `VBox`, and `HBox` to structure your web pages.
+- **Event Handling**: Attach event listeners to elements and handle user interactions with Python functions.
+- **Styling**: Apply CSS styles to elements directly from Python code.
+- **Integration with Other Libraries**: Easily integrate with libraries like CodeMirror to add rich features like code editing.
+
+Creating a UI in the Browser
+----------------------------
+
+Using LTK, you can create user interfaces (UI) directly in the browser with Python. This approach allows you to leverage Python's simplicity and readability to build complex web applications. Let's start with a basic "Hello, World!" example to see how LTK works.
+
+Basic "Hello, World!" Example
+-----------------------------
+
+Here's a brief overview of a simple "Hello, World!" example using LTK:
+
+- **Import LTK Components**: Start by importing the necessary LTK components.
+- **Create a Layout**: Use `VBox` to create a vertical layout.
+- **Add Elements**: Add a `Span` to display text and a `Button` to handle user interaction.
+- **Run the Code**: When the button is clicked, an alert box will display "Hello, World!".
+
+Example Code
+------------
+
+.. note::
+    The current interpreter already handles the import statements and append for us.
+
+.. code-block:: python
+
+    ltk.VBox(
+        ltk.Span("Change me!")
+            .css("padding", 10),
+
+        ltk.Button("Hello World", lambda event: ltk.window.alert("Hello World!"))
+            .css("margin", 10),
+
+        ltk.Span("Delete me!")
+            .css("padding", 10)  
+    )
+
+
+Example: Interactive Editor
+---------------------------
+
+This interactive example demonstrates how to use LTK to create and manipulate HTML elements, handle user input, and dynamically update the interface. 
+
+.. raw:: html
+
+    <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+        <iframe src="/_static/ltk_mini_editor/ltk.html" width="100%" height="600px" frameborder="0"></iframe>
+    </div>
+
+The code behind this example uses LTK components such as `Div`, `VBox`, and `Button`, as well as integration with the CodeMirror library for the editor. By interacting with the editor, you can see how changes in the Python code immediately reflect in the web interface.

_sources/lectures/TWP67/TWP67_1_en.rst

@@ -0,0 +1,67 @@
+===================
+Introduction to LTK
+===================
+
+What is LTK?
+------------
+
+LTK, or Layout Toolkit, is a powerful library designed to work with PyScript. PyScript allows developers to run Python code directly in the browser, leveraging web technologies to build dynamic and responsive web applications. LTK builds on this by providing a set of tools and components that make it easy to manipulate the DOM, create layouts, and add interactive elements without needing to write JavaScript.
+
+What Can LTK Do?
+----------------
+
+LTK provides a variety of components and utilities that simplify common web development tasks. Some of the key features of LTK include:
+
+- **DOM Manipulation**: Create and modify HTML elements using Python.
+- **Layout Components**: Use components like `Div`, `Span`, `VBox`, and `HBox` to structure your web pages.
+- **Event Handling**: Attach event listeners to elements and handle user interactions with Python functions.
+- **Styling**: Apply CSS styles to elements directly from Python code.
+- **Integration with Other Libraries**: Easily integrate with libraries like CodeMirror to add rich features like code editing.
+
+Creating a UI in the Browser
+----------------------------
+
+Using LTK, you can create user interfaces (UI) directly in the browser with Python. This approach allows you to leverage Python's simplicity and readability to build complex web applications. Let's start with a basic "Hello, World!" example to see how LTK works.
+
+Basic "Hello, World!" Example
+-----------------------------
+
+Here's a brief overview of a simple "Hello, World!" example using LTK:
+
+- **Import LTK Components**: Start by importing the necessary LTK components.
+- **Create a Layout**: Use `VBox` to create a vertical layout.
+- **Add Elements**: Add a `Span` to display text and a `Button` to handle user interaction.
+- **Run the Code**: When the button is clicked, an alert box will display "Hello, World!".
+
+Example Code
+------------
+
+.. note::
+    The current interpreter already handles the import statements and append for us.
+
+.. code-block:: python
+
+    ltk.VBox(
+        ltk.Span("Change me!")
+            .css("padding", 10),
+
+        ltk.Button("Hello World", lambda event: ltk.window.alert("Hello World!"))
+            .css("margin", 10),
+
+        ltk.Span("Delete me!")
+            .css("padding", 10)  
+    )
+
+
+Example: Interactive Editor
+---------------------------
+
+This interactive example demonstrates how to use LTK to create and manipulate HTML elements, handle user input, and dynamically update the interface. 
+
+.. raw:: html
+
+    <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+        <iframe src="/_static/ltk_mini_editor/ltk.html" width="100%" height="600px" frameborder="0"></iframe>
+    </div>
+
+The code behind this example uses LTK components such as `Div`, `VBox`, and `Button`, as well as integration with the CodeMirror library for the editor. By interacting with the editor, you can see how changes in the Python code immediately reflect in the web interface.

_sources/lectures/TWP67/toctree.rst

@@ -0,0 +1,18 @@
+===================
+Introduction to LTK
+===================
+
+
+.. image:: ../img/TWP10_001.jpeg
+    :height: 14.925cm
+    :width: 9.258cm
+    :align: center
+    :alt:
+
+
+.. toctree::
+   :caption: Contenido
+   :maxdepth: 1
+   :numbered:
+
+   TWP67_1.rst

_sources/lectures/TWP67/toctree_en.rst

@@ -0,0 +1,18 @@
+===================
+Introduction to LTK
+===================
+
+
+.. image:: ../img/TWP10_001.jpeg
+    :height: 14.925cm
+    :width: 9.258cm
+    :align: center
+    :alt:
+
+
+.. toctree::
+   :caption: Contenido
+   :maxdepth: 1
+   :numbered:
+
+   TWP67_1_en.rst

_static/ltk_mini_editor/ltk.html

@@ -0,0 +1,113 @@
+<!-- working code with error handling -->
+
+<html lang="en">
+<head>
+    <title>LTK on MicroPython</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+
+    <link rel="stylesheet" href="https://pyscript.net/releases/2023.11.1/core.css">
+    <script type="module" src="https://pyscript.net/releases/2023.11.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">
+
+    <!-- Codemirror Interactive Editor -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" >
+
+
+</head>
+<body>
+    <script type="mpy" config='{
+    "files": {
+        "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/jquery.py": "ltk/jquery.py",
+        "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/widgets.py": "ltk/widgets.py",
+        "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/pubsub.py": "ltk/pubsub.py",
+        "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/__init__.py": "ltk/__init__.py",
+        "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/logger.py": "ltk/logger.py",
+        "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"
+    }
+    }'>
+    import ltk
+
+    class Editor(ltk.Div):
+        classes = [ "editor" ]
+
+        def __init__(self, value):
+            ltk.Div.__init__(self)
+            self.create(value)
+            ltk.schedule(lambda: self.editor.refresh(value), "Refresh after load")
+
+        def create(self, value):
+            config = ltk.to_js({
+                "mode": {
+                    "name": "python",
+                    "version": 3,
+                    "singleLineStringErrors": False
+                },
+                "lineNumbers": True,
+                "indentUnit": 4,
+                "matchBrackets": True,
+            })
+            self.editor = ltk.window.CodeMirror(self.element[0], config)
+            self.editor.setSize("100%", "100%")
+            self.text(value)
+
+        def text(self, text=None):
+            return self.editor.setValue(text) if text is not None else self.editor.getValue()
+
+    source = """   
+    ltk.VBox(
+        ltk.Span("Change me!")
+            .css("padding", 10),
+
+        ltk.Button("Hello World", lambda event: ltk.window.alert("Hello World!"))
+            .css("margin", 10),
+
+        ltk.Span("Delete me!")
+            .css("padding", 10) 
+
+    )
+    """.strip()
+
+
+    editor = Editor(source)
+
+    def show_output():
+        try:
+            text = editor.text()
+            ui = eval(text)
+            ltk.find("#editor-output").empty().append(ui.element)
+        except Exception as e:
+            pass  # Silently catch and ignore any errors
+
+    ltk.schedule(ltk.proxy(lambda: show_output()), "show output", 1)
+
+
+    (
+        ltk.VBox(
+            ltk.Div()
+                .css("border", "1px solid gray")
+                .css("height", 405)
+                .attr("id", "editor-output"),
+            ltk.Text("Edit the text below and see the changes in real-time above."),
+            editor
+                .on("keyup", ltk.proxy(lambda event: show_output()))
+                .css("border", "1px solid gray")
+                .css("height", 405)
+                .attr("id", "editor"),
+        )
+        .css("width", 900)
+        .css("font-size", 14)
+        .attr("name", "Editor")
+        .appendTo(ltk.window.document.body)
+    )
+
+    </script>
+
+</body>
+</html>

build_info

@@ -0,0 +1 @@
+unknown-0-0