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 40f0e6b168b83740f6332881e46f93a08dc03643..93f98c77c4d2b197a227f4a352966e327edcb3f5 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
@@ -1,82 +1,102 @@
<!-- 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>
+ <button
+ ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
+ class="btn btn-sm btn-secondary btn-zoom-increase"
+ 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"
+ 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"
+ 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"
+ 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"
+ 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>
+ <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>
+ <!-- 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"
@@ -85,86 +105,98 @@
(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>
+ <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>
- <ngb-progressbar
- class="progressbar"
- type="info"
- [value]="((animation.currentFrame+1)/animation.data.length)*100">
- </ngb-progressbar>
- </div>
+ <!-- Animation -->
+ <div class="animation" *ngIf="animation.data.length > 0">
+ <button
+ class="btn btn-sm btn-secondary btn-play"
+ placement="bottom"
+ *ngIf="!animation.playing"
+ (click)="runAnimation()"
+ >
+ <i class="fa fa-play"></i>
+ </button>
+ <button
+ class="btn btn-sm btn-secondary btn-pause"
+ placement="bottom"
+ *ngIf="animation.playing"
+ (click)="pauseAnimation()"
+ >
+ <i class="fa fa-pause"></i>
+ </button>
- <!-- Graph Container -->
- <div #graph2DContainer id="graph2D-container">
-
- </div>
+ <ngb-progressbar
+ class="progressbar"
+ type="info"
+ [value]="((animation.currentFrame + 1) / animation.data.length) * 100"
+ >
+ </ngb-progressbar>
</div>
-</div>
\ No newline at end of file
+
+ <!-- Graph Container -->
+ <div #graph2DContainer id="graph2D-container"></div>
+ </div>
+</div>
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
index b7cf48c9853b37bc62b3dbcdc12caf344390f847..3d92fb76c6b25ffbf4bce42d3aac385e702459bc 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
+++ b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
@@ -37,7 +37,7 @@
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
triggers="mouseenter:mouseleave"
- data-placement="bottom"
+ placement="bottom"
class="btn btn-sm btn-secondary"
(click)="zoomIn()"
>
@@ -47,7 +47,7 @@
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
triggers="mouseenter:mouseleave"
- data-placement="bottom"
+ placement="bottom"
class="btn btn-sm btn-secondary"
(click)="zoomOut()"
>
@@ -57,7 +57,7 @@
<button
ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
triggers="mouseenter:mouseleave"
- data-placement="bottom"
+ placement="bottom"
class="btn btn-sm btn-secondary"
(click)="center()"
>
@@ -145,7 +145,7 @@
<button
ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
triggers="mouseenter:mouseleave"
- data-placement="bottom"
+ placement="bottom"
class="btn btn-sm btn-secondary"
(click)="clear()"
>