From a9a9078bf09d2ae86468edd7d76b1453f9315e30 Mon Sep 17 00:00:00 2001
From: Amira Abdel-Rahman <aabdelrahman@gsd.harvard.edu>
Date: Sun, 27 Oct 2019 18:07:34 -0400
Subject: [PATCH] to mac

---
 .gitlab-ci.yml                                |  26 +-
 .../graph/main.js                             | 482 +++++++++---------
 .../physical_computing_interface/index.html   | 276 +++++-----
 .../json/index.html                           |  98 ++--
 .../physical_computing_interface/json/main.js |  56 +-
 .../physical_computing_interface/style.css    | 382 +++++++-------
 .../threejs/index.html                        | 266 +++++-----
 .../threejs/main.js                           | 274 +++++-----
 README.md                                     |  62 +--
 9 files changed, 961 insertions(+), 961 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 95e2353..0c07eed 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,13 +1,13 @@
-# This file is a template, and might need editing before it works on your project.
-# Full project: https://gitlab.com/pages/plain-html
-pages:
-  stage: deploy
-  script:
-    - mkdir .public
-    - cp -r * .public
-    - mv .public public
-  artifacts:
-    paths:
-      - public
-  only:
-    - master
+# This file is a template, and might need editing before it works on your project.
+# Full project: https://gitlab.com/pages/plain-html
+pages:
+  stage: deploy
+  script:
+    - mkdir .public
+    - cp -r * .public
+    - mv .public public
+  artifacts:
+    paths:
+      - public
+  only:
+    - master
diff --git a/01_Code/physical_computing_interface/graph/main.js b/01_Code/physical_computing_interface/graph/main.js
index 762e7bd..978420e 100644
--- a/01_Code/physical_computing_interface/graph/main.js
+++ b/01_Code/physical_computing_interface/graph/main.js
@@ -1,241 +1,241 @@
-var selectedjson;
-document.addEventListener('DOMContentLoaded', function(){
-
-    var color1= "#ffffff"; //white
-    var color11= "#ffffff8c"; //white transparent
-    var color2= "#020227";  //dark blue
-    var color3= "#1c5c61"; //teal
-    var color4= "#fa6e70"; //red/orange
-    var color5="#380152"; //purple
-    var color6="#696767"; //grey
-    var font= "consolas";//'font-family'
-
-    var cy = window.cy = cytoscape({
-        container: document.getElementById('cy'),
-
-        ready: function(){
-            var api = this.expandCollapse({
-                layoutBy: {
-                    name: "cose-bilkent",
-                    animate: "end",
-                    randomize: false,
-                    fit: true
-                },
-                fisheye: true,
-                animate: false,
-                undoable: false
-            });
-            api.collapseAll();
-        },
-
-        style: [
-            {
-                selector: 'node',
-                style: {
-                    'background-color': color3,
-                    'content': 'data(name)',
-                    // 'text-valign': 'center',
-                    'color': color6,
-                    'font-family':font
-                    
-                }
-            },
-
-            {
-                selector: ':parent',
-                style: {
-                    'background-opacity': 0.333
-                }
-            },
-
-            {
-                selector: "node.cy-expand-collapse-collapsed-node",
-                style: {
-                    "background-color": color5,
-                    "shape": "rectangle"
-                }
-            },
-
-            {
-                selector: 'edge',
-                style: {
-                    'width': 3,
-                    'line-color': color3,
-                    'curve-style': 'straight'
-                }
-            },
-
-            {
-                selector: 'edge.meta',
-                style: {
-                    'width': 2,
-                    'line-color': color4
-                }
-            },
-
-            {
-                selector: ':selected',
-                style: {
-                  "border-width": 3,
-                    "border-color": color4
-                }
-            }
-        ],
-        elements: {
-            nodes: [
-              {
-                data: { id: 'cy', name: 'DICE' }
-              },
-        
-              {
-                data: { id: 'core', name: 'Core', parent: 'api' },
-                position: { x: 0, y: 0 }
-              },
-        
-              {
-                data: { id: 'eles', name: 'Collection', parent: 'api' },
-                position: { x: 150, y: 150 }
-              },
-        
-              {
-                data: { id: 'style', name: 'Stylesheet', parent: 'api' },
-                position: { x: 0, y: 150 }
-              },
-        
-              {
-                data: { id: 'selector', name: 'Selector', parent: 'api' },
-                position: { x: -150, y: 150 }
-              },
-        
-              {
-                data: { id: 'ext', name: 'Extensions', parent: 'cy' }
-              },
-        
-              {
-                data: { id: 'corefn', name: 'Core Function', parent: 'ext' },
-                classes: 'ext',
-                position: { x: 350, y: -140 }
-              },
-        
-              {
-                data: { id: 'elesfn', name: 'Collection Function', parent: 'ext' },
-                classes: 'ext',
-                position: { x: 350, y: 0 }
-              },
-        
-              {
-                data: { id: 'layout', name: 'Layout', parent: 'ext' },
-                classes: 'ext',
-                position: { x: 350, y: 140 }
-              },
-        
-              {
-                data: { id: 'renderer', name: 'Renderer', parent: 'ext' },
-                classes: 'ext',
-                position: { x: 350, y: 280 }
-              },
-        
-              {
-                data: { id: 'api', name: 'Core API', parent: 'cy' }
-              },
-        
-              {
-                data: { id: 'app', name: 'Client' },
-                position: { x: 0, y: 480 }
-              }
-            ],
-            edges: [
-              { data: { source: 'core', target: 'eles' } },
-              { data: { source: 'core', target: 'ext' } },
-              { data: { source: 'core', target: 'style' } },
-              { data: { source: 'style', target: 'selector' } },
-              { data: { source: 'core', target: 'selector' } },
-              { data: { source: 'elesfn', target: 'eles' }, classes: 'ext' },
-              { data: { source: 'corefn', target: 'core' }, classes: 'ext' },
-              { data: { source: 'layout', target: 'api' }, classes: 'ext' },
-              { data: { source: 'renderer', target: 'api' }, classes: 'ext' },
-              { data: { source: 'app', target: 'api', name: 'use' }, classes: 'app' },
-              { data: { source: 'app', target: 'ext', name: 'register' }, classes: 'app' }
-            ]
-          },
-
-        // elements: 
-        //     [
-        //         {"data":{"id":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":577.5410894097904,"y":612.5647477282114},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062","target":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","id":"nwtE_6d4afc19-88a0-4fd4-9fbf-3591cb6ba062"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_8753a0df-286b-4f9b-a00d-bc093113bac7","target":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","id":"nwtE_605f28bd-77c0-4eef-8251-c5ba9668bda7"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","target":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","id":"nwtE_5bafa3fe-246a-477c-849c-3284c3e62578"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","target":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","id":"nwtE_6dda445b-530e-4b95-a3b1-e09cabc73993"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","target":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","id":"nwtE_b6195365-55fd-4e16-b03d-af46585b2618"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","target":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","id":"nwtE_6f57baf0-3722-4012-b33e-783c267645fa"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f","target":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","id":"nwtE_9fac6ca3-d907-4b5a-8496-b0edbc3815ca"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","target":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","id":"nwtE_ac487e12-218a-45fd-b94a-f8fb51494baa"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":195.56340747734816,"y":484.3338177685355},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f","target":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25","id":"nwtE_24228974-e8ba-4f05-8fe8-e775d314bcff"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab","target":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b","id":"nwtE_56a86996-2c25-4071-b3a3-3000057eef90"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","target":"nwtN_30d6a1fb-f835-4d67-98db-dbfd8e91166e","id":"nwtE_a690584d-974b-4a78-8169-584dc4aa2ef8"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_fc734e6e-c7c1-446f-8ae6-a3935cbb8b29","target":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","id":"nwtE_bca25d80-d197-41ca-871c-9c3806a802c3"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":424.9142621725959,"y":163.663834699366},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":489.2620636399552,"y":205.99231330748833},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","target":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","id":"nwtE_fdd46d3d-3529-4552-bcaf-e5a43364d5eb"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f"},"position":{"x":307.4167261049662,"y":242.51235456419},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":433.25389502259094,"y":81.8501883151051},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","target":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","id":"nwtE_9298d0d5-8159-4b50-b880-48aa19738a86"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","target":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","id":"nwtE_449cf49b-88e5-44f9-9300-5a8dbd79c135"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_30d6a1fb-f835-4d67-98db-dbfd8e91166e"},"position":{"x":579.7696102042084,"y":292.2890755756693},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","target":"nwtN_8753a0df-286b-4f9b-a00d-bc093113bac7","id":"nwtE_15b708e3-501d-432c-941d-627df912946f"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":540.8474401288637,"y":548.2864791672267},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f","target":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c","id":"nwtE_fd0f48e7-988f-4707-b126-b8a04dc3f64c"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062","target":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f","id":"nwtE_7049cf2c-cc2b-40ed-94b8-590e2b703c45"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","target":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","id":"nwtE_28f94f80-370a-4819-b01e-7c14286528d6"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","target":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb","id":"nwtE_4b91ec16-80c7-476e-ac78-40ec11628f8c"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","target":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","id":"nwtE_580dc718-3a38-4131-8527-5966dc7117bd"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":491.63465589698114,"y":136.22441840106094},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":609.4769080081592,"y":540.0632700234723},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_91e530f8-4a18-423b-ae2b-0f87ae72d824","target":"nwtN_787d128e-8256-4207-9e34-948bd142f842","id":"nwtE_c1260ab9-e976-4b02-a0d4-28e4e7b71956"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b","target":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","id":"nwtE_1379f27c-2858-4c7c-b305-f9dbef07f992"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","target":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","id":"nwtE_70a9c66e-a05d-4795-9830-b941aa0bdf8d"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":491.4678555276823,"y":133.24054767963713},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","target":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","id":"nwtE_3a1a451a-396c-46dd-844a-09c8c4506788"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":597.8765594527064,"y":612.7761198138919},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","target":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","id":"nwtE_03b7f374-f923-4cbd-9b1c-358e6bd0a66a"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","target":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","id":"nwtE_bdaaa9a5-5464-44eb-a69a-177006535c60"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":558.3550496213663,"y":140.29772029134818},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":508.5039225894028,"y":66.45652349463356},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","target":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","id":"nwtE_06738526-f767-4e34-8d41-bfd8b046d48e"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_fc734e6e-c7c1-446f-8ae6-a3935cbb8b29","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":614.2347386907171,"y":685.0662254329505},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","target":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f","id":"nwtE_874c0108-f1b5-4331-9580-bbc904d5ed52"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_30d6a1fb-f835-4d67-98db-dbfd8e91166e","target":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","id":"nwtE_8ecc2707-8d9f-4c5a-b79f-36028161a2de"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062"},"position":{"x":390.8088604802138,"y":631.143932383176},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10"},"position":{"x":385.86501672672586,"y":549.4623389479385},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab"},"position":{"x":420.38955421084455,"y":471.15574980196067},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25"},"position":{"x":369.7167651842458,"y":293.0403182947785},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_2ac61ffd-0f55-4d76-ac39-f12efc1712ba"},"position":{"x":418.05570853622856,"y":392.34060880148394},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b"},"position":{"x":488.8353737093525,"y":424.0878886254484},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1"},"position":{"x":438.2063143421404,"y":315.0732399204851},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f"},"position":{"x":449.9163565836266,"y":594.1831978504854},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1"},"position":{"x":511.65889587382577,"y":346.18005665157585},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_8753a0df-286b-4f9b-a00d-bc093113bac7"},"position":{"x":562.2598442850485,"y":415.8153103233126},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f","target":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb","id":"nwtE_11040a46-0530-4375-a13d-2cdca0a98536"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","target":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b","id":"nwtE_b47d4380-4724-4409-a449-1d80a798f9df"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25","target":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","id":"nwtE_b7156db8-08d3-4a8d-9b43-db3de0701017"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","target":"nwtN_2ac61ffd-0f55-4d76-ac39-f12efc1712ba","id":"nwtE_1ab89f57-598a-4805-85d6-445f44bed701"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_2ac61ffd-0f55-4d76-ac39-f12efc1712ba","target":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab","id":"nwtE_3a06bd73-a5ea-42fc-bebd-6cc9b227c4d4"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab","target":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","id":"nwtE_fe9dae92-bb4d-4fbc-8b00-3275e457899b"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","target":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062","id":"nwtE_498e1c01-8c7d-4711-86d4-25119fd459b3"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_91be4b3b-b492-4cf2-822e-c2a1de14dbfe","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":131.35922693271124,"y":605.7954433087209},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":263.1586191787393,"y":578.1716399433802},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":195.2099595474637,"y":563.255374790295},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":256.9500139684577,"y":508.8943151396569},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_0bd04732-5c51-4577-87f3-3675b3294ac3","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":127.96819577595704,"y":535.5200800812347},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":195.56340747734816,"y":557.3448792241888},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":253.48384362872935,"y":375.70472845792517},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_91e530f8-4a18-423b-ae2b-0f87ae72d824","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":187.4692319760543,"y":341.24719222835006},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_787d128e-8256-4207-9e34-948bd142f842","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":119.07770758703417,"y":363.03066656565034},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","target":"nwtN_91be4b3b-b492-4cf2-822e-c2a1de14dbfe","id":"nwtE_720b0a71-9ad3-4821-b828-ecace971acd1"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_91be4b3b-b492-4cf2-822e-c2a1de14dbfe","target":"nwtN_0bd04732-5c51-4577-87f3-3675b3294ac3","id":"nwtE_ce9e18ee-2bb9-4abb-88f8-272b3d76a8b4"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","target":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","id":"nwtE_6a465aa8-1c8b-4455-95bc-e67b77f3f7d3"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","target":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","id":"nwtE_c6b430bd-17fc-4b1f-82a9-16bc0d5dfa78"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_0bd04732-5c51-4577-87f3-3675b3294ac3","target":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","id":"nwtE_12dd751b-6a30-4bef-8511-d36869559740"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","target":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","id":"nwtE_7944e4ea-bb97-484f-a6ee-0d77d7bab80f"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","target":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","id":"nwtE_d0a8fa82-36ac-4c28-837b-aa38b8f2cdb6"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","target":"nwtN_91e530f8-4a18-423b-ae2b-0f87ae72d824","id":"nwtE_a4051f32-f6fe-451e-b153-e4de31f4808b"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","target":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25","id":"nwtE_70a31acd-428d-47be-a981-38107a83d2e1"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""}
-        //     ]
-                
-    });
-
-    cy.on('tap', 'node', function(){
-        var nodes = this;
-        selectedjson=this._private.data;
-        console.log(this._private.data);
-    });
-
-
-    //TODO: FIX
-    cy.on('tap', 'edge', function(){
-        var nodes = this;
-        selectedjson=this._private.data;
-        console.log(this._private.data);
-    });
-    cy.on('tap', function( evt ){
-        var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
-
-        if( tgt === cy ){
-            cy.add({
-                classes: 'automove-viewport',
-                data: { id: 'new' + Math.round( Math.random() * 100 ) },
-                position: {
-                    x: evt.position.x,
-                    y: evt.position.y
-                }
-            });
-        }
-    });
-
-    cy.on('cxttap', 'node', function( evt ){
-        var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
-
-        tgt.remove();
-    });
-
-    var api = cy.expandCollapse('get');
-    var elements = null;
-
-    document.getElementById("collapseRecursively").addEventListener("click", function () {
-        api.collapseRecursively(cy.$(":selected"));
-    });
-
-    document.getElementById("expandRecursively").addEventListener("click", function () {
-        api.expandRecursively(cy.$(":selected"));
-    });
-
-    document.getElementById("expandAllAndRemove").addEventListener("click", function () {
-        api.expandAll();
-        elements = cy.elements().remove();
-    });
-
-    document.getElementById("loadInCollapsedState").addEventListener("click", function () {
-        if (elements){
-            cy.add(elements);
-            api.collapseAll();
-            elements = null;
-        }
-        else{
-            console.warn("Remove elements first by clicking on 'Expand all and remove' button.");
-        }
-    });
-
-    document.getElementById("collapseAll").addEventListener("click", function () {
-        api.collapseAll();
-    });
-
-    document.getElementById("expandAll").addEventListener("click", function () {
-        api.expandAll();
-    });
-
-});
-
-
-
+var selectedjson;
+document.addEventListener('DOMContentLoaded', function(){
+
+    var color1= "#ffffff"; //white
+    var color11= "#ffffff8c"; //white transparent
+    var color2= "#020227";  //dark blue
+    var color3= "#1c5c61"; //teal
+    var color4= "#fa6e70"; //red/orange
+    var color5="#380152"; //purple
+    var color6="#696767"; //grey
+    var font= "consolas";//'font-family'
+
+    var cy = window.cy = cytoscape({
+        container: document.getElementById('cy'),
+
+        ready: function(){
+            var api = this.expandCollapse({
+                layoutBy: {
+                    name: "cose-bilkent",
+                    animate: "end",
+                    randomize: false,
+                    fit: true
+                },
+                fisheye: true,
+                animate: false,
+                undoable: false
+            });
+            api.collapseAll();
+        },
+
+        style: [
+            {
+                selector: 'node',
+                style: {
+                    'background-color': color3,
+                    'content': 'data(name)',
+                    // 'text-valign': 'center',
+                    'color': color6,
+                    'font-family':font
+                    
+                }
+            },
+
+            {
+                selector: ':parent',
+                style: {
+                    'background-opacity': 0.333
+                }
+            },
+
+            {
+                selector: "node.cy-expand-collapse-collapsed-node",
+                style: {
+                    "background-color": color5,
+                    "shape": "rectangle"
+                }
+            },
+
+            {
+                selector: 'edge',
+                style: {
+                    'width': 3,
+                    'line-color': color3,
+                    'curve-style': 'straight'
+                }
+            },
+
+            {
+                selector: 'edge.meta',
+                style: {
+                    'width': 2,
+                    'line-color': color4
+                }
+            },
+
+            {
+                selector: ':selected',
+                style: {
+                  "border-width": 3,
+                    "border-color": color4
+                }
+            }
+        ],
+        elements: {
+            nodes: [
+              {
+                data: { id: 'cy', name: 'DICE' }
+              },
+        
+              {
+                data: { id: 'core', name: 'Core', parent: 'api' },
+                position: { x: 0, y: 0 }
+              },
+        
+              {
+                data: { id: 'eles', name: 'Collection', parent: 'api' },
+                position: { x: 150, y: 150 }
+              },
+        
+              {
+                data: { id: 'style', name: 'Stylesheet', parent: 'api' },
+                position: { x: 0, y: 150 }
+              },
+        
+              {
+                data: { id: 'selector', name: 'Selector', parent: 'api' },
+                position: { x: -150, y: 150 }
+              },
+        
+              {
+                data: { id: 'ext', name: 'Extensions', parent: 'cy' }
+              },
+        
+              {
+                data: { id: 'corefn', name: 'Core Function', parent: 'ext' },
+                classes: 'ext',
+                position: { x: 350, y: -140 }
+              },
+        
+              {
+                data: { id: 'elesfn', name: 'Collection Function', parent: 'ext' },
+                classes: 'ext',
+                position: { x: 350, y: 0 }
+              },
+        
+              {
+                data: { id: 'layout', name: 'Layout', parent: 'ext' },
+                classes: 'ext',
+                position: { x: 350, y: 140 }
+              },
+        
+              {
+                data: { id: 'renderer', name: 'Renderer', parent: 'ext' },
+                classes: 'ext',
+                position: { x: 350, y: 280 }
+              },
+        
+              {
+                data: { id: 'api', name: 'Core API', parent: 'cy' }
+              },
+        
+              {
+                data: { id: 'app', name: 'Client' },
+                position: { x: 0, y: 480 }
+              }
+            ],
+            edges: [
+              { data: { source: 'core', target: 'eles' } },
+              { data: { source: 'core', target: 'ext' } },
+              { data: { source: 'core', target: 'style' } },
+              { data: { source: 'style', target: 'selector' } },
+              { data: { source: 'core', target: 'selector' } },
+              { data: { source: 'elesfn', target: 'eles' }, classes: 'ext' },
+              { data: { source: 'corefn', target: 'core' }, classes: 'ext' },
+              { data: { source: 'layout', target: 'api' }, classes: 'ext' },
+              { data: { source: 'renderer', target: 'api' }, classes: 'ext' },
+              { data: { source: 'app', target: 'api', name: 'use' }, classes: 'app' },
+              { data: { source: 'app', target: 'ext', name: 'register' }, classes: 'app' }
+            ]
+          },
+
+        // elements: 
+        //     [
+        //         {"data":{"id":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":577.5410894097904,"y":612.5647477282114},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062","target":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","id":"nwtE_6d4afc19-88a0-4fd4-9fbf-3591cb6ba062"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_8753a0df-286b-4f9b-a00d-bc093113bac7","target":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","id":"nwtE_605f28bd-77c0-4eef-8251-c5ba9668bda7"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","target":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","id":"nwtE_5bafa3fe-246a-477c-849c-3284c3e62578"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","target":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","id":"nwtE_6dda445b-530e-4b95-a3b1-e09cabc73993"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","target":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","id":"nwtE_b6195365-55fd-4e16-b03d-af46585b2618"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","target":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","id":"nwtE_6f57baf0-3722-4012-b33e-783c267645fa"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f","target":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","id":"nwtE_9fac6ca3-d907-4b5a-8496-b0edbc3815ca"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","target":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","id":"nwtE_ac487e12-218a-45fd-b94a-f8fb51494baa"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":195.56340747734816,"y":484.3338177685355},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f","target":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25","id":"nwtE_24228974-e8ba-4f05-8fe8-e775d314bcff"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab","target":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b","id":"nwtE_56a86996-2c25-4071-b3a3-3000057eef90"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","target":"nwtN_30d6a1fb-f835-4d67-98db-dbfd8e91166e","id":"nwtE_a690584d-974b-4a78-8169-584dc4aa2ef8"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_fc734e6e-c7c1-446f-8ae6-a3935cbb8b29","target":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","id":"nwtE_bca25d80-d197-41ca-871c-9c3806a802c3"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":424.9142621725959,"y":163.663834699366},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":489.2620636399552,"y":205.99231330748833},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","target":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","id":"nwtE_fdd46d3d-3529-4552-bcaf-e5a43364d5eb"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f"},"position":{"x":307.4167261049662,"y":242.51235456419},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":433.25389502259094,"y":81.8501883151051},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","target":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","id":"nwtE_9298d0d5-8159-4b50-b880-48aa19738a86"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","target":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","id":"nwtE_449cf49b-88e5-44f9-9300-5a8dbd79c135"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_30d6a1fb-f835-4d67-98db-dbfd8e91166e"},"position":{"x":579.7696102042084,"y":292.2890755756693},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","target":"nwtN_8753a0df-286b-4f9b-a00d-bc093113bac7","id":"nwtE_15b708e3-501d-432c-941d-627df912946f"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":540.8474401288637,"y":548.2864791672267},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f","target":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c","id":"nwtE_fd0f48e7-988f-4707-b126-b8a04dc3f64c"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062","target":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f","id":"nwtE_7049cf2c-cc2b-40ed-94b8-590e2b703c45"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","target":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","id":"nwtE_28f94f80-370a-4819-b01e-7c14286528d6"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","target":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb","id":"nwtE_4b91ec16-80c7-476e-ac78-40ec11628f8c"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","target":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","id":"nwtE_580dc718-3a38-4131-8527-5966dc7117bd"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":491.63465589698114,"y":136.22441840106094},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":609.4769080081592,"y":540.0632700234723},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_91e530f8-4a18-423b-ae2b-0f87ae72d824","target":"nwtN_787d128e-8256-4207-9e34-948bd142f842","id":"nwtE_c1260ab9-e976-4b02-a0d4-28e4e7b71956"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b","target":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","id":"nwtE_1379f27c-2858-4c7c-b305-f9dbef07f992"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_f95babe0-0c64-4076-b380-fad5605fec6e","target":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","id":"nwtE_70a9c66e-a05d-4795-9830-b941aa0bdf8d"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":491.4678555276823,"y":133.24054767963713},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1","target":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","id":"nwtE_3a1a451a-396c-46dd-844a-09c8c4506788"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":597.8765594527064,"y":612.7761198138919},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","target":"nwtN_6fb77c5b-4321-4c3c-a941-91a951082e71","id":"nwtE_03b7f374-f923-4cbd-9b1c-358e6bd0a66a"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_d578fedc-d576-4c07-8406-89956b346a9d","target":"nwtN_1b72ec9f-c49f-4768-85a7-16ac6ff345e3","id":"nwtE_bdaaa9a5-5464-44eb-a69a-177006535c60"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":558.3550496213663,"y":140.29772029134818},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_477a1284-d1e7-44c6-8553-92fa8a6a553d","parent":"nwtN_717d31aa-6b70-4067-bcf2-13e0f6bd879a"},"position":{"x":508.5039225894028,"y":66.45652349463356},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9a23093c-257f-4e74-9f74-34cdf693daec","target":"nwtN_1f8d5d5d-f085-4317-84d4-7b8612d11367","id":"nwtE_06738526-f767-4e34-8d41-bfd8b046d48e"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_fc734e6e-c7c1-446f-8ae6-a3935cbb8b29","parent":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":614.2347386907171,"y":685.0662254329505},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","target":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f","id":"nwtE_874c0108-f1b5-4331-9580-bbc904d5ed52"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_30d6a1fb-f835-4d67-98db-dbfd8e91166e","target":"nwtN_7813a042-3f67-44ab-9d83-ced928bedd25","id":"nwtE_8ecc2707-8d9f-4c5a-b79f-36028161a2de"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062"},"position":{"x":390.8088604802138,"y":631.143932383176},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10"},"position":{"x":385.86501672672586,"y":549.4623389479385},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab"},"position":{"x":420.38955421084455,"y":471.15574980196067},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25"},"position":{"x":369.7167651842458,"y":293.0403182947785},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_2ac61ffd-0f55-4d76-ac39-f12efc1712ba"},"position":{"x":418.05570853622856,"y":392.34060880148394},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b"},"position":{"x":488.8353737093525,"y":424.0878886254484},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1"},"position":{"x":438.2063143421404,"y":315.0732399204851},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_8de3d737-f713-404d-a181-c065f9cce74f"},"position":{"x":449.9163565836266,"y":594.1831978504854},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_65df5546-116f-4bda-92c7-acc6549589f1"},"position":{"x":511.65889587382577,"y":346.18005665157585},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_8753a0df-286b-4f9b-a00d-bc093113bac7"},"position":{"x":562.2598442850485,"y":415.8153103233126},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_9d2ac5f6-093a-4090-a750-942e7464a15f","target":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb","id":"nwtE_11040a46-0530-4375-a13d-2cdca0a98536"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_ef9670aa-321a-41ba-a665-c3980f30eb2a","target":"nwtN_6af44d07-59d1-4773-bab6-c99641e4810b","id":"nwtE_b47d4380-4724-4409-a449-1d80a798f9df"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25","target":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","id":"nwtE_b7156db8-08d3-4a8d-9b43-db3de0701017"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_6b82a0c0-db1a-4aed-8434-f56152c6bac1","target":"nwtN_2ac61ffd-0f55-4d76-ac39-f12efc1712ba","id":"nwtE_1ab89f57-598a-4805-85d6-445f44bed701"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_2ac61ffd-0f55-4d76-ac39-f12efc1712ba","target":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab","id":"nwtE_3a06bd73-a5ea-42fc-bebd-6cc9b227c4d4"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_01047009-f54b-4c2a-8153-3d83c6e32eab","target":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","id":"nwtE_fe9dae92-bb4d-4fbc-8b00-3275e457899b"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_1c510598-47d3-48a4-ba9d-fdfb915cda10","target":"nwtN_3a5d1ad1-5bfe-48e7-99ee-0cdf3913b062","id":"nwtE_498e1c01-8c7d-4711-86d4-25119fd459b3"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_91be4b3b-b492-4cf2-822e-c2a1de14dbfe","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":131.35922693271124,"y":605.7954433087209},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":263.1586191787393,"y":578.1716399433802},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":195.2099595474637,"y":563.255374790295},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":256.9500139684577,"y":508.8943151396569},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_0bd04732-5c51-4577-87f3-3675b3294ac3","parent":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa"},"position":{"x":127.96819577595704,"y":535.5200800812347},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_d70e8589-ab02-41e3-879f-29aed04212fa","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":195.56340747734816,"y":557.3448792241888},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":253.48384362872935,"y":375.70472845792517},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_91e530f8-4a18-423b-ae2b-0f87ae72d824","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":187.4692319760543,"y":341.24719222835006},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"nwtN_787d128e-8256-4207-9e34-948bd142f842","parent":"nwtN_04d7dde6-171a-4179-85f5-a0cf510f55fb"},"position":{"x":119.07770758703417,"y":363.03066656565034},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","target":"nwtN_91be4b3b-b492-4cf2-822e-c2a1de14dbfe","id":"nwtE_720b0a71-9ad3-4821-b828-ecace971acd1"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_91be4b3b-b492-4cf2-822e-c2a1de14dbfe","target":"nwtN_0bd04732-5c51-4577-87f3-3675b3294ac3","id":"nwtE_ce9e18ee-2bb9-4abb-88f8-272b3d76a8b4"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","target":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","id":"nwtE_6a465aa8-1c8b-4455-95bc-e67b77f3f7d3"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","target":"nwtN_743ee692-2363-4e76-a0c2-d6d3f717953e","id":"nwtE_c6b430bd-17fc-4b1f-82a9-16bc0d5dfa78"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_0bd04732-5c51-4577-87f3-3675b3294ac3","target":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","id":"nwtE_12dd751b-6a30-4bef-8511-d36869559740"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_4d5b8b52-1f20-45f8-bc0f-3a4a1235c0f5","target":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","id":"nwtE_7944e4ea-bb97-484f-a6ee-0d77d7bab80f"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_b282d9cf-0120-42bc-9036-3bd48f925d1e","target":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","id":"nwtE_d0a8fa82-36ac-4c28-837b-aa38b8f2cdb6"},"position":{"x":null,"y":null},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","target":"nwtN_91e530f8-4a18-423b-ae2b-0f87ae72d824","id":"nwtE_a4051f32-f6fe-451e-b153-e4de31f4808b"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"source":"nwtN_0f5340ab-a217-423f-b5f7-0a149f3217e8","target":"nwtN_e79b5f83-1e09-485f-83cb-f85c9c6dae25","id":"nwtE_70a31acd-428d-47be-a981-38107a83d2e1"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""}
+        //     ]
+                
+    });
+
+    cy.on('tap', 'node', function(){
+        var nodes = this;
+        selectedjson=this._private.data;
+        console.log(this._private.data);
+    });
+
+
+    //TODO: FIX
+    cy.on('tap', 'edge', function(){
+        var nodes = this;
+        selectedjson=this._private.data;
+        console.log(this._private.data);
+    });
+    cy.on('tap', function( evt ){
+        var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
+
+        if( tgt === cy ){
+            cy.add({
+                classes: 'automove-viewport',
+                data: { id: 'new' + Math.round( Math.random() * 100 ) },
+                position: {
+                    x: evt.position.x,
+                    y: evt.position.y
+                }
+            });
+        }
+    });
+
+    cy.on('cxttap', 'node', function( evt ){
+        var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
+
+        tgt.remove();
+    });
+
+    var api = cy.expandCollapse('get');
+    var elements = null;
+
+    document.getElementById("collapseRecursively").addEventListener("click", function () {
+        api.collapseRecursively(cy.$(":selected"));
+    });
+
+    document.getElementById("expandRecursively").addEventListener("click", function () {
+        api.expandRecursively(cy.$(":selected"));
+    });
+
+    document.getElementById("expandAllAndRemove").addEventListener("click", function () {
+        api.expandAll();
+        elements = cy.elements().remove();
+    });
+
+    document.getElementById("loadInCollapsedState").addEventListener("click", function () {
+        if (elements){
+            cy.add(elements);
+            api.collapseAll();
+            elements = null;
+        }
+        else{
+            console.warn("Remove elements first by clicking on 'Expand all and remove' button.");
+        }
+    });
+
+    document.getElementById("collapseAll").addEventListener("click", function () {
+        api.collapseAll();
+    });
+
+    document.getElementById("expandAll").addEventListener("click", function () {
+        api.expandAll();
+    });
+
+});
+
+
+
diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html
index 1179e37..5335d05 100644
--- a/01_Code/physical_computing_interface/index.html
+++ b/01_Code/physical_computing_interface/index.html
@@ -1,139 +1,139 @@
-<html>
-
-<head>
-<title>Physcial Computing Interface</title>
-<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
-<link rel="stylesheet" type="text/css" href="./lib/jsoneditor/jsoneditor.css" >
-
-</head>
-        
-<body>
-
-<div id="threejs">
-        <div class="header1">
-                <i> 3D</i>
-                <!-- Three.js -->
-        </div>
-        <div id="webgl"></div>
-</div>
-
-<div id="graph">
-        <div class="header2">
-                <div class="dragbar"></div> 
-            <i> Graph</i>
-        </div>
-        <div id=jsondiveditor>
-                <p>
-                <button class="button" id="expandAllAndRemove">Expand all and remove</button>
-                <button class="button" id="loadInCollapsedState">Load compouds collapsed</button><br/>
-                <button class="button" id="collapseAll">Collapse all</button>            
-                <button class="button" id="expandAll">Expand all</button> <br/>
-                <button class="button" id="collapseRecursively">Collapse selected </button> 
-                <button class="button" id="expandRecursively">Expand selected </button>
-                </p>
-            
-            <div id="cy"></div>
-        </div>
-        <div class="dragbar"></div> 
-        
-        
-</div>
-
-<div id="json">
-        
-
-        <div class="header2">
-                <div class="dragbar"></div> 
-            <i> Node</i>
-        </div>
-        
-        <div class="dragbar1"></div>
-        <div id=jsondiveditor>
-                
-                <p>
-                    <button class="button" id="setJSON">Set JSON</button>
-                    <button class="button" id="getJSON">Get JSON</button>
-                </p>
-            
-                <div id="jsoneditor"></div>
-        </div>
-        <div class="dragbar"></div> 
-        
-        
-        
-</div>
-
-<div class="footer1">
-    <strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
-</div>
-<div class="footer2">
-    <i>footer</i>
-</div>
-</body>
-
-<!-- TODO: 
-            Clean structuture to modules?
-            Add another footer
-             
--->
-
-
-<!-- libraries -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-
-<script src="./lib/cytoscape.min.js"></script>
-<script src="https://unpkg.com/layout-base/layout-base.js"></script>
-<script src="https://unpkg.com/cose-base/cose-base.js"></script>
-<script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
-<script src="./lib/cytoscape-expand-collapse.js"></script>
-
-
-<script src="./lib/jsoneditor/jsoneditor.js"></script>
-
-
-<script src="./lib/three.min.js"></script>
-<script src="./lib/OrbitControls.js"></script>
-
-
-<!-- code -->
-<script src="./threejs/main.js"></script>
-<script src="./graph/main.js"></script>
-<script src="./json/main.js"></script>
-
-<script>
-    var i = 0;
-   $('.dragbar').mousedown(function(e){
-       
-        e.preventDefault();
-        $(document).mousemove(function(e){
-        //   $('#position').html(e.pageX +', '+ e.pageY);
-          $('#threejs').css("width",e.pageX+2);
-          $('#graph').css("left",e.pageX+2);
-          $('#json').css("left",e.pageX+2);
-          $('.footer1').css("width",e.pageX+2);
-          $('.footer2').css("left",e.pageX+2);
-          
-       })
-    });
-
-    $('.dragbar1').mousedown(function(e){
-       
-       e.preventDefault();
-       // $('#mousestatus').html("mousedown" + i++);
-       $(document).mousemove(function(e){
-        $('#graph').css("height",e.pageY+2);
-        $('#json').css("top",e.pageY+2);
-         
-      })
-   });
-
-   $(document).mouseup(function(e){
-       $(document).unbind('mousemove');
-    });
-
-</script>
-
-
-
-
+<html>
+
+<head>
+<title>Physcial Computing Interface</title>
+<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
+<link rel="stylesheet" type="text/css" href="./lib/jsoneditor/jsoneditor.css" >
+
+</head>
+        
+<body>
+
+<div id="threejs">
+        <div class="header1">
+                <i> 3D</i>
+                <!-- Three.js -->
+        </div>
+        <div id="webgl"></div>
+</div>
+
+<div id="graph">
+        <div class="header2">
+                <div class="dragbar"></div> 
+            <i> Graph</i>
+        </div>
+        <div id=jsondiveditor>
+                <p>
+                <button class="button" id="expandAllAndRemove">Expand all and remove</button>
+                <button class="button" id="loadInCollapsedState">Load compouds collapsed</button><br/>
+                <button class="button" id="collapseAll">Collapse all</button>            
+                <button class="button" id="expandAll">Expand all</button> <br/>
+                <button class="button" id="collapseRecursively">Collapse selected </button> 
+                <button class="button" id="expandRecursively">Expand selected </button>
+                </p>
+            
+            <div id="cy"></div>
+        </div>
+        <div class="dragbar"></div> 
+        
+        
+</div>
+
+<div id="json">
+        
+
+        <div class="header2">
+                <div class="dragbar"></div> 
+            <i> Node</i>
+        </div>
+        
+        <div class="dragbar1"></div>
+        <div id=jsondiveditor>
+                
+                <p>
+                    <button class="button" id="setJSON">Set JSON</button>
+                    <button class="button" id="getJSON">Get JSON</button>
+                </p>
+            
+                <div id="jsoneditor"></div>
+        </div>
+        <div class="dragbar"></div> 
+        
+        
+        
+</div>
+
+<div class="footer1">
+    <strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
+</div>
+<div class="footer2">
+    <i>footer</i>
+</div>
+</body>
+
+<!-- TODO: 
+            Clean structuture to modules?
+            Add another footer
+             
+-->
+
+
+<!-- libraries -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+
+<script src="./lib/cytoscape.min.js"></script>
+<script src="https://unpkg.com/layout-base/layout-base.js"></script>
+<script src="https://unpkg.com/cose-base/cose-base.js"></script>
+<script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
+<script src="./lib/cytoscape-expand-collapse.js"></script>
+
+
+<script src="./lib/jsoneditor/jsoneditor.js"></script>
+
+
+<script src="./lib/three.min.js"></script>
+<script src="./lib/OrbitControls.js"></script>
+
+
+<!-- code -->
+<script src="./threejs/main.js"></script>
+<script src="./graph/main.js"></script>
+<script src="./json/main.js"></script>
+
+<script>
+    var i = 0;
+   $('.dragbar').mousedown(function(e){
+       
+        e.preventDefault();
+        $(document).mousemove(function(e){
+        //   $('#position').html(e.pageX +', '+ e.pageY);
+          $('#threejs').css("width",e.pageX+2);
+          $('#graph').css("left",e.pageX+2);
+          $('#json').css("left",e.pageX+2);
+          $('.footer1').css("width",e.pageX+2);
+          $('.footer2').css("left",e.pageX+2);
+          
+       })
+    });
+
+    $('.dragbar1').mousedown(function(e){
+       
+       e.preventDefault();
+       // $('#mousestatus').html("mousedown" + i++);
+       $(document).mousemove(function(e){
+        $('#graph').css("height",e.pageY+2);
+        $('#json').css("top",e.pageY+2);
+         
+      })
+   });
+
+   $(document).mouseup(function(e){
+       $(document).unbind('mousemove');
+    });
+
+</script>
+
+
+
+
 </html>
