Quickstart.md

Minimal setup

Prepare a minimal webscene:

1. Create a new webscene
2. Add a Building Scene layer and add the suffix Building: in front of it's name
3. Save the webscene, give it a nice title and copy the webscene id. You will need it in a few next steps

Get your own copy of the Building Viewer

1. Clone the git repository in your local machine and then go into the folder:

git clone https://github.com/Esri/building-viewer
cd BSL-Demo-App

1. Remove the .git repository reference rm -rf .git
2. Install dependency: npm run install
3. Compile the code: npm run build
4. Start the server: npm run server
5. Open your browser and enter the local address http://localhost:8888/. You should see now the Building Viewer running:

Edit the content with your own webscene

1. Open src/config.tsx in your favorite code editor
2. Delete all the content except the two first obscure lines
3. Now you need to define 2 parameters in the config to get started:
   1. The websceneId of the webscene you created above

export const websceneId = "YOUR WEBSCENE ID HERE";

*Note that you may to also export on which portal this webscene resides if different from the ArcGis's portal: `export const portalUrl = "https://your-portal-url.com";`*
2. The `sections` you'd like to have in your Building Viewer (see documentation about sections). Let's start with only one section, the home page: 

// first import the section:
import HomeSection = require("./sections/HomeSection");

// then export the `sections` parameter:
export const sections = [
    new HomeSection({})
];

4. Recompile the code (note that the Building Viewer ships with a little util that watch files and recompile for you. Just run npm run dev in a differnet terminal window)
5. You should see your building in the Building Viewer now if you reload your webviewer:

Let's add content

The title of the home page is the title of your scene. If you would like to change it, you can simply update the title of the scene.

1. First, the view of the building when opening the Building Viewer isn't really Building appealing. Let's change this.
   1. Go back to your webscene
   2. Navigate to a view that please you
   3. Save a slide with name "Overview"
   4. Save your webscene and reload the demo Building Viewer. You should have a better view when you enter the Building Viewer:

2. Let's add some description on the left side:
   1. Go back to your webscene and go to "Properties"
   2. Add your text in the webscene description
   3. Save the webscene and reload the demo Building Viewer. You should now see your text on the left side:

3. Let's add different point of views for the user to appreciate the building in all corners:
   1. Go back to your webscene and go to "Slides"
   2. Move your view to the location you would like
   3. Create a new slide
   4. Repeat as much as you want, and then save your scene
   5. Reload the demo app, you should see now some points of view:

4. Let's add the opening hours:
   1. Go now to the file src/config.tsx
   2. Import the necessary classes:

import {Timetable, DayTimetable} from "./widgets/Timetable/Timetable";
import Collection = require("esri/core/Collection");

3. Add the timetable to the home section, and add all your opening hours for every day:

new HomeSection({
     timetable: new Timetable({
         dates: new Collection([
           new DayTimetable({
             opens: "8:00",
             closes: "20:00"
           }),
           new DayTimetable({
             opens: "8:00",
             closes: "20:00"
           }),
           new DayTimetable({
             opens: "8:00",
             closes: "20:00"
           }),
           new DayTimetable({
             opens: "8:00",
             closes: "20:00"
           }),
           new DayTimetable({
             opens: "8:00",
             closes: "20:00"
           }),
           new DayTimetable({
             opens: "10:00",
             closes: "17:00"
           }),
           new DayTimetable({
             opens: "10:00",
             closes: "17:00"
           })
         ])
      })
   })

4. Save your file, recompile the typsecrip and reload the app
5. You should now see the time table on the bottom left of the home page:

5. Change the ground colour
   1. The design of the Building Viewer has been set to work well with darker colours. Let's change the background for a dark solid colour
   2. Go back to your webscene and click on "Ground". Choose a good ground colour
   3. Go to the basemap gallery, and check "No basemap".
   4. Save your webscene (as the initial state) and reloads the Building Viewer:

5. Finally, let's add city buildings:
   1. If you have the city as Building Scene Layer, you can add it to your webscene and name it "City model".
   2. Save your webscene and reload the Building Viewer, you should see now the surroundings building:

Note that all others layers or configuration of your webscene will appear in your demo app.

---

To go beyond and add more section, please read the sections documentation. You can always check the naming conventions for a quick look at the different layer and slide names.