brig

by BrigJS

BrigJS / brig

User Interface Toolkits for Node.js

202 Stars 20 Forks Last release: over 3 years ago (0.1.17) MIT License 182 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Brig

A user interface toolkit for Node.js, which is based on Qt for rendering. This project can be used to load and play QML file, make it possible to have a easy way to communicate between QML and Node.js for desktop application.

NPM

The JavaScript in QML is limited, so
Brig

The JavaScript in QML is limited, which is used for QML components control only. If developer need more functions that something's like system calls(FileSystem, Socket, crypto ...etc) or using external libraries, C/C++ is the only way to make it.

In order to make QML application in pure JavaScript possible,

Brig
provides a way to use Node.js to extends QML without C/C++. That means developer can do more thing in QML with NPM modules and Node.js APIs.

Requirements

Ensure Qt 5+ tookits and Node.js 0.10+ are ready to go on your system.

For MacOSX user, no need to install Qt development environment for brig anymore. :-)

Known Issues

  • Failed to build brig for Qt 5.8+

Installation

Install module via NPM

npm install brig

Get Started

There is a simple way to go by loading existed QML file, so you can prepare a QML content like below:

Application.qml ```qml import QtQuick 2.3 import QtQuick.Controls 1.0

ApplicationWindow { visible: true; color: 'black'; title: 'Brig Demo'; width: 640; height: 480;

Text {
    anchors.centerIn: parent;
    text: 'Brig';
    font.family: 'Helvetica';
    font.bold: true;
    font.pointSize: 72;
    color: '#00ffcc';
    scale: 0;
    opacity: 0;

Text {
    anchors.topMargin: 10;
    anchors.top: parent.bottom;
    anchors.horizontalCenter: parent.horizontalCenter;
    text: 'QML Application in Node.js';
    font.family: 'Helvetica';
    font.pointSize: 16;
    color: '#e6fffa';
}

Behavior on opacity {
    NumberAnimation {
        duration: 800;
        easing.type: Easing.OutCubic;
    }
}

Behavior on scale {
    NumberAnimation {
        duration: 1000;
        easing.type: Easing.OutBack;
    }
}

Component.onCompleted: {
    opacity = 1.0;
    scale = 1.0;
}

}

} ```

Then using

Brig
to load file in Node.js:
var Brig = require('brig');

var brig = new Brig();

brig.on('ready', function(brig) {

// Loading QML file to play brig.open('Application.qml', function(err, window) { // window was opened }); });

Customized Type

(This is experimental feature, API might be changed in the next version)

You can create a customized type in order to expose some APIs or functionality from Node.js to QML, see below:

var myQmlType = brig.createType('MyItem', {
    property: {
        prop1: 123
    },
    method: {
        'readFile(a)': function(filename) {
            return require('fs').readFileSync(filename).toString();
        }
    },
    signal: [
        'test(a)'
    ]
});

// Triggered when instance of customized type was created myQmlType.on('instance-created', function(instance) {

// Signals
instance.on('test', function(a) {
    // test(a) signal was emitted
    console.log(a);
});

});

In QML, we can import customized type with its type name and use it directly:

import Brig.MyItem 1.0

Usage:

MyItem {
    // attributes...
}

Examples

Some exmaples you can found which used brig:

Demonstration

Here is a great countdown timer with

Brig
for hackathon event to show off, you can click image to play YouTube video:

Countdown Timer (clicks to play video)

License

Licensed under the MIT License

Authors

Copyright(c) 2015-2017 Fred Chien <[email protected]>

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.