@ud-viz/browser

@ud-viz/browser is a npm package based on iTowns for creating front-end web applications to visualize, analyze, and interact with geospatial 3D urban data. It also depends on @ud-viz/shared package.

• @ud-viz/browser
  • Directory Hierarchy
  • Getting started
  • Developers
    • Npm scripts
    • Debugging
  • How to use it in your demo?
    • With npm
    • From a release bundle

Directory Hierarchy

UD-Viz/packages/browser
├── bin                                           # Global NodeJS development
├── examples                                      # Application Examples (html files importing the bundle)
├── src                                           # Package JS, CSS files
|    ├── AllWidget                                # UI template for ud-viz demo using widgets
|    ├── Component                                # Components used to compose applications
|    |    ├── AssetManager                        # Manage asset loading
|    |    ├── ExternalGame                        # Browser-side game engine
|    |    ├── Frame3D                             # 3D view
|    |    ├── Itowns                              # iTowns framework customization
|    |    ├── Widget                              # UI components for data interaction
|    |    ├── Component.js                        # API of Component module
|    |    ├── FileUtil.js                         # Utils to manipulate files
|    |    ├── HTMLUtil.js                         # Utils to manipulate html
|    |    ├── InputManager.js                     # Manage user inputs
|    |    ├── RequestAnimationFrameProcess.js     # Used to launch an asynchronous process
|    |    ├── SocketIOWrapper.js                  # Manage a websocket communication
|    |    ├── THREEUtil.js                        # Utils to manipulate THREE library
|    ├── SinglePlayerGamePlanar                   # Single player game template for using ud-viz game engine
|    ├── index.js                                 # API description (webpack entry point)
├── webpackConfig                                 # Configs of bundles' creation
├── package.json                                  # Global npm project description
├── Readme.md                                     # It's a me, Mario!

Getting started

See here.

Developers

For pre-requisites see here.

Npm scripts

| Script | Description | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | npm run build | Create a webpack bundle in production mode. See webpack.config.js | | npm run build-debug | Create a webpack bundle in developpement mode. See webpack.config.js | | npm run test | Run browser test scripts and examples html. Uses this test script | | npm run debug | Launch a watcher for debugging. See here for more information |

Debugging

For debugging run:

npm run debug

This runs a watched routine debug.js with nodemon which:

• Runs a npm run build-debug
• May run npm run test (not by default).

How to use it in your demo?

You can use it through npm (the preferred way) or download a bundle from our GitHub release page.

With npm

In your demo:

npm install --save @ud-viz/browser

If you're using a module bundler (like webback), you can directly write import * as udvizBrowser from '@ud-viz/browser' in your code. See import doc.

See https://github.com/VCityTeam/UD-Viz-template

From a release bundle

See our release page. We highly recommend using the last release every time.

• This bundle also contains the dependencies
• First release bundle -> 3.1.0

:warning: You can see a bundle-usage in examples but it's not from a release bundle, you can't copy paste directly, src attribute has to be changed in the script tag.