Initial commit

src/boot.py

@@ -0,0 +1,19 @@
+import wifi
+import time
+from settings import Settings
+
+print(wifi.ap('qwerty'))
+
+
+settings = Settings()
+ssid = settings.get('wifi', {}).get('ssid', None)
+password = settings.get('wifi', {}).get('password', None)
+ip = settings.get('wifi', {}).get('ip', None)
+gateway = settings.get('wifi', {}).get('gateway', None)
+
+for i in range(10):
+    config = wifi.connect(ssid, password, ip, gateway)
+    if config:
+        print(config)
+        break
+    time.sleep(0.1)

src/main.py

@@ -0,0 +1,54 @@
+import asyncio
+from settings import Settings
+from web import web
+from patterns import Patterns
+import gc
+import utime
+import machine
+import ntptime
+import time
+import wifi
+
+
+async def main():
+
+    
+
+    settings = Settings()
+
+    patterns = Patterns(4, settings["num_leds"], selected=settings["selected_pattern"])
+    patterns.set_color1(tuple(int(settings["color1"][i:i+2], 16) for i in (1, 5, 3)))
+    patterns.set_color2(tuple(int(settings["color2"][i:i+2], 16) for i in (1, 5, 3)))
+    patterns.set_brightness(int(settings["brightness"]))
+    patterns.set_delay(int(settings["delay"]))
+
+    w = web(settings, patterns)
+    print(settings)
+    # start the server in a bacakground task
+    print("Starting")
+    server = asyncio.create_task(w.start_server(host="0.0.0.0", port=80))
+    wdt = machine.WDT(timeout=10000)
+
+    async def tick():
+        while True:
+            patterns.tick()
+            await asyncio.sleep_ms(1)
+
+    asyncio.create_task(tick())
+
+    first = True
+
+    while True:
+        #print(time.localtime())
+            
+        # gc.collect()
+        for i in range(60):
+            wdt.feed()      
+            await asyncio.sleep_ms(500)
+
+    # cleanup before ending the application
+    await server
+
+asyncio.run(main())
+
+

src/patterns.py

