Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
UI system for pixi.js 4, inspired by feathers-ui.
Basic UI components
Layouting
Scrollable container
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-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.
npm install
npm run dist
to build the library (it will be in docs/dist )python -m SimpleHTTPServer
to show the examples ( find them at /docs/examples/ )Using the python script themes/xml_to_json.py you can convert your XML file from feathers-ui into JSON so the default PIXI loader can parse it.
example:
python xml_to_json.py assets/aeon/aeon_desktop.xml
the script requires PIL (or Pillow) to determine the texture width/height
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:
The redraw
function is hooked into PIXI's render loop in the updateTranform
methond but called before the actual calcluation of updateTransform
.
see Issues
FAQs
gown.js provides basic UI components for Pixi.js. Inspired by feathers UI
The npm package gown receives a total of 3 weekly downloads. As such, gown popularity was classified as not popular.
We found that gown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.