Skip to content

Commit cb62e56

Browse files
odeimaizodeimaiz
authored
✨ S4L-Lite: quick start (ITISFoundation#3660)
1 parent 7c58618 commit cb62e56

File tree

19 files changed

+610
-164
lines changed

19 files changed

+610
-164
lines changed

‎services/static-webserver/client/source/class/osparc/component/tutorial/ti/SlideBase.js‎ renamed to ‎services/static-webserver/client/source/class/osparc/component/tutorial/SlideBase.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
1616
************************************************************************ */
1717

18-
qx.Class.define("osparc.component.tutorial.ti.SlideBase", {
18+
qx.Class.define("osparc.component.tutorial.SlideBase", {
1919
extend: qx.ui.core.Widget,
2020
type: "abstract",
2121

‎services/static-webserver/client/source/class/osparc/component/tutorial/SlidesBase.js‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.SlidesBase", {
19+
extend: osparc.ui.window.SingletonWindow,
20+
type: "abstract",
21+
22+
construct: function(id, caption, icon) {
23+
this.base(arguments, id, caption, icon);
24+
25+
this.set({
26+
layout: new qx.ui.layout.VBox(20),
27+
contentPadding: 15,
28+
modal: true,
29+
width: 800,
30+
height: 800,
31+
showMaximize: false,
32+
showMinimize: false,
33+
resizable: false
34+
});
35+
36+
const closeBtn = this.getChildControl("close-button");
37+
osparc.utils.Utils.setIdToWidget(closeBtn, "quickStartWindowCloseBtn");
38+
39+
const arrowsLayout = this.__createArrows();
40+
this.add(arrowsLayout);
41+
42+
const stack = this.__stack = this.__createStack();
43+
this.add(stack, {
44+
flex: 1
45+
});
46+
47+
const footer = this.__createFooter();
48+
this.add(footer);
49+
50+
this.__setSlideIdx(0);
51+
},
52+
53+
members: {
54+
__currentIdx: null,
55+
__slideCounter: null,
56+
__prevBtn: null,
57+
__nextBtn: null,
58+
__stack: null,
59+
60+
__createArrows: function() {
61+
const arrowsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox());
62+
63+
const prevBtn = this.__prevBtn = new qx.ui.form.Button().set({
64+
label: this.tr("Previous"),
65+
icon: "@FontAwesome5Solid/arrow-left/20",
66+
allowGrowX: true,
67+
backgroundColor: "transparent",
68+
iconPosition: "left",
69+
alignX: "left"
70+
});
71+
prevBtn.addListener("execute", () => this.__setSlideIdx(this.__currentIdx-1), this);
72+
arrowsLayout.add(prevBtn);
73+
74+
arrowsLayout.add(new qx.ui.core.Spacer(), {
75+
flex: 1
76+
});
77+
78+
const slideCounter = this.__slideCounter = new qx.ui.container.Composite(new qx.ui.layout.HBox(2)).set({
79+
alignY: "middle",
80+
maxWidth: 160,
81+
maxHeight: 10
82+
});
83+
arrowsLayout.add(slideCounter);
84+
85+
arrowsLayout.add(new qx.ui.core.Spacer(), {
86+
flex: 1
87+
});
88+
89+
const nextBtn = this.__nextBtn = new qx.ui.form.Button().set({
90+
label: this.tr("Next"),
91+
icon: "@FontAwesome5Solid/arrow-right/20",
92+
allowGrowX: true,
93+
backgroundColor: "transparent",
94+
iconPosition: "right",
95+
alignX: "right"
96+
});
97+
nextBtn.addListener("execute", () => this.__setSlideIdx(this.__currentIdx+1), this);
98+
arrowsLayout.add(nextBtn);
99+
100+
return arrowsLayout;
101+
},
102+
103+
__setSlideIdx: function(idx) {
104+
const selectables = this.__stack.getSelectables();
105+
if (idx > -1 && idx < selectables.length) {
106+
this.__currentIdx = idx;
107+
this.__stack.setSelection([selectables[idx]]);
108+
this.__prevBtn.setEnabled(idx !== 0);
109+
this.__nextBtn.setEnabled(idx !== selectables.length-1);
110+
}
111+
this.__slideCounter.removeAll();
112+
for (let i=0; i<selectables.length; i++) {
113+
const widget = new qx.ui.core.Widget().set({
114+
backgroundColor: idx === i ? "strong-main" : "text"
115+
});
116+
this.__slideCounter.add(widget, {
117+
flex: 1
118+
});
119+
}
120+
},
121+
122+
__createStack: function() {
123+
const stack = new qx.ui.container.Stack();
124+
this._getSlides().forEach(slide => {
125+
const slideContainer = new qx.ui.container.Scroll();
126+
slideContainer.add(slide);
127+
stack.add(slideContainer);
128+
});
129+
return stack;
130+
},
131+
132+
__createFooter: function() {
133+
const footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
134+
alignX: "center"
135+
});
136+
137+
const footerItems = this._getFooterItems();
138+
footerItems.forEach((footerItem, idx) => {
139+
footer.add(footerItem);
140+
if (idx !== footerItems.length-1) {
141+
footer.add(new qx.ui.core.Widget().set({
142+
maxHeight: 15
143+
}), {
144+
flex: 1
145+
});
146+
}
147+
});
148+
149+
return footer;
150+
},
151+
152+
_getSlides: function() {
153+
throw new Error("Abstract method called!");
154+
},
155+
156+
_getFooterItems: function() {
157+
throw new Error("Abstract method called!");
158+
}
159+
}
160+
});

