Week 15 - Overview

Knowledge Points Summary

1. Programming Languages and Tools:

  • Overview of different programming languages (Python, JavaScript, C) and development environments (IDEs).

2. User Interfaces:

  • Techniques for creating graphical user interfaces (GUIs) and integrating user input.

3. Application Development:

  • Designing and building applications that interact with hardware components.

4. Networking and Communication:

  • Implementing communication protocols for devices to exchange data.

Individual Assignment:

Write an application that interfaces a user with an input and/or output device that you made.


Group Assignment:

Compare as many tool options as possible.


Reference Links

Week15 Interface and Application Programming Guide for my Fab Academy Journey.


My personal assignment

1.Summarize the core knowledge points of Embeddeded Networking and Communications.

In this chapter, I learned about interface design and communication interface functions.
This allows me to control my Xiao XiaoESP32-S3 via computer or mobile applications.

1. Programming Languages and Tools:

  • Overview of programming languages (Python, JavaScript, C, etc.) and development environments.

2. Device Interfaces:

  • Communication protocols such as RS-232, I2C, USB, MQTT, and libraries for interfacing with hardware.

3. User Interfaces:

  • Techniques for creating GUIs using libraries and frameworks like Tkinter, wxPython, Qt, and web-based interfaces.

4. Data Interfaces:

  • Handling data formats (JSON, CSV) and databases (MySQL, MongoDB).

5. Graphics and Visualization:

  • Using tools and libraries for 2D and 3D graphics (OpenGL, WebGL, Three.js).

6. Audio and Video:

  • Integration of multimedia elements using libraries like Pygame, SDL, and Web Audio API.

2.Introduction of MQTT

MQTT:

