Using HTML Elements to Trigger Actions in `index.html`

as part of the VC Story Plugin, you can use HTML elements to trigger actions defined in the items.json file. This allows for a more interactive storytelling experience.

1. ToDo’s in items.json

1.1. 1. Define the action

First, you need to define the action in the items.json file under the actions key. For example, if you want to create a viewpoint action, it might look like this:

{
    "actions": [
        {
            "id": "viewpoint-PotsdamerPlatz",
            "type": "viewpoint",
            "viewpoint": {
                "distance": 533.79,
                "groundPosition": [13.375510, 52.509600, 35.240790],
                "heading": 263.71,
                "pitch": -44.86,
                "roll": 0,
                "animate": true
            }
        }
    ]
}

This snippet defines a viewpoint action with a unique ID and specific parameters for the camera position and animation.

1.2. 2. Link the action

Next, you need to link this action to an HTML element in the index.html file. This is done by adding objects to the items key in the items.json file.

{
    "items": [
        {
            "htmlID": "#story_start",
            "scrollInteraction": ["startview"],
            "clickInteraction": []
        },
        {
            "htmlID": "#demo-viewpoint",
            "scrollInteraction": ["geojson-nbs-site", "nbs-pilot"],
            "clickInteraction": []
        },
        {
            "htmlID": "#switch-layer",
            "scrollInteraction": [],
            "clickInteraction": ["layer-disable"]
        },
        {
            "htmlID": "#switch-map",
            "scrollInteraction": [],
            "clickInteraction": ["map-switch"]
        },
        {
            "htmlID": "#demo-flight",
            "scrollInteraction": [],
            "clickInteraction": ["flight-demo"]
        }
    ]
}

There are two ways to trigger an action, either by a scroll or by a click interaction. The type of the interaction is specified within those objects. In the items.json file, the htmlID key specifies the HTML element that will trigger the action. The scrollInteraction key is used for scroll-triggered actions, while the clickInteraction key is used for click-triggered actions.

2. ToDo’s in index.html

In the index.html file, you need to ensure that the HTML elements have the appropriate attributes to trigger the actions defined in the items.json file.

2.1. open `index.html`

navigate to div <div id="story-box" class="ui-scroll-content"> in <div id="story-frame" class="tour"> and add the content you want to display in the VC Story. This content can include text, images, and other HTML elements that will be part of your story.

<div id="story-frame" class="tour">
  <!-- Content Tour -->

  <div id="tour-frame" style="display: block; /*overflow: hidden;*/">
    <nav class="tour-top-navi">
    <!-- Place here your html content from old story from <nav> section to display all buttons -->
    </nav>
    <div id="story-box" class="ui-scroll-content">
        <!-- Place here your html content from old story from story section -->
    </div>
  <!-- End of: Content Tour -->
</div>

2.2. scroll interactions

Usually scroll interactions are linked to div elements, click interactions to button elements.

 <div id="story_start" class="story-content">
    <h2>Welcome to the VC Story</h2>
    <p>This is the introduction to your story.</p>
    </div>

As show above, the div element with the id story_start has the class story-content, which is required for scroll interactions. This element will trigger the action defined in the items.json file when it comes into view during scrolling. In order to trigger a scroll interaction the class attribute class="story-content" has to be added to the corresponding html element.

The class attribute class="story-content" is required for scroll interactions. And the element id must hava an action added to the scrollInteraction array of the htmlID in the items key in items.json file.

2.3. click interactions

    <div class="w3-bar w3-margin-top w3-margin-bottom">
        <button id="switch-map" class="w3-button w3-orange"><i class="fa fa-eye"></i>
        <span class="i18n_btn_science">Map 2D / 3D</span></button>
        <button id="switch-layer" class="w3-button w3-orange"><i class="fa fa-eye"></i>
        <span class="i18n_btn_science">Show layer</span></button>
        <button id="demo-flight" class="w3-button w3-orange"><i class="fa fa-eye"></i>
        <span class="i18n_btn_science">Fly-through</span></button>
    </div>

The requirement for a click interaction is that the clickable element has an id.

The clickable element must have an id, which is used in the items.json file to link the action to the HTML element. The clickInteraction array in the items.json file will contain the action IDs that should be triggered when the button is clicked.

Using HTML Elements to Trigger Actions in index.html