Commit 90200d00 authored by Diego Rey's avatar Diego Rey
Browse files

Fixed plotter 2D html, added speed control and fixed resposive grid

parent e842aa8d
......@@ -12,6 +12,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NotificacionModule } from '../../notificacion/notificacion.module';
import { Graph2DModule } from '../plotter/graph2D/graph2D.module';
import { Graph3DModule } from '../plotter/graph3D/graph3D.module';
import { ClosePopoverOnOutsideClickDirective } from '../../shared/utils/closePopoverDirective';
@NgModule({
imports: [
......@@ -30,7 +32,12 @@ import { Graph3DModule } from '../plotter/graph3D/graph3D.module';
ConfirmComponent,
SeleccionarDirectorioComp
],
declarations: [MateFunComponent,ConfirmComponent,SeleccionarDirectorioComp],
declarations: [
MateFunComponent,
ConfirmComponent,
SeleccionarDirectorioComp,
ClosePopoverOnOutsideClickDirective
],
exports: [MateFunComponent]
})
......
<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
<!-- 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
placement="bottom"
style=" float:right; margin-right: 1px; margin-top: -55px"
tiggers="click"
class="btn btn-sm btn-secondary"
[ngbPopover]=popoverCanvas
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>
#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 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;"
/>
<!-- 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>
</div>
</div>
</ng-template>
<div id="graph2D-container" style="height: 100%; width: 100%;">
</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>
\ No newline at end of file
// Buttons Control
.buttons-control {
.btn-zoom-increase, .btn-zoom-decrease, .btn-zoom-center, .btn-trash, .btn-download, .btn-setting {
float: right;
margin-top: -34px;
}
.btn-zoom-increase {
margin-right: 165px;
}
.btn-zoom-decrease {
margin-right: 132px;
}
.btn-zoom-center {
margin-right: 99px;
}
.btn-trash {
margin-right: 66px;
}
.btn-download {
margin-right: 33px;
}
}
// Settings Popover
.settings-popover-content {
width: 12em;
label {
display: block;
}
input[type="checkbox"] {
width: 15px;
display: inline-block;
}
.setting-section {
margin-bottom: 1em;
}
.animation-controls {
.speed-value {
margin-left: 0.5em;
font-weight: 900;
font-size: 1.2em;
vertical-align: middle;
}
&.disabled {
color: #ccc;
i.fa {
color: #ccc;
}
}
}
}
// Animation
.animation {
.btn-play, .btn-pause {
float:left;
margin-top: -5px;
margin-right: 5px;
}
.progressbar {
float: left;
width: 90%;
}
}
#graph2D-container {
height: 100%;
width: 100%;
}
import { Component } from '@angular/core';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { GHCIService } from '../../../shared/services/ghci.service';
import functionPlot from 'function-plot';
import { Animation, toJSON, triggerDownload } from './graph2D.helper';
import { Animation, Setting, toJSON, triggerDownload } from './graph2D.helper';
@Component({
moduleId: module.id,
selector: 'graph2D-component',
templateUrl: './graph2D.component.html',
styleUrls: ['./graph2D.component.scss'],
host: {
'(window:resize)': 'onResize($event)'
}
})
export class Graph2DComponent {
// Ghci Service
private ghciServiceSub: any;
private instance: null;
// Chart Container - DOM Element
@ViewChild('graph2DContainer')
private graph2DRef: ElementRef;
// Chart Instance
private instance: any;
// Settings
settings: Setting = {
axis: true,
grid: true,
tip: true
}
private funciones= [];
......@@ -23,6 +37,7 @@ export class Graph2DComponent {
private conjunto= [];
// Animation state
animation: Animation = {
data: [],
timer: null,
......@@ -146,11 +161,11 @@ export class Graph2DComponent {
color: color
});
}
let bounding = this.getBounding();
this.instance = functionPlot({
target: '#graph2D-container',
width: 620,
height: 450,
width: bounding.width,
height: bounding.height,
tip: { color: 'green' },
xAxis: { label: 'x - axis',
scale: 'linear',
......@@ -170,11 +185,13 @@ export class Graph2DComponent {
case 'canvas': {
var shapesData = JSON.parse(canvas.resultado);
var shapesDataNormalized = this.normalizeShapesData(shapesData);
this.instance = null;
let bounding = this.getBounding();
this.cleanPlot();
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
width: bounding.width,
height: bounding.height,
grid: true,
xAxis: {
label: 'x - axis',
scale: 'linear',
......@@ -190,7 +207,8 @@ export class Graph2DComponent {
})
break;
}
case 'animacion': {
case 'animacion': {
this.cleanPlot();
var animationData = canvas.resultado.map(res => JSON.parse(res));
for (var frame of animationData) {
this.animation.data.push(this.normalizeShapesData(frame));
......@@ -212,10 +230,12 @@ export class Graph2DComponent {
*/
ngAfterViewInit() {
if (!this.instance) {
let bounding = this.getBounding();
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
width: bounding.width,
height: bounding.height,
grid: true,
xAxis: {
label: 'x - axis',
scale: 'linear',
......@@ -239,6 +259,33 @@ export class Graph2DComponent {
}
}
/**
* On Resize Event.
*/
onResize(event){
let instance = this.instance;
let bounding = this.getBounding();
//if (bounding.width > 0) {
console.log('yes');
instance.options.width = bounding.width;
instance.options.height = bounding.height;
instance.build();
//}
}
onClickMe(event) {
console.log('click');
}
/**
* @name getBounding
* @desc get the measures of the container of the graph
*/
private getBounding = function() {
const {width, height} = this.graph2DRef.nativeElement.getBoundingClientRect();
return {width, height}
}
/**
* @name updateFrame
* @desc update data for Function Plot and redraw the graph
......@@ -248,10 +295,11 @@ export class Graph2DComponent {
this.instance.options.data = d;
this.instance.draw();
} else {
let bounding = this.getBounding();
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
width: bounding.width,
height: bounding.height,
xAxis: {
label: 'x - axis',
scale: 'linear',
......@@ -260,10 +308,7 @@ export class Graph2DComponent {
type: 'discrete'
}
},
data: d,
plugins: [
functionPlot.plugins.zoomBox()
]
data: d
})
}
// Update Frame
......@@ -308,6 +353,40 @@ export class Graph2DComponent {
this.instance.removeAllGraphs();
}
/**
* @name increaseSpeed
* @desc Increase Speed Animation
*/
public increaseSpeed = function() {
this.animation.speed *= 1.5;
console.log(this.animation.speed);
}
/**
* @name toggleGrid
* @desc Show and Hide Grid
*/
public toggleGrid = function () {
//this.instance.toggleGrid();
}
/**
* @name toggleAxis
* @desc Show and Hide Axis
*/
public toggleAxis = function () {
//this.instance.toggleAxis();
}
/**
* @name toggleTip
* @desc Show and Hide Tip
*/
public toggleTip = function () {
//this.instance.toggleTip();
}
/**
* @name zoomOut
* @desc Zoom Out Button Control
......
......@@ -9,6 +9,12 @@ export interface Animation {
zoo: number,
}
export interface Setting {
axis: boolean,
grid: boolean,
tip: boolean
}
export function toJSON(data: string) : string {
console.log('data',data);
const regexPts = /(?:\"pts\"\:\[(?:\((x),(y)\))+,?\])/g;
......
......@@ -8,7 +8,7 @@ import { Graph2DComponent } from './graph2D.component';
@NgModule({
imports: [FormsModule, RouterModule, CommonModule, NgbModule],
declarations: [Graph2DComponent],
exports: [Graph2DComponent]
exports: [Graph2DComponent],
})
export class Graph2DModule { }
\ No newline at end of file
......@@ -5,15 +5,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { Graph3DComponent } from './graph3D.component';
import { AnimationControlComponent } from '../animation-control/animation-control.component';
import { ClosePopoverOnOutsideClickDirective } from '../../../shared/utils/closePopoverDirective';
@NgModule({
imports: [FormsModule, RouterModule, CommonModule, NgbModule],
declarations: [
AnimationControlComponent,
Graph3DComponent,
ClosePopoverOnOutsideClickDirective
Graph3DComponent
],
entryComponents: [
AnimationControlComponent
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment