From 5ff56c0831e424ccafa9e6bacf4db92b9464b2a9 Mon Sep 17 00:00:00 2001
From: Amira Abdel-Rahman <amira-rahman@aucegypt.edu>
Date: Wed, 29 Jan 2020 14:16:35 -0500
Subject: [PATCH] performance calculation graph
---
.DS_Store | Bin 6148 -> 0 bytes
01_Code/.DS_Store | Bin 6148 -> 0 bytes
.../physical_computing_interface/.DS_Store | Bin 6148 -> 0 bytes
.../physical_computing_interface/globals.js | 2 +-
.../graph/code.js | 496 +++++++++++++++---
.../graph/index.html | 42 +-
.../simulation/.DS_Store | Bin 6148 -> 0 bytes
7 files changed, 473 insertions(+), 67 deletions(-)
delete mode 100644 .DS_Store
delete mode 100644 01_Code/.DS_Store
delete mode 100644 01_Code/physical_computing_interface/.DS_Store
delete mode 100644 01_Code/physical_computing_interface/simulation/.DS_Store
diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 1426ec2e32ad793a1ea92bdabc68d527870c7567..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 6148
zcmZQzU|@7AO)+F(5MW?n;9!8z3~dZp0Z1N%F(jFwB8(vOz-Ht#q%fqG1sCPz<U{2M
zQ6RnS3<eB_4Dk%k3`qL((jlf2GGJ7GGz3ONU^E0qLtr!nMniz45CGM^p!%PiBweG5
zM?+vV1V%y#fXW92Xe-<SN;g1gkQ4(W0|U4Vz{tSB0t*jDa6f<nBnQ$8qCr|gG)OB0
zBZvhy1FV&S5vr9D+zkQg19eG2G*~+WBLi4F10w@iI|C!wW(EdEh;{}>sLhPf9ttBw
zI|Cy`I|Cy`JIr~b^k@i-h5$4Km?5+PsQ!0lV8GS?ho~AQM?+vV1cqe@FtWG=yEuU>
zW$gX~)wQ7dGy$sS08|+xsGf$1fs}x%c5rpf1Q}G6fGPutgS3NaaCOYc0IAJK8w0Qq
M8l^`=fW9FB0EvDS<^TWy
diff --git a/01_Code/.DS_Store b/01_Code/.DS_Store
deleted file mode 100644
index 9e590ec8f16bcb601558a4c31c4dd79d41f2a26f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 6148
zcmZQzU|@7AO)+F(5MW?n;9!8z4DAe90Z1N%F(jFwB8(vOz-DAJBr_y3<S@iDBtzv0
zQ6RlC3<V4s43!MU49NQP8FCp47)lvR7&0017}6Qy!E^~jDnk)N8bcyOGDB)va8X`P
zeqK7nenM7_%8!P?Xb6mkz-S1JhQMeDAnHsG?$OW~4S~@R7!3im5CFB!6`<vW1C(xn
z&>$%WMg|6O7l4t0fd!_O5!?@80Lg*0f@qLd5Dn7GzzAZ2%>Zj<V1#OA1b0I~`aoS0
z5DnJOz{mjB&cMh3*3Q5PwwZx}5u%-e5o$9dw1>h7(ayjK(ayjK(GGLoC_Neiqagqd
z0cHp-0IL6885nT&{~@YI$<YuP4S``90*ov!!7fhVN*TNVKy@vsK21Q9W(3vI5IrDi
rP_+)OikTn-iV`rTj0_AQtsr@DRm{i$smVth0<aJorAI@6{viMW0Vy0p
diff --git a/01_Code/physical_computing_interface/.DS_Store b/01_Code/physical_computing_interface/.DS_Store
deleted file mode 100644
index 7d0dddfdc9ef619267093ef33b77a5d6305dec4b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 6148
zcmZQzU|@7AO)+F(5MW?n;9!8zj35RBCIAV8Fop~hRD=a&9@vZ=hD3%EhD?ThhCHa;
zV5dNC=VB;k$YjW6C}lu$e@?n#aB_Zb0g?x>s>{uHaY@R_PXYzxRgreXch3$wGB7aU
zP@6)u+JX!W`;nY7${Y=W(GVC7fzc2c4FR%4fDxjTgBwDRlA|Fo8Umvs01p9B`Je!4
z+cP*o=>`Z5l44+FU;uXk7#SEq&1kSbMsPoX0VD^~3Zg+;K{QA!10#q9HUq4cff1^e
z5!?*{=>v61Kr~o810&dG5Ff0afe~yo0|O&OI|C!sW?1Ki5u%-e5u%-e5o|lyX`{qw
z2#kgRQV1|Z*aD#X-<5#@mW3dqqvU7^jE2C72mwYGmtYqsaHWjhzo5DnRG%h5r9pKt
tq&fyw%&3h3Cdh!I1XL-gx(8_m(cr3>k%0lMb+jP>3!zbZGz91$0szy+Gf)5k
diff --git a/01_Code/physical_computing_interface/globals.js b/01_Code/physical_computing_interface/globals.js
index ecb3a6a..a4c9917 100644
--- a/01_Code/physical_computing_interface/globals.js
+++ b/01_Code/physical_computing_interface/globals.js
@@ -220,7 +220,7 @@ function globals(utils){
};
- this.grid=this.gridPresets.Dice;
+ this.grid=this.gridPresets.Cubic;
this.utils=utils;
this.occupancy=[];
diff --git a/01_Code/physical_computing_interface/graph/code.js b/01_Code/physical_computing_interface/graph/code.js
index 545c4fd..d3dbd29 100644
--- a/01_Code/physical_computing_interface/graph/code.js
+++ b/01_Code/physical_computing_interface/graph/code.js
@@ -1,13 +1,38 @@
-var cy = cytoscape({
+var color1= "#ffffff"; //white
+var color11= "#ffffff8c"; //white transparent
+var color2= "#020227"; //dark blue
+var color3= "#1c5c61"; //teal
+var color33= "#1c5c618c"; //teal transparent
+var color4= "#fa6e70"; //red/orange
+var color44= "#fa6e708c"; //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: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
- // 'font-family': "consolas",
- 'font-family':"Times New Roman",
+ 'font-family': "consolas",
+ // 'font-family':"Times New Roman",
'width': 80,
'height': 80
})
@@ -21,31 +46,29 @@ var cy = cytoscape({
'target-arrow-shape': 'triangle'
})
.selector(':selected')
-// .css({
-// 'background-color': 'black',
-// 'line-color': 'black',
-// 'target-arrow-color': 'black',
-// 'source-arrow-color': 'black',
-// 'text-outline-color': 'black'
-// })
+ // .css({
+ // 'background-color': 'black',
+ // 'line-color': 'black',
+ // 'target-arrow-color': 'black',
+ // 'source-arrow-color': 'black',
+ // 'text-outline-color': 'black'
+ // })
.selector('$node > node')
.css({
'shape': 'roundrectangle',
'text-valign': 'top',
- 'height': 'auto',
- 'width': 'auto',
'background-color': '#ccc',
- 'background-opacity': 0.333,
+ 'background-opacity': 0.1,
'color': '#888',
'text-outline-width':
0,
'font-size': 25
})
-// .selector('#core')
-// .css({
-// 'background-color': '#000',
-// 'text-outline-color': '#000'
-// })
+ // .selector('#core')
+ // .css({
+ // 'background-color': '#000',
+ // 'text-outline-color': '#000'
+ // })
.selector('#core, #app')
.css({
'width': 120,
@@ -61,10 +84,25 @@ var cy = cytoscape({
})
.selector('#ext, .ext')
.css({
- 'background-color': '#93CDDD',
- 'text-outline-color': '#93CDDD',
- 'line-color': '#93CDDD',
- 'target-arrow-color': '#93CDDD'
+ 'background-color': color3,
+ // 'text-outline-color': '#93CDDD',
+ 'line-color': color3,
+ 'target-arrow-color': color3,
+ 'color': color6,
+ 'font-family':font,
+ "text-wrap": "wrap",
+ })
+ .selector('#exte, .exte')
+ .css({
+ 'background-color': color3,
+ // 'text-outline-color': '#93CDDD',
+ 'line-color': color3,
+ 'target-arrow-color': color3,
+ 'color': color6,
+ 'font-family':font,
+ 'curve-style': 'bezier',
+ 'width': 2,
+ "text-wrap": "wrap",
})
.selector('#app, .app')
.css({
@@ -80,7 +118,7 @@ var cy = cytoscape({
'background-opacity': 0,
'border-width': 1,
'border-color': '#aaa',
- 'border-opacity': 0.5,
+ 'border-opacity': 0.3,
'font-size': 50,
'padding-top': 40,
'padding-left': 40,
@@ -91,78 +129,165 @@ var cy = cytoscape({
elements: {
nodes: [
{
- data: { id: 'cy', name: 'DICE' }
+ data: { id: 'DICE', name: 'DICE' }
},
+ ///////////hardware
+
{
- data: { id: 'core', name: 'Core', parent: 'api' },
+ data: { id: 'hardware', name: 'Hardware', parent: 'DICE' },
position: { x: 0, y: 0 }
},
-
{
- data: { id: 'eles', name: 'Collection', parent: 'api' },
- position: { x: 150, y: 150 }
+ data: { id: 'chip', name: 'Chip', parent: 'hardware' },
+ position: { x: 0, y: 0 }
},
-
{
- data: { id: 'style', name: 'Stylesheet', parent: 'api' },
- position: { x: 0, y: 150 }
+ data: { id: 'ram', name: 'ram', parent: 'chip' },
+ position: { x: 0, y: 0 },classes: 'ext',
},
-
{
- data: { id: 'selector', name: 'Selector', parent: 'api' },
- position: { x: -150, y: 150 }
+ data: { id: 'cyclesPerSecond', name: 'cycles Per second', parent: 'chip' },
+ position: { x: 0, y: 0 },classes: 'ext',
},
-
{
- data: { id: 'ext', name: 'Extensions', parent: 'cy' }
+ data: { id: 'bitsPerSecond', name: 'bits per second', parent: 'chip' },
+ position: { x: 0, y: 0 },classes: 'ext',
},
-
{
- data: { id: 'corefn', name: 'Core Function', parent: 'ext' },
- classes: 'ext',
- position: { x: 350, y: -140 }
+ data: { id: 'costPerChip', name: 'cost per chip', parent: 'chip' },
+ position: { x: 0, y: 0 },classes: 'ext',
},
-
{
- data: { id: 'elesfn', name: 'Collection Function', parent: 'ext' },
- classes: 'ext',
- position: { x: 350, y: 0 }
+ data: { id: 'flopsPerWatt', name: 'flops per watt', parent: 'chip' },
+ position: { x: 0, y: 0 },classes: 'ext',
+ },
+ {
+ data: { id: 'interconnect', name: '# of Interconnect', parent: 'hardware' },
+ position: { x: 0, y: 0 },classes: 'ext',
+ },
+ {
+ data: { id: 'nodesNumber', name: '# of Nodes', parent: 'hardware' },
+ position: { x: 0, y: 0 },classes: 'ext',
},
+ ///////////////software
+ {
+ data: { id: 'software', name: 'Software', parent: 'DICE' },
+ position: { x: 1000, y: 0 }
+ },
{
- data: { id: 'layout', name: 'Layout', parent: 'ext' },
- classes: 'ext',
- position: { x: 350, y: 140 }
+ data: { id: 'dataExchangeSize', name: 'Data Exchanged Size', parent: 'software' },
+ position: { x: 1000, y: 0 },classes: 'ext',
+ },
+ {
+ data: { id: 'computation', name: 'Computation', parent: 'software' },
+ position: { x: 1000, y: 0 },classes: 'ext',
+ },
+ {
+ data: { id: 'dataSize', name: 'Data Size', parent: 'software' },
+ position: { x: 1000, y: 0 },classes: 'ext',
+ },
+ {
+ data: { id: 'maxNumberOfInterconnects', name: '# of Interconnects', parent: 'software' },
+ position: { x: 1000, y: 0 },classes: 'ext',
+ },
+ {
+ data: { id: 'numberofComputations', name: '# of Computations', parent: 'software' },
+ position: { x: 1000, y: 0 },classes: 'ext',
},
+ /////////////performance
+
{
- data: { id: 'renderer', name: 'Renderer', parent: 'ext' },
- classes: 'ext',
- position: { x: 350, y: 280 }
+ data: { id: 'performance', name: 'Performance per Frame' },
+ position: { x: 0, y: 2000 }
},
{
- data: { id: 'api', name: 'Core API', parent: 'cy' }
+ data: { id: 'speed', name: 'Speed' , parent: 'performance'},
+ position: { x: 0, y: 2000 },classes: 'ext',
+ },
+ {
+ data: { id: 'energy', name: 'Energy' , parent: 'performance'},
+ position: { x: 0, y: 2000 },classes: 'ext',
+ },
+ {
+ data: { id: 'cost', name: 'Cost' , parent: 'performance'},
+ position: { x: 0, y: 2000 },classes: 'ext',
},
+ ///intermediate numbers
+ //in between computations
+ {
+ data: { id: 'intermediate', name: 'intermediate calculations',parent:"DICE" },
+ position: { x: 0, y: 1000 }
+ },
+ {
+ data: { id: 'nodesPerComputation', name: 'nodes per computation' , parent: 'intermediate'},
+ position: { x: 0, y: 1000 },classes: 'ext',
+ },
+ {
+ data: { id: 'numberofNodesNeeded', name: 'number of nodes needed' , parent: 'intermediate'},
+ position: { x: 0, y: 1000 },classes: 'ext',
+ },
{
- data: { id: 'app', name: 'Client' },
- position: { x: 0, y: 480 }
- }
+ data: { id: 'computationTime', name: 'computation time' , parent: 'intermediate'},
+ position: { x: 0, y: 1000 },classes: 'ext',
+ },
+ {
+ data: { id: 'communicationTime', name: 'communication time' , parent: 'intermediate'},
+ position: { x: 0, y: 1000 },classes: 'ext',
+ },
+
],
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' }
+ // //////////////hardware
+ // { data: { source: 'ram', target: 'speed' },classes: 'exte', },
+ // { data: { source: 'cyclesPerSecond', target: 'speed' },classes: 'exte', },
+ // { data: { source: 'bitsPerSecond', target: 'speed' },classes: 'exte', },
+ // { data: { source: 'costPerChip', target: 'cost' },classes: 'exte', },
+ // { data: { source: 'flopsPerWatt', target: 'Energy' },classes: 'exte', },
+
+ // { data: { source: 'interconnect', target: 'speed' },classes: 'exte', },
+ // { data: { source: 'nodesNumber', target: 'cost' },classes: 'exte', },
+
+ // ///////// software
+ // { data: { source: 'dataExchangeSize', target: 'performance' },classes: 'exte', },
+ // { data: { source: 'numberofComputations', target: 'performance' },classes: 'exte', },
+ // { data: { source: 'computation', target: 'performance' },classes: 'exte', },
+ // { data: { source: 'maxNumberOfInterconnects', target: 'performance' },classes: 'exte', },
+ // { data: { source: 'dataSize', target: 'performance' },classes: 'exte', },
+
+ { data: { source: 'ram', target: 'nodesPerComputation' },classes: 'exte', },
+ { data: { source: 'dataSize', target: 'nodesPerComputation' },classes: 'exte', },
+
+ { data: { source: 'maxNumberOfInterconnects', target: 'nodesPerComputation' },classes: 'exte', },
+ { data: { source: 'interconnect', target: 'nodesPerComputation' },classes: 'exte', },
+
+ { data: { source: 'nodesPerComputation', target: 'numberofNodesNeeded' },classes: 'exte', },
+ { data: { source: 'numberofComputations', target: 'numberofNodesNeeded' },classes: 'exte', },
+
+ { data: { source: 'computation', target: 'computationTime' },classes: 'exte', },
+ { data: { source: 'cyclesPerSecond', target: 'computationTime' },classes: 'exte', },
+
+ { data: { source: 'dataExchangeSize', target: 'communicationTime' },classes: 'exte', },
+ { data: { source: 'bitsPerSecond', target: 'communicationTime' },classes: 'exte', },
+ { data: { source: 'nodesPerComputation', target: 'communicationTime' },classes: 'exte', },
+
+ { data: { source: 'computationTime', target: 'speed' },classes: 'exte', },
+ { data: { source: 'communicationTime', target: 'speed' },classes: 'exte', },
+
+ { data: { source: 'numberofNodesNeeded', target: 'cost' },classes: 'exte', },
+ { data: { source: 'costPerChip', target: 'cost' },classes: 'exte', },
+
+ { data: { source: 'flopsPerWatt', target: 'energy' },classes: 'exte', },
+ { data: { source: 'numberofNodesNeeded', target: 'energy' },classes: 'exte', },
+ { data: { source: 'computation', target: 'energy' },classes: 'exte', },
+
+
+
+
]
},
@@ -170,3 +295,244 @@ var cy = cytoscape({
name: 'preset'
}
});
+
+var api = cy.expandCollapse('get');
+
+
+api.expandAll();
+// Hardware
+// Node type
+// Speed
+// Bandwidth
+// Number of interconnects
+// Number of nodes
+// Software
+// number of computations
+// operations per computation
+// Max bandwidth
+// Max interconnects
+
+///hardware
+let processors={
+ type:{
+ stm32f412 :
+ {
+ name: "STM32F412",
+ ram: 256e3,
+ // cyclesPerSecond : 100e6, // ZF: this is based on 100 MHz clock rate
+ cyclesPerSecond : 12.8e6, // ZF: this is based on MFlops from pi benchmark at 84 MHz
+ bitsPerSecond : 6e6, // ZF: 6 MBit UART max spec (from datasheet)
+ costPerChip : 3.34925, // reel qty (5000)
+ flopsPerWatt : 1.71e8 // ZF: calculated from datasheet and pi test
+ },
+ samd51j19:
+ {
+ name : "SAMD51J19",
+ ram : 192e3,
+ // cyclesPerSecond : 120e6, // ZF: this is based on 120 MHz clock rate
+ cyclesPerSecond : 16.8e6, // ZF: this is based on MFlops from pi benchmark at ~160 MHz
+ bitsPerSecond : 3e6, // ZF: 3 MBit UART max spec (from datasheet)
+ costPerChip : 3.44003, // reel qty (5000)
+ flopsPerWatt : 2.33e8 // ZF: calculated from datasheet and pi test
+ },
+ samd51j20:
+ {
+ name : "SAMD51J20",
+ ram : 262e3,
+ // cyclesPerSecond : 120e6, // ZF: this is based on 120 MHz clock rate
+ cyclesPerSecond : 16.8e6, // ZF: this is based on MFlops from pi benchmark at ~160 MHz
+ bitsPerSecond : 3e6, // ZF: 3 MBit UART max spec (from datasheet)
+ costPerChip : 4.08002, // reel qty (5000)
+ flopsPerWatt : 2.33e8 // ZF: calculated from datasheet and pi test
+ },
+ MAX32660:
+ {
+ name : "MAX32660",
+ ram : 96e3,
+ // cyclesPerSecond : 96e6, // ZF: this is based on 96 MHz clock rate
+ cyclesPerSecond : 12.8e6, // ZF: this is based on extrapolating MFlops from STM32F412 pi benchmark
+ bitsPerSecond : 48e6,
+ costPerChip : 1.1745, // reel qty (2000)
+ flopsPerWatt: 4.75e8 // ZF: calculated from datasheet and STM32F412 pi test
+
+ },
+ STM32F412:
+ {
+ name : "STM32F412",
+ ram : 256e3,
+ // cyclesPerSecond : 100e6, // ZF: this is based on 100 MHz clock rate
+ cyclesPerSecond : 12.8e6, // ZF: this is based on MFlops from pi benchmark at 84 MHz
+ bitsPerSecond : 6e6, // ZF: 6 MBit UART max spec (from datasheet)
+ costPerChip : 3.34925, // reel qty (5000)
+ flopsPerWatt : 1.71e8 // ZF: calculated from datasheet and pi test
+
+ },
+ XMEGA:
+ {
+ name: 'XMEGA',
+ ram:10,
+ cyclesPerSecond:100,
+ bitsPerSecond:10
+
+ }
+ }
+};
+
+
+var chip=processors.type.samd51j19;
+var ram=chip.ram;
+var cyclesPerSecond =chip.cyclesPerSecond;
+var bitsPerSecond =chip.bitsPerSecond ;
+var costPerChip =chip.costPerChip ;
+var flopsPerWatt =chip.flopsPerWatt ;
+
+updateVariable("chip", chip.name,"");
+updateVariable("ram", ram,"bytes");
+updateVariable("cyclesPerSecond", cyclesPerSecond),"";
+updateVariable("bitsPerSecond", bitsPerSecond ,"");
+updateVariable("costPerChip", costPerChip ,"dollars" );
+updateVariable("flopsPerWatt", flopsPerWatt ,"" );
+
+var interconnect=4; //2,4,6
+var nodesNumber= 50; //10,20,30,40,50
+updateVariable("interconnect", interconnect,"neighbor");
+updateVariable("nodesNumber", nodesNumber,"node");
+
+var dataExchangeSize= 20;
+var dataSize= 200;
+var numberofComputations= 200;
+var computation= 100; //cylces
+var maxNumberOfInterconnects= 10;
+
+updateVariable("dataExchangeSize", dataExchangeSize,"bytes");
+updateVariable("dataSize", dataSize,"bytes");
+updateVariable("numberofComputations", numberofComputations,"");
+updateVariable("computation", computation,"cycle");
+updateVariable("maxNumberOfInterconnects", maxNumberOfInterconnects,"neighbor");
+
+var nodesPerComputation=1;
+var numberofNodesNeeded=1;
+var computationTime;
+var communicationTime;
+var speed;
+var cost;
+var energy;
+
+// 1- look data size/storage
+if(dataSize>ram){
+ nodesPerComputation=Math.ceil(dataSize/ram);
+}
+// 2- look for number of interconnects in the software
+if(interconnect<maxNumberOfInterconnects*nodesPerComputation){
+ nodesPerComputation=Math.ceil(maxNumberOfInterconnects*nodesPerComputation/interconnect);
+ //Or add time for interchange?
+}
+updateVariable("nodesPerComputation", nodesPerComputation,"");
+// 3- Look for number of computations vs number of nodes
+// if number of nodes needed <number of nodes
+numberofNodesNeeded= nodesPerComputation*numberofComputations;
+updateVariable("numberofNodesNeeded", numberofNodesNeeded,"nodes");
+if(numberofNodesNeeded>nodesNumber){
+ console.log("need more nodes");
+ //Then overload some of the computations where one node doing double of work others have to wait for it
+}
+// 4- compute performance
+// Time of computation
+computationTime=computation/cyclesPerSecond; //?? remove nodes percomp
+communicationTime=dataExchangeSize/bitsPerSecond*nodesPerComputation; //assume all in parallel
+updateVariable("computationTime", computationTime/1000,"ms");
+updateVariable("communicationTime", communicationTime/1000,"ms");
+
+
+speed=computationTime+communicationTime; //frame
+cost=numberofNodesNeeded*costPerChip;
+energy= 1 / flopsPerWatt*numberofNodesNeeded*computation;//perframe
+
+updateVariable("speed", speed/1000,"ms/frame");
+updateVariable("cost", cost,"dollars");
+updateVariable("energy", energy,"watt/frame");
+
+
+function updateVariable(name, value,unit){
+ var oldName=cy.$id(name).data('name');
+ cy.$id(name).data('name', oldName+'\n'+value+'\n'+unit);
+}
+
+
+// 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' }
+// ]
+// },
diff --git a/01_Code/physical_computing_interface/graph/index.html b/01_Code/physical_computing_interface/graph/index.html
index da2de86..197732a 100644
--- a/01_Code/physical_computing_interface/graph/index.html
+++ b/01_Code/physical_computing_interface/graph/index.html
@@ -2,9 +2,49 @@
<!-- This code is for demonstration purposes only. You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. -->
<html>
<head>
-<link href="style.css" rel="stylesheet" />
+<style>
+ :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;
+ }
+ body {
+ font: 8px helvetica neue, helvetica, arial, sans-serif;
+ }
+
+ #cy {
+ background-color: var(--color2);
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+
+ /* you can set the disabled style how you like on the text/icon */
+ .cxtmenu-disabled {
+ opacity: 0.1;
+ }
+ /* you can set the disabled style how you like on the text/icon */
+ .cxtmenu {
+ opacity: 0.1;
+ }
+</style>
+
<meta charset=utf-8 />
+
<script src="../lib/cytoscape.min.js"></script>
+<script src="../lib/cytoscape-cxtmenu.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>
+
</head>
<body>
<div id="cy"></div>
diff --git a/01_Code/physical_computing_interface/simulation/.DS_Store b/01_Code/physical_computing_interface/simulation/.DS_Store
deleted file mode 100644
index 2e3e2ad91ff3cd598996d669a864298882b349a4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 6148
zcmZQzU|@7AO)+F(5MW?n;9!8zEL;p&0Z1N%F(jFwA~GQJz-AQZq#Fh&=jRqcWk#vd
z5Eu=C!5jjhyvxdv!jQ_4%aG52mVb>vIUGqgH{Zo2DJMS(RA`v-+}p?Y_@E;L0|SbR
z6ap#=GLTD%1W?#8Go&%3G9;pw9S18I7#N^3$o3Y@$P(a$*bA3M*oi5NYTpBpeJl)F
z48;uj40$Lvn%n}Fe{eZuJ0JXN?-795i6oD(6`MSYy{2G)vNB{blrrQnWTN|3^cOf3
z;j+kfi<>50^E&|zXCxH}+p()av7f;J<ZouM-AO3Ep7Bcp9L^wDB_Z1@E!TGiYA;k@
zZa%_JOj#8BW*z|9$HS1vkPl8<@!-^z0``3>YAO?cA|uVfz<^V2E>fCPuhM%AbrT--
z2v-uL9@*U@a~eSI=4B{j$YdyHC}l_lhgcOuB0~v7CPs>3n7xmIfdP+dWVbI*3_Krt
z1{{xgbs$_%oDO97Gcarbxu00f2vNwv4WUQL(GVC7fzc3vhXAO2P=K`U862QAsDNZ-
zU;s&h2v7q7M6<v&F@pO6U<DwpAUTj$5Dn7GzzAZ2%>rv>U}S)3WdwIaK>9#k5)cj6
z&cFz^8N>%`XJ7=|%)r11(ayjK(ayjK?V&J2v@<Y5v@<Y*ZHKvTlpYO%(GY-z05gOk
z0IL6885nT&{~@YI$<YuP4S``90*ov!!7fhVN*TNVKy@vsJ_Yw;q3S@@F?vG)q?-vc
lpa|+!g1DgS9;6jSgR5dj1_qGU(S`sxbViBM5Ez&c0006P^cDaB
--
GitLab