SparkQML - A QML Document Viewer for State and Transition Preview


  • Qt Champions 2016

    SparkQML

    SparkQML is a utility that loads and displays QML document like the qmlscene from Qt SDK.
    However, it could also show all the available states of the component and change to specific state with transition effect. It is useful to preview the animation of a state and transition effect between states.

    Remarks: The project is still in an early stage. The current version is proof-of-concept prototype. If you find any problem, please free free to submit an issue.

    Screenshot

    Features

    1. Load and display QML document
    2. Show all available states of the QML document. Allow to change for transition effect preview
    3. Capture screenshot of component to file / clipboard
    4. Read QML_IMPORT_PATH from a file generated by qmake. Easy to integrate with Qt Creator

    Command Line Arguments

    sparkqml <filename> [qmlimport.path]
    

    filename - The QML file name

    qmlimport.path - A file that provides the value of QML_IMPORT_PATH. If this parameter is missing, sparkqml would try to search the file started from the document path to root folder.

    Build Instruction

    Download and extract the release file from github. Then:

    cd app/sparkqml
    qpm install
    qmake
    make
    

    Integration with Qt Creator

    1. Copy the executable built in previous step to somewhere you like

    2. In menu, press "Tools" -> "External" -> "Configure"

    3. Then press "Add" -> "Add Tool". Drag the newly created tool under "Qt Quick" category

    You may rename it to “SparkQML Viewer"

    1. Fill in the following values
    Executable : The path to the executable
    
    Arguments: %{CurrentDocument:FilePath} %{CurrentProject:Path}/qmlimport.path
    

    It is done. Now you could trigger SparkQML while editing a QML file by “Tools” -> "External" -> "Qt Quick" -> "SparkQML Viewer"

    QML_IMPORT_PATH

    In case SparkQML can’t display your QML file due to “xxx is not installed” error.
    Probably is because it can’t locate your package.
    To fix this problem, you may add the following lines at the end of your pro file:

     write_file(qmlimport.path, QML_IMPORT_PATH)
    

    Then run qmake.
    It will create a file called qmlimport.path with the value of QML_IMPORT_PATH.
    You may add this file to your .gitignore.

    Restart SparkQML. Now it would know where to find packages.

    [Moved to Showcase ~kshegunov]


  • Lifetime Qt Champion

    Hi,

    Thanks for sharing !


  • Qt Champions 2016

    v0.2 has been released!

    New Features

    1. Component Browser - Browse a folder of component with preview of image
    2. Resize to Fit - Change the component size to fit current window
    3. Error Panel - Show the error of loading. Auto reload is supported.

    Component Browser


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.