diff --git a/Frontend Angular 4/package-lock.json b/Frontend Angular 4/package-lock.json
index a868de0c26f56f5a3460ca6cde2c85db7aadae63..fa7df2292a02f88d87b3406f097c6c2c8ad939cb 100644
--- a/Frontend Angular 4/package-lock.json	
+++ b/Frontend Angular 4/package-lock.json	
@@ -3632,12 +3632,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3652,17 +3654,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3779,7 +3784,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3791,6 +3797,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3805,6 +3812,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3812,12 +3820,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3836,6 +3846,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3916,7 +3927,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3928,6 +3940,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4049,6 +4062,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
index da86c723ac0d2140e88195b52ad1ee883cc7bb58..e6dd0a260feb5f06f0030eeb7257788ed41c2c17 100755
--- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html	
+++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html	
@@ -74,17 +74,17 @@
 
             </ng-template>
                 </ngb-tab>
-                <ngb-tab id="FigurasBtn" title="Figuras OLD">
+                <!-- <ngb-tab id="FigurasBtn" title="Figuras OLD">
                     <ng-template ngbTabContent>
                         <canvas-component (canvasComp)=canvasC></canvas-component>
                     </ng-template>
-                </ngb-tab>
-                <ngb-tab id="FigurasBtn2" title="Figuras 2D">
+                </ngb-tab> -->
+                <ngb-tab id="FigurasBtn2D" title="Figuras 2D">
                     <ng-template ngbTabContent>
                         <graph2D-component (graph2DComp)=graph2DComp></graph2D-component>
                     </ng-template>
                 </ngb-tab>
-                <ngb-tab id="FigurasBtn3" title="Figuras 3D">
+                <ngb-tab id="FigurasBtn3D" title="Figuras 3D">
                     <ng-template ngbTabContent>
                         <graph3d-component (graph3DComp)=graph3DComp></graph3d-component>
                     </ng-template>
diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts
index cbd3981ffcfb5b69202e6fdbec347c2dbfd97591..ec37f5c274be108a93166c13684f10e905aa8315 100755
--- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts	
+++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts	
@@ -354,7 +354,7 @@ export class MateFunComponent {
         .replace(/>/g, '&gt;');
     }
 
-    @ViewChild(CanvasComponent) canvasC: CanvasComponent;
+    // @ViewChild(CanvasComponent) canvasC: CanvasComponent;
     @ViewChild(Graph3DComponent) graph3DComp: Graph3DComponent;
 
     @ViewChild(Graph2DComponent) graph2DComp: Graph2DComponent;
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
index 291024bb2665d65e3816c421cc84d225b0cb7d38..8585ff3f9eba676814c124d1e823899b84d4eb98 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts	
+++ b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts	
@@ -14,59 +14,66 @@ export class Graph2DComponent {
     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]);
 
