cruise-automation / webviz Goto Github PK

I'm trying to build webviz-core so that I can host it on my own web server, where it will be served out of a different path. Here's what I do inside a Docker container:

npm run bootstrap
npx lerna run build
npx webpack --env.NODE_ENV=production --config /webpack.config.js

These commands are based on the repository README and what the package.json build script does.

My /webpack.config.js file overrides the project's in a few ways:

var config = require("/webviz/webpack.config")

// only build the Webviz core bundle
const entry_target = "webvizCoreBundle"
const entry = config.entry[entry_target]
config.entry = {
    entry_target: entry
}

// override the path on the server
config.output.publicPath = "/static/webviz/"

// re-export the modified config
module.exports = config

I take all of the produced files in ./webviz/docs/public/dist/ and copy them to my static files directory.

However, when I navigate to this page in Chrome, I see a lot of noise that it is trying to connect to a local websocket port, and then when I drop a rosbag on it, it tries to load files from /dist/, which isn't the path I configured:

GET http://localhost/dist/f923f2a26c562dd21f5b.worker.js 404 (Not Found)

I tried building via the Dockerfile, is there a prebuilt image somwhere?
what options would i use to launch it, if I had build it?

I'm trying to create mouse event handlers for specific objects, but these handlers are being triggered everywhere for the first object, specifically in a list of Cubes. The code looks like this:

  renderPallets = () => {
    const locationData = this.props.map.palletLocations.map((location, i) => {
      return {
        id: i,
        isClickable: true,
        type: constants.OBJ_TYPE_PALLET,
        pose: {
          orientation: {
            x: location.world_t_location[3],
            y: location.world_t_location[4],
            z: location.world_t_location[5],
            w: location.world_t_location[6],
          },
          position: {
            x: location.world_t_location[0],
            y: location.world_t_location[1],
            z: location.world_t_location[2],
          },
        },
        scale: { x: 1.1, y: 1.1, z: 0.1 },
        color: { r: 1, g: 1, b: 0, a: 1 },
      }
    })

    return (
      <Cubes
        getHitmapId={(marker) => marker.id}
        onClick={this.handlePalletClick}
        onMouseMove={this.handlePalletHover}>
        {locationData}
      </Cubes>
    )
  }

Both the onClick and onMouseMove handlers are triggered across the entire canvas with data for just the first cube passed to them. I tried adding the getHitmapId prop to help out, but it didn't make a difference.

I was able to reproduce the issue on this page in the docs https://webviz.io/worldview/#/docs/commands/cubes by adding this onClick event on the 5th to last line: <Cubes onClick={() => console.log('go')}>{markers}</Cubes>.

I'm on version 0.4.1. Any ideas?

Hello guys,
I'd like to know if you have ideas of making webviz available on npm too, like you have done with Worldview.

Hi, Thanks for the amazing work !
I am new to webviz, but I can feel it is a very promising project. It makes exploring rosbag data much easier than using the tools in ros. But what I feel is just viewing data in rosbags is the first step, after viewing the data, users may want to add comments or tags to this bag file or to part of the data in the bag file. So I wander if you plan to add some labeling/tagging features to webviz? Say there is cutin scenario in this rosbag file , and I want to record this information and later I want to replay this cutin part in this rosbag file . Such feature will make webviz more powerful to AD engineers.
Do you have such plans ?

Hi! Is it possible to add a .jpeg image to a scene? (I saw you have added road and other images in your blog) .
Also, is there a way to embed OccupancyGrid ?

