Up next in 10
STM32 ETHERNET #12 HTTP Server with AJAX - PART 2 || NETCONN || LWIP
4 views
Jul 2, 2022
Purchase the Products shown in this video from :: https://controllerstech.store __________________________________________________________________________________________________ Use CMSIS V1, For now it seems to be more stable than V2. You can refer the page for more information on the bugs in LWIP https://community.st.com/s/question/0D50X0000BJ1iquSQB/bug-in-cubemx-ide-lwip-freertos-on-nucleo-f429zi AJAX PART1 :::: https://youtu.be/yvGB_eeYM9E STM32 ETHERNET Playlist:: https://www.youtube.com/playlist?list=PLfIJKC1ud8ggZKVtytWAlOS63vifF5iJC STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/http-server-using-ajax-part2/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:01
[Music]
0:09
hello and welcome to controllers tech
0:13
this is the 12th video in the stm 32
0:16
ethernet series and today we will be
0:18
continuing the use of ajax in the web
0:21
server
0:22
in the previous video we created xml
0:24
http request and our server the sdm32
0:29
was able to receive that request
0:32
today we will continue with it and we
0:34
will receive some data from the server
0:37
then display the data on the web page
0:40
without loading the entire page
0:42
before i continue with this tutorial i
0:45
want to share some important information
0:48
i was testing this with free rtos cmsis
0:52
version 2 and the code kept getting
0:55
stuck at this particular location after
0:57
some time
0:58
basically the semaphore is getting
1:00
corrupted for some reason and this
1:02
happens during the call to acquire the
1:05
semaphore from the ethernet if input
1:07
function
1:08
you can see on the right the item size
1:11
is supposed to be zero but it's not
1:14
the value field on the web page just
1:16
gets empty at this stage as the server
1:19
is not sending any data to the web page
1:22
after i searched for the error i found
1:25
that this is a very common problem with
1:26
the stm32 ethernet drivers
1:30
i will post the link to this thread in
1:32
the description below
1:35
here users have listed some solutions to
1:37
overcome these issues and using one of
1:39
these solutions i switched back to cmsis
1:42
version 1 and the code worked perfectly
1:46
so i would advise you guys to use the cm
1:49
sys version 1 of the free rtos in the
1:51
ethernet programming
1:54
all right since this is the continuation
1:56
from the previous tutorial let me rename
1:59
the previous project to part 2.
2:02
now let's load the project in the cube
2:04
ide
2:06
in the meantime let me show you the html
2:09
file i have created for this project
2:14
i was testing it on the w3schools
2:17
website so let me put it there itself
2:25
if i press the start button the data
2:28
gets loaded in the value field
2:31
notice that this data is refreshing
2:33
every one second
2:35
by the way this is fetching the data
2:37
from the w3schools server so it won't
2:40
work anywhere else we will modify it to
2:43
work with our server
2:45
if you notice under the script tag we
2:48
have the same code
2:50
we will create a variable to store the
2:52
request
2:54
then the onload function will create a
2:56
new xml http request
2:59
this timer function is a new addition
3:02
here
3:03
this function will be called
3:05
periodically and inside it we will write
3:07
another function which will be called
3:10
whenever the status of the x-h-r changes
3:13
here we will update the value of the
3:15
text area which we have defined later in
3:18
the body
3:19
the value will be updated based on what
3:21
response is sent by the server when it
3:24
received the xhr request
3:27
just like the previous tutorial we have
3:29
to initiate the xhr request by using the
3:32
open method
3:34
as i mentioned before this particular
3:36
url only works with this website and you
3:39
can just put it in the browser url
3:43
so this is the data sent by the server
3:45
when requested through this url
3:48
we will change the url later according
3:51
to our server anyway we use the open
3:54
method to initialize the xhr request
3:58
then send the request to the server
4:00
using the send method
4:02
in the end we will set the timeout for
4:04
the function to be called periodically
4:07
i am setting the period to be 1 second
4:10
so the timer function will be called
4:12
every 1 second and only the value field
4:15
in the text area will be updated in each
4:17
call
4:18
i have set this start button to call the
4:20
timer function once and after that it
4:23
will keep running every one second
4:26
if you don't want to set the start
4:27
button
4:28
and want to call the timer function
4:30
automatically you can call the timer
4:32
function here just after the page gets
4:35
loaded
4:36
and you can see this time it is
4:38
displaying data without pressing the
4:40
start button
4:44
but i will stick with the start button
4:46
for now
4:47
all right now we will modify our
4:49
previous index file and add this code to
4:52
it
4:56
so open the project folder middleware
4:59
third party lwip source apps http and
5:04
open the fs folder
5:07
here is our
5:08
index.html file from the previous
5:11
project
5:12
let's open it in the editor
5:15
we already have a script tag from the
5:18
previous video we will just add the new
5:20
function to it
5:31
let's change the url to get value
5:34
later we will add this in the server
5:36
file to look for this url
5:38
and send the value to the client
5:41
i am adding this timer function here
5:43
just in case you guys want to display
5:46
the values without the start button
5:52
now we have to add these things in the
5:54
body of our index file
6:00
here are the green and blue buttons
6:03
let's add the code after this
6:10
let's see how it looks
6:17
this is fine the button and text area
6:19
positioning is perfect
6:22
all right everything is fine so far now
6:25
let's open the cube id
6:32
as i mentioned in the beginning i am
6:34
going to change to cm sys version 1.
6:52
also i am disabling the new library
6:54
re-entrant
6:56
save the project to generate the code
7:03
we will have to deal with all the errors
7:05
again so let's start by generating the
7:08
fsdata.c file first
7:14
now build the code to see the errors
7:20
all right first we have the error for fs
7:22
data custom file
7:25
go to its definition and set it to zero
7:38
all right the errors are gone now
7:41
we do have a few warnings but i guess
7:43
that's fine
7:45
we will see later if we have problems
7:47
running the code
7:49
let's continue with the http server.c
7:52
file
7:59
we will add one more condition to check
8:01
for the get value url
8:13
if the request is made using this url
8:16
then first we will create a pointer to
8:18
store the value we will be sending
8:21
then allocate the memory for this
8:23
variable
8:26
if you are using s printf then you must
8:29
allocate using the pv port malloc
8:31
otherwise the memory will get corrupted
8:35
i have explained it in one of the free
8:36
rtos videos you can check on the top
8:39
right corner
8:41
i am going to send the incremented value
8:44
of this index variable
8:54
then netcon write will write the data
8:56
similar to how we did in the previous
8:58
tutorial
9:16
if you want to send any sensors value
9:18
like temperature or pressure or any
9:20
other a-d-c value you have to first
9:22
convert it to the string like i did and
9:25
then send it
9:32
in the end free the memory allocated for
9:35
the buffer
9:36
let's build and debug the code
9:40
we will also check the requests on the
9:42
wireshark
9:44
here i am going to filter the http
9:46
requests
9:48
all right let's open the web page
9:51
you can see all the requests made on the
9:54
wireshark
10:06
on pressing the green button the empty
10:09
request is sent by the client just like
10:11
the previous tutorial
10:16
now let's press the start button
10:19
you can see the requests made by the
10:21
client and how the value field is
10:24
updating every second
10:42
if we try to access any other page it
10:45
will show the 404 error
10:52
the fact that only the value requests
10:54
are visible on the wireshark means the
10:57
entire page is not reloading otherwise
10:59
you would see the requests for images as
11:02
well
11:09
all right let me show you one more thing
11:12
where i will uncomment this time a
11:14
function so that the function will be
11:16
called after the page has been loaded
11:19
this way we don't need to press the
11:21
start button to start retrieving the
11:23
values
11:24
we need to generate the fs data file
11:27
again with this updated code
11:30
let's build and run the code
11:50
all right you can see the value started
11:52
updating after the page loaded fully so
11:56
it depends on how you want this to work
11:59
we saw how the use of ajax made it
12:01
possible to only update a specific
12:03
section of the web page instead of
12:05
reloading the entire page
12:08
i hope you understood the video
12:11
i know i didn't send any http ok
12:14
response you can take care of that part
12:16
if you are building an application for
12:18
this
12:19
this is it for the video
12:22
i will see if i can make a video on tftp
12:24
protocol but it's not in the near future
12:27
plans as of now
12:29
leave comments in case of any doubt
12:32
you can download the code from the link
12:34
in the description
12:36
keep watching and have a nice day ahead
13:02
you
#Engineering & Technology
#Programming
#Scripting Languages