Category: BleuIO

In this tutorial, we will walk you through the steps to get started with Bluetooth Low Energy (BLE) development using the BleuIO USB dongle and the Go programming language. BleuIO is a versatile and user-friendly BLE USB dongle that simplifies BLE application development with its easy-to-use AT Commands. We will show you how to set up your environment, write a simple Go program to interact with the BLE dongle, and explore some of the key features of BleuIO.

Introduction to Go

Go, also known as Golang, is an open-source programming language developed by Google. It is designed for simplicity, efficiency, and reliability, making it an excellent choice for system programming and large-scale software development. Go’s strong concurrency support, fast compilation, and robust standard library make it a popular language for network programming, cloud services, and, of course, BLE applications.

Introduction to BleuIO

BleuIO is a Bluetooth Low Energy USB dongle that can be used to create new BLE applications quickly and easily. With its built-in AT Commands, developers can interact with the BLE dongle without needing deep knowledge of BLE protocols or complex configurations. BleuIO supports various operating systems, making it a versatile tool for any development environment.

Key features of BleuIO include:

• Easy-to-use AT Commands for faster development
• Compatibility with any programming language
• Support for Windows, macOS, and Linux

Setting Up Your Development Environment

Step 1: Install Go

First, ensure that you have Go installed on your system. You can download the latest version of Go from the official website: https://golang.org/dl/. Follow the installation instructions for your operating system.

Step 2: Initialize a New Go Module

Create a directory and open a terminal . Run the following command to initialize a new Go module:

go mod init bleuio-example

Step 3: Install the Serial Package

Install the go.bug.st/serial package, which provides a simple API for serial communication in Go:

go get go.bug.st/serial

Writing Your First Go Program with BleuIO

Step 4: Write the Program

Create a new file named main.go in your project directory and add the following code:

package main

import (
	"fmt"
	"log"
	"time"

	"go.bug.st/serial"
)

func main() {
	// Open the serial port
	mode := &serial.Mode{
		BaudRate: 9600,
	}
	port, err := serial.Open("/dev/cu.usbmodem4048FDE52CF21", mode)
	if err != nil {
		log.Fatalf("Failed to open port: %v", err)
	}
	defer port.Close()

	// Write "AT+CENTRAL" to the serial port
	_, err = port.Write([]byte("AT+CENTRAL\r"))
	if err != nil {
		log.Fatalf("Failed to write AT+CENTRAL to port: %v", err)
	}
	fmt.Println("Command sent: AT+CENTRAL")

	// Wait for a short moment to ensure the command is processed
	time.Sleep(2 * time.Second)

	// Read the response for the AT+CENTRAL command
	buf := make([]byte, 100)
	n, err := port.Read(buf)
	if err != nil {
		log.Fatalf("Failed to read from port: %v", err)
	}
	fmt.Printf("Response from AT+CENTRAL:\n%s\n", string(buf[:n]))

	// Write "AT+GAPSCAN=5" to the serial port
	_, err = port.Write([]byte("AT+GAPSCAN=5\r"))
	if err != nil {
		log.Fatalf("Failed to write AT+GAPSCAN=5 to port: %v", err)
	}
	fmt.Println("Command sent: AT+GAPSCAN=5")

	// Wait for the scan to complete (5 seconds in this case)
	time.Sleep(6 * time.Second) // Adding a bit more time to ensure the response is received

	// Read the response for the AT+GAPSCAN=5 command
	buf = make([]byte, 1000)
	n, err = port.Read(buf)
	if err != nil {
		log.Fatalf("Failed to read from port: %v", err)
	}

	// Print the response
	fmt.Printf("Response from AT+GAPSCAN=5:\n%s\n", string(buf[:n]))
}

Step 5: Run the Program

Ensure your BleuIO USB dongle is connected and configured correctly. Then, run the program using the following command in the terminal:

go run main.go

Explanation of the Program

