<!-- Buttons Controls --> <div class="buttons-control"> <button ngbPopover="Zoom +" class="btn btn-sm btn-secondary btn-zoom-increase" data-placement="bottom" triggers="mouseenter:mouseleave" (click)=zoomIn() > <i class="fa fa-plus"></i> </button> <button ngbPopover="Zoom -" class="btn btn-sm btn-secondary btn-zoom-decrease" data-placement="bottom" triggers="mouseenter:mouseleave" (click)=zoomOut() > <i class="fa fa-minus"></i> </button> <button ngbPopover="Centrar" class="btn btn-sm btn-secondary btn-zoom-center" data-placement="bottom" triggers="mouseenter:mouseleave" (click)="recenterPlot()" > <i class="fa fa-arrows"></i> </button> <button ngbPopover="Borrar" class="btn btn-sm btn-secondary btn-trash" data-placement="bottom" triggers="mouseenter:mouseleave" (click)="cleanPlot()" > <i class="fa fa-trash"></i> </button> <button ngbPopover="Descargar PNG" class="btn btn-sm btn-secondary btn-download" data-placement="bottom" triggers="mouseenter:mouseleave" (click)=exportPlot() > <i class="fa fa-download"></i> </button> <button id="settings" class="btn btn-sm btn-secondary btn-setting" placement="bottom" closePopoverOnOutsideClick [ngbPopover]=popoverCanvas popoverTitle="Configuración" #popover="ngbPopover" tiggers="click"> <i class="fa fa-gear"></i> </button> </div> <div class="card"> <div class="card-block contenedor-canvas" > <!-- Download Link --> <a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none"> Download Canvas </a> <!-- Settings Popover Content --> <ng-template #popoverCanvas> <div class="form-group settings-popover-content"> <div class="chart-controls setting-section"> <label> <input type="checkbox" name="settings.grid" class="form-control form-control-sm" [checked]=settings.grid (click)="toggleGrid()"> Grilla </label> <label> <input type="checkbox" name="settings.axis" class="form-control form-control-sm" [checked]=settings.axis (click)="toggleAxis()"> Ejes </label> <label> <input type="checkbox" name="settings.tip" class="form-control form-control-sm" [checked]=settings.tip (click)="toggleTip()"> Tip </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> <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" (change)="setZoom()" style="width: 70px;" /> </div> </div> <hr> <div class="animation-controls setting-section" [class.disabled]="animation.data.length === 0"> <label>Velocidad de animación:</label> <div> <button class="btn btn-sm btn-secondary" [attr.disabled]="animation.data.length === 0 ? '' : null" (click)='decreaseSpeed()'> <i class="fa fa-minus"></i> </button> <button class="btn btn-sm btn-secondary" [attr.disabled]="animation.data.length === 0 ? '' : null" (click)='restoreSpeed()'> <span>1x</span> </button> <button class="btn btn-sm btn-secondary" [attr.disabled]="animation.data.length === 0 ? '' : null" (click)='increaseSpeed()'> <i class="fa fa-plus"></i> </button> <span class="speed-value"> {{animation.speedX | number:'1.1'}}x </span> </div> </div> </div> </ng-template> <!-- Animation --> <div class="animation" *ngIf="animation.data.length>0"> <button class="btn btn-sm btn-secondary btn-play" data-placement="bottom" *ngIf="!animation.playing" (click)="runAnimation()" > <i class="fa fa-play"></i> </button> <button class="btn btn-sm btn-secondary btn-pause" data-placement="bottom" *ngIf="animation.playing" (click)="pauseAnimation()" > <i class="fa fa-pause"></i> </button> <ngb-progressbar class="progressbar" type="info" [value]="((animation.currentFrame+1)/animation.data.length)*100"> </ngb-progressbar> </div> <!-- Graph Container --> <div #graph2DContainer id="graph2D-container"> </div> </div> </div>