Group Assignment:
- Compare as many tool options as possible.
- Document your work on the group work page and reflect on your individual page what you learned.
Individual Assignment:
- Write an application for the embedded board that you made. that interfaces a user with an input and/or output device(s)
Have you answered these questions?
-
Linked to the group assignment page.✅
Documented your process.✅
Explained the UI that you made and how you did it.✅
Explained how your application communicates with your embedded microcontroller board.✅
Explained any problems you encountered and how you fixed them.✅
Included original source code (or a screenshot of the app code if that's not possible).✅
Included a ‘hero shot’ of your application running & communicating with your board.✅
Group Assignment
- Compare as many tool options as possible.
- Document your work on the group work page and reflect on your individual page what you learned.
Group assignment
teamwork
To develop this task, I met virtually with my colleague evelyn-cuadrado to research the different types of interface creation tools. These include Visual Design tools (without much programming) and traditional GUI programming tools. Below is a brief summary of each.
Interface creation tools are programs, environments, or libraries that allow you to design and develop visual interactions between the user and a system, whether it's a computer, a web application, a mobile application, or an embedded system. These interfaces can include buttons, menus, graphics, touchscreens, and more.
1. Visual Design (Low-Code / No-Code)- MIT App Inventor / Kodular
- Figma / Adobe XD
- Node-RED Dashboard
- HTML + CSS + JavaScript
- Processing / p5.js integrated
- Tkinter / PyQt / Kivy
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.
Individual assignment
- >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:
1.-Access Google Sites:
Within the Google applications in our Gmail account, we will locate the Google site, as shown in the image.

2.-building a site from scratch
Now that the page loads, we must select “blank site”:
3.-blank page
Once the site is created, a blank page will load.
4.-select pages
Once the blank page is loaded, we move to the upper right area and select pages:

5.-full page insertion
We must go to the lower right area where the “+” icon will select “full page insertion”

6.-Add a title to the site
The site title will appear in the header and title bar of the web or mobile window after you publish the site.

7.-Option to insert code
A tab will open in which we must go to “Insert code”

8.-Insert HTML code:
We will insert our HTML code.
9.-web page demo visualization
We press "next", we will see a demo of how the web page will look.
We save, and the web page will be saved on the main page created and if we want to edit the code we go to "edit" and the code will be loaded for editing, we continue this procedure until we get the ideal page for our design.
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- 2.1.1 Objective
- 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:
-
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.
-
Setup (Initialization)
-
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).
-
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°.
- URLs to receive commands from the interface:
-
Servo Configuration:
-
Main Loop
- Web Request Handling
-
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).
- Uses
-
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).
- Dynamically Generated HTML:
3.-Programming Code
The main programming code is made up of our HTML interface code and the Arduino IDE programming code for controlling our servomotors.

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.
Once validated, all these functions were entered into the DeepSeek chat, an artificial intelligence capable of automatically organizing, structuring, and connecting code fragments. DeepSeek consolidated these pieces into a single, optimized, and functional source file, ready to be loaded and executed directly on the XIAO ESP32-C3 board.
5.-XIAOESP32-C3 connections and servomotors
The four servomotors are connected to the XIAOESP32-C3 card through a control driver respectively.

In order to do the tests, the first thing we did was connect to the XIAOESP32-C3 wifi, from our mobile device, which is called turtle, once connected we loaded the page of our interface by putting the IP and we can view the interface that was designed, we have the first servomotor on the right leg, to control its angle of rotation, the range is changed and then updated.
and we continue to perform tests to verify that everything is working correctly.
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.