15. Interface and Application Programming¶

In this week, I will learn what does ‘interface’ mean , and I am going to use Arduino IDE to do write an application that interfaces a user with an input and/or output device(s) on a board that you made.

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.

Reflection on our group work¶

Click here to group work.

What Does ‘Interface and Application Programming’ Mean?¶

Interface¶

In the context of computing, an interface is a boundary across which two separate components of a computer system exchange information. This can refer to both hardware interfaces (like USB or Bluetooth connections) and software interfaces (like APIs or GUIs).

Hardware Interface: The physical connections and protocols that allow different hardware components to communicate.

Software Interface: The abstract points of interaction in software, such as: API (Application Programming Interface): A set of routines, protocols, and tools for building software and applications.

GUI (Graphical User Interface): A user interface that includes graphical elements, such as windows, icons, and buttons.

Application Programming¶

Application Programming involves writing software (applications) that perform specific tasks or solve specific problems for users.

This process includes:

Designing: Planning the structure and components of the application.
Coding: Writing the actual code using programming languages.
Testing: Verifying that the application works as intended.
Deploying: Making the application available for use.

Group Assignment¶

Compare as Many Tool Options as Possible Identify Tools: List out various tools that can be used for interface and application programming.

These tools can include:

Development Environments: IDEs like Visual Studio Code, Eclipse, or Arduino IDE.
Programming Languages: Python, JavaScript, C/C++, etc.
Frameworks: React, Django, Flask, etc.
Libraries: Paho-MQTT, Tkinter, etc.
Interfaces: API tools like Postman, hardware interfacing tools like Fritzing.

Individual assignment¶

Write an application that interfaces a user with an input and/or output device(s) on a board that you made.

Arduino | MQTT to remotely control the switch and color conversion of lights¶

For individaul assignment, I am going to use Arduino IDE to program, and use MQTT, to realize my project:Arduino | MQTT to remotely control the switch and color conversion of lights

Configuring MQTT Dash app¶

MQTT Dash is one of the best free apps for using MQTT on your smartphone. It has a very nice interface with many graphic resources and is very simple to use. You can download it in Google Play. It also support Android.

An example of its usage, please click here;

alt text

Once installed, click the “+” sign on your home screen: alt text

A new connection configuration will open. Enter the following information:

Name
Address
Port
User Name
User Password

alt text

Finally, save by tapping the floppy disk icon at the top right.
alt text

Open the created connection. If the settings are correct no message will be displayed. Otherwise the connection failed message will be displayed. If this happens, redo the settings.

With the connection set up correctly, click the “+” sign inside the created dashboard:

In my tiral this time, I need to use the information that MQTT broker provided by Pro. Neil Gershenfeld：

alt text

Insert a switch/button or any icon you want according to your project :
alt text

A Demo - Add ‘text’ type on MQTT Dash to communicate with CMD on laptop¶

Configuration¶

Tap + , choose Texttype, and config as follows:
alt text

In Power Shell¶

mosquitto_pub -h mqtt.fabcloud.org -u fabacademy -P fabacademy -t fabacademy/Dion -m "Hi MQTT Dash!"
alt text

Message well received!¶

alt text

Insert a switch/button to remotely control a Led strip on & off over the Internet¶

Choose icon type: alt text

Configurate Switch Icon: alt text

Notice: here I set the Topic(sub) as myLampSwitch, which will be applied into the later program.

Embedded Program¶

Again, like always, check my-design board first:

Diagrams and Designs¶

Hardware overview - Pinout diagram alt text

Schematic Diagram: alt text

PCB Design:
alt text

Connection: PIN | XIAO
NO3 - GND
NO2 - SIG D1
NO1 - VCC

My Test - Flash LED Strip¶

Set Hotspot¶

alt text

Correct connection¶

alt text

Make sure you have the GND wire connected correctly! This is very important! Since I’ve almost burned one of the wires and the board got hot for a short time because I connected it wrong.

alt text

Arduino IDE to program¶

Make sure you have PubSubClient header file install, here, I use PubSubClinet library, athor by Nick.
alt text

Select Board & Port:
alt text

Fine, it happens… Let’s try upload again!!(Boot+Reset, or go restart everything!)
alt text

Yeah!Success!
alt text

Test¶