-                    functionPlot({
-                        target: '#implicit-complex',
-                        xAxis: {
-                          label: 'x - axis',
-                          scale: 'linear',
-                          domain: {
-                            initial: [-4, 4],
-                            type: 'discrete'
-                          },
-                          yAxis: {
-                            domain: [-4, 4] 
-                          },
-                        
+                    var d = conjs+"}";
                     
-                        },
-                        conj: {
-                          radio: 2,
-                          baseDom: 'Z',
-                          baseCod: 'Z', 
-                          cod: 'Numer',
-                          dom: 'Func',
-                          sets: {
-                            fcod:['Lun','Mart','Mier','Juev','Vier','Saba','Dom','Lunes'],
-                            fdom: function (x) {
-                              // scope.x = Number
-                              return (0 <= x);
-                            }
-                          }
-                        },
-                        data: [{
-                          graphType: 'scatter',
-                          fn: function (scope) {
-                            return fun(scope.x)
-                          }
-                        }]
-                      })
-                    // functionPlot({
-                    //     target: '#graph2D-container',
-                    //     width: 620,
-                    //     height: 450,
-                    //     data: [{
-                    //         sampler: 'builtIn',
-                    //         fn: function(scope) {
-                    //           return fun(scope.x)
-                    //         },
-                    //         graphType: 'polyline'
-                    //     }]
-                    //   })
+                    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;
+                        }
+
+                    }
+                    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];
+
+                     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
+                         }]
+                       })
                 }
         },
         error=>{
@@ -75,7 +82,9 @@ export class Graph2DComponent {
     }
 
 
-    
+    getRandomArbitrary= function (min, max) {
+        return Math.round(Math.random() * (max - min) + min);
+    }
     generarFuncion = function(graph) {
             var funcionString = '';
             var grafica;
@@ -89,7 +98,6 @@ export class Graph2DComponent {
             }
             funcionString = '(' + grafica.args.join() + ',delta,hayPunto)=>{\n' + funcionString + '}';
             
-            console.log('funcion string', funcionString);
             return funcionString;
         }
 
@@ -131,7 +139,162 @@ export class Graph2DComponent {
         return expresion;
     }
     
+     //Nuevo 20-07-2018
+
+
+     obtenerConjunto= function(grf){
+
+        var setf = '\"sets\": {';
+        var dominio = '{\"conj\": {'; 
+        if (grf.dom == 'R'){
+            dominio += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"R\"";
+            setf += "\"fdom\": \"R\",";
+        }else if(grf.dom == 'Z'){
+            dominio += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Z\"";
+            setf += "\"fdom\": \"Z\",";
+        }else if(grf.dom == 'N'){
+            dominio += "\"radio\":2, \"baseDom\": \"N\", \"dom\": \"N\"";
+            setf += "\"fdom\": \"N\",";
+        }else{
+            var nom = grf.dom;
+            if (Array.isArray(grf.sets[0][nom])){
+                var arreglo = grf.sets[0][nom];
+                var arreglo2 = [];
+                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);
+                setf += "\"fdom\":\"function(x)\",";
+            }     
+        }
+        dominio += ", "; 
+        if (grf.cod == 'R'){
+            dominio += "\"baseCod\": \"R\", \"cod\": \"R\" ,";
+            setf += "\"fcod\": \"R\"";
+        }else if(grf.cod == 'Z'){
+            dominio += "\"baseCod\": \"Z\", \"cod\": \"Z\" ,";
+            setf += "\"fcod\": \"Z\"";
+        }else if(grf.cod == 'N'){
+            dominio += "\"baseCod\": \"N\", \"cod\": \"N\" ,";
+            setf += "\"fcod\": \"N\"";
+        }else{
+            var nom = grf.cod;
+            if (Array.isArray(grf.sets[0][nom])){
+                var arreglo = grf.sets[0][nom];
+                var arreglo2 = [];
+                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\": \"function(x)\"";
+            }     
+        }
+        return dominio + setf + "}}";
+    }
+
+    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);
+             
+        }
+        return resul;
+    }
+
+    recursivoDom = function (sets,nom){
+        var domin = "";
+        if (sets[0][nom].set == 'R'){
+            domin += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"Func\"";
+        }else if(sets[0][nom].set == 'Z'){
+            domin += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Func\"";
+        }else if(sets[0][nom].set == 'N'){
+            domin += "\"radio\": 2, \"baseDom\": \"N\", \"dom\": \"Func\"";
+        }else{
+            var nombre = sets[0][nom].set;
+            domin = this.recursivoDom(sets,nombre);
+        }
+        return domin;
+    }
+
  
