Sending .css and font in addition to index.html

[designrulesco]

Hi all - had one more question on the captive portal I'm using (made by metachris (https://github.com/metachris/micropython-captiveportal)) to have the user connect to the ESP32 and provide credentials for their WiFi network.

Things are looking good, but I'd like to also serve the client style.css and a font file so that I can really customize the look of the page away from a simple barebones HTML page. I changed my css to be in-line on the HTML to avoid figuring out how to serve the .css, but I can't avoid serving the font file (I think?) so I'm back to figuring out how to serve them both.

The captive portal code just serves index.html - I've tried to modify it to also serve the css file (before trying to do the same for the font file) but without much success. Wondering if anybody can advise how to best make this change..

Full code of the function that handles http requests:

async def handle_http_connection(self, reader, writer):
        gc.collect()

        # Get HTTP request line
        data = await reader.readline()
        request_line = data.decode()
        addr = writer.get_extra_info('peername')

        # parse to see if this is the data from the form
        params = ((request_line.strip()).split("/"))[1]

        # GET parameters from form will start with '?'
        if(params[0] == "?"):
            # string parse out the ssid and pw
            params = (params.split())[0]
            params = params.split("&")
            ssid = params[0][6:]
            pw = params[1][5:]

            # if user input to both fields is non-empty, proceed
            if((len(ssid) > 0) and (len(pw) > 0)):
                user_ssid = utils.unquote(ssid)
                user_pw = utils.unquote(pw)
                write_to_file = user_ssid + "," + user_pw
                f = open('credentials.txt', "w")
                f.write(write_to_file)
                f.close()

                loop = asyncio.get_event_loop()
                loop.stop()
            

        # Read headers, to make client happy (else curl prints an error)
        while True:
            gc.collect()
            line = await reader.readline()
            if line == b'\r\n': break

        # Handle the request
        if len(request_line) > 0:
            response = 'HTTP/1.0 200 OK\r\n\r\n'
            with open('index.html') as f:
                response += f.read()
            await writer.awrite(response)



        # Close the socket
        await writer.aclose()
        # print("client socket closed")

My one attempt to modify the "handle the request" section to also serve up "style.css" - note that this broke the captive portal functionality.

if len(request_line) > 0:
        if 'GET /index.html' in request_line:
            response = 'HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n'
            with open('index.html') as f:
                response += f.read()
            await writer.awrite(response)

        elif 'GET /style.css' in request_line:
            response = 'HTTP/1.0 200 OK\r\nContent-Type: text/css\r\n\r\n'
            with open('style.css') as f:
                response += f.read()
            await writer.awrite(response)
        else:
            response = 'HTTP/1.0 404 Not Found\r\n\r\n'
            await writer.awrite(response)

Lastly, I tried simply using the existing code and reading/printing the style.css file before (or after) the html file but that just dumped the text of the files onto the page instead of rendering it on the client.

# Handle the request
        if len(request_line) > 0:
            response = 'HTTP/1.0 200 OK\r\n\r\n'
            with open('style.css') as f:
                response += f.read()
            with open('index.html') as f:
                response += f.read()
            await writer.awrite(response)

Definitely a little out of my element so appreciate the help!

[sophiedegran]

Hi
That's look great .. Did you see your client trying a request pointing to 'style.css' ?
Have a look to microdot if your want a full web framework server ...