search

cruise-automation / webviz

web-based visualization libraries
https://webviz.io/
Apache License 2.0
2.03k stars 412 forks source link

Integrating Webviz into an existing React application #679

Closed eden-desta closed 2 years ago

eden-desta commented 2 years ago

Hi! 1) I want to say this library is beautiful -- I am in awe 2) I have a standalone React application that needs some sort of visualisation aspect for the ROSbags we have (live and pre-recorded). I was wondering if there is a way for me to pull Webviz (core) into an existing application?

It might be pretty straight forward and this might be a useless question, but I have no clue where to get started on doing that, or if there is some docs to do that currently.

Thank you!!! Appreciate your time.

jxjshaw commented 2 years ago

I think there are two approaches you can consider. The first is doing an iframe, so you just need to get that working within your existing app and then all you probably need to do is drag in the bag manually or figure out a way to get the streaming and url to work. If you want a more involved approach more tightly coupled with the bag playback in your app, perhaps take a look at the 3dvis panel/folders and see if you can rework that into your current app. On Thu, Oct 21, 2021 at 11:21 AM Eden Desta @.***> wrote:

Hi!

  1. I want to say this library is beautiful -- I am in awe
  2. I have a standalone React application that needs some sort of visualisation aspect for the ROSbags we have (live and pre-recorded). I was wondering if there is a way for me to pull Webviz (core) into an existing application?

It might be pretty straight forward and this might be a useless question, but I have no clue where to get started on doing that, or if there is some docs to do that currently.

Thank you!!! Appreciate your time.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cruise-automation/webviz/issues/679, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6VGJTJ7YDWXIWBCZ3CBWTUIBKZZANCNFSM5GOYNZWA .

eden-desta commented 2 years ago

@jxjshaw thank you for your response! Can you point me to the folder you are referring to? the 3dvis panel/folders.

Appreciate your time!

jxjshaw commented 2 years ago

packages/webviz-core/src/panels/ThreeDimensionalViz

On Fri, Oct 22, 2021 at 4:41 AM Eden Desta @.***> wrote:

@jxjshaw https://github.com/jxjshaw thank you for your response! Can you point me to the folder you are referring to? the 3dvis panel/folders.

Appreciate your time!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/cruise-automation/webviz/issues/679#issuecomment-949551237, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6VGJVCR46T7AGKJK2JZJLUIFEWDANCNFSM5GOYNZWA .

denesh-globotix commented 2 years ago 
            <iframe width="853" height="480" src="https://webviz.io/app/" title="Player">
            </iframe> Seems to do the trick, dragging and dropping rosbags work too!
jxjshaw commented 2 years ago

that’s awesome! glad it worked :)

i would love to see a screenshot if you are able to share!

On Fri, Oct 29, 2021 at 3:31 AM den @.***> wrote:

        <iframe width="853" height="480" src="https://webviz.io/app/" title="Player">
        </iframe> Seems to do the trick, dragging and dropping rosbags work too!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/cruise-automation/webviz/issues/679#issuecomment-954634811, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6VGJX6AGW5XNSQBUMM65LUJJZZRANCNFSM5GOYNZWA .

denesh-globotix commented 2 years ago

Sure, this is how it looks on the webpage we are working on: image

and this is the link to see it in action: https://jsfiddle.net/den_globotix/vrsyw490/

eden-desta commented 2 years ago

Amazing thank you for sharing!