Add src

Pipfile

@@ -0,0 +1,14 @@
+[[source]]
+url = "https://pypi.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+mpremote = "*"
+pyserial = "*"
+esptool = "*"
+
+[dev-packages]
+
+[requires]
+python_version = "3.12"

dev.py

@@ -0,0 +1,33 @@
+#!/usr/bin/env python3
+
+import subprocess
+import serial
+import sys
+
+print(sys.argv)
+
+port = sys.argv[1]
+
+cmd = sys.argv[1]
+
+for cmd in sys.argv[1:]:
+    print(cmd)
+    match cmd:
+        case "src":
+            subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", ".", ":" ], cwd="src")
+        case "lib":
+            subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "lib", ":" ])
+        case "ls":
+            subprocess.call(["mpremote", "connect", port, "fs", "ls", ":" ])
+        case "reset":
+            with serial.Serial(port, baudrate=115200) as ser:
+                ser.write(b'\x03\x03\x04')
+        case "follow":
+            with serial.Serial(port, baudrate=115200) as ser:
+                while True:
+                    if ser.in_waiting > 0:  # Check if there is data in the buffer
+                        data = ser.readline().decode('utf-8').strip()  # Read and decode the data
+                        print(data)
+
+
+

lib/microdot/__init__.py

@@ -0,0 +1,2 @@
+from microdot.microdot import Microdot, Request, Response, abort, redirect, \
+    send_file  # noqa: F401

lib/microdot/helpers.py

@@ -0,0 +1,8 @@
+try:
+    from functools import wraps
+except ImportError:  # pragma: no cover
+    # MicroPython does not currently implement functools.wraps
+    def wraps(wrapped):
+        def _(wrapper):
+            return wrapper
+        return _

lib/microdot/utemplate.py

@@ -0,0 +1,70 @@
+from utemplate import recompile
+
+_loader = None
+
+
+class Template:
+    """A template object.
+
+    :param template: The filename of the template to render, relative to the
+                     configured template directory.
+    """
+    @classmethod
+    def initialize(cls, template_dir='templates',
+                   loader_class=recompile.Loader):
+        """Initialize the templating subsystem.
+
+        :param template_dir: the directory where templates are stored. This
+                             argument is optional. The default is to load
+                             templates from a *templates* subdirectory.
+        :param loader_class: the ``utemplate.Loader`` class to use when loading
+                             templates. This argument is optional. The default
+                             is the ``recompile.Loader`` class, which
+                             automatically recompiles templates when they
+                             change.
+        """
+        global _loader
+        _loader = loader_class(None, template_dir)
+
+    def __init__(self, template):
+        if _loader is None:  # pragma: no cover
+            self.initialize()
+        #: The name of the template
+        self.name = template
+        self.template = _loader.load(template)
+
+    def generate(self, *args, **kwargs):
+        """Return a generator that renders the template in chunks, with the
+        given arguments."""
+        return self.template(*args, **kwargs)
+
+    def render(self, *args, **kwargs):
+        """Render the template with the given arguments and return it as a
+        string."""
+        return ''.join(self.generate(*args, **kwargs))
+
+    def generate_async(self, *args, **kwargs):
+        """Return an asynchronous generator that renders the template in
+        chunks, using the given arguments."""
+        class sync_to_async_iter():
+            def __init__(self, iter):
+                self.iter = iter
+
+            def __aiter__(self):
+                return self
+
+            async def __anext__(self):
+                try:
+                    return next(self.iter)
+                except StopIteration:
+                    raise StopAsyncIteration
+
+        return sync_to_async_iter(self.generate(*args, **kwargs))
+
+    async def render_async(self, *args, **kwargs):
+        """Render the template with the given arguments asynchronously and
+        return it as a string."""
+        response = ''
+        async for chunk in self.generate_async(*args, **kwargs):
+            response += chunk
+        return response

lib/microdot/websocket.py

