Section 12: ESPUI

by Daniel Frenkel

You are viewing Section 12 of 13

This will be a short dive into ESPUI as there are many resources out there. I only include it here because it makes changing the settings on the motor very simple. Can you imagine setting the stall value, compiling the sketch, and then uploading it over 100 or 200 times to dial it in?

ESPUI allows you to change parameters on the fly over wifi using our computer or phone.

It is best to learn it by uploading the sketch to your ESP32 and following along on your computer.

Connecting to the ESP32

Upload the sketch to your ESP32 or VAL-2000 (if not already done)

On your computer or phone, search for the following WiFi network and connect to it:

Open up a browser such as Chrome, and go to

http://192.168.4.1

You should now be able to control your ESP32 from your computer using the GUI, like below.

Notice the 4 tabs in the image above. Let's see how they are made in Arduino:

Go to the ESPUI.h tab. On line 145 is a function called ESPUIsetup() which is used to set up the GUI interface.

Here we set up 4 tabs and give them titles.

uint16_t tab1 = ESPUI.addControl(ControlType::Tab, "Positioning", "Positioning");

Next we will add different settings to each tab. Let’s look at tab 1:

First we create a Label which will display the current position of our motor from 0-100.

positionLabel = ESPUI.addControl(ControlType::Label, "Current Position", String(move_to_percent), ControlColor::Turquoise, tab1);

Next we create a slider which lets us control the motor by sliding the slider from 0-100.

uint16_t positionMax = ESPUI.addControl(ControlType::Slider, "Position", "0", ControlColor::Alizarin, tab1, &sliderPosition);

We add two parameters to this slider, a min and max. This way the user can only select values from 0-100

ESPUI.addControl(ControlType::Min, "", "0", ControlColor::None, positionMax);
ESPUI.addControl(ControlType::Max, "", "100", ControlColor::None, positionMax);

Let’s look at Tab 2: Settings

Here we first add a separator line to make it look nicer

ESPUI.addControl(ControlType::Separator, "Home Position", "", ControlColor::Peterriver, tab2);

Then we add a switcher that let's us change the direction of the motor shaft using TMCStepper

ESPUI.addControl(ControlType::Switcher, "Change Direction", String(open_direction), ControlColor::Dark, tab2, &switchChangeDirectionCall);

Then we add a button. When pressed this button sets the current position of the motor to 0.

ESPUI.addControl(ControlType::Button, "Set Zero", "Set", ControlColor::Dark, tab2, &buttonSetZeroCall);

We then add a seperator again to create a special area for motor settings

ESPUI.addControl(ControlType::Separator, "Motor Setting", "", ControlColor::Peterriver, tab2);

Here we can set the number of max steps. This is the number of steps the motor should move to reach 100 percent. These are STEPS. Read the previous section about converting steps to distance to calculate this value.

ESPUI.addControl(ControlType::Number, "Max Steps:", String(max_steps), ControlColor::Peterriver, tab2, &numberMaxStepsCall);

Now let’s take a look at what happens when a number is input into the Max Steps field in the UI.

Notice there's a function at the end when add the Max Steps control called numberMaxStepsCall

ESPUI.addControl(ControlType::Number, "Max Steps:", String(max_steps), ControlColor::Peterriver, tab2, &numberMaxStepsCall);

Go to line 12 to see how it works:

void numberMaxStepsCall(Control* sender, int type)
{
max_steps = sender->value.toInt();
preferences.putInt ("max_steps", max_steps);
Serial.print("max_steps: ");
Serial.println(max_steps);
}

When a value is passed into the Max Steps field, it gets sent to this function. Here we decide what to do with the value.

All values are passed as text, so here we set the max_steps variable = sender->value.toInt(); the toInt() converts the text into an integer.

Next we save the max_steps into Preferences just in case there's a reset, the value will be saved.

NEXT SECTION: 13

Course Sections:

Section 12: ESPUI

Connecting to the ESP32

NEXT SECTION: 13

Leave a comment