Web interface tutorial - Revision history

Frank@tygron.nl at 09:53, 1 March 2023

2023-03-01T09:53:40Z

← Older revision		Revision as of 09:53, 1 March 2023
Line 23:		Line 23:
	The first thing you will notice is that the web interface offers no editing tools. It is a parallel for the [[viewer ]]interface only, meaning that end-users will only be able to interact with the session they are currently in. The web interface is not used for editing project data in the same manner as the editor.		The first thing you will notice is that the web interface offers no editing tools. It is a parallel for the [[viewer ]]interface only, meaning that end-users will only be able to interact with the session they are currently in. The web interface is not used for editing project data in the same manner as the editor.

	The second thing is that the web interface matches the [[viewer ~~interface~~]] in some areas. There is a top bar which displays the name of the current stakeholder, and the individual indicators in the project which are visible to the stakeholder. (In the example image, no indicators are present in the project yet, so no indicators are present in the web interface either).		The second thing is that the web interface matches the [[viewer ]]interface in some areas. There is a top bar which displays the name of the current stakeholder, and the individual indicators in the project which are visible to the stakeholder. (In the example image, no indicators are present in the project yet, so no indicators are present in the web interface either).
	[[File:WebInterface-display-2Dmap-opened-topbar.jpg\|350px\|frame\|center\|The web interface top bar.]]		[[File:WebInterface-display-2Dmap-opened-topbar.jpg\|350px\|frame\|center\|The web interface top bar.]]

Frank@tygron.nl at 09:31, 21 February 2023

2023-02-21T09:31:48Z

← Older revision		Revision as of 09:31, 21 February 2023
Line 29:		Line 29:
	[[File:WebInterface-display-2Dmap-opened-overlays.jpg\|350px\|frame\|center\|The web interface overlays menu.]]		[[File:WebInterface-display-2Dmap-opened-overlays.jpg\|350px\|frame\|center\|The web interface overlays menu.]]

	The third thing is that the web interface does not feature any [[~~action menu~~]]s. For interactions based on the ~~action menus~~, such as drawing locations for new [[building]]s or performing [[terrain]] alterations, the {{software\|client}} is required.{{page_break}}		The third thing is that the web interface does not feature any [[Action Menu]]s. For interactions based on the Action Menus, such as drawing locations for new [[building]]s or performing [[terrain]] alterations, the {{software\|client}} is required.{{page_break}}

	===Changes in (project) data===		===Changes in (project) data===

Frank@tygron.nl at 13:36, 20 February 2023

2023-02-20T13:36:12Z

Frank@tygron.nl: /* Custom panels */

2023-01-30T12:58:15Z

Custom panels

← Older revision		Revision as of 12:58, 30 January 2023
Line 136:		Line 136:

	==Custom panels==		==Custom panels==
	The web settings offer facility to add an additional panel to the web interface. Naively, this allows you to add a (constantly visible) panel to the web interface, which can provide a user with additional and/or constantly visible information, and one or more options to interact with the ~~world~~. However, such a panel can also house a more fully developed web application, complete with Javascript interaction and complex styling.		The web settings offer facility to add an additional panel to the web interface. Naively, this allows you to add a (constantly visible) panel to the web interface, which can provide a user with additional and/or constantly visible information, and one or more options to interact with the [[project]]. However, such a panel can also house a more fully developed web application, complete with Javascript interaction and complex styling.

	Add a text panel to the project. Set the title of the text panel to "My first panel" and the contents of the panel to:		Add a text panel to the project. Set the title of the text panel to "My first panel" and the contents of the panel to:

Frank@tygron.nl: /* Security and access */

2023-01-30T12:45:24Z

Security and access

← Older revision		Revision as of 12:45, 30 January 2023
Line 360:		Line 360:
	\| learned=how to access and modify the web interface to provide the data and interaction fitting for your use-case		\| learned=how to access and modify the web interface to provide the data and interaction fitting for your use-case
	}}		}}
			[[Category:Interface]]

Frank@tygron.nl at 12:31, 30 January 2023

2023-01-30T12:31:43Z

