|
|
| (104 intermediate revisions by 7 users not shown) |
| Line 1: |
Line 1: |
| {{learned|how the user interface relates to the Tygron Engine|what the user interface looks like|what parts of the user interface exist|how to use the user interface}}
| | The '''Viewer''' is the main interface that allows users to interact with the project [[session]] and [[3D Visualization]] from the perspective of a [[stakeholder]]. It is rendered on top of the [[3D Visualization]] and displays panels to inspect the [[Current Situation]] and [[Future Design]]ed state of a [[project]]. It also contains panels that allow [[stakeholder]]s to plan [[action]]s that will change the [[Planned situation]]. |
| ==How does the user interface relate to the Tygron Engine==
| |
| The user interface allows end users to interact with the [[3D world]], from the perspective of a [[stakeholder]]. It displays the virtual environment, representing the current state of the project, and a number of interface elements which provide the [[user]] with access to actions and information related to the stakeholder.
| |
|
| |
|
| For editor users, extra panels are added around the main interface, as shown in the image below. For more information, see also: [[Editor]]
| | To change the current situation of a project, users will have to user the [[Editor]]. The editor panels are added around the viewer interface, as shown in the image below. |
| <gallery mode=nolines> | | <gallery mode=nolines heights=300px widths=400px> |
| File:Q1-2016-End_User_Interface-b.jpg|User Interface | | File:Q1-2016-End_User_Interface-b.jpg|[[Viewer ]]interface |
| File:Q1-2016-EditorPanel.jpg|Editor Interface | | File:Q1-2016-EditorPanel.jpg|[[Editor ]]interface |
| </gallery> | | </gallery> |
|
| |
| ==Overview User Interface==
| |
| [[File:Q1-2016-End_User_Interface.jpg|thumb|400px|left|The main interface.]]
| |
| The user interface is the main [[interface]] of the Tygron Engine. During a project session the 3D World is the largest visible element on the screen. Near the edges of the screen you can find the most prominent parts of the interface. These are used to provide information to the user, provide means to the user to gather more information, and to interact as user with the 3D world.
| |
|
| |
| The main interface consists of four prominently available, interactive interface elements, as well as a number of contextually available information panels. The interface elements can be considered to be part of either two groups: the primary interface elements and additional interface elements. The primary interface elements are either always available or vital for interacting with the project. The additional interface elements provide additional information, and are only available in certain contexts or when taking specific actions.
| |
| <br clear=all>
| |
|
| |
|
| ==Main interface elements== | | ==Main interface elements== |
| As a rule of thumb, all interactions with the projects can be performed using the major interface elements. The interactive panels provide information, but also provide the ability to effect changes in the [[3D World]].
| | [[File:Q1-2016-End_User_Interface-b.jpg|thumb|400px|right|The main interface, showing the [[Top bar]] (top), [[Action menu panel]] (left) and the [[navigation panel]] (right).]] |
| | | The Main Interface consists of the following main elements: |
| ===3D World===
| | * [[Top bar]]: Top part of the screen; Displays [[Indicators]] and buttons to switch between the [[Current situation|Current]] and [[Planned situation]]. |
| [[File:Interface_game_3D_World.jpg|400px|right|The 3D World.]] | | * [[Action menu panel]]: Left part of the screen; Displays the [[Action Menu]]s containing the [[Action]]s available to the selected [[Stakeholder]]. |
| : ''Main article: [[3D World]].''
| | * [[Navigation panel]]: Right part of the screen; Displays multiple things: |
| The 3D World is the most prominently available interface element during a project session. It is the virtual environment you share with the other [[Stakeholders|stakeholders]]. Most, if not all, actions a user performs will affect the 3D World. The 3D World is therefore considered a part of the user interface because it provides you with information, and can be interacted with directly.
| | ** a search bar for [[address]]es and [[building]]s |
| | | ** the selected [[Camera]] and it's controls; |
| {{Editor steps|preamble=|form=:* |title=Navigating in the 3D World|Use the arrow keys to move east, west, north and south.|Hold down the right mouse button and drag the world to move east, west, north, and south.|Scroll up with the scroll wheel to move up, and a larger part of the 3D World.|Scroll down with the scroll wheel to move down, and see the 3D World in greater detail.}}
| | ** a transparency view option, |
| | | ** the [[Measuring tool]] button; |
| ===Top bar===
| | ** the available [[overlay]]s (sometimes grouped together); |
| {{Image with gallery|filename=Interface_game_topbar_small.jpg|size=400px|filedescription=The top bar, which provides information on the stakeholders and indicators.|float=right|gallery=<gallery mode="nolines">
| | ** the [[Log panel]]; |
| File:Interface_game_top_bar_-_indicator_hover_panel.jpg|Hover over an indicator
| | * [[Legend panel]]: Bottom part of the screen; Displays a legend of the selected [[Overlay]] or for [[Drawing]]. |
| File:Interface_game_top_bar_-_stakeholder_description_panel.jpg|Stakeholder description panel
| | These elements can open and show other panels in the interface. |
| </gallery>}}
| |
| | |
| <!--<div style="float:right;">[[File:Interface_game_topbar_small.jpg|400px|right|The top bar, which provided information the stakeholders and indicators.]]<br clear=all>
| |
| <div style="float:right;"><gallery mode="nolines">
| |
| File:Interface_game_top_bar_-_indicator_hover_panel.jpg|Hover over an indicator
| |
| File:Interface_game_top_bar_-_stakeholder_description_panel.jpg|Stakeholder description panel
| |
| </gallery></div>
| |
| </div>-->
| |
| The top bar is the large element at the top of the interface. Displayed, in order from left to right, are the Tygron logo, the [[stakeholders|stakeholder]] name, the time, the display mode, and the [[indicators]]. When the Tygron logo is pressed, the credits of the project are displayed. The Tygron logo will also start flashing red when the computer has trouble maintaining a connection with the Tygron Engine server. The stakeholder name indicates which role the user has selected, and thus which party they represent during the session. They can click the name of the stakeholder to view descriptions of other stakeholders. The time indicates how long the simulation has been running so far. The display mode allows you to switch between seeing the 3D world as it currently is and, for planning based projects, how it was at the start of the session, or how the world will look like in the future in timeline based projects.
| |
| | |
| The right section of the top bar is entirely filled with indicators. Starting with the [[Budget (Indicator)|budget indicator]] and ending with the [[Progress (Indicator)|progress indicator]]. Each indicator shows the current amount of progress made on that indicator towards the target set for it. By hovering over the indicators, you can see the full name of the indicator, the current score on the indicator, and the importance of this indicator for the total score.
| |
| | |
| {{Editor steps|preamble=|form=:*|title=Interacting with the Top Bar|Click on the Tygron logo to display the credits.|Click on the stakeholder name for more information about the [[playable stakeholder]]s.|Set the "Display" to "Original" to see the state of the 3D World at the beginning of the session| Set the "Display" to "Planned" to see the current state of the 3D World.| Click on an indicator to open the [[#indicator panel|indicator panel]].|Click on the "progress" bar to open the [[#Progress_panel|progress panel]]}}
| |
| | |
| ===Action menu===
| |
| {{Image with gallery|filename=Interface_game_category_panel_small.jpg|size=400px|filedescription=The action menu, which contains a stakeholder's actions.|float=right|gallery=<gallery mode="nolines">
| |
| File:Interface_game_category_panel_-_action_panel.jpg|The action panel
| |
| File:Interface_game_category_panel_-_top_bar_effects_.jpg|Effects in the top bar
| |
| </gallery>}}
| |
| | |
| <!--<div style="float:right;">[[File:Interface_game_category_panel_small.jpg|400px|right|The category panel, which contains a stakeholder's actions.]]<br clear=all>
| |
| <div style="float:right;"><gallery mode="nolines">
| |
| File:Interface_game_category_panel_-_action_panel.jpg|The action panel
| |
| File:Interface_game_category_panel_-_top_bar_effects_.jpg|Effects in the top bar
| |
| </gallery></div>
| |
| </div>-->
| |
| The action menu is the list of icons on the left hand side of the screen. This menu contains [[actions]] available to a stakeholder. Clicking one of the icons, opens the action panel. In the action panel you can select a specific action.
| |
| | |
| ====Action panel====
| |
| The action panel is the most important element to make changes to the 3D World. It's a versatile panel, since this panel can be used to create new constructions, demolish existing constructions, open panels to transfer money, send and receive messages among others. Two main differences occur: Actions and Measures.
| |
| | |
| =====Actions=====
| |
| When taking an action, you need to select an area in the 3D World where to take the action. This is done using the cursor to "draw" a selection on the 3D World. Drawing is done by pointing the cursor at the 3D World, holding down the left mouse button, and releasing the mousebutton. If it's an action with configurable settings (such as the amount of floors for a building), an element will be provided to allow you to select a proper value.{{:Drawing validity}}
| |
| | |
| =====Measures=====
| |
| When using a measure, you will simple be able to "apply" or "cancel" the action. A Measure is a predefined plan, implemented by the designer/ editor of the project.
| |
| | |
| =====Effects=====
| |
| When you have selected an action (and, if required, drawn a selection in the 3D World), the Top Bar will show the effects on the indicators for this stakeholder. Positive effects are noted green, while negative effects are marked red.
| |
| | |
| =====Exceptions=====
| |
| A few exceptions exist. One of the actions in the action menu may be the "Messages". When this action is selected, the [[#Message panel|message panel]] is opened. Financial actions, such as "Request subsidy" or "Finance View", open their own panels to provide information or continue interaction.
| |
| | |
| | |
| <!--{{Editor steps|preamble=|form=:*|title=Interacting with the action menu|.Click on an icon to open the action panel.|{{Editor steps|preamble=|form=:*#|title=Interacting with the action panel|Select the action you wish to take.|If required, set the amount of floors using the slider.|If required, make a selection in the 3D World.|Confirm the action by pressing the appropriate button on the Action panel ("Apply" or "Build").}}}}-->
| |
| | |
| {{Editor steps|preamble=|form=:*|title=Interacting with the action menu and action panel|Click on an icon to open the action panel.|Select the action you wish to take in the action panel.|If required, set the amount of floors using the slider in the action panel.|If required, make a selection in the 3D World.|Confirm the action by pressing the appropriate button on the action panel.}}
| |
| | |
| ===Minimap===
| |
| {{Image with gallery|filename=Navigation.jpg|size=400px|filedescription=The minimap, which allows a user to see the entire map at a glance, activate overlays an locate notifications.|float=right|gallery=<gallery mode="nolines">
| |
| File:Interface_game_minimap_-_view.jpg|Your current location
| |
| File:Interface_game_minimap_-_exclamation_mark.jpg|Switch to 2D to see the popups
| |
| </gallery>}}
| |
| | |
| <!--<div style="float:right;">[[File:Navigation.jpg|400px|right|The minimap, which allows a user to see the entire map at a glance, activate overlays an locate notifications.]]<br clear=all>
| |
| <div style="float:right;"><gallery mode="nolines">
| |
| File:Interface_game_minimap_-_view.jpg|Your current location
| |
| File:Interface_game_minimap_-_exclamation_mark.jpg|Switch to 2D to see the popups
| |
| </gallery></div>
| |
| </div>-->
| |
| The minimap is the nearly square panel at the top right of the screen. It is a small representation of the project area. The light blue rectangle on the minimap indicates where you are currently looking at. The text at the top of the minimap panel is the name of the zone you are looking at.
| |
| | |
| The most important function of the minimap is to allow you to navigate the project area quickly. When you click anywhere on the minimap, you are immediately brought to the location on which you clicked. When you or another user take an action which requires your attention, an exclamation mark icon will appear on the minimap. Clicking on an exclamation mark icon will immediately move you to the area in question, and also open up the [[popups|popup]] at that location.
| |
| | |
| Located at the bottom of the minimap are buttons which allow you to switch [[overlay]]. By switching to a different overlay, the 3D World is colored differently to provide you with additional information.
| |
| | |
| You can also use the minimap to signal a location to other stakeholders. This is known as "pinging". By clicking on the ping button at the top right corner of the minimap panel, the minimap of all other stakeholders will show your location via a pulsing circle. You can use this to indicate to another user a specific location in the project area.
| |
| | |
| {{Editor steps|preamble=|form=:*|title=Interacting with the Minimap|Click anywhere on the minimap to move to that location in the 3D World.|Use the buttons at the bottom of the minimap panel to change the overlay of the 3D World.| Use the button in the top right corner of the minimap panel to "ping" your location.}}
| |
| | |
| ====Address search====
| |
| Located directly below the minimap is the address search bar. This search bar can be used to quickly navigate to a precise address in the 3D World.
| |
| | |
| {{Editor steps|preamble=|form=:*|title=Using the Address search bar|Click the address search bar|Type in an address|Autocomplete will try to complete the address|Press the enter key to confirm}}
| |
| | |
| ==Additional interface elements==
| |
| Besides the main interface elements described above, there are also a number of additional elements in the interface. These will appear and disappear depending on your interaction with the project.
| |
| | |
| ===Popups===
| |
| : ''Main article: [[popups]].
| |
| Popups are an important part of the interface, which are not immediately visible to the user. Instead, they appear whenever an action is taken, and input is required from the user concerning that action. This includes actions which the user takes themselves, but popups more often appear when other stakeholders take actions which the user in question must respond to. They also appear in the minimap in the form of exclamation marks.
| |
| | |
| {{:popups}}
| |
| | |
| ===Indicator panel===
| |
| [[File:Interface_game_indicator_panel.jpg|250px|right|The indicator panel. the left side displays the name, importance, and description of the indicator, as well as the targets and the progress on the indicator. The right side displays the progress on this indicator over time.]] | |
| When you click on an indicator in the top bar, the indicator panel is opened. This panel displays information about the indicator you have selected. On the left side, at the top of the panel, is the name of the indicator, followed by its importance. A description of the indicator follows, to provide the user with information on what the indicator means, why it is important to the stakeholder and how to increase its score.
| |
| | |
| Under the "Explanation" heading, an overview displays the current score of the indicator, the target of the indicator, and the amount of progress which still needs to be made to score 100% on the indicator. The exact layout of this information differs per indicator.
| |
| | |
| On the right side of the panel, two graphs are visible. The top graph displays the total score on the indicator over time. The bottom graph displays the sub scores for the indicator over time. For example, in the case of the parking indicator, the bottom graph shows the amount of parking spaces per zone.<br clear=all>
| |
| | |
| ===Progress panel===
| |
| [[File:Main_topbar_indicator_progress.jpg|250px|right|The progress panel. The left side displays the assignment for the stakeholder for the current level. The bottom graph displays the personal indicators. The right side displays the description for the score of the shared indicators, displays the current scores of the shared indicators. On the bottom right it displays the total score.]] | |
| When you click on the [[Progress_(Indicator)|progress indicator]], located on the far right hand side in the top bar, the progress panel is opened. The left side of this panel displays the assignment for the stakeholder for the current level. The bottom bar on the left side displays the name of an indicator, followed by a bar presenting the current score of this indicator. The right side displays the description for the score of the shared indicators, and displays different colored bars, followed by the indicator names. The length of the bar represents the current scores of the shared indicators. On the bottom right it displays the total score as a percentage.<br clear=all>
| |
| | |
| ===Budget panel===
| |
| [[File:Interface_game_budget_panel.jpg|250px|right|The budget panel. It displays the incomes and expenses for your budget.]]
| |
| The budget panel can be accessed in two ways. You can open the indicator panel for your budget, and then press the button "To budget". Alternatively, when a finances category is available in the category panel, one of the available actions may be "Finance view". By selecting "Finance view, the budget panel is opened.
| |
| | |
| The budget panel displays an overview of your expenses and incomes. The left side of the panel displays the list of expenses. The expenses are collected in categories, which can be expanded by clicking the arrow next to a category. This displays all expenses within that category. At the bottom, in red, the total expenses are displayed. The right side of the panel displays the incomes in a similar fashion. Sources of income are categorized together, and can be expanded where desired to see what sources of income exist in a particular category. At the bottom, in green, the total amount of income is displayed.
| |
| | |
| At the bottom of the panel, the net balance is displayed. This is the amount of money the stakeholder has at that moment. The net balance is calculated by taking the total income and subtracting the total expenses from this value.
| |
| <br clear=all>
| |
| | |
| ===Message panel===
| |
| [[File:Interface_game_messages_panel.jpg|250px|right|The message panel. It allows you to communicate with non-playable stakeholders, and interact with other stakeholders for financial and land transactions.]] | |
| The message panel can be opened by selecting the "Messages" category from the category panel. The message panel displays the [[Messages|messages]] received by this stakeholder from other stakeholders in the project area. When a message is selected from the panel, the message is opened in full. Some messages are informative only, and simply hold a textual message. Such messages can be confirmed and closed by pressing "OK" in the bottom right of the panel. This removes the message from the message panel. Other messages require a response. These have the options to "Keep" or "Respond". By selecting "Keep", the message is closed, but remains available in the message panel to respond to later. When you select "Respond", you are given the ability to select a response, and send it by selecting "Send". The message will then be removed from the message panel.
| |
| | |
| You can also select "New message" from the message panel. This allows you to send a message to a [[non-playable stakeholder]]. In the "New message" panel, select the stakeholder to whom you wish to send your message. Also provide a subject and the message itself. When you are ready to send your message, press "Send".
| |
| <br clear=all>
| |
| | |
| ===Legend===
| |
| [[File:Interface_game_legend.jpg|250px|right|The legend. It appears to provide information when using certain overlays, and indicates why selections are invalid when drawing.]]
| |
| When drawing in the 3D World, or using an overlay other than the default overlay, a legend will be displayed at the bottom of the screen. Drawing in the world or activating an overlay will cause part or all of the world to be colored. The legend serves as a reference for which colors correspond to what information. For example, when viewing the [[Ownership (Overlay)|ownership overlay]], the legend will display which stakeholder is displayed with which color. When viewing the [[Livability (Overlay)|livability overlay]], it provides a reminder of which colors indicate the most and least desirable values.<br clear=all>
| |
| | |
| ===Hover panel===
| |
| [[File:Interface_game_hover_panel.jpg|250px|right|The hover panel. when holding the cursor over an area in the 3D World, it appears to provide information about the area indicated.]] | |
| When you hold the cursor still over any part of the project area, the hover panel will appear. The hover panel will display information about the area your cursor is pointing at, based on which overlay is currently active. By default, it displays the owner of an area, along with the [[land|type of terrain]] and [[constructions|construction]] located there. When, for example, the zoning overlay is active, it displays how much of each permitted [[function|type of construction]] is located in the indicated zone.<br clear=all>
| |
| | |
| ===Cinematic panel===
| |
| [[File:Interface_game_cinematic_panel.jpg|250px|right|The cinematic panel. The cinematic panel is displayed during cinematics.]]Whenever text is displayed during a [[Cinematic|cinematic]], it appears in the cinematic panel. While the cinematic panel is visible, the flythrough is paused. When you have read the text in the cinematic panel, you can click "continue" to close the cinematic panel and continue the cinematic.<br clear=all>
| |
| | |
| ===Escape menu===
| |
| [[File:Interface_game_escape.jpg|250px|right|The cinematic panel. The cinematic panel is displayed during cinematics.]]
| |
| The escape menu is opened by pressing the "Esc" key on your keyboard. The escape menu allows you to access the settings screen by pressing "Settings", and to display the credits by pressing "Credits". In [[single player|single user]] and [[multiplayer|multi user]] sessions, you are also able to exit the session from this menu, by pressing "Exit". In single user sessions, you are also able to save the session state by pressing "Save".<br clear=all>
| |
| | |
| ===Settings screen===
| |
| <!--: ''Main article: [[graphics settings]].''-->
| |
| [[File:Interface_game_settings.jpg|250px|right|The settings screen. The settings screen allows you to adjust the graphics.]]
| |
| The settings screen allows you to adjust the graphical settings of the Tygron Engine. By raising the values, you increase the graphical quality of the virtual environment. By lowering the values, you lower the stress on your hardware and thus increase performance. The settings panel offers four default settings: "Low", "Medium", "High" and "Full". Each of these options set the graphics to predefined values. By selecting "Advanced", you are also able to finely adjust which graphical settings to increase and decrease.
| |
| | |
| You can also adjust the volume by using the "Volume" slider.<br clear=all>
| |
|
| |
|
| ===Starting screens===
| | {{article end |
| [[File:Interface_starting_screen_explanation.jpg|400px|right|A starting screen.]] | | |seealso= |
| : ''Main article: [[Starting screens]].''
| | *[[Editor]] |
| The starting screens are displayed when you enter a session. They can provide information on [[contributors|who contributed to the project]], what the project is about and what your assignment will be during the session. They also allow you to choose a [[team]] name (if one is not already selected), and which [[stakeholders|stakeholder]] you would like to play as.
| | *[[3D Visualization]] |
| | *[[Camera]] |
| | *[[List of Keyboard Shortcuts]] |
| | }} |
|
| |
|
| {{:Starting screens}} | | {{viewer nav}} |
| <br clear=all>
| | [[Category:Interface]] |
