Web interface for the RGB cat ears
  • TypeScript 93.4%
  • CSS 3.2%
  • JavaScript 2.1%
  • Nix 0.8%
  • HTML 0.5%
Find a file
2026-03-21 13:34:21 +01:00
.forgejo/workflows Add Forgejo action 2025-07-18 17:26:50 +02:00
public Better icons 2025-06-26 20:23:04 +02:00
src Uncomment code 2026-03-21 13:34:21 +01:00
.envrc Add direnv, update flake 2025-12-29 14:22:50 +01:00
.gitignore Add direnv, update flake 2025-12-29 14:22:50 +01:00
eslint.config.mjs Rewrite everything in Preact 2025-06-17 16:53:18 +02:00
flake.lock Update dependencies, fix nix build 2026-03-13 14:05:51 +01:00
flake.nix Update dependencies, fix nix build 2026-03-13 14:05:51 +01:00
index.html modern interface beta 2026-03-07 20:23:12 +01:00
package-lock.json Update dependencies, fix nix build 2026-03-13 14:05:51 +01:00
package.json Update dependencies, fix nix build 2026-03-13 14:05:51 +01:00
postcss.config.js modern interface beta 2026-03-07 20:23:12 +01:00
README.md Add nix flake, update deps 2025-07-17 23:27:13 +02:00
tailwind.config.js modern interface beta 2026-03-07 20:23:12 +01:00
tsconfig.json Rewrite everything in Preact 2025-06-17 16:53:18 +02:00
vite.config.ts Better icons 2025-06-26 20:23:04 +02:00

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

Classic development environment

  • npm (install by installing Node.js)

How to use

  1. Visit the page in your browser
  2. Click "Load Effects"
  3. A Bluetooth connection popup will show up, choose your device
  4. If the device hasn't been paired before, you will be asked for the pairing code
  5. Choose an LED effect from the dropdown
  6. Click "Set Effect" to apply the effect

How to develop

  1. If using Nix: First enter the dev shell using nix develop
  2. Install npm packages using npm install
  3. Build and run using npm run dev
  4. Open http://localhost:5173/ in your web browser

PWA development

To test the PWA, you will need to make a full static build.

  1. Build using npm run build
  2. Start the Vite web server using npm run preview
  3. Open http://localhost:4173/ in your web browser

How to deploy

Nix development environment

  1. Build using nix build .#dist
  2. A derivation containing all the content of the web app will be built and symlinked to ./result
  3. Deploy the content of that folder to a static web server

Classic development environment

  1. Install npm packages using npm install
  2. Build the project using npm run build
  3. A dist folder will be generated
  4. Deploy the content of that folder to a static web server