Skip to content

Commit e41c53c

Browse files
silabs-DanielNsilabs-DanielN
committed
Web Bluetooth - Serial Port Profile (SPP) v1.0.0
0 parents  commit e41c53c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+9531
-0
lines changed

‎.github/workflows/npm_test.yml

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: npm test
2+
3+
on:
4+
pull_request:
5+
branches:
6+
- '**'
7+
8+
concurrency:
9+
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
10+
cancel-in-progress: true
11+
12+
jobs:
13+
test_pull_request:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- uses: actions/checkout@v3
17+
- uses: actions/setup-node@v3
18+
with:
19+
node-version-file: '.nvmrc'
20+
cache: 'yarn'
21+
cache-dependency-path: '**/yarn.lock'
22+
- name: Install dependencies
23+
run: yarn
24+
- name: Run build
25+
run: npm run build
26+
- name: Run tests
27+
run: npm test

‎.gitignore

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Docusaurus cache and generated files
108+
.docusaurus
109+
110+
# Serverless directories
111+
.serverless/
112+
113+
# FuseBox cache
114+
.fusebox/
115+
116+
# DynamoDB Local files
117+
.dynamodb/
118+
119+
# TernJS port file
120+
.tern-port
121+
122+
# Stores VSCode versions used for testing VSCode extensions
123+
.vscode-test
124+
125+
# yarn v2
126+
.yarn/cache
127+
.yarn/unplugged
128+
.yarn/build-state.yml
129+
.yarn/install-state.gz
130+
.pnp.*
131+
132+
.DS_Store

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v22.11.0

‎.prettierrc.mjs

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
2+
const config = {
3+
printWidth: 100,
4+
singleQuote: true,
5+
trailingComma: 'es5',
6+
plugins: ['@ianvs/prettier-plugin-sort-imports'],
7+
importOrder: [
8+
'.*styles.css$',
9+
'',
10+
'dayjs',
11+
'^react$',
12+
'^next$',
13+
'^next/.*$',
14+
'<BUILTIN_MODULES>',
15+
'<THIRD_PARTY_MODULES>',
16+
'^@mantine/(.*)$',
17+
'^@mantinex/(.*)$',
18+
'^@mantine-tests/(.*)$',
19+
'^@docs/(.*)$',
20+
'^@/.*$',
21+
'^../(?!.*.css$).*$',
22+
'^./(?!.*.css$).*$',
23+
'\\.css$',
24+
],
25+
overrides: [
26+
{
27+
files: '*.mdx',
28+
options: {
29+
printWidth: 70,
30+
},
31+
},
32+
],
33+
};
34+
35+
export default config;

‎.stylelintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎.stylelintrc.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"extends": ["stylelint-config-standard-scss"],
3+
"rules": {
4+
"custom-property-pattern": null,
5+
"selector-class-pattern": null,
6+
"scss/no-duplicate-mixins": null,
7+
"declaration-empty-line-before": null,
8+
"declaration-block-no-redundant-longhand-properties": null,
9+
"alpha-value-notation": null,
10+
"custom-property-empty-line-before": null,
11+
"property-no-vendor-prefix": null,
12+
"color-function-notation": null,
13+
"length-zero-no-unit": null,
14+
"selector-not-notation": null,
15+
"no-descending-specificity": null,
16+
"comment-empty-line-before": null,
17+
"scss/at-mixin-pattern": null,
18+
"scss/at-rule-no-unknown": null,
19+
"value-keyword-case": null,
20+
"media-feature-range-notation": null,
21+
"selector-pseudo-class-no-unknown": [
22+
true,
23+
{
24+
"ignorePseudoClasses": ["global"]
25+
}
26+
]
27+
}
28+
}

