MyRoverWeb

Web application for controlling a toy delivery robot via Bluetooth Low Energy directly from the browser. The interface allows you to find an available rover, connect to it and send movement and light control commands without installing a native application.

Contents

• Features
• Stack
• How the application works
• Browser and device requirements
• Why do you need a Chromium browser
• Quick start
• Usage scenario
• BLE control protocol
• Project structure
• Useful materials

Features

• Search for BLE devices with name Rover Toy XXX or Yandex Delivery Robot

• Connect to the robot via GATT from the browser

• Motion control: forward, backward, left, right

• Stop by releasing the control button

• Turning the light on and off on the robot

• Easy browser interface without installing a separate application

Stack

• JavaScript
• React 18
• Create React App
• Web Bluetooth API
• Bluetooth Low Energy (BLE, GATT)
• GitHub Pages for deployment

How the application works

1. The user presses the rover search button.
2. The application calls navigator.bluetooth.requestDevice() and opens the system window for selecting a BLE device.
3. Once selected, the service UUID and characteristics are calculated based on the device name.
4. The browser connects to the robot's GATT server and receives the control characteristic.
5. When you click on the interface buttons, the application sends byte motion and light commands to the characteristic.

The application is designed to control one selected rover per session.

Browser and device requirements

• Computer or Android device with Bluetooth Low Energy support
• Browser with Web Bluetooth API support
• Access to the site in a secure context: https:// or http://localhost for local development
• Bluetooth enabled and permission to access it in the browser
• Robot turned on and available for connection

Why you need a Chromium browser

This project uses the Web Bluetooth API, namely:

navigator.bluetooth.requestDevice()

device.gatt.connect()

• reading the GATT service and writing to the BLE characteristic

The application depends on the Web Bluetooth implementation inside the browser engine. There is no native layer or separate desktop client in the project code: all work with BLE is done through the browser JavaScript API.

You need a browser that implements Web Bluetooth. For the project, it is recommended to use a browser based on the Chromium engine, such as Google Chrome or Microsoft Edge. If the browser is missing an object navigator.bluetooth , the application will not be able to open the device selection window or connect to the rover.

Quick start

npm ci
npm start

Once launched, the application will be available at http://localhost:3000.

###Building the production version

npm run build

Deploy to GitHub Pages

npm run deploy

Usage scenario

1. Turn on the robot and make sure it is accessible via BLE.
2. Open the app in Chrome or Edge.
3. Click Найти ровер .
4. Select your device Rover Toy XXX orYandex Delivery Robotin the system browser window.
5. Click on the found rover in the interface to connect.
6. Control movement with the arrow buttons.
7. Release the button to send the stop command.
8. Use the lamp button to turn the light on and off.

BLE control protocol

Device names

Rover Toy XXX

Yandex Delivery Robot

UUID

• Service: 0000170d-XXXX-1000-8000-00805f9b34fb

• Characteristics: 00002a60-XXXX-1000-8000-00805f9b34fb

Where XXXX :

• rover number in four-digit format for devices Rover Toy

0000 for device Yandex Delivery Robot

Teams

0x04

• moving forward

0x05

• moving backwards

0x02

• turn left

0x01

• turn right

0x03

• turn on the light

0x06

• turn off the light

0x00

• stop

Project structure

src/App.js

• root application component

src/components/FindRovers.js

• search for available rovers and go to control

src/components/RoverControl.js

• motion and light control screen

src/bluetooth.js

• logic for searching, connecting and sending BLE commands

Useful materials

• MDN: Web Bluetooth API
• MDN: Bluetooth.requestDevice()
• MDN: Secure contexts
• Chrome for Developers: Communicating with Bluetooth devices over JavaScript

---

##Links

• GitHub: MaxiEnergy/MyRoverWeb