arrowup_inline

basysKom AnwendungsEntwicklung

Introducing the RiveQtQuickPlugin – Powerful Animations For Your QtQuick Applications
  • QML, Qt, Rive
Essential Summary
Rive is a popular tool for vector animations. While the editor itself is a closed source commercial product, there are FOSS implementations for the player runtime. basysKom has developed a QtQuick integration based on the rive-cpp library. This article introduces the project and its current state.
Wir helfen Ihnen gerne!
Professionelle Entwicklung Ihrer HMI

Sie benötigen ein Geräte-HMI, Ihnen fehlt es aber an Zeit oder speziellem HMI-Know-How?​

Warum Dienstleistungen von basysKom?

Von der Konzeption über die Implementierung bis zum Testen unterstützen wir Sie in der Entwicklung Ihrer individuellen HMI. Unsere Services umfassen zudem die Technische Beratung, individuelle Trainings, Coaching, Verstärkung Ihrer Entwicklungsteams bis hin zur vollständigen Auftragsabwicklung im gesamten Lebenszyklus Ihres Produktes.
Sprechen Sie uns an!

Motivation

Modern UIs tend to use small animations to guide and engage their users. Designers should be able to create and tweak this kind of animations without having to rely on software developers. Lottie is an established format for this kind of animations. Qt itself has native built-in support since 5.13. In addition there is also the lottie-qml project.

So why did we bother creating the RiveQtQuickPlugin?

Lottie has a few downsides.

  • Lottie files tend to be quite large both on storage as well as in memory when run. This is an issue especially on embedded devices.
  • Lottie is non-interactive. It is not possible to create interactive animations without involving a software developer.

RiveQtQuickPlugin: A Quick Overview

While the RiveQtQuickPlugin is currently still work in progress, it already provides the following features that enhance the functionality of your QtQuick/QML applications.

  • Rive and Qt Quick Integration:
    Import and manipulate Rive animations in your QtQuick/QML application, using simple QML types.
  • Dynamic Interaction:
    Create a lively user interface by responding to user interactions with the help of Rive animations. Rive animations can react on mouse hover or touch events directly, no need to for the developer to implement anything.
  • Multi-Platform-Multi-Qt:
    Qt5.15.2+ with Software and Hardware Rendering
    Qt6.5 with Software and Hardware Rendering

Getting Started

You can access RiveQtQuickPlugin on our GitHub repository here.

We have put together a detailed README to guide you through the setup, use and customization of the plugin.

Don’t forget to check out the examples demonstrating Rive animations within a QtQuick/QML context. These examples cover a wide range of use cases, from simple animations to complex interactions, which can serve as an excellent starting point for your projects.

The State of Development

The Plugin is released under LGPLv3+ and is still work in progress. There are some todos on our list that we are currently working on.
  • Anti-Aliasing for Hardware Rendering
  • Support GCC with the external Rive-Library
  • Improving the interface to QML
  • Plugin Documentation (once the Interface to QML is in a good shape)

Final Thoughts

We believe the RiveQtQuickPlugin will make building animations for QtQuick/QML applications a more creative, enjoyable, and streamlined process for developers and designers alike.

As always, we welcome feedback, suggestions, and queries from the community. Let’s continue our journey of technological innovation together!

Visit our GitHub to get started with RiveQtQuickPlugin today.

Happy coding!

Stay tuned to our blog for more updates, tutorials, and discussions about all things Qt and Rive.

Picture of Jeremias Bosch

Jeremias Bosch

Jeremias Bosch consults in his position as Technical Project Manager our customers in building embedded HMI applications, as well as the implementation of next generation cloud projects. He is responsible for the system/software-architecture and the development within customer projects as well as the agile project management. He has over 12 years of experience in developing HMIs and Web Applications. He has delivered multiple large and medium scale Qt Quick and cloud applications in industries such as automotive, aerospace and manufacturing engineering. He holds a diploma of computer science from the University of Applied Sciences in Isny. Is a certifed SCRUM Master and Product Owner as well as a certifed Qt Developer.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Weitere Blogartikel

Qt
Translating Qt Applications
Translating a Qt application, can be a daunting task. This is an overview from Qt 5 to Qt 6 and what new functionality Qt 6.7 brings.
OPC UA: Programming against Type Descriptions
OPC UA client code that relies on hardcoded NodeIds is brittle and often only works with a specific OPC UA server instance. This article shows the proper way to write robust and portable OPC UA client code.
Qt
About QML Efficiency: Compilers, Language Server, and Type Annotations
In our last post we had a look at how to set up QML Modules and how we can benefit from the QML Linter. Today we’re going to set up the QML Language Server to get an IDE-like experience in an editor of our choice. We’ll also help the the QML Compiler generate more efficient code.
Qt
How To Use Modern QML Tooling in Practice
Qt 5.15 introduced “Automatic Type Registration”. With it, a C++ class can be marked as “QML_ELEMENT” to be automatically registered to the QML engine. Qt 6 takes this to the next level and builds all of its tooling around the so-called QML Modules. Let’s talk about what this new infrastructure means to your application in practice and how to benefit from it in an existing project.
Qt
Use Compute Shader in Qt Quick
With this blog post, we introduce the QtQuickComputeItem – a Qt Quick item that allows you to easily integrate compute shader into your Qt Quick Code. Compute Shader are used to perform arbitrary computations on the GPU. For example, the screenshot below shows a Qt Quick application that generates Gray Scott Reaction Diffusion patterns.  The simulation is executed by a compute shader that is configured directly in QML.
COOL – Flutter for embedded systems – a new approach for industrial HMIs
Join us at the April 2024 edition of the OSADL COOL series to hear about using Flutter for Embedded Linux HMIs.

🗓️ Date & Time: 24th April 2024, 2 PM
🌐 Format: Online, 2-hour session
Get In Touch 1 basysKom, HMI Dienstleistung, Qt, Cloud, Azure

Heike Ziegler

Managing Director

Sprechen Sie uns an

Bitte aktiviere JavaScript in deinem Browser, um dieses Formular fertigzustellen.

Was ergibt 4 + 4 * 0?

Checkboxen
BasysKOM Newsletter
IHR DIGITALES UPDATE

Unser Newsletter hält Sie regelmäßig auf dem Laufenden. Wir informieren Sie über technologisch Relevantes und Neues.

Jetzt abonnieren! Spannend, gratis und natürlich können Sie sich jederzeit abmelden. Wir freuen uns auf Sie.

Einfach Ihre E-Mail eintragen

Einfach Ihre E-Mail eintragen Einfach Ihre E-Mail eintragen
Services
Technologien
Über uns

Folgen Sie uns

Xing Linkedin Youtube Facebook Github Rss

basysKom Newsletter

We collect only the data you enter in this form (no IP address or information that can be derived from it). The collected data is only used in order to send you our regular newsletters, from which you can unsubscribe at any point using the link at the bottom of each newsletter. We will retain this information until you ask us to delete it permanently. For more information about our privacy policy, read Privacy Policy