Skip to content

Graphical User Interfaces

Jump to bottom Edit New page
critzo edited this page May 15, 2014 · 4 revisions

GUI Components

The Graphical user interface for the commotion_client will be a cross platform gui where most of the "in-client" components will be identical across platforms. The tool-bar icon and control panel extension will use the os specific chroming to achieve the greatest level of consistency to the platforms styling.

Main Window

The main window consists of three parts.

  1. The Menu-Bar

  2. The Tool-Bar

  3. The Main-Viewport

OSX Chroming on app

The above example shows a OSX version of the commotion_client. This ROUGH mock-up shows that the client will remain as consistent inside the main window as possible while using the browser consistent chroming whenever possible.

Menu-Bar

The Commotion-client menu-bar is the main client navigation tool for networking and network status functionality. This menu-bar is populated by querying the various extensions. This will allow for a consistent navigation experience for users, and easy integration for developers. By making the menu automatically reach out to all enabled plugins developers only need a small config file to integrate their extension into commotion. This along with gui tools such as the pyqt developer platform to build their GUI elements allows networking developers to focus on what they know best, instead of learning the PyQT API.

The Menu-Bar element of the commotion_client GUI will have the following functions:

  • Get a list of all extensions and display the appropriate buttons and sub-menu's as defined by each extension.
  • Refresh its menus on the addition or removal of a extension.
  • Be collapsible and re-openable through the use of a handle as well as when the toolbar "full-screen" action is activated.
  • Display sub-menu's of the current top-level section a user is within.
  • Upon clicking a menu-item (top-level or sub-menu) load the corresponding extension in the main viewing area.

The handle and divider to collapse and reopen the menu will use the standard OS chrome and drag handle widgets.

Tool-Bar

The tool bar is an object that lives within the main viewport. Unlike the menu-bar this object offers a user interface for the actions related to the commotion-client GUI interface and otherwise unrelated to the functionality of the commotion-client. This tool-bar will have pre-built objects for common functions that will allow a developer building a extension to focus more on the functionality they need and not on learning the PyQt API.

Image of proposed toolbar

//A note on icons and the use of a tool-bar over a file menu: The actions contained in our tool bar are menu's that would live in a traditional "file menu" if the commotion-client was a program that was file based. Because commotion is a networking agent we decided to abstract our settings using one of the many ubiquitous iconographic design patterns. This both allows cross platform uniformity and solves the naming abstraction problem of the file menu. The current icons seen in this menu are temporary until we standardize the icons and incorporate them into our human interface guidelines. For the purposes of the development stage we will use the cog for settings and sideways commotion for users. In choosing between the "big-two" of "three lines" and the "cog" we decided to go with the cog for the development cycle because it fits our existing visual style. We decided to use the sideways commotion for the user because our logo kind of looks like a person when sideways. And, if it is up to this developer, we will not stray far from this for the final icon because it is absolutely delightful! //

The tool bar will have the following functional requirements:

  • When a extension is activated the toolbar should display itself in the main view area with at LEAST the following default menu's.
    • Settings (Gear Image) (opens dropdown menu of the following)
      • exit (close the gui, not the commotion_client)
      • about (open the about page in main view)
      • settings (opens commotion_client_GUI settings page)
      • update (check commotion website for updates)
      • extensions (opens extension management interface)
    • User (sideways Commotion logo person) (opens dropdown menu of the following)
      • Login/Logout (opens login/logout page for users)
      • Preferences (opens user preferences page)
    • Full-Screen (that box with lines around its corners) (minimized the menu-bar and puts the main window into full screen mode)
  • Any extension may add actions to the toolbar using one of the pre-build icons or one of their own creation. Prebuilt icons are as follows.
    • save
    • load
    • print
  • extension may add items to existing tool-bar dropdown boxes (settings, user) if it is a section name that does not already exist.
  • The tool-bar must refresh upon any main view screen change or refresh

The tool bar will alert users of the status of items using alert pop-ups like the one shown here. These pop-ups will disappear after a certain period of time or when clicked.

Image of toolbar alert

Main-Viewport

The main viewport is a container within which extensions and the tool-bar are displayed. On the code level this means that when a extension is called from the side menu it is created as a child of the main viewport and therefore contained within it. The only real notable properties of this space is that it contains the interesting bits of the client.

StyleSheets

PyQt provides a robust interface for custom themeing using CSS style stylesheets. Commotion will be using this functionality to allow for new extensions to easily fit within our existing human interface guidelines.

RESOURCES:

Resources

Add a custom footer
Add a custom sidebar
Clone this wiki locally