npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

stunning

v1.0.7

Published

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

Downloads

6

Readme

Stunning

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

Gitter

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:

  1. Creation of multiple windows
  2. Creation of components
  3. Non-IO Events - create, style_applied, and render events
  4. IO Events - Mouse and keyboard events

Planned Support

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

  1. Richer components
  2. Easier Animation
  3. 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