\ No newline at end of file
diff --git a/01_Code/physical_computing_interface/json/index.html b/01_Code/physical_computing_interface/json/index.html
index 37d8aa5..4d940e5 100644
--- a/01_Code/physical_computing_interface/json/index.html
+++ b/01_Code/physical_computing_interface/json/index.html
@@ -1,50 +1,50 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <title>JSONEditor | Basic usage</title>
-
-  <link href="../lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
-  <script src="../lib/jsoneditor/jsoneditor.min.js"></script>
-
-  <style type="text/css">
-    #jsoneditor {
-      width: 500px;
-      height: 500px;
-    }
-  </style>
-</head>
-<body>
-<p>
-  <button id="setJSON">Set JSON</button>
-  <button id="getJSON">Get JSON</button>
-</p>
-<div id="jsoneditor"></div>
-
-<script>
-  // create the editor
-  const container = document.getElementById('jsoneditor')
-  const options = {}
-  const editor = new JSONEditor(container, options)
-
-  // set json
-  document.getElementById('setJSON').onclick = function () {
-    const json = {
-      'array': [1, 2, 3],
-      'boolean': true,
-      'color': '#82b92c',
-      'null': null,
-      'number': 123,
-      'object': {'a': 'b', 'c': 'd'},
-      'string': 'Hello World'
-    }
-    editor.set(json)
-  }
-
-  // get json
-  document.getElementById('getJSON').onclick = function () {
-    const json = editor.get()
-    alert(JSON.stringify(json, null, 2))
-  }
-</script>
-</body>
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>JSONEditor | Basic usage</title>
+
+  <link href="../lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
+  <script src="../lib/jsoneditor/jsoneditor.min.js"></script>
+
+  <style type="text/css">
+    #jsoneditor {
+      width: 500px;
+      height: 500px;
+    }
+  </style>
+</head>
+<body>
+<p>
+  <button id="setJSON">Set JSON</button>
+  <button id="getJSON">Get JSON</button>
+</p>
+<div id="jsoneditor"></div>
+
+<script>
+  // create the editor
+  const container = document.getElementById('jsoneditor')
+  const options = {}
+  const editor = new JSONEditor(container, options)
+
+  // set json
+  document.getElementById('setJSON').onclick = function () {
+    const json = {
+      'array': [1, 2, 3],
+      'boolean': true,
+      'color': '#82b92c',
+      'null': null,
+      'number': 123,
+      'object': {'a': 'b', 'c': 'd'},
+      'string': 'Hello World'
+    }
+    editor.set(json)
+  }
+
+  // get json
+  document.getElementById('getJSON').onclick = function () {
+    const json = editor.get()
+    alert(JSON.stringify(json, null, 2))
+  }
+</script>
+</body>
 </html>
