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,100 @@
+---
+title: "MicroPython Jupyter in the Browser with ESP32-C3 - Assignment 1: Blink - Control the NeoPixel LED"
+date: 2025-10-17T00:00:00+01:00
+showTableOfContents: false
+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 Rust board has one NeoPixel on GPIO 2.
+
+Open the Assignment 1 Jupyter notebook and work through the following tasks:
+
+### Task 1: Initialize the NeoPixel
+
+```python
+neopixel_led = neopixel.NeoPixel(machine.Pin(2), 1)
+```
+
+### Task 2: Set the Solid 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
+
+```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
+
+```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,88 @@
+---
+title: "MicroPython Jupyter in the Browser with ESP32-C3 - Assignment 2: Button Input"
+date: 2025-10-17T00:00:00+01:00
+showTableOfContents: false
+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 has internal pull-up resistors that can be enabled in software.
+
+### Task 1: Configure button
+
+```python
+button = machine.Pin(9, machine.Pin.IN, machine.Pin.PULL_UP)
+```
+
+### Task 2: Simple Button Press Detection
+
+```python
+def wait_for_button_press():
+    """Wait until button is pressed"""
+    while button.value() == 1:
+        time.sleep(0.01)
+    print("Button pressed!")
+```
+
+### 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
+
+```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,103 @@
+---
+title: "MicroPython Jupyter in the Browser with ESP32-C3 - Assignment 3: ESP-NOW Communication - Receiver"
+date: 2025-10-17T00:00:00+01:00
+showTableOfContents: false
+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
+
+```python
+# Setup WiFi 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
+
+```python
+# Setup NeoPixel
+neopixel_led = neopixel.NeoPixel(machine.Pin(2), 1)
+```
+
+### Task 3: Initialize ESP-NOW
+
+```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
+
+```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
+
+```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.
+
+
+Click on the ESP Control Panel and `Disconnect device` the device from the Jupyter notebook before proceeding with the next [assignment](../assignment-4/).

content/workshops/micropython-in-browser/assignment-3-receiver/index.md

@@ -0,0 +1,95 @@
+---
+title: "MicroPython Jupyter in the Browser with ESP32-C3 - Assignment 3: ESP-NOW Communication - Sender"
+date: 2025-10-17T00:00:00+01:00
+showTableOfContents: false
+series: ["WS00M"]
+series_order : 2
+showAuthor: false
+---
+
+## Assignment 3: ESP-NOW Communication - Sender
+
+Your task will be to send Morse code to the receiver based on the length of the button presses. Ask your partner for his MAC Address and replace `<MAC_ADDRESS>` with it.
+
+If prompted with selecting kernel, select `Embedded Kernel`, click on the ESP Control Panel and connect your device.
+
+### Task 1: Initialize ESP-NOW
+
+```python
+# Create WiFi station interface
+sta = network.WLAN(network.STA_IF)
+sta.active(True)
+
+# Initialize ESP-NOW
+e = espnow.ESPNow()
+e.active(True)
+
+# MAC address of receiver (replace <MAC_ADDRESS> receiver's MAC!)
+peer_mac = b'<MAC_ADDRESS>'
+
+# Try to delete any existing peer
+try:
+    e.del_peer(peer_mac)
+except OSError:
+    pass
+
+e.add_peer(peer_mac)
+```
+
+### Task 2: Implement Morse Detection
+
+```python
+# Button configuration
+button = machine.Pin(9, machine.Pin.IN, machine.Pin.PULL_UP)
+
+DOT_THRESHOLD = 0.3  # seconds
+DEBOUNCE = 0.05
+
+def wait_for_button_press():
+    """Wait until button is pressed"""
+    while button.value() == 1:
+        time.sleep(0.01)
+
+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
+
+def determine_morse_symbol(duration):
+    """Determine if press was dot or dash"""
+    if duration < DEBOUNCE:
+        return None
+    symbol = '.' if duration < DOT_THRESHOLD else '-'
+    return symbol
+
+def send_morse_symbol(symbol):
+    """Send morse symbol via ESP-NOW"""
+    print("Sending:", symbol)
+    e.send(peer_mac, symbol.encode())
+```
+
+### Task 3: Send Morse Symbols
+
+```python
+print("Morse Code Sender Ready!")
+print("Press button: short = dot (.), long = dash (-)")
+print("Press the stop button on the toolbar to terminate the while loop.")
+
+while True:
+    # Wait for button press
+    wait_for_button_press()
+
+    # Measure duration
+    duration = measure_press_duration()
+
+    # Determine symbol
+    symbol = determine_morse_symbol(duration)
+    if symbol:
+        # Send symbol via ESP-NOW
+        send_morse_symbol(symbol)
+```
+
+Click on the ESP Control Panel and `Disconnect device` the device from the Jupyter notebook before proceeding with the next [assignment](../assignment-4/).