Equalizer

Build a sinus with angular & canvas

by Yonathan Benitah

HTML

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<div ng-controller="myController">
<div ng-repeat="model in models">
<label>{{model.type}}</label><input type="number" ng-model="model.value">
</div>
<canvas width="400" height="300"  my-slider ng-model="models"></canvas>
</div>

JavaScript

var app = angular.module('myApp', [])

.controller('myController', function ($scope) {
    $scope.models = [{
    	type: 'bass',
      value: 3,
      offset: 10
    },
    {
    	type: 'middle',
      value: 10,
      offset: 133
    },
    {
    	type: 'treble',
      value: 0,
      offset: 266
    }
    ]
    })
    .directive('mySlider', function(){
    return {
    scope: { model: '=ngModel' },
    controller: function($scope){
    $scope.drawSinus = function(){
    $scope.ctx.clearRect(0, 0, $scope.canvas.width, $scope.canvas.height);
		
    $scope.flag = true;
		$scope.ctx.lineWidth = 5;
		$scope.ctx.strokeStyle = '#333';
		$scope.ctx.beginPath();
		$scope.ctx.moveTo(2, $scope.model[0].value);
    $scope.ctx.bezierCurveTo(2, $scope.model[0].value ,2, $scope.model[0].value, $scope.model[0].offset, $scope.model[0].value);
     for(var i=1; i< $scope.model.length; i++){
      $scope.ctx.bezierCurveTo($scope.model[i-1].offset+20, $scope.model[i-1].value ,$scope.model[i].offset-20, $scope.model[i].value, $scope.model[i].offset, $scope.model[i].value);
    }
    $scope.ctx.bezierCurveTo($scope.canvas.width - 2, $scope.model[$scope.model.length-1].value
    ,$scope.canvas.width - 2, $scope.model[$scope.model.length-1].value,
    $scope.canvas.width - 2, $scope.model[$scope.model.length-1].value);
		$scope.ctx.stroke();
    }
    },
    link: function(scope, $elem, attrs){
    scope.canvas = $elem[0];
    scope.flag = false;
    //debugger;
    scope.ctx = scope.canvas.getContext('2d');
    //console.log(scope.model);
     //console.log(attrs.width);
     scope.points = new Array(scope.model.length);
    
    for(var i=0; i< scope.model.length; i++){
    console.log(scope.model[i])
      scope.$watchCollection('model['+i+']', function(value){
      if(value && scope.flag){
      console.log('new value', value);
       scope.drawSinus();
       }
    })
    }
    scope.drawSinus();
    }
    };
    })