Here you will find tutorials that cover the main features of the viewer. Step by step, you will build a complete viewer example by adding a feature at a time.
# How to start
The code examples on the following tutorials can be used in different way.
The simplest way is to start with the following code (
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <title>BIMDataViewer - Tutorials</title> <script src="https://cdn.jsdelivr.net/npm/@email@example.com"></script> </head> <body> <div style="height: 100vh"> <div id="viewerId"></div> </div> <script> /******* INSERT COMPLETE CODE EXAMPLES HERE *******/ </script> </body> </html>
You just need to have the viewer installed (via CDN) and add a div with an
id attribute (e.g.
Then paste the
Complete code example sections you will find on the tutorials in the
<script> tag above,
and open that
index.html in a compatible browser.
# Tutorials list
It is a good idea to do this tutorials in order as code is added to the same file step by step.
- Make your own window layout.
- Add plugins on windows.
- Create shortcuts.
- Create context menu command
- Listen and update state
# What do I do next?
Once finished, you will have solid knowledge of the main viewer features. The next sections Customize the UI and Develop your plugins covers the respective features in depth and are the logic sequel of these tutorials. You will find features you already saw here with more detailed informations.