{"id":5768,"date":"2023-10-30T11:07:26","date_gmt":"2023-10-30T10:07:26","guid":{"rendered":"https:\/\/www.basyskom.de\/?page_id=5768"},"modified":"2024-07-18T15:21:34","modified_gmt":"2024-07-18T13:21:34","slug":"embed-rive-in-your-qtquick-applications","status":"publish","type":"post","link":"https:\/\/www.basyskom.de\/en\/embed-rive-in-your-qtquick-applications\/","title":{"rendered":"Embed Rive in your QtQuick applications"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5768\" class=\"elementor elementor-5768\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aca4cca e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"aca4cca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-86edbaa elementor-widget elementor-widget-text-editor\" data-id=\"86edbaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A few weeks ago, <a href=\"https:\/\/www.basyskom.de\/2023\/introducing-the-riveqtquickplugin-powerful-animations-for-your-qtquick-applications\/\">we introduced the RiveQtQuickPlugin<\/a>. Rive is a tool (and file format) that enables you to create interactive vector animations. With the RiveQtQuickPlugin, you can effortlessly load and display Rive animations within your QtQuick projects. For a more comprehensive understanding, please delve into our detailed blog post linked above.<\/p><p>In this article, we will demonstrate how to embed <a href=\"https:\/\/rive.app\/use-cases\" target=\"_blank\" rel=\"noopener\">Rive files<\/a>, use different rendering backends, load artboards and trigger animations.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6838c31 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"6838c31\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-179e9ef elementor-widget elementor-widget-heading\" data-id=\"179e9ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Hello Rive<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71e46ab e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"71e46ab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26c517a elementor-widget elementor-widget-text-editor\" data-id=\"26c517a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span class=\"inline-comment-marker\" data-ref=\"08936601-f00f-4fa1-a8ff-5d54d0b7c85c\">Embedding a Rive animation is as simple as showing a QtQuick Image element. The following QtQuick snippet illustrates this.<br \/><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe60696 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"fe60696\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78cf222 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"78cf222\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-javascript'>import QtQuick 2.15\nimport QtQuick.Window 2.12\n \nimport RiveQtQuickPlugin 1.0\n \nWindow {\n    id: window\n \n    width: 400\n    height: 400\n    visible: true\n    color: &quot;#293133&quot;\n \n    RiveQtQuickItem {\n        id: riveItem\n        anchors.fill: parent\n        fillMode: RiveQtQuickItem.PreserveAspectFit\n \n        \/\/ not used by software backend\n        renderQuality: RiveQtQuickItem.Medium\n        postprocessingMode: RiveQtQuickItem.SMAA\n \n        fileSource: &quot;:\/assets\/travel-icons-pack.riv&quot;\n    }\n \n    Text {\n        id: errorMessage\n        anchors.centerIn: parent\n        width: window.width\n        horizontalAlignment: Text.AlignHCenter\n        font.pointSize: 24\n        color: &quot;crimson&quot;\n        text: qsTr(&quot;Could not load rive file:\\n&quot;) + riveItem.fileSource \n        visible: riveItem.loadingStatus === RiveQtQuickItem.Error\n    }\n \n}\n\n <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-278afdc e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"278afdc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33c4393 elementor-widget elementor-widget-text-editor\" data-id=\"33c4393\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here we open a Rive file that is stored in the Qt resource system.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f8a7dd1 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"f8a7dd1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c69d87 elementor-widget elementor-widget-image\" data-id=\"6c69d87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"764\" height=\"691\" src=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_hellorive.png\" class=\"attachment-large size-large wp-image-5772\" alt=\"Hello Rive\" srcset=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_hellorive.png 764w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_hellorive-300x271.png 300w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_hellorive-560x506.png 560w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-04e0baa e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"04e0baa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea47241 elementor-widget elementor-widget-heading\" data-id=\"ea47241\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Rendering targets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fbda3d5 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"fbda3d5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a10620 elementor-widget elementor-widget-text-editor\" data-id=\"7a10620\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tQtQuick is famous for enabling hardware-accelerated rendering. Still, there exists embedded hardware without an integrated GPU. To address this, QtQuick provides a software rasterizer that relies on QPainter.\n\nThe RiveQtQuickItem supports both backends: We implemented a QPainter based software renderer and a backend that uses Qt&#8217;s new Rendering Hardware Interface (RHI). That means you get hardware-accelerated rendering across multiple platforms, including OpenGL (ES), DirectX (Windows), Metal (Apple), all readily available.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-740295f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"740295f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5391b34 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"5391b34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-c'>#include &lt;QGuiApplication&gt;\n#include &lt;QQmlApplicationEngine&gt;\n#include &lt;QtQuick\/QQuickWindow&gt;\n \nint main(int argc, char **argv)\n{\n    QQuickWindow::setGraphicsApi(QSGRendererInterface::OpenGL);\n     \n    QGuiApplication app(argc, argv);\n    QQmlApplicationEngine engine(&quot;qrc:\/main.qml&quot;);\n    return app.exec();\n} <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-38f80a6 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"38f80a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40e325b elementor-widget elementor-widget-text-editor\" data-id=\"40e325b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This snippet is the C++ part to load the main qml file. <span style=\"color: #993366;\"><em>QQuickWindow::setGraphicsApi(QSGRendererInterface::OpenGL);<\/em><\/span>\u00a0 sets the graphics API to OpenGL. Change it to <span style=\"color: #993366;\"><em>QQuickWindow::setGraphicsApi(QSGRendererInterface::Software); <\/em><\/span><span class=\"inline-comment-marker valid active\" data-ref=\"bbdaab6c-4697-4bfe-9749-edd1e6e71c74\">if you prefer the software backend<\/span>. Alternatively, set the environment variable <a href=\"https:\/\/doc.qt.io\/qt-6\/qtquick-visualcanvas-scenegraph-renderer.html#rendering-via-the-qt-rendering-hardware-interface\" target=\"_blank\" rel=\"noopener\"><em>QSG_RHI_BACKEND<\/em><\/a> to an RHI target to test the RiveQtQuickPlugin with different rendering backends.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9293f5a e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"9293f5a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9db6ac elementor-widget elementor-widget-heading\" data-id=\"c9db6ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">RiveQtQuickPlugin properties<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-25fad0b e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"25fad0b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b98235 elementor-widget elementor-widget-text-editor\" data-id=\"4b98235\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span class=\"inline-comment-marker valid\" data-ref=\"8f4f4e02-f2f7-41d2-a8ab-8757bfc02f73\">While the usage of RiveQtQuickItem is straightforward, it offers various properties to tweak the output. So let&#8217;s get back to the QML snippet and explore them further.<br \/><\/span><\/p><p>The <span style=\"color: #993366;\">fillMode<\/span> property accepts three values for handling non-matching aspect ratios between the QtQuick item and the Rive scene: Stretch, PreserveAspectFit and PreserveAspectCrop. The default property is PreserveAspectFit, which maintains the scene&#8217;s aspect ratio by scaling and centering the Rive graphic. PreserveAspectCrop crops the scene at the item&#8217;s borders, Stretch stretches and warps the scene to fill the entire item.<\/p><p>The next two properties exclusively pertain to RHI backends, as they optimize the triangulation of vector graphics and enhance output through anti-aliasing.<\/p><p><br \/>The <span style=\"color: #993366;\">renderQuality<\/span> property offers a choice of three values: Low, Medium and High. Pictures speak louder than a thousand words, so we&#8217;ll illustrate the differences with two screenshots.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-24a2510 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"24a2510\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2673b2 elementor-widget elementor-widget-image\" data-id=\"f2673b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"735\" height=\"324\" src=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_renderQuality.png\" class=\"attachment-large size-large wp-image-5774\" alt=\"Impact of the property renderQuality\" srcset=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_renderQuality.png 735w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_renderQuality-300x132.png 300w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_renderQuality-560x247.png 560w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Low (Left), High (right)<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ac4e0bc e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"ac4e0bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d03af6 elementor-widget elementor-widget-text-editor\" data-id=\"7d03af6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can observe, when triangulating the shapes, a renderQuality set to High emits additional geometry, albeit at the cost of a slight performance dip.<\/p><p>The <span style=\"color: #993366;\">postprocessing<\/span> property is responsible for anti-aliasing. You can configure it with one of two options: None, which signifies no anti-aliasing, or SMAA, which implements <a href=\"https:\/\/github.com\/iryoku\/smaa\" target=\"_blank\" rel=\"noopener\">Subpixel Morphological Antialiasing<\/a> as a postprocessing step. To summarize the algorithm, SMAA blends the input image with a weighted edge image, involving three additional rendering passes (edge detection pass, weighting pass and blending pass), which does come with a performance penalty. In the screenshot, you can clearly observe the jaggies when SMAA is turned off. On the right side, we present the same image with SMAA enabled. Particularly in animations, these jaggies can be quite bothersome as they lead to flickering edges between frames.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a3e2b1 elementor-widget elementor-widget-image\" data-id=\"7a3e2b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"732\" height=\"330\" src=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_postprocessing.png\" class=\"attachment-large size-large wp-image-5771\" alt=\"The impact of the postprocessing property\" srcset=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_postprocessing.png 732w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_postprocessing-300x135.png 300w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_postprocessing-560x252.png 560w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d91fe64 elementor-widget elementor-widget-heading\" data-id=\"d91fe64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Artboards and Animations<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-51e851a e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"51e851a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8cb4285 elementor-widget elementor-widget-text-editor\" data-id=\"8cb4285\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>At the core of a Rive file lies a concept called artboards. Every Rive scene consists of at least one artboard. To illustrate, let&#8217;s consider a messaging app as an example. In most modern messaging apps, users can include animated emojis. You could potentially distribute one Rive file for an animated laughing smiley, another for a beating heart, and so on. However, it&#8217;s far more convenient to consolidate these emojis into a single file and then choose the appropriate emoji at runtime. This is where artboards come in place.<\/p><p>Each artboard can be equipped with a variety of animations, all of which can be selected and displayed dynamically during runtime.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d6af3bb e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"d6af3bb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c98e8d9 elementor-widget elementor-widget-image\" data-id=\"c98e8d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"587\" src=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_artboards_animations.png\" class=\"attachment-large size-large wp-image-5773\" alt=\"Artboards and animations\" srcset=\"https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_artboards_animations.png 853w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_artboards_animations-300x220.png 300w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_artboards_animations-768x564.png 768w, https:\/\/www.basyskom.de\/wp-content\/uploads\/2023\/10\/Rive_artboards_animations-560x411.png 560w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c74041f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"c74041f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b7a8dd elementor-widget elementor-widget-text-editor\" data-id=\"6b7a8dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here is the code for a minimal app to facilitate artboards and animations.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-44c2495 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"44c2495\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3719258 elementor-widget elementor-widget-elementor-syntax-highlighter\" data-id=\"3719258\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementor-syntax-highlighter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre><code class='language-javascript'>import QtCore\nimport QtQuick\nimport QtQuick.Layouts\nimport QtQuick.Controls\n \nimport RiveQtQuickPlugin\n \nApplicationWindow {\n    id: window\n \n    property int contentWidth: 600\n    property int controlPanelWidth: 250\n \n    width: contentWidth + controlPanelWidth\n    height: 600\n    visible: true\n    color: &quot;#444c4e&quot;\n \n    title: qsTr(&quot;Rive Plugin Demo&quot;)\n \n    Item {\n        id: content\n        anchors {\n            top: parent.top\n            bottom: parent.bottom\n            left: parent.left\n            right: controlPanel.left\n        }\n \n        RiveQtQuickItem {\n            id: riveItem\n            anchors.fill: parent\n            fillMode: RiveQtQuickItem.PreserveAspectFit\n \n            \/\/ not used by software backend\n            renderQuality: RiveQtQuickItem.Medium\n            postprocessingMode: RiveQtQuickItem.SMAA\n \n            fileSource: &quot;:\/assets\/travel-icons-pack.riv&quot;\n        }\n \n        Text {\n            id: errorMessage\n            anchors.centerIn: parent\n            width: window.width\n            horizontalAlignment: Text.AlignHCenter\n            font.pointSize: 24\n            color: &quot;crimson&quot;\n            text: qsTr(&quot;Could not load rive file:\\n&quot;) + riveItem.fileSource \n            visible: riveItem.loadingStatus === RiveQtQuickItem.Error\n        }\n \n        DropArea {\n            id: dropArea\n            anchors.fill: parent\n            onEntered: {\n                drag.accept(Qt.LinkAction)\n            }\n            onDropped: {\n                riveItem.fileSource = drop.urls[0].toString().slice(7)\n            }\n        }\n    }\n \n    Rectangle {\n        id: controlPanel\n         \n        anchors {\n            top: parent.top\n            bottom: parent.bottom\n            right: parent.right\n        }\n \n        width: controlPanelWidth\n \n        color: &quot;#203133&quot;\n \n        Rectangle {\n            id: separator\n            anchors {\n                top: parent.top\n                bottom: parent.bottom\n                left: parent.left\n            }\n            width: 2\n            color: &quot;black&quot;\n            opacity: 0.3\n        }\n \n        Column {\n            id: column\n \n            anchors {\n                fill: parent\n                leftMargin: 16\n                rightMargin: 16\n                topMargin: 32\n            }\n \n            spacing: 8\n \n            Label {\n                width: parent.width\n                wrapMode: Label.Wrap\n                horizontalAlignment: Qt.AlignLeft\n                text: qsTr(&quot;Artboards&quot;)\n            }\n \n            ComboBox {\n                model: riveItem.artboards.map(artboard =&gt; artboard.name)\n                anchors.left: parent.left\n                anchors.right: parent.right\n \n                onActivated: (index) =&gt; riveItem.currentArtboardIndex = index\n            }\n \n            Item { width: 1; height: 32 }\n \n            Label {\n                width: parent.width\n                wrapMode: Label.Wrap\n                horizontalAlignment: Qt.AlignLeft\n                text: qsTr(&quot;Animations&quot;)\n            }\n \n            ComboBox {\n                model: riveItem.animations.map(animation =&gt; `${animation.name} (${animation.duration} ms)`)\n                anchors.left: parent.left\n                anchors.right: parent.right\n \n                onActivated: (index) =&gt; riveItem.currentAnimationIndex = index\n            }\n \n        }\n \n    }\n \n} <\/code><\/pre><script>\nif (!document.getElementById('syntaxed-prism')) {\n\tvar my_awesome_script = document.createElement('script');\n\tmy_awesome_script.setAttribute('src','https:\/\/www.basyskom.de\/wp-content\/plugins\/syntax-highlighter-for-elementor\/assets\/prism2.js');\n\tmy_awesome_script.setAttribute('id','syntaxed-prism');\n\tdocument.body.appendChild(my_awesome_script);\n} else {\n\twindow.Prism && Prism.highlightAll();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a76d02f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"a76d02f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29f5746 elementor-widget elementor-widget-text-editor\" data-id=\"29f5746\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When the app is launched, it begins by loading a basic Rive file. Also, users are able to drag and drop a Rive file onto the window. To access the different artboards and animations, the user can utilize the comboboxes situated on the right-hand side.<\/p><p>All available artboards and animations can be conveniently accessed through the artboard and animation properties. You can create a mapping of artboards (animations) to their respective names and bind these names to the model property of the ComboBox. Changing the current artboard (animation) is as straightforward as setting the current index.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ffb6c9f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"ffb6c9f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b602406 elementor-widget elementor-widget-heading\" data-id=\"b602406\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-43904b5 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"43904b5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-683f471 elementor-widget elementor-widget-text-editor\" data-id=\"683f471\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After reading this blog post, you should be able to integrate Rive animations in your applications. We demonstrated the use of software and GPU-accelerated backends and <span class=\"inline-comment-marker\" data-ref=\"1499dd92-2935-4598-bbcd-70fce689610a\">how to<\/span> switch between artboards and animations. Stay tuned for future blog posts when we present further capabilities you can unlock with the RiveQtQuickPlugin.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Learn how to use Rive within Qt and Qt Quick.<\/p>\n<p>Rive is a tool (and file format) that enables you to create interactive vector animations. With the RiveQtQuickPlugin, you can effortlessly load and display Rive animations within your QtQuick projects.<\/p>\n<p>In this article, we will demonstrate how to embed Rive files, use different rendering backends, load artboards and trigger animations.<\/p>","protected":false},"author":16,"featured_media":8386,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1,2,7,8],"tags":[15,259,257],"class_list":["post-5768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-blog","category-general","category-qt","tag-qt","tag-qt-quick","tag-rive"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/5768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/comments?post=5768"}],"version-history":[{"count":32,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/5768\/revisions"}],"predecessor-version":[{"id":10799,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/5768\/revisions\/10799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media\/8386"}],"wp:attachment":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media?parent=5768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/categories?post=5768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/tags?post=5768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}