\ No newline at end of file
diff --git a/01_Code/physical_computing_interface/json/main.js b/01_Code/physical_computing_interface/json/main.js
index fda277b..c5f511a 100644
--- a/01_Code/physical_computing_interface/json/main.js
+++ b/01_Code/physical_computing_interface/json/main.js
@@ -1,28 +1,28 @@
-function initEditor(){
-    // create the editor
-    const container = document.getElementById('jsoneditor')
-    const options = {}
-    const editor = new JSONEditor(container, options)
-
-    // set json
-    document.getElementById('setJSON').onclick = function () {
-        const json = {
-            'array': [1, 2, 3],
-            'boolean': true,
-            'color': '#82b92c',
-            'null': null,
-            'number': 123,
-            'object': {'a': 'b', 'c': 'd'},
-            'string': 'Hello World'
-        }
-        editor.set(selectedjson);
-    }
-
-    // get json
-    document.getElementById('getJSON').onclick = function () {
-    const json = editor.get()
-    alert(JSON.stringify(json, null, 2))
-    }
-
-}
-initEditor();
+function initEditor(){
+    // create the editor
+    const container = document.getElementById('jsoneditor')
+    const options = {}
+    const editor = new JSONEditor(container, options)
+
+    // set json
+    document.getElementById('setJSON').onclick = function () {
+        const json = {
+            'array': [1, 2, 3],
+            'boolean': true,
+            'color': '#82b92c',
+            'null': null,
+            'number': 123,
+            'object': {'a': 'b', 'c': 'd'},
+            'string': 'Hello World'
+        }
+        editor.set(selectedjson);
+    }
+
+    // get json
+    document.getElementById('getJSON').onclick = function () {
+    const json = editor.get()
+    alert(JSON.stringify(json, null, 2))
+    }
+
+}
+initEditor();
diff --git a/01_Code/physical_computing_interface/style.css b/01_Code/physical_computing_interface/style.css
index 569243b..ce3e933 100644
--- a/01_Code/physical_computing_interface/style.css
+++ b/01_Code/physical_computing_interface/style.css
@@ -1,191 +1,191 @@
-body,html{width:100%;height:100%;padding:0;margin:0;}
-
-:root {
-    --color1: #ffffff; /*white*/
-    --color11: #ffffff8c; /*shafaf*/
-    --color2: #020227;  /*kohly*/
-    --color3: #1c5c61; /*teal*/
-    --top: 20px;  
-    --dragwidth: 10px; 
-    --bottom: 20px;
-    --font: "Times New Roman", Times, serif;
-    /* --font: "Andale Mono", AndaleMono, monospace; */
-    /* --font: "Courier New", Courier, monospace; */
-}
-
-.header1{
-    background-color: var(--color1);
-
-    height: var(--top);
-    width: 50%;
-    float: left;
-    position: absolute;
-
-    bottom: var(--bottom);
-    overflow-y: hidden;
-    top:var(--dragwidth);
-    /* left:var(--dragwidth); */
-
-    font-family: var(--font);
-    color: var(--color2);
-    top:var(--dragwidth);
-}
-.header2{
-    background-color: var(--color2);
-
-    height: var(--top);
-    float: left;
-    position: absolute;
-
-    bottom: var(--bottom);
-    top:var(--dragwidth);
-    /* left:var(--dragwidth); */
-
-    
-    font-family: var(--font);
-    color: var(--color1);
-    
-}
-#threejs{
-   background-color: var(--color11);
-   /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
-   width: 50%;
-   float: left;
-   position: absolute;
-   top:0px;
-   bottom: var(--bottom);
-   overflow-y: hidden;
-   font-family: var(--font);
-   color: var(--color2);
-}
-
-#webgl{
-    top:var(--top);
-    bottom: var(--bottom);
-    overflow-y: hidden;
-    font-family: var(--font);
-    color: var(--color2);
- }
-
-#graph{
-    background-color: var(--color2);
-    /* background-image: linear-gradient(+90deg, #ffffff, #ffffff); */
-    float: right;
-    float: top;
-    position: absolute;
-    top: 0px;
-    bottom: 50%;
-    /* bottom: var(--bottom); */
-    right: 0;
-    left:50%;
-    font-family: var(--font);
-    color: var(--color1);
-}
-
-#json{
-    background-color: var(--color2);
-    /* background-image: linear-gradient(+90deg, #ffffff, #ffffff); */
-    float: right;
-    float: bottom;
-    position: absolute;
-    /* top:var(--top); */
-    bottom: var(--bottom);
-    right: 0;
-    left:50%;
-    top:50%;
-    font-family: var(--font);
-    color: var(--color1);
-}
-
-.footer1{
-    background-color: var(--color1);
-    width: 50%;
-    float: left;
-    position: absolute;
-    overflow-y: hidden;
-    font-family: var(--font);
-    color: var(--color2);
-    height: var(--bottom);
-    bottom:0;
- }
- 
- .footer2{
-    background-color: var(--color1);
-    float: right;
-    position: absolute;
-    right: 0;
-    left:50%;
-    font-family: var(--font);
-    color: var(--color2);
-    height: var(--bottom);
-    bottom:0;
- }
-
-
-.dragbar{
-    /* background-color: var(--color3); */
-   background-image: linear-gradient(+90deg, var(--color1) ,var(--color11) ,var(--color2));
-   height:100%;
-   float: left;
-   width: var(--dragwidth);
-   cursor: col-resize;
-}
-
-.dragbar1{
-    /* background-color: var(--color3); */
-    background-image: linear-gradient(+0deg, var(--color2)50% ,var(--color1)60% ,var(--color2));
-    width:100%;
-    left:var(--dragwidth);
-    float: bottom;
-    /* position: absolute; */
-    height: var(--dragwidth);
-    cursor: row-resize;
- }
-
-#cy {
-    height: 100%;
-    width: 100%;
-    /* position: absolute; */
-    /* float: right; */
-    float: top;
-    font-family: var(--font);
-    /* left: var(--dragwidth);
-    top:var(--top); */
-}
-#jsoneditor {
-    width: 100%;
-    height: 100%;
-    float: bottom;
-}
-
-#jsondiveditor {
-    width: 90%;
-    height: 80%;
-    left: var(--top);
-    top:var(--top);
-    float: right;
-    float: top;
-    position: absolute;
-    color: var(--color1);
-}
-
-.button {
-    background-color: transparent;
-    border: 0;
-    color: var(--color1);
-    border: 1px solid var(--color3);
-    padding: 4px 12px;
-    
-    -o-transition: background-color .2s ease-in; 
-	-moz-transition: background-color .2s ease-in;
-	-webkit-transition: background-color .2s ease-in; 
-	transition: background-color .2s ease-in; 
-}
-.button:hover {
-    background-color: #e5e5e5;    
-}
-
-.button:active {
-    background-color: #ccc;
-}
-
+body,html{width:100%;height:100%;padding:0;margin:0;}
+
+:root {
+    --color1: #ffffff; /*white*/
+    --color11: #ffffff8c; /*shafaf*/
+    --color2: #020227;  /*kohly*/
+    --color3: #1c5c61; /*teal*/
+    --top: 20px;  
+    --dragwidth: 10px; 
+    --bottom: 20px;
+    --font: "Times New Roman", Times, serif;
+    /* --font: "Andale Mono", AndaleMono, monospace; */
+    /* --font: "Courier New", Courier, monospace; */
+}
+
+.header1{
+    background-color: var(--color1);
+
+    height: var(--top);
+    width: 50%;
+    float: left;
+    position: absolute;
+
+    bottom: var(--bottom);
+    overflow-y: hidden;
+    top:var(--dragwidth);
+    /* left:var(--dragwidth); */
+
+    font-family: var(--font);
+    color: var(--color2);
+    top:var(--dragwidth);
+}
+.header2{
+    background-color: var(--color2);
+
+    height: var(--top);
+    float: left;
+    position: absolute;
+
+    bottom: var(--bottom);
+    top:var(--dragwidth);
+    /* left:var(--dragwidth); */
+
+    
+    font-family: var(--font);
+    color: var(--color1);
+    
+}
+#threejs{
+   background-color: var(--color11);
+   /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
+   width: 50%;
+   float: left;
+   position: absolute;
+   top:0px;
+   bottom: var(--bottom);
+   overflow-y: hidden;
+   font-family: var(--font);
+   color: var(--color2);
+}
+
+#webgl{
+    top:var(--top);
+    bottom: var(--bottom);
+    overflow-y: hidden;
+    font-family: var(--font);
+    color: var(--color2);
+ }
+
+#graph{
+    background-color: var(--color2);
+    /* background-image: linear-gradient(+90deg, #ffffff, #ffffff); */
+    float: right;
+    float: top;
+    position: absolute;
+    top: 0px;
+    bottom: 50%;
+    /* bottom: var(--bottom); */
+    right: 0;
+    left:50%;
+    font-family: var(--font);
+    color: var(--color1);
+}
+
+#json{
+    background-color: var(--color2);
+    /* background-image: linear-gradient(+90deg, #ffffff, #ffffff); */
+    float: right;
+    float: bottom;
+    position: absolute;
+    /* top:var(--top); */
+    bottom: var(--bottom);
+    right: 0;
+    left:50%;
+    top:50%;
+    font-family: var(--font);
+    color: var(--color1);
+}
+
+.footer1{
+    background-color: var(--color1);
+    width: 50%;
+    float: left;
+    position: absolute;
+    overflow-y: hidden;
+    font-family: var(--font);
+    color: var(--color2);
+    height: var(--bottom);
+    bottom:0;
+ }
+ 
+ .footer2{
+    background-color: var(--color1);
+    float: right;
+    position: absolute;
+    right: 0;
+    left:50%;
+    font-family: var(--font);
+    color: var(--color2);
+    height: var(--bottom);
+    bottom:0;
+ }
+
+
+.dragbar{
+    /* background-color: var(--color3); */
+   background-image: linear-gradient(+90deg, var(--color1) ,var(--color11) ,var(--color2));
+   height:100%;
+   float: left;
+   width: var(--dragwidth);
+   cursor: col-resize;
+}
+
+.dragbar1{
+    /* background-color: var(--color3); */
+    background-image: linear-gradient(+0deg, var(--color2)50% ,var(--color1)60% ,var(--color2));
+    width:100%;
+    left:var(--dragwidth);
+    float: bottom;
+    /* position: absolute; */
+    height: var(--dragwidth);
+    cursor: row-resize;
+ }
+
+#cy {
+    height: 100%;
+    width: 100%;
+    /* position: absolute; */
+    /* float: right; */
+    float: top;
+    font-family: var(--font);
+    /* left: var(--dragwidth);
+    top:var(--top); */
+}
+#jsoneditor {
+    width: 100%;
+    height: 100%;
+    float: bottom;
+}
+
+#jsondiveditor {
+    width: 90%;
+    height: 80%;
+    left: var(--top);
+    top:var(--top);
+    float: right;
+    float: top;
+    position: absolute;
+    color: var(--color1);
+}
+
+.button {
+    background-color: transparent;
+    border: 0;
+    color: var(--color1);
+    border: 1px solid var(--color3);
+    padding: 4px 12px;
+    
+    -o-transition: background-color .2s ease-in; 
+	-moz-transition: background-color .2s ease-in;
+	-webkit-transition: background-color .2s ease-in; 
+	transition: background-color .2s ease-in; 
+}
+.button:hover {
+    background-color: #e5e5e5;    
+}
+
+.button:active {
+    background-color: #ccc;
+}
+
diff --git a/01_Code/physical_computing_interface/threejs/index.html b/01_Code/physical_computing_interface/threejs/index.html
index 10084e9..36b892f 100644
--- a/01_Code/physical_computing_interface/threejs/index.html
+++ b/01_Code/physical_computing_interface/threejs/index.html
@@ -1,134 +1,134 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - interactive - voxel painter</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-		<style>
-			body {
-				background-color: #f0f0f0;
-				color: #444;
-			}
-			a {
-				color: #08f;
-			}
-		</style>
-	</head>
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - voxel painter - webgl<br>
-			<strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
-        </div>
-        <script src="../lib/three.min.js"></script>
-
-		<script >
-			var camera, scene, renderer;
-			var plane;
-			var mouse, raycaster, isShiftDown = false;
-			var rollOverMesh, rollOverMaterial;
-			var cubeGeo, cubeMaterial;
-			var objects = [];
-			init();
-			render();
-			function init() {
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.set( 500, 800, 1300 );
-				camera.lookAt( 0, 0, 0 );
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
-				// roll-over helpers
-				var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
-				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
-				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
-				scene.add( rollOverMesh );
-				// cubes
-				cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
-				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( 'textures/square-outline-textured.png' ) } );
-				// grid
-				var gridHelper = new THREE.GridHelper( 1000, 20 );
-				scene.add( gridHelper );
-				//
-				raycaster = new THREE.Raycaster();
-				mouse = new THREE.Vector2();
-				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
-				geometry.rotateX( - Math.PI / 2 );
-				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
-				scene.add( plane );
-				objects.push( plane );
-				// lights
-				var ambientLight = new THREE.AmbientLight( 0x606060 );
-				scene.add( ambientLight );
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
-				scene.add( directionalLight );
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				document.body.appendChild( renderer.domElement );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-				//
-				window.addEventListener( 'resize', onWindowResize, false );
-			}
-			function onWindowResize() {
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-			}
-			function onDocumentMouseMove( event ) {
-				event.preventDefault();
-				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
-				raycaster.setFromCamera( mouse, camera );
-				var intersects = raycaster.intersectObjects( objects );
-				if ( intersects.length > 0 ) {
-					var intersect = intersects[ 0 ];
-					rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
-					rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
-				}
-				render();
-			}
-			function onDocumentMouseDown( event ) {
-				event.preventDefault();
-				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
-				raycaster.setFromCamera( mouse, camera );
-				var intersects = raycaster.intersectObjects( objects );
-				if ( intersects.length > 0 ) {
-					var intersect = intersects[ 0 ];
-					// delete cube
-					if ( isShiftDown ) {
-						if ( intersect.object !== plane ) {
-							scene.remove( intersect.object );
-							objects.splice( objects.indexOf( intersect.object ), 1 );
-						}
-						// create cube
-					} else {
-						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
-						voxel.position.copy( intersect.point ).add( intersect.face.normal );
-						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
-						scene.add( voxel );
-						objects.push( voxel );
-					}
-					render();
-				}
-			}
-			function onDocumentKeyDown( event ) {
-				switch ( event.keyCode ) {
-					case 16: isShiftDown = true; break;
-				}
-			}
-			function onDocumentKeyUp( event ) {
-				switch ( event.keyCode ) {
-					case 16: isShiftDown = false; break;
-				}
-			}
-			function render() {
-				renderer.render( scene, camera );
-			}
-		</script>
-
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - interactive - voxel painter</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				background-color: #f0f0f0;
+				color: #444;
+			}
+			a {
+				color: #08f;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - voxel painter - webgl<br>
+			<strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
+        </div>
+        <script src="../lib/three.min.js"></script>
+
+		<script >
+			var camera, scene, renderer;
+			var plane;
+			var mouse, raycaster, isShiftDown = false;
+			var rollOverMesh, rollOverMaterial;
+			var cubeGeo, cubeMaterial;
+			var objects = [];
+			init();
+			render();
+			function init() {
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.set( 500, 800, 1300 );
+				camera.lookAt( 0, 0, 0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+				// roll-over helpers
+				var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
+				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
+				scene.add( rollOverMesh );
+				// cubes
+				cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( 'textures/square-outline-textured.png' ) } );
+				// grid
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
+				//
+				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
+				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+				geometry.rotateX( - Math.PI / 2 );
+				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
+				scene.add( plane );
+				objects.push( plane );
+				// lights
+				var ambientLight = new THREE.AmbientLight( 0x606060 );
+				scene.add( ambientLight );
+				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
+				scene.add( directionalLight );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'keydown', onDocumentKeyDown, false );
+				document.addEventListener( 'keyup', onDocumentKeyUp, false );
+				//
+				window.addEventListener( 'resize', onWindowResize, false );
+			}
+			function onWindowResize() {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+			}
+			function onDocumentMouseMove( event ) {
+				event.preventDefault();
+				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
+				raycaster.setFromCamera( mouse, camera );
+				var intersects = raycaster.intersectObjects( objects );
+				if ( intersects.length > 0 ) {
+					var intersect = intersects[ 0 ];
+					rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
+					rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
+				}
+				render();
+			}
+			function onDocumentMouseDown( event ) {
+				event.preventDefault();
+				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
+				raycaster.setFromCamera( mouse, camera );
+				var intersects = raycaster.intersectObjects( objects );
+				if ( intersects.length > 0 ) {
+					var intersect = intersects[ 0 ];
+					// delete cube
+					if ( isShiftDown ) {
+						if ( intersect.object !== plane ) {
+							scene.remove( intersect.object );
+							objects.splice( objects.indexOf( intersect.object ), 1 );
+						}
+						// create cube
+					} else {
+						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
+						voxel.position.copy( intersect.point ).add( intersect.face.normal );
+						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
+						scene.add( voxel );
+						objects.push( voxel );
+					}
+					render();
+				}
+			}
+			function onDocumentKeyDown( event ) {
+				switch ( event.keyCode ) {
+					case 16: isShiftDown = true; break;
+				}
+			}
+			function onDocumentKeyUp( event ) {
+				switch ( event.keyCode ) {
+					case 16: isShiftDown = false; break;
+				}
+			}
+			function render() {
+				renderer.render( scene, camera );
+			}
+		</script>
+
+	</body>
 </html>
