better-nothing-glyph-composer - GitLite

KO | EN

gitlite — search

#javascript #react #ai #llm #machine-learning #deep-learning #linux #docker #macos #windows #awesome #cli #pytorch #mcp

better-nothing-glyph-composer

(★ 129)

Better Nothing Glyph Composer for Phone(1), Phone (2) & Phone(2a). Phone(1) 15 Zone mode is also supported, experimental tho!

File Explorer

Download Latest Version (.zip)

- FUNDING.yml
- SS.png
- favicon.ico
- generate-test-fixtures.ts
- generate-video-with-ffmpeg.sh
- - export.test.ts
  - helpers.test.ts
  - import.test.ts
  - multi-device-audio-format.test.ts
  - np3-integration.test.ts
  - np3-output-generation.test.ts
  - process.test.ts
  - setup.ts
  - test-utils.ts
- - ndot.otf
- - area_select_context.tsx
  - area_selection_helper.ts
  - consts.ts
  - data_store.ts
  - glyph_model.ts
  - helpers.ts
  - timeline_state.ts
  - utils.ts
- - export_logic.ts
  - ffmpeg_service.ts
  - hc_tb.tsx
  - np3_audio_service.ts
  - video_editor_service.ts
- - NP3Page.tsx
- App.tsx
- index.css
- main.tsx
- routes.tsx
- vite-env.d.ts
.gitignore
.prettierrc
components.json
eslint.config.js
index.html
package-lock.json
package.json
pnpm-lock.yaml
postcss.config.js
README.md
tailwind.config.js
tsconfig.app.json
tsconfig.app.tsbuildinfo
tsconfig.json
tsconfig.node.json
tsconfig.node.tsbuildinfo
vite.config.ts
vitest.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/Krishnagopal-Sinha/better-nothing-glyph-composer

Downloads the entire project code from GitHub to your computer.

cd better-nothing-glyph-composer

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm test

Type this command into your terminal and run it.

npm test -- --watch

Type this command into your terminal and run it.

npm test:ui

Type this command into your terminal and run it.

npm test:coverage

Type this command into your terminal and run it.

npm run generate-fixtures

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🌟 Better Nothing Glyph Composer (ツ)

Bring your Nothing Phone's tones to life with light and sound! This side project is my attempt to add a fun and creative twist to my Nothing Phone (1) experience. As an already overworked developer, I put this together in my spare time, so any help is greatly appreciated. With this app, you can craft custom ringtones from your favorite audio files and synchronize them with the light patterns on the back of your Nothing phone, known as "Glyphs".

## 👾 Demo

Screenshot:

