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

Im Rahmen des VC Story Plugins können Sie HTML-Elemente verwenden, um Aktionen auszulösen, die in der Datei items.json definiert sind. Dies ermöglicht ein interaktiveres Storytelling-Erlebnis.

1. ToDos in items.json

1.1. 1. Definieren Sie die Aktion

Zuerst müssen Sie die Aktion in der Datei items.json unter dem Schlüssel actions definieren. Wenn Sie beispielsweise eine Viewpoint-Aktion erstellen möchten, könnte dies wie folgt aussehen:

{
    "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
            }
        }
    ]
}

Dieses Beispiel definiert eine Viewpoint-Aktion mit einer eindeutigen ID und spezifischen Parametern für die Kameraposition und Animation.

1.2. 2. Verknüpfen Sie die Aktion

Als Nächstes müssen Sie diese Aktion mit einem HTML-Element in der Datei index.html verknüpfen. Dies geschieht, indem Sie Objekte zum Schlüssel items in der Datei items.json hinzufügen.

{
    "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"]
        }
    ]
}

Es gibt zwei Möglichkeiten, eine Aktion auszulösen: entweder durch eine Scroll- oder durch eine Klick-Interaktion. Die Art der Interaktion wird innerhalb dieser Objekte festgelegt. In der Datei items.json gibt der Schlüssel htmlID das HTML-Element an, das die Aktion auslöst. Der Schlüssel scrollInteraction wird für durch Scrollen ausgelöste Aktionen verwendet, während der Schlüssel clickInteraction für durch Klicken ausgelöste Aktionen genutzt wird.

2. ToDos in index.html

In der Datei index.html müssen Sie sicherstellen, dass die HTML-Elemente die entsprechenden Attribute besitzen, um die in der Datei items.json definierten Aktionen auszulösen.

2.1. index.html öffnen

Navigieren Sie zum div <div id="story-box" class="ui-scroll-content"> innerhalb von <div id="story-frame" class="tour"> und fügen Sie den Inhalt hinzu, den Sie in der VC Story anzeigen möchten. Dieser Inhalt kann Text, Bilder und andere HTML-Elemente umfassen, die Teil Ihrer Story sind.

<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

In der Regel werden Scroll-Interaktionen mit div-Elementen verknüpft, Klick-Interaktionen mit Button-Elementen.

 <div id="story_start" class="story-content">
    <h2>Willkommen zur VC Story</h2>
    <p>Dies ist die Einführung zu Ihrer Story.</p>
    </div>

Wie oben gezeigt, besitzt das div-Element mit der ID story_start die Klasse story-content, die für Scroll-Interaktionen erforderlich ist. Dieses Element löst die in der Datei items.json definierte Aktion aus, wenn es beim Scrollen in den sichtbaren Bereich gelangt. Um eine Scroll-Interaktion auszulösen, muss das Attribut class="story-content" dem entsprechenden HTML-Element hinzugefügt werden.

Das Klassenattribut class="story-content" ist für Scroll-Interaktionen erforderlich. Außerdem muss die Element-ID eine Aktion im scrollInteraction-Array des htmlID-Eintrags im Schlüssel items der Datei items.json haben.

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>

Die Voraussetzung für eine Klick-Interaktion ist, dass das anklickbare Element eine id besitzt.

Das anklickbare Element muss eine id haben, die in der Datei items.json verwendet wird, um die Aktion mit dem HTML-Element zu verknüpfen. Das Array clickInteraction in der Datei items.json enthält die Aktions-IDs, die beim Klicken auf den Button ausgelöst werden sollen.

Using HTML Elements to Trigger Actions in index.html