{"id":434,"date":"2022-09-09T15:00:59","date_gmt":"2022-09-09T15:00:59","guid":{"rendered":"https:\/\/www.bleuio.com\/blog\/?p=434"},"modified":"2022-09-09T15:25:25","modified_gmt":"2022-09-09T15:25:25","slug":"bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser","status":"publish","type":"post","link":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/","title":{"rendered":"Bluetooth Low Energy based RGB LED Strip color  control from a web browser and STM32"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">1. Introduction<\/h2>\n\n\n\n<p>This project is about\u00a0<strong>Bluetooth Low Energy based RGB LED Strip Color Control\u00a0<\/strong>from a web browser and STM 32. The LEDs light strip can also be controlled wirelessly via a BLE scanning App using IOS or Android. With the received data, we decide which color of the RGB strip to activate.<\/p>\n\n\n\n<p>You will need two dongles, one connected to the Nucleo board and one connected to a computer to control from web browser. The web script is also available on GitHub. <br><br>When the BleuIO Dongle is connected to the Nucleo boards USB port the STM32 will recognize it and directly start advertising. This allows the other Dongle to connect to it.<\/p>\n\n\n\n<p>It will also accept 3 different inputs from the UART:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>input<\/th><th>result<\/th><\/tr><\/thead><tbody><tr><td>0<\/td><td>Send ATI (Request device information) command to BlueIO Dongle.<\/td><\/tr><tr><td>1<\/td><td>Manually turn the LED on<\/td><\/tr><tr><td>2<\/td><td>Manually turn the LED off<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>We have used a STM32 Nucleo-144 development board with STM32H743ZI MCU (STM32H743ZI micro mbed-Enabled Development Nucleo-144 series ARM\u00ae Cortex\u00ae-M7 MCU 32-Bit Embedded Evaluation Board) and the <strong>WS2812<\/strong>, a intelligent control LED light source, for this example.<\/p>\n\n\n\n<p>Connect the LED to the Nucleo Board by connecting:<br><br><strong>4-7 VDC<\/strong> to <strong>5V<\/strong><br><br><strong>GND<\/strong> to any <strong>GND<\/strong><br><br><strong>DIN<\/strong> to <strong>PE9<\/strong><\/p>\n\n\n\n<p>On the Nucleo NUCLEO-H743ZI2:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"538\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/pinouts_nucleo.png\" alt=\"\" class=\"wp-image-436\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/pinouts_nucleo.png 728w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/pinouts_nucleo-300x222.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<p>Note : If you want to use another setup you will have to make sure it support USB Host and beware that the GPIO setup might be different and may need to be reconfigured in the .ioc file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Project requirments<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Two BleuIO dongles (<a href=\"https:\/\/www.bleuio.com\/\">https:\/\/www.bleuio.com\/<\/a>)<\/li><li><span style=\"color: initial;\">A board with a STM32 Microcontroller with a USB port. (A Nucleo-144 development board: NUCLEO-H743ZI2, is used for this project. (<a href=\"https:\/\/www.st.com\/en\/evaluation-tools\/nucleo-h743zi.html\">https:\/\/www.st.com\/en\/evaluation-tools\/nucleo-h743zi.html<\/a>)<\/span><\/li><li>To connect the dongle to the Nucleo board a &#8220;USB A to Micro USB B&#8221;-cable with a USB A female-to-female adapter can be used.)<\/li><li>STM32CubeIDE (<strong>https:\/\/www.st.com\/en\/development-tools\/stm32cubeide.html<\/strong>)<\/li><li>An <strong>WS2812<\/strong> RGB LED<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3. About the Code<\/h2>\n\n\n\n<p>The source code is available at <br><a href=\"https:\/\/github.com\/smart-sensor-devices-ab\/stm32_bleuio_rgb_led_example\">https:\/\/github.com\/smart-sensor-devices-ab\/stm32_bleuio_rgb_led_example<\/a><\/p>\n\n\n\n<p>This project is based on another STM32 project (https:\/\/github.com\/smart-sensor-devices-ab\/stm32_bleuio_example) with the interface to the WS2812 <strong><a href=\"https:\/\/controllerstech.com\/interface-ws2812-with-stm32\/\">Interface WS2812 with STM32 by Controllers Tech<\/a><\/strong><\/p>\n\n\n\n<p>The DIN pin will be connected to TIM1 which need to be enabled in to the .ioc file:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"693\" height=\"416\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/enable_tim1.png\" alt=\"\" class=\"wp-image-437\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/enable_tim1.png 693w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/enable_tim1-300x180.png 300w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/figure>\n\n\n\n<p>Parameter Settings:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"492\" height=\"437\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/tim1_settings.png\" alt=\"\" class=\"wp-image-438\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/tim1_settings.png 492w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/tim1_settings-300x266.png 300w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/figure>\n\n\n\n<p>DMA for TIM1 will also be enabled:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"147\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/tim1_dma.png\" alt=\"\" class=\"wp-image-439\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/tim1_dma.png 491w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/tim1_dma-300x90.png 300w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/figure>\n\n\n\n<p>In main.c we will need to add a callback for TIM PWM Pulse Finished:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>void HAL_TIM_PWM_PulseFinishedCallback(TIM_HandleTypeDef *htim)\n{\n    HAL_TIM_PWM_Stop_DMA(&amp;htim1, TIM_CHANNEL_1);\n    datasentflag=1;\n}<\/code><\/pre>\n\n\n\n<p><br><br>In main.c there is also a functions for controlling the LED.<\/p>\n\n\n\n<p><strong>Set_LED()<\/strong> for changing the color of the individual LEDs.<\/p>\n\n\n\n<p><strong>Set_Brightness()<\/strong> for setting the brightness. A brightness value of 0 means the LED is turned off.<\/p>\n\n\n\n<p><strong>WS2812_Send()<\/strong> execute the changes we made to the LED.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>void Set_LED (int LEDnum, int Red, int Green, int Blue)\n{\n    LED_Data&#91;LEDnum]&#91;0] = LEDnum;\n    LED_Data&#91;LEDnum]&#91;1] = Green;\n    LED_Data&#91;LEDnum]&#91;2] = Red;\n    LED_Data&#91;LEDnum]&#91;3] = Blue;\n}\n\n#define PI 3.14159265\n\nvoid Set_Brightness (int brightness)  \/\/ 0-45\n{\n#if USE_BRIGHTNESS\n\n    if (brightness &gt; 45) brightness = 45;\n    for (int i=0; i&lt;MAX_LED; i++)\n    {\n        LED_Mod&#91;i]&#91;0] = LED_Data&#91;i]&#91;0];\n        for (int j=1; j&lt;4; j++)\n        {\n            float angle = 90-brightness;  \/\/ in degrees\n            angle = angle*PI \/ 180;  \/\/ in rad\n            LED_Mod&#91;i]&#91;j] = (LED_Data&#91;i]&#91;j])\/(tan(angle));\n        }\n    }\n\n#endif\n\n}\n\nvoid WS2812_Send (void)\n{\n    uint32_t indx=0;\n    uint32_t color;\n\n\n    for (int i= 0; i&lt;MAX_LED; i++)\n    {\n#if USE_BRIGHTNESS\n        color = ((LED_Mod&#91;i]&#91;1]&lt;&lt;16) | (LED_Mod&#91;i]&#91;2]&lt;&lt;8) | (LED_Mod&#91;i]&#91;3]));\n#else\n        color = ((LED_Data&#91;i]&#91;1]&lt;&lt;16) | (LED_Data&#91;i]&#91;2]&lt;&lt;8) | (LED_Data&#91;i]&#91;3]));\n#endif\n\n        for (int i=23; i&gt;=0; i--)\n        {\n            if (color&amp;(1&lt;&lt;i))\n            {\n                pwmData&#91;indx] = 60;  \/\/ 2\/3 of 90\n            }\n\n            else pwmData&#91;indx] = 30;  \/\/ 1\/3 of 90\n\n            indx++;\n        }\n\n    }\n\n    for (int i=0; i&lt;50; i++)\n    {\n        pwmData&#91;indx] = 0;\n        indx++;\n    }\n\n    HAL_TIM_PWM_Start_DMA(&amp;htim1, TIM_CHANNEL_1, (uint32_t *)pwmData, indx);\n    while (!datasentflag){};\n    datasentflag = 0;\n}<\/code><\/pre>\n\n\n\n<p><br><br>We also update the <strong>handleUartInput <\/strong>function so we can have manual control over the LED via the UART.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n  * @brief Simple uart input handler\n  * @retval None\n  *\/\nvoid handleUartInput(UARTCommandTypeDef cmd)\n{\n    switch(cmd)\n    {\n        case UART_RX_0:\n        {\n            \/\/ 0\n            uart_buf_len = sprintf(uart_tx_buf, \"\\r\\n(0 pressed)\\r\\n\");\n            HAL_UART_Transmit(&amp;huart3, (uint8_t *)uart_tx_buf, uart_buf_len, HAL_MAX_DELAY);\n            if(isBleuIOReady)\n            {\n                writeToDongle((uint8_t*)DONGLE_CMD_ATI);\n            } else\n            {\n                uart_buf_len = sprintf(uart_tx_buf, BLEUIO_NOT_READY_MSG);\n                HAL_UART_Transmit(&amp;huart3, (uint8_t *)uart_tx_buf, uart_buf_len, HAL_MAX_DELAY);\n            }\n            uartStatus = UART_RX_NONE;\n            break;\n        }\n        case UART_RX_1:\n        {\n            \/\/ 1\n            uart_buf_len = sprintf(uart_tx_buf, \"\\r\\n(1 pressed LED on!)\\r\\n\");\n            HAL_UART_Transmit(&amp;huart3, (uint8_t *)uart_tx_buf, uart_buf_len, HAL_MAX_DELAY);\n              Set_Brightness(40);\n              WS2812_Send();\n            uartStatus = UART_RX_NONE;\n            break;\n        }\n        case UART_RX_2:\n        {\n            \/\/ 2\n            uart_buf_len = sprintf(uart_tx_buf, \"\\r\\n(2 pressed LED off!)\\r\\n\");\n            HAL_UART_Transmit(&amp;huart3, (uint8_t *)uart_tx_buf, uart_buf_len, HAL_MAX_DELAY);\n              Set_Brightness(0);\n              WS2812_Send();\n\n            uartStatus = UART_RX_NONE;\n            break;\n        }\n        case UART_RX_NONE:\n        {\n            break;\n        }\n        default:\n        {\n            uartStatus = UART_RX_NONE;\n            break;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. How to setup project<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 Downloading the project from GitHub<\/h3>\n\n\n\n<p><strong>Get project <a href=\"https:\/\/github.com\/smart-sensor-devices-ab\/stm32_bleuio_rgb_led_example\">HERE<\/a><\/strong><br><br><a href=\"https:\/\/github.com\/smart-sensor-devices-ab\/stm32_bleuio_rgb_led_example\n\">https:\/\/github.com\/smart-sensor-devices-ab\/stm32_bleuio_rgb_led_example<br><\/a><br><br>Either clone the project, or download it as a zip file and unzip it, into your STM32CubeIDE workspace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 Importing as an Existing Project<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>From STM32CubeIDE choose File>Import\u2026<br><br><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"334\" height=\"536\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/import.png\" alt=\"\" class=\"wp-image-440\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/import.png 334w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/import-187x300.png 187w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Then choose General>Existing Projects into Workspace then click &#8216;Next >&#8217;<br><br><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"511\" height=\"543\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/existing_projects.png\" alt=\"\" class=\"wp-image-441\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/existing_projects.png 511w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/existing_projects-282x300.png 282w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Make sure you&#8217;ve choosen your workspace in &#8216;Select root directory:&#8217;<\/li><li>You should see the project &#8220;stm32_bleuio_rgb_led_example&#8221;, check it and click &#8216;Finish&#8217;.<br><br><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"463\" height=\"703\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/import_projects.png\" alt=\"\" class=\"wp-image-442\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/import_projects.png 463w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/import_projects-198x300.png 198w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">5. Running the example<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>In STMCubeIDE click the hammer icon to build the project.<\/li><li>Open up the &#8216;STMicroelectronics STLink Viritual COM Port&#8217; with a serial terminal emulation program like TeraTerm, Putty or CoolTerm.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Serial port Setup:<br><br>Baudrate: 115200<br><br>Data Bits: 8<br><br>Parity: None<br><br>Stop Bits: 1<br><br>Flow Control: None<\/p><\/blockquote>\n\n\n\n<ul class=\"wp-block-list\"><li>Connect the BleuIO Dongle before running the example<\/li><li>In STMCubeIDE click the green play button to flash and run it on your board. The first time you click it the &#8216;Run Configuration&#8217; window will appear. You can just leave it as is and click run.<\/li><li>You should be greeted by this welcome message:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Welcome to STM32 BleuIO RGB LED Example!\nPress 0 to run the ATI command\nPress 1 to manually turn on LED\nPress 2 to manually turn off LED<\/code><\/pre>\n\n\n\n<p>The LED will turn on briefly when starting up.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Wait until the message: &#8220;[BleuIO Dongle Ready]&#8221; is shown.<br><br><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"109\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/Ready_adv.png\" alt=\"\" class=\"wp-image-443\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/Ready_adv.png 660w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/Ready_adv-300x50.png 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>The LEDs should now turn off and you can now connect with the other dongle using the script.<\/li><\/ul>\n\n\n\n<p>You can also use the uart commands (0, 1 or 2):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Press 0 to get device information.<\/li><li>1 to turn on LED.<\/li><li>2 to turn off LED.<\/li><\/ul>\n\n\n\n<p>Dongle response will be printed to UART.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"access-sensor-data-from-a-web-browser\">Control the colors from a web browser<\/h2>\n\n\n\n<p>Connect the BleuIO dongle to the computer. Run the web script to connect to the other BleuIO dongle on the STM32. The web script is available inside the source file. Now we can control the colors wirelessly.<\/p>\n\n\n\n<p>For this script to work, we need<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.bleuio.com\/\">BleuIO USB dongle<\/a>&nbsp;connected to the computer.<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/bleuio\">BleuIO javascript library<\/a><\/li><li>Chrome 78 or later, and you need to enable the&nbsp;<strong>#enable-experimental-web-platform-features<\/strong>&nbsp;flag in&nbsp;<a href=\"chrome:\/\/flags\/\">chrome:\/\/flags<\/a><\/li><li>A web bundler \u2013 (<a href=\"https:\/\/parceljs.org\/\">parcel js<\/a>)<\/li><\/ul>\n\n\n\n<p>Create a simple Html file called index.html which will serve as the frontend of the script. This Html file contains some buttons that help connect and read advertised data from the remote dongle, which is connected to stm32.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html lang=\"en\">\r\n  &lt;head>\r\n    &lt;meta charset=\"UTF-8\" \/>\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    &lt;link\r\n      href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\"\r\n      rel=\"stylesheet\"\r\n      integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\"\r\n      crossorigin=\"anonymous\"\r\n    \/>\r\n    &lt;title>\r\n      Bluetooth controlled RGB LED Strip - Control color from web browser\r\n    &lt;\/title>\r\n  &lt;\/head>\r\n  &lt;body class=\"mt-5\">\r\n    &lt;div class=\"container mt-5\">\r\n      &lt;img\r\n        src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/themes\/bleuio\/images\/logo.png\"\r\n      \/>\r\n      &lt;h1 class=\"mb-5\">\r\n        Bluetooth controlled RGB LED Strip - Control color from web browser\r\n      &lt;\/h1>\r\n\r\n      &lt;div class=\"row\">\r\n        &lt;div class=\"col-md-4 pt-5\">\r\n          &lt;button class=\"btn btn-success mb-2\" id=\"connect\">Connect&lt;\/button>\r\n          &lt;form method=\"post\" id=\"sendMsgForm\" name=\"sendMsgForm\">\r\n            &lt;div class=\"mb-3\">\r\n              &lt;label for=\"msgToSend\" class=\"form-label\"\r\n                >Select color option&lt;\/label\r\n              >\r\n              &lt;select\r\n                class=\"form-select\"\r\n                aria-label=\"Default select example\"\r\n                name=\"msgToSend\"\r\n                id=\"msgToSend\"\r\n                required\r\n              >\r\n                &lt;option selected>Open this select menu&lt;\/option>\r\n                &lt;option value=\"L=0\">LED Off&lt;\/option>\r\n                &lt;option value=\"L=1\">LED On&lt;\/option>\r\n                &lt;option value=\"L=RED\">Set LED lights red&lt;\/option>\r\n                &lt;option value=\"L=GREEN\">Set LED lights green&lt;\/option>\r\n                &lt;option value=\"L=BLUE\">Set LED lights blue&lt;\/option>\r\n                &lt;option value=\"L=RAINBOW\">\r\n                  Set LEDs lights to different colors\r\n                &lt;\/option>\r\n              &lt;\/select>\r\n            &lt;\/div>\r\n\r\n            &lt;button type=\"submit\" class=\"btn btn-primary\">Submit&lt;\/button>\r\n          &lt;\/form>\r\n        &lt;\/div>\r\n        &lt;div class=\"col-md-8\">\r\n          &lt;img\r\n            src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/bluetooth-controlled-rgb-led-strip-collor-control.jpg\"\r\n          \/>\r\n        &lt;\/div>\r\n      &lt;\/div>\r\n    &lt;\/div>\r\n\r\n    &lt;script src=\"script.js\">&lt;\/script>\r\n  &lt;\/body>\r\n&lt;\/html>\r<\/code><\/pre>\n\n\n\n<p>Create a js file called script.js and include it at the bottom of the Html file. This js file uses the BleuIO js library to write AT commands and communicate with the other dongle.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import * as my_dongle from 'bleuio'\r\nconst dongleToConnect='&#91;0]40:48:FD:E5:2F:17'\r\ndocument.getElementById('connect').addEventListener('click', function(){\r\n  my_dongle.at_connect()\r\n  document.getElementById(\"connect\").disabled=true;\r\n  document.getElementById(\"sendMsgForm\").hidden=false;\r\n})\r\n\r\ndocument.getElementById(\"sendMsgForm\").addEventListener(\"submit\", function(event){\r\n    event.preventDefault()\r\n\r\n    \r\n    my_dongle.ati().then((data)=>{\r\n        \/\/make central if not\r\n        if(JSON.stringify(data).includes(\"Peripheral\")){\r\n            console.log('peripheral')\r\n            my_dongle.at_central().then((x)=>{\r\n                console.log('central now')\r\n            })\r\n        }        \r\n    })\r\n    .then(()=>{\r\n        \/\/ connect to dongle\r\n        my_dongle.at_getconn().then((y)=>{\r\n            if(JSON.stringify(y).includes(dongleToConnect)){\r\n                console.log('already connected')\r\n            }else{\r\n                my_dongle.at_gapconnect(dongleToConnect).then(()=>{\r\n                    console.log('connected successfully')\r\n                })\r\n            }\r\n        })\r\n        .then(()=>{\r\n            var theVal = document.getElementById('msgToSend').value;\r\n            console.log('Message Send  '+theVal)\r\n            \/\/ send command to show data\r\n            my_dongle.at_spssend(theVal).then(()=>{\r\n                console.log('Message Send '+theVal)\r\n            })\r\n        })\r\n        \r\n    })\r\n  });\r<\/code><\/pre>\n\n\n\n<p>The script has a button to connect to COM port on the computer. After connecting to the dongle , we should be able to control the colors of the LED strip.<\/p>\n\n\n\n<p>To connect to the BleuIO dongle on the STM32, make sure the STM32 is powered up and a BleuIO dongle is connected to it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Get the MAC address<\/h3>\n\n\n\n<p>Follow the steps to get the MAC address of the dongle that is connected to STM32<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>- Open this site https:\/\/bleuio.com\/web_terminal.html and click connect to dongle.\n- Select the appropriate port to connect.\n- Once it says connected, type ATI. This will show dongle information and current status.\n- If the dongle is on peripheral role, set it to central by typing AT+CENTRAL\n- Now do a gap scan by typing AT+GAPSCAN\n- Once you see your dongle on the list ,stop the scan by pressing control+c\n- Copy the ID and paste it into the script (script.js) line #2<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"686\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/03\/scan_deviceid.gif\" alt=\"\" class=\"wp-image-205\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Run the web script<\/h3>\n\n\n\n<p>You will need a web bundler. You can use&nbsp;<a href=\"https:\/\/parceljs.org\/\">parcel.js<\/a><\/p>\n\n\n\n<p>Once parcel js installed, go to the root directory of web script and type&nbsp;<strong>\u201cparcel index.html\u201d<\/strong>. This will start your development environment.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"607\" height=\"220\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/03\/parcel_on.jpg\" alt=\"\" class=\"wp-image-206\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/03\/parcel_on.jpg 607w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/03\/parcel_on-300x109.jpg 300w\" sizes=\"auto, (max-width: 607px) 100vw, 607px\" \/><\/figure>\n\n\n\n<p>Open the script on a browser. For this example we opened http:\/\/localhost:1234<\/p>\n\n\n\n<p>You can easily connect to the dongle and update the LED strip. <\/p>\n\n\n\n<p>The web script looks like this<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/image-1024x563.png\" alt=\"\" class=\"wp-image-446\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/image-1024x563.png 1024w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/image-300x165.png 300w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/image-768x423.png 768w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/image.png 1523w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>1. Introduction This project is about\u00a0Bluetooth Low Energy based RGB LED Strip Color Control\u00a0from a web browser and STM 32. The LEDs light strip can also be controlled wirelessly via a BLE scanning App using IOS or Android. With the received data, we decide which color of the RGB strip to activate. You will need [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":457,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2],"tags":[],"class_list":["post-434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bleuio","category-bleuio-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32 - BleuIO - Create Bluetooth Low Energy application<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32 - BleuIO - Create Bluetooth Low Energy application\" \/>\n<meta property=\"og:description\" content=\"1. Introduction This project is about\u00a0Bluetooth Low Energy based RGB LED Strip Color Control\u00a0from a web browser and STM 32. The LEDs light strip can also be controlled wirelessly via a BLE scanning App using IOS or Android. With the received data, we decide which color of the RGB strip to activate. You will need [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"BleuIO - Create Bluetooth Low Energy application\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T15:00:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-09T15:25:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/bluetooth-controlled-rgb-led-strip-collor-control.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1006\" \/>\n\t<meta property=\"og:image:height\" content=\"607\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"BleuIO\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/\"},\"author\":{\"name\":\"BleuIO\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\"},\"headline\":\"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32\",\"datePublished\":\"2022-09-09T15:00:59+00:00\",\"dateModified\":\"2022-09-09T15:25:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/\"},\"wordCount\":1045,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/bluetooth-controlled-rgb-led-strip-collor-control.jpg\",\"articleSection\":[\"BleuIO\",\"BleuIO tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/\",\"name\":\"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32 - BleuIO - Create Bluetooth Low Energy application\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/bluetooth-controlled-rgb-led-strip-collor-control.jpg\",\"datePublished\":\"2022-09-09T15:00:59+00:00\",\"dateModified\":\"2022-09-09T15:25:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/bluetooth-controlled-rgb-led-strip-collor-control.jpg\",\"contentUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/bluetooth-controlled-rgb-led-strip-collor-control.jpg\",\"width\":1006,\"height\":607,\"caption\":\"bluetooth controlled rgb led strip collor control\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/\",\"name\":\"BleuIO - Create Bluetooth Low Energy application\",\"description\":\"Learn Bluetooth Low Energy programming and build Bluetooth Low Energy Application\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\",\"name\":\"BleuIO\",\"sameAs\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/author\\\/biadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32 - BleuIO - Create Bluetooth Low Energy application","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/","og_locale":"en_US","og_type":"article","og_title":"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32 - BleuIO - Create Bluetooth Low Energy application","og_description":"1. Introduction This project is about\u00a0Bluetooth Low Energy based RGB LED Strip Color Control\u00a0from a web browser and STM 32. The LEDs light strip can also be controlled wirelessly via a BLE scanning App using IOS or Android. With the received data, we decide which color of the RGB strip to activate. You will need [&hellip;]","og_url":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/","og_site_name":"BleuIO - Create Bluetooth Low Energy application","article_published_time":"2022-09-09T15:00:59+00:00","article_modified_time":"2022-09-09T15:25:25+00:00","og_image":[{"width":1006,"height":607,"url":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/bluetooth-controlled-rgb-led-strip-collor-control.jpg","type":"image\/jpeg"}],"author":"BleuIO","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#article","isPartOf":{"@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/"},"author":{"name":"BleuIO","@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80"},"headline":"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32","datePublished":"2022-09-09T15:00:59+00:00","dateModified":"2022-09-09T15:25:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/"},"wordCount":1045,"commentCount":0,"image":{"@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/bluetooth-controlled-rgb-led-strip-collor-control.jpg","articleSection":["BleuIO","BleuIO tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/","url":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/","name":"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32 - BleuIO - Create Bluetooth Low Energy application","isPartOf":{"@id":"https:\/\/www.bleuio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#primaryimage"},"image":{"@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/bluetooth-controlled-rgb-led-strip-collor-control.jpg","datePublished":"2022-09-09T15:00:59+00:00","dateModified":"2022-09-09T15:25:25+00:00","author":{"@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80"},"breadcrumb":{"@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#primaryimage","url":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/bluetooth-controlled-rgb-led-strip-collor-control.jpg","contentUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/09\/bluetooth-controlled-rgb-led-strip-collor-control.jpg","width":1006,"height":607,"caption":"bluetooth controlled rgb led strip collor control"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bleuio.com\/blog\/bluetooth-controlled-rgb-led-strip-control-colour-from-a-web-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bleuio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bluetooth Low Energy based RGB LED Strip color control from a web browser and STM32"}]},{"@type":"WebSite","@id":"https:\/\/www.bleuio.com\/blog\/#website","url":"https:\/\/www.bleuio.com\/blog\/","name":"BleuIO - Create Bluetooth Low Energy application","description":"Learn Bluetooth Low Energy programming and build Bluetooth Low Energy Application","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bleuio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80","name":"BleuIO","sameAs":["https:\/\/www.bleuio.com\/blog"],"url":"https:\/\/www.bleuio.com\/blog\/author\/biadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/comments?post=434"}],"version-history":[{"count":10,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/434\/revisions"}],"predecessor-version":[{"id":456,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/434\/revisions\/456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/media\/457"}],"wp:attachment":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/media?parent=434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/categories?post=434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/tags?post=434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}