Neglected Pizza Money

    qt5.jsx

    0.1.0 • Public • Published

    qt5.jsx

    Synopsis

    Qt API wrapper for JSX.

    This is a experimental version.

    Motivation

    It provides feature to create GUI in JSX.

    Code Example

    import "qt/qt.jsx";
    import "qt/qwidget.jsx";
    import "qt/qdialog.jsx";
    import "qt/qvboxlayout.jsx";
    import "qt/qpaintdevice.jsx";
    import "qt/qcolor.jsx";
    import "qt/qpolygon.jsx";
    import "qt/qpainter.jsx";
    import "qt/qpaintevent.jsx";
    import "qt/qtimerevent.jsx";
    import "qt/qpoint.jsx";
    import "qt/qpen.jsx";
    import "qt/qbrush.jsx";
    import "qt/qtimer.jsx";
    import "qt/qcoreapplication.jsx";
     
     
    class AnalogClock extends QWidget
    {
        var hourColor : QColor;
        var minuteColor : QColor;
        var hourHand : QPolygon;
        var minuteHand : QPolygon;
     
        function constructor()
        {
            super(null, Qt.WindowFlags(Qt.Widget));
            this.hourColor = new QColor(127, 0, 127, 255);
     
            this.minuteColor = new QColor(0, 127, 127, 191);
     
            this.hourHand = new QPolygon([new QPoint(7, 8),
                                          new QPoint(-7, 8),
                                          new QPoint(0, -40)]);
            this.minuteHand = new QPolygon([new QPoint(7, 8),
                                            new QPoint(-7, 8),
                                            new QPoint(0, -70)]);
            this.startTimer(1000, Qt.CoarseTimer);
     
            this.windowTitle = "Analog Clock";
            this.resize(200, 200);
        }
     
        override function timerEvent (event : QTimerEvent) : void
        {
            this.update();
        }
     
        override function paintEvent (event : QPaintEvent) : void
        {
            var side = Math.min(this.width, this.height);
            var time = new Date();
     
            var painter = new QPainter();
            painter.begin(this);
            painter.setRenderHint(QPainter.Antialiasing, true);
            painter.translate(this.width / 2, this.height / 2);
            painter.scale(side / 200.0, side / 200.0);
     
            painter.setPen(new QPen(Qt.NoPen));
            painter.setBrush(new QBrush(this.hourColor, Qt.SolidPattern));
     
            painter.save();
            painter.rotate(30.0 * ((time.getHours() + time.getMinutes() / 60.0)));
            painter.drawConvexPolygon(this.hourHand);
            painter.drawLine(0, 0, 100, 100);
            painter.restore();
     
            painter.setPen(this.hourColor);
     
            for (var i = 0; i < 12; ++i) {
                painter.drawLine(88, 0, 96, 0);
                painter.rotate(30.0);
            }
     
            painter.setPen(new QPen(Qt.NoPen));
            painter.setBrush(new QBrush(this.minuteColor, Qt.SolidPattern));
     
            painter.save();
            painter.rotate(6.0 * (time.getMinutes() + time.getSeconds() / 60.0));
            painter.drawConvexPolygon(this.minuteHand);
            painter.restore();
     
            painter.setPen(this.minuteColor);
     
            for (var j = 0; j < 60; ++j) {
                if ((% 5) != 0)
            painter.drawLine(92, 0, 96, 0);
                painter.rotate(6.0);
            }
            painter.end();
        }
    }
     
    class _Main {
        static function main (argv : string[]) : void
        {
            var clock = new AnalogClock();
            var dialog = new QDialog(null, null);
            var mainLayout = new QVBoxLayout();
            mainLayout.addWidget(clock, 1, null);
            dialog.setLayout(mainLayout);
            dialog.resize(200, 200);
            dialog.exec();
        }
    }

    Installation

    Setup Manually

    • Install build Qt 5.2.0

    Now prebuild interpreter for Windows needs mingw4.8 32 bit library.

    • Prepare prebuild interpreter.

    See: https://github.com/shibukawa/qtwidget.js/releases/

    • Install JSX

    npm install jsx or sudo npm install -g jsx.

    • Comple your code and deploy

    You can compile your code with the following command:

    jsx --add-search-path qt5.jsx/src --executable node --output yourcode.js youcode.jsx

    Compile your code and copy it as qtwidget.app/Content/Resources/js_src/main.js (for mac) or js_src/main.js (for windows).

    Executable(qtwidget.app, qtwidget.exe) doesn't include needed dynamic frameworks/libraries. You should have to collect them. See these documents. macdeployqt or windeployqt will help you.

    Recommended Process (future)

    It recommends create application via jsx-init

    $ npm install -g jsx-init
    $ jsx-init

    It provides template to initialize application of qt.jsx.

    After creating template, type the following command. It install all tools to build JSX:

    $ npm install

    Download runtime binary or build QtWidget runner and put it at the same folder. The following command creates .app file.

    $ grunt build
    

    Build Your own Interpreter

    See development section.

    API Reference

    See doc folder and Qt 5.2 document.

    Development

    Repository

    Checkout qtwidget.js repository and run makebinding.sh or makebinding.bat then you will get JS to Qt binding and JSX to JS binding and document.

    To add more class support, you should modify qtwidget/third_party/qtscriptgenerator/generator/typesytem_*.

    If you want to add more modules, you should add type system XML files and project files at qtwidget/third_party/qtscriptgenerator/qtbindings.

    Author

    License

    MIT

    Complete license is written in LICENSE.md.

    Keywords

    none

    Install

    npm i qt5.jsx

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • shibu