Skip to content

Commit 68dae05

Browse files
Chamango90Chamango90
committed
Update lib to use umd of urdf-loader
1 parent 0e6405b commit 68dae05

6 files changed

+1051
-39
lines changed

‎AnimationWrapper.js

+61-30
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
window.AnimationWrapper =
2-
class AnimationWrapper extends URDFViewer {
1+
import * as THREE from 'three';
2+
import URDFViewer from 'urdf-loader';
3+
4+
// import URDFViewer from 'urdf-loader/urdf-viewer-element.js';
5+
6+
export default
7+
class AnimationWrapper extends URDFViewer {
38

49
constructor() {
510

@@ -30,7 +35,7 @@ class AnimationWrapper extends URDFViewer {
3035

3136
_setRecorder(quality, speed) {
3237
this.action.reset();
33-
this.mixer.update( this.clock.getDelta() ); // Jump to first frame before record
38+
this.mixer.update(this.clock.getDelta()); // Jump to first frame before record
3439
this.gif.abort();
3540
this.gif.width = null;
3641
this.gif.height = null;
@@ -47,15 +52,15 @@ class AnimationWrapper extends URDFViewer {
4752
_addGIFConverterGUI() {
4853
if (this.gui == null) this.gui = new dat.GUI();
4954
this.gif.on('progress', p => gifAPI['converting ='] = p * 100);
50-
this.mixer.addEventListener( 'loop', () => {
55+
this.mixer.addEventListener('loop', () => {
5156
if (this.recording) {
5257
this.recording = false;
5358
this.action.paused = true;
5459
this.gif.render();
5560
}
5661
});
5762
this.updateRecordBar = () => gifAPI['recording ='] = this.action.time;
58-
let folder = this.gui.addFolder( 'Record ' + this.track.name),
63+
let folder = this.gui.addFolder('Record ' + this.track.name),
5964
gifAPI = {
6065
'record()': () => {
6166
this._setRecorder(gifAPI.quality, gifAPI.speed);
@@ -68,7 +73,7 @@ class AnimationWrapper extends URDFViewer {
6873
speed: 1,
6974
quality: 10
7075
};
71-
76+
7277
folder.add(gifAPI, 'speed', 0.1, 10);
7378
folder.add(gifAPI, 'quality', 1, 10, 1);
7479
folder.add(gifAPI, 'record()');
@@ -95,14 +100,24 @@ class AnimationWrapper extends URDFViewer {
95100
addURDF(data) {
96101

97102
super.urdf = data.urdf;
98-
super.package = data.packagesContainingMeshes.join(', ') || '';
103+
104+
if (Object.prototype.toString.call(data.urdfPkgs) === "[object String]")
105+
106+
new THREE.FileLoader().load(data.urdfPkgs, pkgs => {
107+
super.package = parse_rosinstall(pkgs)
108+
});
109+
110+
else {
111+
let pkgs = data.urdfPkgs || [];
112+
super.package = pkgs.join(', ');
113+
}
99114
}
100115

101116
addAnimation(data) {
102117

103118
this.addEventListener('geometry-loaded', () => {
104119

105-
new THREE.FileLoader().load( data.animation, anim => {
120+
new THREE.FileLoader().load(data.animation, anim => {
106121

107122
// Load recorded robot motion into a Three.js clipAction
108123
const fading = data.fading || 0.0;
@@ -115,20 +130,20 @@ class AnimationWrapper extends URDFViewer {
115130
//if (document.title == this.defaultTitle) document.title = this.track.name + ' animation';
116131

117132
this.action = this.mixer.clipAction(this.track);
118-
this.status = {recording: false};
133+
this.status = { recording: false };
119134
this.action.fadeIn(fading).play();
120135

121136
if (this.gui == null) this.gui = new dat.GUI();
122-
if (controlGUI) { addControlGUI( this.gui, this.action, this.track, fading); }
137+
if (controlGUI) { addControlGUI(this.gui, this.action, this.track, fading); }
123138

124-
this.dispatchEvent(new CustomEvent('animation-loaded', {bubbles: true, cancelable: true, composed: true}));
139+
this.dispatchEvent(new CustomEvent('animation-loaded', { bubbles: true, cancelable: true, composed: true }));
125140

126141
let animate = function () {
127142
requestAnimationFrame(animate);
128-
this.mixer.update( this.clock.getDelta() );
143+
this.mixer.update(this.clock.getDelta());
129144

130145
if (this.recording) {
131-
this.gif.addFrame(this.canvas, {delay: this.delay, copy: true});
146+
this.gif.addFrame(this.canvas, { delay: this.delay, copy: true });
132147
this.updateRecordBar();
133148
}
134149
}.bind(this);
@@ -144,15 +159,15 @@ class AnimationWrapper extends URDFViewer {
144159
this.canvas = document.getElementsByTagName('canvas')[0];
145160

146161
this.gif = new GIF({ // https://github.com/jnordberg/gif.js
147-
repeat: data.repeate || 0, // 1 = no repeat, 0 = forever
148-
workers: data.workers || 2,
162+
repeat: data.repeate || 0, // 1 = no repeat, 0 = forever
163+
workers: data.workers || 2,
149164
workerScript: data.workerScript || 'gif.worker.js',
150-
background: data.background || '#fff',
165+
background: data.background || '#fff',
151166
//width: this.canvas.width,
152167
//height: this.canvas.height,
153-
transparent: this.transparent || null, // hex color, 0x00FF00 = green
154-
dither: data.dither || false, // e.g. FloydSteinberg-serpentine
155-
debug: data.debug || false,
168+
transparent: this.transparent || null, // hex color, 0x00FF00 = green
169+
dither: data.dither || false, // e.g. FloydSteinberg-serpentine
170+
debug: data.debug || false,
156171
});
157172
this.gif.on('finished', blob => window.open(URL.createObjectURL(blob)));
158173

@@ -183,27 +198,43 @@ class AnimationWrapper extends URDFViewer {
183198
};
184199

185200

186-
function addControlGUI( gui, action, track, fading) {
201+
function addControlGUI(gui, action, track, fading) {
187202
// modified code of https://threejs.org/examples/#webgl_animation_skinning_morph
188-
let folder = gui.addFolder( 'Control ' + track.name),
203+
let folder = gui.addFolder('Control ' + track.name),
189204
API = {
190205
'play()': () => action.play(),
191206
'stop()': () => action.stop(),
192207
'reset()': () => action.reset(),
193208
get 'time ='() { return action !== null ? action.time : 0; },
194-
set 'time ='( value ) { action.time = value; },
209+
set 'time ='(value) { action.time = value; },
195210
get 'paused ='() { return action !== null && action.paused; },
196-
set 'paused ='( value ) { action.paused = value; },
211+
set 'paused ='(value) { action.paused = value; },
197212
get 'enabled ='() { return action !== null && action.enabled; },
198-
'fade in()': () => action.reset().fadeIn( fading ).play()
213+
'fade in()': () => action.reset().fadeIn(fading).play()
199214
};
200215

201-
folder.add( API, 'play()' );
202-
folder.add( API, 'stop()' );
203-
folder.add( API, 'reset()' );
204-
folder.add( API, 'time =', 0, track.duration ).listen();
205-
folder.add( API, 'paused =' ).listen();
206-
folder.add( API, 'fade in()' );
216+
folder.add(API, 'play()');
217+
folder.add(API, 'stop()');
218+
folder.add(API, 'reset()');
219+
folder.add(API, 'time =', 0, track.duration).listen();
220+
folder.add(API, 'paused =').listen();
221+
folder.add(API, 'fade in()');
222+
}
223+
224+
function parse_rosinstall(pkgs) {
225+
226+
function gitraw(uri) {
227+
const base = "https://raw.githubusercontent.com/";
228+
const repo = uri.split("https://github.com/")[1].split(".git")[0];
229+
return base + repo;
230+
}
231+
232+
//Hardcoded for git
233+
function g(obj, key) { return obj["git"][key] }
234+
let l = "local-name", u = "uri", v = "version";
235+
236+
return jsyaml.load(pkgs).map(i => `${g(i, l)}: ${gitraw(g(i, u))}/${g(i, v)}/${g(i, l)}`);
237+
207238
}
208239

209240
customElements.define('urdf-viewer', AnimationWrapper);

0 commit comments

Comments
 (0)