Group Assignment

Compare as many tool options as possible

In this case, we decide to compare three (03) options available. One where we can use a third party developed interfaceand two that allow us to generate interfases:

  1. Use of LightBlue: Being a third party app interface that function on a cellphone, it will require a board that allows Bluethooht connectivity. In this case, we used a ESP32C3 considering:
    • Connect the microcontroller with the input/output
    • Establish Cellphone connectivity with the microcontroller
    • Generate the coding that allows input/output control using the microcontroller - app network
    • When using LightBlue you will need to:
      • Select Input/output Control Network (Generated by ESP32C3 coding)
      • Click Properties Write
      • Once there, at the top right, click on Hex (default option)
      • A new window will open, you'll have four (04) alternative to select - Hex, Octal, Binary, UTF-8 String - you need to select the one according to your programing, in our case we select UTF-8 String
      • Then, the app will take you back to Properties write and there you'll must click on Write new value
      • And there you'll need to enter the options that you consider in your programing. In this case for LED control we enter 1 to turn the LED on, and 0 to turn it off

      In the follorwing image you can observe the process

  2. Use of App Inventor: A MIT Platform is an intuitive, visual programming environment that allows to build fully functional apps for Android phones, iPhones, and Android/iOS tablets. You can decide about building and interface for your computer or for cellphone or tablet, thus, you can stablish serial, wifi or bluethooht communication. Hence, this could affect your microcontroller connectivity features. In this case, we used a ESP32C3 to build a cellphone app considering:
    • Connecting the microcontroller with the input/output
    • Developing an app to establish Cellphone connectivity with the microcontroller. In this case, we follow the steps suggested by Programador Novato:
      • Wou will need to create a new project
      • Define your app components in our case we include Device selector and 3 buttoms for output's actions to be reflected on a LCD Anger Face Sorprised Face Tired Face
      • Then, once in the App Inventor platform, you'll have two basic working options, User Interface and Layout
        The first one allows you to add the components that you decide to include in your interface
        The second one allows you to organize (distribute) your components on the user interface
      • The platform allow you then to work in blocks mode in order to program your app functioning
        • The image below shows the App we developed
      • To use your App, you need to:
        Run a emulation by clicking on Connect < Emulator or
        Run the app on your cellphone (You'll need to download App Inventor throught your Playstore or AppStore) following the app instructions to scan a QR or using a number code to connect with the platform and get access to your developed App.
    • Use of Processing: is an open source integrated development environment (IDE), works as a software sketchbook and promote a language for learning how to code.you can create stunning visual and interactive experiences. You use serial data and send it to Processing using a serial library (in Processing). You can review a complete explanation of how it works with arduino in this page form Arduino Education Visualization with Arduino and Processing: This allows you to use the data from different sensors!. In this case, we used a XIAO RP2040 considering:
      • In this case, you'll need to generate a code to read the selected sensor, in our case a Hall effect sensor A13425. The code need to include display details
        • 						
#include 
#include 
#include 

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin)
 
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

int sensorPin = 27;    // analog input pin RP2040 pin 27
int val = 0;  // variable to store the value coming from the sensor

unsigned int ADCValue;

void setup() {

  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  delay(2000);
  display.clearDisplay();
  display.setTextColor(WHITE);

  Serial.begin(9600); // initialize serial communications

  pinMode(28,OUTPUT);
}

void loop() {

	display.clearDisplay();
  val = analogRead(sensorPin); // read the value from the sensor
  val = map(val,0, 1023, 0, 255);
  Serial.println(val); // print value to Serial Monitor
  analogWrite(28,val);

  display.setTextSize(2);
  display.setCursor(0, 28);
  display.print(val);

  display.display();
  delay(300);
}
      • Upload the program to the microcontroller
      • Generate the code for processing software that allows input/output control using the microcontroller - sensor serial network
      • When using Processing we use the following code:
        • 						
Serial myPort;  // Create object from Serial class
static String val;    // Data received from the serial port
int sensorVal = 0;

void setup()
{
   size(720, 480);
   noStroke();
  noFill();
  String portName = "COM18";// Change the number (in this case ) to match the corresponding port number connected to your Arduino. 

  myPort = new Serial(this, portName, 9600);
}