← Older revision		Revision as of 12:31, 30 January 2023
Line 11:		Line 11:
	}}		}}
	==Introduction to the Web interface==		==Introduction to the Web interface==
	The [[web interface]] is a web-based interface with which a [[project]] in the {{software}} can be presented. It is a web page, built up using HTML, CSS, and JavaScript, generated and served by the {{software}}. By default, data presented by the web interface includes the [[~~3D world~~]] ~~(although flattended into a 2D map)~~, [[indicator]]s present in the project, and the available [[overlay]]s. Each [[stakeholder]] in a project has their own unique web interface available, similar to how they have their own perspectives in the [[session interface\|3D client]].{{page_break}}		The [[web interface]] is a web-based interface with which a [[project]] in the {{software}} can be presented. It is a web page, built up using HTML, CSS, and JavaScript, generated and served by the {{software}}. By default, data presented by the web interface includes the a 2D map visualization of the [[project]], [[indicator]]s present in the project, and the available [[overlay]]s. Each [[stakeholder]] in a project has their own unique web interface available, similar to how they have their own perspectives in the [[session interface\|3D client]].{{page_break}}

	==Accessing the Web interface (from the editor)==		==Accessing the Web interface (from the editor)==

Frank@tygron.nl at 12:30, 30 January 2023

2023-01-30T12:30:49Z

← Older revision		Revision as of 12:30, 30 January 2023
Line 56:		Line 56:

	===Changes in session data===		===Changes in session data===
	Make sure the project has a livability indicator, a livability overlay and a text [[panel]] with a popup in the 3D ~~world~~.		Make sure the project has a livability indicator, a livability overlay and a text [[panel]] with a popup in the [[3D Visualization]].
	[[File:WebInterface-display-2Dmap-setup.jpg\|350px\|frame\|center\|The web interface setup for this section.]]		[[File:WebInterface-display-2Dmap-setup.jpg\|350px\|frame\|center\|The web interface setup for this section.]]

Maxim@tygron.com at 15:14, 7 October 2022

2022-10-07T15:14:01Z

← Older revision		Revision as of 15:14, 7 October 2022
Line 29:		Line 29:
	[[File:WebInterface-display-2Dmap-opened-overlays.jpg\|350px\|frame\|center\|The web interface overlays menu.]]		[[File:WebInterface-display-2Dmap-opened-overlays.jpg\|350px\|frame\|center\|The web interface overlays menu.]]

	The third thing is that the web interface does not feature any [[action menu]]s, even though the stakeholder does have them in the session interface in the 3D client. For interactions based on the action menus, such as drawing locations for new [[~~construction~~]]s or performing [[terrain]] alterations, the 3D client is required.{{page_break}}		The third thing is that the web interface does not feature any [[action menu]]s, even though the stakeholder does have them in the session interface in the 3D client. For interactions based on the action menus, such as drawing locations for new [[building]]s or performing [[terrain]] alterations, the 3D client is required.{{page_break}}

	===Changes in (project) data===		===Changes in (project) data===

Maxim@tygron.com at 15:59, 5 October 2022

2022-10-05T15:59:07Z

