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.

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:

• Example App
  • Example application for a demo
• FishFarming
  • Web browser
• Hankathon
  • A countdown timer for hackathon event

Demonstration

Here is a great countdown timer with Brig for hackathon event to show off, you can click image to play YouTube video:

(clicks to play video)

License

Licensed under the MIT License

Authors

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