@@ -0,0 +1,231 @@
+import binascii
+import hashlib
+from microdot import Request, Response
+from microdot.microdot import MUTED_SOCKET_ERRORS, print_exception
+from microdot.helpers import wraps
+
+
+class WebSocketError(Exception):
+    """Exception raised when an error occurs in a WebSocket connection."""
+    pass
+
+
+class WebSocket:
+    """A WebSocket connection object.
+
+    An instance of this class is sent to handler functions to manage the
+    WebSocket connection.
+    """
+    CONT = 0
+    TEXT = 1
+    BINARY = 2
+    CLOSE = 8
+    PING = 9
+    PONG = 10
+
+    #: Specify the maximum message size that can be received when calling the
+    #: ``receive()`` method. Messages with payloads that are larger than this
+    #: size will be rejected and the connection closed. Set to 0 to disable
+    #: the size check (be aware of potential security issues if you do this),
+    #: or to -1 to use the value set in
+    #: ``Request.max_body_length``. The default is -1.
+    #:
+    #: Example::
+    #:
+    #:    WebSocket.max_message_length = 4 * 1024  # up to 4KB messages
+    max_message_length = -1
+
+    def __init__(self, request):
+        self.request = request
+        self.closed = False
+
+    async def handshake(self):
+        response = self._handshake_response()
+        await self.request.sock[1].awrite(
+            b'HTTP/1.1 101 Switching Protocols\r\n')
+        await self.request.sock[1].awrite(b'Upgrade: websocket\r\n')
+        await self.request.sock[1].awrite(b'Connection: Upgrade\r\n')
+        await self.request.sock[1].awrite(
+            b'Sec-WebSocket-Accept: ' + response + b'\r\n\r\n')
+
+    async def receive(self):
+        """Receive a message from the client."""
+        while True:
+            opcode, payload = await self._read_frame()
+            send_opcode, data = self._process_websocket_frame(opcode, payload)
+            if send_opcode:  # pragma: no cover
+                await self.send(data, send_opcode)
+            elif data:  # pragma: no branch
+                return data
+
+    async def send(self, data, opcode=None):
+        """Send a message to the client.
+
+        :param data: the data to send, given as a string or bytes.
+        :param opcode: a custom frame opcode to use. If not given, the opcode
+                       is ``TEXT`` or ``BINARY`` depending on the type of the
+                       data.
+        """
+        frame = self._encode_websocket_frame(
+            opcode or (self.TEXT if isinstance(data, str) else self.BINARY),
+            data)
+        await self.request.sock[1].awrite(frame)
+
+    async def close(self):
+        """Close the websocket connection."""
+        if not self.closed:  # pragma: no cover
+            self.closed = True
+            await self.send(b'', self.CLOSE)
+
+    def _handshake_response(self):
+        connection = False
+        upgrade = False
+        websocket_key = None
+        for header, value in self.request.headers.items():
+            h = header.lower()
+            if h == 'connection':
+                connection = True
+                if 'upgrade' not in value.lower():
+                    return self.request.app.abort(400)
+            elif h == 'upgrade':
+                upgrade = True
+                if not value.lower() == 'websocket':
+                    return self.request.app.abort(400)
+            elif h == 'sec-websocket-key':
+                websocket_key = value
+        if not connection or not upgrade or not websocket_key:
+            return self.request.app.abort(400)
+        d = hashlib.sha1(websocket_key.encode())
+        d.update(b'258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
+        return binascii.b2a_base64(d.digest())[:-1]
+
+    @classmethod
+    def _parse_frame_header(cls, header):
+        fin = header[0] & 0x80
+        opcode = header[0] & 0x0f
+        if fin == 0 or opcode == cls.CONT:  # pragma: no cover
+            raise WebSocketError('Continuation frames not supported')
+        has_mask = header[1] & 0x80
+        length = header[1] & 0x7f
+        if length == 126:
+            length = -2
+        elif length == 127:
+            length = -8
+        return fin, opcode, has_mask, length
+
+    def _process_websocket_frame(self, opcode, payload):
+        if opcode == self.TEXT:
+            payload = payload.decode()
+        elif opcode == self.BINARY:
+            pass
+        elif opcode == self.CLOSE:
+            raise WebSocketError('Websocket connection closed')
+        elif opcode == self.PING:
+            return self.PONG, payload
+        elif opcode == self.PONG:  # pragma: no branch
+            return None, None
+        return None, payload
+
+    @classmethod
+    def _encode_websocket_frame(cls, opcode, payload):
+        frame = bytearray()
+        frame.append(0x80 | opcode)
+        if opcode == cls.TEXT:
+            payload = payload.encode()
+        if len(payload) < 126:
+            frame.append(len(payload))
+        elif len(payload) < (1 << 16):
+            frame.append(126)
+            frame.extend(len(payload).to_bytes(2, 'big'))
+        else:
+            frame.append(127)
+            frame.extend(len(payload).to_bytes(8, 'big'))
+        frame.extend(payload)
+        return frame
+
+    async def _read_frame(self):
+        header = await self.request.sock[0].read(2)
+        if len(header) != 2:  # pragma: no cover
+            raise WebSocketError('Websocket connection closed')
+        fin, opcode, has_mask, length = self._parse_frame_header(header)
+        if length == -2:
+            length = await self.request.sock[0].read(2)
+            length = int.from_bytes(length, 'big')
+        elif length == -8:
+            length = await self.request.sock[0].read(8)
+            length = int.from_bytes(length, 'big')
+        max_allowed_length = Request.max_body_length \
+            if self.max_message_length == -1 else self.max_message_length
+        if length > max_allowed_length:
+            raise WebSocketError('Message too large')
+        if has_mask:  # pragma: no cover
+            mask = await self.request.sock[0].read(4)
+        payload = await self.request.sock[0].read(length)
+        if has_mask:  # pragma: no cover
+            payload = bytes(x ^ mask[i % 4] for i, x in enumerate(payload))
+        return opcode, payload
+
+
+async def websocket_upgrade(request):
+    """Upgrade a request handler to a websocket connection.
+
+    This function can be called directly inside a route function to process a
+    WebSocket upgrade handshake, for example after the user's credentials are
+    verified. The function returns the websocket object::
+
+        @app.route('/echo')
+        async def echo(request):
+            if not authenticate_user(request):
+                abort(401)
+            ws = await websocket_upgrade(request)
+            while True:
+                message = await ws.receive()
+                await ws.send(message)
+    """
+    ws = WebSocket(request)
+    await ws.handshake()
+
+    @request.after_request
+    async def after_request(request, response):
+        return Response.already_handled
+
+    return ws
+
+
+def websocket_wrapper(f, upgrade_function):
+    @wraps(f)
+    async def wrapper(request, *args, **kwargs):
+        ws = await upgrade_function(request)
+        try:
+            await f(request, ws, *args, **kwargs)
+        except OSError as exc:
+            if exc.errno not in MUTED_SOCKET_ERRORS:  # pragma: no cover
+                raise
+        except WebSocketError:
+            pass
+        except Exception as exc:
+            print_exception(exc)
+        finally:  # pragma: no cover
+            try:
+                await ws.close()
+            except Exception:
+                pass
+        return Response.already_handled
+    return wrapper
+
+
+def with_websocket(f):
+    """Decorator to make a route a WebSocket endpoint.
+
+    This decorator is used to define a route that accepts websocket
+    connections. The route then receives a websocket object as a second
+    argument that it can use to send and receive messages::
+
+        @app.route('/echo')
+        @with_websocket
+        async def echo(request, ws):
+            while True:
+                message = await ws.receive()
+                await ws.send(message)
+    """
+    return websocket_wrapper(f, websocket_upgrade)

lib/utemplate/compiled.py

@@ -0,0 +1,14 @@
+class Loader:
+
+    def __init__(self, pkg, dir):
+        if dir == ".":
+            dir = ""
+        else:
+            dir = dir.replace("/", ".") + "."
+        if pkg and pkg != "__main__":
+            dir = pkg + "." + dir
+        self.p = dir
+
+    def load(self, name):
+        name = name.replace(".", "_")
+        return __import__(self.p + name, None, None, (name,)).render

lib/utemplate/recompile.py

@@ -0,0 +1,21 @@
+# (c) 2014-2020 Paul Sokolovsky. MIT license.
+try:
+    from uos import stat, remove
+except:
+    from os import stat, remove
+from . import source
+
+
+class Loader(source.Loader):
+
+    def load(self, name):
+        o_path = self.pkg_path + self.compiled_path(name)
+        i_path = self.pkg_path + self.dir + "/" + name
+        try:
+            o_stat = stat(o_path)
+            i_stat = stat(i_path)
+            if i_stat[8] > o_stat[8]:
+                # input file is newer, remove output to force recompile
+                remove(o_path)
+        finally:
+            return super().load(name)

lib/utemplate/source.py

@@ -0,0 +1,188 @@
+# (c) 2014-2019 Paul Sokolovsky. MIT license.
+from . import compiled
+
+
+class Compiler:
+
+    START_CHAR = "{"
+    STMNT = "%"
+    STMNT_END = "%}"
+    EXPR = "{"
+    EXPR_END = "}}"
+
+    def __init__(self, file_in, file_out, indent=0, seq=0, loader=None):
+        self.file_in = file_in
+        self.file_out = file_out
+        self.loader = loader
+        self.seq = seq
+        self._indent = indent
+        self.stack = []
+        self.in_literal = False
+        self.flushed_header = False
+        self.args = "*a, **d"
+
+    def indent(self, adjust=0):
+        if not self.flushed_header:
+            self.flushed_header = True
+            self.indent()
+            self.file_out.write("def render%s(%s):\n" % (str(self.seq) if self.seq else "", self.args))
+            self.stack.append("def")
+        self.file_out.write("    " * (len(self.stack) + self._indent + adjust))
+
+    def literal(self, s):
+        if not s:
+            return
+        if not self.in_literal:
+            self.indent()
+            self.file_out.write('yield """')
+            self.in_literal = True
+        self.file_out.write(s.replace('"', '\\"'))
+
+    def close_literal(self):
+        if self.in_literal:
+            self.file_out.write('"""\n')
+        self.in_literal = False
+
+    def render_expr(self, e):
+        self.indent()
+        self.file_out.write('yield str(' + e + ')\n')
+
+    def parse_statement(self, stmt):
+        tokens = stmt.split(None, 1)
+        if tokens[0] == "args":
+            if len(tokens) > 1:
+                self.args = tokens[1]
+            else:
+                self.args = ""
+        elif tokens[0] == "set":
+            self.indent()
+            self.file_out.write(stmt[3:].strip() + "\n")
+        elif tokens[0] == "include":
+            if not self.flushed_header:
+                # If there was no other output, we still need a header now
+                self.indent()
+            tokens = tokens[1].split(None, 1)
+            args = ""
+            if len(tokens) > 1:
+                args = tokens[1]
+            if tokens[0][0] == "{":
+                self.indent()
+                # "1" as fromlist param is uPy hack
+                self.file_out.write('_ = __import__(%s.replace(".", "_"), None, None, 1)\n' % tokens[0][2:-2])
+                self.indent()
+                self.file_out.write("yield from _.render(%s)\n" % args)
+                return
+
+            with self.loader.input_open(tokens[0][1:-1]) as inc:
+                self.seq += 1
+                c = Compiler(inc, self.file_out, len(self.stack) + self._indent, self.seq)
+                inc_id = self.seq
+                self.seq = c.compile()
+            self.indent()
+            self.file_out.write("yield from render%d(%s)\n" % (inc_id, args))
+        elif len(tokens) > 1:
+            if tokens[0] == "elif":
+                assert self.stack[-1] == "if"
+                self.indent(-1)
+                self.file_out.write(stmt + ":\n")
+            else:
+                self.indent()
+                self.file_out.write(stmt + ":\n")
+                self.stack.append(tokens[0])
+        else:
+            if stmt.startswith("end"):
+                assert self.stack[-1] == stmt[3:]
+                self.stack.pop(-1)
+            elif stmt == "else":
+                assert self.stack[-1] == "if"
+                self.indent(-1)
+                self.file_out.write("else:\n")
+            else:
+                assert False
+
+    def parse_line(self, l):
+        while l:
+            start = l.find(self.START_CHAR)
+            if start == -1:
+                self.literal(l)
+                return
+            self.literal(l[:start])
+            self.close_literal()
+            sel = l[start + 1]
+            #print("*%s=%s=" % (sel, EXPR))
+            if sel == self.STMNT:
+                end = l.find(self.STMNT_END)
+                assert end > 0
+                stmt = l[start + len(self.START_CHAR + self.STMNT):end].strip()
+                self.parse_statement(stmt)
+                end += len(self.STMNT_END)
+                l = l[end:]
+                if not self.in_literal and l == "\n":
+                    break
+            elif sel == self.EXPR:
+    #            print("EXPR")
+                end = l.find(self.EXPR_END)
+                assert end > 0
+                expr = l[start + len(self.START_CHAR + self.EXPR):end].strip()
+                self.render_expr(expr)
+                end += len(self.EXPR_END)
+                l = l[end:]
+            else:
+                self.literal(l[start])
+                l = l[start + 1:]
+
+    def header(self):
+        self.file_out.write("# Autogenerated file\n")
+
+    def compile(self):
+        self.header()
+        for l in self.file_in:
+            self.parse_line(l)
+        self.close_literal()
+        return self.seq
+
+
+class Loader(compiled.Loader):
+
+    def __init__(self, pkg, dir):
+        super().__init__(pkg, dir)
+        self.dir = dir
+        if pkg == "__main__":
+            # if pkg isn't really a package, don't bother to use it
+            # it means we're running from "filesystem directory", not
+            # from a package.
+            pkg = None
+
+        self.pkg_path = ""
+        if pkg:
+            p = __import__(pkg)
+            if isinstance(p.__path__, str):
+                # uPy
+                self.pkg_path = p.__path__
+            else:
+                # CPy
+                self.pkg_path = p.__path__[0]
+            self.pkg_path += "/"
+
+    def input_open(self, template):
+        path = self.pkg_path + self.dir + "/" + template
+        return open(path)
+
+    def compiled_path(self, template):
+        return self.dir + "/" + template.replace(".", "_") + ".py"
+
+    def load(self, name):
+        try:
+            return super().load(name)
+        except (OSError, ImportError):
+            pass
+
+        compiled_path = self.pkg_path + self.compiled_path(name)
+
+        f_in = self.input_open(name)
+        f_out = open(compiled_path, "w")
+        c = Compiler(f_in, f_out, loader=self)
+        c.compile()
+        f_in.close()
+        f_out.close()
+        return super().load(name)

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,55 @@
+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)
+    wdt.feed()
+
+    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/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,156 @@
+let delayTimeout;
+let brightnessTimeout;
+let colorTimeout;
+let color2Timeout;
+let socket;
+
+const host = window.location.host;
+
+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) {
+    await post("/pattern", { pattern }); // Send as JSON
+    //socket.send(JSON.stringify({"selected_pattern":pattern}))
+
+}
+
+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);
+        });
+    });  
+
+    socket = new WebSocket(`ws://${host}/settings`)
+    
+    
+
+});
+
+// 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/static/rgb-slider.js

