{"id":4263,"date":"2026-03-14T12:35:07","date_gmt":"2026-03-14T12:35:07","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=4263"},"modified":"2026-03-14T12:35:09","modified_gmt":"2026-03-14T12:35:09","slug":"stm32-and-mongoose-web-server-part-4-create-web-ui","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=4263","title":{"rendered":"STM32 and Mongoose Web server Part 4:\u00a0 Create Web UI"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-1024x683.png\" alt=\"\" class=\"wp-image-4264\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-1024x683.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-300x200.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-768x512.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-1150x767.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-750x500.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-400x267.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM-250x167.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/ChatGPT-Image-Jan-17-2026-at-10_13_02-AM.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In this fourth part of the guide, we move beyond simple responses and begin building a basic web user interface that runs directly from the STM32. The web assets will be hosted by the Mongoose HTTP server, demonstrating how embedded devices can provide interactive configuration and monitoring through a browser.<\/p>\n\n\n\n<p>In this guide, we shall cover the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creating the web UI.<\/li>\n\n\n\n<li>Integrate the web UI into the project.<\/li>\n\n\n\n<li>Firmware development.<\/li>\n\n\n\n<li>Results.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Creating the Web UI:<\/h2>\n\n\n\n<p>First, head to this website called mongoose wizard from <a href=\"https:\/\/mongoose.ws\/wizard\/#\/settings\" data-type=\"link\" data-id=\"https:\/\/mongoose.ws\/wizard\/#\/settings\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p>Next, select the directory and make sure it is empty.<\/p>\n\n\n\n<p>Also, set the target architecture to be STM32 (I&#8217;ve selected F767 Nucleo), IDE to STM32CubeIDE and bare metal. We are not interested to use RTOS in this guide.<\/p>\n\n\n\n<p>Click on next<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"429\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-1024x429.jpg\" alt=\"\" class=\"wp-image-4265\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-1024x429.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-300x126.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-768x322.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-1536x644.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-1150x482.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-750x315.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-400x168.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11-250x105.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-11.jpg 1688w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, select LED toggle and click on next as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"418\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-1024x418.jpg\" alt=\"\" class=\"wp-image-4266\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-1024x418.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-300x122.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-768x313.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-1536x626.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-1150x469.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-750x306.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-400x163.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48-250x102.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-42-48.jpg 1692w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The UI wizard shall be opened.<\/p>\n\n\n\n<p>Next, add a container to the LED Control Panel as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-1024x563.jpg\" alt=\"\" class=\"wp-image-4267\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-1024x563.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-300x165.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-768x422.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-1536x845.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-2048x1126.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-1150x633.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-750x413.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-400x220.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-44-22-250x138.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Add Text and set it to LED3 as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-1024x471.jpg\" alt=\"\" class=\"wp-image-4268\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-1024x471.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-300x138.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-768x354.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-1536x707.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-2048x943.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-1150x529.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-750x345.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-400x184.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-01-250x115.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, add Toggle button as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"419\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-1024x419.jpg\" alt=\"\" class=\"wp-image-4269\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-1024x419.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-300x123.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-768x314.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-1536x628.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-2048x837.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-1150x470.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-750x307.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-400x164.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-45-56-250x102.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, from REST API, expand leds endpoint and add the following attribute as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name to led3<\/li>\n\n\n\n<li>Type to bool.<\/li>\n\n\n\n<li>Sample Value to false.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"314\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-1024x314.jpg\" alt=\"\" class=\"wp-image-4271\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-1024x314.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-300x92.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-768x235.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-1536x471.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-2048x628.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-1150x353.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-750x230.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-400x123.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-50-25-250x77.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>From Page content, select toggle for LED3 and set API variable to leds.led3 as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"172\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-1024x172.jpg\" alt=\"\" class=\"wp-image-4273\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-1024x172.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-300x51.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-768x129.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-1536x259.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-2048x345.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-1150x194.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-750x126.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-400x67.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-55-59-250x42.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, add a container next to LED control panel and add Panel as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"610\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-1024x610.jpg\" alt=\"\" class=\"wp-image-4272\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-1024x610.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-300x179.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-768x458.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-1536x915.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-2048x1220.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-1150x685.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-750x447.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-400x238.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_13-59-17-250x149.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Delete the content of the panel and name to PWM 0-100 and add slider as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-1024x300.jpg\" alt=\"\" class=\"wp-image-4274\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-1024x300.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-300x88.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-768x225.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-1536x450.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-2048x600.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-1150x337.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-750x220.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-400x117.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-00-52-250x73.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, from REST API, create a new end points with the following parameters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name is PWM<\/li>\n<\/ul>\n\n\n\n<p>For Attributes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Attribute Name to PWM.<\/li>\n\n\n\n<li>Type to int.<\/li>\n\n\n\n<li>Sample value to any value (0 in this case).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"234\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-1024x234.jpg\" alt=\"\" class=\"wp-image-4276\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-1024x234.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-300x69.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-768x176.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-1536x351.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-2048x468.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-1150x263.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-750x172.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-400x91.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-01-250x57.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, from Page content select the slider and set the API variable to PWM.duty as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"261\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-1024x261.jpg\" alt=\"\" class=\"wp-image-4277\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-1024x261.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-300x77.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-768x196.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-1536x392.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-2048x523.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-1150x293.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-750x191.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-400x102.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-06-46-250x64.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, add new container and add a gauge as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"254\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-1024x254.jpg\" alt=\"\" class=\"wp-image-4278\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-1024x254.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-300x74.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-768x190.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-1536x381.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-2048x508.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-1150x285.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-750x186.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-400x99.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-08-57-250x62.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here, I set the background to white.<\/p>\n\n\n\n<p>Create new REST API with the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name as adc_value.<\/li>\n<\/ul>\n\n\n\n<p>Attributes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name as value.<\/li>\n\n\n\n<li>Type to int.<\/li>\n\n\n\n<li>Sample value to 0.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"312\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-1024x312.jpg\" alt=\"\" class=\"wp-image-4279\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-1024x312.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-300x91.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-768x234.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-1536x468.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-2048x624.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-1150x350.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-750x229.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-400x122.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-10-09-250x76.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, from Page content, select gauge and set API variable to adc_value.value as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"273\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-1024x273.jpg\" alt=\"\" class=\"wp-image-4280\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-1024x273.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-300x80.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-768x205.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-1536x409.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-2048x546.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-1150x306.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-750x200.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-400x107.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-12-13-250x67.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, from Settings, enable Websocket as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"173\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-1024x173.jpg\" alt=\"\" class=\"wp-image-4285\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-1024x173.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-300x51.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-768x130.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-1536x260.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-2048x347.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-1150x195.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-750x127.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-400x68.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-24-48-250x42.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That all for the UI, click on generate C\/C++ code as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"150\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-1024x150.jpg\" alt=\"\" class=\"wp-image-4281\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-1024x150.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-300x44.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-768x113.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-1536x225.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-2048x301.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-1150x169.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-750x110.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-400x59.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-14-05-250x37.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Integrate theWeb UI Into the Project:<\/h2>\n\n\n\n<p>First take a copy of the older project.<\/p>\n\n\n\n<p>Open the generated project and copy the mongoose to the driver folder as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"805\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-1024x805.jpg\" alt=\"\" class=\"wp-image-4282\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-1024x805.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-300x236.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-768x603.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-1536x1207.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-2048x1609.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-1150x904.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-750x589.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-400x314.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-11-250x196.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, make sure to delete the mongoose related files in Core\/inc and Core\/src.<\/p>\n\n\n\n<p>Please note that you need to copy the content of mongoose_config.h from the older version into the new generated mongoose config header which is located in mongoose folder.<\/p>\n\n\n\n<p>Next, right click on the project and click on properties.<\/p>\n\n\n\n<p>Go to settings, MCU\/MPU GCC complier and click add in include paths as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"717\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-1024x717.jpg\" alt=\"\" class=\"wp-image-4283\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-1024x717.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-300x210.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-768x538.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-1536x1075.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-2048x1433.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-1150x805.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-750x525.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-400x280.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_14-08-50-250x175.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Select Workspace and add mongoose folder as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39-1024x335.jpg\" alt=\"\" class=\"wp-image-4284\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39-1024x335.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39-300x98.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39-768x251.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39-750x245.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39-400x131.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39-250x82.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-21-39.jpg 1052w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click on OK then Apply and close.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Thats all for the integration of the web server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Firmware Development:<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>In main.c file, in user code begin includes include the following header file:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;C&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#include &quot;mongoose_glue.h&quot;<\/pre><\/div>\n\n\n\n<p>Note: remove the old mongoose.h inclusion, it is no longer needed.<\/p>\n\n\n\n<p>Since we shall use websocket, we need a handler for the websocket. In user code begin 0 declare the following function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;C&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">static void my_getter(struct real_time_data *data)\n{\n\t\/\/TODO\n}<\/pre><\/div>\n\n\n\n<p>This will be handler in part 5.<\/p>\n\n\n\n<p>In user code begin 2 in main function:<\/p>\n\n\n\n<p>Initialize the mongoose as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;C&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">mongoose_init();<\/pre><\/div>\n\n\n\n<p>Start the http handler and ws responder as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;C&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">  mongoose_set_http_handlers(&quot;real_time_data&quot;, my_getter, NULL);\n  mongoose_add_ws_reporter(200, &quot;real_time_data&quot;);<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>In user code begin 3 in while 1 loop:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;C&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">mongoose_poll();<\/pre><\/div>\n\n\n\n<p>Thats all for the firmware.<\/p>\n\n\n\n<p>Save, build and run the project as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"34\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-1024x34.jpg\" alt=\"\" class=\"wp-image-4132\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-1024x34.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-300x10.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-768x26.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-1536x51.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-1150x38.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-750x25.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-400x13.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13-250x8.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2025\/12\/2025-12-31_11-12-13.jpg 1986w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Results:<\/h2>\n\n\n\n<p>Connect the your board to the router and type the address of the board into the browser.<\/p>\n\n\n\n<p>You will get the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"187\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-1024x187.jpg\" alt=\"\" class=\"wp-image-4286\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-1024x187.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-300x55.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-768x140.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-1536x280.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-2048x373.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-1150x210.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-750x137.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-400x73.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2026\/03\/2026-03-14_15-34-05-250x46.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In next part, we shall connect the UI to the peripherals like LEDs and ADC.<\/p>\n\n\n\n<p>Stay tuned.<\/p>\n\n\n\n<p>Happy coding \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this fourth part of the guide, we move beyond simple responses and begin building a basic web user interface that runs directly from the STM32. The web assets will be hosted by the Mongoose HTTP server, demonstrating how embedded devices can provide interactive configuration and monitoring through a browser. In this guide, we shall [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,11,12],"tags":[],"class_list":["post-4263","post","type-post","status-publish","format-standard","hentry","category-embedded-systems","category-peripheral-drivers","category-stm32"],"_links":{"self":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/4263"}],"collection":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4263"}],"version-history":[{"count":1,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/4263\/revisions"}],"predecessor-version":[{"id":4287,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/4263\/revisions\/4287"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}