Arduino GUI Basic Course

Key Concepts

• Arduino GUIs: Graphical User Interfaces for Arduino projects, enabling interactive control and data visualization.
• Python: A popular, beginner-friendly programming language used for creating modern GUIs.
• PiVisual: A drag-and-drop GUI design tool that syncs with Python projects.
• CVzone Library: A custom Arduino library and Python module facilitating serial communication between Arduino and Python.
• Serial Communication: The process of sending and receiving data between Arduino and a computer (Python script) over a serial port.
• Threading: A Python module used to run parts of a program (like data polling from Arduino) concurrently in separate threads to prevent UI freezing.
• Daemon Thread: A background thread that automatically terminates when the main program exits.
• DHT11 Sensor: A common sensor for measuring temperature and humidity.
• Pull-up Resistor: A resistor used with a push button to ensure a defined electrical state when the button is not pressed.
• IDE (Integrated Development Environment): Software like PyCharm or Arduino IDE for writing, compiling, and debugging code.

Introduction to Arduino GUIs with Python

The video introduces "Arduino GUI," a solution designed to create modern, sleek, and interactive Graphical User Interfaces (GUIs) for Arduino projects using Python. It addresses the common issue of outdated, complicated, or programming-heavy existing tools. Python is highlighted as the ideal language due to its ease of learning, widespread industry use (robotics, AI), and suitability for GUI development, especially with a drag-and-drop approach.

Learning Journey and Course Structure

The learning journey is structured into three levels:

1. Basic Course: Covers fundamentals and includes three starter projects:
   • LED Control
   • Push Button
   • Weather Dashboard
2. Advanced Course (Pre-order): Levels up skills with practical projects such as ultrasonic distance logger, home automation, volume control, servo positioning, object counter, data plotting, license plate recognition, and saving data to a database.
3. Pro Version (Pre-order): Masters Arduino GUIs with next-level projects like light intensity via hand gestures, robot car dashboard, water level monitor, face recognition door lock, smart sorting, virtual LED control, and eye-link detector.

The advanced and pro courses are available for pre-order at discounted prices, which are set to increase soon.

Essential Installations

Before starting any project, proper installation of key software components is crucial:

1. Python: Version 3.10 is recommended, though later versions are also compatible.
2. IDE (Integrated Development Environment): PyCharm is used in the tutorial, but alternatives like Visual Studio Code are acceptable.
3. Arduino IDE: The standard environment for writing and uploading code to Arduino boards.
4. Arduino CVzone Library: A custom library essential for serial communication between Arduino and Python. It is downloaded as a ZIP file and added to the Arduino IDE via Sketch > Include Library > Add .ZIP Library.

Users facing installation issues are encouraged to comment for support.

Project Development Methodology

Each project follows a consistent four-part development process:

1. Hardware Setup: Understanding and connecting all physical components (sensors, Arduino, etc.).
2. Arduino Code: Writing the C++ code in the Arduino IDE to interact with sensors and prepare data for serial communication.
3. GUI Design (PiVisual): Developing the graphical interface using PiVisual's drag-and-drop functionality.
4. Python Integration: Writing Python code to connect the GUI with the Arduino, process data, and make the system run.

Project 1: LED Control

This project demonstrates basic output control from a Python GUI to an Arduino.

Hardware Setup

• Arduino Uno: The only hardware component used, leveraging its built-in LED on pin 13. This simplifies the setup as no external wiring is needed for the LED.

Arduino Code

• CVzone Library: Included for serial communication.
• Serial Object: An object is created to handle serial communication, configured to receive one value (0 or 1) per transmission.
• Pin Mode: Pin 13 is set as an OUTPUT.
• Serial Data Begin: Initializes serial communication at 9600 baud rate.
• Loop: Continuously reads incoming serial data. If a '1' is received, the LED on pin 13 turns ON; if '0', it turns OFF.
• Testing: The functionality is tested by sending $ followed by '0' or '1' (e.g., $1) via the Arduino IDE's Serial Monitor.

