Web Interface

This article is a stub.

Web interface for Tygron Engine projects

Besides the regular user interface provided by the Tygron Engine, there is also web interface available for the participants in a session. This interface can be accessed using most modern web browsers. It is completely composed of HTML, CSS, and javascript, functioning like a common web page. The CSS file can be changed, and HTML and javascript can be injected into the interface, as part of a panel which can be selected via the editor. This allows the web interface to be fully customized in both function and appearance.

The web interface can be found at the url https://preview.tygron.com/web/. A correct session token must be provided as a parameter.

Limitations

The web interface does not function as a perfect replacement for the regular, 3D user interface. Contrary to the regular user interface, the 3D world is displayed in 2D. It's not possible to draw selections in the 2D map, which means that users will be unable to take conventional actions such as placing constructions or purchasing land. Visuals, such as cinematics, special effects, weather effects, and visible traffic are not yet available for the 2D map. The web interface also remains available while a (multi-user) session is paused.

Web interface structure

The web interface consists of many parts, most of which can be configured to suit many styles and use-cases.

Map

The map of the web interface is the most important part of the web interface. The map is only displayed in 2D, rather than 3D in the regular client. Despite this, it can still be referred to as the 3D World for most purposes. It is possible to move around across the map by clicking and dragging. It's also posible to zoom in and out by using the scrollwheel.

By default, the map will display the satellite map, which is also seen in the 3D interface. Overlayed on top are the polygons indicating the locations of water, roads, and constructions such as buildings.

Session Interface

The session interface is, in principle, the same as the regular user interface. The top bar can be found at the top of the screen, and the map panel on the right of the screen. However, there is no action menu available.

When a popup appears in the world, for example because of a stakeholder taking an action, or a panel being/becoming visible, the popup will be visible in the 2D map as well, and can be interacted with. Clicking the popup will open the related popup with the same contents and options are would be available in the 3D interface. Attention is not explicitly drawn to any popups in the web interface.

Custom HTML

It is possible to add custom content to the web interface as well. A panel can be selected to inject directly into the web interface, in a separate <div> element with both class and id set to "custom". If the content is HTML, and it contains <script> elements with javascript, the javascript is executed as the content is loaded.

Frontpage

It is also possible to configure a custom frontpage for the web interface. Any panel in the project can be selected as the frontpage. When a user is directed to the web interface at https://preview.tygron.com/web/, they will be presented not with the 2D map, but with the defined frontpage content instead. This allows a project creator to add a splashscreen or login page to the web interface.

The 2D map can still be accessed via its direct link: https://preview.tygron.com/web/map.html.

Assets

Besides the content which is directly available, there are also a number of additional assets which can be uploaded to the project. These assets can then be referenced by content in the web interface to enrich the presentation of the content in the web interface.

CSS

Each project has a default CSS file available, which is used to define how the HTML of the web interface is displayed. This CSS file can be downloaded from a project while in the editor. New or modified CSS files can also be uploaded to the project. In principle, only one CSS file can be uploaded at a time. Only one CSS file is provided in the web interface at a time.

It is important to note that the CSS file is only provided to the web interface, and not to the regular user interface. This means that if the CSS file affects the styling of the contents of panels or indicators, there will be styling differences between the regular user interface and the web interface.

Images

Each project can have images uploaded to it. When uploaded, each image will have their own url. That url can be used in indicators and panels to refer to those images.

Authentication

This article describes a technical aspect, and is mainly for advanced users.

To connect to a session via the web interface, an authentication token must be provided. The authentication token consists of 2 parts: the session token and the web token. The session token identifies the session. The web token identifies the rights or perspective the user has therein. The authentication token is always exactly 32 characters long.

Sessiontokens

Each session has a unique session token, 8 characters long. This token uniquely identifies a session. Each time a project is started in the editor, that editing session will have a new session token. When a project is loaded as a single or multi user session, those sessions also each have a unique session token. When there are multiple teams, each team is a separate session (even when managed by a single facilitator application), and as such each have their own unique token.

When a single or multi user session is saved, its session token is saved as well. When (re)loading that saved state, the session will have the same session token.

Note: When there is already a session running with the same session token, the newly loaded session will have a new, random session token. This may occur when a save state is loaded multiple times in the same moment.

Webtokens

Each stakeholder has their own webtoken, which is part of the authentication token. This token indicates the rights or perspective the user has in the session. By default, the stakeholder webtokens are 24 characters long, and can be made up of upper- and lowercase letters, and numbers. It's possible to generate new webtokens for all stakeholders. When generating new webtokens, it is also possible to generate shorter webtokens. The complete authentication token will be padded with 0's between the session token and the web token.

Webtokens for stakeholders are randomly generated when the stakeholders are first added to a project, and do not change when a project is re-opened, loaded as a different type of session, or copied. After they are first created, webtokens are only generated anew when that option is selected in the editor.