Hello, I'm trying to build a(n) UI with point-and-click navigation, and in order to do so right now I'm trying to draw many invisible polygons across the floor, but the performance drop is making it unusable :(

Here's what I'm writing:

  getFloor = () => {
    const floorIncrementM = 0.5  // meters
    let sectionId = 1111
    let floorPolygonData = []
    for (let i = -FLOOR_LENGTH; i < FLOOR_LENGTH; i = i + floorIncrementM) {
      for (let j = -FLOOR_LENGTH; j < FLOOR_LENGTH; j = j + floorIncrementM) {
        floorPolygonData.push(
          {
            id: sectionId++,
            coordinates: { x: i + floorIncrementM / 2, y: j + floorIncrementM / 2 },
            points: [
              { x: i, y: j, z: 0 },
              { x: i, y: j + floorIncrementM, z: 0 },
              { x: i + floorIncrementM, y: j + floorIncrementM, z: 0 },
              { x: i + floorIncrementM, y: j, z: 0 }
            ],
            color: WORLDVIEW_RGB.clear,
          }
        )
      }
    }

    return (
      <FilledPolygons
        onClick={this.handleFloorClick}>
        {floorPolygonData}
      </FilledPolygons>
    )
  }

I wanted to test webviz locally, therefore I pulled the latest version and tried to open the web app.

What I did so far:

apt update
apt install git nodejs npm curl
npm install -g npm 
npm install -g n
n latest
npm install node-sass  

cd webviz
npm run bootstrap 
npm run build

If now the tests are performed, we get the following error messages:

Summary of all failing tests
 FAIL  packages/webviz-core/src/players/RandomAccessPlayer.test.js (13.188s)
  ● RandomAccessPlayer › backfills previous messages on seek

    Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

      450 |   });
      451 |
    > 452 |   it("backfills previous messages on seek", async () => {
          |   ^
      453 |     const provider = new TestProvider();
      454 |     const source = new RandomAccessPlayer({ name: "TestProvider", args: { provider }, children: [] });
      455 |     let callCount = 0;

      at Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:85:20)
      at Suite.it (packages/webviz-core/src/players/RandomAccessPlayer.test.js:452:3)
      at Object.describe (packages/webviz-core/src/players/RandomAccessPlayer.test.js:133:1)

  ● RandomAccessPlayer › discards backfilled messages if we started playing after the seek

    Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

      537 |   });
      538 |
    > 539 |   it("discards backfilled messages if we started playing after the seek", async () => {
          |   ^
      540 |     const provider = new TestProvider();
      541 |     const source = new RandomAccessPlayer({ name: "TestProvider", args: { provider }, children: [] });
      542 |     let callCount = 0;

      at Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:85:20)
      at Suite.it (packages/webviz-core/src/players/RandomAccessPlayer.test.js:539:3)
      at Object.describe (packages/webviz-core/src/players/RandomAccessPlayer.test.js:133:1)

 FAIL  packages/webviz-core/src/util/debouncePromise.test.js
  ● debouncePromise › debounces with resolved and rejected promises

    expect(received).toBeUndefined()

    Received: {}

      32 |     await Promise.resolve();
      33 |     expect(calls).toBe(2);
    > 34 |     expect(debouncedFn.currentPromise).toBeUndefined();
         |                                        ^
      35 |
      36 |     debouncedFn();
      37 |     expect(calls).toBe(3);

      at Object.toBeUndefined (packages/webviz-core/src/util/debouncePromise.test.js:34:40)


Test Suites: 2 failed, 73 passed, 75 total
Tests:       3 failed, 748 passed, 751 total
Snapshots:   0 total
Time:        42.682s

I'll think the proper way of running the web app is to execute npm run docs or? However, the output of the browser at either localhost:8080 or localhost:8080/try is empty.

Hi,
I've been using some onClick events on a FilledPolygons element for getting the location of clicks on an (invisible) layer just above the floor, which is made of a grid of Lines elements.

When I add another FilledPolygons element that is below (farther away), the onClick events stop triggering. If you click on the floor between the grid lines (with the other Filled Polygons layer below), there is no event. If you click on the invisible floor where there's a grid line behind it, then it does work...

To try to recreate this behavior in order to share it, I created this code that can go into any React component:

          <Worldview
            defaultCameraState={DEFAULT_CAMERA_STATE}
            hitmapOnMouseMove
            backgroundColor={[0.4, 0.4, 0.4, 1]}>
            <FilledPolygons>
              {[{
                pose: {
                  position: { x: 0, y: 0, z: -1 },
                  orientation: { x: 0, y: 0, z: 0, w: 1 },
                },
                scale: { x: 0.01, y: 0.01, z: 0.01 },
                color: { r: 0, g: 1, b: 0, a: 0.4 },
                points: [{ x: -10, y: -10, z: -1 }, { x: -10, y: 10, z: -1 }, { x: 10, y: 10, z: -1 }, { x: 10, y: -10, z: -1 }],
              }]}
            </FilledPolygons>
            <Lines>
              {[{
                color: { r: 1, g: 1, b: 0, a: 0.4 },
                scale: { x: 0.5 },
                pose: {
                  position: { x: 0, y: 0, z: 0 },
                  orientation: { x: 0, y: 0, z: 0, w: 1 },
                },
                points: [{ x: 5, y: 5, z: 0 }, { x: -5, y: -5, z: 0 }]
              }]}
            </Lines>
            <FilledPolygons
              onClick={() => { console.log('clicked now') }}>
              {[{
                color: { r: 1, g: 0, b: 0, a: 1 },
                scale: { x: 0.01, y: 0.01, z: 0.01 },
                points: [
                  { x: -5 / 2, y: -5 / 2, z: 0.1 },
                  { x: -5 / 2, y: 5 / 2, z: 0.1 },
                  { x: 5 / 2, y: 5 / 2, z: 0.1 },
                  { x: 5 / 2, y: -5 / 2, z: 0.1 },
                ]
              }]}
            </FilledPolygons>
            )
          }
          </Worldview>