![Screenshot BNGC](https://raw.githubusercontent.com/Krishnagopal-Sinha/better-nothing-glyph-composer/main/demo/SS.png)

Videos:

https://github.com/user-attachments/assets/c1c50cbe-a1ae-49be-8d99-273252b56eb7

https://github.com/user-attachments/assets/c75d99f3-87ec-4478-bbb7-96d15cb12880

https://github.com/user-attachments/assets/0dbcb302-aa48-467d-81e9-e0b2097639b0

## 🚀 Features

- **Load Audio Files**: Import your favorite `.mp3` or `.ogg` files to start creating.
- **Media Controls**: Easily play, pause, stop, and seek through your audio tracks.
- **Auto Generate Glyphs**: Generate Glyph lighting automatically on basis of audio, for all Nothing Phone (in Alpha)
- **Glyph Editing**: Customize Glyphs with an intuitive editor that feels like a professional timeline tool.
- **Interactive Glyph Blocks**:
  - Add as many glyph blocks as you'd like
  - Don't like a glyph block? Delete it.
  - Drag to move a block around
  - Select to Trim and adjust
  - Keyboard gestures like spacebar to play/pause
  - Auto Generate Glyph effects
  - Generate Glyph Blocks on basis of custom parameters
  - ...and tons more
- **Visual Navigation**: Scroll to explore your glyph edits on track effortlessly.
- **Tip**: Hovering over elements for a while will show a helpful pop up with tips in most cases!

## 🎨 How to Use (Instructions)

1. **Load Your Audio**:

- Start by loading your audio file (supports `.mp3` and `.ogg` formats).

2. **Edit Glyphs**:

- **Double tap** on the track to add a Glyph block.
   - **Right click** on a block to delete it.
   - **Drag** from the left side to move, or from the right to resize.
   - **Select** and select right trim handle to trim and adjust
   - **Scroll** right and left (x-axis) to explore your track effortlessly.

3. **Save Your Creation**:

- Click the save icon (floppy disk), rename your file (make sure it ends with `.ogg`), and save it.

4. **Apply Your Ringtone**:
   - Open the official Composer app from Nothing.
   - Go to 'Library' via the 3-dash icon (make sure you have existing recordings for the icon to appear).
   - Use the top-right 3-dot menu to import your saved file.
   - Scroll to the top of 'Library' if you can’t find your file, preview it, and set it as your default ringtone.

## 🧪 Testing

This project includes comprehensive test coverage to ensure reliability and correctness.

### Running Tests

```bash
# Run all tests
npm test

# Run tests in watch mode
npm test -- --watch

# Run tests with UI
npm test:ui

# Run tests with coverage
npm test:coverage
```

### Test Structure

- **Unit Tests**: Test individual functions and utilities

- `helpers.test.ts` - Helper functions and utilities
  - `import.test.ts` - JSON import and file validation
  - `export.test.ts` - CSV generation and encoding
  - `process.test.ts` - Video and audio processing logic

- **Integration Tests**: Test complete workflows
  - `np3-integration.test.ts` - NP3 device audio/video processing
  - `np3-output-generation.test.ts` - End-to-end output file generation
  - `multi-device-audio-format.test.ts` - Multi-device (NP1, NP2, NP3) and multi-format (WAV, MP3, OGG, AAC) compatibility

### Test Fixtures

Test fixtures are automatically generated and include:

- **Audio Files**: Metronome beeps (5 seconds, 5 beeps at 1-second intervals) in WAV, MP3, and OGG formats
- **Video Files**: 120-frame test video (2 seconds at 60fps) with frame numbers

To regenerate test fixtures:

```bash
npm run generate-fixtures
npm run generate-video  # Requires FFmpeg
```

### Test Coverage

The test suite validates:

- ✅ Audio processing for all formats (WAV, MP3, OGG, AAC)
- ✅ Video processing with crop settings
- ✅ Frame analysis and brightness map generation
- ✅ CSV data generation and encoding
- ✅ OGG file generation with embedded glyph data
- ✅ Multi-device compatibility (NP1, NP2, NP3)
- ✅ End-to-end workflows (import → process → export)

## 📜 Early Release Notes

- **Stay Humorous**: Remember, this is an early version, so let's keep a light-hearted approach while using it! 😄
- **More Demo & Discussion**: Available on this forum channel on [Nothing's official discord server channel](https://discord.com/channels/930878214237200394/1275717674634051661)

## 📫 Contributing

Contributions are welcomed! Feel free to open issues or submit pull requests.

## 🙌 Credits

- Special thanks to the amazing contributors behind [custom-nothing-glyph-tools](https://github.com/SebiAi/custom-nothing-glyph-tools)! For their comprehensive technical documentation. It guided me through the process and demystified the magic behind Nothing Glyphs! 🚀
- A huge thank you to SebiAi (creator of the above) for generously dedicating time to checkout and test my project. His feedback and support were invaluable! 🙏🎉

## 📄 License

This project is licensed under the GNU General Public License v3.0.

---

Happy Composing! 🎵✨
Disclaimer: I am not affiliated with Nothing. This is just a personal hobby project.

---

_Made with ❤️ by Krishnagopal Sinha_

## 🤝 Donation Links

[![Donate with PayPal](https://raw.githubusercontent.com/stefan-niedermann/paypal-donate-button/master/paypal-donate-button.png)](https://paypal.me/krishnagopalsinha)

## TODO:

-[X] Auto Generate Glyphs

-[X] Exit confirmation feat. as while sliding on laptop one may trigger back gesture

-[X] Read glyph data from input ogg files

-[ ] Solve existing github issues

-[X] Add various effect feature

-[X] Snap to grid feature added, with BPM support and stuff!

-[X] Custom Rom Glyph Data Export

-[ ] Fix Timeline preview in composer or make it empty ish or somthing?

-[X] UI Refresh :eyes:

-[X] Add audio beat map / waveform

-[ ] Add visualizer or would that just slow the website down ?