EaselBone

A GUI engine combining EaselJS and Backbone.js for building interactive canvas-based user interfaces.

Features

Navigatable Views

Keyboard and mouse navigatable views built on Backbone.js, with support for multiple input users.

UI Controls

Sliders, checkboxes, selectboxes, and buttons with full keyboard navigation support.

Scrollable Containers

Scroll areas with list and float layout support, including programmatic scrolling and focus management.

Text Rendering

BigText auto-sizing text rendering with custom font support and emoji rendering via EmojiText.

Alpha Masks

Alpha mask support for creating complex visual effects on canvas elements.

Asset Loading

Built-in asset loader for managing spritesheets, images, and other resources with AMD/RequireJS modules.

Live Examples

Controls

Interactive sliders, checkboxes, selectboxes, and buttons with keyboard navigation.

Scrollable Areas

Scrollable container with a list of items and programmatic focus scrolling.

Float Layout

Float container layout for arranging elements in a flexible grid within a scroll area.

Alpha Mask

Demonstrates alpha mask capabilities for creating visual effects on canvas.

Background & Fill

Background fill and placeholder display objects for image rendering in containers.

BigText

Auto-sizing text rendering with custom fonts that fills available container space.

Emoji Text

Text rendering with inline emoji support using OpenMoji font rendering.

Installation

Install via npm:

npm install easelbone

Or with Bower:

bower install easelbone

Quick Start

require(['easelbone'], function (easelbone) {
    // Create a root view attached to a DOM container
    var rootView = new easelbone.Views.Root({
        container: document.getElementById('container')
    });

    // Create a navigatable view
    var MyView = easelbone.Views.Navigatable.extend({
        initialize: function () {
            this.initializeNavigable({ orientation: 'vertical' });
        },
        render: function () {
            // Add your content here
        }
    });

    var view = new MyView();
    rootView.setView(view);
});

API Overview

Views

Views.Root — Root stage container
Views.Navigatable — Keyboard/mouse navigatable view
Views.Layer — View layering
Views.LoadingView — Loading state view

Controls

Controls.Slider — Range slider
Controls.Checkbox — Toggle checkbox
Controls.Button — Clickable button
Controls.Selectbox — Dropdown select
Controls.ScrollArea — Scrollable area
Controls.List — List container
Controls.FloatContainer — Float layout

Display Objects

EaselJS.BigText — Auto-sizing text
EaselJS.EmojiText — Emoji-enabled text
EaselJS.Placeholder — Placeholder container
EaselJS.Fill — Fill display object
EaselJS.Background — Background renderer