feat: add micropython in the browser workshop

Author: XDanielPaul

assets/img/authors/daniel-paul.webp

@@ -0,0 +1,3 @@
+---
+title: Daniel Paul
+---

content/authors/daniel-paul/_index.md

@@ -0,0 +1,115 @@
+---
+title: "MicroPython Jupyter Notebooks in the Browser with ESP32-C3-DevKit-RUST-2"
+date: 2025-10-17
+showAuthor: false
+series: ["WS00M"]
+series_order: 1
+tags: ["Workshop", "MicroPython", "Jupyter", "Browser"]
+authors:
+  - "daniel-paul"
+showTableOfContents: false
+showAuthor: false
+summary: "In this workshop, you will learn how to program Espressif SoCs directly in your browser using MicroPython and Jupyter notebooks. We will primarily be using ESP32-C3-DevKit-RUST-2 development board. In the process, we will cover LED control, wireless communication, sensors, and MQTT."
+---
+
+Welcome to the workshop on MicroPython Jupyter Notebooks in the browser! In this session, you will see how modern web technologies enable direct hardware programming without the need to install local development tools. You'll learn how to flash firmware, execute code interactively, and build IoT applications using only a browser and a USB connection.
+
+## About the workshop
+
+This workshop covers both fundamental and advanced MicroPython programming for ESP32-C3-DevKit-RUST-2 development board through hands-on assignments:
+
+<!-- no toc -->
+
+- **Setup** - Flash MicroPython firmware and understand the development environment
+- **Assignment 1: Blink** -- Control NeoPixel LED
+- **Assignment 2: Button Input** -- Read button presses and create interactive responses
+- **Assignment 3: ESP-NOW Communication** -- Implement wireless Morse code communication between two ESP32-C3-DevKit-RUST-2 development boards
+- **Assignment 4: IMU Sensor and MQTT Communication** -- Read orientation data from an IMU and publish it to MQTT broker
+
+
+## Prerequisites
+
+### Hardware
+
+- Computer running Windows, macOS or Linux
+- Chromium-based browser (Google Chrome, Microsoft Edge, Opera, Brave, Vivaldi)
+- ESP32-C3-DevKit-RUST-2 development board (Provided by us)
+- USB-C cable (data + power) compatible with the board
+
+### Software
+
+- Modern Chromium-based browser with WebSerial API support
+- [Mosquitto](https://mosquitto.org/download/) message broker
+
+### Effort
+
+{{< alert icon="mug-hot">}}
+**Estimated time: 120 min**
+{{< /alert >}}
+
+## Introduction
+
+As it has already been announced, this workshop will be using MicroPython and Jupyter Notebooks. Let's quickly introduce them.
+
+### MicroPython
+
+MicroPython is a lean implementation of Python 3 optimized for microcontrollers. It provides an interactive REPL (Read-Eval-Print Loop) and supports most Python standard library features, making embedded development accessible to Python programmers.
+
+### Jupyter Notebook
+
+Jupyter Notebook is a web-based interactive computing environment that allows you to create documents that contain live code, and narrative text. It is composed from a kernel, which is a program that executes the code, and a frontend, which is a user interface that allows you to interact with the kernel.
+
+The code is composed of cells, which can be executed independently or sequentially, either by clicking on the cell and pressing the run button or using a keyboard shortcut `Shift + Enter`. If the code executes a `while True` loop, it can be interrupted by clicking on the stop button in the toolbar.
+
+### Why MicroPython Jupyter Notebooks in the Browser?
+Traditional embedded development requires installing toolchains, IDEs, and drivers. Browser-based Jupyter notebooks eliminate this setup by leveraging the WebSerial API, which allows web applications to communicate directly with serial devices. This approach offers several advantages:
+
+- **Zero installation**: No local toolchain required
+- **Interactive development**: Execute code cells individually and see immediate results
+- **Educational value**: Clear separation of concepts into notebook cells
+- **Cross-platform**: Works identically on Windows, macOS, and Linux
+- **Version control friendly**: Notebooks can be easily shared and versioned
+
+### How It Works
+The browser connects to your ESP32-C3-DevKit-RUST-2 development board via USB using the WebSerial API. Jupyter notebooks send Python code to the MicroPython REPL running on the device. The device executes the code and returns output, which displays in the notebook interface.
+
+### Related documentation
+
+- [MicroPython Documentation](https://docs.micropython.org/en/latest/)
+- [ESP32 MicroPython Guide](https://docs.micropython.org/en/latest/esp32/quickref.html)
+- [ESP-NOW Protocol](https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/network/esp_now.html)
+- [ESP-NOW in MicroPython](https://docs.micropython.org/en/latest/library/espnow.html)
+
+## Workshop
+
+Without further ado, let's dive into the exciting world of ESP microcontrollers and MicroPython! Please follow along as we explore the capabilities of this powerful platform.
+
+* [Setup](setup/)
+* [Assignment 1 - Blink](assignment-1/)
+* [Assignment 2 - Button Input](assignment-2/)
+* [Assignment 3 - ESP-NOW Communication](assignment-3/)
+* [Assignment 4 - IMU Sensor and MQTT Communication](assignment-4/)
+
+## Conclusion
+
+You've learned to program ESP32-C3-DevKit-RUST-2 development board using browser-based Jupyter notebooks, covering:
+
+- MicroPython firmware flashing and interactive development
+- GPIO control for LEDs and button input
+- ESP-NOW wireless communication protocol
+- IMU sensor data acquisition and processing
+- MQTT protocol for IoT messaging
+
+These skills form the foundation for building sophisticated IoT applications. The browser-based approach eliminates toolchain complexity while maintaining full access to MicroPython's capabilities.
+
+## FAQ
+- I have been prompted to select a kernel in Jupyter Notebook. Which kernel should I use?
+  - Select `Embedded Kernel`.
+- How do I connect my device to the Jupyter notebook?
+  - Click on the ESP Control Panel, click `Connect` and select your device.
+- Which of the devices is my ESP board?
+  - The ESP board usually appears as `USB JTAG`.
+- I cannot connect to a different Jupyter notebook.
+  - Disconnect from the previous notebook and connect the new one.
+- The notebook isn’t running my code, what should I do
+  - In the ESP Control Panel, click `Disconnect device`, then reopen the notebook and connect again.

content/workshops/micropython-in-browser/_index.md

@@ -0,0 +1,114 @@
+---
+title: "Assignment 1: Blink - Control the NeoPixel LED"
+date: 2025-10-17T00:00:00+01:00
+showTableOfContents: true
+series: ["WS00M"]
+series_order : 2
+showAuthor: false
+---
+
+## Assignment 1: Blink
+
+Let's continue by controlling the onboard NeoPixel LED.
+
+### Understanding NeoPixel LEDs
+
+NeoPixel (WS2812) LEDs are individually addressable RGB LEDs. Each LED can display any color by mixing red, green, and blue values (0-255 each). The ESP32-C3-DevKit-RUST-2 board has one NeoPixel on GPIO 2.
+
+Work through the following tasks in your Assignment 1 Jupyter notebook:
+
+### Task 1: Initialize the NeoPixel
+In this task, you’ll set up the NeoPixel LED so your code can communicate with it. The `neopixel.NeoPixel(machine.Pin(2), 1)` line tells the chip which pin the LED is connected to (GPIO 2) and how many LEDs are being controlled (1 in this case).
+
+```python
+neopixel_led = neopixel.NeoPixel(machine.Pin(2), 1)
+```
+
+### Task 2: Set the Solid Colors
+
+Here, you’ll write helper functions to change the LED’s color.
+The `set_color()` function lets you set any RGB color by adjusting red, green, and blue brightness values from 0–255.
+The `clear_led()` function turns the LED off.
+You’ll then test the LED by cycling through a few example colors.
+
+
+```python
+def set_color(r, g, b):
+    """Set the NeoPixel to a specific RGB color"""
+    neopixel_led[0] = (r, g, b)
+    neopixel_led.write()
+
+def clear_led():
+    """Turn off the LED"""
+    set_color(0, 0, 0)
+
+
+# Try different colors
+set_color(255, 0, 0)  # Red
+time.sleep(1)
+set_color(0, 255, 0)  # Green
+time.sleep(1)
+set_color(0, 0, 255)  # Blue
+time.sleep(1)
+set_color(255, 255, 0)  # Yellow
+time.sleep(1)
+clear_led()
+```
+
+### Task 3: Rainbow cycle effect
+
+This task adds a simple animation.
+You’ll create a rainbow_cycle() function that loops through a list of predefined colors — red, orange, yellow, green, blue, indigo, and violet — so the LED smoothly transitions through the rainbow spectrum.
+
+```python
+def rainbow_cycle():
+    """Cycle through rainbow colors"""
+    colors = [
+        (255, 0, 0),    # Red
+        (255, 127, 0),  # Orange
+        (255, 255, 0),  # Yellow
+        (0, 255, 0),    # Green
+        (0, 0, 255),    # Blue
+        (75, 0, 130),   # Indigo
+        (148, 0, 211)   # Violet
+    ]
+
+    for color in colors:
+        set_color(*color)
+        time.sleep(0.3)
+    clear_led()
+
+rainbow_cycle()
+```
+
+### Task 4: Breathing Effect
+
+Now you’ll create a more dynamic lighting effect.
+The breathing_effect() function gradually fades the LED in and out using brightness scaling, giving a “breathing” glow.
+You can adjust the color, duration, and smoothness by changing the parameters.
+
+```python
+def breathing_effect(r, g, b, duration=2, steps=50):
+    """
+    Create a breathing effect with the specified color
+    """
+    step_delay = duration / (steps * 2)
+
+    # Fade in
+    for i in range(steps):
+        brightness = i / steps
+        set_color(int(r * brightness), int(g * brightness), int(b * brightness))
+        time.sleep(step_delay)
+
+    # Fade out
+    for i in range(steps, 0, -1):
+        brightness = i / steps
+        set_color(int(r * brightness), int(g * brightness), int(b * brightness))
+        time.sleep(step_delay)
+
+    clear_led()
+
+breathing_effect(0, 100, 255)
+```
+
+Click on the ESP Control Panel and `Disconnect device` the device from the Jupyter notebook before proceeding with the next [assignment](../assignment-2/).

content/workshops/micropython-in-browser/assignment-1/index.md

@@ -0,0 +1,104 @@
+---
+title: "Assignment 2: Button Input"
+date: 2025-10-17T00:00:00+01:00
+showTableOfContents: true
+series: ["WS00M"]
+series_order : 2
+showAuthor: false
+---
+
+## Assignment 2: Button Input
+
+Learn to read button input and create interactive LED responses.
+
+If prompted with selecting kernel, select `Embedded Kernel`, click on the ESP Control Panel and connect your device.
+
+{{< alert icon="circle-info" cardColor="#b3e0f2" iconColor="#04a5e5">}}
+In this assignment you will be configuring a `boot` button located on Pin 9.
+{{< /alert >}}
+
+### Understanding Pull-up Resistors
+
+Buttons create a connection when pressed. Pull-up resistors ensure a defined logic level when the button is not pressed:
+
+Button not pressed: GPIO reads HIGH (1) due to pull-up resistor.
+
+Button pressed: GPIO reads LOW (0) as it connects to ground.
+
+The ESP32-C3-DevKit-RUST-2 has internal pull-up resistors that can be enabled in software.
+
+### Task 1: Configure button
+
+In this task, you’ll initialize the onboard button so your program can read its state.
+The pin is configured as an input (`machine.Pin.IN`) with an internal pull-up resistor (`machine.Pin.PULL_UP`).
+
+
+```python
+button = machine.Pin(9, machine.Pin.IN, machine.Pin.PULL_UP)
+```
+
+### Task 2: Simple Button Press Detection
+
+Here you’ll write a function that waits until the button is pressed.
+The loop continuously checks the pin’s value — when it changes from HIGH to LOW, the program detects a press and prints a message.
+
+```python
+def wait_for_button_press():
+    """Wait until button is pressed"""
+    while button.value() == 1:
+        time.sleep(0.01)
+    print("Button pressed!")
+```
+
+Now you’ll make the LED respond to button input.
+Each time the button is pressed, the LED toggles between ON and OFF.
+A small delay is added to handle “debouncing” — preventing multiple rapid triggers from one press.
+
+### Task 3: Toggle LED on Button Press
+
+```python
+led_state = False
+
+while True:
+    if button.value() == 0:  # Button pressed
+        led_state = not led_state
+        if led_state:
+            set_color(255, 0, 0)
+        else:
+            clear_led()
+
+        # Wait for button release (debounce)
+        while button.value() == 0:
+            time.sleep(0.01)
+        time.sleep(0.1)  # Additional debounce delay
+```
+
+### Task 4: Measure Press duration
+
+In this task, you’ll measure how long the button is held down.
+The program records the start time when pressed and calculates the total duration once released.
+
+```python
+def measure_press_duration():
+    """Measure how long the button is held down"""
+    start = time.ticks_ms()
+    while button.value() == 0:
+        time.sleep(0.01)
+    duration = time.ticks_diff(time.ticks_ms(), start) / 1000.0
+    return duration
+
+wait_for_button_press()
+duration = measure_press_duration()
+print(f"Button held for {duration:.2f} seconds")
+```
+
+### Bonus Challenge
+
+Create a visual feedback based on duration.
+
+Change LED color based on how long the button is pressed:
+- Short press (< 1s): Blue
+- Medium press (1-3s): Yellow
+- Long press (> 3s): Red
+
+Click on the ESP Control Panel and `Disconnect device` the device from the Jupyter notebook before proceeding with the next [assignment](../assignment-3).