Skip to content

Commit 9e731f2

Browse files
mistic100mistic100
committed
doc: add gui in examples
1 parent f1810c3 commit 9e731f2

File tree

12 files changed

+328
-4
lines changed

12 files changed

+328
-4
lines changed

‎examples/misc-components.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h1>Custom panel</h1>
3737

3838
<script type="module">
3939
import { Viewer } from '@photo-sphere-viewer/core';
40-
import { CustomNavbarButton } from './CustomNavbarButton.js';
40+
import { CustomNavbarButton } from './scripts/CustomNavbarButton.js';
4141

4242
customElements.define('custom-navbar-button', CustomNavbarButton);
4343

‎examples/plugin-autorotate.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
{
1717
"imports": {
1818
"three": "/node_modules/three/build/three.module.js",
19+
"lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
1920
"@photo-sphere-viewer/core": "/dist/core/index.module.js",
2021
"@photo-sphere-viewer/autorotate-plugin": "/dist/autorotate-plugin/index.module.js",
2122
"@photo-sphere-viewer/markers-plugin": "/dist/markers-plugin/index.module.js"
@@ -24,6 +25,7 @@
2425
</script>
2526

2627
<script type="module">
28+
import { GUI } from 'lil-gui';
2729
import { Viewer } from '@photo-sphere-viewer/core';
2830
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
2931
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
@@ -98,6 +100,45 @@
98100
}
99101

100102
window.viewer = viewer;
103+
104+
const config = {
105+
autostartDelay: autorotate.config.autostartDelay,
106+
autostartOnIdle: autorotate.config.autostartOnIdle,
107+
autorotateSpeed: '3rpm',
108+
autorotatePitch: autorotate.config.autorotatePitch ?? '0deg',
109+
autorotateZoomLvl: autorotate.config.autorotateZoomLvl ?? 50,
110+
};
111+
112+
const config2 = {
113+
overridePitch: autorotate.config.autorotatePitch !== null,
114+
overrideZoomLvl: autorotate.config.autorotateZoomLvl !== null,
115+
};
116+
117+
const gui = new GUI({ title: 'Autorotate Plugin Options' });
118+
119+
gui.add(config, 'autostartDelay', 0, 10000, 500);
120+
gui.add(config, 'autostartOnIdle');
121+
const overridePitch = gui.add(config2, 'overridePitch');
122+
const autorotatePitch = gui.add(config, 'autorotatePitch');
123+
const overrideZoomLvl = gui.add(config2, 'overrideZoomLvl');
124+
const autorotateZoomLvl = gui.add(config, 'autorotateZoomLvl', 0, 100, 1);
125+
126+
overridePitch.name('[override pitch]');
127+
overridePitch.onChange((ok) => (ok ? autorotatePitch.show() : autorotatePitch.hide()));
128+
config2.overridePitch ? autorotatePitch.show() : autorotatePitch.hide();
129+
130+
overrideZoomLvl.name('[override zoom lvl]');
131+
overrideZoomLvl.onChange((ok) => (ok ? autorotateZoomLvl.show() : autorotateZoomLvl.hide()));
132+
config2.overrideZoomLvl ? autorotateZoomLvl.show() : autorotateZoomLvl.hide();
133+
134+
gui.onChange(() => {
135+
autorotate.setOptions({
136+
...config,
137+
autostartDelay: config.autostartDelay,
138+
autorotatePitch: config2.overridePitch ? config.autorotatePitch : null,
139+
autorotateZoomLvl: config2.overrideZoomLvl ? config.autorotateZoomLvl : null,
140+
});
141+
});
101142
</script>
102143
</body>
103144
</html>

‎examples/plugin-compass.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
{
1818
"imports": {
1919
"three": "/node_modules/three/build/three.module.js",
20+
"lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
2021
"@photo-sphere-viewer/core": "/dist/core/index.module.js",
2122
"@photo-sphere-viewer/compass-plugin": "/dist/compass-plugin/index.module.js",
2223
"@photo-sphere-viewer/markers-plugin": "/dist/markers-plugin/index.module.js"
@@ -25,6 +26,9 @@
2526
</script>
2627

2728
<script type="module">
29+
import { GUI } from 'lil-gui';
30+
import { addColorPicker } from './scripts/LilGuiColorPicker.js';
31+
import { addTextarea } from './scripts/LilGuiTextarea.js';
2832
import { Viewer } from '@photo-sphere-viewer/core';
2933
import { CompassPlugin } from '@photo-sphere-viewer/compass-plugin';
3034
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
@@ -114,6 +118,34 @@
114118
const compass = viewer.getPlugin(CompassPlugin);
115119

116120
window.viewer = viewer;
121+
122+
const config = {
123+
size: compass.config.size,
124+
backgroundSvg: compass.config.backgroundSvg,
125+
position: compass.config.position.join(' '),
126+
navigation: compass.config.navigation,
127+
coneColor: compass.config.coneColor,
128+
navigationColor: compass.config.navigationColor,
129+
hotspotColor: compass.config.hotspotColor,
130+
};
131+
132+
const gui = new GUI({ title: 'Compass Plugin Options' });
133+
134+
gui.add(config, 'size');
135+
addTextarea(gui, config, 'backgroundSvg', 10);
136+
gui.add(config, 'position', ['top left', 'top right', 'bottom left', 'bottom right']);
137+
gui.add(config, 'navigation');
138+
addColorPicker(gui, config, 'coneColor');
139+
addColorPicker(gui, config, 'navigationColor');
140+
addColorPicker(gui, config, 'hotspotColor');
141+
142+
gui.onChange(() => {
143+
compass.setOptions({
144+
...config,
145+
});
146+
147+
document.querySelector('.lil-gui').style.right = (config.position === 'top right') ? 'auto' : '';
148+
});
117149
</script>
118150
</body>
119151
</html>

‎examples/plugin-map.html‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
{
1818
"imports": {
1919
"three": "/node_modules/three/build/three.module.js",
20-
"randomcolor": "https://cdn.jsdelivr.net/npm/randomcolor/+esm",
20+
"lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
2121
"@photo-sphere-viewer/core": "/dist/core/index.module.js",
2222
"@photo-sphere-viewer/map-plugin": "/dist/map-plugin/index.module.js",
2323
"@photo-sphere-viewer/markers-plugin": "/dist/markers-plugin/index.module.js"
@@ -26,8 +26,11 @@
2626
</script>
2727

2828
<script type="module">
29+
import { GUI } from 'lil-gui';
30+
import { addColorPicker } from './scripts/LilGuiColorPicker.js';
31+
import { addTextarea } from './scripts/LilGuiTextarea.js';
2932
import { Viewer } from '@photo-sphere-viewer/core';
30-
import randomColor from 'randomcolor';
33+
import randomColor from 'https://cdn.jsdelivr.net/npm/randomcolor/+esm';
3134
import { MapPlugin } from '@photo-sphere-viewer/map-plugin';
3235
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
3336

@@ -125,8 +128,12 @@
125128

126129
if (view === 'maximized') {
127130
map.setZoom(100);
131+
gui.hide();
128132
} else if (view === 'normal') {
129133
map.setZoom(40);
134+
gui.show();
135+
} else {
136+
gui.show();
130137
}
131138
});
132139

@@ -155,6 +162,79 @@
155162
}
156163

157164
window.viewer = viewer;
165+
166+
const overlayImage = map.config.overlayImage;
167+
const config = {
168+
// position
169+
center: { ...map.config.center, },
170+
rotation: map.config.rotation / Math.PI * 180,
171+
172+
// display
173+
shape: map.config.shape,
174+
size: map.config.size,
175+
position: map.config.position.join(' '),
176+
static: map.config.static,
177+
minZoom: Math.round(Math.exp(map.config.minZoom) * 100),
178+
maxZoom: Math.round(Math.exp(map.config.maxZoom) * 100),
179+
overlayImage: map.config.overlayImage !== null,
180+
181+
// pin
182+
pinImage: map.config.pinImage,
183+
pinSize: map.config.pinSize,
184+
coneColor: map.config.coneColor,
185+
coneSize: map.config.coneSize,
186+
187+
// hotspot
188+
spotStyle: {
189+
size: map.config.spotStyle.size,
190+
color: map.config.spotStyle.color,
191+
hoverSize: map.config.spotStyle.hoverSize ?? map.config.spotStyle.size,
192+
hoverColor: map.config.spotStyle.hoverColor ?? map.config.spotStyle.color,
193+
hoverBorderSize: map.config.spotStyle.hoverBorderSize,
194+
hoverBorderColor: map.config.spotStyle.hoverBorderColor,
195+
},
196+
};
197+
198+
const gui = new GUI({ title: 'Map Plugin Options' });
199+
200+
const position = gui.addFolder('Position');
201+
position.add(config.center, 'x', 0, 1600, 1).name('center.x');
202+
position.add(config.center, 'y', 0, 1200, 1).name('center.y');
203+
position.add(config, 'rotation', 0, 360, 1);
204+
205+
const display = gui.addFolder('Display');
206+
display.add(config, 'shape', ['round', 'square']);
207+
display.add(config, 'size');
208+
display.add(config, 'position', ['top left', 'top right', 'bottom left', 'bottom right']);
209+
display.add(config, 'minZoom', 10, 100, 1);
210+
display.add(config, 'maxZoom', 10, 400, 1);
211+
display.add(config, 'static');
212+
display.add(config, 'overlayImage');
213+
214+
const pin = gui.addFolder('Pin');
215+
addTextarea(pin, config, 'pinImage', 10);
216+
pin.add(config, 'pinSize', 5, 100, 1);
217+
addColorPicker(pin, config, 'coneColor', false);
218+
pin.add(config, 'coneSize', 5, 100, 1);
219+
220+
const hotspot = gui.addFolder('Hotstpots (spotStyle)');
221+
hotspot.add(config.spotStyle, 'size', 5, 50, 1);
222+
addColorPicker(hotspot, config.spotStyle, 'color', true);
223+
hotspot.add(config.spotStyle, 'hoverSize', 5, 50, 1);
224+
addColorPicker(hotspot, config.spotStyle, 'hoverColor', true);
225+
hotspot.add(config.spotStyle, 'hoverBorderSize', 0, 20, 1);
226+
addColorPicker(hotspot, config.spotStyle, 'hoverBorderColor', true);
227+
hotspot.close();
228+
229+
gui.onChange(() => {
230+
map.setOptions({
231+
...config,
232+
rotation: config.rotation + 'deg',
233+
overlayImage: config.overlayImage ? overlayImage : null,
234+
});
235+
236+
document.querySelector('.lil-gui').style.right = (config.position === 'top right') ? 'auto' : '';
237+
});
158238
</script>
159239
</body>
160240
</html>

‎examples/plugin-markers.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ <h2>Custom element</h2>
121121
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
122122
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
123123
import { StereoPlugin } from '@photo-sphere-viewer/stereo-plugin';
124-
import { CustomMarkerElement } from './CustomMarkerElement.js';
124+
import { CustomMarkerElement } from './scripts/CustomMarkerElement.js';
125125

126126
customElements.define('custom-marker', CustomMarkerElement);
127127

‎examples/plugin-plan.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
{
1919
"imports": {
2020
"three": "/node_modules/three/build/three.module.js",
21+
"lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
2122
"leaflet": "/node_modules/leaflet/dist/leaflet-src.esm.js",
2223
"@photo-sphere-viewer/core": "/dist/core/index.module.js",
2324
"@photo-sphere-viewer/plan-plugin": "/dist/plan-plugin/index.module.js",
@@ -27,6 +28,9 @@
2728
</script>
2829

2930
<script type="module">
31+
import { GUI } from 'lil-gui';
32+
import { addColorPicker } from './scripts/LilGuiColorPicker.js';
33+
import { addTextarea } from './scripts/LilGuiTextarea.js';
3034
import { TileLayer } from 'leaflet';
3135
import { Viewer } from '@photo-sphere-viewer/core';
3236
import { PlanPlugin } from '@photo-sphere-viewer/plan-plugin';
@@ -97,6 +101,10 @@
97101
},
98102

99103
hotspots: [
104+
{
105+
coordinates: [6.792, 44.585],
106+
tooltip: 'Hotspot',
107+
},
100108
{
101109
coordinates: [6.7783, 44.58506],
102110
id: 'green-lake',
@@ -140,12 +148,74 @@
140148

141149
if (view === 'maximized') {
142150
plan.setZoom(16);
151+
gui.hide();
143152
} else if (view === 'normal') {
144153
plan.setZoom(14);
154+
gui.show();
155+
} else {
156+
gui.show();
145157
}
146158
});
147159

148160
window.viewer = viewer;
161+
162+
const config = {
163+
// position
164+
coordinates: plan.config.coordinates,
165+
bearing: plan.config.bearing / Math.PI * 180,
166+
167+
// display
168+
position: plan.config.position.join(' '),
169+
size: plan.config.size,
170+
171+
// pin
172+
pinImage: plan.config.pinImage,
173+
pinSize: plan.config.pinSize,
174+
175+
// hotspot
176+
spotStyle: {
177+
size: plan.config.spotStyle.size,
178+
color: plan.config.spotStyle.color,
179+
hoverSize: plan.config.spotStyle.hoverSize ?? plan.config.spotStyle.size,
180+
hoverColor: plan.config.spotStyle.hoverColor ?? plan.config.spotStyle.color,
181+
hoverBorderSize: plan.config.spotStyle.hoverBorderSize,
182+
hoverBorderColor: plan.config.spotStyle.hoverBorderColor,
183+
},
184+
};
185+
186+
const gui = new GUI({ title: 'Plan Plugin Options' });
187+
188+
const position = gui.addFolder('Position');
189+
position.add(config.coordinates, 0).name('longitude');
190+
position.add(config.coordinates, 1).name('latitude');
191+
position.add(config, 'bearing', 0, 360, 1);
192+
193+
const display = gui.addFolder('Display');
194+
display.add(config, 'position', ['top left', 'top right', 'bottom left', 'bottom right']);
195+
display.add(config.size, 'width').name('size.width');
196+
display.add(config.size, 'height').name('size.height');
197+
198+
const pin = gui.addFolder('Pin');
199+
addTextarea(pin, config, 'pinImage', 10);
200+
pin.add(config, 'pinSize', 5, 100, 1);
201+
202+
const hotspot = gui.addFolder('Hotstpots (spotStyle)');
203+
hotspot.add(config.spotStyle, 'size', 5, 50, 1);
204+
addColorPicker(hotspot, config.spotStyle, 'color', true);
205+
hotspot.add(config.spotStyle, 'hoverSize', 5, 50, 1);
206+
addColorPicker(hotspot, config.spotStyle, 'hoverColor', true);
207+
hotspot.add(config.spotStyle, 'hoverBorderSize', 0, 20, 1);
208+
addColorPicker(hotspot, config.spotStyle, 'hoverBorderColor', true);
209+
hotspot.close();
210+
211+
gui.onChange(() => {
212+
plan.setOptions({
213+
...config,
214+
bearing: config.bearing + 'deg',
215+
});
216+
217+
document.querySelector('.lil-gui').style.right = (config.position === 'top right') ? 'auto' : '';
218+
});
149219
</script>
150220
</body>
151221
</html>

examples/CustomMarkerElement.js renamed to examples/scripts/CustomMarkerElement.js

File renamed without changes.

examples/CustomNavbarButton.js renamed to examples/scripts/CustomNavbarButton.js

File renamed without changes.

‎examples/scripts/LilGuiColorPicker.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Controller } from 'lil-gui';
2+
import 'https://cdn.jsdelivr.net/npm/@eastdesire/jscolor/jscolor.min.js';
3+
4+
class ColorController extends Controller {
5+
6+
constructor(parent, object, property, alpha = 'auto') {
7+
super(parent, object, property, 'color');
8+
9+
this.$input = document.createElement('input');
10+
this.$input.setAttribute('aria-labelledby', this.$name.id);
11+
this.$input.value = this.getValue();
12+
13+
this.$widget.appendChild(this.$input);
14+
15+
this.picker = new window.jscolor(this.$input, {
16+
preset: 'dark',
17+
format: 'any',
18+
alphaChannel: alpha,
19+
borderRadius: 0,
20+
borderWidth: 0,
21+
height: 100,
22+
width: 150,
23+
sliderSize: 10,
24+
previewSize: 20,
25+
previewPadding: 3,
26+
});
27+
28+
this.picker.onInput = () => {
29+
this.setValue(this.picker.toString());
30+
};
31+
}
32+
}
33+
34+
export function addColorPicker(gui, object, property, alpha) {
35+
return new ColorController(gui, object, property, alpha);
36+
}

0 commit comments

Comments
 (0)