cruise-automation / webviz Goto Github PK
View Code? Open in Web Editor NEWweb-based visualization libraries
Home Page: https://webviz.io/
License: Apache License 2.0
web-based visualization libraries
Home Page: https://webviz.io/
License: Apache License 2.0
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.
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
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 ?
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.
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.
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
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 ?
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"})
Hello guys,
I'd like to know if you have ideas of making webviz available on npm too, like you have done with Worldview.
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?
hey, webviz team,
not familiar with web app, a simple wonder, where to setup a fixed IP?
Thanks
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?
Awesome library, thanks for all you do! 😺
I'd like to supply my own camera matrices to <Worldview />
instead of the cameraState
object.
<Worldview
cameraMatrices={{
view,
projection
}}
>
// @flow
type CameraMatrices = {|
view: Mat4,
projection: Mat4,
|}
<Worldview />
component checks for valid cameraMatrices
prop on mount and update, sets them in cameraStore
which uses them directly with priority over cameraState
adds support for arbitrary camera parameters in a standard format, expanding use cases
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.
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.
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
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?
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?
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.
Hi, I want to use NodePlayground panel.
Is there any documentation? please tell me how to use this panel.
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)
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
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
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?
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.
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.
I have several problems with installing/running WebViz on Ubuntu 18.04
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.
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.
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?
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 ]
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.
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, 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 ?
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.
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:
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'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?
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?
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
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.
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
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, 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.
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.
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
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:
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!
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?
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
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!
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 cannot drop the ouster ros bag files into webviz
http://data.ouster.io/sample-data-2018-08-29/index.html
thanks
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 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 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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.