1. Opening the Serial Port: The program opens the serial port where the BleuIO dongle is connected. Adjust the serial port path (/dev/cu.usbmodem4048FDE52CF21) according to your system (e.g., COM3 on Windows). To get the location of connected BleuIO on macOS, run this command on terminal ls /dev/cu.*
2. Setting the Central Role: The program sends the AT+CENTRAL command to set the BLE dongle in central role mode. Similarly we can try sending AT+FINDSCANDATA=5B07=3 which will look for advertised data from BLE devices whose manufacturing id is 5B07.
3. Reading the Response: It waits for 2 seconds to ensure the command is processed and reads the response from the serial port.
4. Scanning for BLE Devices: The program sends the AT+GAPSCAN=5 command to scan for nearby BLE devices for 5 seconds.
5. Printing the Scan Results: After waiting for the scan to complete, the program reads and prints the response from the serial port.

Output

This tutorial demonstrated how to get started with BLE development using the BleuIO USB dongle and the Go programming language. BleuIO simplifies BLE application development with its straightforward AT Commands, making it accessible for developers using any programming language. With Go’s efficiency and robust standard library, you can quickly develop powerful BLE applications.

In this tutorial, we’ll walk you through the process of creating your own Apple HomeKit accessory that monitor and manage air quality data from a BLE device, specifically the HibouAir air quality monitoring device. By the end of this tutorial, you’ll have a functional BLE application that integrates with Apple’s HomeKit, demonstrating how easily you can develop BLE applications with the BleuIO dongle.

Overview of the Project

In this project, our goal is to create a BLE application that communicates with the HibouAir device, which provides air quality data. The application will:

1. Connect to a BleuIO USB dongle to communicate with BLE devices.
2. Scan for the HibouAir device using AT commands.
3. Decode the air quality data from the HibouAir device.
4. Integrate with HomeKit to display and manage the data in a smart home environment.
5. Update the accessory information and continuously monitor the air quality data.

What is HomeKit?

HomeKit is Apple’s framework for home automation that allows users to control smart home devices using their Apple devices. With HomeKit, you can control a wide range of devices like lights, thermostats, locks, and sensors through the Apple Home app, Siri voice commands, and other Apple devices.

The key features of HomeKit include:

• Secure Communication: HomeKit uses end-to-end encryption to ensure that data transmitted between your devices and the Home app remains private and secure.
• Integration with Siri: HomeKit-enabled devices can be controlled using Siri voice commands, enabling hands-free control of your smart home.
• Automation: Users can create automated routines and scenes that trigger actions based on time, location, or device status. For example, you can set up a “Good Night” scene that turns off the lights and locks the door when you say goodnight to Siri.

What is HAP-NodeJS?

HAP-NodeJS is an open-source implementation of the HomeKit Accessory Protocol (HAP) written in Node.js. It allows developers to create HomeKit-compatible accessories and bridge devices that can be controlled through Apple’s HomeKit ecosystem.

Devices Required

To follow this tutorial, you will need:

1. BleuIO USB Dongle: A Bluetooth Low Energy USB dongle used to interface with BLE devices.
2. HibouAir Device: A BLE air quality monitoring device that provides air quality metrics such as temperature, CO2 levels, humidity, and light levels.
3. A Computer: Running Windows, macOS, or Linux ,  Raspberry Pi or any other platform that can run Node.js.

Connecting to BleuIO

To connect to the BleuIO dongle, we’ll use Node.js and the serialport package to communicate with the BLE device. The BleuIO dongle interfaces with your computer over a serial port, which allows you to send AT commands and receive data from BLE devices.

Decoding the Data

Once we receive the data from the HibouAir device, we need to decode it. The data is encoded in a specific format that we will parse and extract the relevant air quality metrics. We use a function to decode the advertisement data, which includes temperature, CO2 levels, humidity, and light levels.

Setting Up HomeKit Environment Data

