Added speed controls for animation

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html

@@ -85,23 +85,25 @@
 							(click)="toggleTip()">
 						Tip
 					</label>
-				</div>
-				<hr>
-				<div class="setting-section">
-					<label>
+					<label [class.disabled]="funciones.length === 0">
 						<input
 							type="checkbox"
+							[attr.disabled]="funciones.length === 0 ? '' : null"
 							[checked]=animation.boton
 							(click)="multiGraf(value)">
 						Multi gráfica
 					</label>
-					<div style="display: flex;">
+				</div>
+				<hr>
+				<div class="zoom-control setting-section">
+					<div [class.disabled]="funciones.length === 0" style="display: flex;">
 						<span style="margin-right: 8px; align-self: center;">
 							Zoom
 						</span>
 						<input 
 							type="number" 
 							class="form-control form-control-sm"
+							[attr.disabled]="funciones.length === 0 ? '' : null"
 							[(ngModel)]="animation.zoo"
 							[max]="1000000"
 							[min]="8"
@@ -114,7 +116,7 @@
 				<div class="animation-controls setting-section"
 					[class.disabled]="animation.data.length === 0">
 					<label>Velocidad de animación:</label>
-					<label>
+					<div>
 						<button class="btn btn-sm btn-secondary"
 								[attr.disabled]="animation.data.length === 0 ? '' : null"
 								(click)='decreaseSpeed()'>
@@ -123,7 +125,7 @@
 						<button class="btn btn-sm btn-secondary"
 								[attr.disabled]="animation.data.length === 0 ? '' : null"
 								(click)='restoreSpeed()'>
-							<i class="fa fa-undo"></i>
+							<span>1x</span>
 						</button>
 						<button class="btn btn-sm btn-secondary"
 								[attr.disabled]="animation.data.length === 0 ? '' : null"
@@ -131,9 +133,9 @@
 							<i class="fa fa-plus"></i>
 						</button>
 						<span class="speed-value">
-							1x
+							{{animation.speedX | number:'1.1'}}x
 						</span>
-					</label>
+					</div>
 				</div>
 			</div>
         </ng-template>

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss

@@ -26,6 +26,9 @@
     width: 12em;
     label {
         display: block;
+        &.disabled {
+            color: #ccc;
+        }
     }
     input[type="checkbox"] {
         width: 15px;
@@ -43,11 +46,16 @@
         }
         &.disabled {
             color: #ccc;
-            i.fa {
+            i.fa, span {
                 color: #ccc;
             }
         }
     }
+    .zoom-control {
+        &>.disabled {
+            color: #ccc;
+        }
+    }
 }
 
 // Animation

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts

@@ -43,6 +43,7 @@ export class Graph2DComponent {
         timer: null,
         currentFrame: 0,
         speed: 1000,
+        speedX: 1.0,
         playing: false,
         init: false,
         boton: true,
@@ -353,13 +354,41 @@ export class Graph2DComponent {
         this.instance.removeAllGraphs();
     }
 
+    /**
+     * @name decreaseSpeed
+     * @desc Decrease Speed Animation
+     */
+    public decreaseSpeed = function() {
+        if (this.animation.speedX > 0.07) {
+            this.animation.speed *= 1.1;
+            this.animation.speedX -= 0.1;
+            this.pauseAnimation();
+            this.runAnimation();
+        }
+    }
+    
+    /**
+     * @name restoreSpeed
+     * @desc Increase Speed Animation
+     */
+    public restoreSpeed = function() {
+        this.animation.speed = 1000;
+        this.animation.speedX = 1;
+        this.pauseAnimation();
+        this.runAnimation();
+    }
+
     /**
      * @name increaseSpeed
      * @desc Increase Speed Animation
      */
     public increaseSpeed = function() {
-        this.animation.speed *= 1.5;
-        console.log(this.animation.speed);  
+        if (this.animation.speedX < 10) {
+            this.animation.speed *= 0.9;
+            this.animation.speedX += 0.1;
+            this.pauseAnimation();
+            this.runAnimation();
+        }
     }
 
 

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts

@@ -3,6 +3,7 @@ export interface Animation {
 	timer?: any,
 	currentFrame: number,
 	speed: number,
+	speedX: number,
 	playing: boolean,
 	init: boolean,
 	boton: boolean,