<!-- Buttons Controls --> <div class="buttons-control"> <button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} +' 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='{{ "i18n.action.zoom" | translate | titleCase }} -' 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='{{ "i18n.action.center" | translate | titleCase }}' 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='{{ "i18n.action.delete" | translate | titleCase }}' 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='{{ "i18n.action.download" | translate | titleCase }} 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" closePopoverDirective [ngbPopover]=popoverCanvas popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}' #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="grid" class="form-control form-control-sm" [checked]= settings.grid (click)="toggleGrid()"> {{ "i18n.object.grid" | translate | titleCase }} </label> <label> <input type="checkbox" name="axis" class="form-control form-control-sm" [checked]= settings.axis (click)="toggleAxis()"> {{ "i18n.object.axes" | translate | titleCase }} </label> <label> <input type="checkbox" name="tip" class="form-control form-control-sm" [checked]= settings.tip (click)="toggleTip()"> {{ "i18n.object.tip" | translate | titleCase }} </label> <label [class.disabled]="funciones.length === 0"> <input type="checkbox" [attr.disabled]="funciones.length === 0 ? '' : null" [checked]=animation.boton (click)="multiGraf(value)"> {{ "i18n.msg.figure.multiPlot" | translate | titleCase }} </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;"> {{ "i18n.action.zoom" | translate | titleCase }} </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>{{ "i18n.msg.figure.animationSpeed" | translate }}:</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.0'}}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>