We will use the hap-nodejs library to integrate our application with HomeKit. This will allow us to create HomeKit accessories that represent our air quality metrics. We set up services for temperature, CO2 levels, humidity, and light, and update these services with real-time data from the HibouAir device.

Running the Script

Here’s a step-by-step guide on how to set up and run the script:

1. Install Required Packages
   First, make sure you have Node.js installed on your computer. Then, install the required npm packages by running
   npm install hap-nodejs serialport
2. Create the Script
   Save the following code as hibouair.js or clone it from https://github.com/smart-sensor-devices-ab/bleuio-hibouair-homekit-integration
   

const hap = require('hap-nodejs');
const { SerialPort } = require('serialport');

const Accessory = hap.Accessory;
const Characteristic = hap.Characteristic;
const CharacteristicEventTypes = hap.CharacteristicEventTypes;
const Service = hap.Service;

// Get the device ID from the command-line arguments
const deviceId = process.argv[2];

if (!deviceId) {
  console.error(
    'Device ID not present. Please provide the device ID as follows:'
  );
  console.error('node hibouair.js <device_id>');
  process.exit(1);
}

// Define the manufacturer name you're looking for
const targetManufacturer = 'Smart Sensor Devices';

// Buffers to hold the incoming data
let buffer = '';
let scanningDetected = false;
let responseFound = false;
let port; // Variable to hold the SerialPort instance

// Initialize HomeKit accessories globally
let temperature, co2, humidity, light;

