Panels (interaction) tutorial: Difference between revisions
mNo edit summary |
No edit summary |
||
(7 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{tutorial prerequisites | {{tutorial prerequisites | ||
|tutorial=This tutorial relies on base knowledge about panels. | |tutorial=This tutorial relies on base knowledge about panels. | ||
Line 5: | Line 4: | ||
|Start your project. This can be a pre-existing project, or a newly created project. | |Start your project. This can be a pre-existing project, or a newly created project. | ||
}} | }} | ||
==Answers== | |||
Panels can be accompanied by predefined “Answers”. When the end-user sees the panel, the answers are presented as buttons which the user can click. The buttons will fire events, and close the panel. | |||
Add a new text panel to the project. Name the panel “Answer Example”. | |||
As content for the text panel, set “Add attribute to neighborhood?” | |||
While the “Answer Example” panel is selected, click “Add Answer” at the bottom of the right panel. | |||
Change the name of the answer to “Yes”. | |||
[[File:panels-editor-added-answers.jpg|650px|frame|center|An answer added to the panel, and renamed to "Yes".]] | |||
Select the “Yes” answer in the left panel. In the right panel, click on “Add Server Event”. A new “NO_DEF” event will be created. Select it. | |||
[[File:panels-editor-edit-answer-event.jpg|650px|frame|center|The "NO_DEF" event has been added.]] | |||
At the bottom of the editor, a panel will appear where a specific event can be selected. | |||
{{page_break}} | |||
Select the event “NEIGHBORHOOD_SET_ATTRIBUTE”. | |||
Select one of your neighborhoods. Remember which neighborhood will be adjusted. | |||
Enter as attribute name “EXAMPLE_ATTRIBUTE”. | |||
Enter as value “123456789”. | |||
[[File:panels-editor-edit-eventtype.jpg|650px|frame|center|The values for the event have been entered.]] | |||
Click on “Commit” to save these properties for the event. | |||
Place the panel in the [[project area]] so that it can be accessed by end-users. | |||
Inspect the attributes of the neighborhood you selected for the event. Take note of the fact that “EXAMPLE_ATTRIBUTE” is not yet present as attribute for the neighborhood. | |||
Click on the popup in the [[3D Visualization]], and click on the answer “Yes”. A testrun will start. | |||
Inspect the attributes of the neighborhood again. Take note of the fact that “EXAMPLE_ATTRIBUTE” is now present as attribute for the neighborhood. | |||
Answers added to Template Excel panels will also make instances of those panels have those answers. When the answers have events bound to them, and the events have a parameter of the same spatial type as the type the Template Excel panel is applied on, those parameters of events are changed automatically to refer to the spatial element the instance refers to. | |||
For example, if the answer defined above, which refers to a specific neighborhood to set an attribute for, is attached to a Template Excel panel which is applied on neighborhoods, the instance for the first neighborhood will have its event refer to the first neighborhood, the instance for the second neighborhood will have its event refer to the second neighborhood, and so on. | |||
{{Tutorial completed | {{Tutorial completed | ||
| learned=how to add buttons with events to panels | | learned=how to add buttons with events to panels | ||
}} | }} |
Latest revision as of 15:46, 30 January 2023
Prerequisites
The following prerequisites should be met before starting this tutorial:
- This tutorial relies on base knowledge about panels. If you have not yet followed the tutorials related to those subjects please do so first.
- This tutorial can be followed with any project of any arbitrary location. Recommended is to create or load a project in the editor with at least one panel accessible to a playable stakeholder.
Preparations
Take the following steps as preparation for following this tutorial:
- Start your project. This can be a pre-existing project, or a newly created project.
Answers
Panels can be accompanied by predefined “Answers”. When the end-user sees the panel, the answers are presented as buttons which the user can click. The buttons will fire events, and close the panel.
Add a new text panel to the project. Name the panel “Answer Example”.
As content for the text panel, set “Add attribute to neighborhood?”
While the “Answer Example” panel is selected, click “Add Answer” at the bottom of the right panel.
Change the name of the answer to “Yes”.
Select the “Yes” answer in the left panel. In the right panel, click on “Add Server Event”. A new “NO_DEF” event will be created. Select it.
At the bottom of the editor, a panel will appear where a specific event can be selected.
Select the event “NEIGHBORHOOD_SET_ATTRIBUTE”.
Select one of your neighborhoods. Remember which neighborhood will be adjusted.
Enter as attribute name “EXAMPLE_ATTRIBUTE”.
Enter as value “123456789”.
Click on “Commit” to save these properties for the event.
Place the panel in the project area so that it can be accessed by end-users.
Inspect the attributes of the neighborhood you selected for the event. Take note of the fact that “EXAMPLE_ATTRIBUTE” is not yet present as attribute for the neighborhood.
Click on the popup in the 3D Visualization, and click on the answer “Yes”. A testrun will start.
Inspect the attributes of the neighborhood again. Take note of the fact that “EXAMPLE_ATTRIBUTE” is now present as attribute for the neighborhood.
Answers added to Template Excel panels will also make instances of those panels have those answers. When the answers have events bound to them, and the events have a parameter of the same spatial type as the type the Template Excel panel is applied on, those parameters of events are changed automatically to refer to the spatial element the instance refers to.
For example, if the answer defined above, which refers to a specific neighborhood to set an attribute for, is attached to a Template Excel panel which is applied on neighborhoods, the instance for the first neighborhood will have its event refer to the first neighborhood, the instance for the second neighborhood will have its event refer to the second neighborhood, and so on.
Tutorial completed
Congratulations. You have now completed this tutorial. In it, you have learned how to add buttons with events to panels.