← Older revision		Revision as of 15:59, 5 October 2022
Line 1:		Line 1:
	~~{{learned\|what the web interface is\|what capabilities it offers by default\|what settings can be adjusted\|how to modify the web interface}}~~
	{{tutorial prerequisites		{{tutorial prerequisites
	\|tutorial=This tutorial relies on base knowledge about the editor interface, the creation of panels, and the ability to script in HTML, CSS, and JavaScript.		\|tutorial=This tutorial relies on base knowledge about the editor interface, the creation of panels, and the ability to script in HTML, CSS, and JavaScript.

Rudolf@tygron.nl at 15:03, 13 May 2019

2019-05-13T15:03:29Z

← Older revision		Revision as of 15:03, 13 May 2019
Line 16:		Line 16:
	==Accessing the Web interface (from the editor)==		==Accessing the Web interface (from the editor)==
	To access the Web interface from the editor, go to:		To access the Web interface from the editor, go to:
	{{Editor ~~ribbon~~\|~~header=Tools\|bar=Web Interface\|dropdown=Show 2D Map~~}}		{{Editor location\|web interface map}}
	[[File:WebInterface-editor-dropdown-2Dmap.jpg\|350px\|frame\|center\|Opening the web interface.]]		[[File:WebInterface-editor-dropdown-2Dmap.jpg\|350px\|frame\|center\|Opening the web interface.]]
	This will open the default browser on your computer, directed at the link {{url\|link=1\|protocol=1\|append=/web/map.html?token=TOKEN}} (in which "TOKEN" is replaced with a proper authentication token.) The web interface opened will be the web interface for the stakeholder currently selected in the editor.		This will open the default browser on your computer, directed at the link {{url\|link=1\|protocol=1\|append=/web/map.html?token=TOKEN}} (in which "TOKEN" is replaced with a proper authentication token.) The web interface opened will be the web interface for the stakeholder currently selected in the editor.
Line 36:		Line 36:

	In the editor, edit the stakeholder you have currently selected:		In the editor, edit the stakeholder you have currently selected:
	{{Editor ~~ribbon~~\|~~header=Stakeholders~~\|~~bar=Stakeholders\|left panel=~~Your current ~~stakeholder~~}}		{{Editor location\|stakeholders\|Your current Stakeholder}}
	Edit both the (full) Name and the Short name of the stakeholder.		Edit both the (full) Name and the Short name of the stakeholder.
	[[File:WebInterface-editor-stakeholder-name.jpg\|350px\|frame\|center\|Changing the name of the current stakeholder in the editor.]]		[[File:WebInterface-editor-stakeholder-name.jpg\|350px\|frame\|center\|Changing the name of the current stakeholder in the editor.]]
Line 88:		Line 88:
	==Web settings==		==Web settings==
	It's possible to configure the web interface with a number of settings, allowing for complex modifications of its appearance and behavior. To access the web settings, go to:		It's possible to configure the web interface with a number of settings, allowing for complex modifications of its appearance and behavior. To access the web settings, go to:
	{{Editor ~~ribbon~~\|~~header=Tools\|bar=Web Interface\|hover=Edit Web Settings~~}}		{{Editor location\|web settings}}
	[[File:WebInterface-editor-websettings.jpg\|350px\|frame\|center\|The web settings for the web interface.]]		[[File:WebInterface-editor-websettings.jpg\|350px\|frame\|center\|The web settings for the web interface.]]
	Generally, each change in web settings will only affect a web interface when the web interface is refreshed.{{page_break}}		Generally, each change in web settings will only affect a web interface when the web interface is refreshed.{{page_break}}
Line 222:		Line 222:

	To open the frontpage from the editor, go to:		To open the frontpage from the editor, go to:
	{{Editor ~~ribbon~~\|~~header=Tools\|bar=Web Interface\|dropdown=Show Frontpage~~}}		{{Editor location\|web interface frontpage}}
	[[File:WebInterface-editor-dropdown-frontpage.jpg\|350px\|frame\|center\|Opening the Frontpage.]]{{page_break}}		[[File:WebInterface-editor-dropdown-frontpage.jpg\|350px\|frame\|center\|Opening the Frontpage.]]{{page_break}}
	You will now be presented with a mostly empty page, containing the text "Welcome to my project." The title of the page is the title of the panel: "My frontpage panel".		You will now be presented with a mostly empty page, containing the text "Welcome to my project." The title of the page is the title of the panel: "My frontpage panel".
Line 287:		Line 287:

	Using these web tokens directly is not recommended, as authentication is already handled by the {{software}}. However, it may sometimes be necessary to (re)generate the web tokens in a project. To modify the web tokens currently linked to the stakeholders, go to:		Using these web tokens directly is not recommended, as authentication is already handled by the {{software}}. However, it may sometimes be necessary to (re)generate the web tokens in a project. To modify the web tokens currently linked to the stakeholders, go to:
	{{Editor ~~ribbon~~\|~~header=Tools\|bar=Web Interface\|dropdown=Edit~~ Web Tokens}}		{{Editor location\|Web Tokens}}
	[[File:WebInterface-editor-dropdown-webtokens.jpg\|350px\|frame\|center\|Opening the panel for editing Web Tokens.]]		[[File:WebInterface-editor-dropdown-webtokens.jpg\|350px\|frame\|center\|Opening the panel for editing Web Tokens.]]
	This opens the Web Tokens panel.		This opens the Web Tokens panel.

← Older revision		Revision as of 13:36, 20 February 2023
Line 11:		Line 11:
	}}		}}
	==Introduction to the Web interface==		==Introduction to the Web interface==
	The [[web interface]] is a web-based interface with which a [[project]] in the {{software}} can be presented. It is a web page, built up using HTML, CSS, and JavaScript, generated and served by the {{software}}. By default, data presented by the web interface includes the a 2D map visualization of the [[project]], [[indicator]]s present in the project, and the available [[overlay]]s. Each [[stakeholder]] in a project has their own unique web interface available, similar to how they have their own perspectives in the [[~~session interface~~\|3D client]].{{page_break}}		The [[web interface]] is a web-based interface with which a [[project]] in the {{software}} can be presented. It is a web page, built up using HTML, CSS, and JavaScript, generated and served by the {{software}}. By default, data presented by the web interface includes the a 2D map visualization of the [[project]], [[indicator]]s present in the project, and the available [[overlay]]s. Each [[stakeholder]] in a project has their own unique web interface available, similar to how they have their own perspectives in the [[{{software\|client}}]].{{page_break}}

	==Accessing the Web interface (from the editor)==		==Accessing the Web interface (from the editor)==