async function connectAndSendCommands() {
  try {
    // Get a list of all serial ports
    const ports = await SerialPort.list();

    // Find the port with the specified manufacturer
    const targetPort = ports.find(
      (port) => port.manufacturer === targetManufacturer
    );

    if (!targetPort) {
      console.log(`No port found with manufacturer: ${targetManufacturer}`);
      return;
    }

    // Log the selected port
    console.log(`Connecting to port: ${targetPort.path}`);

    // Create a new SerialPort instance for the selected port
    port = new SerialPort({
      path: targetPort.path,
      baudRate: 9600, // Adjust the baud rate as needed
    });

    // Event handler for when the port opens
    port.on('open', () => {
      console.log(
        `Port ${targetPort.path} is open and ready for communication.`
      );

      // Write the initial command
      port.write('AT+CENTRAL\r\n', (err) => {
        if (err) {
          console.error('Error writing initial command:', err.message);
        } else {
          console.log('Initial command sent: AT+CENTRAL');
        }
      });

      // Start the periodic scanning for BLE data
      setInterval(() => {
        port.write(`AT+FINDSCANDATA=${deviceId}=5\r\n`, (err) => {
          if (err) {
            console.error('Error writing scan command:', err.message);
          } else {
            console.log(`Scan command sent: AT+FINDSCANDATA=${deviceId}=5`);
          }
        });
      }, 20000); // 20000 milliseconds = 20 seconds
    });

    // Event handler for when data is received on the port
    port.on('data', (data) => {
      buffer += data.toString();
      processBuffer();
    });

    // Event handler for when there is an error
    port.on('error', (err) => {
      console.error('Error:', err.message);
      if (port) {
        port.close(() => {
          console.log('Port closed due to error.');
        });
      }
    });
  } catch (err) {
    console.error('Error listing or connecting to serial ports:', err);
    if (port) {
      port.close(() => {
        console.log('Port closed due to error.');
      });
    }
  }

  function processBuffer() {
    // Split the buffer into lines
    const lines = buffer.split('\r\n');

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trim();

      if (line === 'SCANNING...') {
        scanningDetected = true;
      } else if (line === 'SCAN COMPLETE') {
        scanningDetected = false;
      } else if (scanningDetected && line.length > 0) {
        // Extract the data from the line
        const dataMatch = line.match(/^\[.*?\] Device Data \[ADV\]: (.+)$/);
        if (dataMatch && dataMatch[1]) {
          const extractedData = dataMatch[1].trim();
          console.log('Extracted data:', extractedData);

          // Decode the data
          const decodedData = advDataDecode(extractedData);
          console.log('Decoded data:', decodedData);

          responseFound = true;
          buffer = ''; // Clear the buffer after finding the response

          if (!temperature || !co2 || !humidity || !light) {
            setupAccessory(decodedData); // Setup accessory if not already done
          } else {
            updateAccessory(decodedData); // Update accessory with decoded data
          }

          return;
        }
      }
    }

    // Keep the remaining buffer if no relevant line was found
    buffer = lines[lines.length - 1]; // Retain the last part of the buffer
  }

  // Function to decode the advertisement data
  function advDataDecode(adv) {
    let pos = adv.indexOf('5B0705');
    let dt = new Date();
    let currentTs =
      dt.getFullYear() +
      '/' +
      (dt.getMonth() + 1).toString().padStart(2, '0') +
      '/' +
      dt.getDate().toString().padStart(2, '0') +
      ' ' +
      dt.getHours().toString().padStart(2, '0') +
      ':' +
      dt.getMinutes().toString().padStart(2, '0') +
      ':' +
      dt.getSeconds().toString().padStart(2, '0');
    let tempHex = parseInt(
      '0x' +
        adv
          .substr(pos + 22, 4)
          .match(/../g)
          .reverse()
          .join('')
    );
    if (adv) dataShowing = true;
    if (tempHex > 1000) tempHex = (tempHex - (65535 + 1)) / 10;
    else tempHex = tempHex / 10;
    return {
      boardID: adv.substr(pos + 8, 6),
      type: adv.substr(pos + 6, 2),
      light: parseInt(
        '0x' +
          adv
            .substr(pos + 14, 4)
            .match(/../g)
            .reverse()
            .join('')
      ),
      pressure:
        parseInt(
          '0x' +
            adv
              .substr(pos + 18, 4)
              .match(/../g)
              .reverse()
              .join('')
        ) / 10,
      temp: tempHex,
      hum:
        parseInt(
          '0x' +
            adv
              .substr(pos + 26, 4)
              .match(/../g)
              .reverse()
              .join('')
        ) / 10,
      voc: parseInt(
        '0x' +
          adv
            .substr(pos + 30, 4)
            .match(/../g)
            .reverse()
            .join('')
      ),
      pm1:
        parseInt(
          '0x' +
            adv
              .substr(pos + 34, 4)
              .match(/../g)
              .reverse()
              .join('')
        ) / 10,
      pm25:
        parseInt(
          '0x' +
            adv
              .substr(pos + 38, 4)
              .match(/../g)
              .reverse()
              .join('')
        ) / 10,
      pm10:
        parseInt(
          '0x' +
            adv
              .substr(pos + 42, 4)
              .match(/../g)
              .reverse()
              .join('')
        ) / 10,
      co2: parseInt('0x' + adv.substr(pos + 46, 4)),
      vocType: parseInt('0x' + adv.substr(pos + 50, 2)),
      ts: currentTs,
    };
  }
}

