Skip to content
Snippets Groups Projects
Commit dc98f9e9 authored by Diego Rey's avatar Diego Rey
Browse files

Added zoom controls for Graph 2D

parent b496eed1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
+ 4
− 1
View file @ dc98f9e9
<div class="card">
<div class="card-block contenedor-canvas" >
<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)=zoomMas() ><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)=zoomMenos() ><i class="fa fa-minus"></i></button>
<div id="graph2D-container" style="height: 100%; width: 100%;">
</div>
</div>
......
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
+ 176
− 135
View file @ dc98f9e9
import { Component } from '@angular/core';
import { GHCIService } from '../../../shared/services/ghci.service';
import functionPlot from 'function-plot';
import { GHCIService } from '../../../shared/services/ghci.service';
import functionPlot from 'function-plot';
@Component({
moduleId: module.id,
selector: 'graph2D-component',
templateUrl: './graph2D.component.html',
host: {
}
})
export class Graph2DComponent {
private instance: {};
public constructor(private ghciService: GHCIService) {
ghciService.messages.subscribe(
canvas=>{
if (canvas.tipo == 'graph'){
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 d = conjs + "}";
var obj = JSON.parse(d);
//Para las funciones
if (obj.conj.sets.fdom == "function(x)"){
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)}
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)"){
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))}
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'){
if (obj.conj.dom == 'Numer') {
var cantElementos = obj.conj.sets.fdom.length;
var j = 0;
for (var fun of obj.conj.sets.fdom) {
for (var fun of obj.conj.sets.fdom) {
//var newstr = nuevo2.replace(fun, j);
j = j + 1;
}
}
if(obj.conj.cod == 'Numer'){
if (obj.conj.cod == 'Numer') {
var cantElementos = obj.conj.sets.fcod.length;
var j = 0;
for (var fun of obj.conj.sets.fcod) {
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 colores = ['pink', 'red', 'blue', 'orange', 'green']
var num = this.getRandomArbitrary(0, 4);
var color = colores[num];
functionPlot({
target: '#graph2D-container',
width: 620,
height: 450,
conj:obj.conj,
data: [{
sampler: 'builtIn',
fn: function(scope) {
return fun(scope.x)
},
graphType: 'scatter',
color: color
}]
})
this.instance = functionPlot({
target: '#graph2D-container',
width: 620,
height: 700,
conj: obj.conj,
data: [{
sampler: 'builtIn',
fn: function (scope) {
return fun(scope.x)
},
graphType: 'scatter',
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()
// ]
// })
}
},
error=>{
})
},
error => {
})
}
public zoomMenos = function () {
this.instance.zoomOut();
}
public zoomMas = function () {
this.instance.zoomIn();
}
getRandomArbitrary= function (min, max) {
getRandomArbitrary = function (min, max) {
return Math.round(Math.random() * (max - min) + min);
}
generarFuncion = function(graph) {
var funcionString = '';
var grafica;
for (var fun of graph.funs) {
funcionString = 'var ' + fun.fun + ' = function(' + fun.args.join() + '){\n return ' + this.generarExpresion(fun.bdy) + '}\n' + funcionString;
if (fun.fun == graph.graph) {
funcionString += 'return ' + fun.fun + '(' + fun.args.join() + ');\n'
grafica = fun;
}
generarFuncion = function (graph) {
var funcionString = '';
var grafica;
for (var fun of graph.funs) {
funcionString = 'var ' + fun.fun + ' = function(' + fun.args.join() + '){\n return ' + this.generarExpresion(fun.bdy) + '}\n' + funcionString;
if (fun.fun == graph.graph) {
funcionString += 'return ' + fun.fun + '(' + fun.args.join() + ');\n'
grafica = fun;
}
funcionString = '(' + grafica.args.join() + ',delta,hayPunto)=>{\n' + funcionString + '}';
return funcionString;
}
funcionString = '(' + grafica.args.join() + ',delta,hayPunto)=>{\n' + funcionString + '}';
return funcionString;
}
generarExpresion = function(exp) {
generarExpresion = function (exp) {
var expresion = '';
if (exp.kind == 'cnd') {
expresion = ' (' + this.generarExpresion(exp.cond) + '?' + this.generarExpresion(exp.exp1) + ':' + this.generarExpresion(exp.exp2) + ') ';
expresion = ' (' + this.generarExpresion(exp.cond) + '?' + this.generarExpresion(exp.exp1) + ':' + this.generarExpresion(exp.exp2) + ') ';
} else if (exp.kind == 'bop') {
if (exp.op == '==') {
expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && hayPunto() ';
} else if (exp.op == '/=') {
expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) > delta || Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && !hayPunto() ';
} else if (exp.op == '^') {
expresion = ' Math.pow(' + this.generarExpresion(exp.exp1) + ',' + this.generarExpresion(exp.exp2) + ') ';
} else {
expresion = ' (' + this.generarExpresion(exp.exp1) + ')' + exp.op + '(' + this.generarExpresion(exp.exp2) + ') ';
}
if (exp.op == '==') {
expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && hayPunto() ';
} else if (exp.op == '/=') {
expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) > delta || Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && !hayPunto() ';
} else if (exp.op == '^') {
expresion = ' Math.pow(' + this.generarExpresion(exp.exp1) + ',' + this.generarExpresion(exp.exp2) + ') ';
} else {
expresion = ' (' + this.generarExpresion(exp.exp1) + ')' + exp.op + '(' + this.generarExpresion(exp.exp2) + ') ';
}
} else if (exp.kind == 'uop') {
expresion = ' ' + exp.op + ' ' + this.generarExpresion(exp.exp) + ' ';
expresion = ' ' + exp.op + ' ' + this.generarExpresion(exp.exp) + ' ';
} else if (exp.kind == 'app') {
if (exp.fun == 'cos') {
exp.fun = 'Math.cos'
} else if (exp.fun == 'sen') {
exp.fun = 'Math.sin'
} else if (exp.fun == 'red') {
exp.fun = 'Math.round'
}
expresion = ' ' + exp.fun + '(' + exp.args.map(e => this.generarExpresion(e)).join() + ') ';
if (exp.fun == 'cos') {
exp.fun = 'Math.cos'
} else if (exp.fun == 'sen') {
exp.fun = 'Math.sin'
} else if (exp.fun == 'red') {
exp.fun = 'Math.round'
}
expresion = ' ' + exp.fun + '(' + exp.args.map(e => this.generarExpresion(e)).join() + ') ';
} else if (exp.kind == 'tup') {
expresion = ' (' + exp.exps.map(e => this.generarExpresion(e)).join() + ') ';
expresion = ' (' + exp.exps.map(e => this.generarExpresion(e)).join() + ') ';
} else if (exp.kind == 'lit') {
expresion = ' ' + exp.val + ' ';
expresion = ' ' + exp.val + ' ';
} else if (exp.kind == 'var') {
expresion = ' ' + exp.var+' ';
expresion = ' ' + exp.var + ' ';
} else {
expresion = ' undefined ';
expresion = ' undefined ';
}
return expresion;
}
//Nuevo 20-07-2018
//Nuevo 20-07-2018
obtenerConjunto= function(grf){
obtenerConjunto = function (grf) {
var setf = '\"sets\": {';
var dominio = '{\"conj\": {';
if (grf.dom == 'R'){
var dominio = '{\"conj\": {';
if (grf.dom == 'R') {
dominio += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"R\"";
setf += "\"fdom\": \"R\",";
}else if(grf.dom == 'Z'){
} else if (grf.dom == 'Z') {
dominio += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Z\"";
setf += "\"fdom\": \"Z\",";
}else if(grf.dom == 'N'){
} else if (grf.dom == 'N') {
dominio += "\"radio\":2, \"baseDom\": \"N\", \"dom\": \"N\"";
setf += "\"fdom\": \"N\",";
}else{
} else {
var nom = grf.dom;
if (Array.isArray(grf.sets[0][nom])){
if (Array.isArray(grf.sets[0][nom])) {
var arreglo = grf.sets[0][nom];
var arreglo2 = [];
for (var item of arreglo){
arreglo2.push("\""+item+"\"");
for (var item of arreglo) {
arreglo2.push("\"" + item + "\"");
}
dominio += "\"radio\":2, \"baseDom\": \"N\", \"dom\": \"Numer\"";
setf += "\"fdom\": [" + arreglo2 + "], ";
}else{
dominio += this.recursivoDom(grf.sets,nom);
} else {
dominio += this.recursivoDom(grf.sets, nom);
setf += "\"fdom\":\"function(x)\",";
}
}
}
dominio += ", ";
if (grf.cod == 'R'){
dominio += ", ";
if (grf.cod == 'R') {
dominio += "\"baseCod\": \"R\", \"cod\": \"R\" ,";
setf += "\"fcod\": \"R\"";
}else if(grf.cod == 'Z'){
} else if (grf.cod == 'Z') {
dominio += "\"baseCod\": \"Z\", \"cod\": \"Z\" ,";
setf += "\"fcod\": \"Z\"";
}else if(grf.cod == 'N'){
} else if (grf.cod == 'N') {
dominio += "\"baseCod\": \"N\", \"cod\": \"N\" ,";
setf += "\"fcod\": \"N\"";
}else{
} else {
var nom = grf.cod;
if (Array.isArray(grf.sets[0][nom])){
if (Array.isArray(grf.sets[0][nom])) {
var arreglo = grf.sets[0][nom];
var arreglo2 = [];
for (var item of arreglo){
arreglo2.push("\""+item+"\"");
for (var item of arreglo) {
arreglo2.push("\"" + item + "\"");
}
dominio += "\"baseCod\": \"N\", \"cod\": \"Numer\" ,";
setf += '\"fcod\":[' + arreglo2+']';
}else{
dominio += this.recursivoCod(grf.sets,nom);
setf += '\"fcod\":[' + arreglo2 + ']';
} else {
dominio += this.recursivoCod(grf.sets, nom);
setf += "\"fcod\": \"function(x)\"";
}
}
}
return dominio + setf + "}}";
}
recursionfuncion = function(func,nombre){
recursionfuncion = function (func, nombre) {
var fun = func[0][nombre].set;
var resul = "";
if (fun == 'R' || fun == 'Z' || fun == 'N'){
resul += this.generarF(func[0][nombre].cond);
}else {
resul += this.generarF(func[0][nombre].cond) + " && " + this.recursionfuncion(func,fun);
if (fun == 'R' || fun == 'Z' || fun == 'N') {
resul += this.generarF(func[0][nombre].cond);
} else {
resul += this.generarF(func[0][nombre].cond) + " && " + this.recursionfuncion(func, fun);
}
return resul;
}
recursivoDom = function (sets,nom){
recursivoDom = function (sets, nom) {
var domin = "";
if (sets[0][nom].set == 'R'){
if (sets[0][nom].set == 'R') {
domin += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"Func\"";
}else if(sets[0][nom].set == 'Z'){
} else if (sets[0][nom].set == 'Z') {
domin += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Func\"";
}else if(sets[0][nom].set == 'N'){
} else if (sets[0][nom].set == 'N') {
domin += "\"radio\": 2, \"baseDom\": \"N\", \"dom\": \"Func\"";
}else{
} else {
var nombre = sets[0][nom].set;
domin = this.recursivoDom(sets,nombre);
domin = this.recursivoDom(sets, nombre);
}
return domin;
}
recursivoCod = function (sets,nom){
recursivoCod = function (sets, nom) {
var coodo = "";
if (sets[0][nom].set == 'R'){
if (sets[0][nom].set == 'R') {
coodo += "\"baseCod\": \"R\", \"cod\": \"Func\",";
}else if(sets[0][nom].set == 'Z'){
} else if (sets[0][nom].set == 'Z') {
coodo += "\"baseCod\": \"Z\", \"cod\": \"Func\",";
}else if(sets[0][nom].set == 'N'){
} else if (sets[0][nom].set == 'N') {
coodo += "\"baseCod\": \"N\", \"cod\": \"Func\",";
}else{
} else {
var nombre = sets[0][nom].set;
coodo += this.recursivoDom(sets,nombre);
coodo += this.recursivoDom(sets, nombre);
}
return coodo;
}
generarF = function(exp) {
generarF = function (exp) {
var expresion = '';
if (exp.kind == 'cond') {
expresion = ' (' + this.generarF(exp.cond) + '?' + this.generarF(exp.exp1) + ':' + this.generarF(exp.exp2) + ') ';
expresion = ' (' + this.generarF(exp.cond) + '?' + this.generarF(exp.exp1) + ':' + this.generarF(exp.exp2) + ') ';
} else if (exp.kind == 'bop') {
if (exp.op == '==') {
expresion = ' Math.abs((' + this.generarF(exp.exp1) + ') - (' + this.generarF(exp.exp2) + ')) == 0 ';
......@@ -272,15 +313,15 @@ export class Graph2DComponent {
} else if (exp.kind == 'lit') {
expresion = ' ' + exp.val + ' ';
} else if (exp.kind == 'var') {
expresion = ' ' + exp.var+' ';
expresion = ' ' + exp.var + ' ';
} else {
expresion = ' undefined ';
expresion = ' undefined ';
}
return expresion;
}
generarFun = function(graph) {
generarFun = function (graph) {
var funcionString = '';
var grafica;
for (var fun of graph.funs) {
......@@ -291,10 +332,10 @@ export class Graph2DComponent {
grafica = fun;
}
}
funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';
funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';
return funcionString;
}
}
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