void draw()
{
  if ( myPort.available() > 0) {  // If data is available,
  val = myPort.readStringUntil('\n'); 
  try {
   sensorVal = Integer.valueOf(val.trim());
  }
  catch(Exception e) {
  ;
  }
  println(sensorVal); // read it and store it in vals!
  }  
 background(0);
  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
  float c = map(sensorVal, 0, width, 0, 400);
  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
  float d = map(sensorVal, 0, width, 40,500);
  fill(100, c, 0);
  ellipse(width/2, height/2, d, d);

  fill(255);
  textSize(30);
  text("Sensor Value: "+ sensorVal, 10, 40);


  fill(200);
  textSize(50);
  text("Sensor Value: "+ sensorVal, 10, 100);

 fill(150);
 noStroke();
 rect(100,200,c,20);
}

      In the follorwing image you can observe the process and interface result. We develop an interface to show a square and a circle that increase their size regarding the imput they recieve form the magnetic field detector. The images below shows how the interface change when a magnet is expose from different distances

    You can download the Code for Arduino Ide and Processing here.

    Individual Assignment

    Interface for managing a LED

    I decided to use thonny to develop my interface. Thonny is a software that runs Python IDE. And to develop interface you can dowload a specific package (a sort of plug in) call Guizero, that allows you to get access to specific coding libraries. Guizero is designed to allow new learners to quickly and easily create Grapfic User Interfaces for their programs. This library could be use to be run also on Phyton IDE, and you can download it using the following instructions like it is explained here. Further, I used guizero to develop my interface, but using Thonny, following this steps:

    1. We decide to use Xiao RP2040, considering that I develop a board with a LED during Week 8.
    2. After selecting the board, I decide to develop a specific code in Arduino IDE for the microcontroller and another in Python to connect by serial the microcontroller with the interface.
    3. In this case, you'll need first to generate a code to read tunr the LED on and off. The code will need to recognize the serial imput that will come from the interface. I used the following code:
      4. 							
#define led 26

void setup() {
  // put your setup code here, to run once:
  pinMode(led, OUTPUT);
  Serial.begin(9600);
  digitalWrite(led, LOW);
}
	
void loop() {
  // put your main code here, to run repeatedly:
  if(Serial.available()>0){
	char option = Serial.read();   
	if(option == '1'){
	  digitalWrite(led, HIGH);
	}
	else{
	  digitalWrite(led, LOW);
	}
  }
}
    4. Then, connect the microcontroller to upload the Arduino IDE programing
      5. Further, we need to develop the coding for Thonny. I followed this list of steps:
      • I installed Guizero as a package within Thonny interface: Go to Tools, Manage Packages, Search for "guizero" and click on install
      • Once intalled, you'll get the following image on Thonny Intefase
      • As a reference, suggested by my instructor, I used a book, Create Graphical User Interfaces with Python by Laura Sach and Martin O’Hanlon as a guideline. You can find the book here.
      • I used the reference on Chapter 3: "Spy Name Chooser" that explain how to add text in a window and create a function that could be activated with a buttom that will also appear in a window
      • Then, I generated the coding that allows to control the LED using the interface that send the information to the microcontroller (RP2040) throught the serial port using Thonny. I used the following python code: 
        • 							
from guizero import App, Text, PushButton
import serial, time

xiao = serial.Serial('COM30', 9600)
time.sleep(1)

def turn_on():    
	xiao.write(b'1')
	print("LED encendido")

def turn_off():
	xiao.write(b'0')
	print("LED apagado")

app = App("Interface con Arduino")
app.bg = "white"

button = PushButton(app, turn_on, text="LED ON")
button.bg = "red"

button = PushButton(app, turn_off, text="LED OFF")
button.bg = "blue"

app.display()
xiao.close()
      • You need to click on Play buttom on Thonny and the interface will appear in your computer screen
      • The interface produced two buttoms, a red one to turn the LED on and blue one to turn the LED off, as shown on the image below

        • You can download the Arduino Ide and Thonny Programing files here.

        In the following video you can observe the final result when controlling the LED

        Interface for managing a ServoMotor

        We used the same LED configuration but changing the code to control a microservo SG90

        1. We decide to use Xiao RP2040, considering that I develop a board to control a servomotor Week 9.
        2. After selecting the board, I decide to develop a specific code in Arduino IDE for the microcontroller and another in Python to connect by serial the microcontroller with the interface.
        3. In this case, you'll need first to generate a code to generate a 180 movement. The code will need to recognize the serial imput that will come from the interface. I used the following Arduino code:
          4. 							
#include 


Servo myservo;  // create servo object to control a servo
// twelve servo objects can be created on most boards

void setup() {
	  Serial.begin(9600);
}

void loop() {
	  Serial.print("Procesos de Fabricacion Digital");
	  Serial.println(" Arduino Mega");
}
        4. Then, connect the microcontroller to upload the Arduino IDE programing
        5. Further, we need to develop the coding for Thonny. I followed this list of steps:
          • I used the same process applied for LED control
          • I generated the coding that allows to control the ServoMotor using the interface that send the information to the microcontroller (RP2040) throught the serial port using Thonny. I used the following python code: 
            • 							
from guizero import App, Text, PushButton
import serial, time

xiao = serial.Serial('COM30', 9600)
time.sleep(1)

def turn_on():    
		xiao.write(b'1')
		print("Servo 180")

def turn_off():
		xiao.write(b'0')
		print("Servo 0")

app = App("Xiao Interface")
app.bg = "white"

button = PushButton(app, turn_on, text="Servo 180")
button.bg = "red"

button = PushButton(app, turn_off, text="Servo 0")
button.bg = "blue"

app.display()
xiao.close()
          • You need to click on Play buttom on Thonny and the interface will appear in your computer screen
          • The interface produced two buttoms, a red one to generate a 180° arm movement and blue one to return to 0°, as shown on the image below

            • You can download the Arduino Ide and Thonny Programing files here.

            In the follorwing video you can observe the final result when controlling the ServoMotor

© Untitled. Design: HTML5 UP. Images: Unsplash.