Interface and Application Programming

CORA GUI

I tried a couple of options::

1. used ChatGPT to create a prompt for Loveable:
2. used claude:

between these options, I decided to use claude because the generated codebase was simpler and allowed greater visibility and control

repo available at public/files/week15/cora_neopixel_controller_final

Features

1. Connection - user can select different baud rates and the serial connection port. This helps with initial implementation debugging. Current connection status also displayed
2. LED Light switch and state - GUI displays a simple switch that controls the heart light
3. Serial console displayed for early iteration debugging and monitoring
4. Implementation uses a Fire-and-Forget protocol for simplicity

Processes

Claude

→ used the following prompt to generate the GUI:

Me: "write me a GUI interface. The interface connects to a circuit board via arduino ESP32 serial connection that controls a light. The interface will simply have a switch for the user to toggle the light. The code should be implemented such that it files in line with the theme of the attached screenshots. Ask me any ambiguities now before writing any code"

Claude: "A few things I need to pin down before writing this:

1. GUI framework / platform — How do you want this to run? A Python desktop app (Tkinter/PyQt), or an HTML/JavaScript web page using the Web Serial API (matching your fabacademy site theme exactly)? Given the screenshots are a website, I'm guessing web, but serial-over-browser only works in Chrome/Edge, not Safari.
2. ESP32 firmware — Do you also want the Arduino/ESP32 sketch that listens on serial and toggles the light (e.g. the NeoPixel from your board, or a plain GPIO LED), or just the GUI side?
3. Light type — Your PCB shows a NeoPixel (NEO_DATA_IN). Is the "light" a single NeoPixel/strip you want fully on/off, or a basic digital pin LED?
4. Serial protocol — Simple is fine (e.g. send 1 for on, 0 for off), but do you want any confirmation/handshake back from the board, or fire-and-forget?"

Me: "1. It only needs to be a locally running HTML/CSS with javascript, the screenshots a purely for style. 2. Arduino code as well, running on pin GPIO 27. 3. 8 neopixels in a circle. 4. fire-and-forget, ensure extensive console debug logging 5. Yes, standard but flexible if other options are easier. The user should pick the COM port from a dropdown menu Board in arduino: ESP32S3 Dev Module"

Connecting the interface to the NeoPixel Light on my board

Select the port from the dropdown menu

Group assignment

here is the link to the group assignment page Group Assignment week 15

Notes