Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- 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"
[ngbPopover]=popoverCanvas
#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>
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!-- 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>
</div>
<div class="animation-controls setting-section"
[class.disabled]="animation.data.length === 0">
<label>Velocidad de animación:</label>
<label>
<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()'>
<i class="fa fa-undo"></i>
</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">
1x
</span>
</label>
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
</ng-template>
<!-- Animation -->
<!-- <div class="animation" *ngIf="animation.data.length>0"> -->
<div class="animation">
<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>