Skip to content

GitLab

Commit 68c4fc59 authored by Diego Rey's avatar Diego Rey
Browse files

Added Animation handler for 2D component

parent 8d0e0376
Hide whitespace changes
Inline Side-by-side
Frontend Angular 4/package-lock.json
View file @ 68c4fc59
......@@ -4139,8 +4139,8 @@
"dev": true
},
"function-plot": {
"version": "git+https://github.com/diego-rey/function-plot.git#e81bedcbbdfe8cdd7c356a1bca4664ad7db5a371",
"from": "git+https://github.com/diego-rey/function-plot.git#feature/integration-domain-shape",
"version": "git://github.com/diego-rey/function-plot.git#d8b7147168ab7a595f8323d28ffc944735117606",
"from": "git://github.com/diego-rey/function-plot.git#feature/integration-domain-shape",
"requires": {
"array-range": "^1.0.1",
"built-in-math-eval": "^0.3.0",
......
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
View file @ 68c4fc59
<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 -" data-placement="bottom" triggers="mouseenter:mouseleave" 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="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 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>
<div id="graph2D-container" style="height: 100%; width: 100%;">
</div>
</div>
......
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
View file @ 68c4fc59
import { Component } from '@angular/core';
import { GHCIService } from '../../../shared/services/ghci.service';
import functionPlot from 'function-plot';
import { Animation } from './graph2D.helper';
@Component({
moduleId: module.id,
......@@ -12,137 +13,184 @@ import functionPlot from 'function-plot';
})
export class Graph2DComponent {
private instance: {};
private instance: null;
private animation: Animation = {
data: [],
timer: null,
currentFrame: 0,
speed: 1000,
playing: false,
init: false
};
public constructor(private ghciService: GHCIService) {
ghciService.messages.subscribe(
canvas => {
if (canvas.tipo == 'graph') {
var jsonCanvas = JSON.parse(canvas.resultado);
let fun = eval(this.generarFuncion(jsonCanvas));
var conjs = this.obtenerConjunto(jsonCanvas.funs[0]);
var d = conjs + "}";
var obj = JSON.parse(d);
//Para las funciones
if (obj.conj.sets.fdom == "function(x)") {
var nom = jsonCanvas.funs[0].dom;
var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
obj.conj.sets.fdom = function (x) { return eval(elemento) }
}
if (obj.conj.sets.fcod == "function(x)") {
var nom = jsonCanvas.funs[0].cod;
var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
obj.conj.sets.fcod = function (x) { return (eval(elemento)) }
}
//para Enumerados
if (obj.conj.dom == 'Numer') {
var cantElementos = obj.conj.sets.fdom.length;
var j = 0;
for (var fun of obj.conj.sets.fdom) {
//var newstr = nuevo2.replace(fun, j);
j = j + 1;
switch(canvas.tipo) {
case 'graph': {
var jsonCanvas = JSON.parse(canvas.resultado);
let fun = eval(this.generarFuncion(jsonCanvas));
var conjs = this.obtenerConjunto(jsonCanvas.funs[0]);
var d = conjs + "}";
var obj = JSON.parse(d);
//Para las funciones
if (obj.conj.sets.fdom == "function(x)") {
var nom = jsonCanvas.funs[0].dom;
var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
obj.conj.sets.fdom = function (x) { return eval(elemento) }
}
}
if (obj.conj.cod == 'Numer') {
var cantElementos = obj.conj.sets.fcod.length;
var j = 0;
for (var fun of obj.conj.sets.fcod) {
//var newstr = nuevo2.replace(fun, j);
j = j + 1;
if (obj.conj.sets.fcod == "function(x)") {
var nom = jsonCanvas.funs[0].cod;
var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
obj.conj.sets.fcod = function (x) { return (eval(elemento)) }
}
//para Enumerados
if (obj.conj.dom == 'Numer') {
var cantElementos = obj.conj.sets.fdom.length;
var j = 0;
for (var fun of obj.conj.sets.fdom) {
//var newstr = nuevo2.replace(fun, j);
j = j + 1;
}
}
if (obj.conj.cod == 'Numer') {
var cantElementos = obj.conj.sets.fcod.length;
var j = 0;
for (var fun of obj.conj.sets.fcod) {
//var newstr = nuevo2.replace(fun, j);
j = j + 1;
}
}
var colores = ['pink', 'red', 'blue', 'orange', 'green']
var num = this.getRandomArbitrary(0, 4);
var color = colores[num];
var tipoGraf;
if (obj.conj.baseDom != 'R'){
tipoGraf = 'scatter';
}else{
tipoGraf = 'polyline';
}
this.instance = functionPlot({
target: '#graph2D-container',
width: 620,
height: 450,
conj:obj.conj,
data: [{
sampler: 'builtIn',
fn: function(scope) {
return fun(scope.x)
},
graphType: tipoGraf,
color: color
}],
plugins: [
functionPlot.plugins.zoomBox()
]
})
break;
}
var colores = ['pink', 'red', 'blue', 'orange', 'green']
var num = this.getRandomArbitrary(0, 4);
var color = colores[num];
var tipoGraf;
if (obj.conj.baseDom != 'R'){
tipoGraf = 'scatter';
}else{
tipoGraf = 'polyline';
case 'canvas': {
console.log('TIPO', canvas.tipo);
var shapesData = JSON.parse(canvas.resultado);
var shapesDataNormalized = this.normalizeShapesData(shapesData);
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
xAxis: {
label: 'x - axis',
scale: 'linear',
domain: {
initial: [-10, 10],
type: 'discrete'
}
},
data: shapesDataNormalized,
plugins: [
functionPlot.plugins.zoomBox()
]
})
break;
}
this.instance = functionPlot({
target: '#graph2D-container',
width: 620,
height: 450,
conj:obj.conj,
data: [{
sampler: 'builtIn',
fn: function(scope) {
return fun(scope.x)
},
graphType: tipoGraf,
color: color
}],
plugins: [
functionPlot.plugins.zoomBox()
]
})
// EXAMPLE - SHAPE
// this.instance = functionPlot({
// target: '#graph2D-container',
// width: 700,
// height: 700,
// xAxis: {
// label: 'x - axis',
// scale: 'linear',
// domain: {
// initial: [-10, 10],
// type: 'discrete'
// }
// },
// data: [{
// shape: {
// w : 6.0,
// h : 3.0,
// x : 0,
// y : 0,
// color :"red",
// rotation : 0.125
// },
// graphType: 'shape',
// shapeType: 'rect'
// }],
// plugins: [
// functionPlot.plugins.zoomBox()
// ]
// })
} else if (canvas.tipo == 'canvas') {
var shapesData = JSON.parse(canvas.resultado);
console.log('Shapes Data:', shapesData);
var shapesDataNormalized = this.normalizeShapesData(shapesData);
console.log('Shapes Normalized', shapesDataNormalized);
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
xAxis: {
label: 'x - axis',
scale: 'linear',
domain: {
initial: [-10, 10],
type: 'discrete'
case 'animacion': {
console.log('TIPO', canvas.tipo);
if(!this.animation.init) {
this.animation.init = true;
var animationData = canvas.resultado.map(res => JSON.parse(res));
for (var frame of animationData) {
this.animation.data.push(this.normalizeShapesData(frame));
}
},
data: shapesDataNormalized,
plugins: [
functionPlot.plugins.zoomBox()
]
})
this.runAnimation();
}
break;
}
}
},
error => {
}
)
}
/**
* @name updateFrame
* @desc update data for Function Plot and redraw the graph
*/
public updateFrame = function(d) {
if (this.instance) {
this.instance.options.data = d;
this.instance.draw();
} else {
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
xAxis: {
label: 'x - axis',
scale: 'linear',
domain: {
initial: [-10, 10],
type: 'discrete'
}
},
data: d,
plugins: [
functionPlot.plugins.zoomBox()
]
})
}
}
/**
* @name runAnimation
* @desc Run Shapes Animation
*/
public runAnimation = function() {
var $this = this;
if ($this.animation.timer !== null) return;
$this.animation.timer = setInterval(function(){
$this.updateFrame($this.animation.data[$this.animation.currentFrame]);
$this.animation.currentFrame = ($this.animation.currentFrame + 1) % $this.animation.data.length;
}, $this.animation.speed);
$this.animation.playing = true;
}
/**
* @name pauseAnimation
* @desc Pause Shapes Animation
*/
public pauseAnimation = function() {
var $this = this;
clearInterval($this.animation.timer);
$this.animation.timer = null;
$this.animation.playing = false;
}
/**
......@@ -253,8 +301,6 @@ export class Graph2DComponent {
return normalized;
}
getRandomArbitrary = function (min, max) {
return Math.round(Math.random() * (max - min) + min);
}
......
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts 0 → 100644
View file @ 68c4fc59
export interface Animation {
data?: any,
timer?: any,
currentFrame: number,
speed: number,
playing: boolean,
init: boolean
}
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