cruise webriz configure

background

during ADS development, ros bag is used a lot to record the sensor, CAN and scenario info, which helps in vehicle test, data fusion, perception.
cruise webviz is an open source tool to visualize rosbag and allow user defined layout in web environment, without the pain to run roscore and other ros nodes.

while js is not a common tool in my visibility, the way how an js project is organized is really confused at the first time. there are a punch of new things:

and js functions/modules are really patches, they can be pached anywhere in the project, so usually it requires a patch manager(e.g. lerna) to deal with versions, dependencies etc; and bigger there are packages, which is independent function component.

webviz has a few packages, e.g. regl-worldview, webviz-core, which has more than 40 patches(modules) used.

lerna

lerna is an open source tool to manage js project with multi packages.

lerna init will generate lerna.json, which defines the required modules
package.json defines useful infomation about the module depencies, CLI(which give a detail about how things work behind) and project description
lerna bootstrap --hoist react will install all required modules in the root folder /node_modules, if doesn’t work well, leading to Can't Resovle module errors, may need manually install some.

webpack

webpack is an open source tool for js module bundler.

webpack.config.js, defines entry, where the compiler start; output , where the compiler end; module, how to deal with each module; plugin, additionaly content post compiliation; resovle.alias define alias for modules.


var path=require("path")
module.exports ={
	entry: { app:["./app/main.js"] }
     	output: {path: path.resolve(__dirname, "build")} 
}
npm install webpack-dev-server
npm list | head -n 1 
webpack-dev-server --inline --hot

the JS bundle could be loaded from a static HTML page, served with any simple web server. That’s exactly what this /packages/webviz-core/public/index.html file is, which is used for https://webviz.io/try. The webpack dev server is configured to serve it at /webpack.config.js

npm commands


npm config list 
npm install packages@version.minor [-g] [--save]
npm uninstall packages 
npm search packages
npm cache clean --force

webpack-server

webpack-server is a little nodejs Express server. to install it as a CLI tool first, then run it under the webviz project root folder, with optional parameters, e.g. –host, –port e.t.c

webviz configure

npm config set registry https://r.npm.taobao.org
npm install puppeteer –unsafe-perm=true
npm run bootstrap

if failed:

sudo npm cache clean –force
npm install -g lerna
npm run bootstrap
sudo npm install/rebuild node-sass
npm run build

if failed, manually installed unresovled modules

npm test

if failed based on a few test modules, install then

npm install webpack-dev-server –save

webpack-dev-server.js –host IP –port 8085 #under project root

a little hack, by default npm install inter-ui phli’s inter-ui), where inside
webviz/packages/webvix-core/src/styles/fonts.module.scess, it uses: url("~inter-ui/Inter UI (web)/Inter-UI.var.woff2") format("woff2-variations"), modified this line to: url("~inter-ui/Inter (web)/Inter.var.woff2") format("woff2-variations")