readme update and small fixes

Author: jodermo

README.md

@@ -1,10 +1,28 @@
 # Angular Synthesizer
-Modular Synthesizer • Angular • Web Audio API • Web MIDI API 
+Demo: [synthesizer.petzka.com](http://synthesizer.petzka.com)
+
+Modular Synthesizer • Angular • Web Audio API • Web MIDI API • MIDI Device Detection • Local Storage
 ###### *© 2019 - Moritz Petzka - [petzka.com](https://petzka.com/)*
 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
 
 | Frameworks | | Links |
 | ---:| :--- | :--- |
-| <img src="https://angular.io/assets/images/logos/angular/angular.svg" height="64" alt="Angular Logo" /> | Integration as Angular Module | [WEBSITE](https://angular.io) <br> [DOCS](https://angular.io/docs)|
+| <img src="https://angular.io/assets/images/logos/angular/angular.svg" height="64" alt="Angular Logo" /> Angular | Integration as Angular Module | [WEBSITE](https://angular.io) <br> [DOCS](https://angular.io/docs)|
+| <img src="https://material.angular.io/assets/img/angular-material-logo.svg" height="64" alt="Angular Logo" /> Angular Material | Uses Angular Material | [WEBSITE](https://material.angular.io/) <br> [DOCS](https://material.angular.io/guide/getting-started)|
 | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/1200px-W3C%C2%AE_Icon.svg.png" height="64" alt="Nest Logo" /><br> Web Audio API | Generate and modify audio in browser | [INFOS](https://www.w3.org/TR/webaudio/)|
 | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/1200px-W3C%C2%AE_Icon.svg.png" height="64" alt="Nest Logo" /><br> Web MIDI API | Use MIDI devices in browser | [INFOS](https://www.w3.org/TR/webmidi/)|
+
+
+## Angular integration
+To integrate this module in your Angular project:
+### Add import to `app/app.module.ts`
+
+```javascript
+ imports: [
+ SynthesizerModule
+ ],
+```
+
+### Angular Material has to be installed
+Install Angular Material in your Project with:
+`ng add @angular/material`

midi-controller/midi-controller.component.html

@@ -1,5 +1,6 @@
 <div *ngIf="synthesizer && synthesizer.midi && synthesizer.midi.controllers"
  class="midi-controllers">
+ <h2 *ngIf="synthesizer.midi.controllers.length">MIDI devices</h2>
  <button class="midi-controller" *ngFor="let controller of synthesizer.midi.controllers"
  (click)="controller.toggleActive()"
  [ngClass]="{active:(controller.active)}"

midi-controller/midi-controller.component.scss

@@ -5,5 +5,10 @@
 
  .midi-controller {
  flex: 1;
+ cursor: pointer;
+
+ &.active {
+ background: #00c8ff;
+ }
  }
 }

piano-keys/piano-keys.component.html

@@ -17,7 +17,6 @@
 
  </div>
  </div>
- {{currentNote}} {{currentOctave}}
  <div class="piano-keys-keyboard"
  (mousedown)="mouseDown = true; onMouseMove(pressedKey, pressedOctave);"
  (mouseup)="mouseDown = false; onMouseMove(pressedKey, pressedOctave);"

synthesizer-control/synthesizer-control.component.scss

@@ -246,3 +246,12 @@ $slider_background: #ccc;
 
 }
 
+.hidden {
+ width: 0;
+ height: 0;
+ position: absolute;
+ opacity: 0;
+ z-index: -10;
+ pointer-events: none;
+}
+

synthesizer.component.scss

@@ -65,4 +65,5 @@
 
  }
 
+
 }

synthesizer.component.ts

@@ -1,6 +1,5 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { LFO, OSC, Synthesizer, SynthesizerService } from './synthesizer.service';
-import { AppService } from '../../core/services/app.service';
 
 
 @Component({
@@ -19,7 +18,7 @@ export class SynthesizerComponent implements OnInit {
  octaves = 4;
  connectLfo: LFO;
 
- constructor(public app: AppService, public audioEditor: SynthesizerService, private ref: ChangeDetectorRef) {
+ constructor(public audioEditor: SynthesizerService) {
  this.synthesizer = new Synthesizer(3);
  if (this.synthesizer.oscs) {
  this.currentOsc = this.synthesizer.oscs[0];