Up next in 10
STM32 ETHERNET #6.1 HTTP WEBSERVER PART 2 || SSI (Server Side Include)
7 views
Nov 13, 2021
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ ETHERNET PART6 :::: https://youtu.be/oxkDLTDdhUE ETHERNET PART6.2 :::: https://youtu.be/eFCiNdY8CS4 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/stm32-ethernet-6-1-http-webserver-ssi/ ________________________________________________________________________________________________ ******* 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:10
hello and welcome to controllers tech
0:13
this is the continuation from the
0:15
previous http web server video and today
0:18
we will see how to use the ssi server
0:21
side include
0:23
this part will basically cover how to
0:25
refresh the web page with the new data
0:28
since this is the continuation from the
0:30
previous http video i will also continue
0:34
where i left things last time
0:36
i am not going to cover any setup
0:38
process again so please watch the http
0:41
web server part 1 and then come back to
0:44
this video
0:45
let's start the cube id and here we have
0:48
the old project
0:50
let me quickly show you the what we did
0:52
in the last video
1:05
so this is the web page we created
1:08
and there was one more page for the 4 0
1:11
4 error
1:12
let's continue with our project
1:22
we need to enable the ssi in the cube mx
1:26
so open the file
1:28
go to lwip
1:30
and then go to httpd
1:39
here check the show advance parameters
1:41
box
1:46
we got some additional settings
1:49
now enable the lwip http dssi
1:54
this is it for the setup
1:56
click save to generate the project
2:02
let's try to build it once
2:04
we have some errors and it's the same
2:07
one we got last time also
2:10
so first we will disable the use of the
2:12
custom fs data file
2:18
and if you build it again you will get
2:20
another error but this one is for the fs
2:23
data file and it's okay
2:25
we will deal with it later
2:28
now we need to create a new web page
2:30
where we will update the data
2:33
i am going to use the html table for
2:35
this purpose
2:39
let's see which one is suitable
2:42
not this one
2:45
not this one either
2:49
this looks ok
2:50
let's continue with this
2:52
i am changing the name of the columns
3:00
this looks fine
3:02
i am going to add the head section since
3:04
we are going to use the meta tag
3:10
and the title for the web page
3:18
now add the meta tag and here we will
3:21
give the refresh time
3:26
i am setting it for 1 second
3:33
let's run it once
3:36
you can see the page refreshes in 1
3:39
second
3:42
it's all ok up to here now since we are
3:45
going to use the data from the mcu we
3:48
will use the tags instead of the values
3:51
these tags x y and z are being used for
3:55
the first second and third columns
3:58
let me change these headings real quick
4:08
i forgot to close the head
4:15
all right let's copy this and we will
4:18
create a new file
4:22
save the file as os html
4:39
here you can see the page is refreshing
4:41
every one second
4:47
now go to the location where we copied
4:50
rfs folder last time
5:11
inside the fs folder copy the file you
5:14
just created
5:16
now double click the make fs and the new
5:18
fs data file is generated
5:23
let's build the project now
5:32
all the errors are gone and notice this
5:35
fs data is still excluded from build
5:38
just like how we set up last time
5:41
so everything is good so far
5:43
i have created these files for the ssi
5:46
just to ease the process
5:49
include them in the project and i will
5:51
explain them
5:56
the source file we just included will
5:58
mainly handle the ssi
6:03
here this index variable will be used
6:05
for the values that are going to be
6:07
displayed on the web page
6:14
these are the 3 tags i am using just
6:17
like i created in the html file
6:27
next is the function to initialize the
6:29
http server
6:32
this function will first initialize the
6:34
httpd which we were initializing in the
6:37
main file earlier
6:38
then it will set the ssi handler
6:49
this function takes 3 parameters the ssi
6:52
handler the tags and the number of tags
6:55
we are using
7:09
i am using 3 tags here
7:15
let's see the ssi handler now
7:18
it takes 3 parameters
7:21
i index basically represents the number
7:23
of the tag in the tag array
7:25
pc insert is the pointer to the data
7:28
that we want to send to the tag
7:30
i insert len contains the size of the
7:33
buffer pointed to by the p c insert
7:36
if the i index is zero that means the
7:39
first tag is detected
7:41
we will increment our variable and save
7:44
this value to the pc insert
7:46
then return the number of characters
7:48
written to the pc insert
7:51
similarly we do for the i index 1 and 2
7:54
that means when the tag 2 and tag 3 are
7:56
detected
7:58
in each case our variable is
8:00
incrementing so the values will always
8:03
have a difference of 1 among them
8:07
in case you want to display the a-d-c
8:09
data or any other sensor's data just
8:12
call the get value function here
8:15
and then convert the value to the
8:17
characters and save it in the p-c insert
8:25
that's it for the s s i related
8:28
functions
8:33
now in the main file first include the
8:35
header file we just copied
8:42
in the main function we will call server
8:45
init as it will initialize both h t t p
8:48
d and s s i
8:51
that's it now build the project and
8:54
flash it to the board
8:58
let's test it
9:04
our home page is fine let's go to the
9:06
ssi page
9:11
we need to add the extension
9:16
the page is refreshing but the values
9:18
are not displaying
9:20
i might have messed up something in the
9:22
html file
9:26
i forgot to put the hashtag here
9:29
ok let's try it one more time
9:32
we need to do the entire process again
9:35
first copy the file in the fs folder
9:39
then generate the fs data again
9:42
then build the code and run it
9:49
hopefully it will work now
9:54
it's working as you can see the values
9:56
are updating every second
10:01
let's see what happens if we go to
10:03
another page
10:07
i left the page when values were 43 44
10:10
45.
10:15
after almost 10 seconds when i reopen
10:18
the ssi page the values started where we
10:21
left them
10:23
the page will only refresh if it's
10:25
opened and so the values will update
10:28
we can leave it open in the background
10:30
and do other things with our server
10:33
so the ssi seems to be working well but
10:35
refreshing the entire page is certainly
10:38
not a good idea especially if you have a
10:40
lot of content like images or videos on
10:43
the web page
10:45
well there is a solution for it but we
10:47
can only implement it if we use the rtos
10:50
so we will cover that part later
10:53
we cover how to send data to the web
10:55
server and now remains is receiving data
10:58
from this web server
11:00
we will use the cgi common gateway
11:03
interface to implement it
11:06
this will be covered in the next
11:07
tutorial
11:09
that's it for today
11:11
i hope you understood the procedure
11:14
you can download the code from the link
11:16
in the description
11:19
leave comments in case of any doubt
11:22
keep watching and have a nice day ahead
11:25
[Music]
11:40
you