MQTT is an OASIS standard messaging protocol for the Internet of Things (IoT).
It is designed as an extremely lightweight publish/subscribe messaging transport that is ideal for connecting remote devices with a small code footprint and minimal network bandwidth.
MQTT today is used in a wide variety of industries, such as automotive, manufacturing, telecommunications, oil and gas, etc.

  • Visit MQTT website for more information.


    • Here's how it works:
    1. Clients connect to a broker and can subscribe to topics.
    2. Clients publish messages to a broker, specifying a topic.
    3. The broker then forwards these messages to all clients subscribed to that topic.
    4. This model allows for messages to be delivered to multiple consumers without the need for clients to know each other, providing high levels of scalability and reliability in message delivery.


    My MQTT connection plan:

    I plan to use both web and mobile platforms to control the Xiao.
    Ultimately, this setup will enable remote control to light up the NeoPixels.
    Setup I need to make the following two preparations:
    1. Obtain a broker.
    - I will use the public broker provided by Fab-Academy.
    Get the broker information here.
    For specific connection to the Fab Academy MQTT broker, use the following details:
    Broker URL: mqtt.fabcloud.org
    Port: 1883
    Username: fabacademy
    Password: fabacademy
    Channel/Topic: fabacademy/
    You can add your own sub-topic within fabacademy to keep messages for your application only (e.g., your lab name and/or username, like fabacademy/paris-john).
    Websocket: wss://mqtt.fabcloud.org:8083

    Visit Mosquitto's official website for general information.

    2. Find suitable web and iOS applications.
    MQTT SoftwareFind the software for here.
    For web:https://cedalo.com/blog/enabling-websockets-over-mqtt-with-mosquitto/#Configuring_Mosquitto_MQTT_broker_over_WebSockets_for_MacOS
    For iOS:https://github.com/emqx/MQTTX

    3.Web-based MCU XiaoESP32-S3 Control

    I have found a tutorial for setting up MQTT.
    Open the
    Find the "Configuring Mosquitto MQTT broker over WebSockets for MacOS"
    Download Brew and install it.https://github.com/Homebrew/brew/releases/tag/4.3.8



    Install Mosquitto:
    brew install mosquitto

    Setup Mosquitto:

    Test WebSockets:


    ps:There's a problem with the Setup,I find some solutions that it need to kill the process.

    Finally,Setup!
    I have already deployed Mosquitto.
    Next, how should I create a web interface to control the MCU?
    I asked ChatGPT for advice.

    To communicate with MQTT from a webpage using JavaScript and the Paho MQTT library, follow these steps:

    1. Include the Paho MQTT Library: Add the Paho MQTT client library to your webpage. You can include it directly from a CDN or download and host it yourself.
    2. Create MQTT Client:
      • Initialize the MQTT client by specifying the broker’s URL and port.
      • Provide a unique client ID for the connection.
    3. Connect to MQTT Broker:
      • Set up connection options such as username, password (if required), and SSL settings for secure connections.
      • Use the connect() method with your options to establish the connection to the MQTT broker.
    4. Handle Connection Events:
      • Implement callbacks for connection success and failure.
      • Handle successful connection by subscribing to topics and setting up message arrival handling.
    5. Subscribe to Topics: Use the subscribe() method to listen to topics of interest.
    6. Send and Receive Messages:
      • Publish messages using the send() or publish() methods.
      • Implement a message handler function to process incoming messages.
    7. Disconnect: Cleanly disconnect from the broker when the webpage is closed or the connection is no longer needed.


    Test the MQTT connection in local
    I open 2 terminals, one for the pub and one for the sub.
    then I run the following command in the pub terminal:
    mosquitto_pub -h localhost -t "Test" -m "Hello"
    and then run the following command in the sub terminal:
    mosquitto_sub -h localhost -t "Test"



    OK!,it's now time to create a web interface to control the MCU.
    Firstly, I need to create a web page that can connect to the MQTT broker and subscribe to the topic.
    I will use JavaScript and the Paho MQTT library to achieve this.
    
                        
                        
                        
                        
                        
                        NeoPixel Control
                        
                        
                        
                        
                        
    NeoPixel Controller
    Wi-Fi Antenna



    Powerful MCU Board:

    Incorporate the ESP32S3 32-bit, dual-core, Xtensa processor chip operating up to 240 MHz, mounted multiple development ports, Arduino / MicroPython supported

    Advanced Functionality (for Sense):

    Detachable OV2640 camera sensor for 1600*1200 resolution, compatible with OV5640 camera sensor, integrating additional digital microphone

    Elaborate Power Design:

    Lithium battery charge management capability, offers 4 power consumption models which allow for deep sleep mode with power consumption as low as 14μA

    Great Memory for More Possibilities:

    Offers 8MB PSRAM and 8MB FLASH, supporting SD card slot for external 32GB FAT memory

    Outstanding RF Performance:

    Support 2.4GHz Wi-Fi and BLE dual wireless communication, support 100m+ remote communication when connected with U.FL antenna

    Thumb-sized Compact Design:

    21 x 17.5mm, adopting the classic form factor of XIAO, suitable for space-limited projects like wearable devices

    4.Programming Process

    1. Hardware Connection

    • Connect the Dao clock Main board to the computer using a USB cable.

    2. Software Configuration

    • Open the Arduino IDE and select the board and port for the ESP32-S3.
    • Select the correct COM port for the board.

    3.My program requirements

    Set up the Wi-Fi and run the program.
    - During the Wi-Fi signal search, the white light rotates.
    - After the Wi-Fi connects successfully, all the Neopixels will display green and stay lit for 5 seconds.
    - Convert 24 hours into the traditional Chinese 12-hour timekeeping system.
    - Read the current time, and the number of lights lit represents the current hour.

  • Upload the program to the ESP32-S3 board.
    • Here is the code for my program:
    
  #include 
    #include 
    #include 
    #include "time.h"
    
    #define PIN_NEOPIXEL D9      // NeoPixel连接的GPIO引脚
    #define NUMPIXELS 12
    #define DELAYVAL 150         // 短暂延时时间（毫秒），用于LED转圈效果
    
    const char* ssid = "4536251";     // 修改为你的Wi-Fi网络名
    const char* password = "EACTJB159357";   // 修改为你的Wi-Fi密码
    
    Adafruit_NeoPixel pixels(NUMPIXELS, PIN_NEOPIXEL, NEO_GRB + NEO_KHZ800);
    WebServer server(80);  // 定义Web服务器对象，端口80
    
    void setup() {
      Serial.begin(115200);
      pixels.begin();  // 初始化NeoPixel条
      connectToWiFi(); // 连接到Wi-Fi网络
      configTime(0, 3600, "pool.ntp.org", "time.nist.gov"); // 配置时区和NTP
    
      // 设置HTTP路由和处理器
      server.on("/H", handleLEDOn);
      server.on("/L", handleLEDOff);
      server.begin();  // 启动Web服务器
    }
    
    void loop() {
      server.handleClient(); // 处理客户端请求
      showCurrentHour();     // 根据当前小时点亮LED
      delay(1000);           // 每秒更新一次
    }
    
    void connectToWiFi() {
      Serial.print("Connecting to ");
      Serial.println(ssid);
      WiFi.begin(ssid, password);
    
      int ledIndex = 0; // 初始LED索引
      while (WiFi.status() != WL_CONNECTED) {
        delay(150);
        Serial.print(".");
        lightLEDInSequence(ledIndex);  // 点亮LED形成转圈效果
        ledIndex = (ledIndex + 1) % NUMPIXELS; // 更新LED索引
      }
    
      // WiFi连接成功后，所有LED长亮5秒
      pixels.fill(pixels.Color(0, 255, 0)); // 设置所有LED为绿色
      pixels.show();
      delay(5000); // 长亮5秒
    
      Serial.println("");
      Serial.println("WiFi connected.");
      Serial.println("IP address: ");
      Serial.println(WiFi.localIP());
    }
    
    void lightLEDInSequence(int ledIndex) {
      pixels.clear();
      pixels.setPixelColor(ledIndex, pixels.Color(50, 50, 50)); // 设置为柔弱的白光
      pixels.show();
    }
    
    void showCurrentHour() {
      struct tm timeinfo;
      if (!getLocalTime(&timeinfo)) {
        Serial.println("Failed to obtain time");
        return;
      }
    
      int hour = timeinfo.tm_hour % 12; // 将24小时制转换为12小时制
      if (hour == 0) hour = 12; // 将0点转换为12点
    
      pixels.clear();
      for (int i = 0; i < hour; i++) {
        pixels.setPixelColor(i, pixels.Color(0, 150, 0)); // 设置为绿色
      }
      pixels.show();
    }
    
    void handleLEDOn() {
      // 功能保留
    }
    
    void handleLEDOff() {
      // 功能保留
    }

    Process video of my program running on the XiaoESP32-S3 board:

    5.Some Problems and Solutions.

    During the Wi-Fi connection process, I used the Wi-Fi hotspot from my iPhone, but I couldn't connect successfully.
    After repeatedly checking the code and finding no issues, I decided to switch to a different Wi-Fi network, which then connected successfully.

    6.The Hero Shots


    Team Assignment

    Week11 Electronics Design Group Assignment link.
    Multimeter Basic Steps to Use a Multimeter:
    Select the Correct Mode: Depending on what you need to measure (voltage, current, resistance), set the dial on the multimeter to the correct function.
    Connect the Probes: For most measurements, connect the black probe to the common terminal and the red probe to the appropriate terminal (voltage, ohm, or mA).
    Measurement:
    Voltage: To measure voltage, place the probes across the component or part of the circuit where you want to measure the voltage.
    Current: To measure current, the circuit must be opened, and the multimeter must be placed in series with the circuit so that the current flows through the multimeter.
    Resistance: To measure resistance, ensure the circuit power is off and place the probes across the component to measure its resistance.
    Continuity: The multimeter will emit a tone if there is continuity (i.e., a complete path) between two points.


    Assignment files


    Let's Jump to the Top !!!