-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
256 lines (217 loc) · 12.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bodylight.js 2.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--script src="scripts/bodylight.bundle.js" data-main="aurelia-bootstrapper"></script-->
<!--script src="https://cdn.jsdelivr.net/npm/bodylight-components/dist/bodylight.bundle.js" data-main="aurelia-bootstrapper"></script-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body aurelia-app="webcomponents">
<header class="w3-bar" style="position: sticky;top: 0;background:#4a4a4a;color:white;">
<a href="/" class="w3-bar-item w3-button"><img style="width:10%" src="img/bodylight_logo.svg" alt="Bodylight.js">Bodylight.js</a>
<a class="w3-bar-item w3-button w3-right" href="/Bodylight-docs/" target="_self">Docs</a>
<a class="w3-bar-item w3-button w3-right" href="https://github.com/creative-connections" target="_self">GitHub</a>
</header>
<h1 class="w3-center">Bodylight.js <sup title="Bodylight.js version 2.0">2.0</sup></h1>
<h3 class="w3-center">Simulators for the modern web</h3>
<div class="w3-center w3-padding">
<span class="w3-large">Tools:</span>
<a href="/Bodylight-docs/tutorial/" class="w3-button w3-border">Tutorial</a>
<a href="/Bodylight-docs/reference/" class="w3-button w3-border">Documentation - Reference Guide</a>
<a href="/Bodylight-Editor/" class="w3-button w3-border">Editor</a>
<a href="/composer/" title="bodylight composer for older version 1.0" class="w3-button w3-border">Composer<sup>1.0</sup></a>
</div>
<div class="w3-center w3-padding">
<span class="w3-large">Demos and Results:</span>
<a href="/Bodylight-Scenarios/" class="w3-button w3-border" title="Selected education scenarios using simulators of human physiology using Bodylight.js 2.0">Scenarios</a>
<a href="https://www.physiome.cz/en/apps/" title="Educational simulators using older Bodylight.js 1.0" class="w3-button w3-border">Physiome Apps<sup>1.0</sup></a>
<a href="/Bodylight-VirtualBody/" title="demo of 3d virtualbody and some simulators" class="w3-button w3-border">VirtualBody<sup>WebGL</sup></a>
<a href="/VR/breathing/" title="demo of 3D virtualbody with live animation using VR/AR capabilities" class="w3-button w3-border">Virtual Reality - breathing<sup>WebXR</sup></a>
</div>
<div style="margin:120px!important">
</div>
<div class="w3-center w3-row-padding">
<div class="w3-quarter">
<div class="w3-card-2 w3-container w3-padding">
<img style="width:100%" src="img/modelica_logo.svg" alt="Modelica" />
<h3 class="w3-center">Powered by Modelica</h3>
Write models using Modelica language.
</div>
</div>
<div class="w3-quarter">
<div class="w3-card-2 w3-container w3-padding">
<img style="width:100%" src="img/web-assembly-logo.svg" alt="WebAssembly" />
<h3 class="w3-center">Executed in WebAssembly</h3>
Compile models to WebAssembly bringing near native speed of model simulation in browsers.
</div>
</div>
<div class="w3-quarter">
<div class="w3-card-2 w3-container w3-padding">
<img style="width:100%" src="img/createjs-logo.png" alt="Create.js" />
<h3 class="w3-center">Designed in Adobe® Animate</h3>
Create complex animations in Adobe® Animate and export them to Create.js
</div>
</div>
<div class="w3-quarter">
<div class="w3-card-2 w3-container w3-padding">
<img style="width:50%" src="img/web_components_logo.png" alt="Create.js" />
<h3 class="w3-center">Distributed as Web Components</h3>
Enrich HTML or Markdown with custom elements of Bodylight.js.
</div>
</div>
<div class="w3-clear"></div>
<div class="w3-quarter">
<div class="w3-card-2 w3-container w3-padding">
<img style="width:50%" src="img/webgl-logo.svg" alt="WebGL" />
<h3 class="w3-center">Ready for WebGL</h3>
WebGL API brings powerful 2D and 3D visualisation without plugins into web browser. See demos below bringing simulators into 3D scene.
Supported by majority of web browsers.
</div>
</div>
<div class="w3-quarter">
<div class="w3-card-2 w3-container w3-padding">
<img style="width:50%" src="img/webxr-logo.svg" alt="WebXR" />
<h3 class="w3-center">Ready for WebXR</h3>
WebXR API brings virtual reality and augmented reality into web browsers. See demos below bringing simulators in VR/AR.
Supported by web browsers in appropriate HW platforms (tested in MS Hololens 2, Oculus Quest 2).
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<div class="w3-border w3-container w3-margin w3-padding">
<div class="w3-row">
<div class="w3-third">
<a href="https://bodylight.physiome.cz/Bodylight-Scenarios">
<img style="width:100%" src="img/Bodylight-Scenarios.png" alt="Bodylight Scenarios">
</a>
</div>
<div class="w3-rest w3-padding">
<h3 class="w3-center">Scenarios</h3>
Selected scenarios of physiology and pathophysiology: Hemodynamics of cardiovascular system, metabolism of iron, gas transport, ... powered by <a href="http://www.physiolibrary.org/">Physiolibrary</a> and Bodylight.js<sup>2.0</sup> technology
in single or multipage web-simulators.
See at <a href="https://bodylight.physiome.cz/Bodylight-Scenarios">Bodylight-Scenarios</a>.
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<div class="w3-border w3-container w3-margin w3-padding">
<div class="w3-row">
<div class="w3-third">
<a href="https://bodylight.physiome.cz/Bodylight-VirtualBody">
<img style="width:100%" src="img/Bodylight-VirtualBody.png" alt="Bodylight VirtualBody">
</a>
</div>
<div class="w3-rest w3-padding">
<h3 class="w3-center">VirtualBody</h3>
Demo of interactive 3D visualisation of human body using WebGL standard with 2D panels with selected interactive web simulators.
Can be viewed in web browsers (Chrome 88.x, Firefox 86.x, Ms edge 88.x, Safari 14.x) on desktop, tablet or mobile device.
Additionally, Text2Speech api is demonstrated for reporting the status of virtual patient.
See demo version at <a href="https://bodylight.physiome.cz/Bodylight-VirtualBody">Bodylight-VirtualBody</a>.
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<div class="w3-border w3-container w3-margin w3-padding w3-light-grey">
<div class="w3-row">
<div class="w3-third">
<a href="https://bodylight.physiome.cz/Bodylight-Editor">
<img style="width:100%" src="img/Bodylight-Editor.png" alt="Bodylight Editor">
</a>
</div>
<div class="w3-rest w3-padding">
<h3 class="w3-center">Editor<sup>2.0</sup></h3>
Static web application - create a web simulator using Bodylight.js<sup>2.0</sup> components. Web simulator can be written in HTML or Markdown. This Bodylight editor
may help to bind model variables and animation objects. Editor uses generic ACE editor with markdown-it renderer with live-preview of
web simulators.
<ul>
<li>Use it at <a href="https://bodylight.physiome.cz/Bodylight-Editor">Bodylight-Editor</a>.</li>
</ul>
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<div class="w3-border w3-container w3-margin w3-padding">
<div class="w3-row">
<div class="w3-third">
<a href="tutorial/">
<img style="width:100%" src="img/Bodylight-Tutorial.png" alt="Bodylight Tutorial">
</a>
</div>
<div class="w3-rest w3-padding">
<h3 class="w3-center">Tutorial<sup>2.0</sup></h3>
Step by step tutorial to create simple and advanced web simulator from Modelica model source code to functional interactive web simulator using
Bodylight toolchain 2.0(Bodylight.js FMU Compiler, Editor, Bodylight.js-Components).
Following the tutorial, you will get set of files in HTML,JS and MARKDOWN format ready to be deployed as a static web page.
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<div class="w3-border w3-container w3-margin w3-padding w3-light-grey">
<div class="w3-row">
<div class="w3-third">
<a href="https://bodylight.physiome.cz/composer">
<img style="width:100%" src="img/Bodylight-Composer.png" alt="Bodylight Composer">
</a>
</div>
<div class="w3-rest w3-padding">
<h3 class="w3-center">Composer<sup>1.0</sup></h3>
Static web application - create a web simulator using Bodylight.js<sup>1.0</sup> in Composer,
It allows you to visually create an HTML/JS/CSS simulator embeded in single HTML file. We are using the wonderful project GrapesJS to provide
the layouting engine, Adobe® Animate to create interactive animations and Modelica to make it all run on
models you write yourself.
<ul>
<li>Use it at <a href="https://bodylight.physiome.cz/composer">Bodylight-Composer</a>.</li>
<li>Tutorial for Composer at <a href="https://bodylight.physiome.cz/docs/introduction">docs/introduction</a>.</li>
</ul>
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<div class="w3-border w3-container w3-margin w3-padding">
<div class="w3-row">
<div class="w3-third">
<a href="https://www.physiome.cz/en/apps/">
<img style="width:100%" src="img/Apps.png" alt="Apps">
</a>
</div>
<div class="w3-rest w3-padding">
<h3 class="w3-center">Physiome Apps<sup>1.0</sup></h3>
Set of web simulator developed in Bodylight.js<sup>1.0</sup> technology include simple non-pulsatile circulation
simulator, Nephron kidney simulator and simulator of Iron Metabolism.
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<div class="w3-border w3-container w3-margin w3-padding">
<div class="w3-row">
<div class="w3-third">
<a href="https://bodylight.physiome.cz/index1.0.html">
Bodylight.js 1.0
</a>
</div>
<div class="w3-rest w3-padding">
Previous version of Bodylight.js framework.
</div>
</div>
</div>
<div style="margin:60px!important">
</div>
<footer class="w3-bar" style="background:#4a4a4a; color:white;position:relative;z-index:1">
<section class="w3-small"><sup>1.0</sup> - Bodylight 1.0 includes Bodylight Composer and set of tutorials and apps. Please cite as:<span class="w3-tiny">Šilar J, Polák D, Mládek A, Ježek F, Kurtz T, DiCarlo S, Živný J, Kofranek J
Development of In-Browser Simulators for Medical Education: Introduction of a Novel Software Toolchain
J Med Internet Res 2019;21(7):e14160
URL: https://www.jmir.org/2019/7/e14160
DOI: 10.2196/14160</span> </section>
<section class="w3-small"><sup>2.0</sup> - Bodylight 2.0 evolves Bodylight 1.0 by web components and tools (editor, virtual machine). Not yet published, you may cite as: <a href="https://doi.org/10.5281/zenodo.4575354"><img src="https://zenodo.org/badge/doi/10.5281/zenodo.4575354.svg" alt="zenodo badge" /></a></section>
<section class="w3-center">2021 @ Creative Connections, COM-SYS Trade, First Faculty of Medicine - Charles University - Prague</section></footer>
</body>
</html>