‎CODE_OF_CONDUCT.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Silicon Labs Community Terms of Use
2+
3+
Please read the full Terms of Use and Code of Conduct in [agreements-and-guidelines](https://github.com/SiliconLabsSoftware/agreements-and-guidelines) repository: [Code of Conduct](https://github.com/SiliconLabsSoftware/agreements-and-guidelines/blob/main/code_of_conduct.md)

‎LICENSE.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
**Copyright 2025 Silicon Laboratories Inc. [https://www.silabs.com](https://www.silabs.com/)**
2+
3+
SPDX-License-Identifier: LicenseRef-MSLA
4+
5+
The licensor of this software is Silicon Laboratories Inc.
6+
Your use of this software is governed by the terms of the Silicon Labs Master Software License Agreement (MSLA) available at
7+
[https://www.silabs.com/about-us/legal/master-software-license-agreement](https://www.silabs.com/about-us/legal/master-software-license-agreement).
8+
By installing, copying or otherwise using this software, you agree to the terms of the MSLA.

‎README.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Web Bluetooth - Serial Port Profile (SPP) Example
2+
[![Version Badge](https://img.shields.io/badge/v1.0.0-green)](https://github.com/SiliconLabsSoftware/web-bluetooth-spp-application/releases)
3+
4+
## Overview
5+
6+
This example application implements the client-side device for the [Bluetooth - Serial Port Profile (SPP)](https://github.com/SiliconLabs/bluetooth_applications/tree/master/bluetooth_serial_port_profile) and [Bluetooth - Secure Serial Port Profile (SPP)](https://github.com/SiliconLabs/bluetooth_applications/tree/master/bluetooth_secure_spp_over_ble) application examples and provides an example to communicate Silicon Labs wireless microcontrollers using the BLE protocol from the Web Bluetooth API [compatible browsers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility).
7+
8+
9+
![Overview](./docs/overview.png)
10+
11+
The application runs in the browser as a Single Page Application (SPA) without requiring any server-side connection.
12+
13+
![Screenshot](./docs/screenshot.png)
14+
15+
> [!TIP]
16+
Check out the live demo online: [https://siliconlabssoftware.github.io/web-bluetooth-spp-application/](https://siliconlabssoftware.github.io/web-bluetooth-spp-application/)
17+
18+
## Compatible Bluetooth SPP Application Examples
19+
- [Bluetooth - Serial Port Profile (SPP)](https://github.com/SiliconLabs/bluetooth_applications/tree/master/bluetooth_serial_port_profile)
20+
- [Bluetooth - Secure Serial Port Profile (SPP)](https://github.com/SiliconLabs/bluetooth_applications/tree/master/bluetooth_secure_spp_over_ble)
21+
22+
## Requirements
23+
- Install [Nodejs >= v22.14.0 LTS](https://nodejs.org/en/download)
24+
- Prepare and flash a development kit with one of the [supported application examples](#compatible-bluetooth-spp-application-examples).
25+
26+
## Getting Started: Run the Application Locally
27+
28+
1. Go to [project-root-folder]
29+
2. Open a Terminal/Cmd/PowerShell/Bash there
30+
3. Install the dependencies and run the application with the following commands
31+
```bash
32+
# install all dependencies
33+
$ npm install
34+
35+
# development
36+
$ npm run dev
37+
38+
# production mode
39+
$ npm run build
40+
$ npm run preview
41+
```
42+
4. Open the application in a web browser
43+
> [!NOTE]
44+
> The local address of the application is displayed in the console once the server is up and ready to process the requests.
45+
46+
## Features
47+
48+
This example application comes with the following features:
49+
50+
- [React](https://react.dev/)
51+
- [Mantine](https://mantine.dev/)
52+
- [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
53+
- [TypeScript](https://www.typescriptlang.org/)
54+
- [Vitest](https://vitest.dev/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
55+
- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
56+
57+
## npm scripts
58+
59+
### Build and dev scripts
60+
61+
- `dev` – start development server
62+
- `build` – build production version of the app
63+
- `preview` – locally preview production build
64+
- `deploy` - deploys the application to the GitHub pages
65+
66+
### Testing scripts
67+
68+
- `typecheck` – checks TypeScript types
69+
- `lint` – runs ESLint
70+
- `prettier:check` – checks files with Prettier
71+
- `vitest` – runs vitest tests
72+
- `vitest:watch` – starts vitest watch
73+
- `test` – runs `vitest`, `prettier:check`, `lint` and `typecheck` scripts
74+
75+
### Other scripts
76+
77+
- `prettier:write` – formats all files with Prettier
78+
79+
## Troubleshooting
80+
81+
Sometimes, when the application runs in Chrome Android and tries to pair and connect to a new device, the application cannot retrieve the GATT Service. To solve this issue, try to Unpair/Pair/Unpair the device in the Bluetooth settings.
82+
83+
> [!IMPORTANT]
84+
> The device should be unpaired first to pair and connect via the application.
85+
86+
87+
## Reporting Bugs/Issues and Posting Questions and Comments
88+
89+
To report bugs in the Application Examples projects, please create a new "Issue" in the "Issues" section of this repo. Please reference the board, project, and source files associated with the bug, and reference line numbers. If you are proposing a fix, also include information on the proposed fix. Since these examples are provided as-is, there is no guarantee that these examples will be updated to fix these issues.
90+
91+
Questions and comments related to these examples should be made by creating a new "Issue" in the "Issues" section of this repo.

‎docs/overview.png

80.5 KB
Loading

‎docs/screenshot.png

30.6 KB
Loading

‎eslint.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import mantine from 'eslint-config-mantine';
2+
import tseslint from 'typescript-eslint';
3+
4+
export default tseslint.config(
5+
...mantine,
6+
{ ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}', './.storybook/main.ts'] },
7+
);

‎index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/src/favicon.ico" />
6+
<meta
7+
name="viewport"
8+
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
9+
/>
10+
<title>WEB Bluetooth - Serial Port Profile (SPP) Example</title>
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)