This is the last installment about UDP communication between Wifi Devices.
In the first story I showed you how to send data from one ESP to another. You can re-read that story here: https://lucstechblog.blogspot.com/2019/03/udp-communication-part-1.html
The second story showed how you could send information from one ESP8266 to many ESP8266's. Re-read that story here: https://lucstechblog.blogspot.com/2019/03/udp-communication-part-ii.html
The third story was a tutorial on how to send data from an ESP8266 to a Raspberry Pi and the other way round. You can read that part here: https://lucstechblog.blogspot.com/2019/03/udp-communication-part-iii-esp-to.html
In this last story I am going to show you how to send data using the UDP protocol from your Android Phone/Tablet to an ESP8266 or from an ESP8266 to your Phone or Tablet.
This completes the series and with all this information you will be able to send and recive data from almost any device in your home to any other device. That's the basic setup for any home automation system.
APP Inventor.
For writing APP's for my Android phone and tablet I use MIT's App Inventor. App inventor is based on Blockly just like the Arduino programming Environment Ardublock, and Microsofts Makecode for the Micro:bit. And maybe you recognise the method from Scratch on the Raspberry. All are based on the same block building programming environment which originated at Google.
It started as an easy tool for children to learn programming but App Inventor has grown to be a full programming environment which makes it possible to build professional APP's that can even be sold on Google's Play store.
As almost everybody has a mobile phone nowadays and certainly the readers of this blog must have one I urge you to have a look at App inventor and start building your own APP's.
UDP communication in App Inventor
App Inventor has a lot of features for building your own App's however UDP communication isn't one of them. Fortunately a lot off programmers are building extensions for App Inventor. You can compare extensions with libraries for the Arduino or ESP.
A Software Engineer with the name Taifun has written some excellent extensions and has a webpage that lists not only his extensions but all together a few hundred available extensions. Although I must say some (minority fortunately) are not free.
One of the extensions is an UDP extension. You can find it on the extensions page from Taifun https://puravidaapps.com/extensions.php which links to the actual page where the extension can be downloaded and that is this page: https://community.thunkable.com/t/free-udp-client-extension/5831
Using extensions in App Inventor
There are some excellent tutorials on using extensions in App Inventor on the web. So I will be brief about this.
Start with downloading the UDP extension to your computer from this web-page: https://community.thunkable.com/t/free-udp-client-extension/5831
Now start App inventor and start a new project.
On the left side of the designer screen at the bottom you can see the extension entry. Click on that and you can upload the extension into App Inventor. That's all. You are now ready to use it.
ESP program to receive UDP packages
For testing sending UDP data from your Android Phone we first need something that can receive UDP packages. In the previous stories I showed you how to send data between ESP8266's using UDP communication. I wrote some ESP-Basic programs for that. I am using a small ESP-Basic program here again so we can send data from our phone to an ESP8266
For those of you who have no idea what ESP-Basic is about just look at this tutorial:
http://lucstechblog.blogspot.nl/2017/03/back-to-basic-basic-language-on-esp8266.html
' UDP receive
' written by Luc Volders
' http://lucstechblog.blogspot.nl/
wprint |<h1 style="text-align:center;">Luc Volders</br>UDP-Receive</h1>|
wprint "<br/><br/>"
udpbegin 5001
textbox received
udpbranch [getudp]
wait
[getudp]
received = udpread()
return
Nothing special. The program puts a textbox on the webpage in which the received data will be displayed. Next the program just waits till a UDP package is received. That's all.
App Inventor program to send data with UDP
Visit App Inventor, log in and create a new project. Start with importing the UDP extension like mentioned above. Now drag the extension to your design screen and a non-visible component will be inserted in your APP just like the screen below shows.
Put a textlabel on the screen and set the width to full. Give it a large font, I used 14 and set the text color to red.
Put a button below the label.
Now switch to the blocks section.
As you can see the program is not very complicated.
Start with initialising a variable called var1
Everytime the button is clicked the variable is incremented with 1 and the UDP extension is activated. The IP adress should be altered in the IP adress of your ESP8266 to which you are sending.
The port is 5001 but you can use another port.
The message is a concatinated string consisting of the word "test " and the value of the variable var1. The message is then also put into the label so we can see on the screen of the phone what is actually send.
After you start the App with the live function of App Inventor and start the ESP-Basic program you can see the text in the textfield of the ESP8266 change every time you press the send button on your phone.
I leave it for now to your creativity to alter the commands you are going to send to the ESP. You can use it to put led's on or off, or switch relays on or off, or send sensor or location data from your phone to an ESP8266.
Next step: receive UDP data on your phone.
ESP program to send UDP packages
Now we know how to send data with UDP from the Phone to your ESP it is time to look at how we can receive data with UDP on your phone.
To achieve that we need something that can send data using UDP. Again we are going to use our faithfull ESP8266 for this using a simple ESP-Basic program just like we used in the previous stories in this series.
' UDP send
' written by Luc Volders
' http://lucstechblog.blogspot.nl/
wprint |<h1 style="text-align:center;">Luc Volders</br>UDP-Send</h1>|
wprint "<br/><br/>"
count = 0
udpbegin 5001
button "send" , [sendudp]
wait
[sendudp]
count = count + 1
countst = str(count)
mess = "test numero " & countst
udpwrite "192.168.1.70", 5001, mess
print mess
wait
Again a very simple program.
A button is put on the webpage and every time you press that button the variable 'count' is incremented. Then a message is created consisting in the text "test numero " and the variable countst which is the string version of 'count' transformed by this statement: countst = str(count). This is necessarry because UDP can only send strings.
udpwrite "192.168.1.70", 5001, mess
This line sends the message using port 5001 to the selected IP adress. Make sure you exchange the IP adress for the IP adress of your phone.
This is how it looks on your computer screen when you have pressed the button a few times.
App inventor program to receive data over UDP
Start a new project in App-Inventor and design the screen as follows:
Not much to it.
We put the UDP extension in the screen and then it appears as an invisible component in the APP. and there is just a label on the screen which uses a large font.
The last component is again an invisible component: clock
The program starts with initialising a global variable with the name var1
The next part is a test wether some information is received over UDP.
If that is the case the label's text is changed into the received information, and the received information is cleared.
Then there is a last block testing the clock.
The clocks timer is automatically set to 1 second. So every second this block is triggered. The variable var1 is incremented with 1 and a message consisting of the word 'test'and the value of the variable is send over UDP to the ESP.
Looking at the ESP's program you can see that there is no routine for receiving anything.
So why should you send something to the ESP.
Actually this is a flaw (bug) in the UDP extension.
For one reason or another you need to trigger UDP communication by sending something to the ESP. Mind you this is a bug in the UDP extension for Android because as you might recall (or re-read) such an action is not needed in ESP to ESP communication.
And this is what can bee seen on your phone's or tablet's screen after you pressed the button on the ESP several times.
Last step is to combine the send and receive part.
ESP program to send and receive UDP packages
We already covered this in the orevious stories when we had two (or more) ESP8266's communicating with eachother. So re-read these stories here XXXXXXXXXXXXXXXXXXX and here XXXXXXXXXXXXXX
' UDP send and receive
' written by Luc Volders
' http://lucstechblog.blogspot.nl/
wprint |<h1 style="text-align:center;">Luc Volders</br>UDP-Send</h1>|
wprint "<br/><br/>"
count = 0
udpbegin 5001
udpbranch [udpreceive]
button "send" , [sendudp]
textbox receive
wait
[sendudp]
count = count + 1
countst = str(count)
mess = "test numero " & countst
udpwrite "192.168.1.67", 5001, mess
print mess
wait
[udpreceive]
receive = udpread()
if receive = "Just Luc" then
wprint "."
else
print receive
endif
return
Lets have a brief look at the program.
udpbegin 5001
udpbranch [udpreceive]
This sets the port on the ESP8266 to 5001 and jumps to the routine "udpreceive" when some data is received.
button "send" , [sendudp]
textbox receive
When the button is pushed the program jumps to the UDP "sendudp" routine. And the textbox is just there to display anything that is received by the "udpreceive" routine.
The "sendudp" is the same routine we used in the send-only program.
The "udpreceive" routine examins what is being received from your Android Phone or Tablet. If it receives the phrase "Just Luc" it prints a dot "." on the screen. Else it puts the information that is received in the variable receive which will put it in the textbox.
Why the test for "Just Luc" (you can and will alter this for something significant for yourself) you might ask.
Remember the clock function in the Android program that sends every second a UDP package. Well we just test what it sends and if that is "Just Luc" it is irellevant so it will just print a ".". Alter this to your own needs in your project.
Android Program to send and receive UDP packages.
The Design part is simple.
Just a Label which will display the received text. Give it a large font, and maybe a fancy color.
And a button that will send dome data when pushed.
The block section is also not too complicated. it is just a mix of the previous send and receive programs.
First part is when a UDP package is received. The program will put whatever is received into the Text Label.
The clock part will send a UDP package everytime it is activated (every second) and sends the phrase "Just Luc" which will be filtered out in the ESPBasic program as described above.
When you click the button the global variable var1 will be incremented in value and the text "Luc sends text number " with the global var1 will be send to the ESP.
Adapt the clock and the button program parts so they use the IP number of your ESP8266 instead the number I filled in.
That's all folks.
Real life sending and receiving.
This is what the Android program will look on your phone's or tablet's screen.
As you can see it has received two times a data package from the ESP8266
This is what the ESP8266's screen will show you.
Everytime "Just Luc" is received a dot is printed next to the line where the last information was printed.
When you push the send button the text "test numero x" is printed and everytime the ESP receives real data the line "Luc sends test number X" is printed.
Summarising
I do not expect you to use this to send simple text messages from one device to another. The described programs can easily be adapted to send sensor data like temperature, buttons, movement, color codes for leds, slider values for motors etc. etc. etc.
Next to that we have a complete communications suite now for sending data between ESP8266's, Raspberry Pi's and Android Phone's or Tablets.
I bet you can come up with something usefull for this. Do not hesitate to mail me about your projects.
Till next time.
Have fun
Luc Volders