Custom GUI - J.A.R.V.I.S. Themed

Hi everyone,

I’m quite new to the Mycroft AI project, tough I installed it once on a raspberry pi and read up and took a look on the source code the last few weeks.
My idea is to use a Jetson Nano /Xavier NX or a Lattepanda (not quite sure which one is better suited for the tasks I had in mind) for Mycroft and make it communicate with a variety of sensors, that are controlled by a microcontroller (Sensor types: Temperature, humidity, air quality, etc). This seems rather doable and possible to integrate.
What I’m wondering more about (as I’m not realy into GUI programming etc.) is how to make a custom standard GUI, rather than use the one that is provided by Mycroft.
As a theme I’d like to have a J.A.R.V.I.S. like apperance simmilar to the one presented here, which would only be a starting point and would be heavily modified from me:

Does anyone know if something simmilar has been already done in terms of the GUI, which I could build on?
Otherwise it would be really helpful to have a better understanding on how to override or change the current GUI.
I mean the HTML code looks okay and getting python backend functionality would probably be not that much of a problem, but integrating it into Mycroft is where I’m not quite sure how to do it.

Thanks for any advice in advance :slight_smile:

2 Likes

you could design this in QML and set it as the default homescreen in mycroft-gui, if you want to write your own GUI using a different language / framework, you might need to implement your own gui protocol over web sockets or implement a similar one to mycroft-gui, example mycroft-gui protocol: mycroft-gui/transportProtocol.md at master · MycroftAI/mycroft-gui (github.com)

Hi
sorry for the late reply, but my laptop broke - so I couldn’t really work on it.
So I followed your advice and started to build something simmilar in Qt / pure QML.
Do you think it makes more sense to build this in KDE / Kirigami or implement it purely in QML?
Sorry - real beginner if it comes to programming UIs.

if you are building it in qml would suggest you to see the Mycroft GUI skills qml interface documentation GUI Framework - Mycroft AI

Kirigami does provide a ton additional helpful qml components like card layouts, form layouts etc specially if your designing your interface to be convergent as in support different form factors, or don’t want to write your own components for functionality that already exist, but you could also look into developing the same with purely qml components which would be designing your own components depending on what you want to display. So would suggest decide based on design and trying out different components to see what suits your UI look and feel the best.

Personally I use a mix of all three Mycroft, Kirigami and QML Components depending on what I want to achieve.

You can also look at the ui source of some existing homescreen qml skills and how they have been done: