diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html index c6085c07ab27aee3ecdecd1901995f03cb85ae21..226ea4cc8aa303b6aaebf2d336bb9030dd8481a3 100755 --- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html +++ b/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" + 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> diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss index 2586cd3f2f709619f5be3dcd74626e2f074d280f..e0b5c5d7dbc55bbb1deba0001e92ac1e708860a5 100644 --- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss +++ b/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 diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts index bedc95a0c8ff58ed72867b624368ab4c322037e0..bd6a9ff327ef49f671e30a7efb05bd6ccd2a58e0 100755 --- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts +++ b/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(); + } } diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts index 2016d2f3d2e40c97d816374ef49695178bcd0885..9e3aa6b4bcb1e39f658645a9b90128bb69e60446 100644 --- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts +++ b/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,