Skip to content
Snippets Groups Projects
Commit d4789dd3 authored by Amira Abdel-Rahman's avatar Amira Abdel-Rahman
Browse files

graph and initial jsom pointer

parent 1d43f707
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
01_Code/physical_computing_interface/index.html
+ 47
− 23
View file @ d4789dd3
...@@ -5,35 +5,46 @@ ...@@ -5,35 +5,46 @@
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/> <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head> </head>
<body>
<div id="header1"> <div id="threejs">
<div class="header1">
<i>Three.js</i> <i> 3D</i>
<!-- Three.js --> <!-- Three.js -->
</div> </div>
<div id="header2"> <div id="webgl"></div>
<div id="dragbar1"></div> </div>
<div id="graph">
<div class="header2">
<div class="dragbar"></div>
<i> Graph</i> <i> Graph</i>
<!-- Graph -->
</div> </div>
<div id="threejs"> <div class="dragbar"></div>
<div id="webgl"></div> <div id="cy"></div>
</div>
<div id="json">
<div class="header2">
<div class="dragbar"></div>
<i> Object</i>
</div> </div>
<div id="graph">
<div id="dragbar"></div>
<div class="dragbar1"></div>
<div class="dragbar"></div>
</div> </div>
<div id="footer1"> <div class="footer1">
<strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel <strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
</div> </div>
<div id="footer2"> <div class="footer2">
<i>footer</i> <i>footer</i>
</div> </div>
</body>
<!-- TODO: <!-- TODO:
Clean structuture to modules? Clean structuture to modules?
...@@ -44,16 +55,18 @@ ...@@ -44,16 +55,18 @@
<!-- libraries --> <!-- libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <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="./lib/three.min.js"></script> <script src="./lib/three.min.js"></script>
<script src="./lib/OrbitControls.js"></script> <script src="./lib/OrbitControls.js"></script>
<!-- code --> <!-- code -->
<script src="./threejs/main.js"></script> <script src="./threejs/main.js"></script>
<script src="./graph/code.js"></script>
<script> <script>
var i = 0; var i = 0;
$('#dragbar').mousedown(function(e){ $('.dragbar').mousedown(function(e){
e.preventDefault(); e.preventDefault();
// $('#mousestatus').html("mousedown" + i++); // $('#mousestatus').html("mousedown" + i++);
...@@ -61,10 +74,21 @@ ...@@ -61,10 +74,21 @@
// $('#position').html(e.pageX +', '+ e.pageY); // $('#position').html(e.pageX +', '+ e.pageY);
$('#threejs').css("width",e.pageX+2); $('#threejs').css("width",e.pageX+2);
$('#graph').css("left",e.pageX+2); $('#graph').css("left",e.pageX+2);
$('#footer1').css("width",e.pageX+2); $('#json').css("left",e.pageX+2);
$('#footer2').css("left",e.pageX+2); $('.footer1').css("width",e.pageX+2);
$('#header1').css("width",e.pageX+2); $('.footer2').css("left",e.pageX+2);
$('#header2').css("left",e.pageX+2);
})
// console.log("leaving mouseDown");
});
$('.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);
}) })
// console.log("leaving mouseDown"); // console.log("leaving mouseDown");
......
01_Code/physical_computing_interface/style.css
+ 73
− 26
View file @ d4789dd3
body,html{width:100%;height:100%;padding:0;margin:0;} body,html{width:100%;height:100%;padding:0;margin:0;}
:root { :root {
--color1: #ffffff; --color1: #ffffff; /*teal*/
--color11: #ffffff8c; --color11: #ffffff8c; /*teal*/
--color2: #020227; --color2: #020227; /*teal*/
--color3: #1c5c61; /*teal*/
--top: 20px; --top: 20px;
--dragwidth: 5px;
--bottom: 20px; --bottom: 20px;
--font: "Times New Roman", Times, serif; --font: "Times New Roman", Times, serif;
/* --font: "Andale Mono", AndaleMono, monospace; */ /* --font: "Andale Mono", AndaleMono, monospace; */
/* --font: "Courier New", Courier, monospace; */ /* --font: "Courier New", Courier, monospace; */
} }
#header1{ .header1{
background-color: var(--color1); background-color: var(--color1);
height: var(--top); height: var(--top);
width: 50%; width: 50%;
float: left; float: left;
position: absolute; position: absolute;
bottom: var(--bottom); bottom: var(--bottom);
overflow-y: hidden; overflow-y: hidden;
top:var(--dragwidth);
/* left:var(--dragwidth); */
font-family: var(--font); font-family: var(--font);
color: var(--color2); color: var(--color2);
top:0px; top:var(--dragwidth);
} }
#header2{ .header2{
background-color: var(--color2); background-color: var(--color2);
height: var(--top); height: var(--top);
font-family: var(--font); float: left;
float: right;
position: absolute; position: absolute;
bottom: var(--bottom); bottom: var(--bottom);
right: 0; top:var(--dragwidth);
left:50%; /* left:var(--dragwidth); */
font-family: var(--font); font-family: var(--font);
color: var(--color1); color: var(--color1);
top:0px;
} }
#threejs{ #threejs{
background-color: var(--color11); background-color: var(--color11);
...@@ -42,6 +52,14 @@ body,html{width:100%;height:100%;padding:0;margin:0;} ...@@ -42,6 +52,14 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
width: 50%; width: 50%;
float: left; float: left;
position: absolute; position: absolute;
top:0px;
bottom: var(--bottom);
overflow-y: hidden;
font-family: var(--font);
color: var(--color2);
}
#webgl{
top:var(--top); top:var(--top);
bottom: var(--bottom); bottom: var(--bottom);
overflow-y: hidden; overflow-y: hidden;
...@@ -53,16 +71,33 @@ body,html{width:100%;height:100%;padding:0;margin:0;} ...@@ -53,16 +71,33 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
background-color: var(--color2); background-color: var(--color2);
/* background-image: linear-gradient(+90deg, #ffffff, #ffffff); */ /* background-image: linear-gradient(+90deg, #ffffff, #ffffff); */
float: right; float: right;
float: top;
position: absolute; position: absolute;
top:var(--top); 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); bottom: var(--bottom);
right: 0; right: 0;
left:50%; left:50%;
top:50%;
font-family: var(--font); font-family: var(--font);
color: var(--color1); color: var(--color1);
} }
#footer1{ .footer1{
background-color: var(--color1); background-color: var(--color1);
width: 50%; width: 50%;
float: left; float: left;
...@@ -74,7 +109,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;} ...@@ -74,7 +109,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
bottom:0; bottom:0;
} }
#footer2{ .footer2{
background-color: var(--color1); background-color: var(--color1);
float: right; float: right;
position: absolute; position: absolute;
...@@ -87,20 +122,32 @@ body,html{width:100%;height:100%;padding:0;margin:0;} ...@@ -87,20 +122,32 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
} }
#dragbar{ .dragbar{
/* background-color: #ffffff00; */ /* background-color: var(--color3); */
background-image: linear-gradient(+90deg, var(--color1) ,var(--color11) ,var(--color2)); background-image: linear-gradient(+90deg, var(--color1) ,var(--color11) ,var(--color2));
height:100%; height:100%;
float: left; float: left;
width: 20px; width: var(--dragwidth);
cursor: col-resize; cursor: col-resize;
} }
#dragbar1{ .dragbar1{
/* background-color: #ffffff00; */ /* background-color: var(--color3); */
background-image: linear-gradient(+90deg, var(--color1) ,var(--color11) ,var(--color2)); background-image: linear-gradient(+0deg, var(--color2)50% ,var(--color1)60% ,var(--color2));
height:100%; width:100%;
float: left; left:var(--dragwidth);
width: 20px; float: bottom;
cursor: col-resize; position: absolute;
height: var(--dragwidth);
cursor: row-resize;
}
#cy {
height: 99%;
width: 90%;
/* position: absolute; */
float: right;
float: top;
left: 0;
top:var(--top);
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment