Interface

Pixie's interface is very flexible and allows you to easily adapt it to your specific application requirements.

Modes

Pixie has two modes, inline and overlay. They can be freely switched between without a page reload via ui.mode config option.

• Inline mode will display pixie on the page inline. It will stretch pixie to fill width and height of the container element, unless width and height config options are specified.
• Overlay mode will display pixie as a modal above other page content. A close button will be visible by default in this mode which allows to close pixie overlay.

var pixie = new Pixie({
    ui: {
        mode: 'overlay'
    },
    onLoad: function() {
        //can be called at any time to change editor mode
        pixie.setConfig('ui.mode', 'inline');
    }
});

Themes

Currently pixie ships with light and dark themes. These can be switch between freely via ui.theme option.

var pixie = new Pixie({
    ui: {
        defaultTheme: 'light'
    },
    onLoad: function() {
        //can be called at any time to change editor theme
        pixie.setConfig('ui.defaultTheme', 'dark');
    }
});

Export Panel

Export panel for letting user select file name, format and quality can be enabled via ui.showExportPanel option.

var pixie = new Pixie({
    ui: {
        showExportPanel: true
    },
});

Navigation

Navigation bar position can be changed via ui.nav.position option, it has three possible options top, bottom and none. Top and bottom will display navigation bar either above or below the photo, while none will hide it completely.

Navigation items are also completely configurable via ui.navigation.items config option.

Navigation item's action can either be a string matching one of the tools name, or a custom function.

var pixie = new Pixie({
    ui: {
        nav: {
            position: 'bottom',
            replaceDefault: true,
            items: [
                {name: 'filter', icon: 'filter-custom', action: 'filter'},
                {type: 'separator'},
                {name 'my button', icon: 'remove', action: function() {
                    alert('custom action');
                }}
            ],
        }
    }
});

Toolbar

Editor toolbar can be hidden completely via ui.toolbar.hide option. Open image, save image and close editor buttons can also be hidden via corresponding config option.

var pixie = new Pixie({
    ui: {
        toolbar: {
            hide: false,
            hideOpenButton: false,
            hideSaveButton: true,
            hideCloseButton: true,
        },
    }
});

Object controls

Drag and rotate handles, border around objects and other controls can be styled via objectDefaults config option.

var pixie = new Pixie({
    objectDefaults: {
        transparentCorners: false,
        borderOpacityWhenMoving: 1,
        cornerStyle: 'circle', //rect or circle
        cornerColor: '#ccc',
        cornerStrokeColor: '#fff',
        cornerSize: 16,
        strokeWidth: 0.05,
        lockUniScaling: true, //preserver aspect ratio when resizing via handle
    }
});

Compact mode

Compact mode can be enabled via ui.compact option, it should be used along with ui.mode inline when limited width for pixie is available. It will hide things like navigation bar separators so interface fits properly into available space.

var pixie = new Pixie({
    ui: {
        mode: 'inline',
        compact: true,
    }
});

Color presets

Presets for various color pickers in pixie interface can be specified via ui.colorPresets option.

var pixie = new Pixie({
    ui: {
        colorPresets: [
           '#000',
	       '#fff',
	       'rgb(242, 38, 19)',
	       'rgb(249, 105, 14)',
        ],
    }
});

Keybinds