ESP32 slider example

MIT App Inventor Help
#2

Welcome.

Here are the community discussions related to ESP32 devices https://community.appinventor.mit.edu/search?q=esp32

The advice you seek might be within those discussions and in the documentation for the Slider

To receive specific advice, you might post and image and script of what you have tried.
You found tutorials for the Uno, great. Use them as a model for your esp32 app.

#3

Unfortunately my programming knowledge is very limited and I have a hard time adapting Arduino codes for ESP32.I believe that the most I can do is use a esp32 code with bluetooth and a slide bar with a slide bar and create a second slide bar just by duplicating the code. I looked at the links you recommended but I couldn't find anything that could help me. I'll continue searching.

#4

I can do this by following this video with TUNIOT ESP32 : https://youtu.be/CBWKPLdkkTg
I can make this code on the Arduino IDE work on ESP32 and also the APP of this example on the site works on Android and turns the LED on and off.

Capturar1
Capturar11553×771 104 KB

Capturar2
Capturar2955×765 44 KB

Now if I can include a slide bar so that DATA has its value, I believe I can have 1 slide bar working. Then I need to include a second slide bar.

#5

Hello Ltron

Put a Slide bar component in your Design and open the Blocks for it - I think how to use them should become obvious given that you know the range you require and the values are integers (App Inventor can handle numbers as strings too).

#6

I have now reached this result:

Capturar3
Capturar31901×868 149 KB

when I change the slide bar position, the APP sends strange characters to the serial.
I need numbers to be sent. Where should I change?

#7
  1. Check that your DATA is an Integer and not a float after applying floor. You can use DoIt or simply display the value in a Label or Notifier.
  2. Is the receiving script expecting to receive numbers? It is usually easier to send a string (UTF-8).
#8

Yes, script expecting to receive numbers:
void loop()
{

if (SerialBT.available()) {
  DATA = (SerialBT.readString());
  Serial.println("NEW DATA");
  Serial.println(DATA);

}

#9

Dear Ltron,
it seems to me that you reserve a string type as DATA but you use "floor" to write into it an integer value, then you send bytes, on BT.
My suggestion is to convert the floor to a string, before sending it.
In other words: since in the Arduino code you read a string on BT (while you are sending bytes, right now), I suggest you to convert the floor to a string, then use the Bluetooth.Sendtext instead of SendBytes.

Please try to have a look on all this. Maybe the "strange values" are due to this.
Cheers.

1 Like
#10

Strange values, so-called "bushes" in Poland, may cause differences in the set UART speed. But I think here just bytes are sent and converted to text on the esp32 side.

1 Like
#11
  • Use a Clock to send the data.
  • Use SendText
  • In the Arduino code
    DATA = SerialBT.readStringUntil ('\n');
2 Likes
#12

..... make sure the data is sent with '\n' at the end. To do that, use a Text Join Block.

#13

Hi ChrisWard and Juan_Antonio
In fact including \ n in join it was possible to see the numbers as shown in the figure below

Capturar4
Capturar41381×893 113 KB

It was necessary to follow the two recommendations from you:
1 - In the Arduino code
DATA = SerialBT.readStringUntil ('\n');
2 - make sure the data is sent with '\n' at the end. To do that, use a Text Join Block.
Capturar6
Capturar61915×933 226 KB

Another question:
Another question:
How do I move the sliderbar away from the center of the phone screen or center it?
I reduced the width to 90% but it only affected the left side, and I want it to be centered on the screen with a width of 90%
Screenshot_20210127-092815
Screenshot_20210127-0928151080×1920 146 KB

#14

@Ltron
Here a example with Sliders and Clock, maybe you can get some idea

HorizontalArrangement AlignHorizontal -Center

Slider Width 90 per cent

#15

Juan_Antonio, Following his recommendation, I managed to get the central position right.
Now I will analyze your app to see if I can send the values ​​of 2 sliderbar, which is the post theme.

Capturar7
Capturar71920×862 280 KB

#16

Place it in a Horizontal Arrangement (aka container) and set that to Centered. You should also set the Screen to Horizontal Centered.

#17

Hello everyone.
I am very happy with the progress and with your help I have already managed the sliderbar working well.
Now a question in the graphics:
See the figure below

Capturar9
Capturar91879×894 266 KB

For example, valorslider1, has TextColor = Cyan.
On the MIT APP screen this color appears cyan, but on the cell phone it appears black. This happens with all 4 TextColor (valorslider1,2,3,4)
celular2
celular21080×1920 183 KB

#18

Search Slider color
https://community.appinventor.mit.edu/search?q=slider%20color

#19

Ok, thanks to everyone who helped me. The APP works well and I will make some modifications such as creating an exit button, etc.

#20

Can you share your final code, give back for help?

#21

For me, this approach is working well.
For more control, I set the min-max values for the slider once the screen is initialized to (1-10 for me), I initialized the global variable with the median value (5), I forced the same min/max values in the Designer->Slider->Properties, I collect and display the value set by the slider in a label (to see it, good for debugging), and added a button to send the value once properly set (it worked directly, but I didn't want to query the BT very often).
The sending protocol is using 'CallBluetooth -> SendText' since it is easier to manipulate and parse the data sent this way on the module side (see atoi() ).
Cheers!
C.

1 Like