Line 20:		Line 20:
	[[File:WebInterface-display-2Dmap-opened.jpg\|350px\|frame\|center\|The web interface in Google Chrome.]]{{page_break}}		[[File:WebInterface-display-2Dmap-opened.jpg\|350px\|frame\|center\|The web interface in Google Chrome.]]{{page_break}}

	===Web interface compared to the ~~Session interface~~===		===Web interface compared to the {{software\|client}}===
	The first thing you will notice is that the web interface offers no editing tools. It is a parallel for the ~~session~~ interface only, meaning that end-users will only be able to interact with the session they are currently in. The web interface is not used for editing project data in the same manner as the editor.		The first thing you will notice is that the web interface offers no editing tools. It is a parallel for the [[viewer ]]interface only, meaning that end-users will only be able to interact with the session they are currently in. The web interface is not used for editing project data in the same manner as the editor.

	The second thing is that the web interface matches the ~~session~~ interface in ~~most general~~ areas. There is a top bar which displays the name of the current stakeholder, and the individual indicators in the project which are visible to the stakeholder. (In the example image, no indicators are present in the project yet, so no indicators are present in the web interface either).		The second thing is that the web interface matches the [[viewer interface]] in some areas. There is a top bar which displays the name of the current stakeholder, and the individual indicators in the project which are visible to the stakeholder. (In the example image, no indicators are present in the project yet, so no indicators are present in the web interface either).
	[[File:WebInterface-display-2Dmap-opened-topbar.jpg\|350px\|frame\|center\|The web interface top bar.]]		[[File:WebInterface-display-2Dmap-opened-topbar.jpg\|350px\|frame\|center\|The web interface top bar.]]

Line 29:		Line 29:
	[[File:WebInterface-display-2Dmap-opened-overlays.jpg\|350px\|frame\|center\|The web interface overlays menu.]]		[[File:WebInterface-display-2Dmap-opened-overlays.jpg\|350px\|frame\|center\|The web interface overlays menu.]]

	The third thing is that the web interface does not feature any [[action menu]]s~~, even though the stakeholder does have them in the session interface in the 3D client~~. For interactions based on the action menus, such as drawing locations for new [[building]]s or performing [[terrain]] alterations, the 3D client is required.{{page_break}}		The third thing is that the web interface does not feature any [[action menu]]s. For interactions based on the action menus, such as drawing locations for new [[building]]s or performing [[terrain]] alterations, the {{software\|client}} is required.{{page_break}}

	===Changes in (project) data===		===Changes in (project) data===
	The ~~session~~ interface is made to respond to most changes in the project data or in the running session, but explicitly not all changes. A rule of thumb is that data which may change during a proper [[session]] are updated, but data which is defined at editing-time and unchanging for the duration of a session or testrun do not. This is illustrated as follows.		The interface in the {{software\|client}} is made to respond to most changes in the project data or in the running session, but explicitly not all changes. A rule of thumb is that data which may change during a proper [[session]] are updated, but data which is defined at editing-time and unchanging for the duration of a session or testrun do not. This is illustrated as follows.

	In the editor, edit the stakeholder you have currently selected:		In the editor, edit the [[stakeholder]] you have currently selected:
	{{Editor location\|stakeholders\|Your current Stakeholder}}		{{Editor location\|stakeholders\|Your current Stakeholder}}
	Edit both the (full) Name and the Short name of the stakeholder.		Edit both the (full) Name and the Short name of the stakeholder.
	[[File:WebInterface-editor-stakeholder-name.jpg\|350px\|frame\|center\|Changing the name of the current stakeholder in the editor.]]		[[File:WebInterface-editor-stakeholder-name.jpg\|350px\|frame\|center\|Changing the name of the current stakeholder in the editor.]]

	Notice that in the 3D client, the name of the stakeholder is updated. But that in the ~~2D client~~, the name is unchanged. This is because although readily changed in the editor, during a session the name of a stakeholder never changes.		Notice that in the {{software\|client}}, the name of the stakeholder is updated. But that in the Web interface, the name is unchanged. This is because although readily changed in the editor, during a session the name of a stakeholder never changes.
	[[File:WebInterface-display-stakeholder-name.jpg\|350px\|frame\|center\|The difference in stakeholder name. Left: the name in the 3D interface is changed. Right: the name in the 2D interface is unchanged.]]		[[File:WebInterface-display-stakeholder-name.jpg\|350px\|frame\|center\|The difference in stakeholder name. Left: the name in the 3D interface is changed. Right: the name in the web interface is unchanged.]]

	Refreshing the page will cause the name in the web interface to be updated.		Refreshing the page will cause the name in the web interface to be updated.
