Skip to content

Commit 456f4dd

Browse files
dakerfinetjul
daker
authored and
finetjul
committed
docs(Examples): migrate from controller.html to lil-gui
fixes #3359
1 parent 18b7ed3 commit 456f4dd

186 files changed

Lines changed: 5196 additions & 6128 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Examples/Geometry/AR/controller.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Examples/Geometry/AR/index.js‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
1919
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
2020
import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';
2121

22-
import controlPanel from './controller.html';
22+
import GUI from 'lil-gui';
2323

2424
// ----------------------------------------------------------------------------
2525
// Parse URL parameters
@@ -89,19 +89,24 @@ renderWindow.render();
8989
// UI control handling
9090
// -----------------------------------------------------------
9191

92-
fullScreenRenderer.addController(controlPanel);
93-
const arbutton = document.querySelector('.arbutton');
94-
arbutton.disabled = !xrRenderWindowHelper.getXrSupported();
95-
96-
arbutton.addEventListener('click', (e) => {
97-
if (arbutton.textContent === 'Start AR') {
98-
xrRenderWindowHelper.startXR(requestedXrSessionType);
99-
arbutton.textContent = 'Exit AR';
100-
} else {
101-
xrRenderWindowHelper.stopXR();
102-
arbutton.textContent = 'Start AR';
103-
}
104-
});
92+
const gui = new GUI();
93+
let arControlController;
94+
if (!xrRenderWindowHelper.getXrSupported()) {
95+
gui.add({ Info: 'WebXR not supported' }, 'Info');
96+
} else {
97+
const arControl = {
98+
startOrExitAR: () => {
99+
if (!xrRenderWindowHelper.isXrSessionActive()) {
100+
xrRenderWindowHelper.startXR(requestedXrSessionType);
101+
arControlController.name('Exit AR');
102+
} else {
103+
xrRenderWindowHelper.stopXR();
104+
arControlController.name('Start AR');
105+
}
106+
},
107+
};
108+
arControlController = gui.add(arControl, 'startOrExitAR').name('Start AR');
109+
}
105110

106111
// -----------------------------------------------------------
107112
// Make some variables global so that you can inspect and

‎Examples/Geometry/AxesActor/controlPanel.html‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎Examples/Geometry/AxesActor/index.js‎

Lines changed: 47 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ import macro from '@kitware/vtk.js/macros';
77
import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
88
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
99

10-
import controlPanel from './controlPanel.html';
11-
12-
console.warn(
13-
'Click on index.ts to open source code for this example --------->'
14-
);
10+
import GUI from 'lil-gui';
1511

1612
// ----------------------------------------------------------------------------
1713
// Standard rendering code setup
@@ -33,41 +29,59 @@ renderWindow.render();
3329
// UI control handling
3430
// ----------------------------------------------------------------------------
3531

36-
fullScreenRenderer.addController(controlPanel);
32+
const gui = new GUI();
33+
const params = {
34+
recenter: true,
35+
xAxisInvert: false,
36+
yAxisInvert: false,
37+
zAxisInvert: false,
38+
};
3739

3840
function updateRendering() {
3941
axesActor.update();
4042
renderer.resetCameraClippingRange();
4143
renderWindow.render();
4244
}
4345

