diff --git a/.gitignore b/.gitignore index 6ae071f8e9..9373fe0f8e 100644 --- a/.gitignore +++ b/.gitignore @@ -66,3 +66,7 @@ docs/_build/ target/ .vscode + +# Build Files +.tool-versions +build-info diff --git a/_sources/index_en.rst b/_sources/index_en.rst index 07582b56c2..c5a5cb9814 100644 --- 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 index ecf1551c24..1cb3b96bca 100644 --- 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.rst b/_sources/lectures/TWP67/TWP67_1.rst new file mode 100644 index 0000000000..e0d6b45e75 --- /dev/null +++ b/_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 + +
+ +
+ +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. \ No newline at end of file diff --git a/_sources/lectures/TWP67/TWP67_1_en.rst b/_sources/lectures/TWP67/TWP67_1_en.rst new file mode 100644 index 0000000000..e0d6b45e75 --- /dev/null +++ b/_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 + +
+ +
+ +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. \ No newline at end of file diff --git a/_sources/lectures/TWP67/toctree.rst b/_sources/lectures/TWP67/toctree.rst new file mode 100644 index 0000000000..14f6e694f2 --- /dev/null +++ b/_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 diff --git a/_sources/lectures/TWP67/toctree_en.rst b/_sources/lectures/TWP67/toctree_en.rst new file mode 100644 index 0000000000..1a72677981 --- /dev/null +++ b/_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 diff --git a/_static/ltk_mini_editor/ltk.html b/_static/ltk_mini_editor/ltk.html new file mode 100644 index 0000000000..5ac5ea3078 --- /dev/null +++ b/_static/ltk_mini_editor/ltk.html @@ -0,0 +1,113 @@ + + + + + LTK on MicroPython + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/build_info b/build_info new file mode 100644 index 0000000000..1d0fe84223 --- /dev/null +++ b/build_info @@ -0,0 +1 @@ +unknown-0-0