Line 73:		Line 73:
	Notice that the change does not automatically propagate to the panel contents. However, when you click on the popup again, the panel contents will be refreshed and you will see the change you have made. Close the panel.		Notice that the change does not automatically propagate to the panel contents. However, when you click on the popup again, the panel contents will be refreshed and you will see the change you have made. Close the panel.

	Select the livability overlay in the web interface. You will see the livability overlay appear in the web interface, in the same manner as you would expect in the 3D client.		Select the livability overlay in the web interface. You will see the livability overlay appear in the web interface, in the same manner as you would expect in the {{software\|client}}.
	[[File:WebInterface-display-overlay.jpg\|350px\|frame\|center\|The livability overlay in the web interface.]]		[[File:WebInterface-display-overlay.jpg\|350px\|frame\|center\|The livability overlay in the web interface.]]

Line 114:		Line 114:
	By adding the above line to the CSS, the styling of the entire web application has been modified. Specifically, every element of the interface of the class "ui" now has a white, slightly transparent background, as opposed to the slightly transparent black background color it was by default.		By adding the above line to the CSS, the styling of the entire web application has been modified. Specifically, every element of the interface of the class "ui" now has a white, slightly transparent background, as opposed to the slightly transparent black background color it was by default.

	If is important to note that while this styling has changed the web interface's appearance, the ~~session~~ interface in the 3D client is unchanged.{{page_break}}		If is important to note that while this styling has changed the web interface's appearance, the interface in the {{software\|client}} is unchanged.{{page_break}}

	Add the following lines to the end of the CSS file:		Add the following lines to the end of the CSS file:
Line 128:		Line 128:
	[[File:WebInterface-css3.jpg\|350px\|frame\|center\|The changed styling in the web interface.]]		[[File:WebInterface-css3.jpg\|350px\|frame\|center\|The changed styling in the web interface.]]

	Add an indicator to the project, and open the indicator in the ~~session~~ interface in the 3D client. You will see that the explanation section of the indicator will now have a red background, and is half-transparent.		Add an indicator to the project, and open the indicator in the [[viewer ]]interface in the {{software\|client}}. You will see that the explanation section of the indicator will now have a red background, and is half-transparent.
	[[File:WebInterface-css4.jpg\|350px\|frame\|center\|The changed styling of an indicator in the 3D client.]]		[[File:WebInterface-css4.jpg\|350px\|frame\|center\|The changed styling of an indicator in the {{software\|client}}.]]

	This demonstrates an important fact, namely that interface elements such as indicators and panels, which can have their contents defined as HTML, are actually also just web pages, the styling of which matches the styling of the web interface. The uploaded CSS file affects those contents too. However, the "regular" interface elements in the 3D client are unaffected.		This demonstrates an important fact, namely that interface elements such as indicators and panels, which can have their contents defined as HTML, are actually also just web pages, the styling of which matches the styling of the web interface. The uploaded CSS file affects those contents too. However, the "regular" interface elements in the {{software\|client}} are unaffected.

	Remove the added lines from the CSS file and upload it again to restore the default styling.{{page_break}}		Remove the added lines from the CSS file and upload it again to restore the default styling.{{page_break}}