I failed to control my LED strip at first, and I trouble-shoot, to find I need to have ‘fabacademy/’ at the beginning: alt text

since the MQTT broker we build is in this way : alt text

After uploading, if it is no response, press Reset button on the board :
alt text

Working ! alt text

Notice: To install header file, please check:
alt text

Results/ Heroshot!¶

alt text

Source Code¶

I edited the code modified by Salman Faris:

/*

Originally from MQTT ESP8266 Example

Basic XIAO-ESP32 MQTTS example

 Before starting , You should have
 - MQTT Broker Name
 - MQTT Broker Username
 - MQTT Borker Password

  Modified by Salman Faris - Added MQTTS Implimenation as per ESP32 and MQTTS.

*/

#include <WiFi.h>
#include <PubSubClient.h>


#include "DHT.h"

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
 #include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif

#define DHTPIN D2
#define NUMPIXELS 60 // Popular NeoPixel ring size
#define PIN D1

Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
#define DELAYVAL 20 // Time (in milliseconds) to pause between pixels

// Update these with values suitable for your network.

const char* ssid = "AndroidAP26ab";             // WiFi Name
const char* password = "tawd7050";              // WiFi Password
const char* mqtt_server = "mqtt.fabcloud.org";  //MQTT Broker Name


WiFiClient espClient;
PubSubClient client(espClient);
unsigned long lastMsg = 0;
#define MSG_BUFFER_SIZE (50)
char msg[MSG_BUFFER_SIZE];
int value = 0;




void setup_wifi() {

  delay(10);
  // We start by connecting to a WiFi network
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  randomSeed(micros());

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
}

void callback(char* topic, byte* payload, unsigned int length) {
  Serial.print("Message arrived [");
  Serial.print(topic);
  Serial.print("] ");
  for (int i = 0; i < length; i++) {
    Serial.print((char)payload[i]);
    Serial.println();
    Serial.print("\n This is length: "+char(length));
  }
  Serial.println();

  //For Switch:
  // Switch on the LED if an 1 was received as first character
  if ((char)payload[0] == '1') {

    pixels.clear(); // Set all pixel colors to 'off'
    // The first NeoPixel in a strand is #0, second is 1, all the way up
    // to the count of pixels minus one.
    for(int i=0; i<NUMPIXELS; i++) { // For each pixel...
      // pixels.Color() takes RGB values, from 0,0,0 up to 255,255,255
      // Here we're using a moderately bright green color:
      pixels.setPixelColor(i, pixels.Color(145, 63, 161));
      pixels.show();   // Send the updated pixel colors to the hardware.
      delay(DELAYVAL); // Pause before next pass through loop
    }

  } else {

    pixels.clear(); // Set all pixel colors to 'off'
    // The first NeoPixel in a strand is #0, second is 1, all the way up
    // to the count of pixels minus one.
    for(int i=0; i<NUMPIXELS; i++) { // For each pixel...
      // pixels.Color() takes RGB values, from 0,0,0 up to 255,255,255
      // Here we're using a moderately bright green color:
      pixels.setPixelColor(i, pixels.Color(0, 0, 0));
      pixels.show();   // Send the updated pixel colors to the hardware.
      delay(DELAYVAL); // Pause before next pass through loop
    }

  }

}

void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    // Create a random client ID
    String clientId = "XIAO-ESP32-Client-";
    clientId += String(random(0xffff), HEX);
    // Attempt to connect
    // if (client.connect(clientId.c_str())) {
    if (client.connect(clientId.c_str(), "fabacademy", "fabacademy")) {
      Serial.println("connected");
      // Once connected, publish an announcement...
      //client.publish("fabacademy/dionTest/Temperature", "hello world");

      // ... and resubscribe
      client.subscribe("fabacademy/myLampSwitch");  //subscribe topic
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      // Wait 5 seconds before retrying
      delay(5000);
    }
  }
}

void setup() {
  // pinMode(PIN, OUTPUT);  // Initialize the BUILTIN_LED pin as an output
  Serial.begin(115200);
  setup_wifi();
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);

  #if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
    clock_prescale_set(clock_div_1);
  #endif
    // END of Trinket-specific code.

    pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)

}

void loop() {

  if (!client.connected()) {
    reconnect();
  }
  client.loop();


}