Week 14 - Interface and Application Programming¶
Group Assignment :¶
This week we explored and tested various tools for creating computer interfaces. The main objective was to understand how we can use various tools to help in making an interface for our final projects. an interface is a shared boundary where two or more separate components of a system communicate and exchange information. It can be a point of interaction between hardware, software, peripheral devices, and humans. Interfacing allows components to work together effectively by defining how data and signals are exchanged. The following are the various tools that we used according to our requirements to make an interface for our boards.
KODULAR¶
Kodular is a free, drag-and-drop platform that enables users to create Android applications without writing traditional code. It features a visual interface where users can design apps by assembling components like buttons, sensors, and layouts, and it employs a block-based programming system based on Google’s Blockly, similar to MIT App Inventor and Scratch. This approach allows beginners and non-programmers to build functional Android apps using visual logic blocks instead of text-based code. While Kodular itself operates through these visual blocks, the apps created with it are ultimately compiled into Java code for Android. To facilitate real-time testing and debugging, Kodular provides a companion app called Kodular Companion. This app allows developers to instantly preview and interact with their projects on an Android device without the need to compile and install the APK each time. By scanning a QR code or entering a code generated in the Kodular creator interface, users can connect their device to the project and see live updates as they modify their app, making the development process more efficient and user-friendly.
PYGAME¶
Pygame is a free and open-source Python library used for creating games and multimedia applications. It provides tools for handling graphics, sound, and user input (like keyboard and mouse events) in a simplified way.Pygame is primarily focused on 2D game development, offering tools for drawing images, handling animations, and managing game elements in a 2D environment. Pygame is designed to be cross-platform, meaning games developed with it can run on Windows, macOS, and Linux without major code changes. This week we used PyGame to make a simple snake game that could be interfaced using a macropad board made during Output week. The game features a snake that moves around the screen, eats food, and grows longer. The challenge is to control the snake and avoid collisions with itself and the walls. The position of the snake was changed by making the switches on the board into directional keys.
USING PROCESSING TO MAKE A SERVO CONTROLLER¶
Processing is an open-source programming language and development environment initiated by Ben Fry and Casey Reas in 2001. Processing programming language is based off of Java for the purpose of creating visual graphics and animations for designers and creative professionals easily. To download Processing IDE go to (https://processing.org/download)https://processing.org/download”
CONTROLLING A SERVO MOTOR WEBSERIAL¶
This week, I worked on developing a web-based serial interface to control a servo motor using a slider. The interface was designed using HTML, CSS, and JavaScript to ensure a clean and responsive user experience. I connected the servo motor to an ESP32-S3 microcontroller, which served as the communication bridge between the web interface and the physical hardware. When the user interacts with the slider on the web page, it sends the corresponding angle value to the ESP32-S3 over a serial connection. The microcontroller then processes this input and adjusts the servo motor to the specified angle in real-time.
CONTROL INTERFACE USING WEBSERIAL¶
I designed a control interface to both monitor and operate a robot using data from a UWB sensor for 2D positioning. The interface allows the user to control the robot’s movement direction, manage door operations, and trigger other functionalities.
I began by creating the interface layout using HTML, followed by styling the elements and positioning the buttons using CSS. After that, I implemented interactive behavior using JavaScript. Each button was assigned specific functions—one for when it’s pressed and another for when it’s released. I also added keyboard controls, mapping specific keys to trigger the same actions as the buttons.
For example, the door starts in the closed position by default when the page loads. The “Close” button is initially highlighted in blue to reflect this. When the “Open” button is clicked, it turns blue, indicating the door is open; clicking “Close” again resets the state. Directional control buttons similarly change color on press and revert when released, whether activated by mouse click or keyboard.
Additionally, a “Connect” button is provided to initiate a WebUSB connection and display available ports.
FLUTTER APP WITH SPOTIFY API¶
In this project, Ashish developed an interactive Spotify controller system combining a Flutter mobile app, the Spotify Web API, and an ESP32 microcontroller using HTTP communication. Using Flutter (built in Android Studio), the app allows users to paste or share Spotify playlist, track, or album links, which are parsed into clean Spotify URIs using regular expressions. These URIs, along with playback control commands like play, pause, next, and previous, are sent via HTTP POST requests to the ESP32 over a local Wi-Fi network. On the ESP32 side, an HTTP server listens for incoming requests, optionally using an NFC reader (MFRC522) to detect when a new card is tapped before responding. The ESP32 processes the received Spotify URIs or control commands, enabling physical interaction with digital media. This system creates a seamless bridge between mobile devices, cloud music services, and custom hardware, adding a unique interactive dimension to Spotify playback.
