completely finished with new knobs

Author: nodeful

ui/src/app/app.component.html

@@ -1,4 +1,4 @@
-<!-- <div #container class="container">
+<div #container class="container">
   <eqm-loading class="loader" *ngIf="!loaded"></eqm-loading>
   <eqm-header class="header" 
     (settingsToggled)="toggleDropdownSection('settings')"
@@ -29,9 +29,4 @@
   <eqm-outputs></eqm-outputs>
   <eqm-tooltip-container></eqm-tooltip-container>
 </div>
- -->
-<div style="background-color: #2C2C2E; padding: 20px">
-  <eqm-knob size="large"></eqm-knob>
-  <eqm-knob size="medium"></eqm-knob>
-  <eqm-knob size="small"></eqm-knob>
-</div>
+

ui/src/app/app.component.ts

@@ -39,15 +39,15 @@ export class AppComponent implements OnInit, AfterContentInit {
   ) { }
 
   async ngOnInit () {
-    // this.sync()
-    // this.analytics.send()
+    this.sync()
+    this.analytics.send()
   }
 
   async ngAfterContentInit () {
-    // await this.utils.delay(this.animationDuration)
-    // this.syncDimensions()
-    // this.startDimensionsSync()
-    // this.loaded = true
+    await this.utils.delay(this.animationDuration)
+    this.syncDimensions()
+    this.startDimensionsSync()
+    this.loaded = true
   }
 
   async sync () {

ui/src/app/modules/eqmac-components/assets/knobs/medium/cap.svg

@@ -10,16 +10,16 @@
     <div class="cap">
       <svg width="58px" height="58px">
         <defs>
-          <clipPath id="large-knob-cap-clip-path" clipPathUnits="objectBoundingBox" [ngStyle]="getLargeCapClipPathStyle()">
+          <clipPath [id]="'large-knob-cap-clip-path-' + id" clipPathUnits="objectBoundingBox" width="58px" height="58px" [ngStyle]="largeCapClipPathStyle">
             <path d="M0.95,0.28C0.93,0.36,0.95,0.43,1,0.5c0,0,0,0,0,0c0,0.08-0.02,0.15-0.05,0.22C0.88,0.75,0.83,0.81,0.81,0.89
               C0.75,0.94,0.68,0.97,0.6,0.99c-0.07-0.03-0.13-0.03-0.2,0c-0.08-0.02-0.15-0.05-0.21-0.1C0.17,0.81,0.12,0.75,0.05,0.72
               C0.02,0.65,0,0.58,0,0.5c0,0,0,0,0,0c0.05-0.06,0.07-0.14,0.05-0.22C0.09,0.21,0.14,0.14,0.2,0.1c0.07,0,0.13-0.03,0.17-0.08
               C0.42,0.01,0.46,0,0.5,0c0.04,0,0.09,0.01,0.12,0.02C0.67,0.07,0.73,0.1,0.8,0.1C0.86,0.14,0.91,0.21,0.95,0.28z"/>
           </clipPath>
         </defs>
       </svg>
-      <div class="cap-body"></div>
-      <div class="indicator" [ngStyle]="getLargeCapIndicatorStyle()">
+      <div class="cap-body" [ngStyle]="largeCapBodyStyle"></div>
+      <div class="indicator" [ngStyle]="largeCapIndicatorStyle">
         <img class="inner-line" src="assets/knobs/large/cap-inner-line.svg" onload="SVGInject(this)"/>
         <div class="pointer"></div>
       </div>
@@ -31,7 +31,7 @@
     <img class="scale" src="assets/knobs/medium/scale.svg" onload="SVGInject(this)" />
     <div class="slot"></div>
     <div class="body"></div>
-    <div class="cap" [ngStyle]="getMediumCapIndicatorStyle()">
+    <div class="cap" [ngStyle]="mediumCapIndicatorStyle">
       <img src="assets/knobs/medium/cap.svg" onload="SVGInject(this)" />
     </div>
   </div>
@@ -42,7 +42,7 @@
     <div class="slot"></div>
     <div class="body"></div>
 
-    <div class="cap" [ngStyle]="getSmallCapIndicatorStyle()">
+    <div class="cap" [ngStyle]="smallCapIndicatorStyle">
       <img src="assets/knobs/small/cap.svg" onload="SVGInject(this)" />
     </div>
   </div>

ui/src/app/modules/eqmac-components/assets/knobs/small/cap.svg

@@ -68,21 +68,16 @@
     .cap {
       @include center();
       @include size(58px);
-      filter: drop-shadow(0 -0.1px 0px #FFF3)
-      drop-shadow(0 1px 0.5px black);
-
-      #large-knob-cap-clip-path {
-        @include size(58px);
-        transform-origin: 50% 50%;
-      }
+      filter: drop-shadow(0 -1px 0px #FFF3)
+      drop-shadow(0 2px 5px black);
 
       .cap-body {
         @include center();
         @include size(58px);
         // @include shadow(2px, 0px);
 
         background-image: linear-gradient(to bottom, #51555A, #3C4045);
-        clip-path: url('#large-knob-cap-clip-path');
+        // clip-path: url('#large-knob-cap-clip-path');
       }
 
       .indicator {

ui/src/app/modules/eqmac-components/components/knob/knob.component.html

@@ -9,7 +9,7 @@ import {
   HostBinding,
   ElementRef
 } from '@angular/core'
-
+import * as uuid from 'uuid/v4'
 import { UtilitiesService } from '../../services/utilities.service'
 
 export interface KnobValueChangedEvent {
@@ -24,7 +24,7 @@ export interface KnobValueChangedEvent {
 export class KnobComponent implements OnInit {
   @Input() size: 'large' | 'medium' | 'small' = 'medium'
   @Input() showScale = true
-
+  id = uuid()
   private _min = -1
   @Input() set min (newMin) { this._min = newMin; this.calculateMiddleValue() }
   get min () { return this._min }
@@ -44,7 +44,6 @@ export class KnobComponent implements OnInit {
   @Output() stickedToMiddle = new EventEmitter()
 
   private dragging = false
-  private padding = 5
   private setDraggingFalseTimeout: any = null
   private continueAnimation = false
   private dragStartDegr = 0
@@ -77,7 +76,6 @@ export class KnobComponent implements OnInit {
     }
     this._value = this.clampValue(value)
     this.valueChange.emit(this._value)
-    this.setKnobImage(this._value)
   }
   get value () {
     return this._value
@@ -93,7 +91,6 @@ export class KnobComponent implements OnInit {
 
   async ngOnInit () {
     this.container = this.containerRef.nativeElement
-    this.setKnobImage(this._value)
   }
 
   mouseWheel (event) {
@@ -143,7 +140,7 @@ export class KnobComponent implements OnInit {
       if (this.dragging) {
         this.continueAnimation = false
         const distanceFromCenter = this.getDistanceFromCenterOfElementAndEvent(event)
-        const unaffectedRadius = (this.container.clientWidth + this.padding * 2) / 7
+        const unaffectedRadius = (this.container.clientWidth) / 7
         if (distanceFromCenter < unaffectedRadius) {
           return
         }
@@ -184,28 +181,35 @@ export class KnobComponent implements OnInit {
     }
   }
 
-  largeCapMaxAngle = 130
-  getLargeCapClipPathStyle () {
+  largeCapMaxAngle = 135
+  get largeCapClipPathStyle () {
     return {
-      transform: `rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`
+      transform: `rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`,
+      'transform-origin': '50% 50%'
     }
   }
 
-  getLargeCapIndicatorStyle () {
+  get largeCapIndicatorStyle () {
     return {
       transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`
     }
   }
 
+  get largeCapBodyStyle () {
+    return {
+      'clip-path': `url(#large-knob-cap-clip-path-${this.id})`
+    }
+  }
+
   mediumCapMaxAngle = 135
-  getMediumCapIndicatorStyle () {
+  get mediumCapIndicatorStyle () {
     return {
       transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.mediumCapMaxAngle, this.mediumCapMaxAngle)}deg)`
     }
   }
 
   smallCapMaxAngle = 135
-  getSmallCapIndicatorStyle () {
+  get smallCapIndicatorStyle () {
     return {
       transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.smallCapMaxAngle, this.smallCapMaxAngle)}deg)`
     }
@@ -235,17 +239,17 @@ export class KnobComponent implements OnInit {
   }
 
   private getDegreesFromEvent (event) {
-    const coords = this.utils.getCoordinatesInsideElementFromEvent(event)
-    const knobCenterX = (this.container.clientWidth + this.padding * 2) / 2
-    const knobCenterY = (this.container.clientHeight + this.padding * 2) / 2
+    const coords = this.utils.getCoordinatesInsideElementFromEvent(event, this.container)
+    const knobCenterX = (this.container.clientWidth) / 2
+    const knobCenterY = (this.container.clientHeight) / 2
     const rads = Math.atan2(coords.x - knobCenterX, coords.y - knobCenterY)
     return rads * 100
   }
 
   private getDistanceFromCenterOfElementAndEvent (event) {
-    const coords = this.utils.getCoordinatesInsideElementFromEvent(event)
-    const knobCenterX = (this.container.clientWidth + this.padding * 2) / 2
-    const knobCenterY = (this.container.clientHeight + this.padding * 2) / 2
+    const coords = this.utils.getCoordinatesInsideElementFromEvent(event, this.container)
+    const knobCenterX = (this.container.clientWidth) / 2
+    const knobCenterY = (this.container.clientHeight) / 2
     const w = coords.x - knobCenterX
     const h = coords.y - knobCenterY
     return Math.sqrt(w * w + h * h)
@@ -262,9 +266,4 @@ export class KnobComponent implements OnInit {
 
     return value
   }
-
-  private setKnobImage (value: number) {
-
-  }
-
 }