SparkQML - A QML Document Viewer for State and Transition Preview
-
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.
Features
- Load and display QML document
- Show all available states of the QML document. Allow to change for transition effect preview
- Capture screenshot of component to file / clipboard
- 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
-
Copy the executable built in previous step to somewhere you like
-
In menu, press "Tools" -> "External" -> "Configure"
-
Then press "Add" -> "Add Tool". Drag the newly created tool under "Qt Quick" category
You may rename it to “SparkQML Viewer"
- 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]
-
Hi,
Thanks for sharing !
-
v0.2 has been released!
New Features
- Component Browser - Browse a folder of component with preview of image
- Resize to Fit - Change the component size to fit current window
- Error Panel - Show the error of loading. Auto reload is supported.
-
This post is deleted! -
This post is deleted!