Web interface tutorial - Revision history

Frank@tygron.nl at 07:49, 9 June 2026

2026-06-09T07:49:21Z

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

2026-06-05T14:28:58Z

Security and access

← Older revision		Revision as of 14:28, 5 June 2026
Line 334:		Line 334:
	Add the following lines to the output of the panel currently set as custom panel:		Add the following lines to the output of the panel currently set as custom panel:
	{{code\|1=		{{code\|1=
	<input type="submit" onclick="~~$.ajax({~~		<input type='submit" onclick="
	~~url: '$SLOT/event/LogicEventType/NEIGHBORHOOD_SET_ATTRIBUTE/?~~token=$TOKEN',		let token='$TOKEN';
	~~method~~: 'POST',		let options = {
	~~data~~: {0:'0', 1:'COLOR', 2:'~~-16777216~~'}		method: "POST",
	}).then(~~function(){~~showOverlay(activeOverlayID,true);});" value="Change neighborhood color">}}		headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
			body: JSON.stringify(['$ID', 'COLOR', '255 0 0'])
			};
			fetch('/event/logiceventtype/neighborhod_set_attribute/?', options)
			.then(response => showOverlay(activeOverlayID,true));
			" value="Change neighborhood color">}}

	In the web interface, the custom panel will now have updated to feature a "Change neighborhood color" button. It will set the color of one of the neighborhoods to solid black.{{page_break}}		In the web interface, the custom panel will now have updated to feature a "Change neighborhood color" button. It will set the color of one of the neighborhoods to solid black.{{page_break}}

Rudolf@tygron.nl at 07:55, 4 May 2026

2026-05-04T07:55:51Z

← Older revision		Revision as of 07:55, 4 May 2026
Line 26:		Line 26:
	[[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.]]

	There is also a panel on the right of the screen, with familiar overlay buttons~~, of overlays visible to stakeholders~~.		There is also a panel on the right of the screen, with familiar overlay buttons.
	[[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.]]

Frank@tygron.nl: /* Web interface compared to the {{software|client}} */

2026-05-01T08:07:47Z

Web interface compared to the {{software|client}}

← Older revision		Revision as of 08:07, 1 May 2026
Line 26:		Line 26:
	[[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.]]

	There is also a panel on the right of the screen, with familiar overlay buttons~~. These too are the~~ overlays ~~available~~ to ~~the currently selected stakeholder~~.		There is also a panel on the right of the screen, with familiar overlay buttons, of overlays visible to stakeholders.
	[[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.]]

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)==

← Older revision		Revision as of 07:49, 9 June 2026
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 [[{{software\|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 {{software\|client}}===		===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 [[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.

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===
	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.		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:
Line 39:		Line 39:
	[[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 {{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.		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 web 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.]]

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 {{software\|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 interface in the {{software\|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 [[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.		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 {{software\|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 {{software\|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}}

← 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}}