12. Interface and Application Programming#

Processing#

According to it’s homepage,
it is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

I created an interactive visual art within the screen, made an interface to control the movement of a servo motor, and an interface that visualizes the digital read of a thermistor.

An interactive visual art within the screen:

An interface to control the movement of a servo motor:

An interface that visualizes the digital read of a thermistor:

You can see more details in Yume’s individual assignment page.

With Processing, you can easily create a visual interface for an Arduino IDE coded hardware work.

Blynk (oguri)#

I tried Blynk to communicate with ESP32 via BLE. Although BLE is beta version at this moment ( as of 2020/07 ), this is a convenient and easy-to-use solution to control/monitor ESP32 from smart phone.

1) setting “Blynk BLE” on Arduino IDE#

Firstly, some libraries are needed.

How to install Blynk Library for Arduino IDE

I installed the following three libraries.

esp32library

2) programming for ESP32, Blynk APP ( iPhone )#

(a) Controlling servo motors#

This short YouTube video is informative, to understand how to use Blynk BLE.

Blynk - Controle do ESP32 NodeMCU-32S via Bluetooth (BLE)

To create Blynk Account, and to get Auth Token, please refer this site.

Blynk, Getting Started

In my iPhone, I added the Blynk “Widget” such as, BLE (beta), Slider and Joystick.
img_9324 img_9330

And set the parameters of the Widgets.

Joystick (SPLIT mode)

​ ( In case of SPLIT mode, X-Y two parameters can be set separately. )

V1 for servo motor 1 min 0 - max 180

V2 for servo motor 2 min 0 - max 180

​ ( “servo motor 1 and 2” are continuous rotation type, to control the Drive simulator shown in the video below. The values correspond to the speeds/directions of each servo motors. )

Slider

V3 for servo motor 3 min 10 - max 170

​ ( “servo motor 3” is angle type, to control the slope of Drive simulator course shown in the video below. The value corresponds to the angle of servo lever. For the safe operation, the min/max value are set to be smaller than its allowable range. )
img_9327 img_9328
img_9329 img_9325

Programming for ESP32

After referring Blynk, ESP8266 wifi , I replaced “wifi” to “BLE” , increased the number of servo motors.

“ESP32_Blynk_BLE_DriveSim_servo.ino”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
#define BLYNK_PRINT Serial

#define BLYNK_USE_DIRECT_CONNECT

#include <BlynkSimpleEsp32_BLE.h>
#include <BLEDevice.h>
#include <BLEServer.h>


#include <ESP32Servo.h>

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "Your Auth Token";

// create three servo objects
Servo servo1;
Servo servo2;
Servo servo3;

BLYNK_WRITE(V1)
{
  servo1.write(param.asInt());
}

BLYNK_WRITE(V2)
{
  servo2.write(param.asInt());
}

BLYNK_WRITE(V3)
{
  servo3.write(param.asInt());
}



void setup() {

  {
    // Debug console
    Serial.begin(9600);
    Serial.println("Waiting for connections...");

    Blynk.setDeviceName("Blynk");

    Blynk.begin(auth);

    servo1.attach(4);
    servo2.attach(12);
    servo3.attach(14);

  }


}

void loop()

{
  Blynk.run();
}

If “MERGE-mode” is selected, in “Joystick” widget, X-Y two parameters have to be separated in the program.

1
2
3
BLYNK_WRITE(V1) {
  int x = param[0].asInt();
  int y = param[1].asInt();

For more information, please refer the site below.

Blynk main operations

This is the video, utilizing the above setting and program.

To download the above program, please refer “W11 - Output Devices, Hideo Oguri, Individual Assignment Page”.

(b) Monitoring thermistor#

In this case, I used “SuperChart” to display the time-based graph on iPhone.
img_9331 img_2ed1ed70dd8e-1
assign “V0” in widget
img_9332 img_9333

Regarding the detail of thermistor and downloading the program below, please refer “W09 - Input Devices, Hideo Oguri, Individual Assignment Page”.

“ESP32_Thermistor_BLYNK_BLE.ino”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#define BLYNK_PRINT Serial

#define BLYNK_USE_DIRECT_CONNECT

#include <BlynkSimpleEsp32_BLE.h>
#include <BLEDevice.h>
#include <BLEServer.h>

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "Your Auth Token";


#include <math.h>

int analog = 0;          //analog pin raw value
int V_0 = 3276;          //cirquit voltage [mV]
double V_R0 = 1;         //initial value of voltage devider[mV]
int circuit_R0 = 9800;  //resistance of voltage divider[Ω]

int thermo_B = 3380;     //B parameter of thermistor
int thermo_R0 = 10000;   //reference resistance of thermistor [Ω]
int thermo_T0 = 298;     //reference tempereture of thermistor[K]

double thermo_R = 1;     //initial resistance of thermistor[Ω]
double temp = 25.00;     //initial value of measured temperature[℃]

void setup () {

  Serial.println("Waiting for connections...");
  Blynk.setDeviceName("Blynk");
  Blynk.begin(auth);

  pinMode(34, INPUT);  // thermistor
  Serial.begin(9600);          /* 9600 bps connect serial */
  Serial.println("READ_START");    

}

void loop () {

  Blynk.run();

  analog = analogRead(34);
  V_R0 = analog * 3.28 / 4096 * 1000;                 //voltage divider calculation
  thermo_R = V_0 / V_R0 * circuit_R0 - circuit_R0; //thermistor resistance calculation
  Serial.println( analog);
  Serial.println( V_R0);
  Serial.println( thermo_R);                 //printing thermistor resistance

  temp = (1000 / (1 / (0.001 * thermo_T0) + log(thermo_R / thermo_R0) * 1000 / thermo_B) - 273); //temparature calculation

  Blynk.virtualWrite(V0, temp);

  Serial.println(temp, 1);                                                     //printing temparature

  delay(100);                      // waiting for 0.1s
}

Key point is

assign “V0” in widget,

Blynk.virtualWrite(V0, temp); in program

This is the video, utilizing the above setting and program.

p5.js (oka)#

P5.js is a library of javascript and it enable us to use processing on the WEB easily. There is a huge internet community and lots of users share their own programs.

This time, I tried to create color picker. I borrowed the color-picker program created by slow_izzm and customized it to meet my requirements.


My version

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
let getColor;

// loading png file. used for loading color wheel this time
function preload() {
    colorWheel = loadImage("colorwheel.png");
}

function setup() {
    createCanvas(window.innerWidth - 4, window.innerHeight - 4);
}

//set colorwheel
function draw() {
    background(255);
    push();
    image(colorWheel, 0, 0);
    getColor = colorWheel.get(mouseX, mouseY); //pick the color where I put mouse

// draw square
    push();
    stroke(getColor[0], getColor[1], getColor[2]);
    fill(getColor[0], getColor[1], getColor[2], 255);
    rect(width * 0.6, height * 0.1, 100, 100);
    pop();


// small circle showing where mouse on
    fill(getColor);
    ellipse(mouseX, mouseY, 10, 10);
    pop();

// show info of color code beneath the square
    push();
    fill(217);
    noStroke();
    textSize(33);
    textFont('Helvetica');
    textAlign(CENTER, CENTER);
    textStyle(NORMAL);
    text(getColor, width * 0.7, height * 0.35);
    pop();


}



my version


for using my interface, I would use the value only 8bit RGB color code which control color by the value 0-255 of red, green, and blue. So I cut off extra information from the original to make it easier to understand at first sight.

There were lots of sample codes relating to visual and it was not so much difficult to program something by reffering to someone’s code.