stunning

Stunning

An extensive hardware-accelerated and cross-platform windowing (GUI) framework for NodeJS

Work in progress.

Stunning is based on StunningRenderer, a Java-based OpenGL renderer (https://github.com/anuraagvaidya/StunningRenderer).

This library is meant to help you create desktop, consumer-grade application using NodeJS. Although it currently only has GUI features to offer, we are working on including other essential desktop functions in the library such as networking, bluetooh This library has a lot to offer. Please hang on to your hats.

Basis

To achieve the ability to run on multiple platforms, the renderer is written in Java. In future, when building on node-gyp becomes smoother, we can rewrite the renderer in C++.

Install

npm install stunning

Usage

Static Object

var StunningLib=require('stunning');
var Stunning=StunningLib.Stunning; //Import Stunning
var Container=StunningLib.Container; //Import the Container tool

Stunning.on('ready',function(){
    var window=Stunning.createWindow();
    window.set({title:"My Window",width:800,height:600});
    window.on('create',function(){

        var textContainer=new Container(window,{width:500,height:200,text:'Type Something',foregroundColor: '#ffff00'});
        textContainer.event('keydown',function(data){
            textContainer.set({text:(textContainer.config.text || '')+String.fromCharCode(data.keyCode)});
        });

        var offset={left:0,top:0};
        var container0=new Container(window,{width:300,height:200,foregroundColor: '#ffff00'});
        container0.on('create',function(){
            setInterval(function(){
                container0.set({left:offset.left++,top:offset.top++});
            },100);
        });
        var container1=new Container(window,{width:300,height:200,foregroundColor: '#ffff'});
        container1.on('create',function(){
            setInterval(function(){
                container1.set({left:500-offset.left++,top:300-offset.top++});
            },100);
        });
    });
});

Styles supported

You can pass the below properties in the component.set() call.

• left -- Left offset in pixels
• top -- Top offset in pixels
• width -- Width in pixels
• height -- Height in pixels
• scrollTop -- Amount of pixels hidden under the parent in y direction in pixels
• scrollLeft -- Amount of pixels hidden under the parent in x direction in pixels
• zoom -- Zoom amount, should be between 0 and 1
• zoomLeft -- Zooming point in x direction
• zoomTop -- Zooming point in y direction
• foregroundColor -- Color code in Hexadecimal. e.g. #ff00ff or r,g,b,a format
• backgroundImage -- Path to a background image

Events supported

Events must be called with .event('<eventName>',function(data){ });

• click
• mouseenter
• mouseexit
• mousedown
• mouseup
• drag
• move
• keypress
• keydown
• keyup

Importing from Stunning Designer

There is an ongoing effort to allow developers to design GUI using Stunning by using drag and drop. For more info, check (https://github.com/anuraagvaidya/StunningDesigner). (Not yet ready)

var components=stunning.importFromFile("filename.stn");

var window=stunning.createWindow();
window.set("size",{height:700, width:1000}); //size in px
window.set("icon",{filename:"myicon.ico"});
window.add(components);

Current Support

Stunning currently supports the following features:

• Creation of multiple windows
• Creation of components
• Non-IO Events - create, style_applied, and render events
• IO Events - Mouse and keyboard events

Planned Support

We're considering the following things to be added in the rendering engine

• Richer components
• Easier Animation
• Covering the complete API from Stunning Renderer

Discussion and Feature Requests

If you need support, or want to discuss a feature, or want to request a new feature, feel free to contact me using Gitter at https://gitter.im/anuraagvaidya/stunning?utm_source=share-link&utm_medium=link&utm_campaign=share-link