brig v0.1.17
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:
License
Licensed under the MIT License
Authors
Copyright(c) 2015-2017 Fred Chien <cfsghost@gmail.com>
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
12 years ago