‎services/static-webserver/client/source/class/osparc/component/tutorial/Utils.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.Utils", {
19+
type: "static",
20+
21+
statics: {
22+
TUTORIALS: {
23+
"tis": {
24+
localStorageStr: "tiDontShowQuickStart",
25+
tutorial: () => new osparc.component.tutorial.ti.Slides()
26+
},
27+
"s4llite": {
28+
localStorageStr: "s4lliteDontShowQuickStart",
29+
tutorial: () => new osparc.component.tutorial.s4llite.Slides()
30+
}
31+
},
32+
33+
getTutorial: function() {
34+
const tutorials = osparc.component.tutorial.Utils.TUTORIALS;
35+
const pName = osparc.utils.Utils.getProductName();
36+
if (Object.keys(tutorials).includes(pName)) {
37+
return tutorials[pName];
38+
}
39+
return null;
40+
},
41+
42+
createLabel: function(text) {
43+
const label = new qx.ui.basic.Label().set({
44+
rich: true,
45+
wrap: true,
46+
font: "text-14"
47+
});
48+
if (text) {
49+
label.setValue(text);
50+
}
51+
return label;
52+
},
53+
54+
createDontShowAgain: function(localStorageStr) {
55+
const dontShowCB = new qx.ui.form.CheckBox(qx.locale.Manager.tr("Don't show again")).set({
56+
value: osparc.utils.Utils.localCache.getLocalStorageItem(localStorageStr) === "true"
57+
});
58+
dontShowCB.addListener("changeValue", e => {
59+
const dontShow = e.getData();
60+
osparc.utils.Utils.localCache.setLocalStorageItem(localStorageStr, Boolean(dontShow));
61+
});
62+
return dontShowCB;
63+
}
64+
}
65+
});

