Extending Qt Bridge

Qt, Bridge

Qt Design Studio is the latest offering from the Qt company. It is an easy-to-use design tool that allows designers to import designs from Sketch and Photoshop into Qt, animate and test them on the target hardware, and turn them into QML code that developers can use.

Qt Bridge is a plugin component for design tools such as Photoshop and Sketch. The plugin primarily allows designers to annotate the layers of a design document and export those annotations, along with the assets and DOM of the design document, into an intermediate format that can be imported into QDS. The plugin is developed using Javascript and uses the APIs provided by the design tools.

Qt Bridge plugin version 1.4 and above allows users to write JSX script to extend or customize the behavior of the Qt Bridge plugin for Photoshop. The settings screen allows the user to select their own script. The script is evaluated when the plugin is loaded.

APIs

The following APIs can be defined in a JSX file to customize or extend the behavior of Qt Bridge.

• preExport (documentInstance)

preExport(...) API is called before the PSD document is exported. The document instance is sent as an argument. The user can make changes to the document and, if necessary, undo those changes after the export is complete by defining the postExport(...) API.

• postExport (documentInstance)

postExport(...) API is called after the export of the PSD document. The document instance is sent as an argument. The user can make changes to the document instance. For example, you can undo changes made to a document in the preExport(...) API.

• customQmlId (generateQmlId, psdLayerInstance)

The API customQmlId(...) is called every time a default QML ID is generated for the PSD layer and the user can return a QML ID to be assigned to the layer. The g generatedQmlId parameter is the default QML ID generated by the Qt Bridge plugin for the layer, and the layerInstance parameter is the PSD layer object.

Note Return null to use the default generated QML identifier.

JSX override example:

The following script writes the beginning and end of the exported PSD document to the export.log file inside the home directory. QML identifiers are prefixed with "m_" and document and layer identifiers are removed.

myCustomScript.jsx

var logFile = null

preExport = function (documentInstance) {
    if (openLogFile("~/export.log")) {
        var date = new Date();
        logFile.writeln(date + ": Exporting: " + documentInstance.name);
    }
}

postExport = function (documentInstance) {
    if (logFile) {
        var date = new Date();
        logFile.writeln(date + ": Exporting done: " + documentInstance.name);
        logFile.close();
    }
}

customDefaultQmlId = function(generatedQmlId, psdLayerInstance) {
    return "m_" + generatedQmlId.replace(/_[0-9]*_[0-9]*$/g, "");
}


function openLogFile(path) {
    logFile = new File(path);
    var fileCreated = false;
    return logFile.open("w");
}