Giter VIP home page Giter VIP logo

gown.js's Introduction

gown.js

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

Inline docs Code Climate Build Status

Features

  1. Basic UI components

    • Button: simple Button, with label and background, easy to extend using themes
    • CheckBox a simple checkbox
    • ToggleButton: a button with pressed state
    • Slider a simple slider with modifyable start and end value
  2. Layouting

    • LayoutGroup: a component to create horizontal, vertical or tile-based layouts
  3. 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.
  4. A Text input providing text and password input (based on PIXI Input )

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

Examples

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

Folder structure

  • 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.

Installation

  1. Check out the repository from the GreyRook/gown github repository.
  2. Install node.js (if its not even installed).
  3. Change into the path for the checked out repository and run npm install
  4. run npm run dist to build the library (it will be in docs/dist )
  5. start a webserver e.g. python -m SimpleHTTPServer to show the examples ( find them at /docs/examples/ )

Theming

  • 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

  • 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

Under the hood

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>() } }}

Rendering

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:

  1. redraw (gown)
  2. updateTransform (PIXI)
  3. render (PIXI)

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

Known Bugs

see Issues

gown.js's People

Contributors

bfriedrichs avatar brean avatar fabianelsmer avatar florianludwig avatar maierfelix avatar makc avatar marfri avatar rostovmv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gown.js's Issues

Cleanup Build process

The build scripts in gown are just copied over from an older pixi version (with some minor modifications). There is a lot going on that is not needed and complicates the build process unnecessarily.
So we should clean up and create some new scripts that only do what is needed. It can be based on the current PIXI-build scripts but should not be just a copy

Merge pixi-layout and pixi-shapes back into GOWN.js

I am thinking about merging the three projects back together into one.

Reasoning:

  1. less to maintain (one bug tracker instead of three)
  2. make it simpler for newcomers to find there way around and actually built gown successfully
  3. claim: they are not in use separately from gown anyway

Refresh Project Structure

  • make a first release 0.1.0 based on current master
  • release 0.1.x branch to npm
  • merge dev back into master
  • make a second release, 0.2.0
  • finalize API strcture
  • npm release
  • coverage test
  • inch-ci
  • code climate
  • CI (travis)
  • API docs & examples online
  • fancy website

labelFont and labelColor in theme

What do they do? Why is labelFont, labelColor and textStyle used in buttons for the label? Does seem a bit redundant and error prone, since labelFont and labelColor are used to set updateLabel, but textStyle is used to update the style.

Documentation

We need more documentation.

  • Auto-generated documentation form API
  • merge/fix examples and update gown-examples
  • create basic tutorials for building example applications::
  • one app that has every ui like the Feathers Components Explorer
  • business-application with fake-login and show some data
  • game ui-dialogs

how to build gown.js

Hi,

I followed the steps explained in the CONTRIBUTING.md file to setup dependencies. But I do not figure out how to build gown.js?

Is there a document explaining this simple step.

Regards,

Slider theming issue

Default horizontal sliders and scrollbars seem to have a theming problem on the thumb
screen shot 2017-01-30 at 12 19 36

ScaleContainer distorts texture

When I'm loading a Texture into a GOWN.utils.ScaleContainer and then scale it, it looks like this:

Seems good so far but, when I set the width and the height of the container it looks like this:

Any ideas why thats happening?

New Component: Auto-Complete

Like feathers-ui, but customizable where the suggestions are shown (below, above, both), and how the suggestions are generated (fixed list, function that generates suggestions) with the option to not allow setting of invalid options.

Project roadmap

Any hopes of some updates, fixes, etc? Project being still since APR 18.

clean on destroy

overwrite destroy-function and remove all listeners, destroy skins, help gc to free memory.

resize Scrollable

keep store position of thumb and recalculate it when the scrollbar gets resized

Slider calls Scrollable with wrong arguments

in Slider: Scrollable.call(this, thumb, theme)

but

function Scrollable(theme) {...}

The example works because the theme is the only argument, and since the first argument is thumb it works, but does not look like its intendet this way?

ScrollArea & Touchpad Scroll

My primary goal is to create cascading lists (Miller columns) right now. But I'd also like touchpad two finger scroll to work with ScrollArea. I'll probably add this myself but please consider it a feature request. Thanks!

Using type "rect" Themes for GOWN.Check does not work

Check is always displayed as not selected. Just use the following theme for check in aeontheme, add width and height to the aeon-checks in the checkbox example and see for yourself. In not selected state it shows a white rect with black border, in selected state it should show a black rect.

"check": { "up": { "type": "rect", "radius": 0, "border": 3, "color": "0xffffff", "borderColor": "0x000000" }, "down": { "type": "rect", "radius": 0, "border": 3, "color": "0xffffff", "borderColor": "0x000000" }, "hover": { "type": "rect", "radius": 0, "border": 3, "color": "0xffffff", "borderColor": "0x000000" }, "selected_up": { "type": "rect", "radius": 0, "border": 3, "color": "0x000000", "borderColor": "0x000000" }, "selected_down": { "type": "rect", "radius": 0, "border": 3, "color": "0x000000", "borderColor": "0x000000" }, "selected_hover": { "type": "rect", "radius": 0, "border": 3, "color": "0x000000", "borderColor": "0x000000" } },

Button label flashes

new Button label flash at position 0:0 before they get positioned at the right position (scroll the buttons in example 4 to see this)

Question: Some thoughts on this project.

I have not idea what is feathers-ui, but I have very strong background in HTML5+CSS3 (also HTML APPS). In this HTML world new fresh projects try to stay as much as possible away from defining element styles with images (sprite-sheets etc.). This is due new advanced CSS settings, that let you define, for example, a complete custom button (with round borders, gradient, opacity, etc.). This is a very obvious tendency, because it solves retina issues & saves assets loading size (especially when there are a lot of different styles) / Also doe's not require Photoshop :)) / . So what is with Gown? Can we hope for some features to define, at least, button styles with settings (and no image required)? I think PIXI makes this really easy?...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.