@@ -0,0 +1,195 @@
+// rgb-slider.js
+
+export class RGBSlider extends HTMLElement {
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+
+    shadow.innerHTML = `
+      <style>
+        .container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 1em;
+          border: 1px solid #ccc;
+          border-radius: 8px;
+          width: 50%;
+
+          font-family: sans-serif;
+          box-sizing: border-box;
+        }
+
+        .preview {
+          width: 50%;
+          height: 60px;
+          border-radius: 6px;
+          border: 1px solid #000;
+          background-color: rgb(0, 0, 0);
+          margin-bottom: 1em;
+        }
+
+        .sliders {
+          display: flex;
+          gap: 50px;
+          justify-content: center;
+          margin-bottom: 1em;
+        }
+
+        .slider-group {
+          display: flex;
+          flex-direction: column-reverse;
+          align-items: center;
+        }
+
+        .slider-group input[type="range"] {
+          writing-mode: vertical-lr;
+          direction: rtl;
+
+          width: 10px;
+          height: 120px;
+        }
+
+        .slider-group label {
+          margin-top: 8px;
+          font-size: 0.8em;
+        }
+
+        .rgb-inputs {
+          display: flex;
+          gap: 8px;
+        }
+
+        .rgb-inputs input {
+          width: 6ch;
+          padding: 2px;
+          font-family: monospace;
+          text-align: right;
+        }
+
+        .rgb-inputs label {
+          font-size: 0.8em;
+          text-align: center;
+        }
+
+        .rgb-input-group {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        /* Mobile styles */
+        @media (max-width: 600px) {
+          .preview {
+            height: 80px;
+          }
+
+          .slider-group input[type="range"] {
+            height: 180px;
+            width: 14px;
+          }
+
+          .rgb-inputs input {
+            font-size: 1em;
+            padding: 4px;
+            width: 7ch;
+          }
+
+          .slider-group label,
+          .rgb-inputs label {
+            font-size: 1em;
+          }
+
+          .container {
+            padding: 1.5em;
+          }
+        }
+      </style>
+
+
+      <div class="container">
+        <div class="preview" id="preview"></div>
+
+        <div class="sliders">
+          <div class="slider-group">
+            <input type="range" min="0" max="255" value="0" id="r">
+            <label>R</label>
+          </div>
+          <div class="slider-group">
+            <input type="range" min="0" max="255" value="0" id="g">
+            <label>G</label>
+          </div>
+          <div class="slider-group">
+            <input type="range" min="0" max="255" value="0" id="b">
+            <label>B</label>
+          </div>
+        </div>
+
+        <div class="rgb-inputs">
+          <div class="rgb-input-group">
+            <label for="rInput">R</label>
+            <input type="number" min="0" max="255" id="rInput" value="0">
+          </div>
+          <div class="rgb-input-group">
+            <label for="gInput">G</label>
+            <input type="number" min="0" max="255" id="gInput" value="0">
+          </div>
+          <div class="rgb-input-group">
+            <label for="bInput">B</label>
+            <input type="number" min="0" max="255" id="bInput" value="0">
+          </div>
+        </div>
+      </div>
+    `;
+
+    const get = (id) => shadow.querySelector(id);
+    this.r = get("#r");
+    this.g = get("#g");
+    this.b = get("#b");
+    this.rInput = get("#rInput");
+    this.gInput = get("#gInput");
+    this.bInput = get("#bInput");
+    this.preview = get("#preview");
+
+    const updateColor = (r, g, b) => {
+      this.preview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+      this.rInput.value = r;
+      this.gInput.value = g;
+      this.bInput.value = b;
+      this.dispatchEvent(
+        new CustomEvent("color-change", {
+          detail: { r, g, b },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    };
+
+    const syncFromSliders = () => {
+      const r = +this.r.value;
+      const g = +this.g.value;
+      const b = +this.b.value;
+      updateColor(r, g, b);
+    };
+
+    const syncFromInputs = () => {
+      const r = Math.min(255, Math.max(0, +this.rInput.value));
+      const g = Math.min(255, Math.max(0, +this.gInput.value));
+      const b = Math.min(255, Math.max(0, +this.bInput.value));
+      this.r.value = r;
+      this.g.value = g;
+      this.b.value = b;
+      updateColor(r, g, b);
+    };
+
+    this.r.addEventListener("input", syncFromSliders);
+    this.g.addEventListener("input", syncFromSliders);
+    this.b.addEventListener("input", syncFromSliders);
+
+    this.rInput.addEventListener("change", syncFromInputs);
+    this.gInput.addEventListener("change", syncFromInputs);
+    this.bInput.addEventListener("change", syncFromInputs);
+  }
+}
+
+customElements.define("rgb-slider", RGBSlider);

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,22 @@
+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):
+    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)
+    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())
+
+
+
+
+
+
+
+