2021-03-01
CL REPL & QML Creator
android <= 10 only
Thanks to a blog and following reddit comments, I felt motivated to extend the CL REPL for displaying QML files. And since there already exists a nice mobile app for developing QML, namely QML Creator, I tried to make a basic example integrating the both.
For this integration of 'CL REPL' and 'QML Creator' to work flawlessly, I needed to fork QML Creator and extend it a little for this purpose.
Here the result, a simple canvas drawing any function graph of a given range. This example is already integrated in the latest update of CL REPL (see <home>/examples/QML/Draw/):
And here is how it looks like to develop in QML Creator:
An interactive session
To try it yourself, you'll need:
- CL REPL 1.0.47 (tested with android 6 to 10)
- QML Creator 1.2.3.4 (tested with android 6 to 10) from cl-repl.org (sources)
- the sources of this example, see Draw
After installing and running QML Creator (in order to have the storage directories created), copy the example where QML Creator can find it. From the CL REPL run:
(shell "cp -r examples/QML/Draw /sdcard/Documents/QML\\ Projects/Examples/")So, QML Creator uses the globally accessible directory Documents/QML Projects/ as storage location, so we can easily access it from both the CL REPL and QML Creator.
First we run the QML part, to see if it works. After launching QML Creator, open Examples/Draw/main.qml and tap on the 'Run' button (top right). It will show the following:
So, our version of QML Creator is prepared for EQL5, but since Lisp is not available here, it just shows a message box with the function name, the caller and the arguments. The caller will always be QObject(0x0) if not passed as first argument to Lisp, like in Lisp.call(this, "my:test").
After confirming the message box, we can see that the QML part works:
We can also tap on the buttons, to see if they work. Here both 'minimize/maximize' and 'close' work as expected, while 'reload' will again show a message box with the Lisp function name.
Now launch CL REPL and open <document icon>/Documents/QML Projects/Examples/Draw/main.lisp and eval the file.
The last step is opening <document icon>/Documents/QML Projects/Examples/Draw/main.qml from within the CL REPL:
You may now want to minimize the canvas (central button on top):
There is enough space now to change either the function or the range, select and eval them, and tap on 'reload' on the top left, which will apply the changes to the graph.
If we want to make changes to QML, we can do so in QML Creator, which will save the changes when tapping on 'Run' (top right). If it displays correctly without error, we may reload the new version from the CL REPL, and our interactive development has now gone full circle!
Your own projects
If you tap 'Restore the examples' in QML Creator, any content therein will be deleted, and only the original examples restored. So, for your own projects, choose 'Projects', where you can create new projects and files. For convenience you probably want to save your Lisp files in the same directory as the respective QML files.