Week 15: Interface and Application Programming¶

Group assignment:

Compare as many tool options as possible.

Designing Interface¶

Figma¶

Fab Lab Bali’s go-to tool to design and create interface would be the application Figma. Figma is is a collaborative web application for interface design and has become the industry standard for Digital Product Designers. It is free to use - although comes with subscription for corporate use. It is cloud based and it also allows multiple users to work on designing one file collaboratively.

alt text

We couldn’t highly recommend Figma enough as a starting point for your interface design. The application is UI/UX friendly and quite intuitive to use.

Programming¶

Figproxy¶

This is a new tool recently developed in IDEO (it was just released in May 2024!?!?). Figproxy is a MacOS app that allows Figma to communicate with Arduino and vice versa. There is actually no way that we can make Figma communicate with any embedded hardware device, however IDEO developed an API that could bypass that. alt text

Documentation of the API can be checked out here including how to install the API and use it. Unfortunately the proxy can only work in MacOS devices for now. Inspired by their Arduino UNO sample code - we decided to follow their tutorial and see if we could turn on Seeed Studios XIAO ESP32 built-in LED with Figma

Sample Tutorial - which honestly looks very very neat!

Custom interface for Seeed XIAO ESP32-S3

alt text

Expectations

alt text

Reality

alt text Couldn’t get it to work with the XIAO ESP32-S3.... the API kept on crashing everytime we try to connect.

We were wondering if it was because we didn’t set the configurations properly.... however it worked just as intended with the UNO board. We also tried with Seeed Xiao RP2040 but it wouldn’t work either

Key Takeaways¶

Pros:

You can just design as intended from Figma and quickly prototyped what you had on Figma onto your Arduino board
Very easy to follow

Cons

It’s unfortunate that this could only work on MacOS
Maybe because this API is just 2 months old.... it just isn’t optimised for other microcontroller units yet

Adafruit GFX Library - ArduinoIDE¶

The other most common form of interface programming that everyone had experience in Fab Lab Bali is the Adafruit GFX Library. All of us were using display through out the course - from machine design week to our final projects too. Full documentation can be checked here

alt text

Key Takeaways¶

Pros:

Reliable in terms of integration as it works across all display devices and micro-controllers
It is open source and has a massive community contributing to the development of the library. You can find plenty of tutorials, examples, and support online if you encounter any issues.

Cons:

Adafruit GFX only offers a basic set of drawing functions.
It might not be suitable for projects requiring advanced graphics features like anti-aliasing, hardware acceleration, or complex image manipulation (Elaine can attest to this).