Rapid Prototyping of Computer Simulations
Server Side

GUI – the Graphical User Interface


GUI Layout

                The GUI layout is designed to take into consideration the differing needs of computers, tablets, and smartphones.  The screen space will be divided into a grid layout, and GUI components will snap into these grid cells.  Some GUI components will take up a fixed number of grid cells, such as the simulation play controls will take up a single cell as it consists of a few buttons and a time display.  Most GUI components will be allowed to resize to take up more or less cells, such as visualization views or code editors.

                The number of GUI grid cells will be based on the screen size, but the cells are not square in size.  The optimal cell width will be 350 pixels to 450 pixels, and the optimal cell height will be 200 pixels.  This will allow a cell phone to have a grid of 1x4 cells in portrait mode, or 2x2 cells in landscape mode.  This will allow a 1080p tablet to have a grid of 3x9 cells in portrait mode, or 5x5 cells in landscape mode.

The left shows how Falcetto may look on a computer web browser. The right two images show how Falcetto may look on a smartphone. Notice how the smartphone requires more workspaces to display the same information.

                GUI components will be run in their own iframes.  This will ensure that any bugs or errors in one GUI component will not result in failure of the entire Falcetto framework.   Falcetto will eventually allow GUI components to be designed by third parties and distributed via the Marketplace, making this extra layer of protection critically important.  This separation will also allow third parties to more easily test their GUI components, as they will be able to refresh the one iframe, rather than the whole framework.

                Some features will launch a modal popup window for alerts or extra settings when it isn’t appropriate to show all the setting on the screen.  The popup can take up the whole available screen if needed, and is not bound to the confines of the component that launched it. The Variables GUI panel will use a popup when changing a Variable’s settings, and just display some small summary icons on the normal display.  The Variables GUI panel will also use a popup when editing a Variable that is an object type, as the value is too complicated for a normal text entry field.  The simulation controls will have a settings popup where the user can adjust the time step mode and settings, and the default time step and accuracy settings.  Help icons will appear throughout the GUI, and clicking any of them will open help documentation as a popup.

The user will not be limited to one grid, but will be able to have multiple grid workspaces available.  The same GUI components may appear in any or all of the workspaces.  The User will be able to choose what the workspaces are for, and customize the text shown on the tabs for selecting a workspace.  Different grid layouts will have different defaults for workspace configuration.  A smartphone only has 4 grid cells, so its defaults workspaces layouts are to have the view on the first workspace, the Variables GUI panel on the second workspace, and the Code GUI panel on the third workspace.  A 1080p tablet has enough grid cells to have all major features available on the first workspace.  If a Device has an unanticipated screen size, then Falcetto will use the default for the next smallest screen size, such that the worst case is some unassigned rows or columns.

When the available screen space changes, such as a browser window resize or device reorientation, the GUI components will shift around.  If enough grid cells are available for all existing items to just move around, then Falcetto will just move the components.  It will remember what was chosen by the User, and what was automatically set during resize.  If the User were to resize it back to the way it was before, it will put the components back where they originally were, then if resized back again it will use the User’s changes rather than putting the components where it did during the first resize.  When a resize results in too few grid cells for the workspace to display, multi-cell components will be reduced in size proportional to their screen share, and new workspace tabs will be created if there still isn’t enough grid space on the resized workspace.