// Function to setup HomeKit accessory
function setupAccessory(data) {
  const accessoryUuid = hap.uuid.generate('hap.hibouair.sensor');
  const accessory = new Accessory('HibouAir', accessoryUuid);

  // Create a function to initialize services
  function initializeService(
    serviceType,
    serviceName,
    initialValue,
    characteristicType
  ) {
    const service = new serviceType(serviceName);

    const characteristic = service.getCharacteristic(characteristicType);

    characteristic.on(CharacteristicEventTypes.GET, (callback) => {
      console.log(`Queried current ${serviceName}: ${initialValue}`);
      callback(undefined, initialValue);
    });

    accessory.addService(service);

    return {
      service,
      characteristic,
      initialValue,
    };
  }

  // Initialize temperature, CO2, humidity, and light services
  temperature = initializeService(
    Service.TemperatureSensor,
    'Temperature Sensor',
    data.temp,
    Characteristic.CurrentTemperature
  );

  co2 = initializeService(
    Service.CarbonDioxideSensor,
    'CO2 Sensor',
    data.co2,
    Characteristic.CarbonDioxideLevel
  );

  humidity = initializeService(
    Service.HumiditySensor,
    'Humidity Sensor',
    data.hum,
    Characteristic.CurrentRelativeHumidity
  );

  light = initializeService(
    Service.LightSensor,
    'Light Sensor',
    data.light,
    Characteristic.CurrentAmbientLightLevel
  );

  // Set accessory information
  accessory
    .getService(Service.AccessoryInformation)
    .setCharacteristic(Characteristic.Manufacturer, 'Smart Sensor Devices')
    .setCharacteristic(Characteristic.SerialNumber, deviceId);

  // Publish the accessory
  accessory.publish({
    username: '17:51:07:F4:BC:8B',
    pincode: '123-45-678',
    port: 47129,
    category: hap.Categories.SENSOR, // value here defines the symbol shown in the pairing screen
  });

  console.log('Accessory setup finished!');
}

// Function to update HomeKit accessory with new data
function updateAccessory(data) {
  temperature.initialValue = data.temp;
  co2.initialValue = data.co2;
  humidity.initialValue = data.hum;
  light.initialValue = data.light;

  console.log(`Updated current temperature: ${temperature.initialValue}`);
  console.log(`Updated current CO2 level: ${co2.initialValue}`);
  console.log(`Updated current Humidity level: ${humidity.initialValue}`);
  console.log(`Updated current light level: ${light.initialValue}`);

  // Update the characteristic values
  temperature.service.setCharacteristic(
    Characteristic.CurrentTemperature,
    temperature.initialValue
  );
  co2.service.setCharacteristic(
    Characteristic.CarbonDioxideLevel,
    co2.initialValue
  );
  humidity.service.setCharacteristic(
    Characteristic.CurrentRelativeHumidity,
    humidity.initialValue
  );
  light.service.setCharacteristic(
    Characteristic.CurrentAmbientLightLevel,
    light.initialValue
  );
}

// Call the function to connect and send commands
connectAndSendCommands();

Run the Script

Execute the script from your terminal by providing the device ID as an argument:

node hibouair.js 220069

This command will start the script, connect to the BleuIO dongle, scan for the HibouAir device, decode the data, and set up the HomeKit accessories with the real-time data from the device.

Output

This tutorial demonstrates how easy it is to develop BLE applications using BleuIO and integrate them with HomeKit. By following these steps, you can create real-time monitoring solutions for a variety of BLE-enabled devices, enhancing the functionality of your smart home environment.

Introduction

This example is going to showcase how to connect a PDM MEMS Microphone to a Adafruit Feather RP2040, together with a BlueIO to create a background noise sensor that measures and advertisises the current sound level in decibel (dB).
This example is very similar to Integrating BleuIO with Adafruit Feather RP2040 for Seamless BLE Applications Part 2 but instead of reading sensor data over SPI every few seconds, we’re using the arduino PDM interface to continuously fill a buffer with data then everytime the buffer is full we’re going to translate the data into the current sound level in dB.
The buffer size of 8000 bytes (2 bytes per sample) and the sample rate of 16kHz means we record 250ms each time we fill the buffer.

Requirements

• Adafruit Feather RP2040 Board
• BleuIO – Bluetooth Low Energy USB Dongle
• Arduino IDE
• PDM MEMS Microphone
• Our example project [Download from GitHub]

Connecting PDM Microphone.

• Connect four wires from the PDM Microphone (3V, GND, DAT, CLK) to the following pins on the Feather Board:
• 3V to 3.3V to power the device, then GND to GND.

• And CLK to SCL, and DAT to SDA.

Running the example

