Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including wings-js with all npm packages installed. Try it out:

wings-js lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("wings-js/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

wings-js v0.0.5

Object-Oriented JavaScript UI framework over HTML5 Canvas.

Alt text

Usage:

Link Wings to your web page:

<script type='text/javascript' src='wings-[current version].min.js'></script>

You need a canvas to draw on:

<canvas id='canvas' width='300px' height='300px'>

Link that canvas to the view:

var view = new Wings.View(document.getElementById('canvas'));

Create a component:

var Box = Wings.Panel.extend({
            init : function Box() {
                this._super();
                this.size(50, 50);
                this.backgroundColor('magenta');
                this.borderColor('cyan');
                this.borderWidth(5);
            }
        });

Add it to the view:

var box = new Box();
view.add(box);

Locate it inside:

box.location(100, 100);

Add mouse reaction to it:

box.add(new Wings.MouseDown(function() {
    alert('My location is ' + box.location());
}));

See demos at http://1nside0ut.com/wings-js/

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free