ldwgwffnschmdt/vue-ros3djs

Vue components for ros3djs

vue-ros3djs's Issues

Demo example

Hi,

Sorry for this noob question, I'm completely new with VueJs and I can't grasp how to make your library work.
I started from this HelloWorld repository, and I adapted it to integrate your VueJS components in a test page as suggested. The result is here: https://github.com/gurbain/vue-ros3djs-hello-world. (with the test component here: https://github.com/gurbain/vue-ros3djs-hello-world/blob/master/src/App.vue)

However, when I try it, nothing appears in the browser and I get the following messages in the console:

[Vue warn]: Unknown custom element: <ros3d-viewer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

[Vue warn]: Unknown custom element: <ros3d-axes> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

[Vue warn]: Unknown custom element: <ros3d-grid> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

[Vue warn]: Unknown custom element: <ros3d-laser-scan> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

Any idea where this could come from and how to solve it? Thank you very much!

Can not show /map and /scan topic

Hi! Thank for open the code vue-ros3djs. I am following your instruction but get stuck when I try to subscribe topics /map and /scan, the 3D viewer does not show anything. But all the topic have already published via websocket.


My code

<template>
<div class="VueRos3djsDemo">
 <ros3d-viewer
    :ros="ros"
    ref="viewer" id="viewer"
    @hook:mounted="rosViewerMounted" 
    v-if="connected">

    <ros3d-axes />

    <ros3d-grid :numCells = '10' />
    <ros3d-arrow :x ="1" :y="1" :z="1"/>
    <ros3d-occupancy-grid-client />
    <ros3d-laser-scan />
  </ros3d-viewer  >
  </div>
</template>

All the topic available in the list bellow

/client_count
/connected_clients
/map
/map_metadata
/rosout
/rosout_agg
/scan
/statistics
/tf2_web_republisher/cancel
/tf2_web_republisher/feedback
/tf2_web_republisher/goal

Could you help me! Many thanks.