brig

0.1.17 • Public • Published

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. That means developer is able to write desktop application in QML with pure JavaScript.

NPM

Requirements

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

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

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 <cfsghost@gmail.com>

Readme

Keywords

Package Sidebar

Install

npm i brig

Weekly Downloads

8

Version

0.1.17

License

none

Last publish

Collaborators

  • fredchien