Angular UI components for building applications for guitarists.
This is a new project that is actively under development. There will be refactoring!
Table of Contents
NG-Guitar is a collection of components for Angular Material that are intended to be used together to build guitar related web applications.
Here's why:
- There's lots of great guitar focussed projects on GitHub but none I could find on this tech stack.
- I was looking for a way to build a guitar related web application that was easy to use and easy to maintain.
- It's really not a good idea for anyone to become the ghost that codes.
- It's a playground for me to experiment with web technologies well away from anything that may have any IP overlap with my day job 😉
This project is built using:
Given the golden rule of development is YAGNI, then to mangle a musical metaphor, the obvious question when you first look at this project is why is it turned up to eleven. Or for those who don't speak tap why is it so extra. Why is there quite so much code and supporting infrastructure for what could be implemented quite simply? Well as I don't have a lot of time to work on this then I wanted anything I built to be easy to support and maintain. If you would like to know more about the sights, the sounds... the smells... of the technologies I use then please feel free to check out the Technölogy Stäck page.
It's really easy to get started with NG-Guitar.
These components are currently built for use on top of Angular Material and TypeScript. You'll need to have a project based on this tech stack in order to use them.
This is a new project under active development. There will be refactoring! The intention is once the components reach a suitable level of maturity they will be published as packages. If you are interested in checking out progress and how they are evolving see the Storybook or Compodoc pages
When the components are published as packages, we will add instructions here so you will be able to use them in your own projects.
Examples of the Components in use and the latest Demo can be found here.
This instructions below describe on setting up your project locally. To get a local copy up and running follow these simple example steps.
Contributions, issues and feat requests are welcome!
npm install --legacy-peer-depsnpm run startnpm run testSee Commit Rules
Feel free to check issues page.
I find it difficult to keep focus when practicing the guitar scales and patterns that make up the foundations of improvisation. I seem to be switching between tinkering with the metronome, referring to reference materials for whatever I'm learning to practice. trying to track how long I've been practicing any one thing and my overall progress, so I know what weak spots to focus on. This seems like a good candidate for an app, in fact I can think of a few different guitar-based apps that don't seem to currently exist, so the plan here is to build the elements of this as re-usable components and then later make those components available as packages.
The aim is that the initial app will provide a metronome that can be configured to accelerate to help speed training. This will have a scrolling tab display linked to it which will suggest patterns to practice. These patterns will evolve in complexity over time. The app should track how long you have been practicing and suggest regular breaks to avoid repetitive strain injuries. The app should take advantage of what psychological research about learning shows us and feature on one pattern to learn, switch to another then switch back to re-enforce the learning of the patterns.
It would great as a future enhancement if note recognition could be integrated so the application can give feedback and give better automatic control of progression through increasingly complex exercises.
- feat:
Accurate Typescript Metronome Component - chore:
setup dependabot - ci:
add commitlint to enforce conventioanl commits - feat:
add storybook and compodoc - feat(scroller):
simple animated tab scroller - feat(fretboard): Show notes in key
- feat(fretboard): chord pattern visualization component
- feat(fretboard): refactor fretboard to be closer to material list
- feat(fretboard): refactor fretboard to support left handed users
- feat(fretboard): refactor fretboard to support responsive design
- feat(fretboard): implement material theming
- feat(fretboard): highlight notes from key
- feat(demo): add theme switching to demo
- feat(scroller): add theme switching to demo
- feat(docs): add https://github.com/DavidWells/markdown-magic/
- feat(metronome): SVG based metronome visulisation component
- chore(ci): refactor ci pipeline to only build affected
- chore(ci): add semver and changelog generation
- feat(demo): getting started page for consumers
- feat(demo):about, version and dependency display
- feat(metronome): speed trainer i.e. define min max range, incrementally accellerate
- feat(feedback): experimental in browser ML note recognition
- feat(etude): practice pattern generator
- fix:
bind tempo to tempo not tickcount - fix:
svg header/footer background path when publishing to subdirectory - fix(docs): storybook material theming
- fix(fretboard): fretmarkers do not respect number of frets
- fix(demo): dead menu space on initial load
- fix(ci): semver numbering not written back to main package.json
Give a ⭐️ if this project helped you!
Copyright © 2022 T.D.Morris.
This project is MIT licensed.
👤 TimDMorris
- Website: https://cambridgemonorail.github.io/ng-guitar/
- Twitter: @TimDMorris
- Github: @TimDMorris
- LinkedIn: @timdmorris