44-
document.querySelector('.recenter').addEventListener('change', (e) => {
45-
const config = axesActor.getConfig();
46-
config.recenter = !!e.target.checked;
47-
axesActor.setConfig(config);
48-
updateRendering();
49-
});
50-
51-
document.querySelector('.xAxisInvert').addEventListener('change', (e) => {
52-
const config = axesActor.getXConfig();
53-
config.invert = !!e.target.checked;
54-
axesActor.setXConfig(config);
55-
updateRendering();
56-
});
57-
58-
document.querySelector('.yAxisInvert').addEventListener('change', (e) => {
59-
const config = axesActor.getYConfig();
60-
config.invert = !!e.target.checked;
61-
axesActor.setYConfig(config);
62-
updateRendering();
63-
});
64-
65-
document.querySelector('.zAxisInvert').addEventListener('change', (e) => {
66-
const config = axesActor.getZConfig();
67-
config.invert = !!e.target.checked;
68-
axesActor.setZConfig(config);
69-
updateRendering();
70-
});
46+
gui
47+
.add(params, 'recenter')
48+
.name('Center axis')
49+
.onChange((value) => {
50+
const config = axesActor.getConfig();
51+
config.recenter = !!value;
52+
axesActor.setConfig(config);
53+
updateRendering();
54+
});
55+
56+
gui
57+
.add(params, 'xAxisInvert')
58+
.name('X axis inversion')
59+
.onChange((value) => {
60+
const config = axesActor.getXConfig();
61+
config.invert = !!value;
62+
axesActor.setXConfig(config);
63+
updateRendering();
64+
});
65+
66+
gui
67+
.add(params, 'yAxisInvert')
68+
.name('Y axis inversion')
69+
.onChange((value) => {
70+
const config = axesActor.getYConfig();
71+
config.invert = !!value;
72+
axesActor.setYConfig(config);
73+
updateRendering();
74+
});
75+
76+
gui
77+
.add(params, 'zAxisInvert')
78+
.name('Z axis inversion')
79+
.onChange((value) => {
80+
const config = axesActor.getZConfig();
81+
config.invert = !!value;
82+
axesActor.setZConfig(config);
83+
updateRendering();
84+
});
7185

7286
// -----------------------------------------------------------
7387
// Make some variables global so that you can inspect and

‎Examples/Geometry/Cone/controller.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎Examples/Geometry/Cone/index.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { FieldDataTypes } from '@kitware/vtk.js/Common/DataModel/DataSet/Constan
1313

1414
import vtkFPSMonitor from '@kitware/vtk.js/Interaction/UI/FPSMonitor';
1515

16-
import controlPanel from './controller.html';
16+
import GUI from 'lil-gui';
1717

1818
// ----------------------------------------------------------------------------
1919
// Standard rendering code setup
@@ -91,20 +91,20 @@ fpsMonitor.update();
9191
// UI control handling
9292
// -----------------------------------------------------------
9393