Here, however, no click events get triggered unless you get rid of the green square FilledPolygons element.

What can I do?

Thank you!

Edit: Ugh. In the example above, I added a scale field onto the clickable element, and it started working. But this change doesn't fix the issue in my project.

The tryout website seems broken as it cannot load wasm-lz4 because the link resolves to webviz.io but the resource seems under https://github.com/cruise-automation/wasm-lz4.

Error chrome devtool console,

Uncaught (in promise) abort("abort(\"on the web, we need the wasm binary to be preloaded and set on Module['wasmBinary']. emcc.py will do that for you when generating HTML (but not JS)\"). Build with -s ASSERTIONS=1 for more info."). Build with -s ASSERTIONS=1 for more info.

Chrome version

Version 75.0.3770.100 (Official Build) (64-bit) for mac

Hi, thanks for open sourcing webviz!

We've noticed a regression in bag playback. For certain bags with gaps in them the playback halts at the start of the gap instead of continuing playback through them:

A minimal bag that reproduces the issue on https://webviz.io/try/ : playback_issue_minimal.bag.gz
Created with the following script: make_bag.py.gz, basically it has 2 seconds of data, then a gap of two seconds, and then 30 seconds more data. If the last data part is 29 seconds the playback / cache mechanism jumps over the gap.

I think this was introduced in #273, commits before this don't have this issue. Looking further at the changes in this PR I identified the these values to affect the behaviour. Changing BLOCK_SIZE_NS to something larger (say 2.0e9) makes the playback work as expected.

@janpaul123 commented in the code that the numbers were determined emperically for good performance. So far increasing the block size doesn't seem to affect the performance too much, but I don't know exactly how the caching mechanism works or how this actually prevents the issue from manifesting.

i use an array to store ,and refresh the array 10 times per second ,and i find the memory usage exploded.i do not know why.

When the value for a topic is -1, seems that the color is a greyed out very hard to see color. Also for some topics say the message goes from 'AUTONOMY' to 'NAVIGATE' for a single message, the color remains the same. Would be nice if we could improve the the colors to make sure it is always good enough contrast and also to make sure that the color changes whenever the message value is different.

I tried to build webviz using npm run build and npm run docs but I get

