Skip to content

Commit f76eee2

Browse files
Mmasoud1Mmasoud1
committed
Add Three.js checkbox list
1 parent a2c9842 commit f76eee2

8 files changed

+490
-174
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ To see the tool in action please click [here](https://neuroneural.github.io/bra
3838

3939
<div align="center">
4040

41-
![Interface](https://github.com/neuroneural/brainchop/blob/master/style/BrainchopThreeJS.gif)
41+
![Interface](https://github.com/neuroneural/brainchop/blob/master/style/Brainchop3D.gif)
4242

4343
**brainchop V1.3.0**
4444
</div>

‎index.html

+28-157
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@
3030
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css"/>
3131
<link rel="stylesheet" type="text/css" href="lib/webix/codebase/webix.css"/>
3232
<link rel="stylesheet" type="text/css" href="lib/papaya_lib/papaya.css" />
33-
<link rel="stylesheet" type="text/css" href="style/style.css">
33+
<link rel="stylesheet" type="text/css" href="style/style.css">
34+
<link rel="stylesheet" type="text/css" href="style/brainchop.css">
35+
36+
3437

3538
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
3639

@@ -75,127 +78,9 @@
7578
<script type="text/javascript" src="js/BCBrain3D.js"></script>
7679
<link rel="stylesheet" href="style/default.css">
7780

78-
79-
80-
<style>
81-
.grid-container {
82-
display: grid;
83-
grid-template-columns: auto;
84-
padding: 1vh;
85-
}
86-
.grid-item {
87-
background-color: rgba(255, 255, 255, 0.8);
88-
border: 0px solid rgba(0, 0, 0, 0.8);
89-
padding: 1vh;
90-
width: 40vw;
91-
height: auto;
92-
font-size: 15px;
93-
text-align: center;
94-
}
95-
96-
97-
.toolbarclass {
98-
background-color: white !important;
99-
font-weight: bold;
100-
box-shadow: 5px 5px;
101-
}
102-
103-
.titleclass {
104-
font-style: italic;
105-
font-weight: bold;
106-
color: black !important;
107-
}
108-
109-
.headerclass {
110-
border-left: 10px solid black!important;
111-
background: #f3f3f6a3!important;
112-
margin-left: 0!important;
113-
width: 100%!important;
114-
color: black!important;
115-
font-weight: bold;
116-
border-left-color: black!important;
117-
}
118-
119-
.windowtitleclass {
120-
background-color: #ccc !important;
121-
box-shadow: none,
122-
}
123-
124-
.webixbg .webix_view{
125-
background-color:black !important;
126-
box-shadow:none;
127-
}
128-
129-
#feedbackId{
130-
cursor: pointer;
131-
margin-right: 20px;
132-
}
133-
134-
#githubId{
135-
cursor: pointer;
136-
margin-right: 20px;
137-
}
138-
.customTheme {
139-
font-weight: bold;
140-
background-color: black;
141-
color: white;
142-
}
143-
144-
#annotOfContainer_0 {
145-
/*font-weight: bold;*/
146-
background-color: black;
147-
color: white;
148-
text-align: center;
149-
height: 3vh;
150-
}
151-
152-
#annotOfContainer_1 {
153-
/*font-weight: bold;*/
154-
background-color: black;
155-
color: white;
156-
text-align: center;
157-
height: 3vh;
158-
}
159-
160-
.bt_1 button.webix_button{
161-
background: #396D9E;
162-
background: -moz-linear-gradient(top, #5D91C3 0% , #396D9E 100%);
163-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#5D91C3), color-stop(1, black));
164-
border:1px solid #396D9E;
165-
text-shadow: 0 -1px #134471;
166-
box-shadow: inset 0px 1px 10px #8eb3d5;
167-
-webkit-box-shadow: inset 0px 1px 1px #8eb3d5;
168-
color:#FFFFFF;
169-
font-size: 13px;
170-
}
171-
.bt_1 button:active{
172-
background: #396D9E !important;
173-
}
174-
175-
#gui_container{
176-
position: absolute;
177-
top: 10%;
178-
right: 1%;
179-
height: auto;
180-
}
181-
182-
#threejs-container{
183-
background-color: black!important;
184-
}
185-
186-
/* #gui{
187-
transform:translate(-50%, -75px);
188-
}*/
189-
190-
.panel{
191-
position: fixed;
192-
z-index: 1;
193-
scrollbar-color: rgba(255,255,255, 1);
194-
scrollbar-width: thin;
195-
transition: 0.5s;
196-
}
197-
198-
</style>
81+
<style>
82+
/*For Testing*/
83+
</style>
19984

20085

20186
</head>
@@ -289,8 +174,8 @@
289174
{ view: "label", label: '<i id="feedbackId" class="fa fa-pencil-square-o"/>',
290175
css: {"color":"black !important", "font-weight": "bold"}, width: 60, align:"right", click: feedbackClick, tooltip:"Feedback" },
291176
{ view: "button", id: "About", value: "About", css:"bt_1", width: 100, align: "right", click: aboutClick },
292-
{ view: "label", label: '<i id="githubId" class="fa fa-github"/>',
293-
css: {"color":"black !important", "font-weight": "bold"}, width: 60, align:"right", click: githubClick, tooltip:"GitHub" },
177+
{ view: "label", label: '',
178+
css: {"color":"black !important", "font-weight": "bold"}, width: 80, align:"right", click: githubClick, tooltip:"GitHub" },
294179
]
295180
}
296181
]
@@ -316,21 +201,6 @@
316201

