UI system for pixi.js 4, inspired by feathers-ui.

Basic UI components

Button: simple Button, with label and background, easy to extend using themes

CheckBoxa simple checkbox

ToggleButton: a button with pressed state

Slidera simple slider with modifyable start and end value

Layouting

LayoutGroup: a component to create horizontal, vertical or tile-based layouts

Scrollable container

ScrollContainer: provides a viewport that can be scrolled using mouse or touch gestures.  When its content is a LayoutGroup the scroll behavior will be dependent on its layout: a horizontal layoutgroup will default to horizontal scrolling, vertical layout to vertical scrolling.  But you are in control and can manually overwrite the scroll behavior.

ScrollBar: providing a scroll thumb that can be moved. Part of ScrollContainer and List, but can be used separately.

A Text input providing text and password input (based on PIXI Input )

Basic shapes that provide width and height that can be changed easily (for use in themes for example)

see the examples-folder in this repo or play with some example online at: http://greyrook.github.io/gown.js/examples/

examples - simple examples to show the usage (and to have something more graphical besides the jasmine-tests)

lib - required libraries (just pixi-dev)

src - source code for gown.js

test - unit tests, run coverage_karma_istanbul.sh to get a table providing all files and their coverage, run coverage_blanket to start a web server that shows you the coverage for all lines of the generated browserify output file.

themes - basic UI example themes

AeonTheme.js A theme based on Feather's AeonDesktopTheme making use of 9-tiled images

MetalWorksDesktopTheme.js a theme based on Feather's MetalWorksDesktopTheme

Themes/ShapeTheme.js a theme using only basic shapes.

Check out the repository from the GreyRook/gown github repository.

Install node.js (if its not even installed).

Change into the path for the checked out repository and run npm install

run npm run dist to build the library (it will be in docs/dist )

start a webserver e.g. python -m SimpleHTTPServer to show the examples ( find them at /docs/examples/ )

Using the python script themes/xml_to_json.pyyou can convert your XML file from feathers-ui into JSON so the default PIXI loader can parse it.

example:

the script requires PIL (or Pillow ) to determine the texture width/height

It is possible to have different themes in one project

Themes can be switched at run time

For reference how to create your own theme check the themes folder.  It contains two different approaches on creating themes

The test/src/TestTheme.js is a fake theme used only for the unit tests

Center of the theming system is the "skins"-object. It holds unique names of different controls as key (e.g. "button" as identifier for GOWN.Button) and nested objects as value. These nested objects allow you to save different graphics for different skins (e.g. "down" when the user pressed a button down). The graphic for the state can be an images but also any kind of shape (you can set everything that can be added to a PIXI-DisplayObjectContainer as skin). It is important that the variable width/height of your skin can be changed so your skin can be layouted correctly. Every control need its own instance for the skin, so you have to wrap it in a function that creates a new instance of the skin.

In short, the skins-object looks like this: theme.skins = {<control>: {<state>: function () { new <skin>() } }}

When changing a component the corresponding setter updates an invalid flag.  This will force a redraw on the next frame. (this can be the recalculation of the position and dimensions or a skin change on user interaction).

The loop looks like this:

redraw (gown)

updateTransform (PIXI)

render (PIXI)

The redraw function is hooked into PIXI's render loop in the updateTranform methond but called before the actual calcluation of updateTransform.

see Issues