‎services/static-webserver/client/source/class/osparc/component/tutorial/s4llite/Dashboard.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.s4llite.Dashboard", {
19+
extend: osparc.component.tutorial.SlideBase,
20+
21+
construct: function() {
22+
const title = this.tr("Dashboard - Projects & Tutorials");
23+
this.base(arguments, title);
24+
},
25+
26+
members: {
27+
_populateCard: function() {
28+
const intro = new qx.ui.basic.Label().set({
29+
value: this.tr("\
30+
The Dashboard is your private hub which contains all of your Projects as well as Tutorials that have been shared with you. \
31+
From the Dashboard you are able to open your Project, create a New Project from scratch or create it from a Tutorial.\
32+
"),
33+
rich: true,
34+
wrap: true,
35+
font: "text-14"
36+
});
37+
this._add(intro);
38+
39+
const dashboardProjects = new qx.ui.basic.Image("osparc/tutorial/s4llite/Dashboard-Projects.png").set({
40+
alignX: "center",
41+
scale: true,
42+
width: 643,
43+
height: 205
44+
});
45+
this._add(dashboardProjects);
46+
47+
const newProject = new qx.ui.basic.Label().set({
48+
value: this.tr("\
49+
1) Start sim4life: by clicking on this card a new blank project will be created and open.\
50+
"),
51+
rich: true,
52+
wrap: true,
53+
font: "text-14"
54+
});
55+
this._add(newProject);
56+
57+
const otherProjects = new qx.ui.basic.Label().set({
58+
value: this.tr("\
59+
2) The other cards are Sim4Life projects you created or were shared with you. Click on the casr to resume the work. \
60+
The three dots button, on the top right corner, will open a menu with many operations like Share, Delete ... and more operations.\
61+
"),
62+
rich: true,
63+
wrap: true,
64+
font: "text-14"
65+
});
66+
this._add(otherProjects);
67+
68+
const dashboardTutorials = new qx.ui.basic.Image("osparc/tutorial/s4llite/Dashboard-Tutorials.png").set({
69+
alignX: "center",
70+
scale: true,
71+
width: 644,
72+
height: 439
73+
});
74+
this._add(dashboardTutorials);
75+
76+
const tutorials = new qx.ui.basic.Label().set({
77+
value: this.tr("\
78+
3) Tutorials: there are a series of tutorials projects that illustrate how to use Sim4Life to solve typical simulation problems, \
79+
and the corresponding documentation.\
80+
"),
81+
rich: true,
82+
wrap: true,
83+
font: "text-14"
84+
});
85+
this._add(tutorials);
86+
}
87+
}
88+
});

‎services/static-webserver/client/source/class/osparc/component/tutorial/s4llite/S4LLiteSpecs.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.s4llite.S4LLiteSpecs", {
19+
extend: osparc.component.tutorial.SlideBase,
20+
21+
construct: function() {
22+
const title = this.tr("Sim4Life Lite: Features and Limitations");
23+
this.base(arguments, title);
24+
},
25+
26+
members: {
27+
_populateCard: function() {
28+
const introText = this.tr("\
29+
Sim4Life Lite is a student edition of Sim4Life and offers a tailored solution for students to to gain insight into the world of \
30+
computational modeling and simulation. The software is free of charge and can be used to simulate various applications using different \
31+
physics solvers..\
32+
");
33+
const intro = osparc.component.tutorial.Utils.createLabel(introText);
34+
this._add(intro);
35+
36+
const featuresText = this.tr("\
37+
<b>Features</b><br>\
38+
This special edition of Sim4Life includes the following features:<br>\
39+
- Sim4Life framework (GUI, Modeling, Postprocessing)<br>\
40+
- 3D modeling environment (based on the ACIS toolkit) and CAD translators<br>\
41+
- Postprocessing and visualization of the simulation results (2D and 3D viewers, 2D planar slice, volume rendering, streamlines, surface fields on arbitrary 3D structures, radiation and far-field data)<br>\
42+
- No restrictions on number of modeling objects<br>\
43+
- Solvers and tissue Models<br>\
44+
- This special edition of Sim4Life includes the following features:<br>\
45+
&emsp;- P-EM-FDTD: Electromagnetics Full-Wave Solver<br>\
46+
&emsp;- P-EM-QS: Quasi-Static Electromagnetics Solver<br>\
47+
&emsp;- P-Thermal: Thermodynamic Solver<br>\
48+
&emsp;- P-Acoustics: Acoustics Solver<br>\
49+
&emsp;- T-Neuro: Neuronal Tissue Models<br>\
50+
- Multi-parameter and multi-goal optimization framework<br>\
51+
- Computational anatomical model Yoon-sun, the first Korean phantom of the IT’IS Virtual Population<br>\
52+
- Material database<br>\
53+
- Python scripting framework\
54+
");
55+
const features = osparc.component.tutorial.Utils.createLabel(featuresText);
56+
this._add(features);
57+
58+
const limitationsText = this.tr("\
59+
<b>Limitations</b><br>\
60+
The following limitations apply:<br>\
61+
- Grid size of each simulation is limited to a maximum of <b>20 million grid cells</b><br>\
62+
- 3rd-party tools are not available (e.g. MUSAIK, SYSSIM, IMAnalytics, etc…)<br>\
63+
- Additional ViP models cannot be added\
64+
");
65+
const limitations = osparc.component.tutorial.Utils.createLabel(limitationsText);
66+
this._add(limitations);
67+
}
68+
}
69+
});

0 commit comments

Comments
 (0)