Up next in 10
STM32 ETHERNET using Mongoose #3 || WEATHER STATION || Log Data into WebUI
May 17, 2025
Mongoose Homepage :::: https://mongoose.ws/u/yctech3 ________________________________________________________________________________________ Mongoose Wizard :::: https://mongoose.ws/wizard/#/ Mongoose PART2 :::: https://youtu.be/NHNt8bdb2BQ Mongoose PART4 :::: https://youtu.be/LeMZC-ozd2Q STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/stm32-ethernet-using-mongoose-part-3/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:09
hello and welcome to controllers tech
0:12
this is the third video in the sdm32
0:15
ethernet series using the mongoose
0:17
library in the previous video we used
0:21
the mongoose wizard to create web
0:23
interfaces and also covered how to link
0:25
interface elements to sdm32 components
0:28
for functional
0:30
integration today we will create a
0:32
project involving the mongoose library
0:35
we will create a simple weather station
0:38
which will log the temperature pressure
0:40
and humidity data to the web interface
0:44
i will use the sensor bme280 for the
0:46
measurement as it can measure all these
0:49
three
0:50
parameters we will also see how to use
0:52
the graph feature of the web interface
0:55
to display the data over a period of
0:57
time before diving into the project
1:00
let's briefly review the features and
1:02
capabilities of the mongoose library
1:05
mongoose is a network library for cc++
1:10
it provides event-driven non-blocking
1:12
apis for tcp udp http websocket mqtt and
1:18
other
1:19
protocols it is designed for connecting
1:22
devices and bringing them
1:24
online on the market since 2004 used by
1:28
a vast number of open-source and
1:30
commercial products it even runs on the
1:33
international space station
1:35
mongoose makes embedded network
1:37
programming fast robust and easy the
1:42
mongoose wizard simplifies the creation
1:44
of professional interfaces without
1:46
requiring design or front-end
1:49
expertise it supports user
1:51
authentication with multiple access
1:53
levels which can be enabled effortlessly
1:55
via a single
1:57
checkbox additionally dashboards are
2:00
kept up to date with a built-in device
2:02
connection indicator on the toolbar
2:05
ui controls such as drop-downs toggles
2:09
and inputs can be easily mapped to see
2:11
structures by adjusting getter and
2:13
setter
2:14
functions conditional display
2:16
functionality allows data exceeding
2:18
predefined thresholds to be highlighted
2:20
using alternative styles
2:23
moreover mongus provides seamless
2:26
firmware update support for
2:28
microcontrollers like
2:29
sdm32
2:31
esb32 and others requiring no additional
2:35
configuration let's start this tutorial
2:38
by creating the web interface
2:40
first click on this button start
2:43
building web
2:44
ui i have already created a basic ui it
2:49
includes the gauges for temperature
2:51
humidity and pressure data and the
2:54
graphs for all three values as well now
2:58
we will add the rest apis to these
3:01
widgets i will use the websocket to
3:03
update all the
3:05
gauges let's enable the websocket in the
3:08
settings the gauge has a default range
3:11
from 0 to
3:13
100 we can change this as per our
3:16
requirement
3:17
for example i am assuming the
3:20
temperature might vary from minus20° to
3:23
50°
3:24
c that is why i have defined the ticks
3:27
here to display all the possible
3:29
variations on the
3:31
gauge humidity can vary from 0 to 100%
3:35
so i will leave the range to that here i
3:39
am adding the ticks to display the
3:40
interval on the
3:42
gauge finally we have the pressure gauge
3:46
the pressure is in kilopascals and i
3:48
believe it can vary between 90
3:50
kilopascals to 110
3:53
kilopascals now we will add the rest api
3:56
for the gauges let's name the api
3:59
endpoint as gauge now we will add three
4:02
data fields for temperature humidity and
4:06
pressure i am keeping the variable type
4:08
as integer for now but we will change it
4:11
later in the code as i mentioned i am
4:14
going to use the websocket to send the
4:16
data to the gauges so let's change the
4:19
api name to
4:20
websocket now go to the page content and
4:24
change the api variables for all the
4:33
gauges we can test the websocket api by
4:36
sending the values to the respective
4:38
data fields you can see the values are
4:42
displaying fine on the gauges let's see
4:45
the graphs now the graph does not
4:48
display on its own instead we need to
4:50
define the values to display them on the
4:53
graph let's create a new api endpoint i
4:57
am calling it temperature graph and
4:59
setting the data type to custom here we
5:03
need to send a json response which will
5:05
then plot on the graph the response
5:08
consists of two entries which will make
5:10
two axes of the graph here i am going to
5:14
plot the graph for temperature over a
5:16
period of time the time data should be
5:19
the time stamp which you can get from
5:21
some website the second entry should be
5:24
the temperature data for the respective
5:27
timestamp the graph will not display the
5:29
accurate data for a single value hence
5:32
we need at least two values i am setting
5:35
the second time stamp 100 seconds higher
5:38
than the previous one finally enclose
5:42
both values inside a bracket we have now
5:45
prepared the json response for the
5:47
temperature graph let's go back to page
5:50
content and set the api variable to
5:53
temperature graph you can see the graph
5:56
is now displaying two values and their
5:58
time is approximately 1 minute apart
6:01
let's create more api endpoints for the
6:04
other graphs as well i am setting the
6:07
same values for others as well we will
6:09
modify them in the code itself let's
6:12
change api variables for the respective
6:15
graph we will use the heartbeat to
6:18
autoupdate the web ui every few seconds
6:21
so the graphs can update accordingly we
6:24
will implement it in the code but here
6:26
set this auto update interval higher
6:28
than zero also enable the sntp client to
6:32
synchronize the time with google's
6:34
server this will help us get the
6:36
timestamp data for the graph to use the
6:40
sntp make sure the development board can
6:43
access the internet you can do that by
6:46
connecting the dev board with the router
6:49
instead of directly connecting it to the
6:51
computer that is all for the designing
6:54
part let's generate the project now open
6:58
the cube ide and import the generated
7:03
project here is the main file of the
7:06
project and the mongus folder contains
7:09
all the mongoose related files let's
7:12
open the mongoose configuration file i
7:15
do not have access to the router and
7:17
therefore i have connected the board
7:19
directly to the computer the board
7:22
cannot use dhcp
7:24
therefore i am setting the static ip in
7:27
the configuration file let's build the
7:30
project once we do not have any errors
7:34
so let's flash it to the board all right
7:37
now open the ip address in a browser you
7:40
can see the web ui is loading just fine
7:44
right now the default values are being
7:46
shown on the ui but we will update them
7:48
in the code i want to update the gauge
7:51
values every 5 seconds and therefore i
7:54
will use a timer to generate an
7:56
interrupt for the timing i am going to
7:59
use the timer 6 for this purpose let's
8:02
take a look at the device data sheet to
8:04
understand the timer clock search for
8:07
timer 6 in the data
8:11
sheet here you can see the timer 6 is
8:14
connected to the apb1 bus
8:20
if you see the clock configuration here
8:22
the apb1 timer clock is at 200
8:26
mghertz this means that the timer 6
8:28
clock is also at 200
8:31
mghertz if i set the pre-scaler to
8:33
20,000 and the auto reload value to
8:36
50,000 the timer clock will be 0.2 hertz
8:41
this will enable the timer to generate
8:43
an interrupt every 5 seconds
8:49
make sure to enable the interrupt in the
8:51
env tab let's generate the project again
8:55
to implement the changes made in the
8:57
cube mx inside the main function start
9:01
the timer 6 in the interrupt mode once
9:04
the timer period is reached an interrupt
9:07
will trigger and the period elapsed call
9:09
back will be called we will write all
9:12
our code inside this call back function
9:15
as i mentioned earlier i will use the
9:17
websocket to update the gauges i have
9:21
already explained in the previous video
9:23
about how to use the websocket to send
9:25
the data to a particular element of the
9:27
ui basically a websocket message
9:30
consists of the keys and their values we
9:33
can use the websocket handler to send
9:35
these messages to the
9:39
ui we also need to add the websocket
9:42
handler in the main function we want the
9:45
websocket to send a message every 5
9:47
seconds so update the time here in
9:50
milliseconds also i am calling the
9:53
handler as my ws
9:57
handler let's define the temperature
9:59
humidity and pressure
10:01
variables these variables will be
10:04
updated based on the data received from
10:06
the sensor here is the correct format to
10:10
send the data to the gauge
10:12
remember that we defined the data field
10:14
temp hum and pressure in the websocket
10:17
api endpoint here i am sending the float
10:21
data for the temperature humidity and
10:23
pressure
10:24
variables we will test this part first
10:28
since the bme280 sensor is not connected
10:31
right now i am going to simply increment
10:34
the variables inside the timer call back
10:37
this arrangement will increment the
10:39
variables every 5 seconds and the
10:41
websocket handler will then send the
10:43
updated variables to the ui let's build
10:47
and flash the project to the board you
10:50
can see all the gauges are showing the
10:52
value one now after 5 seconds the values
10:56
are incremented to two so the websocket
10:59
is working fine and the data is being
11:02
sent every 5 seconds just as we wanted
11:05
now we will make the graphs work with
11:07
the test data let's define a few more
11:11
variables first for the testing part i
11:15
am going to plot the graph every minute
11:17
and the data will be retained for an
11:19
hour the temperature array will store
11:21
the temperature data every 5 seconds and
11:24
this way it can store a total of 12
11:26
values in a minute once all 12 values
11:30
are accumulated we will take an average
11:32
of them and store it in another
11:34
temperature array this array will store
11:37
the average temperature data for every
11:39
minute and it will do it for an hour
11:42
note that this is an array with two
11:44
columns so we will use the first column
11:47
to store the time stamp whereas the
11:49
second column will store the averaged
11:51
data for a minute this matrix will be
11:54
used by the graph to plot the
11:56
temperature data with respect to the
11:58
time i have defined similar arrays for
12:02
humidity and pressure as well the
12:05
variable index 5 seconds will keep track
12:08
of how many 5 seconds ticks have been
12:10
passed and the variable index 1 minute
12:13
will track the 1 minute
12:15
ticks let's write the code inside the
12:18
timer call back function which is called
12:20
every 5 seconds
12:22
initially we will fetch the temperature
12:25
humidity and pressure values from the
12:28
sensor then we will store these values
12:30
in the respective
12:32
arrays the storing will start from the
12:35
zeroth element of course after storing
12:38
the pressure data the 5 seconds index
12:41
will
12:42
increment this index variable will keep
12:45
incrementing each time the timer call
12:47
back is called that is every 5 seconds
12:51
when the value of this variable reaches
12:53
12 it means that 1 minute has been
12:57
passed now we need to take the average
12:59
of all the accumulated values in the
13:02
array so we will first add all the
13:05
values and store the result in the sum
13:08
variable and then calculate the average
13:11
by dividing the sum by
13:13
12 this averaged data will be stored in
13:16
the matrix we defined above here we will
13:20
use the 1 minute index to store the data
13:22
into the
13:24
matrix the first column of this matrix
13:26
will store the
13:28
timestamp the function mg now returns
13:31
the time stamp in milliseconds therefore
13:33
i am dividing it by 1,000 so as to
13:36
convert it in seconds if the sntp is
13:39
enabled the function mg now will return
13:42
the current time as per the google
13:44
server however if the board is not
13:47
connected to the internet this function
13:49
will return the time since device boot
13:52
the second column of the matrix will
13:54
store the averaged data we calculated
13:57
just now once all the storing is done we
14:00
will reset the 5-second index variable
14:04
also increment the i minute index
14:06
variable so the next data can store in
14:08
the next row of the matrix i am storing
14:12
the data for 1 hour therefore i am
14:14
resetting the variable after it reaches
14:16
the value 60 that is all we need to
14:19
write in the timer call back let's open
14:22
the mongoose glue source file to further
14:25
link this matrix data to the graphs
14:28
these functions are pregerted by the
14:30
dashboard for the use of graph we have
14:33
two ways to deal with these functions
14:36
now either we can make the changes here
14:38
in this file itself but let's say we
14:42
make some changes in the ui and then
14:44
integrate those changes into this
14:47
project this will overwrite this entire
14:49
file and we will lose all the changes we
14:52
made in this file we can prevent this by
14:56
using the second method copy the
14:58
generated function from this glue file
15:01
and paste it somewhere in the main file
15:04
now change the function a little for
15:06
example change the word glue with my i
15:10
am modifying the temperature here to
15:12
prove that this method works the
15:15
temperature now changes from 0 to
15:19
30° now before the run mongus function
15:22
call the function mongus set http
15:25
handler here we need to provide the name
15:28
of the api endpoint which for the
15:31
temperature graph i have defined as temp
15:34
graph also set the function for this
15:37
endpoint now let's build and flash the
15:40
project to the
15:43
board any changes in the ui will
15:45
overwrite the glue source file but since
15:48
we have defined a separate function for
15:50
the temperature graph it will not be
15:55
affected you can see the temperature is
15:58
chang from 0 to
16:00
30° this is the same as we defined in
16:03
the new function
16:05
whereas the other graphs still shows the
16:08
default
16:09
data so this way we can write separate
16:12
functions outside the glue source file
16:15
the graph is a custom data type hence
16:18
there was only one
16:19
function different rest api endpoint
16:22
types generate use different
16:25
callbacks you should define all the
16:27
functions generated for a particular
16:30
endpoint
16:31
since i am not going to regenerate the
16:33
ui i will continue writing the code in
16:36
the glue file
16:37
itself let's include the main header
16:40
file first now we will define the matrix
16:44
arrays as external
16:45
variables let's also define the 1 minute
16:48
index as an external variable
16:53
here the function temp data will be used
16:56
to fetch the data from the matrix and
16:58
convert it to the json format required
17:01
for the graph we will extract the values
17:04
from both the columns of a row and
17:06
convert them into this format note that
17:09
the values are separated by a comma
17:11
therefore i have defined separate
17:13
conditions for the first data and the
17:15
rest of the data here the comma is also
17:19
included in the conversion the first
17:22
value is the time stamp whereas the
17:24
second value is the temperature data
17:27
let's remove this part from the reply
17:29
function as we will fetch the data from
17:31
the temp data function the data still
17:34
needs to be enclosed in a bracket so
17:37
let's put brackets here and the format
17:39
specifier should be m pass the temp data
17:42
function here and also pass the http
17:45
message structure we will do the same
17:48
for humidity and pressure data as well
17:52
that is all that we need to modify in
17:54
the glue source file now we need some
17:57
way to refresh the ui every 1 minute so
18:00
the graphs can update in the ui i
18:03
mentioned it in the beginning mongus
18:05
heartbeat is designed for this purpose
18:08
even though we have set the auto update
18:11
interval here we still need to call the
18:13
glue update state inside the code we can
18:16
do it inside the timer callback function
18:18
itself but in order to make it an
18:20
independent operation i will use mongus
18:23
timer to do so we need to add the timer
18:27
after the mongus library has been
18:29
initialized
18:31
let's add it here in the run mongoose
18:34
function i have set the timer to run
18:36
every 60
18:38
seconds basically it will call the
18:40
function auto update timer which we will
18:43
write in the main file inside this
18:46
function we will call the glue update
18:48
state to refresh the entire ui let's
18:52
build the
18:54
project there is an error in the
18:56
pressure graph
18:59
function actually there should be
19:01
pressure here let's build it again all
19:05
the errors are gone now so let's test
19:07
the project you can see the gauges are
19:10
updating every 5 seconds i am fast
19:14
forwarding the video so that we can see
19:16
the graphs update after 1 minute the
19:19
gauge values are 12 and we have an
19:22
initial value on the graph the value is
19:25
the average of all the 12 values hence
19:28
it is
19:29
6.5 the x-axis of the graph will not
19:32
show correct data until there are at
19:34
least two readings on it let's wait for
19:37
another minute to see the next reading
19:40
now the gauge value is 24 so 2 minutes
19:43
have passed we have a second reading on
19:46
the graph which is an average of values
19:48
from 13 to 24 that is
19:52
18.5 also note the time axis i don't
19:56
have an internet connection to my dev
19:58
board since the board is directly
20:00
connected to the computer therefore the
20:03
function mg now returns the time since
20:06
boot it starts showing the time from 0
20:11
hours the first reading is a minute
20:13
after the boot while the second reading
20:16
is after 2 minutes now we have got the
20:19
third reading after the third minute so
20:22
everything is working fine and now it's
20:24
time to integrate our sensor into this
20:27
project i am using bme280 as it can
20:31
measure all three parameters together i
20:34
have already covered a tutorial
20:36
explaining how to make this sensor work
20:38
with
20:39
sdm32 therefore i am not going to
20:42
explain it again here i will simply use
20:45
the library files from the previous
20:48
tutorial
20:49
let's open the downloaded project copy
20:52
the bme280 sdm32 source file inside the
20:57
source folder of our project now copy
21:00
the header file inside the include
21:02
folder of the project now open the main
21:05
file here we need to define the
21:08
variables to store the measured data we
21:11
have already defined these in our
21:13
project we need to copy this function in
21:16
our main file in order to initialize the
21:19
sensor and finally
21:22
bme280 will be called each time to
21:24
measure the data let's copy the
21:27
initialization function inside the main
21:29
function also include the bme280 header
21:33
file now inside the timer call back
21:36
function we will call the measure
21:38
function to measure the temperature
21:40
humidity and pressure data
21:43
the pressure data returned by the
21:45
function is in
21:47
pascals but i have designed the web ui
21:50
to display the data in
21:52
kilopascals therefore i am dividing the
21:55
pressure value by 1,000 here let's build
21:58
the project
22:02
now we have an error in the bme header
22:06
file let's change this to the main
22:08
header file we still have errors in the
22:12
project
22:13
the me280 works with the i2c which i
22:17
haven't enabled yet let's open the
22:19
schematics of the h745 discovery board i
22:24
am using this stod extension that comes
22:27
along with the board itself here you can
22:30
see the i2c data pin is pd13 and the
22:33
clock pin is
22:35
pd12 now go back to the cubemx and
22:38
search for pd13
22:40
it is the i2c4 data pin similarly the
22:45
pin pd12 is an i2c4 clock pin let's
22:49
enable the i2c4 now i am leaving
22:53
everything to default so the i2c clock
22:56
is at 100
22:57
khz that is all we need to enable here
23:00
click save to generate the project again
23:05
now open the bme280 source file and
23:08
change the i2c handler to
23:12
i2c4 let's build the project again there
23:16
is still an error left in this source
23:18
file let me change this to be
23:21
me280i2c so it can directly get the data
23:24
from the definition all right everything
23:27
is fine now let's flash the project to
23:30
the board
23:33
wait for the ui to sync with the
23:36
board now we have the actual data from
23:39
the sensor the temperature is 28° c
23:44
relative humidity is
23:46
56.6% and the pressure is 94.7
23:50
kilopascals i am fast forwarding the
23:53
video and you can note the graph data
23:56
these are just the three readings
23:58
captured on the graph till now and they
24:00
are accurate here is the picture showing
24:03
the accumulated data for an entire hour
24:07
so our weather station works fine but
24:10
the data displayed on the graph is only
24:13
for an hour we can make a few changes to
24:16
record the data for an entire day an
24:18
entire month or even for a year i will
24:22
demonstrate the changes required to keep
24:24
the data for a day i will record the
24:27
average data for an hour and display it
24:29
on the graph for a day let's adjust the
24:32
arrays first now we want to take the
24:36
average for one complete hour so we need
24:38
to record at least 720 values each value
24:42
at an interval of 5 seconds since we are
24:45
keeping the data for only one day there
24:48
will be only 24 rows in the matrix each
24:52
row represents the average data for 1
24:54
hour let's change this index to 1 hour
24:58
we will start taking the average once
25:00
all 720 values have been captured so
25:04
let's change the 12 to 720 everywhere
25:08
also change the 1 minute index to 1 hour
25:16
index and this index will reset once the
25:19
value is reached 24 we need to make
25:22
these changes in the mongoose glue
25:24
source file too also change the index
25:28
variable to 1 hour that is all the
25:31
changes we need to make let's build the
25:33
project
25:35
now there is one thing left in the
25:37
mongoose glue header file the mg timer
25:41
is still configured to run every minute
25:44
let's modify it to run every hour so
25:46
that the ui updates once every hour all
25:49
right let's build and flash the project
25:52
to the board i cannot run the video for
25:55
hours to show the changes so here is the
25:58
picture showing the data for 10 hours
26:01
you can see the reading on the graph
26:02
displayed every hour so this way we can
26:06
log our weather data into the ui you can
26:09
even increase the array sizes to log the
26:11
data for an entire month so we saw how
26:15
to use the ethernet using mongus library
26:17
to create a weather station we will
26:20
continue with another project in the
26:22
next video of this series this is it for
26:26
the video i hope the concept was clearly
26:29
explained in the video you can download
26:32
the project from the link in the
26:34
description leave comments in case of
26:36
any doubt keep watching and have a nice
26:40
day ahead