\ No newline at end of file
diff --git a/01_Code/physical_computing_interface/threejs/main.js b/01_Code/physical_computing_interface/threejs/main.js
index d410cb4..702894c 100644
--- a/01_Code/physical_computing_interface/threejs/main.js
+++ b/01_Code/physical_computing_interface/threejs/main.js
@@ -1,137 +1,137 @@
-function threejs(){
-    var camera, scene, renderer;
-    var plane;
-    var mouse, raycaster, isShiftDown = false;
-    var rollOverMesh, rollOverMaterial;
-    var cubeGeo, cubeMaterial;
-    var objects = [];
-    var container = document.getElementById( 'webgl' );
-    var container1 = document.getElementById( 'threejs' );
-    var controls;
-    init();
-    render();
-    function init() {
-        camera = new THREE.PerspectiveCamera( 45, getWidth()  / getHeight() , 1, 10000 );
-        camera.position.set( 500, 800, 1300 );
-        camera.lookAt( 0, 0, 0 );
-        scene = new THREE.Scene();
-        scene.background = new THREE.Color( 0xffffff );
-        // roll-over helpers
-        var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
-        rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
-        rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
-        scene.add( rollOverMesh );
-        // cubes
-        cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
-        cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } );
-        // grid
-        var gridHelper = new THREE.GridHelper( 1000, 20 );
-        scene.add( gridHelper );
-        //
-        raycaster = new THREE.Raycaster();
-        mouse = new THREE.Vector2();
-        var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
-        geometry.rotateX( - Math.PI / 2 );
-        plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
-        scene.add( plane );
-        objects.push( plane );
-        // lights
-        var ambientLight = new THREE.AmbientLight( 0x606060 );
-        scene.add( ambientLight );
-        var directionalLight = new THREE.DirectionalLight( 0xffffff );
-        directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
-        scene.add( directionalLight );
-        renderer = new THREE.WebGLRenderer( { antialias: true } );
-        renderer.setPixelRatio( window.devicePixelRatio );
-        // renderer.setSize( window.innerWidth, window.innerHeight );
-        renderer.setSize(getWidth(),getHeight());
-
-        renderer = new THREE.WebGLRenderer();
-        
-        container.appendChild( renderer.domElement );
-        controls = new THREE.OrbitControls( camera, renderer.domElement );
-        controls.update();
-        // document.body.appendChild( renderer.domElement );
-        onWindowResize();
-        container.addEventListener( 'mousemove', onDocumentMouseMove, false );
-        container.addEventListener( 'mousedown', onDocumentMouseDown, false );
-        window.addEventListener( 'keydown', onDocumentKeyDown, false );
-        window.addEventListener( 'keyup', onDocumentKeyUp, false );
-        //
-        window.addEventListener( 'mouseup', onWindowResize, false );
-    }
-
-    function onWindowResize() {
-        camera.aspect = getWidth() / getHeight();
-        camera.updateProjectionMatrix();
-        renderer.setSize( getWidth() , getHeight() );
-    }
-
-    function onDocumentMouseMove( event ) {
-        event.preventDefault();
-        mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 );
-        raycaster.setFromCamera( mouse, camera );
-        var intersects = raycaster.intersectObjects( objects );
-        if ( intersects.length > 0 ) {
-            var intersect = intersects[ 0 ];
-            rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
-            rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
-        }
-        render();
-    }
-
-    function onDocumentMouseDown( event ) {
-        event.preventDefault();
-        mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 );
-        raycaster.setFromCamera( mouse, camera );
-        var intersects = raycaster.intersectObjects( objects );
-        if ( intersects.length > 0 ) {
-            var intersect = intersects[ 0 ];
-            // delete cube
-            if ( isShiftDown ) {
-                console.log("shiftt iss dowwn")
-                if ( intersect.object !== plane ) {
-                    scene.remove( intersect.object );
-                    objects.splice( objects.indexOf( intersect.object ), 1 );
-                }
-                // create cube
-            } else {
-                var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
-                voxel.position.copy( intersect.point ).add( intersect.face.normal );
-                voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
-                scene.add( voxel );
-                objects.push( voxel );
-            }
-            render();
-        }
-    }
-
-    function onDocumentKeyDown( event ) {
-        switch ( event.keyCode ) {
-            case 16: isShiftDown = true; break;
-        }
-    }
-
-    function onDocumentKeyUp( event ) {
-        switch ( event.keyCode ) {
-            case 16: isShiftDown = false; break;
-        }
-    }
-
-    function render() {
-        renderer.render( scene, camera );
-        controls.update();
-    }
-
-    function getWidth(){
-        // return container.style.width;
-        return $('#threejs').width() ;
-    }
-
-    function getHeight(){
-        // return container.style.height;
-        return $('#threejs').height() ;
-    }
-
-}
-threejs();
+function threejs(){
+    var camera, scene, renderer;
+    var plane;
+    var mouse, raycaster, isShiftDown = false;
+    var rollOverMesh, rollOverMaterial;
+    var cubeGeo, cubeMaterial;
+    var objects = [];
+    var container = document.getElementById( 'webgl' );
+    var container1 = document.getElementById( 'threejs' );
+    var controls;
+    init();
+    render();
+    function init() {
+        camera = new THREE.PerspectiveCamera( 45, getWidth()  / getHeight() , 1, 10000 );
+        camera.position.set( 500, 800, 1300 );
+        camera.lookAt( 0, 0, 0 );
+        scene = new THREE.Scene();
+        scene.background = new THREE.Color( 0xffffff );
+        // roll-over helpers
+        var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
+        rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
+        rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
+        scene.add( rollOverMesh );
+        // cubes
+        cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
+        cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } );
+        // grid
+        var gridHelper = new THREE.GridHelper( 1000, 20 );
+        scene.add( gridHelper );
+        //
+        raycaster = new THREE.Raycaster();
+        mouse = new THREE.Vector2();
+        var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+        geometry.rotateX( - Math.PI / 2 );
+        plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
+        scene.add( plane );
+        objects.push( plane );
+        // lights
+        var ambientLight = new THREE.AmbientLight( 0x606060 );
+        scene.add( ambientLight );
+        var directionalLight = new THREE.DirectionalLight( 0xffffff );
+        directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
+        scene.add( directionalLight );
+        renderer = new THREE.WebGLRenderer( { antialias: true } );
+        renderer.setPixelRatio( window.devicePixelRatio );
+        // renderer.setSize( window.innerWidth, window.innerHeight );
+        renderer.setSize(getWidth(),getHeight());
+
+        renderer = new THREE.WebGLRenderer();
+        
+        container.appendChild( renderer.domElement );
+        controls = new THREE.OrbitControls( camera, renderer.domElement );
+        controls.update();
+        // document.body.appendChild( renderer.domElement );
+        onWindowResize();
+        container.addEventListener( 'mousemove', onDocumentMouseMove, false );
+        container.addEventListener( 'mousedown', onDocumentMouseDown, false );
+        window.addEventListener( 'keydown', onDocumentKeyDown, false );
+        window.addEventListener( 'keyup', onDocumentKeyUp, false );
+        //
+        window.addEventListener( 'mouseup', onWindowResize, false );
+    }
+
+    function onWindowResize() {
+        camera.aspect = getWidth() / getHeight();
+        camera.updateProjectionMatrix();
+        renderer.setSize( getWidth() , getHeight() );
+    }
+
+    function onDocumentMouseMove( event ) {
+        event.preventDefault();
+        mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 );
+        raycaster.setFromCamera( mouse, camera );
+        var intersects = raycaster.intersectObjects( objects );
+        if ( intersects.length > 0 ) {
+            var intersect = intersects[ 0 ];
+            rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
+            rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
+        }
+        render();
+    }
+
+    function onDocumentMouseDown( event ) {
+        event.preventDefault();
+        mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 );
+        raycaster.setFromCamera( mouse, camera );
+        var intersects = raycaster.intersectObjects( objects );
+        if ( intersects.length > 0 ) {
+            var intersect = intersects[ 0 ];
+            // delete cube
+            if ( isShiftDown ) {
+                console.log("shiftt iss dowwn")
+                if ( intersect.object !== plane ) {
+                    scene.remove( intersect.object );
+                    objects.splice( objects.indexOf( intersect.object ), 1 );
+                }
+                // create cube
+            } else {
+                var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
+                voxel.position.copy( intersect.point ).add( intersect.face.normal );
+                voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
+                scene.add( voxel );
+                objects.push( voxel );
+            }
+            render();
+        }
+    }
+
+    function onDocumentKeyDown( event ) {
+        switch ( event.keyCode ) {
+            case 16: isShiftDown = true; break;
+        }
+    }
+
+    function onDocumentKeyUp( event ) {
+        switch ( event.keyCode ) {
+            case 16: isShiftDown = false; break;
+        }
+    }
+
+    function render() {
+        renderer.render( scene, camera );
+        controls.update();
+    }
+
+    function getWidth(){
+        // return container.style.width;
+        return $('#threejs').width() ;
+    }
+
+    function getHeight(){
+        // return container.style.height;
+        return $('#threejs').height() ;
+    }
+
+}
+threejs();
diff --git a/README.md b/README.md
index defa30a..0135a93 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,31 @@
-# Physical Computing Design Tools
-
-## Description
-Repository for DICE design tools explorations.
-
-Topics include:
-- Programming strategies for spacial computing
-    - Data flow programming and [Distributed Deep Neural Networks](https://gitlab.cba.mit.edu/amiraa/ddnn)
-    - Physics Simulation 
-    - Trusted Systems
-- Reconfiguration strategies for DICE pieces 
-    - CAM tools and path planing:
-        - Desktop (external) assembler 
-        - Swarm assembly and manipulation
-
-----
-## TODO
-- [ ] Data Flow data Data structure
-  - [ ] look at examples
-- [ ] Max flow implementation
-- [ ] Graph Search
-- [ ] Graph creation (nodes creation)
-- [ ] Graph Hierarchy
-----
-
-## Progress
-- [Distributed Deep Neural Networks](https://gitlab.cba.mit.edu/amiraa/ddnn)
-
-## Demo
-
-"Physical Computing Interface" demo lives [here.](https://amiraa.pages.cba.mit.edu/physical-computing-design-tools/01_Code/physical_computing_interface/index.html)
+# Physical Computing Design Tools
+
+## Description
+Repository for DICE design tools explorations.
+
+Topics include:
+- Programming strategies for spacial computing
+    - Data flow programming and [Distributed Deep Neural Networks](https://gitlab.cba.mit.edu/amiraa/ddnn)
+    - Physics Simulation 
+    - Trusted Systems
+- Reconfiguration strategies for DICE pieces 
+    - CAM tools and path planing:
+        - Desktop (external) assembler 
+        - Swarm assembly and manipulation
+
+----
+## TODO
+- [ ] Data Flow data Data structure
+  - [ ] look at examples
+- [ ] Max flow implementation
+- [ ] Graph Search
+- [ ] Graph creation (nodes creation)
+- [ ] Graph Hierarchy
+----
+
+## Progress
+- [Distributed Deep Neural Networks](https://gitlab.cba.mit.edu/amiraa/ddnn)
+
+## Demo
+
+"Physical Computing Interface" demo lives [here.](https://amiraa.pages.cba.mit.edu/physical-computing-design-tools/01_Code/physical_computing_interface/index.html)
-- 
GitLab