+    recursivoCod = function (sets,nom){
+        var coodo = "";
+        if (sets[0][nom].set == 'R'){
+            coodo += "\"baseCod\": \"R\", \"cod\": \"Func\",";
+        }else if(sets[0][nom].set == 'Z'){
+            coodo += "\"baseCod\": \"Z\", \"cod\": \"Func\",";
+        }else if(sets[0][nom].set == 'N'){
+            coodo += "\"baseCod\": \"N\", \"cod\": \"Func\",";
+        }else{
+            var nombre = sets[0][nom].set;
+            coodo += this.recursivoDom(sets,nombre);
+        }
+        return coodo;
+    }
+    
+    generarF = function(exp) {
+        var expresion = '';
+        if (exp.kind == 'cond') {
+           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 ';
+            } else if (exp.op == '/=') {
+                expresion = ' Math.abs((' + this.generarF(exp.exp1) + ') - (' + this.generarF(exp.exp2) + ')) == 0 ||  Math.abs((' + this.generarF(exp.exp1) + ') - (' + this.generarF(exp.exp2) + ')) == 0  ';
+            } else if (exp.op == '^') {
+                expresion = ' Math.pow(' + this.generarF(exp.exp1) + ',' + this.generarF(exp.exp2) + ') ';
+            } else {
+                expresion = ' (' + this.generarF(exp.exp1) + ')' + exp.op + '(' + this.generarF(exp.exp2) + ') ';
+            }
+        } else if (exp.kind == 'uop') {
+            expresion = ' ' + exp.op + ' ' + this.generarF(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 == 'round') {
+                exp.fun = 'Math.round'
+            }
+            expresion = ' ' + exp.fun + '(' + exp.args.map(e => this.generarF(e)).join() + ') ';
+        } else if (exp.kind == 'tup') {
+            expresion = ' (' + exp.exps.map(e => this.generarF(e)).join() + ') ';
+        } else if (exp.kind == 'lit') {
+            expresion = ' ' + exp.val + ' ';
+        } else if (exp.kind == 'var') {
+            expresion = ' ' + exp.var+' ';
+        } else {
+           expresion = ' undefined ';
+        }
+    
+        return expresion;
+    }
+
+    generarFun = function(graph) {
+        var funcionString = '';
+        var grafica;
+        for (var fun of graph.funs) {
+            funcionString = 'var ' + fun.fun + ' = function(' + fun.args.join() + '){\n return ' + this.generarF(fun.bdy) + '}\n' + funcionString;
+
+            if (fun.fun == graph.graph) {
+                funcionString += 'return ' + fun.fun + '(' + fun.args.join() + ');\n'
+                grafica = fun;
+            }
+        }
+        funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';            
+
+        return funcionString;
+    }
   
 }
 
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts
index f4713fcba3a9a2059f71c0b40a67e376a52e6389..71e76cdbd34b905d7c82c62d4d4c4bc6dc14d4a1 100644
--- a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts	
+++ b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts	
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
-import * as graph3DLib from 'graph3d';
+import * as graph3DLib from 'graph3D';
 import { GHCIService } from '../../../shared/services/ghci.service';
 import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps, debounce } from './graph3D.helper';
 
diff --git a/Frontend Angular 4/src/app/shared/config_BACKUP_716.ts b/Frontend Angular 4/src/app/shared/config_BACKUP_716.ts
deleted file mode 100644
index ed62e5eb702ba84bf84643313f102e44ad40248c..0000000000000000000000000000000000000000
--- a/Frontend Angular 4/src/app/shared/config_BACKUP_716.ts	
+++ /dev/null
@@ -1,28 +0,0 @@
-//export const SERVER = 'https://matefun.mybluemix.net';
-//export const GHCI_URL = 'wss://matefun.mybluemix.net/endpoint';
-
-//export const SERVER = 'http://localhost:9090';
-//export const GHCI_URL = 'ws://localhost:9090/endpoint';
-
-export const SERVER = 'http://localhost:8080';
-export const GHCI_URL = 'ws://localhost:8080/endpoint';
-
-//Configuracion dinamica pensando en servidor con ip dinamica
-<<<<<<< HEAD
-//export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
-//export const GHCI_URL = window.location.protocol == 'http:'?  'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
-
-//export const SERVER = 'http://ec2-52-15-74-22.us-east-2.compute.amazonaws.com:9090';
-//export const GHCI_URL = 'ws://ec2-52-15-74-22.us-east-2.compute.amazonaws.com:9090/endpoint';
-=======
-
-// export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
-// export const GHCI_URL = window.location.protocol == 'http:'?  'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
-
-//export const SERVER = 'http://192.168.95.3:9090';
-//export const GHCI_URL = 'ws://192.168.95.3:9090/endpoint';
-
-export const SERVER = 'http://35.199.110.129:9090';
-export const GHCI_URL = 'ws://35.199.110.129:9090/endpoint';
-
->>>>>>> feature/3DComponentInitialization
diff --git a/Frontend Angular 4/src/app/shared/services/ghci.service.ts b/Frontend Angular 4/src/app/shared/services/ghci.service.ts
index 475461f4bfba396307d9f90dd2d05959aeccb776..af62279ce4af96d79cd8734318425d41be9a1b6f 100755
--- a/Frontend Angular 4/src/app/shared/services/ghci.service.ts	
+++ b/Frontend Angular 4/src/app/shared/services/ghci.service.ts	
@@ -297,11 +297,12 @@ export class GHCIService {
 		} else if (json_server_message.tipo == 'canvas' || 
 			json_server_message.tipo == 'animacion' || 
 			json_server_message.tipo == 'graph') {
-			document.getElementById("FigurasBtn").click()
+			document.getElementById("FigurasBtn2D").click()
 			this.focusConsole();
 			this.messages.next(json_server_message);
 		} else if  (json_server_message.tipo == 'canvas3D' || 
 			json_server_message.tipo == 'animacion3D') {
+				document.getElementById("FigurasBtn3D").click()
 			this.focusConsole();
 			this.messages.next(json_server_message);
 		}