This was a fun project to build and experiment with. It is not to be taken seriously. A QT style UI in JS and WebGL would be too slow and bulky.

My goal was to learn about QT's layout system, create a JS framework from scratch and setup continuous integration and automated testing with travis-ci.

---

Sabertooth

A hardware accelerated UI framework for JavaScript.

Sabertooth is inspired by QT, uses super-fast PIXI.js under-the-hood and renders in webGL with canvas fallback. Widgets are extensions of PIXI.Container and have most of those properties, such as tint, alpha, blending modes and filters(shaders). Custom widgets and custom styling are easily accomplished by sub-classing existing widgets and modifying or creating new style sheets.

• Documentation

(travis ci fails because the project has not been maintained and dependencies are out of date)

---

Get Started

The easiest way to get started with Sabertooth is to download the latest release.

Example:

<script src="Sabertooth.min.js"></script>
<script>
    let app = new ST.App(/*options*/);

    let tb = new ST.Widgets.TextButton(app.root, {
        text: 'My Button',
        x: 100,
        y: 100,
        width: 200,
        height: 30,
    });

    // Set a click callback
    tb.on('click', ()=>{
        console.log('My Button Was Clicked!');
    });

    //main loop
    let main = function () {
        app.update(); // Update UI logic
        requestAnimationFrame(main); // Loop
    }

    main(); // Begin the main application loop
</script>

Install with npm:

 $> npm install Sabertooth

Example:

import * as ST from 'sabertooth'; // for es6 modules

let app = new ST.App(/*options*/);

let tb = new ST.Widgets.TextButton(app.root, {
    text: 'My Button',
    x: 100,
    y: 100,
    width: 200,
    height: 30,
});

// Set a click callback
tb.on('click', ()=>{
    console.log('My Button Was Clicked!');
});

//main loop
let main = function () {
    app.update(); // Update UI logic
    requestAnimationFrame(main); // Loop
}

main(); // Begin the main application loop

Test

gulp test

To build locally:

• Fork Sabertooth
• Clone
• CD to the project directory
• Install dependencies:

npm install

Build:

gulp

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Zach Moore - initial work - @Zachacious

See also the list of contributors who participated in this project.

License

This project is licensed under the ISC license. See LICENSE.md for more details.

Acknowledgements

Special thanks to:

• GoodBoyDigital - Pixi.js
• Primus - EventEmitter3

Questions?

Please contact AbydosDigital@gmail.com with any further questions.