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