GUI Components

                There are several GUI components that are available to view and edit the Model and Simulation.  These components can be roughly divided into visualization, selection, modeling, and simulation.  Some functionality can be performed by multiple different components, even components in different categories.

                The visualization components include the 3D Model views, and charts for displaying data.  Having a workspace that displays just these components can make a striking impression during a presentation.  The visualization components will have multiple rendering engines to select from, and each component can be individually assigned a different engine.  This means your 3D views could be running using a hardware accelerated 3D viewer, while your charts are running on a lower overhead 2D canvas.  The 3D views also provide a method for the User to select objects, as an alternative to the standard selection components.

                The selection components allow the User to browse and select things such as Elements or Classes.  The selection components will typically be tree view selectors, like the file system browsers on most computers.  Selecting Elements via a visualization component will likely be the most intuitive way, but when there are too many elements, or a particular Element is in an awkward or unseen location, the tree view will thus become the easiest way to find it.  Finding a Class in a tree list can be significantly easier than finding an Instance of it in a visualization component.  A hybrid selection component allows the User to select either a Class or an Element, by organizing Elements by their Classes, thus displaying all Classes and Elements in the Model.  Selection components for recently edited or pinned/favorite Elements and Classes can allow the User to much more quickly find what the Elements and Classes that they want.  A User can traverse/crawl the Model using a selection component that can view and select the Elements connected to the currently selected Element.  More selection components ideas will likely come up during development and Beta testing.

                The modeling components are how the User modifies the Model aspects, such as Variables and Code.  The Variables GUI panel will allow setting values and options for the various Variables on an Element.  The Code GUI panel will allow writing the Code that the selected Elements run during Simulation.  These components are arguably the most complicated components in Falcetto, and as such will have the most integrated help systems, and helpful reference information.

                The simulation components are how the User will start a Simulation, and manipulate it while it runs.  The most basic simulation component is the panel that will contain the start button, pause button, stop button, a display for the current simulation time, and a button to launch a simulation settings popup.  This basic panel’s settings popup will allow the User to choose settings such as whether the simulation uses a fixed time step, or a dynamic time step, and the defaults for the time step and accuracy settings.  Another simulation component will allow batch processing controls, which allow a User to queue up multiple simulations for processing.  A simulation component will give the User options for what tasks to send for Server Side processing.  A simulation component will allow some real-time input from the user, such as button presses or keyboard keys, to send Messages to Elements in the simulation, allowing for the crafting of simple interactive simulations or games.  If the Unity stretch goal is met, then the User may be able to use gaming controllers as input to the Simulation as well.

                Other components will exist as well, as these four categories don’t encompass all features of Falcetto.  The User will perform Server Side account management and Community activity through a separate website, but some information and functionality will be available as GUI components that can run inside of Falcetto, such as quickly sharing the current Model to the Community.  Saving and loading Model data will have its own GUI component.  A “mini-browser” component will allow the User to make any external website show up inside of Falcetto, for those rare times that a separate web browser tab is not the easier solution.  Though help systems are integrated throughout the GUI, a separate help system GUI component will allow the user to view and browse all help topics.  A text console GUI component will allow the Simulation to write data to a special window, independent of the browser’s “console.log()” function.  Clustering Nodes is a common graph modeling operation, and a GUI component provides access to this functionality.


Code GUI panel

                The Code GUI panel will appear much as a computer programmer expects a code window to look.  There will be a separate tab for each Code segment on the selected Element.  A set of tabs will be used to switch between which Code segment is currently visible in the panel.  There are several syntax highlighters available for making JS coding panels more readable, so an existing syntax highlighter will be applied, licenses allowing.  Another tab will exist that will serve as a reference to allow the User to see the various Variables that are available to the code, what type the Variables are, and what Helper functions are available for that type of Variable.  This reference tab will also remind the User how to read Variables from other Nodes and Edges, and how to differentiate between connected Elements versus Elements that live in the same space.


Variable GUI Panel

                The Variables panel will display all of the Variables that the Element has.  It will display the Variable names, along with an edit box to allow setting the value of the Variable.  Object Variables will have a button to open a popup allowing the User to view and edit the object value.  A settings button will also be present to open a popup to configure the Variable, such as accuracy, type, name, visibility, or special options for the pre-existing Variables.

                Icons will be displayed whenever a Variable uses custom settings for accuracy, or use an optional feature on pre-existing Variables.  These little icons will allow the User to easily notice which Variables have extra settings that aren’t being shown on the main panel summary.

                A reference panel will be available to let the User know what data will be available from within the Code.  This data will include the Variables of the containing Class, the Variables of the Global space, and the array variables of other Elements that are visible.



                Interactive tutorials are a much friendlier way of introducing a new User to software than merely shoving a bunch of help documentation at them.  Falcetto interactive tutorials will allow the User to create pre-defined Models by restricting which buttons and fields they are allowed to alter, as well as controlling what values they are allowed to put into fields.  These interactive tutorials will float in a window that includes instructions, a highlight button to point out where action is needed, a button to auto-complete the step, and a button to quit the tutorial.  Interactive tutorials can be resumed later, or restarted.

Content ©2014-2017 Ether Tear LLC. Website powered by Ether Tear LLC, ©2013-2017