New QML based UI for old blueGO Emerald Demo

Few weeks ago we started an interesting collaboration demo project with Cybercom Sweden. They had a cool IVI demo when it comes to functionality, but it was missing a modern GUI. The old UI was Qt Widget based "Test UI" for testing functionality of a blueGO API, so it wasn't originally even designed for public demonstrations. Here is a screenshot of the old UI's Connect page to get a picture where we started:

We started the new UI from scratch, also meaning that we didn't have any UI design documents at that time and the spec was: follow the existing functionality from the old demo and focus on the graphics later. This meant that we didn't have any idea for example whether a button should display a text only, icon only or a text and icon both. In practice we didn't fine tune QML components too much beforehand, so what we did was a simple button which had a text and different behavior when pressing and releasing the button. Naturally it was emitting a signal on clicked. We used this approach for all custom QML elements we made. So, the interfaces for components were quite ok from the beginning and later we just added new a functionality there without breaking the old functionality.

Within 7-8 days since we started, we had pretty much all the functionality done and after that, we started to work on graphics. Graphics and UI layout designs came from Sweden, so we (developers) specified what our QML components needed from from the designer in order to satisfy their design specs and designers provided us the graphics for the components.

I think that QML makes life a lot easier when working with graphic designers, because it's not so big deal to change visual appearance of QML components afterwards. One thing that we took into account from the beginning was that all the components used anchored layouts as much as possible and we also used "Theme" object which contains things like font sizes, button and tab sizes, some colors and so forth. This way it's much easier  just change e.g. button height to something else and all the buttons will get that new height.  Here's the screenshot of the new UI's connect page to get a picture where we landed:

Refactoring the code

Naturally, when dealing bunch of old code, it means that some pieces of code needs refactoring. When we started to work on the project, first we checked what kind of architecture was in use in the old demo. Luckily, the architecture was layered one, so we could easily remove the old UI and start to use the underlying Emerald Qt API that was built on top of blueGO Bluetooth API.

The old Emerald Qt API provided nice encapsulation for hiding data and how it was handled internally. For example the paired and found devices were stored in QStringListModel model and the Emerald Qt API was updating it automatically. In practice this means that we get all the notifications about new and removed devices automatically. This was very convenient for us to start using that model directly with QML ListView Element. In order to make all this available to the QML based UI, we implemented a thin layer on top of old Emerald Qt API. Most of the stuff was just forwarding data, like the models of paired and found devices, but we needed to add e.g. Qt properties, Q_INVOKABLE methods and new signals which were used by the new QML UI.

Video

Video is always better than couple of screenshots and thousand words. In the next video we run the demo on Lenovo Ideapad S10-3t on Windows 7 and it runs quite nicely. As mentioned earlier, we use layouts and theming and therefore the UI scales quite nicely to other display resolution which is on the video a bit different than in the second screenshot above. We needed to blur and crop phone numbers from the video so video is a bit "jumpy" at some point. 

Thanks for reading Cybercom Channel!