<div class="card"> <div class="card-block contenedor-canvas" > <button ngbPopover="Zoom +" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 165px; margin-top: -55px" (click)=zoomIn() ><i class="fa fa-plus"></i></button> <button ngbPopover="Zoom -" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 132px; margin-top: -55px" (click)=zoomOut() ><i class="fa fa-minus"></i></button> <button ngbPopover="Centrar" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style=" float:right; margin-right: 99px; margin-top: -55px" (click)="recenterPlot()" ><i class="fa fa-arrows"></i></button> <button ngbPopover="Borrar" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style=" float:right; margin-right: 66px; margin-top: -55px" (click)="cleanPlot()" ><i class="fa fa-trash"></i></button> <button ngbPopover="Descargar PNG" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 33px; margin-top: -55px" (click)=exportPlot() ><i class="fa fa-download"></i></button> <a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none">Download Canvas</a> <button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="!animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="runAnimation()" ><i class="fa fa-play"></i></button> <button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="pauseAnimation()" ><i class="fa fa-pause"></i></button> <ngb-progressbar style="float: left; width: 90%" *ngIf="animation.data.length>0" type="info" [value]="((animation.currentFrame+1)/animation.data.length)*100"></ngb-progressbar> <button [ngbPopover]=popoverConfig closePopoverOnOutsideClick placement="bottom" style=" float:right; margin-right: 1px; margin-top: -55px" tiggers="click" class="btn btn-sm btn-secondary" popoverTitle="Configuración" > <i class="fa fa-gear"></i> </button> <ng-template #popoverConfig> <div style="width: 140px;"> <label class="d-block"> <input type="checkbox" [checked]=animation.boton (click)="multiGraf(value)" > Multi gráficas: </label> <div style="display: flex;"> <span style="margin-right: 8px; align-self: center;"> Zoom: </span> <input type="number" class="form-control form-control-sm" [max]="10000" [min]="2" [(ngModel)]=animation.zoo (change)="setZoom()" style="width: 70px;" /> </div> </div> </ng-template> <div id="graph2D-container" style="height: 100%; width: 100%;"> </div> </div> </div>