>>>> Important note: This is a preliminary document. All content is subject to change! <<<<
For integration of the INSIDE Online Map Engine into your website please follow the subsequent steps:
1. Add the js / css files to the head of your site:
https://insideguidance.com/integrations/assets/tdom.js
https://insideguidance.com/integrations/assets/tdom.css
add an optional css file for styling by INSIDE (including bootstrap):
https://insideguidance.com/integrations/assets/tdom-internal.css
Note: these scripts contain the following dependencies: jquery, bootstrap, other minor libraries
2. Add the html nodes:
Add the following html-snippet to the body of your site:
<!-- i18n -->
<script data-beacons="Beacons" data-co-exhibitors="Co-Exhibitors" data-events="Events" data-exhibitor-search-link="Got to Exhibitor Search" data-exhibitor-search-title="Do you want to find all exhibitors?" data-exhibitor-search-url="/en/search/?category=ep" data-exhibitors="Exhibitors" data-focussed-object="Selection" data-pages="Information" data-point-of-interests="Locations" data-result="" data-results="" data-tdom-locs="Locations" data-to-event="Go to Event" data-to-exhibitor="Go to exhibitor" id="i18n-tmpl" type="text/template"></script>
<!-- focusview -->
<script id="focus-view-tmpl" type="text/template">
<div class='focus-view'>
<h3 class='title'></h3>
<button aria-label='Close' class='close' type='button'>
<span aria-hidden='true'>×</span>
</button>
</div>
</script>
<!-- hud -->
<script id="hud-tmpl" type="text/template">
<div class='hud-content'>
<div aria-label='zoom' class='zoom-group btn-group' role='group'>
<button class='btn btn-secondary minus' title='Zoom out' type='button'>-</button>
<button class='btn btn-secondary autofocus' title='Autofocus selection' type='button'>
<div class='focusring'>
<div class='c-corner'></div>
<div class='c-corner'></div>
<div class='c-corner'></div>
<div class='c-corner'></div>
</div>
</button>
<button class='btn btn-secondary plus' title='Zoom in' type='button'>+</button>
</div>
</div>
<div class='hud-breadcrumb'>
<nav aria-label='breadcrumb'>
<ol class='breadcrumb'>
<li class='breadcrumb-item activity active'></li>
</ol>
</nav>
</div>
</script>
<!-- tableview -->
<script id="tableview-tmpl" type="text/template">
<div class='tableview'>
<div class='tableview-activity'></div>
<div class='tableview-header'></div>
<div class='tableview-sections'></div>
<div class='tableview-footer'></div>
</div>
</script>
<script id="tableview-section-collapse-tmpl" type="text/template">
<div class='tableview-section'>
<div class='tableview-section-header d-flex align-items-center'>
<span class='title'></span>
<button class='collapse-btn collapsed ml-auto'>›</button>
</div>
<div class='tableview-rows collapsed'></div>
</div>
</script>
<script id="tableview-section-tmpl" type="text/template">
<div class='tableview-section'>
<div class='tableview-section-header'></div>
<div class='tableview-rows'></div>
</div>
</script>
<script id="tableview-active-row-tmpl" type="text/template">
<div class='tableview-row'>
<a class='d-flex align-items-center action' href=''>
<img class='mr-2' height='30px' width='30px'>
<span class='title'></span>
<span class='right-detail ml-auto'></span>
</a>
</div>
</script>
<script id="tableview-row-tmpl" type="text/template">
<div class='tableview-row'></div>
</script>
<!-- special -->
<script id="tableview-selectbox-row-tmpl" type="text/template">
<div class='tableview-row'>
<div class='title'></div>
<div class='action-buttons'>
<span class='all-button'>
<input class='select-box' type='checkbox'>
</span>
<span>
<a class='focus-button' href='#'></a>
</span>
</div>
</div>
</script>
<!-- special -->
<script id="edit-controls" type="text/template">
<div class='edit-controls read-mode'>
<h3 class='list-title'></h3>
<div class='controls'>
<p>
<button class='btn btn-outline-primary btn-block createButton'>Create</button>
<div class='btn-group d-flex' role='group'>
<button class='w-100 btn btn-sm btn-outline-danger delete-tdomLocs-button'>Delete selected</button>
<button class='w-100 btn btn-sm btn-outline-danger save-tdomLocs-button'>Save all</button>
<button class='w-100 btn btn-sm btn-outline-danger transform-selected-button'>Apply remote origin</button>
</div>
</p>
<form>
<div class='form-group'>
<label>
<input checked class='snap-to-existing' type='checkbox'>
Snap to align existing objects
</label>
<label class='control-label'>Snap to grid:</label>
<input class='form-control tool-snap' type='text'>
</div>
</form>
</div>
</div>
</script>
<script id="tableview-selectall-sectionheader-tmpl" type="text/template">
<button class='btn btn-sm btn-outline-primary select-all-button'>Select all</button>
<span class='action-name'>Focus</span>
</script>
<!-- graph view -->
<script id="graph-view-tmpl" type="text/template">
<div class='card card-section hidden-mode'>
<h3 class='card-header'>Scene graph</h3>
<div class='card-body'>
<div class='graph-header'>
<button class='btn btn-sm btn-outline-primary createButton' type='button'>Create</button>
<div class='bumper'></div>
<span class='sec-header'>Secondary</span>
</div>
<div class='activity'></div>
<ol class='sortable-root'></ol>
</div>
</div>
</script>
<script id="graph-view-row-tmpl" type="text/template">
<li>
<div class='attributes'>
<div class='handle'></div>
<a class='focus-button content' href='' type=''>node name</a>
<input class='sec-select' type='checkbox'>
</div>
<ol></ol>
</li>
</script>
<!-- attributes-view -->
<script id="form-group-tmpl" type="text/template">
<div class='form-group row'>
<label class='col-form-label col-sm-4 control-label text-truncate'></label>
<div class='col-sm-8'>
<div class='input-group'>
<span class='form-placeholder value'></span>
<input class='form-control value prop' type='text'>
<div class='input-group-append'>
<span class='input-group-text unit'></span>
</div>
</div>
</div>
</div>
</script>
<script id="form-group-boolean-tmpl" type="text/template">
<div class='form-group row'>
<label class='col-form-label col-sm-4 control-label text-truncate'></label>
<div class='col-sm-8'>
<div class='input-group-prepend'>
<span class='form-placeholder value'></span>
</div>
<div class='checkbox'>
<label>
<input class='value' type='checkbox'>
</label>
</div>
</div>
</div>
</script>
<script id="form-group-fix-tmpl" type="text/template">
<div class='form-group row'>
<label class='col-form-label col-sm-4 control-label text-truncate'></label>
<div class='col-sm-8'>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='form-placeholder value'></span>
</div>
<input class='form-control value prop' readonly type='text'>
</div>
</div>
</div>
</script>
<script id="attributes-view-tmpl" type="text/template">
<div class='properties card card-section read-mode'>
<h3 class='card-header main-title'>Properties</h3>
<div class='card-body'>
<div class='editButtons'>
<button class='btn btn-outline-primary btn-block editButton'>Edit</button>
<div class='btn-group d-flex' role='group'>
<button class='w-100 btn btn-outline-primary cancel-button'>Cancel</button>
<button class='w-100 btn btn-outline-primary saveButton'>Save</button>
<button class='w-100 btn btn-outline-danger deleteButton'>Delete</button>
</div>
</div>
<form class='ig-sm' role='form'></form>
</div>
</div>
</script>
<!-- navigation view -->
<script id="navigation-view-tmpl" type="text/template">
<div class='card card-section'>
<h3 class='card-header'>Navigation nodes</h3>
<div class='card-body'>
<div class='controls'>
<div class='options'>
<form>
<div class='form-group tools-navigationNode'>
<label>NavigationNode Tool:</label>
<div class='btn-group btn-group-toggle d-flex' data-toggle='buttons' role='group'>
<label class='btn btn-outline-primary disabled w-100'>
<input autocomplete='off' class='tool-select' name='options' type='radio'>
<div class='small'>select</div>
</label>
<label class='btn btn-outline-primary active w-100'>
<input autocomplete='off' checked class='tool-create' name='options' type='radio'>
<div class='small'>create</div>
</label>
<label class='btn btn-outline-primary w-100'>
<input autocomplete='off' class='tool-delete' name='options' type='radio'>
<div class='small'>delete</div>
</label>
</div>
</div>
<div class='form-group tools-connection'>
<label>Connection Tool:</label>
<div class='btn-group btn-group-toggle d-flex' data-toggle='buttons' role='group'>
<label class='btn btn-outline-primary w-100'>
<input autocomplete='off' class='tool-none' name='options' type='radio'>
<div class='small'>none</div>
</label>
<label class='btn btn-outline-primary active w-100'>
<input autocomplete='off' checked class='tool-connect' name='options' type='radio'>
<div class='small'>connect</div>
</label>
<label class='btn btn-outline-primary w-100'>
<input autocomplete='off' class='tool-un-connect' name='options' type='radio'>
<div class='small'>(un)connect</div>
</label>
</div>
</div>
<div class='form-group'>
<label>
<input checked class='snap-to-existing' type='checkbox'>
Snap to align existing objects
</label>
<label class='control-label'>Snap to grid:</label>
<input class='form-control tool-snap' type='text'>
</div>
<div class='form-group'>
<label>
<input checked class='save-on-unfocus' type='checkbox'>
Save on unfocus
</label>
</div>
</form>
</div>
</div>
</div>
</div>
</script>
<div class='scene-engine'>
<section id='toolbar'>
<!-- Nav tabs -->
<ul class='nav nav-pills'>
<li class='nav-item'><a class='nav-link' data-toggle='tab' href='#visitor-tab'>Visitor View</a></li>
<li class='nav-item'><a class='nav-link' data-toggle='tab' href='#map-tab'>Browse</a></li>
<li class='nav-item'><a class='nav-link' data-toggle='tab' href='#scene-tab'>Scene Editor</a></li>
<li class='nav-item'><a class='nav-link' data-toggle='tab' href='#tdomlocs-tab'>TdomLoc Editor</a></li>
<li class='nav-item'><a class='nav-link' data-toggle='tab' href='#navigation-tab'>Navigation Editor</a></li>
<li class='nav-item'><a class='nav-link' data-toggle='tab' href='#beacon-tab'>Beacon Editor</a></li>
</ul>
</section>
<nav id='left-pane'>
<div id='pages'></div>
<div id='scenegraph'></div>
<div id='selection'></div>
</nav>
<section data-locale='de' data-project-id='hannovermesse' data-host='https://www.insideguidance.com' id='map'>
<div class='infobox'>
</div>
</section>
<section id='right-pane'>
<div id='exhibitors'></div>
<div id='events'>
</div> <div id='sceneNode-attributes'></div> <div id='tdomLoc-attributes'></div> <div id='tdomLoc-details'></div> <div id='navigationNode-attributes'></div> <div id='beacon-attributes'></div> <div id='page-attributes'></div> <div id='pois'></div> <div id='navigationNodes'></div> <div id='tdomLocs'></div> <div id='beacons'></div> </section>
</div>
3. Pass configuration data to the engine
Please mind the data attributes on the #tdom-map element.
data-project-id should match the INSIDE project identifier as found in the main url (insideguidance.com/PROJECT_ID)
data-locale should contain an appropriate language code (ISO-639-1, e.g. de, en, fr)
data-host is used as a base url for api requests and should match the inside url: https://www.insideguidance.com
TODO - Additional data attribute for focussing specific content:
data-focus-external-entity should be the entity ('exhibitor', 'event') type to focus
data-focus-external-id should be the object id of as given in the data export of the object to focus
4. Localization
Pass localized text for the current language in a script tag with the id "i18n-tmpl".
Text keys should be prefixed with "data-".
Example:
<script data-result="Ergebnis" data-results="Ergebnisse" id="i18n-tmpl" type="text/template"></script>