Skip to content
Vincent Wang edited this page Dec 7, 2015 · 9 revisions

Overview

The Build View is the section of the Beep Beep project that allows the user to construct traffic networks that can be simulated in the Simulator View. This view is constructed as a Unity3D Scene called BuildViewScene. It is initially loaded as a mostly empty scene containing the Inspector, the Workflow Controller, the Error Display. Using the inspector, the user can spawn nodes, create links. These components are the core of the Build View.

The build view is where the users can build the traffic network by assigning links and nodes to desired place of the network.

The inspector is the UI on the right side of the screen. This is the largest control menu in Build View, and is expected to be the menu most used. It contains a button labeled "Node" to spawn a node, and a button labeled "Link" to create a link. The UI elements below the Node button activates when nodes have been selected, which allows the user to edit properties of the selected nodes. The same pattern applies to the link menu, which is only active where there exists two nodes selected that contain a link.

Requirements of Build View

The Build View Scene must allow a user to:

  • Arrange nodes and connect them with links
  • Set attributes to specific links and nodes
  • Change the background and see it reflected in the current canvas and Sim View
  • Easily navigate the canvas as well as being able to zoom in and out
  • Start the process to Sim View and reflect any errors in the current traffic system

Elements of Build View

The main building blocks of the build view are the Node and Link. This allows for a simple building space which still allows for the creation of a complex traffic system.

Node

Nodes represent an area of a traffic system where an action can occur. This action could be a traffic light, a stop sign, a change in the speed limit, a source of cars, a destination for car, et. cetera. This makes the node a very powerful component of the Build View. Nodes are created via clicking the Node button in inspector view and once clicked, can be modified using the inspector view.

The following are attributes of a node:

  • Id (name)
  • Is Source? (i.e. can this node produce cars?)
  • Is Sink? (i.e. can this node destroy appropriate cars?) This may become deprecated as a car may simply destroy itself when it hits its destination
  • Is Connected? (i.e. does this node have at least one link attached to it?)
  • Number of Connections (i.e. how many links are attached to it?)
  • Node type (i.e. is node to act like a Stop Light, Stop Sign, or neither?)

Link

Links represent connections between two nodes, mainly a street or a road. A link can only be created if two or more nodes are selected and the "Link" button. Currently, this will generate a one lane uni-directional link (with an arrow indicating the direction).

The following are attributes of a link:

  • Number of lanes
  • Is bidirectional?

In the future, we may also include other attributes such as speed limit or length.

For links, the user will be able to spawn a link between two selected nodes with the direction from first selected to the second selected node. The links will also show the direction in repetitive arrows indicating the direction. In order to adjust the links, the user will be able to click on the link and hold to move the link to desired place on the screen along with the nodes attached.

Inspector View

The Inspector View, located consistently on the right hand side of the screen, allows the user to customize their traffic system by manipulating nodes and links. This is also the view where a user can generate nodes and links to place in their traffic system using the appropriate "Node" and "Link" buttons. Note however, that to use the Link button at least two nodes need to be selected (selection is reflected by a blue highlight around the node).

When a node is selected, their properties (such as type, is Source, and is Sink) will be reflected and available to manipulated in the Inspector View. If multiple nodes are selected, properties that are not uniform between the selected nodes will be greyed out. However, a user can still modify properties, but the modified property will be apply to _all currently selected nodes.

Other Features

These are other key features that are implemented in Build View.

Canvas Movement and Zooming

A user can zoom in and out of the canvas by scrolling in or out. The background and all building elements will appropriately re-sized.

Also, a user can either (1) middle click and drag or (2) space bar click and drag to move around the canvas.

Lastly, if a user wishes to de-select all currently selected nodes, the user can click the background to do so.

Background Selection

In the upper left hand corner of the Build View, there is the ability for the user to select an image to be set as the background of the Build View and Sim View. This is for the use case of a user trying to mimic an already existing traffic system and wanting to see the real world applications of the simulation. If no background is chosen, the background of the Build View will remain black and the background of the Sim View will remain white to provide a clean (yet discernible) UI.

C# Files

BuildViewBackground.cs

This file controls the interaction between the user and the background. This file ensures that the background persists with camera zooming, movement, and has the appropriate behavior when a user clicks the background (de-select all nodes).

Link.cs

This file contains all of the getters and setters for game objects of type link. This contains most of the attributes of a link, but not the interactions a user can have with it.

Node.cs

This file contains all of the getters and setters for game objects of type node. This contains most of the attributes of a node, but not the interactions a user can have with it.

BuildViewLink.cs

This file describes the action for a link prefab in the Build View scene. This consists of link and node objects which are described in Link.cs and Node.cs, respectively. This class both handles the creation of links as well as how user interactions with links are handled in Build View.

BuildViewNode.cs

This file describes all user interactions for a node prefab in the Build View scene. This consists of a node object as defined by Node.cs.

BuildViewSelectionHandler.cs

This file handles user selection and deselection of nodes, both adding them into a list for further usage as well as changing sprites to reflect the selection state to the user. This file also handles the creation of links between selected nodes.

Compiler.cs

This file contains the workings for the Compiler (more on the compiler in the Compiler Section).

ErrorView.cs

This file handles the Build View error message the Compiler will generate if there is an invalid traffic system. This does not include the change of the node sprite to reflect the problematic nodes.

FileBrowser.cs

This file contains the code to generate a file browser for selecting files or folders at runtime [Note: this open-sourced code was taken from the Unity Community Wiki].

GUILayoutx.cs

This file handles the GUI of FileBrowser.cs [Note: this open-sourced code was taken from the Unity Community Wiki].

ImageFileFinder.cs

This file provides the buttons on the Build View Scene that invokes the file browser to choose a background file [Note: the current iteration of this file uses deprecated Unity functions].

CameraHandler.cs

This file is a part of the entirety of Beep Beep (i.e. both the Build View and Sim View). This file controls the behavior of the camera (i.e. the ability to move the camera and to scroll in and out).

Backlog Tasks

The following are tasks that Team Beep Beep will like to implement in the future.

Anchoring Nodes

We would like to have a button, most likely in the inspector view when a node is selected, that would allow the user to essentially pin nodes to their current position (so they do not accidentally move it later, potentially allowing for error in the system). A user can also un-anchor a node to allow them to move around the canvas once more.

Undo and Redo Button

Like any text editor or building software, we would like the ability to have an undo and redo function to the building aspect of Beep Beep to have a more well-rounded experience.

Listing in Inspector View (for order of direction)

When a user clicks a number of nodes or a link, the inspector view should list the Ids of the nodes in the order they were selected (or in the case of a link, the order of source to destination if a unidirectional road). This would help a user either determine the current direction or the new direction if a link should be added between nodes. This would also further help a user know the Id number of the nodes.

Fully Fleshed Out Settings View

Currently, there is not a settings menu for Beep Beep. In the future, we would like a more fleshed out settings window for both Build View and Sim View. In such menu should be the background propagation setting along with other features (for example, the ability to save your current system or load a system).

User Walkthrough

While many features of our UI are intuitive, we would like to have an FAQ or help page for new users in order to cut down on time taken to learn how to use our system. This could potentially be added to the settings page or a button at the top of the screen.

Tab Button for Switching Directions of Links

We would like to have a key shortcut (tab) for the user to cycle through directions for a selected link (or selected nodes). This would allow for a faster traffic system creation.