317202

318203

319-
// Window to show brain 3D..
320-
321-
// Progress bar for threeJS
322-
// webix.ui({
323-
// view:"window",
324-
// id: "threeJsPrgBarWin",
325-
// height:50,
326-
// width:500,
327-
// position:"center",
328-
// head:false,
329-
// body:{
330-
// template:" <div class='w3-container' style='margin-top: 1vh;' id='threeJsProgBarDiv' > <div class='w3-border' > <div class='w3-green' style='height:2vh;width:50%;' id='threeJsProgBar'></div> </div> </div> "
331-
// }
332-
// });
333-
334204
webix.ui({
335205
view:"window",
336206
id: "threejsWinId",
@@ -350,15 +220,11 @@
350220
},
351221

352222
position:"center",
353-
354-
on:{
355-
onShow:function() {
356-
//-- $$("threeJsPrgBarWin").show();
357-
}
358-
},
223+
359224

360225
body:{
361-
template:" <div id='threejs-container'> <div id='gui_container'></div> <div id='loadingIconDiv' class ='panel' style='top: 50%; left: 50%; ' > <i id='loadingIcon' style='font-size:1.4vw; color: gray; background-color: rgba(0,0,0,0);' class='w3-xxxlarge w3-spin fa fa-refresh' ></i> </div> </div> "
226+
//-- create custom list with checkboxes for different ROI.
227+
template:" <div id='threejs-container'> <div id='gui_container'></div> <div id='roiList' class='dropdown-check-list'> <span class='anchor'><p style='color:white; font-size:0.6vw; margin-top: 0em; margin-bottom: 0em;'>Select_ROI</p></span> <ul id='roiItems' class='items'></ul> </div> <div id='loadingIconDiv' class ='panel' style='top: 50%; left: 50%; ' > <i id='loadingIcon' style='font-size:1.4vw; color: gray; background-color: rgba(0,0,0,0);' class='w3-xxxlarge w3-spin fa fa-refresh' ></i> </div> </div> "
362228
}
363229
})
364230

@@ -1153,7 +1019,7 @@
11531019
{ cols: [
11541020

11551021
{ view:"select",
1156-
label:"Model",
1022+
label:"Models",
11571023
id: "selectModel",
11581024
value:2,
11591025
options: selectModelOptions,
@@ -1556,15 +1422,12 @@
15561422
{
15571423
view: "label", label: "<span id='webGl2Status' style='background-color:none; padding-left:0.5vw;'>&nbsp&nbsp</span>", align: "left"
15581424
},
1559-
// ]
1560-
// },
15611425

1562-
// { cols: [
15631426
{ view: "label", label: "Memory", width:80,
15641427
align: "right"
15651428
}, // memoryView
15661429
{
1567-
view: "label", label: "<span id='memoryStatus' style='background-color:none; padding-left:0.5vw;'>&nbsp&nbsp</span>", align: "left"
1430+
view: "label", label: "<span id='memoryStatus' style='background-color:none; padding-left:0.5vw;'>&nbsp&nbsp</span>", align: "right"
15681431
}
15691432
]
15701433
}
@@ -1577,7 +1440,7 @@
15771440
//-------------------------chart-------------------------//
15781441

15791442

1580-
rioHChart = { type: "space", rows:[
1443+
roiHChart = { type: "space", rows:[
15811444

15821445
{
15831446
id: "hchart", view:"highchart",
@@ -1634,16 +1497,15 @@
16341497
min: 0,
16351498
// max: 100,
16361499
title: {
1637-
text: "Histogram PR('%')"
1500+
text: "Histogram Probability"
16381501
// align: 'high'
16391502
}
16401503
},
16411504

16421505
legend: {
16431506
enabled: false
16441507
},
1645-
1646-
1508+
16471509
series: [{
16481510
name: 'volumes',
16491511
data: null,
@@ -1658,7 +1520,7 @@
16581520
// Output labels histogram form
16591521
let histogramWindowForm = {view: "form", id: "histogramWindowFormId",
16601522
elements: [
1661-
rioHChart,
1523+
roiHChart,
16621524

16631525
{ cols: [
16641526
{},
@@ -1699,7 +1561,7 @@
16991561
resize: true,
17001562
head:{
17011563
view:"toolbar", css: "toolbarclass", elements:[
1702-
{ type:"header", template:"Labels Histogram", css:"windowtitleclass" },
1564+
{ type:"header", template:"Output Labels", css:"windowtitleclass" },
17031565
{ view:"icon", icon:"wxi-close", click:function() {
17041566
$$("labelsHistogramWinId").hide();
17051567
} }
@@ -1939,5 +1801,14 @@
19391801
</form>
19401802
</div>
19411803

1804+
<!-- Credit for github logo: https://github.com/tholman/github-corners -->
1805+
<a href="https://github.com/neuroneural/brainchop" style="cursor: pointer;" target='_blank'>
1806+
<svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 0px; right: 0px; border: 0px; cursor: pointer; " aria-hidden="true">
1807+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#151513" style="cursor: pointer;"></path>
1808+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="#ffffff" style="transform-origin: 130px 106px; cursor: pointer;"></path>
1809+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="#ffffff" style="cursor: pointer;"></path>
1810+
</svg>
1811+
</a>
1812+
19421813
</body>
19431814
</html>

0 commit comments

Comments
 (0)