• Make sure the BleuIO Dongle is connected to the Feather RP2040 Board.
• Connect the Feather RP2040 Board to your computer using the USB cable.
• Make sure the Feather RP2040 Board is selected as well as the correct COM port in the drop-down menu.

• (Optional) Change the frequency the advertising message is updated with the dB value, in the code
  // How often we update the advertising message (in seconds) #define READ_UPDATE_FREQUENCY 1
• Click the Upload button.
  

• Done! The dongle should now be advertising the sensor values. (If you just plugged in the Feather it may take about 10 seconds before advertising starts as the BleuIO bootloader opens and closes)
• (Optional) Open Serial Monitor. You can open the Serial Monitor from the menu: Tools>Serial Monitor
  You should now see the output from the project.

Scanning the results

To see the results you can use any BLE scanner app.
Here we use nRF Connect:

The data in the red box is our sensor values:
0x0032

When we parse the hex into decimal values we get:
0x0032 = 50 dB

In this tutorial, we’ll explore how to create a Bluetooth Low Energy (BLE) application using ReactJS and the BleuIO BLE USB dongle. BleuIO is a versatile BLE device that makes developing BLE applications fast and easy with its user-friendly AT commands.

Introduction

Bluetooth Low Energy (BLE) technology is widely used for short-range communication, particularly in IoT applications. BleuIO, with its easy-to-use AT commands, simplifies the process of integrating BLE functionality into your applications. In this tutorial, we’ll demonstrate how to create a BLE application using ReactJS. Specifically, we will show you how to scan for nearby BLE devices for three seconds and display the results on the screen, highlighting the capabilities of BleuIO.

Prerequisites

Before we start, make sure you have the following:

• A BleuIO USB dongle
• A computer with a Chromium-based browser (like Chrome or Edge)
• Node.js and npm installed
• Basic knowledge of ReactJS

Setting Up the Project

First, let’s create a new React project. If you haven’t already installed create-react-app, you can do so with the following command:

npx create-react-app ble-react-app
cd ble-react-app
npm start

This will create a new React application and start the development server.

Creating the Serial Port Component

We’ll create a component to handle the serial port communication with the BleuIO dongle. Create a new file called SerialPortComponent.js in the src directory and add the following code:

import React, { useState, useEffect } from 'react';

