Up next in 10
STM32 ETHERNET using Mongoose #2 || Use Wizard to create Web UI on STM32
Apr 15, 2025
Mongoose Homepage :::: https://mongoose.ws/u/yctech2 ________________________________________________________________________________________ Mongoose Wizard :::: https://mongoose.ws/wizard/#/ Mongoose PART1 :::: https://youtu.be/tg0HCifEUR4 Mongoose PART3 :::: https://youtu.be/aj4JGlvtznk STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/stm32-ethernet-using-mongoose-part-2/ ________________________________________________________________________________________ ******* 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 second video in the SDM32
0:15
Ethernet series using the Mongus library
0:18
in the previous video we introduced the
0:21
Mongus library and demonstrated how to
0:24
set up Ethernet functionality on SDM32
0:27
microcontrollers
0:29
today we will focus on the Mongoose
0:31
Wizard a tool designed to simplify the
0:34
creation of professional web interfaces
0:36
without requiring advanced design or
0:38
front-end development
0:40
skills here's what we'll cover how to
0:44
use the Mongoose wizard to create web
0:47
interfaces how to link interface
0:49
elements to SDM32 components for
0:52
functional integration
0:55
before diving into the wizard let's
0:57
briefly review the features and
0:59
capabilities of the Mongoose
1:01
library mongoose is a network library
1:04
for
1:05
CC++ it provides event-driven
1:08
non-blocking APIs for TCP UDP HTTP
1:13
websocket MQTT and other
1:16
protocols it is designed for connecting
1:19
devices and bringing them online
1:22
on the market since 2004 used by a vast
1:25
number of open-source and commercial
1:27
products it even runs on the
1:29
International Space
1:31
Station mongoose makes embedded network
1:34
programming fast robust and easy the
1:38
Mongoose wizard simplifies the creation
1:41
of professional interfaces without
1:43
requiring design or front-end expertise
1:46
it supports user authentication with
1:49
multiple access levels which can be
1:51
enabled effortlessly via a single
1:54
checkbox additionally dashboards are
1:57
kept up to date with a built-in device
1:59
connection indicator on the
2:01
toolbar ui controls such as drop-downs
2:04
toggles and inputs can be easily mapped
2:07
to see structures by adjusting getter
2:09
and setter functions
2:11
conditional display functionality allows
2:14
data exceeding predefined thresholds to
2:16
be highlighted using alternative
2:19
styles moreover Mongus provides seamless
2:23
firmware update support for
2:24
microcontrollers like
2:26
SDM32 ESB32 and others requiring no
2:30
additional
2:31
configuration let's start this tutorial
2:34
by creating the web interface
2:37
first click on this button start
2:40
building web UI this is the UI I was
2:43
testing
2:45
previously let's create a new UI we can
2:49
integrate the UI into an existing
2:51
project but here I will create a new
2:54
project now first select the directory
2:57
where you want to store the
2:59
project i am creating a new folder for
3:02
it now choose the target board they have
3:06
listed pretty much all the SDM32 boards
3:09
which have Ethernet
3:11
functionality in case you are using a
3:14
custom board just select any board from
3:16
here and I will explain how to integrate
3:19
it at the end of this video i am using
3:22
the H745 discovery board so I will
3:26
choose the same choose the build
3:28
environment as cube
3:30
IDE and we will not use the RTOS for now
3:36
next we need to choose the dashboard we
3:38
want i am selecting the one with a
3:41
single LED click finish to complete the
3:44
project setup all right here we have our
3:50
dashboard on the left side there is a
3:53
sidebar where we can add multiple pages
3:56
on each page we can add multiple
3:59
elements the page content tab shows the
4:03
hierarchy of the elements the UI element
4:06
tab contains all the elements we can add
4:08
to the UI we have elements like blocks
4:12
inputs display and buttons the rest API
4:16
tab contains the API endpoints the
4:20
endpoints will be connected to the
4:21
elements which will then be used to call
4:24
custom actions you can control the color
4:27
of the UI using the
4:29
stylesheet we can also define custom CSS
4:32
classes here info logs contain the logs
4:36
and the code tab contains the final code
4:39
for the project you can see it has a
4:42
similar structure to how the cube
4:44
generates it let's come back to the page
4:47
elements as we will add some more
4:49
elements to this page the H745 discovery
4:53
has two LEDs on board so I am going to
4:56
add one more LED control button to do so
5:00
first I am adding a container inside the
5:02
first container itself then I am adding
5:06
a text and a toggle button for the LED
5:09
let's rename the LED one to LED red and
5:12
the second text to LED
5:17
green let me resize it so that both the
5:20
buttons look symmetrical all right now
5:23
we have some error in the second toggle
5:26
button if you check the info logs you
5:29
will see that the error is due to the
5:31
invalid API endpoint the endpoint for
5:34
the first button is already defined in
5:36
the rest API tab but it is not defined
5:39
for the second one here you can see the
5:42
API name is set to LEDs and it is of
5:45
type data this data field actually maps
5:48
a web UI panel to a C structure the
5:52
first element of this structure is LED 1
5:55
and it is a boolean type variable let's
5:58
change its name to LED red and the type
6:01
is still boolean the default value is
6:04
set to false let's add one more element
6:07
to this structure LED green it is also a
6:11
boolean type and I am setting the
6:14
default value of this variable to true
6:17
now go back to the page elements and
6:20
click on the toggle button element here
6:23
in the API variables you can see all the
6:26
variables we created in the rest API
6:29
section this button is associated with
6:31
the red LED so select the same API
6:35
variable similarly select the green LED
6:38
API variable for the green LED button
6:42
you can see the button is in the on
6:43
state this is because I configured its
6:46
default value to true if I set this
6:49
variable to false the button will also
6:51
be in the off state by default below the
6:54
attributes you can see the generated
6:57
code for this end point this part will
7:00
be generated in the glue header file
7:02
which will basically be a readonly file
7:05
we can modify the code in the glue
7:07
source file where we can connect these
7:09
variables with the LED on the dev board
7:13
all right our LED panel is ready now I
7:17
am going to add one more container for
7:19
the slider we will use the slider to
7:22
vary the PWM hence controlling the
7:24
brightness of a LED we don't need all
7:27
these elements so let's delete them
7:31
let's give this container a name PWM
7:34
value the PWM value is going to vary
7:37
between 0 to
7:39
255 here we will add a
7:45
slider now we need to create an endpoint
7:48
for this slider too let's add a new API
7:53
endpoint i am naming it PWM and this is
7:56
also a data type hence it will be a
7:59
structure in C value will be an element
8:02
of this structure which is an integer
8:04
type variable with 42 as the default
8:07
value you can see the code generated for
8:10
this endpoint as well now let's go back
8:13
to the slider and change its API
8:16
variable to PWM value you can see the
8:19
default value has been set to the
8:24
slider i am going to add one last
8:27
element here let's add a container first
8:31
I am adding a gauge which will display
8:33
the ADC value now let's create one more
8:37
API endpoint for the gauge just like PWM
8:41
value this structure will be ADC value
8:45
now set the correct API in the gauge
8:47
setting the transparent background does
8:50
not look good let's change the
8:52
background color of the gauge all right
8:56
this looks fine we want the gauge to
8:58
update along with the ADC value we can
9:02
do it in two different ways the first
9:05
method uses the websocket to send
9:07
frequent updates to specific elements on
9:09
the UI while the second method uses a
9:12
timer to auto refresh the entire UI
9:16
since we want to only update specific
9:18
elements on the UI it is better to go
9:21
with the
9:22
websocket to implement the websocket
9:25
first enable it on the settings page now
9:28
open the REST API section and name the
9:31
API endpoint as websocket
9:34
the value will still remain the element
9:36
of this websocket structure let's go
9:39
back to the gauge and set the correct
9:42
API variable here once the websocket
9:45
variable is set in the element it will
9:47
disappear from the rest
9:49
API although to test the websocket you
9:52
can use this websocket message generator
9:56
here we just need to enter the websocket
9:58
element along with the value we want to
10:01
transmit this is the structure of the
10:03
websocket message and we need to create
10:06
something similar in our code to send
10:08
websocket
10:09
updates one very important thing before
10:12
we finish this design we need to turn on
10:15
the autosave of all the inputs or
10:17
buttons we have added if the autosave is
10:20
off you need to create a separate submit
10:23
button to submit the changes made to the
10:25
UI during the runtime
10:27
autosave will automatically submit the
10:30
changes that is all we will design for
10:33
now we have two buttons to control the
10:36
LEDs one input as a slider to vary the
10:39
PWM and one display as a gauge to
10:42
display the ADC value let's generate the
10:45
project by clicking this generate
10:48
button you can also save the wizard in a
10:51
separate JSON file which you can load
10:53
later or share to someone else
10:58
this is our project folder we will load
11:02
it in the cube ID so let's open the IDE
11:05
first now click on import projects
11:09
browse the project folder and click open
11:12
all right the project has been loaded in
11:14
the cube IDE and here is the main
11:19
file let's build this project once there
11:23
are no errors during the build here you
11:26
can see a separate mongoose folder which
11:29
contains all the mongoose related files
11:32
we have the mongoose configuration file
11:35
the same as we created in the previous
11:37
video by default mongoose uses the DHCP
11:42
and you can get the IP address in the
11:44
serial console i have explained it in
11:47
the previous video since I am directly
11:50
connecting the Ethernet cable to the
11:52
computer I need to use a static IP
11:55
instead let's uncomment this part the
11:59
default static IP is set to
12:04
192.168.0.10 let's flash this project to
12:07
the board to check if everything is
12:09
working fine the project has been loaded
12:12
to the board let's open the browser and
12:16
navigate to the defined IP address
12:19
you can see the web UI has been loaded
12:21
here the respective components on the
12:24
board will not work as we have not
12:26
connected them with the UI elements yet
12:29
but the UI is loading fine and so we can
12:32
proceed with our code in the IDE let's
12:35
open the OC file to edit the cube
12:41
configuration let's open the board
12:43
schematic to see the available
12:46
pins
12:48
here you can see the board has two LEDs
12:52
green and
12:55
red the green LED is connected to the
12:58
pin PJ2 while the red one is connected
13:01
to the pin
13:06
PI13 let's search for these pins and set
13:10
them as output here they are already
13:13
configured as the output pins
13:16
now go to the GPIO
13:19
configuration if you are using a dual
13:21
core board make sure to assign the pins
13:24
to the correct code i am using the
13:27
Ethernet on M7 core hence I am assigning
13:30
both pins to M7 now we need to set the
13:33
pins for PWM and
13:36
ADC i am connecting the SD mode plus
13:40
which comes along with the board this is
13:42
basically an extension for connecting
13:44
various devices to the
13:48
MCU it has a PWM pin which is connected
13:52
to
13:52
PA3 let's search for this pin in the
13:55
cube this pin is connected to timer 2
13:58
channel 4 timer 5 channel 4 and timer 15
14:02
channel 2 let's set it as the timer 2
14:06
channel 4 pin now we will configure the
14:09
timer 2 let's enable this timer and set
14:13
the clock source as the internal clock
14:16
now enable the PWM generation on channel
14:19
4 we don't need to worry too much about
14:22
the
14:23
frequency timer 2 is connected to APB1
14:26
bus and by default it is running at 200
14:30
MGHertz so I am using a pre-scaler of
14:33
2,00 to bring the clock down to 100 kHz
14:37
the auto reload value is an important
14:40
parameter just set it to the maximum PWM
14:44
value that is 100 at the value of 100
14:48
the duty will be 100% and the brightness
14:51
will be maximum that's all for the timer
14:56
now we will configure the ADC the SDO
14:59
Plus has an ADC pin which is connected
15:02
to
15:03
PA4 let's search for this pin in the
15:05
cube it is connected to ADC1 channel 18
15:10
let's enable the ADC1 channel 18 in the
15:14
singleended mode i am going to use the
15:17
ADC in the polling mode so I am leaving
15:20
the configuration to default there is
15:23
some clock issue with the
15:24
ADC let's set it to per clock which is
15:28
64
15:29
MGHertz i don't need a specific clock as
15:32
I am going to use a potentiometer here
15:36
all right that is all we need to
15:37
configure click save to generate the
15:43
project the mongus glue source file is
15:46
where we will connect the UI to our
15:48
board it has functions to read and write
15:51
the LED data and PWM data glue set LED
15:55
function will write the LED data into
15:58
the LED structure now we will read the
16:01
first element of this structure that is
16:03
LED green if the value of this element
16:07
is one we will reset the pin
16:09
PJ2 i am resetting the pin because the
16:13
pin PJ2 is connected to the negative
16:15
terminal of the LED so resetting the pin
16:19
will turn the LED on and setting it will
16:21
turn it off otherwise if the element has
16:25
the value zero we will set the pin to
16:27
turn the LED off write a similar
16:30
condition for the red LED as well that
16:33
is pin PI13
16:35
next we need to deal with the PWM data
16:39
this data should be transferred to the
16:41
capture compare register of the timer
16:43
too to do this we will create a new
16:46
function set PWM whose parameter will be
16:50
an integer type inside this function we
16:53
will simply set the value to the capture
16:55
compare register 4 of the timer 2 let's
16:59
also create a function to read the ADC
17:01
value inside this function we will read
17:04
the ADC in polling mode the steps are as
17:08
usual start the ADC poll for the
17:11
conversion to complete read the data and
17:14
finally stop the
17:19
ADC we will use this map function to
17:22
convert the 16 bit ADC value into a
17:25
range from 0 to 100 the converted value
17:29
will be stored in this val variable
17:31
which we will return at the end now go
17:34
back to the glue source file include the
17:37
main header file here now define the set
17:40
PWM as an external function as it is
17:44
already defined in the main file the
17:46
glue set PM function reads the data from
17:49
the slider and stores it in the PWM
17:52
structure we will simply call the set
17:54
PWM function here and pass the value of
17:57
the PWM to the parameter of this
18:00
function this value is the element of
18:03
the PWM structure which is defined in
18:05
the UI we have finished integrating the
18:09
LEDs and the PWM with our board now
18:13
comes the
18:14
ADC we have used the websocket for the
18:17
ADC value hence we need to create a
18:19
websocket call back to transmit those
18:21
values
18:23
let's first start the timer 2 channel 4
18:25
in the PWM mode you can find a websocket
18:29
example in the doc
18:33
itself here is the websocket call back
18:36
and this is the handler which calls this
18:38
call back every 200
18:41
milliseconds you can set this time
18:43
according to the UI requirement so let's
18:46
define a websocket handler which will
18:49
call the call back every 200
18:51
milliseconds now we need to define the
18:54
call back outside the main
19:03
function this is the websocket message
19:05
structure it should be in this format
19:08
with the key being the API attribute we
19:11
created in the UI and the value is the
19:13
actual value we want to send instead of
19:16
this format specifier here we can input
19:19
the key which is value as defined in the
19:23
UI and the actual value is an integer
19:26
variable which is returned by the read
19:28
ADC
19:32
function that is it let's build and
19:35
flash the project for the
19:37
board now open the browser again and
19:40
navigate to the IP address you can see
19:43
the discovery board on the right bottom
19:46
corner i am turning the red LED on the
19:50
red LED on the board is turned on the
19:53
green LED is also turned on now the red
19:57
LED has turned off the green LED is also
20:02
turned off now the LEDs are responding
20:05
well with the UI let's try varying the
20:09
PWM you can see the brightness of the
20:11
green LED connected externally when the
20:15
PWM value is zero the LED is turned off
20:20
now the brightness of the LED increases
20:22
with the increase in the PWM value at
20:26
100 the brightness is maximum so the
20:29
slider's input is working fine as well
20:32
let's check the ADC now here I am
20:36
rotating the potentiometer and you can
20:39
see the gauge value is changing
20:41
accordingly the potentiometer has
20:43
reached the end and the gauge also shows
20:46
a value of 100 here when rotated in the
20:50
opposite direction the gauge's value
20:52
also shows the reduction all the UI
20:55
elements have been linked with different
20:57
components on the dev board and they all
21:00
are working fine before we finish this
21:03
video let's explore one more interesting
21:05
feature of this web UI the login
21:08
authentication you can enable it in the
21:11
settings page it will basically lock the
21:14
UI until the correct login credentials
21:17
are provided the login credentials are
21:20
stored in the glue source file itself we
21:23
can modify the credentials as per our
21:25
wish it also supports various privileged
21:28
levels based on the credentials where
21:30
the higher levels are more privileged
21:32
than the lower for example the user has
21:36
an access level of three while the admin
21:38
has the access level of seven now we
21:41
have edited the UI if we simply generate
21:45
the project again it will overwrite the
21:47
changes we made in our project to
21:50
prevent it we can choose the option to
21:52
integrate into an existing project even
21:55
after this option is selected the glue
21:58
source file will be overwritten so let's
22:01
copy the changes we made in this glue
22:03
source file now click to generate the
22:06
code again you can see a new glue file
22:09
has been generated and it contains the
22:12
login authentication code although our
22:15
modified data has been overwritten so we
22:18
will paste it here
22:20
let's modify these login
22:22
credentials i am leaving the username to
22:24
admin and setting the password to
22:27
password let's build the project once we
22:31
have some errors here regarding the GPIO
22:35
pins i forgot to include the main header
22:38
file so let's include it now all right
22:41
all the errors are gone so let's flash
22:43
the project to the board again
22:50
let's refresh this
22:54
page now we have the login
22:56
authentication page being displayed
22:59
let's enter the credentials that we
23:01
stored in the glue source file all right
23:04
we have entered the UI
23:07
successfully everything is working fine
23:09
here after the work is done we can log
23:12
out from the UI page and it will go back
23:15
to the authentication page again so the
23:18
login authentication page works fine as
23:21
well also we saw how we can edit the UI
23:24
without needing to generate the entire
23:26
project again we generated the project
23:29
from the wizard itself but let's say
23:32
that you want to implement the wizard on
23:34
a custom board which is not listed in
23:37
the wizard in that case you must first
23:40
go through the first video of this
23:42
series and implement the mongoose
23:45
library here I am importing the project
23:48
created in the first video this project
23:51
had no relation to the wizard we simply
23:53
implemented the mongus library by
23:56
copying the mongus source and header
23:58
files let's delete those files first
24:02
delete the mongus source and header
24:04
files along with the configuration file
24:06
as well
24:14
in the main file delete the run mongus
24:16
function and the event handler we
24:18
created in the previous project leave
24:22
the rest of these functions here i
24:24
mentioned in the beginning that you can
24:26
simply select any random board in the
24:28
wizard and create a project for it open
24:32
the project folder generated by the
24:34
mongoose wizard copy the mongus folder
24:37
from this generated project and paste it
24:40
in your project i am copying it inside
24:43
the drivers folder we only need the
24:46
mongoose folder generated in the project
24:49
and this folder is mostly independent of
24:51
the board architecture i said mostly
24:54
because the board architecture is only
24:56
defined in the mongoose configuration
24:59
file so you should use the same
25:01
configuration file that you created in
25:04
the previous project
25:06
now open the project properties go to
25:08
CC++ build settings under the GCC
25:13
compiler select include path here we
25:17
will add the path to the mongoose folder
25:19
we just copied click apply and close
25:22
this window let's build the project to
25:25
check for errors all right there are no
25:28
errors so far include the mongus glue
25:31
header file here and call the function
25:34
run mongus inside the main function
25:38
let's build the project
25:40
now there is an error due to the set pwm
25:45
function this function is actually
25:47
defined as an external function in the
25:49
mongus glue source file but I haven't
25:52
defined it in the main file let me
25:55
remove all the reference of this
25:56
function from the glue file i am only
25:59
testing if the wizard runs fine although
26:02
I am not connecting the UI elements to
26:04
the board
26:05
components the project builds fine now
26:08
let's flash it to the
26:18
board all right let's refresh this page
26:21
again we got the authenticator page
26:25
let's input the credentials the web UI
26:28
is loading fine this means we can use
26:31
the UI on any
26:33
STDM32based dev board irrespective of if
26:36
it is defined in the wizard
26:37
configuration or not we just need to
26:40
copy the generated mongoose folder in
26:42
our project and use the correct
26:44
configuration in the mongus config file
26:47
the mongoose wizard offers a lot more
26:50
features it supports MQTT client SNTP
26:54
client Modbus TCP server etc we will
26:58
explore these features in future videos
27:02
that is it for the video i hope you
27:05
understood how to use the wizard to
27:07
create a web UI and how to connect
27:09
various elements of the UI to our dev
27:11
board we will see some applications
27:14
based on this library in the next videos
27:17
of this series you can download the
27:20
project from the link in the description
27:23
leave comments in case of any doubt keep
27:26
watching and have a nice day ahead
#Networking
#Programming