Html css and js plugin frontend with ease
Fiddling with codes from decovar, I come up with a boilerplate to provide hybrid UI with WebEngine and WebChannel
Skilled web dev can use HTML CSS and JS to build plugin frontend as alternative to QML types, the WebEngine is based on an outdated Chromium/Chrome version 56 though, check tech compatibility on caniuse.com
Comments
Thanks for sharing.
A good example of this technic is the Harmony Analyzer plugin.
In reply to Thanks for sharing. A good… by parkingb
2 boilerplates:
The simpler version use WebEngineView in the way the Harmony Analyzer plugin does, it fetches html and inject js from QML/Musescore side only.
The other more advanced boilerplate contains WebChannel module, it address web devs' need to run QML functions from the frontend html side, demo plugin. It essentially replaces QML UI, users can click or type something on a webpage, online or local one, to trigger an action in MuseScore.
I use a non-QML frontend because it's easier to build a UI that allows clicking multiple buttons with one mouse press and drag. Suggestions for making this with QML UI found online involves topping everything with a master MouseArea and doing pixel calc, it doesn't quite fit in object oriented buttons design, see notes. Another suggestion advises meddling with QtWidget from QML, I find myself dizzy trying to read it.
Musicians can create a plugin using the advanced boilerplate plus some html, css and js (these 3 have many resource readily available online) plus the API functions, which are also js. Learning of the QML UI language is reduced to minimal. I hope this would make plugin dev more accessable.
Side note: Though not really related to plugin dev, anyone interested in setting up a server or working with musescore data online can also check out webmscore, a libmscore in WebAssembly.