const SerialPortComponent = () => {
  const [port, setPort] = useState(null);
  const [output, setOutput] = useState('');
  const [reader, setReader] = useState(null);
  const [writer, setWriter] = useState(null);

  const connectToSerialPort = async () => {
    try {
      // Request a port and open a connection.
      const selectedPort = await navigator.serial.requestPort();
      await selectedPort.open({ baudRate: 9600 });
      setPort(selectedPort);

      const textDecoder = new TextDecoderStream();
      const readableStreamClosed = selectedPort.readable.pipeTo(
        textDecoder.writable
      );
      const reader = textDecoder.readable.getReader();
      setReader(reader);

      const textEncoder = new TextEncoderStream();
      const writableStreamClosed = textEncoder.readable.pipeTo(
        selectedPort.writable
      );
      const writer = textEncoder.writable.getWriter();
      setWriter(writer);

      // Read data from the serial port.
      readSerialData(reader);
    } catch (error) {
      console.error('There was an error opening the serial port:', error);
    }
  };

  const readSerialData = async (reader) => {
    try {
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          // Allow the serial port to be closed later.
          reader.releaseLock();
          break;
        }
        // Convert the received data to a string and update the state.
        setOutput((prevOutput) => prevOutput + value);
      }
    } catch (error) {
      console.error('Error reading from the serial port:', error);
    }
  };

  const writeToSerialPort = async () => {
    setOutput('');
    try {
      if (writer) {
        // Send AT+CENTRAL command
        await writer.write('AT+CENTRAL\r');
        setOutput((prevOutput) => prevOutput + 'AT+CENTRAL\r\n');

        // Wait for a short while to ensure the command is processed
        await new Promise((resolve) => setTimeout(resolve, 500));

        // Send AT+GAPSCAN=3 command
        await writer.write('AT+GAPSCAN=3\r');
        setOutput((prevOutput) => prevOutput + 'AT+GAPSCAN=3\r\n');

        // Wait for scan to complete and read response
        await new Promise((resolve) => setTimeout(resolve, 3000));

        // Read and process data from the serial port
        let scanData = '';
        while (true) {
          const { value, done } = await reader.read();
          if (done) {
            break;
          }
          scanData += value;
        }
        setOutput((prevOutput) => prevOutput + scanData);
      } else {
        console.error('Writer not available');
      }
    } catch (error) {
      console.error('Error writing to the serial port:', error);
    }
  };

  useEffect(() => {
    return () => {
      // Cleanup function to close port when component unmounts
      if (port) {
        port.close();
      }
      if (reader) {
        reader.releaseLock();
      }
      if (writer) {
        writer.releaseLock();
      }
    };
  }, [port, reader, writer]);

  return (
    <div className="mt-5">
      <button
        className="btn btn-success me-2"
        onClick={connectToSerialPort}
        disabled={!!port}
      >
        Connect to BleuIO
      </button>
      <button
        className="btn btn-warning me-2"
        onClick={writeToSerialPort}
        disabled={!writer}
      >
        Scan for nearby BLE devices for 3 seconds
      </button>

      {output && (
        <div>
          <h3>Response from the BleuIO:</h3> <pre>{output}</pre>
        </div>
      )}
    </div>
  );
};

export default SerialPortComponent;

Explanation of the Code

1. Connecting to the Serial Port: The connectToSerialPort function requests access to the serial port and opens a connection. It initializes the text encoder and decoder streams for reading and writing data.
2. Reading Serial Data: The readSerialData function reads data from the serial port continuously and updates the output state with the received data.
3. Writing to the Serial Port: The writeToSerialPort function sends AT commands to the serial port. It first sends the AT+CENTRAL command to put the device in central mode, then sends the AT+GAPSCAN=3 command to scan for nearby BLE devices for 3 seconds. It reads and displays the response from the serial port after the scan completes.
4. Cleanup: The useEffect hook ensures that the serial port is properly closed and resources are released when the component is unmounted.

Using the Component in Your App

Update your App.js to include the new SerialPortComponent.

// src/App.js
import React from 'react';
import SerialPortComponent from './SerialPortComponent';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>BLE Application with React and BleuIO</h1>
        <SerialPortComponent />
      </header>
    </div>
  );
}

export default App;

Running the Application

Make sure your BleuIO USB dongle is connected to your computer. Start your React application:

npm start

Open your browser and navigate to http://localhost:3000. You should see the application with two buttons: “Connect to BleuIO” and “Scan for nearby BLE devices for 3 seconds“.

• Connect to BleuIO: Click this button to connect to the BleuIO USB dongle. The browser will prompt you to select the serial port.
• Scan for nearby BLE devices for 3 seconds: After connecting, click this button to send the AT+CENTRAL and AT+GAPSCAN=3 commands to the BleuIO dongle. The output area will display the response from the device.

Output

In this tutorial, we’ve demonstrated a basic usage of BleuIO AT commands by creating a BLE application using ReactJS and the BleuIO USB dongle. By leveraging the Web Serial API and the straightforward AT commands provided by BleuIO, you can quickly develop BLE applications that run on any platform. You can expand on this example to develop your own applications using BleuIO’s comprehensive set of AT commands. Read more about the AT commands in our documentation.

BleuIO simplifies BLE development and, combined with the popularity and versatility of ReactJS, allows developers to create powerful and cross-platform BLE applications with ease. Whether you’re building IoT devices, wearable tech, or any BLE-enabled application, BleuIO is a reliable and efficient choice.