GUI Design (PiVisual)

• New Project: Named "LED."
• Button Element: A simple "On/Off" button is added using drag-and-drop.
• Variable Naming: The button is given a variable name, onOffButton, for easy access in Python.
• Linking to Python: The PiVisual project is linked to a new Python project directory (e.g., Arduino GUI/LED) in PyCharm. Auto-sync ensures design changes are reflected.

Python Integration

• Virtual Environment: A Python virtual environment is created in PyCharm.
• Library Installation: pip install pivisual, pip install cvzone, and pip install pyserial are installed within the virtual environment.
• Serial Object: SerialObject from cvzone.serial_module is imported and instantiated as arduino. It automatically detects the Arduino's COM port.
• Button Click Event: A toggleSwitch function is defined to handle the button click.
• partial Function: Used from functools to pass the UI object to the toggleSwitch function, allowing it to access and modify GUI elements.
• Toggle Logic: A toggleState global variable (boolean) is used to switch between ON (send '1') and OFF (send '0') states.
• UI Updates: The button's text (button.text) and color (button.idleColor) are dynamically changed based on the toggleState.
• arduino.sendData(): Sends '0' or '1' to the Arduino to control the LED.

Enhanced LED Lamp Design

• New Project: "LED Lamp."
• Image Assets: lamp.png and light.png images are uploaded to PiVisual.
• Design Elements: A dark background, the lamp.png image, and the light.png image (initially hidden) are arranged. An icon is used as the interactive button.
• Variable Naming: The light image is named lights, and the icon button is named onOffButton.
• Python Code Adaptation: The previous LED control code is adapted. The lights.is_visible property is toggled (True/False) to show/hide the light image, creating the effect of turning the lamp on/off. Button color changes are also implemented.

Project 2: Push Button Input

This project demonstrates reading input from a physical push button connected to Arduino and reflecting its state in a Python GUI.

Hardware Setup

• Arduino Uno: Main controller.
• Breadboard: For easy component connection.
• Push Button: Connected to pin 8.
• 10k Pull-up Resistor: Connected between the button's signal line and ground to ensure a stable LOW state when the button is not pressed.
• Wiring: 5V and Ground from Arduino to breadboard. One side of the button to 5V, the other side to pin 8 and one end of the resistor. The other end of the resistor to Ground.

Arduino Code

• CVzone Library: Included for serial communication.
• Serial Object: Configured to send two values (even if only one is used, due to a known library quirk).
• Push Button Pin: Defined as pin 8.
• Pin Mode: Pin 8 is set as an INPUT.
• Serial Data Begin: Initializes serial communication.
• Loop:
  • Reads the digital state of the push button (digitalRead(pushBtn)).
  • Stores the button state in an array.
  • Sends the array data serially using arduino.sendData().
  • Includes a small delay.
• Testing: Serial Monitor shows 0,0 when not pressed and 1,0 when pressed, confirming data transmission.

GUI Design (PiVisual)

• New Project: "Push Button."
• Custom Button Graphic: A detailed side-view push button is designed using multiple rectangles to simulate a 3D appearance (base, top, side supports, main button).
• Variable Naming: The main button rectangle is named buttonRect.
• Linking to Python: Project is linked to a new Python directory.

Python Integration

• Serial Object: arduino object is created.
• Data Polling in a Separate Thread:
  • A poolingArduino function is created containing a while True loop to continuously call arduino.getData().
  • A try-except block handles potential communication errors without crashing the loop.
  • threading.Thread is used to run poolingArduino in a separate thread.
  • daemon=True ensures the thread stops when the main application closes, preventing infinite loops.
