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,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.
+
+Open the Assignment 1 Jupyter notebook and work through the following tasks:
+
+### 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,102 @@
+---
+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: 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].

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

@@ -0,0 +1,117 @@
+---
+title: "Assignment 3: ESP-NOW Communication - Receiver"
+date: 2025-10-17T00:00:00+01:00
+showTableOfContents: true
+series: ["WS00M"]
+series_order : 2
+showAuthor: false
+---
+
+## Assignment 3: ESP-NOW Communication - Receiver
+
+Your task will be to receive Morse code sent by the sender and display it on an LED.
+In order to receive the Morse code, you will need to initialize the ESP-NOW communication protocol and set up a callback function to handle incoming messages. The sender will need your MAC address to send the Morse code.
+
+If prompted with selecting kernel, select `Embedded Kernel`, click on the ESP Control Panel and connect your device.
+
+### Task 1: Initialize Receiver
+
+In this task, you’ll set up the chip as a Wi-Fi station and retrieve its MAC address.
+This MAC address will be used by the sender device to target your board when sending data.
+
+```python
+# Setup Wi-Fi and ESP-NOW
+sta = network.WLAN(network.STA_IF)
+sta.active(True)
+
+# Get and print MAC address
+print("My MAC address:", sta.config('mac'))
+```
+
+### Task 2: Initialize NeoPixel LED
+
+Here you’ll set up the NeoPixel LED to visualize incoming Morse code signals.
+
+```python
+# Setup NeoPixel
+neopixel_led = neopixel.NeoPixel(machine.Pin(2), 1)
+```
+
+### Task 3: Initialize ESP-NOW
+
+Now you’ll initialize the ESP-NOW communication protocol, which allows direct device-to-device messaging without Wi-Fi networking.
+You’ll also define timing constants that control how long each LED flash lasts.
+
+```python
+# Initialize ESP-NOW
+e = espnow.ESPNow()
+e.active(True)
+
+# Timing constants
+DOT_TIME = 0.2   # Green LED duration
+DASH_TIME = 0.6  # Red LED duration
+PAUSE = 0.2      # Gap after symbol
+```
+
+### Task 4: LED Display Functions
+
+In this task, you’ll implement helper functions to show Morse code visually.
+Dots will flash green for a short time, dashes will flash red for longer, and each symbol will include a short pause after it.
+
+```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 NeoPixel LED"""
+    set_color(0, 0, 0)
+
+def blink_dot():
+    """Display dot: green LED"""
+    set_color(0, 255, 0)
+    time.sleep(DOT_TIME)
+    clear_led()
+
+def blink_dash():
+    """Display dash: red LED"""
+    set_color(255, 0, 0)
+    time.sleep(DASH_TIME)
+    clear_led()
+
+def blink_morse_symbol(symbol):
+    """
+    Display the received Morse symbol with appropriate color and timing.
+    Includes pause after each symbol.
+    """
+    if symbol == ".":
+        blink_dot()
+    elif symbol == "-":
+        blink_dash()
+
+```
+
+### Task 5: Receive Morse Code
+
+Finally, you’ll write the main loop that waits for incoming ESP-NOW messages.
+Each received symbol (dot or dash) is decoded, printed, and displayed on the LED.
+
+```python
+print("Morse Code Receiver ready...")
+print("Dot = Green LED, Dash = Red LED")
+
+while True:
+    host, msg = e.recv(0)  # Non-blocking receive
+    if msg:
+        symbol = msg.decode()
+        print("Received:", symbol)
+        blink_morse_symbol(symbol)
+
+        time.sleep(PAUSE)
+```
+
+### Bonus Challenge: Extend the receiver to decode complete Morse code letters and display them. You can use a dictionary mapping Morse patterns (e.g., ".-" → "A") to actual text output.
+
+
+Click on the ESP Control Panel and `Disconnect device` the device from the Jupyter notebook before proceeding with the next [assignment](../assignment-4/).