Interface and Application Programming

Reflections

• What I learned during the development of this group task is that to create an interface, where there is visual interaction between the user and a system, there are different types, which usually adapt to specific needs of interaction, usability and functionality. For this, there are several tools, such as those mentioned above, those that do not require too much programming and those that require writing code to define the interface and its behavior.
• Within visual design tools, we find some advantages, but also certain limitations, for example limited scalability and tool dependency. Within traditional programming tools, we find certain advantages that allow us to create completely customized interfaces with complex behaviors, but there are also some disadvantages such as maintenance: since projects developed in this way require more maintenance and testing as functionality is added.

• >Write an application for the embedded board that you made. that interfaces a user with an input and/or output device(s)

To develop the project, I decided to create a small prototype. I sought to simulate a robotic turtle with natural movement, capable of moving both on land and in water. I also designed the control interface for this project. I will explain its development step by step.

Once we have a clear idea, we need to define how the turtle will function. To do this, we must select the appropriate electronic components. The following table details the list of selected components:

• Microcontroller: ESP32-C3
• Modules: 4 servomotors, controlled by the microcontroller
• Other components: battery, electronic connections, and mechanical structure

Since we'll be using servomotors, a user interface analysis is required, including the functions needed to control movement. Turtles typically turn slowly, changing the direction of their hind legs. Therefore, a simulation of natural movement was proposed using a button interface to synchronize forward and backward movements, as well as changing direction at a controlled angle.

1.-interface development

To do this, a preliminary HTML interface has been developed, which will be loaded directly onto the ESP32-C3 without the need for external servers. This ensures faster response speeds without latency or wasted time. To develop this code, open your Google search engine and open your Gmail account. Once opened, go to the points section and select Google sites:

Google Sites was used as a testing environment to visualize how the user interface will look, uploading the HTML code for preview.

2.-Integration of the main code into the Arduino development platform

Once the interface design is complete, the main code will be integrated into the Arduino development platform, where the system's operating logic will be programmed.

2.1 Operation of the Main Code

1. 2.1.1 Objective
2. 2.1.2 General Structure of the Code

2.1.1 Objective

Control 4 servo motors (simulating the legs of a robotic turtle) using a web interface accessible from any device connected to the Xiao ESP32-C3 Access Point (AP).

2. General Structure of the Code

The code is divided into 4 main blocks:

1. Initial Configuration
   
• Global Variables:
  • angulosMaximos[]: Stores the angles configured by the user (e.g., 90°).
  • posActual[]: Stores the real-time position of each servo.
  • automatico: Flag to enable/disable automatic movement.
2. Setup (Initialization)
   1. Servo Configuration:
      • Pin assignment (GPIO2, 3, 4, 5).
      • Standard PWM frequency (50Hz) and pulse range (500µs to 2400µs).

   Access Point (AP):

   • Creates a WiFi network named "TortugaRobot" (IP: 192.168.4.1).
   2. Web Server Endpoints:
      • URLs to receive commands from the interface:
        • /on, /off: Turn movement on/off.
        • /set?servo1=90: Update max angles.
        • /sync: Reset servos to 0°.
3. Main Loop
   1. Web Request Handling
   2. Synchronized Movement:
      • Uses millis() to avoid blocking delays.
      • Moves forward/backward in 1° steps every 20ms.
      • Synchronization:
        • All servos wait to reach max angle before returning.
        • Left servos (clockwise) vs. right servos (counter-clockwise).
4. Web Interface
   • Dynamically Generated HTML:
     • Sliders to adjust maximum angles (0° to 180°).
     • Control buttons (On/Off, Synchronize).
   • Communication with the ESP32::
     • JavaScript uses fetch() to send commands (e.g. /set?servo1=45).

3.-Programming Code

4.-Project Consolidation Using DeepSeek

An agile, incremental development methodology was adopted for the system's development, in which functional components were designed and tested independently before being integrated. This methodology allows for greater flexibility and adaptation to changes during the development process, facilitating continuous product improvement.

In this approach, short, specific functions were first developed for controlling a servomotor using the XIAO ESP32-C3 board, ensuring its proper operation separately. In parallel, the HTML code for the buttons and selection menus that make up the system's main interface was designed.

5.-XIAOESP32-C3 connections and servomotors

Conclusions

• After reviewing the documentation for week 14 of Fab Academy 2025, I am very happy with the development and creation of the interface for my project, in this case the control of the turtle, whose buttons and sliders were developed to control the four servomotors, which were carried out through the interface that I designed. At first, I had some complications understanding how the main code was integrated with the program code in the Arduino IDE, investigating to create my first interface, which fills me with great joy to have been able to achieve it, I relied on some resources such as Chat GPT, which is a very powerful tool.
• The virtual collaboration I had with my instructor, Ronal Vilca, was very helpful, as it provided me with certain guidelines to better develop the interface I had planned to create. The use of HTML, CSS, and JavaScript allowed me to build a responsive graphical interface that can be accessed from any device connected to the ESP32-C3's Wi-Fi network without the need for external applications. Using libraries such as ESPAsyncWebServer or WebServer.h, it is possible to set up a web server directly on the ESP32-C3, hosting the interface locally without the need for internet access. Real-Time Hardware Control Using fetch(), XMLHttpRequest, or WebSockets in JavaScript, fluid communication was achieved between the web interface and the ESP32-C3, allowing pin activation, sensor reading, and real-time system status monitoring.

Link to files used this week

1.turtle interface.zip