94-
fullScreenRenderer.addController(controlPanel);
95-
const representationSelector = document.querySelector('.representations');
96-
const resolutionChange = document.querySelector('.resolution');
97-
98-
representationSelector.addEventListener('change', (e) => {
99-
const newRepValue = Number(e.target.value);
100-
actor.getProperty().setRepresentation(newRepValue);
101-
renderWindow.render();
102-
fpsMonitor.update();
103-
});
104-
105-
resolutionChange.addEventListener('input', (e) => {
106-
const resolution = Number(e.target.value);
107-
coneSource.setResolution(resolution);
94+
const gui = new GUI();
95+
const params = {
96+
Representation: 2,
97+
Resolution: 6,
98+
};
99+
gui
100+
.add(params, 'Representation', { Points: 0, Wireframe: 1, Surface: 2 })
101+
.onChange((val) => {
102+
actor.getProperty().setRepresentation(Number(val));
103+
renderWindow.render();
104+
fpsMonitor.update();
105+
});
106+
gui.add(params, 'Resolution', 4, 80, 1).onChange((val) => {
107+
coneSource.setResolution(Number(val));
108108
renderWindow.render();
109109
fpsMonitor.update();
110110
});

‎Examples/Geometry/GlyphRotation/controller.html‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎Examples/Geometry/GlyphRotation/index.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818

1919
import { OrientationModes } from '@kitware/vtk.js/Rendering/Core/Glyph3DMapper/Constants';
2020

21-
import controlPanel from './controller.html';
21+
import GUI from 'lil-gui';
2222

2323
// ----------------------------------------------------------------------------
2424
// Standard rendering code setup
@@ -131,25 +131,24 @@ renderWindow.render();
131131
// UI control handling
132132
// -----------------------------------------------------------
133133

134-
fullScreenRenderer.addController(controlPanel);
135-
134+
const gui = new GUI();
135+
const params = { AngleX: 0, AngleY: 0, AngleZ: 0, Angles: 'X(0), Y(0), Z(0)' };
136136
function updateAngles() {
137-
const x = Number(document.querySelector('.xAngle').value);
138-
const y = Number(document.querySelector('.yAngle').value);
139-
const z = Number(document.querySelector('.zAngle').value);
137+
const x = Number(params.AngleX);
138+
const y = Number(params.AngleY);
139+
const z = Number(params.AngleZ);
140140
for (let i = 0; i < anglesArray.length; i += 3) {
141141
anglesArray[i] = (Math.PI * x) / 180;
142142
anglesArray[i + 1] = (Math.PI * y) / 180;
143143
anglesArray[i + 2] = (Math.PI * z) / 180;
144144
}
145145
anglesDataArray.modified();
146-
baseGrid.modified(); // Should not be needed
146+
baseGrid.modified();
147147
renderWindow.render();
148-
document.querySelector('.txt').innerHTML = `X(${x}), Y(${y}), Z(${z})`;
148+
params.Angles = `X(${x}), Y(${y}), Z(${z})`;
149149
}
150-
151-
document.querySelectorAll('.angle').forEach((elem) => {
152-
elem.addEventListener('input', updateAngles);
153-
});
154-
150+
gui.add(params, 'AngleX', 0, 90, 1).onChange(updateAngles);
151+
gui.add(params, 'AngleY', 0, 90, 1).onChange(updateAngles);
152+
gui.add(params, 'AngleZ', 0, 90, 1).onChange(updateAngles);
153+
gui.add(params, 'Angles').listen().disable();
155154
updateAngles();

‎Examples/Geometry/LookingGlass/controller.html‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎Examples/Geometry/LookingGlass/index.js‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
2121
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
2222
import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';
2323

24-
import controlPanel from './controller.html';
24+
import GUI from 'lil-gui';
2525

2626
// Import the Looking Glass WebXR Polyfill override
2727
// Assumes that the Looking Glass Bridge native application is already running.
@@ -95,32 +95,28 @@ renderWindow.render();
9595
// UI control handling
9696
// -----------------------------------------------------------
9797

98-
fullScreenRenderer.addController(controlPanel);
99-
const representationSelector = document.querySelector('.representations');
100-
const resolutionChange = document.querySelector('.resolution');
101-
const vrbutton = document.querySelector('.vrbutton');
102-
103-
representationSelector.addEventListener('change', (e) => {
104-
const newRepValue = Number(e.target.value);
105-
actor.getProperty().setRepresentation(newRepValue);
106-
renderWindow.render();
107-
});
108-
109-
resolutionChange.addEventListener('input', (e) => {
110-
const resolution = Number(e.target.value);
111-
coneSource.setResolution(resolution);
98+
const gui = new GUI();
99+
const params = { Representation: 2, Resolution: 6, LookingGlass: false };
100+
gui
101+
.add(params, 'Representation', { Points: 0, Wireframe: 1, Surface: 2 })
102+
.onChange((val) => {
103+
actor.getProperty().setRepresentation(Number(val));
104+
renderWindow.render();
105+
});
106+
gui.add(params, 'Resolution', 4, 80, 1).onChange((val) => {
107+
coneSource.setResolution(Number(val));
112108
renderWindow.render();
113109
});
114-
115-
vrbutton.addEventListener('click', (e) => {
116-
if (vrbutton.textContent === 'Send To Looking Glass') {
117-
xrRenderWindowHelper.startXR(XrSessionTypes.LookingGlassVR);
118-
vrbutton.textContent = 'Return From Looking Glass';
119-
} else {
120-
xrRenderWindowHelper.stopXR();
121-
vrbutton.textContent = 'Send To Looking Glass';
122-
}
123-
});
110+
gui
111+
.add(params, 'LookingGlass')
112+
.name('Looking Glass Session')
113+
.onChange((val) => {
114+
if (val) {
115+
xrRenderWindowHelper.startXR(XrSessionTypes.LookingGlassVR);
116+
} else {
117+
xrRenderWindowHelper.stopXR();
118+
}
119+
});
124120

125121
// -----------------------------------------------------------
126122
// Make some variables global so that you can inspect and

0 commit comments

Comments
 (0)