• toggleUI Function: Called from poolingArduino to update the GUI.
• Data Parsing: The received data (e.g., ['1', '0']) is parsed. The first element (data[0]) is converted to an integer to get the button state (0 or 1).
• UI Updates:
  • If state is 1 (button pressed): The buttonRect.height is reduced (e.g., 59 - 20), and buttonRect.y position is increased (e.g., 124 + 20) to simulate the button moving down.
  • If state is 0 (button released): The buttonRect.height and buttonRect.y are reset to their default "unpressed" values.
• Live Demonstration: The camera shows the physical button press reflected in the GUI's animated button.

Project 3: Weather Dashboard (Temperature & Humidity)

This project demonstrates reading data from a DHT11 sensor and displaying it on a dynamic Python GUI.

Hardware Setup

• Arduino Uno: Main controller.
• DHT11 Sensor:
  • VCC connected to Arduino's 5V.
  • Ground connected to Arduino's Ground.
  • Data connected to Arduino's pin 4.
• Breadboard: Used for connections, though direct connection is possible due to only three pins and no resistor.

Arduino Code

• DHT Library: Installed via Arduino IDE's Library Manager (search "DHT sensor library by Adafruit," install with dependencies).
• CVzone Library: Included for serial communication.
• Pin Definitions: DHTPIN is set to pin 4, and DHTTYPE is set to DHT11.
• DHT Object: An object dht is created.
• Serial Object: Configured to send two values (temperature and humidity).
• dht.begin(): Initializes the DHT sensor.
• Loop:
  • Reads temperature (dht.readTemperature()) and humidity (dht.readHumidity()).
  • Stores these values in an array.
  • Sends the array data serially using arduino.sendData().
  • Includes a small delay.
• Testing: Serial Monitor displays two values (e.g., 24,64), which change when the sensor is touched.

GUI Design (PiVisual)

• New Project: "Weather Dashboard."
• Custom Thermometer Graphic: Designed using multiple circles and rectangles to create a thermometer shape with a liquid column.
• Measurement Markers: Small rectangles and text labels (0, 10, 20, 30, 40, 50 degrees) are added along the side.
• Text Elements:
  • A large text element for displaying temperature (e.g., "32°C"). Named temperatureText.
  • A smaller text element for displaying humidity (e.g., "25%"). Named humidityText.
• Moving Rectangle: The liquid column inside the thermometer is a rectangle named movingRect.
• Linking to Python: Project is linked to a new Python directory.

Python Integration

• Serial Object and Threading: Similar setup to the Push Button project, with arduino object and poolingArduino function running in a daemon thread.
• displayData Function: Called from poolingArduino to update the GUI.
• Data Parsing: The received data (e.g., ['25', '68']) is parsed. data[0] is temperature, data[1] is humidity. Both are converted to integers.
• Text Updates:
  • temperatureText.text is updated with the current temperature value (converted to string) and "°C".
  • humidityText.text is updated with the current humidity value (converted to string) and "%".
• Dynamic Thermometer Liquid:
  • The movingRect.height and movingRect.y properties are dynamically adjusted based on the temperature value.
  • A linear mapping is used: height = 38 + (temperature / 50) * 132 and y = 246 - (temperature / 50) * 132. (Where 38 and 246 are the base height and Y-position at 0°C, and 132 is the maximum change in height/Y-position for a 50°C range).
• Live Demonstration: The UI displays live temperature and humidity readings, and the liquid column in the thermometer graphic visually rises and falls with temperature changes. The UI can be modified (e.g., element positions) in PiVisual and updated in real-time without breaking functionality.

Conclusion and Call to Action

The video concludes by emphasizing the ease and effectiveness of creating modern, presentable GUIs for Arduino projects using Python and PiVisual's drag-and-drop interface. The demonstrated projects showcase how simple shapes and images can be combined to create sophisticated designs that interact live with Arduino data. The presenter encourages viewers to explore the advanced and pro courses for more complex projects, skill enhancement, and learning to store data in databases (MongoDB, MySQL). The courses are currently available for pre-order at a discounted rate, with prices set to increase after launch.