Skip to content

Commit dc56290

Browse files
jspanchujspanchu
committed
chore(demo): add code playground demos for objects and observers with pure JS API.
1 parent 59d7a27 commit dc56290

File tree

18 files changed

+2027
-23
lines changed

18 files changed

+2027
-23
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
node_modules
22
docs/.vitepress/dist
33
docs/.vitepress/cache
4+
docs/public/demo/playground
45
docs/public/demo/simple-app
56
examples/cpp/vtk
67
examples/cpp/*/build

‎docs/.vitepress/config.mjs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,10 @@ export default defineConfig({
8686
text: "For JavaScript developers",
8787
items: [
8888
{ text: "Getting started", link: "/guide/js/" },
89-
{ text: "Plain JavaScript", link: "/guide/js/plain" },
90-
{ text: "Building an application", link: "/guide/js/bundler" },
89+
{ text: "Working With Objects", link: "/guide/js/objects" },
90+
{ text: "Observers", link: "/guide/js/observers" },
91+
{ text: "HTML Script Tag", link: "/guide/js/plain" },
92+
{ text: "Bundler Integration", link: "/guide/js/bundler" },
9193
],
9294
},
9395
{

‎docs/guide/js/bundler.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Modern JavaScript development
1+
# Bundler Integration
22

33
Modern web development rely on package manager to bring project dependencies. This section covers how published releases can be used within a JavaScript project.
44

‎docs/guide/js/index.md‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
1-
# VTK.wasm from the JavaScript side
1+
# VTK.wasm from JavaScript
22

3-
While VTK is a comprehensive C++ library, WASM is giving us an opportunity to enable it on servers and clients like your browser.
3+
This guide focuses on using the VTK WASM bundle from plain JavaScript, requiring no prior C++ knowledge.
44

5-
In this guide we will focus on how WASM can be used from plain JavaScript without any C++ knowledge and using the WASM bundle generated for our trame needs.
5+
## Overview
6+
Most C++ classes from the [VTK C++ Documentation](https://vtk.org/doc/nightly/html/) are available through a single JavaScript object, which we refer to as the **vtk** namespace.
67

7-
## Available environment
8+
Once you have access to the **vtk** namespace (see [Bundler Integration](./bundler.md)), you can interact with VTK classes using standard JavaScript.
89

9-
Web development has many faces between ESM, UMD and plain script usage. Each path is different to some extent so we will cover each of them in their own guide.
10+
## The Why
1011

11-
- Plain JavaScript usage
12-
- Using modern bundler
12+
VTK is a powerful library with a somewhat steep learning curve, but VTK.wasm allows you to use VTK without needing to learn C++. This can be particularly beneficial for web developers who are already familiar with JavaScript and want to integrate advanced visualization capabilities into their web applications.
1313

14-
## What does it looks like?
15-
16-
Since our WASM bundle is based on our trame needs, it currently mainly focus on the rendering stack (PolyData, Mappers and Actors...) but we plan to extend it with more VTK class coverage down the road.
17-
18-
So if we ignore how to get your hand on a __vtk__ namespace (see section above), you will be able to write code like below to interact with the available VTK classes in plain JavaScript.
19-
20-
<<< ../../public/demo/example.js
21-
22-
Result:
23-
24-
<iframe src="/vtk-wasm/demo/plain-javascript.html" style="width: 100%; height: 40vh; border: none;"></iframe>
14+
The following sections will guide you through the essential aspects of using VTK.wasm with JavaScript:
2515

16+
- [Working With Objects](./objects.md)
17+
- [Observers](./observers.md)
18+
- [HTML Script Tag](./plain.md)
19+
- [Bundler Integration](./bundler.md)

‎docs/guide/js/objects.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Working With Objects
2+
3+
You can create and manipulate VTK objects using the **vtk** namespace. Here's an example that shows how you can create and manipulate VTK objects in JavaScript:
4+
5+
<iframe src="/vtk-wasm/demo/playground/index.html?example=objects" style="width: 100%; height: 51vh; border: none;"></iframe>

‎docs/guide/js/observers.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Observers
2+
3+
Listen to events on an object using the observe method. Remove observers by passing the 'tag' back to `object.unObserve` method.
4+
5+
<iframe src="/vtk-wasm/demo/playground/index.html?example=observers" style="width: 100%; height: 90vh; border: none;" scrolling="no"></iframe>

‎docs/guide/js/plain.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
# Plain JavaScript
1+
# HTML Script Tag
2+
3+
This guide explains how to use VTK-Wasm directly in an HTML file using a `<script>` tag without a build step.
24

35
The following examples rely on loading the `vtk.umd.js` bundle from a CDN. Also to mainly focus on the initialization part, we've externalized the JS/WASM code since that part does not change.
46

‎examples/js/playground/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/js/playground/index.html‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!doctype html>
2+
<html lang="en" style="background-color: #21252b;">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Observers</title>
8+
<style>
9+
body {
10+
font-family: 'Lucida Console', 'Monaco', monospace;
11+
background-color: #21252b;
12+
}
13+
14+
.playground {
15+
max-width: 800px;
16+
margin: 0 auto;
17+
border: 1px solid #444;
18+
border-radius: 6px;
19+
overflow: hidden;
20+
background: #282c34;
21+
}
22+
23+
.toolbar {
24+
padding: 10px;
25+
background: #21252b;
26+
border-bottom: 1px solid #444;
27+
display: flex;
28+
gap: 10px;
29+
}
30+
31+
button {
32+
background: #3b4048;
33+
color: white;
34+
border: 1px solid #181a1f;
35+
padding: 6px 12px;
36+
border-radius: 4px;
37+
cursor: pointer;
38+
font-weight: 600;
39+
}
40+
41+
button:hover {
42+
background: #4b5263;
43+
}
44+
45+
.tabs {
46+
display: flex;
47+
gap: 0;
48+
background: #21252b;
49+
border-bottom: 1px solid #444;
50+
}
51+
52+
.tab {
53+
appearance: none;
54+
background: transparent;
55+
color: #fff;
56+
border: none;
57+
border-right: 1px solid #444;
58+
padding: 10px 14px;
59+
cursor: pointer;
60+
font-weight: 600;
61+
}
62+
63+
.tab:last-child {
64+
border-right: none;
65+
}
66+
67+
.tab[aria-selected="true"] {
68+
background: #282c34;
69+
border-bottom: 2px solid #fff;
70+
}
71+
72+
.tab:hover {
73+
background: #3b4048;
74+
}
75+
76+
.tab:focus-visible {
77+
outline: 2px solid #4b5263;
78+
outline-offset: -2px;
79+
}
80+
81+
.tabpanel {
82+
background: #282c34;
83+
}
84+
85+
/* Editor area */
86+
.cm-editor {
87+
height: 400px;
88+
font-size: 14px;
89+
}
90+
91+
/* Console Output */
92+
.console {
93+
height: 150px;
94+
background: #282c34;
95+
overflow-y: auto;
96+
padding: 10px;
97+
font-family: 'Lucida Console', 'Monaco', monospace;
98+
border-top: 1px solid #444;
99+
font-size: 13px;
100+
}
101+
102+
.log-line {
103+
border-bottom: 1px solid #222;
104+
padding: 2px 0;
105+
}
106+
107+
.log-error {
108+
color: #ff5555;
109+
}
110+
111+
.log-warn {
112+
color: #ffb86c;
113+
}
114+
115+
.log-log {
116+
color: #f8f8f2;
117+
}
118+
119+
iframe {
120+
width: 100%;
121+
border: none;
122+
display: block;
123+
}
124+
</style>
125+
</head>
126+
127+
<body>
128+
<div class="playground">
129+
<iframe id="vtk-iframe" src="about:blank" scrolling="no"></iframe>
130+
131+
<div class="tabs" role="tablist" aria-label="Code tabs">
132+
<button class="tab" id="tab-js" type="button" role="tab" aria-selected="true" aria-controls="panel-js"
133+
tabindex="0">JS</button>
134+
<button class="tab" id="tab-html" type="button" role="tab" aria-selected="false" aria-controls="panel-html"
135+
tabindex="-1">HTML</button>
136+
</div>
137+
138+
<div id="panel-html" class="tabpanel" role="tabpanel" aria-labelledby="tab-html" hidden>
139+
<div id="editor-host-html"></div>
140+
</div>
141+
<div id="panel-js" class="tabpanel" role="tabpanel" aria-labelledby="tab-js">
142+
<div id="editor-host-js"></div>
143+
</div>
144+
145+
<div class="toolbar">
146+
<button id="run-btn">Run</button>
147+
<button id="reset-btn">Reset</button>
148+
</div>
149+
<div id="console-output" class="console">
150+
<div class="log-line">> Ready.</div>
151+
</div>
152+
</div>
153+
154+
<script type="module" src="./src/main.js"></script>
155+
</body>
156+
157+
</html>

0 commit comments

Comments
 (0)