@@ -0,0 +1,292 @@
+from machine import Pin
+from neopixel import NeoPixel
+import utime
+import random
+
+class Patterns:
+    def __init__(self, pin, num_leds, color1=(0,0,0), color2=(0,0,0), brightness=127, selected="rainbow_cycle", delay=100):
+        self.n = NeoPixel(Pin(pin, Pin.OUT), num_leds)
+        self.num_leds = num_leds
+        self.pattern_step = 0
+        self.last_update = utime.ticks_ms()
+        self.delay = delay
+        self.brightness = brightness
+        self.patterns = {
+            "off": self.off,
+            "on" : self.on,
+            "color_wipe": self.color_wipe_step,
+            "rainbow_cycle": self.rainbow_cycle_step,
+            "theater_chase": self.theater_chase_step,
+            "blink": self.blink_step,
+            "random_color_wipe": self.random_color_wipe_step,
+            "random_rainbow_cycle": self.random_rainbow_cycle_step,
+            "random_theater_chase": self.random_theater_chase_step,
+            "random_blink": self.random_blink_step,
+            "color_transition": self.color_transition_step,
+            "2 step forward 1 step back": self.two_steps_forward_one_step_back_step,
+            "external": None
+        }
+        self.selected = selected
+        self.color1 = color1
+        self.color2 = color2
+        self.transition_duration = 50  # Duration of color transition in milliseconds
+        self.transition_step = 0
+    
+    def sync(self):
+        self.pattern_step=0
+        self.last_update = utime.ticks_ms()
+
+    def tick(self):
+        if self.patterns[self.selected]:
+            self.patterns[self.selected]()
+        
+    def update_num_leds(self, pin, num_leds):
+        self.n = NeoPixel(Pin(pin, Pin.OUT), num_leds)
+        self.num_leds = num_leds
+        self.pattern_step = 0
+
+    def set_delay(self, delay):
+        self.delay = delay
+
+    def set_brightness(self, brightness):
+        self.brightness = brightness
+        
+    def set_color1(self, color):
+        print(color)
+        self.color1 = self.apply_brightness(color)
+        
+    def set_color2(self, color):
+        self.color2 = self.apply_brightness(color)
+    
+    def apply_brightness(self, color):
+        return tuple(int(c * self.brightness / 255) for c in color)
+    
+    def select(self, pattern):
+        if pattern in self.patterns:
+            self.selected = pattern
+            return True
+        return False
+    
+    def set(self, i, color):
+        self.n[i] = color
+
+    def write(self):
+        self.n.write()
+        
+    def fill(self):
+        for i in range(self.num_leds):
+            self.n[i] = self.color1
+        self.n.write()
+
+    def off(self):
+        color = self.color1
+        self.color1 = (0,0,0)
+        self.fill()
+        self.color1 = color
+    
+    def on(self):
+        color = self.color1
+        self.color1 = self.apply_brightness(self.color1)
+        self.fill()
+        self.color1 = color
+    
+    
+    def color_wipe_step(self):
+        color = self.apply_brightness(self.color1)
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            if self.pattern_step < self.num_leds:
+                for i in range(self.num_leds):
+                    self.n[i] = (0, 0, 0)
+                self.n[self.pattern_step] = self.apply_brightness(color)
+                self.n.write()
+                self.pattern_step += 1
+            else:
+                self.pattern_step = 0
+            self.last_update = current_time
+
+    def rainbow_cycle_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay/5:
+            def wheel(pos):
+                if pos < 85:
+                    return (pos * 3, 255 - pos * 3, 0)
+                elif pos < 170:
+                    pos -= 85
+                    return (255 - pos * 3, 0, pos * 3)
+                else:
+                    pos -= 170
+                    return (0, pos * 3, 255 - pos * 3)
+
+            for i in range(self.num_leds):
+                rc_index = (i * 256 // self.num_leds) + self.pattern_step
+                self.n[i] = self.apply_brightness(wheel(rc_index & 255))
+            self.n.write()
+            self.pattern_step = (self.pattern_step + 1) % 256
+            self.last_update = current_time
+
+    def theater_chase_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            for i in range(self.num_leds):
+                if (i + self.pattern_step) % 3 == 0:
+                    self.n[i] = self.apply_brightness(self.color1)
+                else:
+                    self.n[i] = (0, 0, 0)
+            self.n.write()
+            self.pattern_step = (self.pattern_step + 1) % 3
+            self.last_update = current_time
+
+    def blink_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            if self.pattern_step % 2 == 0:
+                for i in range(self.num_leds):
+                    self.n[i] = self.apply_brightness(self.color1)
+            else:
+                for i in range(self.num_leds):
+                    self.n[i] = (0, 0, 0)
+            self.n.write()
+            self.pattern_step = (self.pattern_step + 1) % 2
+            self.last_update = current_time
+
+    def random_color_wipe_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
+            if self.pattern_step < self.num_leds:
+                for i in range(self.num_leds):
+                    self.n[i] = (0, 0, 0)
+                self.n[self.pattern_step] = self.apply_brightness(color)
+                self.n.write()
+                self.pattern_step += 1
+            else:
+                self.pattern_step = 0
+            self.last_update = current_time
+
+    def random_rainbow_cycle_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            def wheel(pos):
+                if pos < 85:
+                    return (pos * 3, 255 - pos * 3, 0)
+                elif pos < 170:
+                    pos -= 85
+                    return (255 - pos * 3, 0, pos * 3)
+                else:
+                    pos -= 170
+                    return (0, pos * 3, 255 - pos * 3)
+
+            random_offset = random.randint(0, 255)
+            for i in range(self.num_leds):
+                rc_index = (i * 256 // self.num_leds) + self.pattern_step + random_offset
+                self.n[i] = self.apply_brightness(wheel(rc_index & 255))
+            self.n.write()
+            self.pattern_step = (self.pattern_step + 1) % 256
+            self.last_update = current_time
+
+    def random_theater_chase_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
+            for i in range(self.num_leds):
+                if (i + self.pattern_step) % 3 == 0:
+                    self.n[i] = self.apply_brightness(color)
+                else:
+                    self.n[i] = (0, 0, 0)
+            self.n.write()
+            self.pattern_step = (self.pattern_step + 1) % 3
+            self.last_update = current_time
+
+    def random_blink_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
+            if self.pattern_step % 2 == 0:
+                for i in range(self.num_leds):
+                    self.n[i] = self.apply_brightness(color)
+            else:
+                for i in range(self.num_leds):
+                    self.n[i] = (0, 0, 0)
+            self.n.write()
+            self.pattern_step = (self.pattern_step + 1) % 2
+            self.last_update = current_time
+
+    def color_transition_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            # Calculate transition factor based on elapsed time
+            transition_factor = (self.pattern_step * 100) / self.transition_duration
+            if transition_factor > 100:
+                transition_factor = 100
+            color = self.interpolate_color(self.color1, self.color2, transition_factor / 100)
+            
+            # Apply the interpolated color to all LEDs
+            for i in range(self.num_leds):
+                self.n[i] = self.apply_brightness(color)
+            self.n.write()
+
+            self.pattern_step += self.delay
+            if self.pattern_step > self.transition_duration:
+                self.pattern_step = 0
+
+            self.last_update = current_time
+
+    def interpolate_color(self, color1, color2, factor):
+        return (
+            int(color1[0] + (color2[0] - color1[0]) * factor),
+            int(color1[1] + (color2[1] - color1[1]) * factor),
+            int(color1[2] + (color2[2] - color1[2]) * factor)
+        )
+    
+    def two_steps_forward_one_step_back_step(self):
+        current_time = utime.ticks_ms()
+        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
+            # Move forward 2 steps and backward 1 step
+            if self.direction == 1:  # Moving forward
+                if self.scanner_position < self.num_leds - 2:
+                    self.scanner_position += 2  # Move forward 2 steps
+                else:
+                    self.direction = -1  # Change direction to backward
+            else:  # Moving backward
+                if self.scanner_position > 0:
+                    self.scanner_position -= 1  # Move backward 1 step
+                else:
+                    self.direction = 1  # Change direction to forward
+            
+            # Set all LEDs to off
+            for i in range(self.num_leds):
+                self.n[i] = (0, 0, 0)
+            
+            # Set the current position to the color
+            self.n[self.scanner_position] = self.apply_brightness(self.color1)
+            
+            # Apply the color transition
+            transition_factor = (self.pattern_step * 100) / self.transition_duration
+            if transition_factor > 100:
+                transition_factor = 100
+            color = self.interpolate_color(self.color1, self.color2, transition_factor / 100)
+            self.n[self.scanner_position] = self.apply_brightness(color)
+            
+            self.n.write()
+            self.pattern_step += self.delay
+            if self.pattern_step > self.transition_duration:
+                self.pattern_step = 0
+
+            self.last_update = current_time
+
+if __name__ == "__main__":
+    p = Patterns(4, 180)
+    p.set_color1((255,0,0))
+    p.set_color2((0,255,0))
+    #p.set_delay(10)
+    try:
+        while True:
+            for key in p.patterns:
+                print(key)
+                p.select(key)
+                for _ in range(2000):
+                    p.tick()
+                    utime.sleep_ms(1)
+    except KeyboardInterrupt:
+        p.fill((0, 0, 0))

src/settings.py

@@ -0,0 +1,53 @@
+import json
+
+class Settings(dict):
+    SETTINGS_FILE = "/settings.json"
+
+    def __init__(self):
+        super().__init__()
+        self.load()  # Load settings from file during initialization
+
+    def set_defaults(self):
+        self["num_leds"] = 50
+        self["selected_pattern"] = "blink"
+        self["color1"] = "#000f00"
+        self["color2"] = "#0f0000"
+        self["delay"] = 100
+        self["brightness"] = 100
+        self["wifi"] = {"ssid": "", "password": ""}
+
+    def save(self):
+        try:
+            j = json.dumps(self)
+            with open(self.SETTINGS_FILE, 'w') as file:
+                file.write(j)
+            print("Settings saved successfully.")
+        except Exception as e:
+            print(f"Error saving settings: {e}")
+
+    def load(self):
+        try:
+            with open(self.SETTINGS_FILE, 'r') as file:
+                loaded_settings = json.load(file)
+            self.update(loaded_settings)
+            print("Settings loaded successfully.")
+        except Exception as e:
+            print(f"Error loading settings")
+            self.set_defaults()
+
+# Example usage
+def main():
+    settings = Settings()
+    print(f"Number of LEDs: {settings['num_leds']}")
+    settings['num_leds'] = 100
+    print(f"Updated number of LEDs: {settings['num_leds']}")
+    settings.save()
+    
+    # Create a new Settings object to test loading
+    new_settings = Settings()
+    print(f"Loaded number of LEDs: {new_settings['num_leds']}")
+    print(settings)
+
+# Run the example
+if __name__ == "__main__":
+    main()

src/static/main.css

@@ -0,0 +1,75 @@
+body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        h1 {
+            text-align: center;
+        }
+        
+        form {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        input[type="text"], input[type="submit"], input[type="range"], input[type="color"] {
+            width: 100%;
+            
+            margin-bottom: 10px;
+            box-sizing: border-box;
+        }
+        input[type="range"] {
+            -webkit-appearance: none;
+            appearance: none;
+            height: 25px;
+            background: #d3d3d3;
+            outline: none;
+            opacity: 0.7;
+            transition: opacity .2s;
+        }
+        input[type="range"]:hover {
+            opacity: 1;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 25px;
+            height: 25px;
+            background: #4CAF50;
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        input[type="range"]::-moz-range-thumb {
+            width: 25px;
+            height: 25px;
+            background: #4CAF50;
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        #pattern_buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        #pattern_buttons button {
+            flex: 1 0 calc(33.333% - 10px);
+            padding: 10px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        #pattern_buttons button:hover {
+            background-color: #45a049;
+        }
+        @media (max-width: 480px) {
+            #pattern_buttons button {
+                flex: 1 0 calc(50% - 10px);
+            }
+        }

src/static/main.js

@@ -0,0 +1,147 @@
+let delayTimeout;
+let brightnessTimeout;
+let colorTimeout;
+let color2Timeout;
+
+async function post(path, data) {
+    console.log(`POST to ${path}`, data);
+    try {
+        const response = await fetch(path, {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data) // Convert data to JSON string
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+    } catch (error) {
+        console.error('Error during POST request:', error);
+    }
+}
+
+async function get(path) {
+    try {
+        const response = await fetch(path);
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return await response.json(); // Assuming you are expecting JSON response
+    } catch (error) {
+        console.error('Error during GET request:', error);
+    }
+}
+
+async function updateColor(event) {
+    event.preventDefault();
+    clearTimeout(colorTimeout);
+    colorTimeout = setTimeout(async function() {
+        const color = document.getElementById('color').value;
+        await post("/color", { color }); // Send as JSON
+    }, 500);
+}
+
+async function updateColor2(event) {
+    event.preventDefault();
+    clearTimeout(color2Timeout);
+    color2Timeout = setTimeout(async function() {
+        const color = document.getElementById('color2').value;
+        await post("/color2", { color }); // Send as JSON
+    }, 500);
+}
+
+async function updatePattern(pattern) {
+    event.preventDefault();
+    await post("/pattern", { pattern }); // Send as JSON
+}
+
+async function updateBrightness(event) {
+    event.preventDefault();
+    clearTimeout(brightnessTimeout);
+    brightnessTimeout = setTimeout(async function() {
+        const brightness = document.getElementById('brightness').value;
+        await post('/brightness', { brightness }); // Send as JSON
+    }, 500);
+}
+
+async function updateDelay(event) {
+    event.preventDefault();
+    clearTimeout(delayTimeout);
+    delayTimeout = setTimeout(async function() {
+        const delay = document.getElementById('delay').value;
+        await post('/delay', { delay }); // Send as JSON
+    }, 500);
+}
+
+async function updateNumLeds(event) {
+    event.preventDefault();
+    const numLeds = document.getElementById('num_leds').value;
+    await post('/num_leds', { num_leds: numLeds }); // Send as JSON
+}
+
+async function updateWifi(event) {
+    event.preventDefault();
+    const ssid = document.getElementById('ssid').value;
+    const password = document.getElementById('password').value;
+    const ip = document.getElementById('ip').value;
+    const gateway = document.getElementById('gateway').value;
+
+    const wifiSettings = { ssid, password, ip, gateway }; // Create JSON object
+    console.log(wifiSettings);
+    const response = await post('/wifi_settings', wifiSettings); // Send as JSON
+    if (response === 500) {
+        alert("Failed to connect to Wi-Fi");
+    }
+}
+
+function createPatternButtons(patterns) {
+    const container = document.getElementById('pattern_buttons');
+    container.innerHTML = ''; // Clear previous buttons
+
+    patterns.forEach(pattern => {
+        const button = document.createElement('button');
+        button.type = 'button'; // Use 'button' instead of 'submit'
+        button.textContent = pattern;
+        button.value = pattern;
+        button.addEventListener('click', async function(event) {
+            event.preventDefault();
+            await updatePattern(pattern);
+        });
+        container.appendChild(button);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', async function() {
+    document.getElementById('color').addEventListener('input', updateColor);
+    document.getElementById('color2').addEventListener('input', updateColor2);
+    document.getElementById('delay').addEventListener('input', updateDelay);
+    document.getElementById('brightness').addEventListener('input', updateBrightness);
+    document.getElementById('num_leds_form').addEventListener('submit', updateNumLeds);
+    document.getElementById('wifi_form').addEventListener('submit', updateWifi);
+    document.getElementById('delay').addEventListener('touchend', updateDelay);
+    document.getElementById('brightness').addEventListener('touchend', updateBrightness);
+
+    document.querySelectorAll(".pattern_button").forEach(button => {
+        console.log(button.value);
+        button.addEventListener('click', async event => {
+            event.preventDefault();
+            await updatePattern(button.value);
+        });
+    });  
+});
+
+// Function to toggle the display of the settings menu
+function selectSettings() {
+    const settingsMenu = document.getElementById('settings_menu');
+    controls = document.getElementById('controls');
+    settingsMenu.style.display = 'block';
+    controls.style.display = 'none';
+}
+
+function selectControls() {
+    const settingsMenu = document.getElementById('settings_menu');
+    controls = document.getElementById('controls');
+    settingsMenu.style.display = 'none';
+    controls.style.display = 'block';
+}

src/templates/index.html

@@ -0,0 +1,71 @@
+{% args settings, patterns %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Control</title>
+    <script src="static/main.js"></script>
+    <link rel="stylesheet" href="static/main.css">
+</head>
+<body>
+    <h1>Control LEDs</h1>
+    <button onclick="selectControls()">Controls</button>
+    <button onclick="selectSettings()">Settings</button>
+
+    <!-- Main LED Controls -->
+    <div id="controls">
+        <div id="pattern_buttons">
+            {% for p in patterns %}
+            <button class="pattern_button" value="{{p}}">{{p}}</button>
+            {% endfor %}
+           
+            <!-- Pattern buttons will be inserted here -->
+        </div>
+        <form id="delay_form" method="post" action="/delay">
+            <label for="delay">Delay:</label>
+            <input type="range" id="delay" name="delay" min="1" max="1000" value="{{settings['delay']}}" step="10">
+        </form>
+        <form id="brightness_form" method="post" action="/brightness">
+            <label for="brightness">Brightness:</label>
+            <input type="range" id="brightness" name="brightness" min="0" max="100" value="{{settings['brightness']}}" step="1">
+        </form>
+        <form id="color_form" method="post" action="/color">
+            <input type="color" id="color" name="color" value="{{settings['color1']}}">
+        </form>
+        <form id="color2_form" method="post" action="/color2">
+            <input type="color" id="color2" name="color2" value="{{settings['color2']}}">
+        </form>
+    </div>
+
+    <!-- Settings Menu for num_leds, Wi-Fi SSID, and Password -->
+    
+    <div id="settings_menu" style="display: none;">
+        <h2>Settings</h2>
+        
+        <!-- Separate form for submitting num_leds -->
+        <form id="num_leds_form" method="post" action="/num_leds">
+            <label for="num_leds">Number of LEDs:</label>
+            <input type="text" id="num_leds" name="num_leds" value="{{settings['num_leds']}}">
+            <input type="submit" value="Update Number of LEDs">
+        </form>
+
+        <!-- Form for Wi-Fi SSID and password -->
+        <form id="wifi_form" method="post" action="/wifi_settings">
+            <label for="ssid">Wi-Fi SSID:</label>
+            <input type="text" id="ssid" name="ssid" value="{{settings['wifi']['ssid']}}">
+            <br>
+            <label for="password">Wi-Fi Password:</label>
+            <input type="password" id="password" name="password">
+            <br>
+            <label for="ip">Wi-Fi IP:</label>
+            <input type="ip" id="ip" name="ip" value="{{settings.get('wifi', {}).get('ip', '')}}">
+            <br>
+            <label for="gateway">Wi-Fi Gateway:</label>
+            <input type="gateway" id="gateway" name="gateway" value="{{settings.get('wifi', {}).get('gateway', '')}}">
+            <br>
+            <input type="submit" value="Save Wi-Fi Settings">
+        </form>
+    </div>
+</body>
+</html>

src/templates/index_html.py

@@ -0,0 +1,94 @@
+# Autogenerated file
+def render(settings, patterns):
+    yield """<!DOCTYPE html>
+<html lang=\"en\">
+<head>
+    <meta charset=\"UTF-8\">
+    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
+    <title>LED Control</title>
+    <script src=\"static/main.js\"></script>
+    <link rel=\"stylesheet\" href=\"static/main.css\">
+</head>
+<body>
+    <h1>Control LEDs</h1>
+    <button onclick=\"selectControls()\">Controls</button>
+    <button onclick=\"selectSettings()\">Settings</button>
+
+    <!-- Main LED Controls -->
+    <div id=\"controls\">
+        <div id=\"pattern_buttons\">
+            """
+    for p in patterns:
+        yield """            <button class=\"pattern_button\" value=\""""
+        yield str(p)
+        yield """\">"""
+        yield str(p)
+        yield """</button>
+            """
+    yield """           
+            <!-- Pattern buttons will be inserted here -->
+        </div>
+        <form id=\"delay_form\" method=\"post\" action=\"/delay\">
+            <label for=\"delay\">Delay:</label>
+            <input type=\"range\" id=\"delay\" name=\"delay\" min=\"1\" max=\"1000\" value=\""""
+    yield str(settings['delay'])
+    yield """\" step=\"10\">
+        </form>
+        <form id=\"brightness_form\" method=\"post\" action=\"/brightness\">
+            <label for=\"brightness\">Brightness:</label>
+            <input type=\"range\" id=\"brightness\" name=\"brightness\" min=\"0\" max=\"100\" value=\""""
+    yield str(settings['brightness'])
+    yield """\" step=\"1\">
+        </form>
+        <form id=\"color_form\" method=\"post\" action=\"/color\">
+            <input type=\"color\" id=\"color\" name=\"color\" value=\""""
+    yield str(settings['color1'])
+    yield """\">
+        </form>
+        <form id=\"color2_form\" method=\"post\" action=\"/color2\">
+            <input type=\"color\" id=\"color2\" name=\"color2\" value=\""""
+    yield str(settings['color2'])
+    yield """\">
+        </form>
+    </div>
+
+    <!-- Settings Menu for num_leds, Wi-Fi SSID, and Password -->
+    
+    <div id=\"settings_menu\" style=\"display: none;\">
+        <h2>Settings</h2>
+        
+        <!-- Separate form for submitting num_leds -->
+        <form id=\"num_leds_form\" method=\"post\" action=\"/num_leds\">
+            <label for=\"num_leds\">Number of LEDs:</label>
+            <input type=\"text\" id=\"num_leds\" name=\"num_leds\" value=\""""
+    yield str(settings['num_leds'])
+    yield """\">
+            <input type=\"submit\" value=\"Update Number of LEDs\">
+        </form>
+
+        <!-- Form for Wi-Fi SSID and password -->
+        <form id=\"wifi_form\" method=\"post\" action=\"/wifi_settings\">
+            <label for=\"ssid\">Wi-Fi SSID:</label>
+            <input type=\"text\" id=\"ssid\" name=\"ssid\" value=\""""
+    yield str(settings['wifi']['ssid'])
+    yield """\">
+            <br>
+            <label for=\"password\">Wi-Fi Password:</label>
+            <input type=\"password\" id=\"password\" name=\"password\">
+            <br>
+            <label for=\"ip\">Wi-Fi IP:</label>
+            <input type=\"ip\" id=\"ip\" name=\"ip\" value=\""""
+    yield str(settings.get('wifi', {}).get('ip', ''))
+    yield """\">
+            <br>
+            <label for=\"gateway\">Wi-Fi Gateway:</label>
+            <input type=\"gateway\" id=\"gateway\" name=\"gateway\" value=\""""
+    yield str(settings.get('wifi', {}).get('gateway', ''))
+    yield """\">
+            <br>
+            <input type=\"submit\" value=\"Save Wi-Fi Settings\">
+        </form>
+    </div>
+</body>
+</html>
+"""

src/web.py

@@ -0,0 +1,135 @@
+from microdot import Microdot, send_file, Response
+from microdot.utemplate import Template
+from microdot.websocket import with_websocket
+
+import json
+import wifi
+
+def web(settings, patterns):
+    app = Microdot()
+    Response.default_content_type = 'text/html'
+
+    @app.route('/')
+    async def index(request):
+        return Template('/index.html').render(settings=settings, patterns=patterns.patterns.keys())
+
+    @app.route("/static/<path:path>")
+    def static(request, path):
+        if '..' in path:
+            # Directory traversal is not allowed
+            return 'Not found', 404
+        return send_file('static/' + path)
+
+    @app.post("/num_leds")
+    def num_leds(request):
+        try:
+            data = json.loads(request.body.decode('utf-8'))
+            num_leds = int(data["num_leds"])
+            patterns.update_num_leds(4, num_leds)
+            settings["num_leds"] = num_leds
+            settings.save()
+            return "OK", 200
+        except (ValueError, KeyError, json.JSONDecodeError):
+            return "Bad request", 400
+
+    @app.post("/pattern")
+    def pattern(request):
+        try:
+            data = json.loads(request.body.decode('utf-8'))
+            pattern = data["pattern"]
+            if patterns.select(pattern):
+                settings["selected_pattern"] = pattern
+                settings.save()
+                return "OK", 200
+            else:
+                return "Bad request", 400
+        except (KeyError, json.JSONDecodeError):
+            return "Bad request", 400
+
+    @app.post("/delay")
+    def delay(request):
+        try:
+            data = json.loads(request.body.decode('utf-8'))
+            delay = int(data["delay"])
+            patterns.set_delay(delay)
+            settings["delay"] = delay
+            settings.save()
+            return "OK", 200
+        except (ValueError, KeyError, json.JSONDecodeError):
+            return "Bad request", 400
+
+    @app.post("/brightness")
+    def brightness(request):
+        try:
+            data = json.loads(request.body.decode('utf-8'))
+            brightness = int(data["brightness"])
+            patterns.set_brightness(brightness)
+            settings["brightness"] = brightness
+            settings.save()
+            return "OK", 200
+        except (ValueError, KeyError, json.JSONDecodeError):
+            return "Bad request", 400
+
+    @app.post("/color")          
+    def color(request):
+        try:
+            data = json.loads(request.body.decode('utf-8'))
+            color = data["color"]
+            patterns.set_color1(tuple(int(color[i:i+2], 16) for i in (1, 3, 5)))  # Convert hex to RGB
+            settings["color1"] = color
+            settings.save()
+            return "OK", 200
+        except (KeyError, json.JSONDecodeError, ValueError):
+            return "Bad request", 400
+
+    @app.post("/color2")          
+    def color2(request):
+        try:
+            data = json.loads(request.body.decode('utf-8'))
+            color = data["color2"]
+            patterns.set_color2(tuple(int(color[i:i+2], 16) for i in (1, 3, 5)))  # Convert hex to RGB
+            settings["color2"] = color
+            settings.save()
+            return "OK", 200
+        except (KeyError, json.JSONDecodeError, ValueError):
+            return "Bad request", 400
+
+
+    @app.post("/wifi_settings")          
+    def wifi_settings(request):
+        try:
+            data = json.loads(request.body.decode('utf-8'))
+            print(data)
+            ssid = settings['wifi']['ssid'] = data['ssid']
+            password = settings['wifi']['password'] = data.get('password', settings['wifi']['password'])
+            ip = settings['wifi']['ip'] = data.get('ip', None)
+            gateway = settings['wifi']['gateway'] = data.get('gateway', None)
+            print(settings)
+            
+            if config := wifi.connect(ssid, password, ip, gateway):
+                print(config)
+                settings.save()
+
+            return "OK", 200
+        except Exception as e:
+            print(f"Wifi {e}")
+            return "Bad request", 400
+
+
+    @app.post("/sync")
+    def sync(request):
+        patterns.sync()
+        return "OK", 200
+
+    @app.route("/external")
+    @with_websocket
+    async def ws(request, ws):
+        patterns.select("external")
+        while True:
+            data = await ws.receive()
+            print(data)
+            for i in range(min(patterns.num_leds, int(len(data)/3))):
+                patterns.set(i, (data[i*3], data[i*3+1], data[i*3+2]))
+            patterns.write()
+
+    return app

src/wifi.py

@@ -0,0 +1,46 @@
+import network
+from machine import Pin
+from time import sleep
+import ubinascii
+from settings import Settings
+
+def connect(ssid, password, ip, gateway):
+    if ssid is None or password is None:
+        print("Missing ssid or password")
+        return None
+    try:
+        sta_if = network.WLAN(network.STA_IF)
+        if ip is not None and gateway is not None:
+            sta_if.ifconfig((ip, '255.255.255.0', gateway, '1.1.1.1'))
+        if not sta_if.isconnected():
+            print('connecting to network...')
+            sta_if.active(True)
+            sta_if.connect(ssid, password)
+            sleep(0.1)
+            if sta_if.isconnected():
+                return sta_if.ifconfig()
+            return None
+        return sta_if.ifconfig()
+    except Exception as e:
+        print(f"Failed to connect to wifi {e}")
+        return None
+
+
+def ap(password):
+    ap_if = network.WLAN(network.AP_IF)
+    ap_mac = ap_if.config('mac')
+    ssid = f"led-{ubinascii.hexlify(ap_mac).decode()}"
+    print(ssid)
+    ap_if.active(True)
+    ap_if.config(essid=ssid, password="qwerty1234")
+    ap_if.active(False)
+    ap_if.active(True)
+    print(ap_if.ifconfig())
+
+
+
+
+
+
+
+