mirror of
https://dojo.spaceturtle.ninja/cats/rgb-cat-ears-web.git
synced 2026-04-30 16:49:29 +02:00
Web interface for the RGB cat ears
- TypeScript 93.4%
- CSS 3.2%
- JavaScript 2.1%
- Nix 0.8%
- HTML 0.5%
| .forgejo/workflows | ||
| public | ||
| src | ||
| .envrc | ||
| .gitignore | ||
| eslint.config.mjs | ||
| flake.lock | ||
| flake.nix | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| vite.config.ts | ||
RGB Cat Ears: Web Frontend
Based on the Google Chrome Web Bluetooth / Write Descriptor (Async Await) Sample.
Prerequisites
For normal Usage
- A device with Bluetooth 4.0 or above (Bluetooth Low Energy)
- A browser with Web Bluetooth API support (currently, only Chromium based browser support this feature)
- e.g. Chromium, Google Chrome, Edge, Samsung Internet, ...
- If you are running Chrome on Linux, make sure the flag for "Web Bluetooth" is enabled under chrome://flags/#enable-web-bluetooth
For development
Nix development environment
- Ensure Nix is installed on your workstation and flakes are enabled
Classic development environment
- npm (install by installing Node.js)
How to use
- Visit the page in your browser
- Click "Load Effects"
- A Bluetooth connection popup will show up, choose your device
- If the device hasn't been paired before, you will be asked for the pairing code
- Choose an LED effect from the dropdown
- Click "Set Effect" to apply the effect
How to develop
- If using Nix: First enter the dev shell using
nix develop - Install npm packages using
npm install - Build and run using
npm run dev - Open http://localhost:5173/ in your web browser
PWA development
To test the PWA, you will need to make a full static build.
- Build using
npm run build - Start the Vite web server using
npm run preview - Open http://localhost:4173/ in your web browser
How to deploy
Nix development environment
- Build using
nix build .#dist - A derivation containing all the content of the web app will be built and symlinked to
./result - Deploy the content of that folder to a static web server
Classic development environment
- Install npm packages using
npm install - Build the project using
npm run build - A
distfolder will be generated - Deploy the content of that folder to a static web server