Skip to content

Starnick/simple-viewer-app

 
 

Repository files navigation

Simple Viewer App

Copyright © 2019 Bentley Systems, Incorporated. All rights reserved.

An iModel.js sample application that demonstrates opening an iModel and viewing its data. The data is presented using the following components:

  • Viewport: Renders geometric data onto an HTMLCanvasElement.
  • Tree: Displays a hierarchical view of iModel contents.
  • Property Grid: Displays properties of selected element(s).
  • Table: Displays element properties in a tabular format.

This app serves as a guide on how you can embed one or more of these components into your own application. See http://imodeljs.org for comprehensive documentation on the iModel.js API and the various constructs used in this sample.

Development Setup

  1. (Optional) Create a sample project using the procedure at Developer Registration. This step is not needed if you already have a project to test with.

  2. (Recommended) Register your application at Developer Registration.

    For the purpose of running this sample on localhost, ensure your registration includes http://localhost:3000/signin-callback as a valid redirect URI.

    Note: If you are just testing on localhost you can use the default registration included in this sample. However, it's recommended that you complete the registration, especially since registration is a requirement before the application can be deployed. For more information, see the section on authorization.

  3. Edit src/common/configuration.ts and src/common/config.json to set the values you obtain from the registration process.

  4. Install the dependencies

npm install
  1. Build the application
npm run build
  1. There are two servers, a web server that delivers the static web resources (the frontend Javascript, localizable strings, fonts, cursors, etc.), and the backend RPC server that opens the iModel on behalf of the application. Start them both running locally:
npm run start:servers
  1. Open a web browser (e.g., Chrome or Edge), and browse to localhost:3000.

Screenshot of the application

Testing

Run both e2e and unit tests with npm test

End-to-end tests

You can run just end-to-end tests with npm run test:e2e. But it takes a while to build and start the tests, so if want to actively change something within them, first launch the app with npm run test:e2e:start-app and when it's done npm run test:e2e:test-app

If you want to see what tests do behind the scenes, you can launch them in non headless mode. Edit the file in ./test/end-to-end/setupTests.ts and add

{ headless: false }

to puppeteer launch options. Like this

before(async () => {
  browser = await Puppeteer.launch({ headless: false });
});

Unit tests

Run with npm run test:unit

Purpose

The purpose of this application is to demonstrate the following:

Contributing

Contributing to iModel.js

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.6%
  • CSS 3.5%
  • HTML 2.5%
  • JavaScript 2.4%