Control a Relay with ESP32 via Bluetooth Using MIT App Inventor _Part 3

-
Control Relay with ESP32 via Bluetooth – Part 3 MIT App Inventor Design

Welcome to Part 3 of our ESP32 Bluetooth Control series. While the code on the ESP32 is important, the User Interface (UI) is what you will interact with every day.

In this tutorial, we focus exclusively on the Designer View of MIT App Inventor. We will not just drop buttons randomly; we will use Layout Managers to create a professional, centered dashboard that scales well on different phone screen sizes.

Step 1: Setting the Screen Properties

Before adding buttons, we need to configure the main screen to handle our components correctly.

  • AlignHorizontal: Change to Center (3). This ensures all your buttons stay in the middle.
  • AlignVertical: Change to Center (2) for a modern look, or Top (1) if you plan to add a lot of components.
  • Theme: I recommend switching from "Classic" to Device Default for a cleaner, native Android look.

Step 2: Using Layout Containers

Pro Tip: Never drag buttons directly onto the screen background. They will stack vertically and look messy. Instead, use Layout components.

1. The Main Container

Drag a VerticalArrangement from the Layout tab.
Settings: Set Height to Fill Parent and Width to Fill Parent. This creates a canvas that takes up the whole screen.

2. The Button Row

Inside the VerticalArrangement, drag a HorizontalArrangement. This allows us to place the ON and OFF buttons side-by-side rather than one on top of the other.

Step 3: Styling the Components

Now, drag your user interface elements into the layouts we just created. Here are the specific properties to adjust for a polished look:

Component Property Change Why?
ListPicker Text: "Connect Bluetooth"
Width: 80%		 Makes the connection button prominent and easy to tap.
Button (ON) BackgroundColor: Green
Shape: Rounded		 Visual feedback that this is an "Active" action.
Button (OFF) BackgroundColor: Red
Shape: Rounded		 Visual feedback that this is a "Stop" action.

Crucial Step (Renaming): In the "Components" panel, rename Button1 to btn_ON and Button2 to btn_OFF. This will make programming the logic in Part 4 much easier.

Step 4: Adding Non-Visible Components

Finally, we need to add the engine that powers the connectivity. Go to the Connectivity folder in the palette.

  • Drag BluetoothClient onto the screen.
  • It will appear at the bottom under "Non-visible components."
  • This component has no properties to change now, but it is required for the app to function.

Watch the Design Process

If you want to see exactly how to nest the layouts and adjust the styling live, watch the video tutorial below:

Now that your interface is beautiful, let's make it functional. Proceed to Part 4: Programming the Logic.

Comments

Post a Comment

Popular posts from this blog

How to Import CSV Files into PostgreSQL Automatically

-
Image
If you work with databases, manually uploading CSV data into PostgreSQL is a bottleneck. It’s slow, prone to human error, and creates a lag between data generation and availability. In this guide, I will show you how to build a Real-Time Data Pipeline . Using Python's watchdog library, we will create a script that "listens" to a specific folder. The moment a new CSV is dropped in, the script wakes up, parses the file, and pushes the data to PostgreSQL instantly. The Architecture Before writing code, it is helpful to understand the flow. We are moving from a manual "Pull" method to an automated "Event-Driven" method. The Trigger: The OS File System events (monitored by watchdog ). The Processor: A Python script using pandas or csv modules. The Destination: A PostgreSQL table using psycopg2 . Step 1: Prerequisites You will need a few libraries to handle the file monitoring and database connection....
Read more

Apache NiFi ETL Tutorial for Beginners | Installation & Data Pipeline Basics

-
Image
In the modern data landscape, the ability to move and transform information seamlessly is what separates a basic system from a professional data architecture. This process is known as ETL (Extract, Transform, Load) . Whether you are a student, an aspiring data engineer, or an IoT enthusiast, mastering ETL tools is a mandatory skill for building automated systems. In this comprehensive guide, I’m going to walk you through Apache NiFi . Unlike many other tools that require heavy coding, NiFi offers a powerful visual interface. I’ve spent a lot of time working with various data orchestrators, and NiFi remains one of my favorites due to its "drag-and-drop" simplicity combined with enterprise-grade power. Today, we will focus on getting it installed, secured, and running in a Windows environment. The Importance of Data Orchestration in IoT In my experience building IoT stations, the biggest challenge isn't just collecting data it's managing the flow. Imagine hav...
Read more

ESP32 TFT LCD 240x240 Tutorial-Display Images & DHT11 Sensor

-
Image
In this comprehensive tutorial, you will learn how to build a real-time temperature and humidity monitoring dashboard using an ESP32 , a 240×240 TFT LCD display (ST7789) , and a DHT11 sensor . The project demonstrates how to display text, icons, and live sensor data on a colorful TFT screen. This guide is designed for makers, students, and engineers who want to improve their skills in embedded systems , IoT development , and ESP32 graphical interfaces . 📺 Video Tutorial – Full Walkthrough This article complements the full step-by-step video tutorial below. In the video, you will see the complete wiring, TFT initialization, bitmap generation, and a live demo of temperature and humidity updates on the screen. 📌 Tip: Watching the video first will make the wiring and code much easier to follow. 🧰 Components Required ESP32 Development Board [Image of ESP32 development board pinout] 240×240 TFT LCD (ST7789 Driver) DHT11 Temperature & Humi...
Read more

Contact Form

Name

Email *

Message *