Error initializing player
Error: Expected 1 top level type definition for 'Header' but found 0
    at findTypeByName (https://webviz.io/dist/WorkerDataProvider.worker.js?0441abdf8c8d84b2f526:122:2477)
    at https://webviz.io/dist/WorkerDataProvider.worker.js?0441abdf8c8d84b2f526:122:3089
    at Array.forEach (<anonymous>)
    at https://webviz.io/dist/WorkerDataProvider.worker.js?0441abdf8c8d84b2f526:122:3027
    at Array.forEach (<anonymous>)
    at parseMessageDefinition (https://webviz.io/dist/WorkerDataProvider.worker.js?0441abdf8c8d84b2f526:122:2977)
    at https://webviz.io/dist/WorkerDataProvider.worker.js?0441abdf8c8d84b2f526:527:333
    at Array.forEach (<anonymous>)
    at exports.bagConnectionsToDatatypes (https://webviz.io/dist/WorkerDataProvider.worker.js?0441abdf8c8d84b2f526:527:278)
    at exports.default.initialize (https://webviz.io/dist/WorkerDataProvider.worker.js?0441abdf8c8d84b2f526:407:3325)

when I drag and drop a bag into the UI

We're enjoying using this library a lot and hope to share how it's helping us run a fleet of robots. So, thank you :)

Something that could help our performance in the browser would be to allow setting an array of polygon points arrays for the points property in FilledPolygons. Our systems send us larger arrays of points for many polygons all of the same type or class, so it would be really helpful to be able to simply pass that array of arrays to the points property on one data object. Would that be possible?

We want to run our ros application, and transfer the data to worldview to visualize. But how to connect the C++ Ros node to worldview? Thanks

Whenever I wrap an HTML element around the WorldView component, it infinitely increases its height. I am forced to set a fixed height as a result.

See https://codesandbox.io/s/relaxed-sun-tqxk3.

When I enter a value other than the identity quaternion, the model deforms and stretches as demonstrated below with the duck model:

https://codesandbox.io/embed/agitated-star-ruxr4?fontsize=14

Can I view the topic of ros in real time?
(Will this replace Rviz in the future? Rviz is heavy processing load... )

thank you

Hi there,i just played around with a fork (and merged all the dependabot PRs on my clone) i noticed you have a docker image to do ci stuff cruise/webviz-ci:0.0.8 is there secret sauce in it or would it be possible to make the Dockerfile for this available?

I am attempting to load .glb files other than the Duck and CesiumMan that are provided in the GLTFScene example. I have tried to import my own models as well as ones provided in the example model repository here such as Box.glb and RiggedSimple.glb, but I always get the error "Error decoding GLB file".

I have forked your GLTFScene example and tried importing my own model to it, namely rectangle.glb and I get the same error as above. All the models are located in /utils/Models.

Example: https://codesandbox.io/s/agitated-star-ruxr4?fontsize=14

Hello!
We built some amazing stuff with your library!

There is one issue with controlled camera state: we need to be able turn it on and off conditionally.

It looks like even if we use onCameraStateChange and try to skip some camera updates - it moves for half a second then go back to previous state cameraState that we set before. Is there a way to avoid that half a second movement?

There is piece of the pattern what we use to achieve it:

<WorldView
onCameraStateChange={cameraState => {
          if (shouldNotMoveCamera) { . //here we try to avoid camera move but camera is already moved
            return;
          }
          setCameraState(cameraState);
}
 cameraState={cameraState}
/>

Thanks!

you need to be in github action beta (will be public November 13th; two days), enable docker registry in github (repo "packages" section).

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm bootstrap & build
      run: |
        npm run bootstrap
        npm run build --if-present
        #npm run docs (runs webserver)
      env:
        CI: true
    - uses: elgohr/Publish-Docker-Github-Action@master
      with:
        name: cruise-automation/webviz/webwiz:latest
        registry: docker.pkg.github.com
        dockerfile: Dockerfile
        username: <your-automation-username-here->
        password: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

# Copyright (c) 2018-present, GM Cruise LLC
#
# This source code is licensed under the Apache License, Version 2.0,
# found in the LICENSE file in the root directory of this source tree.
# You may not use this file except in compliance with the License.

# This container is published at https://hub.docker.com/r/cruise/webviz-ci.

FROM node:10.15.3-slim

# Install some general dependencies for stuff below and for CircleCI;
# https://circleci.com/docs/2.0/custom-images/#required-tools-for-primary-containers
RUN apt-get update && apt-get install -yq libgconf-2-4 wget git ssh --no-install-recommends

# Install Google Chrome for Puppeteer.
# https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst ttf-freefont --no-install-recommends
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

ENV WEBVIZ_IN_DOCKER=true

# Bumped up from the default old_space size (512mb) as it was being exceeded during builds.
ENV NODE_OPTIONS="--max_old_space_size=4096"

Copy . .

RUN npm run bootstrap

RUN npm run build

then run like docker run -p 8080:8080 webviz:latest npm run docs and you will have webviz running at port 8080 of the docker host.
beware you need to patch webpack.config.js to be running in docker:

  devServer: {
    contentBase: path.resolve(`${__dirname}/docs/public`),
    hot: true,
    open: true,
    host: '0.0.0.0', // fixes docker port binding
    public: '<hostname-of-your-docker-host>:8080'
  },

i am working on an nginx setup for proper TLS/letzsencrypt/443 setup that could be used on the internet with proper CORS support

I want to build webviz.
I install npm and nodejs and type

npm run bootstrap

It was success, but I typed

npm run test
npm run build

All of them are failed.

Not sure if this is useful for others, but I thought it might be handy to be able to package the core Webviz ROS bag analyzer app into a stand-alone Electron application.

I made a "webviz-electron" branch on my fork with mods to do this, but it has only been tested for Mac and Ubuntu Linux so far. Electron-builder should be able to package for Windows too, but I'm not sure if it works.

Thanks to the Cruise team for open-sourcing this interesting project.

I can plot and show images via official website. However, I can not visualize 3d point clouds whose format is pointcloud2. Nowadays, I have install dependancy and install storybook and I am using firefox on ubuntu 16.04.
Could you please tell me how to achieve it? Thank you!

Hi
I see that the webviz uses rosbag.js to read a ros bag file which is also maintained by cruise.
But I can't find the code that how you control the process like pause.
The way to get the result is to call bag.readMessages(options, callback),how I can pause a callback?Or is there a graph showing the webviz's data flow?

sincerely
Keyj

Hi,

Thanks for the amazing work !
In order to use webviz as a real drop-in replacement of RViz, visualizing real-time data would be really useful. As mentioned in #118, what are your plans on this feature ? How hard would it be to replace rosbag.js by realtime data provided by the rosbridge suite (https://github.com/RobotWebTools/rosbridge_suite) ?
If you have any insights about where to begin, I would be happy to contribute.

Hi, I know Webviz supports visualization of PointCloud2 data in the online tool, but I would really like to be able to view that data in Worldview as well. Is there a way to make the non-default types (like OccupancyGrids and PointClouds) usable in Worldview specifically?

I've got a couple of ROS bags with sensor_msgs/Image messages on camera/rgb/image_raw and comera/rgb/image_color. I see the messages in the raw message viewer but I don't see anything rendered in the Image view. I've tried a couple of different bags, compressed, uncompressed, etc. with no luck. I do see /camera/depth/image sensor_msgs/Image(s) in the Image viewer. Is there anything additional I need to do to get rgb camera images to display?

Hi, I want to use NodePlayground panel.
Is there any documentation? please tell me how to use this panel.

Hello,

Thanks for your amazing work!
I was wondering if i could get some more infos on how to use webviz on remote bags? I saw that it was possible to do it with a cloud provider like S3 or GCS https://github.com/cruise-automation/webviz/blob/master/packages/webviz-core/src/dataProviders/BrowserHttpReader.js
I have a custom NAS where my bags are stored and I am using Marv as a bag management platform. I wanted to generate link like this to have a complete view of the bags. Can you give me some advices on how to proceed?

If this appears to be too harsh to setup, is there a way to generate an url to have a view of one local bag instead of drag/dropping it?

Best regards,
Nicolas

hey, cruise team,

thanks for this great tool, wonder is there an easy way to split the inputted ros-bag at some certain timestep(maybe a start time and an end time during playing the rosbag in webviz), where maybe the testers are very interested at.

 david

Hi

I cannot drop the ouster ros bag files into webviz
http://data.ouster.io/sample-data-2018-08-29/index.html

thanks

Early on it says, "Webviz is a web-based application for playback and visualization of ROS bag files." and links you to a Webviz demo, however, I cannot find any explanation of how to actually serve this web application myself and get to it from my browser.

After a bit of messing around it looks like the proper way is running npm run docs and then browsing to http://localhost:8080/try (just http://localhost:8080 doesn't really work, since the 'view demo' links aren't relative but are to webviz.io) - but this is mostly from guesswork on my part, and it's not at all apparent.

When I drag the package gnss_raw_0 into webviz, the page appears：Missing 1 theme converted to base_link : / lidar side front(frame:lidar side front)，How can I solve this problem?

I have an application where I'm trying to switch between having the user control the camera position with the mouse and having the camera automatically follow vehicles in the visualization. However, when I switch out using the property cameraState & defaultCameraState, the screen goes blank. Each of these renders on its own, but when I try to change between the two--going either way from one to the other--Worldview dies without an error. Here is the code from the render method of a React container component:

          {this.props.map.cameraFollow.shouldFollow ?
            <Worldview
              cameraState={this.cameraState}
              hitmapOnMouseMove
              backgroundColor={[0.4, 0.4, 0.4, 1]}
              onMouseDown={this.onContainerMouseDown}
              onMouseUp={this.onContainerMouseUp}
              onMouseMove={this.onContainerMouseMove}
              onClick={this.onContainerClick}
              onDoubleClick={this.onContainerDoubleClick}>
              {this.getWorldviewElements()}
            </Worldview>
            :
            <Worldview
              defaultCameraState={this.cameraState}
              hitmapOnMouseMove
              backgroundColor={[0.4, 0.4, 0.4, 1]}
              onMouseDown={this.onContainerMouseDown}
              onMouseUp={this.onContainerMouseUp}
              onMouseMove={this.onContainerMouseMove}
              onClick={this.onContainerClick}
              onDoubleClick={this.onContainerDoubleClick}>
              {this.getWorldviewElements()}
            </Worldview>
          }

Here I keep all of the values the same except for the shouldFollow boolean, and the screen goes blank. Is there something wrong?

It would be nice to have the ability to display any message in the 3D visualizer without producing markers ahead of time similar to Plotting doesn't require a special format.

Is there any work going on to do this? It is obviously more difficult to write a generic message to message conversion system than simply finding a field to plot. Maybe allowing users to dump a javascript function or class along the lines of:

{
   topic: 'xxx',
   convert: function(msg: ThingMsg) {
        ...
        return markers;
   }
}

Any thoughts? Thanks for doing great work btw.

Hello, I've just upgraded to v0.2.2, and two of the fields seem to have been swapped unintentionally. Previously, the arguments were event, { ray, object(s) }.

Now, I'm seeing that the second argument is still an object with the field ray, but this field then points to a mouse event object. Meanwhile, the first argument sent turns out to be a ray. To explain a little more this what the second argument looks like now:

{
  objects: [{…}]
  ray: Class
    altKey: false
    bubbles: true
    button: 0
    buttons: 0
    cancelable: true
    clientX: 640
    clientY: 233
    ctrlKey: false
    ...
  }
}

That Ray looks a lot like a MouseEvent...

I'm guessing this was just an accident. I'll switch these out in my code, in the meantime, and leave myself a note.

Hi, I have a problem on watching webviz demo from https://webviz.io/try/?demo,
The player always waits for initializing, so I can't watch the demo.

I use Chrome on Windows 7 and its version

76.0.3809.100 (Official Build) (64-bit)

I also try my phone & ubuntu 16.04, but the same result for me.

Does anyone know if I lose some plugins or other things on watching demo?
Thanks.

Pointcloud viewer seems to be interpeting single 24bit value rgb channel/field as bgr.

Sample rosbag here: https://vision.in.tum.de/data/datasets/rgbd-dataset/download#freiburg3_cabinet

Relevant code block:

Screenshot:

Is there a Worldview command that corresponds best to ROS's OccupancyGrid? I'm thinking you could use FilledPolygons, constructing the x, y, z from the OccupancyGrid cell's indices and the width, height, position of the OccupancyGrid - then setting the alpha of the polygon from the cell value. However, it seems like the Triangles type has some nice features where it assumes triplets of points make a triangle, but I'm not sure if that works with the OccupancyGrid. Is there a type that's intended to go with OccupancyGrid?

As mentioned in the Discourse, this is an excellent effort. I noted some UX thoughts upon first usage which I just wanted to drop here. They are loose suggestions:

• Close the layout window upon clicking "Apply" if it was successful
• If the layout window is completely empty and "Apply" is clicked, do not display an error message but insert "{}" and close the window silently
• If the layout is empty when a bag is dropped onto the window, open a default selection of widgets (image, plot, raw message) pre-subscribed to a sensible topic in the bag

The last one came up because it was confusing to drop the bag, but then see nothing happening. I think that will confuse users who are not familiar with ROS especially.

Cheers!

hi, we are tinkering with the webviz to run and build in docker, did you stumble about this error?

gyp WARN install got an error, rolling back install
gyp ERR! configure error 
gyp ERR! stack Error: unexpected end of file
gyp ERR! stack     at Zlib.zlibOnError [as onerror] (zlib.js:154:17)
gyp ERR! System Linux 4.15.0-55-generic
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /node_modules/weak-napi
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Hi, I'm a newer here. Could you please include that "NOISY_spin_2.bag" file into your project for us to have a quick start?

Hi,
thanks for your work!

For real-time usage, I plan to gather data from radar, lidar or camera through CAN, Ether, etc.. use backend to synchronize and pack these data in ROS like messages, then send them to webviz through websocket directly to each message consumers.

Any suggestions about this. I really appreciate it if you guys could give me some help.

Awesome library, thanks for all you do! 😺

I'd like to supply my own camera matrices to <Worldview /> instead of the cameraState object.

the idea

<Worldview 
  cameraMatrices={{ 
    view, 
    projection
  }}
>

data model

// @flow

type CameraMatrices = {|
  view: Mat4,
  projection: Mat4,
|}

new behavior

<Worldview /> component checks for valid cameraMatrices prop on mount and update, sets them in cameraStore which uses them directly with priority over cameraState

benefits

adds support for arbitrary camera parameters in a standard format, expanding use cases

drawbacks

introduces more complexity to the camera state api

what do you think about this design? i'm eager to contribute if you think it fits.

Hi,
I am trying to visualize /points_raw as well GPS/IMU topics such as /imu, /fix or /gps in different panels. However, I am able to see and select only /points_raw from the topics recorded and exist in bag file.

As all the topics are published under standard format/name, can you suggest any workaround ?

I have several problems with installing/running WebViz on Ubuntu 18.04

1. I had to install nodejs and npm. I followed the description on
   https://wiki.ubuntuusers.de/Node.js/
   When installing npm, I got the error, that dependencies are missing that cannot be resolved (nodejs-dev node-gyp libssl1.0-dev)
   So I followed the hints on https://askubuntu.com/questions/1088662/npm-depends-node-gyp-0-10-9-but-it-is-not-going-to-be-installed
   and did
   sudo apt-get install nodejs-dev node-gyp libssl1.0-dev
   But this command deinstalled many of the libraries in my system especially my ros development environment. I am not able to work with the ros tools anymore.

2. After installing nodejs and npm, I followed the guidelines in the github readme.
   I did:
   npm run bootstrap.
   I remember that there were 2 red lines in the output, that dependencies could not be resolved, but don't remember exactly which.

3. When starting webviz, the browser open and I got the message that there is no access to cruise-control/button. So I changed in the package directory and installed cruise-control/button separately. But when starting webviz, there was the next message, that popper.js is missing. So I installed all packages in the folder packages separately. Is this correct? Do I have to install them by myself separately?

4. After installing all sub-packages, starting WebViz (http://localhost:8080/try/), only a black background appears. In the console I get the error:
   ERROR in ./packages/webviz-core/src/components/withDragDropContext.js
   Module not found: Error: Can't resolve 'react-dnd-html5-backend' in '/home/q456941/webviz/packages/webviz-core/src/components'
   @ ./packages/webviz-core/src/components/withDragDropContext.js 10:51-85
   @ ./packages/webviz-core/src/components/Root.js
   @ ./packages/webviz-core/src/loadWebviz.js
   @ ./packages/webviz-core/src/index.js

How to proceed? How to install/run WebViz on my computer (ubuntu 18.04) correctly?

When building:
npm run build
I get the same error as above.
Here is the corresponding npm-debug.log

1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle root@~prebuild: root@
6 silly lifecycle root@~prebuild: no script for prebuild, continuing
7 info lifecycle root@~build: root@
8 verbose lifecycle root@~build: unsafe-perm in lifecycle true
9 verbose lifecycle root@~build: PATH: /usr/share/npm/bin/node-gyp-bin:/home/q456941/webviz/node_modules/.bin:/opt/ros/melodic/bin:/home/q456941/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/bin:/home/q456941/llvm-project/build/bin
10 verbose lifecycle root@~build: CWD: /home/q456941/webviz
11 silly lifecycle root@~build: Args: [ '-c', 'lerna run build && webpack' ]
12 silly lifecycle root@~build: Returned: code: 2 signal: null
13 info lifecycle root@~build: Failed to exec build script
14 verbose stack Error: root@ build: lerna run build && webpack
14 verbose stack Exit status 2
14 verbose stack at EventEmitter. (/usr/share/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:126:13)
14 verbose stack at EventEmitter.emit (events.js:214:7)
14 verbose stack at ChildProcess. (/usr/share/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:126:13)
14 verbose stack at ChildProcess.emit (events.js:214:7)
14 verbose stack at maybeClose (internal/child_process.js:925:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
15 verbose pkgid root@
16 verbose cwd /home/q456941/webviz
17 error Linux 4.15.0-55-generic
18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
19 error node v8.10.0
20 error npm v3.5.2
21 error code ELIFECYCLE
22 error root@ build: lerna run build && webpack
22 error Exit status 2
23 error Failed at the root@ build script 'lerna run build && webpack'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the root package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error lerna run build && webpack
23 error You can get information on how to open an issue for this project with:
23 error npm bugs root
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls root
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

hey, webviz team,

    not familiar with web app, a simple wonder, where to setup a fixed IP? 

    Thanks