RSS Validator Results: http://planet.qt-project.org/rss20.xml

RSS Validator

This service tests the validity of an RSS 2.0 feed, checking to see that it follows the rules of the RSS specification. For advice from the RSS Advisory Board on how to implement RSS and handle issues such as enclosures and HTML encoding, read the RSS Best Practices Profile. This checker is also a validator of Atom and RSS 1.0 feeds.

Use this tester regularly to ensure that your RSS feed continues to work well in the wide audience of RSS readers, podcast clients and other software that supports the format.

Jump to navigation

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 104, column 0: style attribute contains potentially dangerous content: background-position (8 occurrences) [help]
```
&lt;table align="center" border="0" cellpadding="0" cellspacing="0" class="r ...
```

line 2530, column 0: Non-html tag: connectionevaluator (8 occurrences) [help]

auto evaluator = std::make_shared&lt;ConnectionEvaluator&gt;(); // Shared ow ...

line 3507, column 0: description should not contain html tag [help]
```
&lt;html&gt;
```
line 3508, column 0: description should not contain head tag [help]
```
&lt;head&gt;
```

line 3509, column 0: description should not contain meta tag [help]

&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;

line 3510, column 0: description should not contain style tag [help]
```
&lt;style&gt;
```
line 3522, column 0: description should not contain body tag [help]
```
&lt;body&gt;
```
line 3525, column 0: description should not contain script tag (3 occurrences) [help]
```
&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
```

line 5183, column 100: title should not contain HTML: – [help]

... &amp;#8211; First Steps with Qt for MCUs</title>
                                             ^

Source: http://planet.qt-project.org/rss20.xml

<?xml version="1.0"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Planet Qt</title>
<link>http://planet.qt.io</link>
<language>en</language>
<description>"Planet Qt - http://planet.qt.io/"</description>
<atom:link href="http://planet.qt.io/rss20.xml" rel="self" type="application/rss+xml"/>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/moving-to-msvc-2022-in-qt-68</guid>
<title>The Qt Company Blog: Moving to Microsoft Visual C/C++ (MSVC) compiler 2022 in Qt 6.8 packages. Please test this on Qt 6.7</title>
<pubDate>Wed, 08 May 2024 15:40:26 GMT</pubDate>
<link>https://www.qt.io/blog/moving-to-msvc-2022-in-qt-68</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/moving-to-msvc-2022-in-qt-68" title=""><img alt="Qt on Windows" class="hs-featured-image" src="https://www.qt.io/hubfs/Qt%20on%20Windows.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p>When you install Qt from the Qt Installer, you have a selection of target platforms. On Windows, at the time of writing, this is MinGW, MSVC as regular choices, and LLVM-MinGW as a Technology Preview. This basically specifies the environment which is used to build Qt code for that packages. Most importanly, this also de-facto specifies a version of the of the compiler which you should use for your development work, if you use pre-built Qt.<br>
<br>
In Qt 6.7.0, for example, we support MSVC 2022, MSVC 2019, MinGW 11.2 as compilers (see <a href="https://doc.qt.io/qt-6/windows.html">this page</a> in the Qt documentation), but we do not provide binary Qt packages built with MSVC 2022 which is the current version of MSVC. For future releases of Qt 6, we need to move faster towards more modern MSVC 2022 and start to phase out MSVC 2019 as an older version.<br>
<br>
This will be a change not only for the Qt's release team, but also for Qt's users who use these binary packages. We want to make it as smooth as possible and got a plan which we want to share here. BTW, the below changes are only related to MSVC and do not concern MinGW packages for Windows.<br>
<br>
In one of the next bug-fix releases of Qt 6.7, possibly in Qt 6.7.2, we will add packages built with MSVC 2022 <span style="text-decoration: underline;"><span style="font-style: italic;">in addition</span></span> to the MSVC 2019 ones as we have now. The upcoming Qt 6.8 will have packages for Windows built with MSVC 2022 <span style="text-decoration: underline;"><span style="font-style: italic;">only</span></span>, and MSVC 2019 ones will be discontinued in packages. MSVC 2019 will still stay in the packages of future Qt 6.7 bug-fix releases as long as Qt 6.7 is supported.<br>
<br>
We see this as a migration path which gives MSVC users a possibility to test Qt 6.7.x binary packages with both versions of MSVC in their projects.</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fmoving-to-msvc-2022-in-qt-68&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/qt-creator-13.0.1-released</guid>
<title>The Qt Company Blog: Qt Creator 13.0.1 released</title>
<pubDate>Tue, 07 May 2024 10:59:42 GMT</pubDate>
<link>https://www.qt.io/blog/qt-creator-13.0.1-released</link>
<description><p>We are happy to announce the release of Qt Creator 13.0.1!</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fqt-creator-13.0.1-released&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://blog.felgo.com/qt-on-ios-itms-91053-nsprivacyaccessedapitypes</guid>
<title>Felgo: Qt on iOS and ITMS-91053 NSPrivacyAccessedAPITypes Error</title>
<pubDate>Tue, 07 May 2024 08:47:00 GMT</pubDate>
<link>https://blog.felgo.com/qt-on-ios-itms-91053-nsprivacyaccessedapitypes</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://blog.felgo.com/qt-on-ios-itms-91053-nsprivacyaccessedapitypes" title=""><img alt="Qt on iOS and the ITMS-91053 NSPrivacyAccessedAPITypes Error" class="hs-featured-image" src="https://blog.felgo.com/hubfs/feature-itms-91053.jpg" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p>If you develop a Felgo or Qt app for iOS and upload it to the app store via AppStore Connect, you may face a new Apple warning e-mail these days:</p>
<blockquote>
<p><em>We noticed one or more issues with a recent submission for App Store review for the following app.</em></p>
<p><em>Although submission for App Store review was successful, you may want to correct the following issues in your next submission for App Store review. Once you've corrected the issues, upload a new binary to App Store Connect.</em></p>
<p><em>ITMS-91053: Missing API declaration - Your app’s code in the “iosproject” file references one or more APIs that require reasons, including the following API categories: NSPrivacyAccessedAPICategorySystemBootTime. While no action is required at this time, starting May 1, 2024, when you upload a new app or app update, you must include a NSPrivacyAccessedAPITypes array in your app’s privacy manifest to provide approved reasons for these APIs used by your app’s code.</em></p>
<p><em>ITMS-91053: Missing API declaration - Your app’s code in the “iosproject” file references one or more APIs that require reasons, including the following API categories: NSPrivacyAccessedAPICategoryDiskSpace. While no action is required at this time, starting May 1, 2024, when you upload a new app or app update, you must include a NSPrivacyAccessedAPITypes array in your app’s privacy manifest to provide approved reasons for these APIs used by your app’s code.</em></p>
<p><em>ITMS-91053: Missing API declaration - Your app’s code in the “iosproject” file references one or more APIs that require reasons, including the following API categories: NSPrivacyAccessedAPICategoryUserDefaults. While no action is required at this time, starting May 1, 2024, when you upload a new app or app update, you must include a NSPrivacyAccessedAPITypes array in your app’s privacy manifest to provide approved reasons for these APIs used by your app’s code.</em></p>
<p><em>ITMS-91053: Missing API declaration - Your app’s code in the “iosproject” file references one or more APIs that require reasons, including the following API categories: NSPrivacyAccessedAPICategoryFileTimestamp. While no action is required at this time, starting May 1, 2024, when you upload a new app or app update, you must include a NSPrivacyAccessedAPITypes array in your app’s privacy manifest to provide approved reasons for these APIs used by your app’s code.</em></p>
<p><em>Apple Developer Relations</em></p>
</blockquote>
<p>Without a proper fix, Apple has rejected app submissions to App Store Connect since May 1<sup>st</sup>.</p>
<h2>Why is ITMS-91053 happening?</h2>
<p>In an attempt to prevent fingerprinting, Apple recently added a new policy that requires you to provide a specific reason if you are using one of the APIs that Apple identified as a possible backdoor for fingerprinting. Fingerprinting refers to using specific APIs or device signals to uniquely identify a device or user for the purpose of tracking, even though users might not be aware of that.</p>
<p>While you may not use those APIs directly, Qt or any third-party framework integrated into your app may. Read on to learn how to fix the issue.</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=6147417&k=14&r=https%3A%2F%2Fblog.felgo.com%2Fqt-on-ios-itms-91053-nsprivacyaccessedapitypes&bu=https%253A%252F%252Fblog.felgo.com&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.basyskom.de/?p=9100</guid>
<title>Qt – basysKom GmbH: About QML Efficiency: Compilers, Language Server, and Type Annotations</title>
<pubDate>Mon, 06 May 2024 13:22:26 GMT</pubDate>
<link>https://www.basyskom.de/2024/about-qml-efficiency-compilers-language-server-and-type-annotations/</link>
<description><p><a href="https://www.basyskom.de/2024/about-qml-efficiency-compilers-language-server-and-type-annotations/"><img align="left" alt="About QML Efficiency: Compilers, Language Server, and Type Annotations" height="150" src="https://www.basyskom.de/wp-content/uploads/2020/07/Qt_logo_space-01-01-300x150.png" style="margin: 0 20px 20px 0;" width="300"></a></p>
<p>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.</p>
<p><a href="https://www.basyskom.de/2024/about-qml-efficiency-compilers-language-server-and-type-annotations/" rel="nofollow">Continue reading About QML Efficiency: Compilers, Language Server, and Type Annotations at basysKom GmbH.</a></p></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/enhancing-productivity-in-distributed-software-development-teams</guid>
<title>The Qt Company Blog: Enhancing Productivity in Distributed Software Development Teams</title>
<pubDate>Fri, 03 May 2024 10:10:36 GMT</pubDate>
<link>https://www.qt.io/blog/enhancing-productivity-in-distributed-software-development-teams</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/enhancing-productivity-in-distributed-software-development-teams" title=""><img alt="Enhancing Productivity in Distributed Software Development Teams" class="hs-featured-image" src="https://www.qt.io/hubfs/shutterstock_1434361487%20copy%202.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p> </p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fenhancing-productivity-in-distributed-software-development-teams&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/qt-quick-in-android-as-a-view</guid>
<title>The Qt Company Blog: Qt Quick in Android as a View</title>
<pubDate>Thu, 02 May 2024 11:54:41 GMT</pubDate>
<link>https://www.qt.io/blog/qt-quick-in-android-as-a-view</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-quick-in-android-as-a-view" title=""><img alt="Qt Quick in Android as a View" class="hs-featured-image" src="https://www.qt.io/hubfs/_Website_Blog/Upload_Here/morphing-example-landscape-3.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p><span><span>This blog post is the first one in a series where we are going to have a look at one exciting feature coming as a Technology Preview in 6.7.0: the ability to use QML and Qt Quick in your otherwise non-Qt Android apps as an Android View! We've also created an Android Studio plugin to help you keep the workflow simple. In this first post, we'll have an overview of the feature, what it entails, why we are adding it, and where you could benefit from it. In the following posts, we will show how to use it along with some code examples and take a closer look at the tooling, testing, and some possible use cases, such as 3D. </span></span></p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fqt-quick-in-android-as-a-view&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/security-advisory-qstringconverter</guid>
<title>The Qt Company Blog: Security advisory: QStringConverter</title>
<pubDate>Thu, 02 May 2024 11:45:00 GMT</pubDate>
<link>https://www.qt.io/blog/security-advisory-qstringconverter</link>
<description><p>QStringConverter has an invalid pointer being passed as a callback which can allow modification of the stack and has been assigned the CVE id CVE-2024-33861.</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fsecurity-advisory-qstringconverter&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.kdab.com/?p=34951</guid>
<title>KDAB on Qt: C++ & Rust, Servo Web & Qt, Qt Quick & JSON, Embedded – blogs & videos, Hotspot 1.5, Qt 6.7, GCompris in India, Events</title>
<pubDate>Mon, 29 Apr 2024 09:21:56 GMT</pubDate>
<link>https://www.kdab.com/2024-april-newsletter/</link>
<description><p> </p>
&
<p>96</p>
<p> </p>
<table border="0" cellpadding="0" cellspacing="0" class="nl2go-body-table" style="width: 100%;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r0-o" style="background-color: #eff2f7; background-position: top; font-size: 0; width: 100%;" width="100%">
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r2-o" style="width: 600px;" width="600">
<tbody>
<tr>
<td class="r3-i" style="padding-top: 25px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r4-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r6-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r7-c">
<table border="0" cellpadding="0" cellspacing="0" class="r8-o" style="width: 524px;" width="524">
<tbody>
<tr>
<td class="r9-i" style="font-size: 0px; line-height: 0px; padding-top: 5px;"><img border="0" src="https://img-cache.net/im/3790426/7e24fd0c93b897ddc07cdc954ef9c7185f185ec3b23574d30556343e28787391.png?e=JQwvmPyLRA4bC7MWqyL3xQgHa9_YSAtyNoNDvYiSghSXK_LUjc7sP7ajdz_wOEFQF202u-sdxQKHJ5PRm0eC72VfbG-LydQ1AsopXBMkyTIxMsjVmGsxZkdxN2jYYUTIoh0NcTEQElhmWxsNheAO1TLraew9CZYsVXZRQ6JIQu15ozDYjXUPfRDvvsvPHdETjV_eCC5dnfgdrRfdG0SFxMZRwON7yR62s07Pc-QY1gEEhUE" style="display: block; width: 100%;" width="524"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r2-o" style="width: 600px;" width="600">
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-top: 15px; text-align: left;">
<div>
<h2 class="default-heading2" style="margin: 0; color: #222222; direction: ltr; font-family: Open Sans; font-size: 28px;">Welcome to April’s Newsletter from KDAB</h2>
</div>
</td>
</tr>
<tr>
<td align="left" class="r15-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; text-align: left;">
<div>
<p style="margin: 0; direction: ltr;">It must be spring! Blogs are sprouting out all over <img alt="🌱" class="wp-smiley" src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f331.png" style="height: 1em;"> <img alt="😊" class="wp-smiley" src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f60a.png" style="height: 1em;"></p>
<p> </p>
<p style="margin: 0; direction: ltr;">We kick off with Part 3 of <strong>Mixing C++ and Rust for Fun and Profit,</strong> followed by <strong>Embedding the Servo Web Engine in Qt</strong> and <strong>Recursive Instantiation with Qt Quick and JSON.</strong></p>
<p> </p>
<p style="margin: 0; direction: ltr;">Then we offer two new blogs in our <strong>Embedded Development series,</strong> and, still on the embedded theme, some videos on <strong>Reducing Your Qt Embedded Development Cycle Time</strong> plus a report (with demos) from <strong>Embedded World 2024</strong>.</p>
<p> </p>
<p style="margin: 0; direction: ltr;">After that, there’s <strong>Hotspot 1.5</strong> and the <strong>Qt 6.7 releases</strong>, and a different kind of glimpse into the open source contributor world, with <strong>GCompris in India.</strong></p>
<p> </p>
<p style="margin: 0; direction: ltr;">Lastly, you will find important updates on coming <strong>events in 2024,</strong> including next month’s <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/jbx5n6YDyJ64K8THeECjMoOcxdp7U5p1WnTcue_HXb-ZMWcoAyjcvaupZh5-iauZyNAGbVeqLPBGhufGfXHaCGRAvZz7DV5MHs5lQdikWZgP6IQIjTlnd6Vjj2TRmhzm0ySgecuMwpWtMRZFkncmplxaH8N9fEbRn9MRMK1XsyjchT-6sU1Pu1dahMuR" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Oxidize</a> conference in Berlin, where the focus is on <strong>Industrial Rust Use</strong>. Enjoy!</p>
</div>
</td>
</tr>
<tr>
<td align="center" class="r16-c" style="padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">Mixing C++ and Rust for Fun and Profit</p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><span style="font-size: 22px;">Part 3: How not to invent the wheel</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r20-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 2; padding-top: 15px; text-align: left;">
<div>
<h3 class="default-heading3" style="margin: 0; color: #222; font-family: Open Sans,Arial; direction: ltr; font-size: 22px;">by Loren Burkholder</h3>
</div>
</td>
</tr>
<tr>
<td align="left" class="r21-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 2; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; direction: ltr;">In the two previous posts (<a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/xtqRKDBs2toZplY465kjBdSCbXzKgtDRAmrMA4QJ89IDjKrKPlhsJjEnq0ang_qfxNOcpMWsJvGt0Y8LJIJyUJUUItPdMcTTrsG0rrxuyzaKFsEKdaCIRRiEaEYCjsU2EV4cyFfq5zwovGCIrckniw02u-wTAG83kQAiS9Z87miFss6RX6tfKCa7E9CsoZKLxGErj0HMg4P52HW7ZA3XLWB3W8cjlNYCK3rCbWuO_nORY52DF8TblQ" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Part 1</a> and <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/rvuSPtmenT0IY39bgAHv8h4EYcpDnM14fChYj81OAnAADNyu3XsxagpFH4QisaoTqM0vymsFGaUs8qcueaQrmuPEqM5PvcEhXxYy8C3W8iZZdErlpMo5s-cp-0bVv0S0iCEwaehQwMxNZFWkGhvk7V0wGA1GW1j3leRK7GRcfNJT0MeCy7C5IQ75ks3AYeHxIobRYevaQS0nTylFLJ_1ctkexrA-V2nPtxQvS4HVPwFQ7sfheEBZ-Q" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Part 2</a>), we looked at how to build bindings between C++ and Rust from scratch.</p>
<p> </p>
<p style="margin: 0; direction: ltr;">However, while building a binding generator from scratch is fun, it’s not necessarily an efficient way to integrate Rust into your C++ project.</p>
<p> </p>
<p style="margin: 0; direction: ltr;">Let’s look at some existing technologies for mixing C++ and Rust that you can easily deploy today.</p>
<p> </p>
<p style="margin: 0; direction: ltr;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/A6iRSlLeArxRuw44JGZQdsG7Ujbj0ePkn9X37zogEBRE6NoinBAQ6eyOvdCz-HHWg8IIyc5p08PHmaeRj8NH20OBbwAQB7uGE1yCvufnafHi_i2lfg_SwBCv6r0B-hnG49O3KagscVpNZeX2-xGhZqImPCo1ktjyAI4hCEyb62xOHd1d1N728qKwa8pmhuxFQFoXTfdxQXdsiNG5Q51honCjMIV0fGs49eoGAv85pd5AFLCnbnBxtQ" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Read on</a>.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r22-c" style="font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/tfz51YjUI095e4x2LzMnUUOg9uZXc93bTzK9-jntmxHqM3nY5afQ2De6gJz4tcPPjnIsTqXzYS11VDG0BjG3UDgGVADEzlhWCUwI4LhZor0pV4JSjM7DTcVubo0hw9gxzAtPTymoOQf0JEd1FFrgRYhSZ7e9olxO9COKUQHtUmMBoNagzS18fcwgDm9OfN4YwyEKqzKyu53F4iQX909F6oa485mA8nbaxlXC912H1EEq4b727hukiw" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/120388115e4294b29eda2d39fa4dad2528e6b5e5c779794e453a4693e2a57fd0.png?e=5jHCtsBLHi0Xtap0ycj0GY9hjxFg-CARmgE2VnDeAoDie6bYg_CWzV7vJytMP1VjlGqM2u63h6LfcwcqAHaD3f3N4mYAEr-iR8J4DSkHd9LBkR1jdrVv6sURmR4TahsT0AYCPVoPfOTDVvCW4ss-A1ZXk8iybkbIZnysLuJX3Y9fJ_wHfq-ivOmJb8QLrSEdjlMWgtVE2wIon07LyavLYzo5vtaQK2nBnAl-YmhzEcNtgUI" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r16-c" style="padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">Embedding the Servo Web Engine in Qt</p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><span style="font-size: 22px;">Using CXX-Qt to integrate a web rendering engine written in Rust</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; direction: ltr; font-family: Open Sans; font-size: 22px;">by Andrew Hayzen and Magnus Groß</p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r23-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; direction: ltr;">The Rust ecosystem has been brewing up a new web rendering engine called Servo…. , now under the stewardship of the Linux Foundation….</p>
<p> </p>
<p style="margin: 0;">At KDAB we managed to embed the Servo web engine inside Qt, by using our <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/-RBYhCzSkojCjdV4QaQYwJC_RJoG2dlky4ck97ccArQPwZzh3nhUiqGSa6poLY4Bfr5ciASmOQv8qwUAEl_IoWmoFn2Qm4wvZ4dnIcWCwn1Z_2y3PHSzqwcu0e3Ql7R-pofuYNU7CaWS_J2DNfP9F03WNGLKxXXfNFTyIf4vd3s0D_QO2e-v_6txEzxJLghAhex2ugE" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">CXX-Qt</a> library as a bridge between Rust and C++.</p>
<p style="margin: 0;">This means that we can now use Servo as an alternative to Chromium for webviews in Qt applications.</p>
<p> </p>
<p style="margin: 0;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/lsFBw970dONEq7RAoXp7RsqfLREOGl2d0bmTii7EgNSoOHBGKXmGqsvL1H_0XC5M3vW1ksew3SJdD676uu1zixKCpwGxFLUp0WWhtTKfK-xf7LfIVrnAjlsW1rvLIBfOciFDI9VF2hUBP6uYQB3RjN2pbC0IfF4MVeXrAssqcUkiO8cdYZ0Cd5rEAzr1hBTiyQjC5_uBbxQxrmX7w7768mSC" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Read the blog</a>.</p>
<p style="margin: 0;">More <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/fM_kK32DR7wZt_ZexB_ECw_XbB-zU8LtK0ewvcsLNIQLiBq-0dAFJychbCgY8jI557qZo9rhn7OndUFsWCcAQ5MM14ivEK_-wF-7C89mQniF9u-VkUVnufURAUQBu1T5gjo9sbdYQvdeWZHdihRz-LlmlLJfbfX4FCD3_Jl0-ISM0clY14XjA7TmvaLN8vVeHTg-" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">about CXX-Qt.</a> <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/O75wVrcUxAoqt3qfizxdTlNvIk2c0Ctu1axPhPxO_f9FWyA3KulUf7tevZmsP_mZxC6rhaZgAAi5KCugV7pHSdmUahL7Fwxr6nC3nBwy2gmcFXlnmuSalfNh2QkgDyVfLjWandrLCjf6gtVfh9To-SfI5xhUeR3rC2_GoKzWTGpLunaDmFvSqhY5yrmvzV4" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">About Servo</a><a rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">.</a></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r24-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/8QvWxWvxxxLcycSICvUeiK4os7A33dHNgX3uqd5OYA_9usk-fgW1q8o9KJI3YKzVwBNbrjkekJLiFwuyi4SYktW4ti6TaQBSo_5dDDx2reQEoYQaxIhhHF3-PE8Fr9iIoBeIO_cEE_P7E5-K-6rUZd9wTgp1Yx-7e-Kg3NV1p-NufbLIDb77lV0AWxwqFqnj22ZvqHMS7gpw0vDLFg_b4xYC" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/d5d4662c80f26009988acb8be64041be8066c1dc219412109756f6cdfbaf5c85.png?e=YrQ75mGjpmF2rsOcA1Po6nQCgZRXVqbFPraU3b99th2btDoz8fPMkEuNTIObXpiTTRr17XpzMI8e1b0ZIYrBNEvaGvbulPDPVM9j8bBbPeOojhJJ2Ncdk2elqCN6hxDxyXm0-NAWOtjQxOcEXrB8zDHTr1RQWeRud4E_Dm1BaLe2G72obXJvc85yYM4s055v0xgf6pflDeFyO5WHonxYEt6NwklSid-4YcYnjSIiYS6NPZo" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r25-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">Recursive Instantiation with Qt Quick and JSON – Factory Design Techniques, Part 1</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;">by Javier O. Cordero Pérez</p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r23-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">This is the first in a series of blogs Javier has written, in response to a request for an architecture for remote real time instantiation and updating of arbitrary QML components.</p>
<p> </p>
<p style="margin: 0;">This entry shows how you can use a simple variation of the factory method pattern in QML for instantiating arbitrary components.</p>
<p> </p>
<p style="margin: 0;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/CQnH1Rs_11VC-or5nlnbVSAhUxZtWoiczSLOfdwTNrtK3sogozTiSpj8WHaQ85xi1BQxW5v65FRohI6wIiRUqXbZVVMholzvbTWvx0UOJ23_uAjNqa2Wh3HK9SOKflN0UhB8vUV0aJZMfXxVMvxe4Yz4hCffJm4lQZIKZ8UibHO9rMycYNkVHm635X0TIp6YMV0wBH7CrDeXju5vH52QW-cGBXHgzbj6uX_--xy2u-F6bhILcF31TTteCDw" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Read the blog</a>.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r7-c">
<table border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 189px;" width="189">
<tbody>
<tr>
<td class="r26-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/KQXop50xvFQWQ8rrb333EnziWATXgPiWTxohlE8DAXXIIeElPRof_iqWSAJCKTI-E-yf7qMfp4R2eCCOt5ftTcRF7pSbXggu7LvNEbfCltCtY7sQR-j1TGh37SvDwNuorJm6T394vQTp2hsxWjBK8H_RAPvHJSTxqQrgjETXZx9OhrzfNDzvllwup41nJGT0vmKtFKhWWbofVFcqDafjYy8tlMa8REbZXtpiVa8kdcgj50F7lFCAvlEu_6E" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/1525e612d8a54bd753d6b978bf185ea266ad501288253b40a1d0410d88c60aa2.png?e=mgT6CDSWKOpWj8r7jAFmPOeMMJO84MT57KEMU5rh2vz2djG_c45wQwWqdMGjDoGhB2_fMegajJTpzJ38oo8Fj9oXY2az2Rcy3AW0R9tyoiz8dNzTFT_SlLROFRn-FBAKfoUAgSJAMkIJOMMZoaruNNTex7rNapzu9FyBQI3TcNwYyVe025qKIPbtpUkLTt6_CLuftEwNcOlYx6OJgBbtULQIPgUEsSx_tzXCncmwunpbJ-g" style="display: block; width: 100%;" width="189"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r25-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">Mastering the Embedded Update Process</p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><span style="font-size: 22px;">– the first of our two new blogs on Embedded</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;">by Andreas Holzammer</p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r23-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">The importance of updating your product after it’s in the field cannot be overstated. Not only is it essential for customer satisfaction with feature updates and bug fixes, but also for addressing security vulnerabilities.</p>
<p> </p>
<p style="margin: 0;">In this post, we’ll look at some key considerations and methodologies for updating embedded systems.</p>
<p> </p>
<p style="margin: 0;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/gl84u_qbv6ZxQCINTnoOC-zjSdS92FfBeLxP2gKZ2tUCJr31vn00XGAVy3vWbxXCKBJMhSEorpM03Xs7R55Yl2Pcxn43aOPwOcCWuZ1w8tUCE3puswoyOBG2xrklfVInp_bP3MtchUzi_JcDLsm2aBsZ7ZpggcxtoP69PW14Gm7Y3YRr2gSDMplR7X7rZTOGhy1H87yTcvGSsG4_ZplPwF2fPtzPUrsQTM8eIcqdZKajEjQ" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Read on</a>.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r24-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/EvlP_qc1fsJgyCUMPM2P_s-saL3LzV-qHt5p9T5tinCHE70mH-VS9tyNgnbRuWZ_5_X4mCI4uFJAYfxm0fK1Lw0WRVdnSG_ph1B4w6OFExfpqypvymHdm4sgYWrWMtRmEI1hpAccLFhc9sgAWeUkJW27K5YUAqbsaC34LPDXK_0-ZjM_aPc5BkqFNuaXd-S5bLYe-JCiYMRQwbZVPFg36AnVWsDFrjcV1Hal7PDPVoSo6RU" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/930810f65dccc987ebb61f99e2f20f0d5c49de89125b17473fd5c6b61e078087.jpg?e=JdhzdYpJzLb8tWPMCCKF-TioiWILWcYrLOwwJcZmBcz3tYgJm45IwzNHfSU9NuI6C6gNugF9UC50akZO10QD-cCp2ojqu4OI82j6Q9fCFZZQzwtHKox2O6MIoDhfPiM1mE0qbNw4rV57sdnkgF5Hh5znaJqVjBO1psmhLUVEsgg0zHPOwDAXJsbHvUp92S0Fy854TWFBDjUhmNxbj5KlgY_nLfmfG4hDnin9K_L09Gprq38" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r25-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><strong>Streamlining Strategies for Embedded Software Development</strong></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-right: 8px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;">by Nathan Collins</p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r23-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">Developing embedded software is notoriously difficult – how can we simplify the process? Fortunately, there are lots of techniques you can use daily . . .</p>
<p> </p>
<p style="margin: 0;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/IF9WB4SmbqkgHXBJyT4MMmMAUwoz3Nnec7n4gFyRIt-j0I5TmHcVHf-Gi2KR-GjgVdEfqstOa2VouLjotFl7SI-n1LDCAgd76T1QAR9hFDCSjdEW4ThpiL-WfDGbYvaKSptlsFDBrQQwAo6MDND28OuDMXkxsia4v6zvxRkPYQi9CKs9Dv8bWpNX4331qU1-88W108fU38vHE5wNvDgCWaWiaQDyMYEYX6_lw5bzGWDtmS9NaojU3PwAgwu8mSIMQcceC4AJsg" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Read on</a>.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r7-c">
<table border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 172px;" width="172">
<tbody>
<tr>
<td class="r26-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/V8OIFs3rCpcYODKFm8jCUgUBNo8EAzH9GjAjLuR0rGr1isJ_SSD1LD27Pisyeky2Sp24_KJevtP1mkxSkXWn3Cr35XQu7N88Z7b_fCkxha0giKtqfDG_1Zo8jBeWe_3tLCxV3aPCVVn__6VO3UHAxN2Lmp-0G6y0kzNLloTw8W2hLz_frAtSDeiyJJ3DD7CNflXu9JM4I6ZDLB4bQQxgH6qyc0fzhHWnaq53eeka5zOPeLZRrUCCOzt-w3Yik9Ja8DR4YVTs4w" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/6825d75a45e2af7e631fc8571c5f9023dc6f984b7e01daa7f4a956353a3c21a9.png?e=DWrmvgI5_x6_TIPhMyfTP3ZT0sI5EDim_NokyP5vgwbvrAxvv1VcXEXurIQex_00E67-uptb-3b7E8PQOD_nCgBmkQl3KEMJypTZJU2J5c9NClHgmbsDt2T3KV_zPgHM5ik56iBsj9e4mMGDuyrxdBxSqRvmfweyGyYhR5G-DvQ8hDsVU9yoAJO_uwB5bxzyEjbzqmzMp4FZ-4YEidQADufEH8wWxffT_VKQdt0aJp0sO78" style="display: block; width: 100%;" width="172"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r16-c" style="padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">Reducing Qt Devpt. Embedded Cycle Time</p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><span style="font-size: 22px;">Video series from Christoph Sterz</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r15-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; text-align: left;">
<div>
<p style="margin: 0;">Christoph Sterz is known for his ability to make the impossible possible, producing top-class results, often on limited hardware. This month he added three more videos to <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/wV0uSXc0E6-55t2r2C6jaIBgiFhnHIx-UsLLpLS61FofEin-UBiSFaz6Gk0zMLJuV7_fnYHSYyD3EkjXv5kjLR4hniHxu6D24vCypyktULk8oGCaDydh62hl3hBAOZnYSKuWByLrhqUzfFR7qFc43KLjlB8n1jGUgcCKDT0MqZtzi4FkGaKfUI8w3AL0WtO5Cl4xFrwijXLXjgcNerz5w9pSuWztx064J7RWarIvOQFw_SdZO8bArVCcbh_IZi_7nf8" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">this series</a>, where he reveals some of the tricks he’s learnt over the years that save time on embedded. Check them out.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r28-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="33.33%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r7-c">
<table border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 161px;" width="161">
<tbody>
<tr>
<td class="r29-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/VAcJWlbbTZDIWOBBOtm6qn_EJIRUoKrnqreWCGj3EBtCyL620mk6k8M868Zbk681eyVzYs38XHcH495oOiPegtyHPwXowB79f6w_TuoGKaZm0YHR-wGB5CQ29JPENzPA9LlzrtPV4uETNmYFMoIE6EdGIMr5mGgVG3jLDqJ0vj6PHTKSmDdNPBHPlnGoewP_WMYXq1aknvl4ssWnbf4CJGg1qL-J" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/27b77d5e73f2dea7aba9a00758e560c92645b2540a021561f19f4c4a3177dc6f.png?e=7OrFBNitKWOH-TxdWpIPbb3veOxlQQoruPcR4RU5ZWQtM4eya3e0TqrhIdkVHXsuDNlZlwIpwyuF2YFCoV5WvJbOkjzUUaNx6MR259WFI-p3AwmI1sQkYTSjGIp4zkgxi1-4cVmU3K97LqwS4iCymIJlIOOd9zxsGxVAnejh2UhKpEgR4Tc5fcgZ4zAfezoNMNzr-TarVtO2YOqxNWmLCpHqeY59p1AF_1_IgtV_H4IgUyI" style="display: block; width: 100%;" width="161"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #677876; font-size: 18px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/HwI4CJVg47mDY2tkhy5VKasYqn4AbPetThlZ3j5FOGP1ovTfxQ1LAylIBi87XDvIivXOhNsx5C-YVf1jdx-n0P7-sr1VJ4Cl2XTuY-mFqupvA6R85ILt0auYPz6rXpSs3yd1sQlHEJxIejZI_J7laJo1VUQxQtcELJj8UNLghP_c0i70BmscEotJQ2VPVrNAur2htpvrBXRpg2LjqZFTN7FfZUs0" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Installing GammaRay on your Embedded Target</a></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r30-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 2; padding-bottom: 15px; padding-top: 5px; text-align: left;">
<div>
<p style="margin: 0;">A 7 minute tutorial on Christoph’s favorite debugging tool for Qt apps.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="33.33%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r24-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/5hh6DyxuXAEBl92fu-XWbEZWDTYzT0SJnbYnoVmN48tERUC3sIlZZtBL7k6LmBjMMxcBwEcqNUVFIjG0QmPuiNaEwgU8vf_IWbth0QGMNFLcylIUjJvMZY2WBZXRJe9VjUekAbdv5QP0Akqo18HLyHlgacenySnAq5YXc6ap1d9fB5tHcCv0WxsXtiFF8TshcBSx_yyT_fopeoB4A4_IH4A8CZdVmGHlO-ZeKWpG" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/00250732a9e735cd2161b41f7680e00f2b9bf443ca2d1954baa366439b645f20.png?e=a29bNiCzQqg4RVFzifrxQAq5qzJE6mV_W9t2-8diBJ8LZuW-u8deC01455pFkZbUHtbgufccTvrce2GanXPFVHkLMV3ln95xLIiF8gz7Tp_faLxlvZjHc3OVpfDcqK_S5MS1K1z1JUL_ALYypYopsffD25Wri5GNgWtBXYcG4ODVVWuFnupb-kwFlrINubgm6rYh8lbxwytyj8UN7apvzHgFv6qTH2StgLa_pj9uFn5jJCg" style="display: block; width: 100%;" width="169"></a></td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #677876; font-size: 18px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/pEoXFH85hGAtZkMGY3gU9keQHf7-nodI2DZEaNlhAW3Wq11Vk2aoYo_mtmwtSmPqhBLxXFh6UnG6SjMv5abWRZKOCv6v6tiJ419DufBJLjn7H9xNYtGX2i7T18tmxFc6bf2xRpeC864nIAtqQqqAqS60mANGCS15oktTaIEmqIwM2TD-Lpkh4E1QQDLdyTJAgWvDdsMs08qGeCM5se6dcH3u1g3-b3jlijpQ3qYt" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Embedded GammaRay in Action</a></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r30-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 5px; text-align: left;">
<div>
<p style="margin: 0;">Some surprising and useful ways you didn’t know GammaRay can help.</p>
<p style="margin: 0;">Find more <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/HaBbjZf9-b206l1KND2VTSapeMWWc9INq-dGGdVT4OL9Q67dDDKknGMBDrw1iELVG944EiZx1GVODieFCNv0jNN3aX-_V1qHDxEhMppF92rgEfWpiH_OXCOKKUkC7zeRuH0bobAN-eFl0dcMyUynhi3SUHJeoCQO3mgV4_yOKw0FSZG7SGgn4Zs_29AZkXnUmKnNzN4mCnQ9BmsQti2y-DsWva_TMzZv2E2hOB2TJSNzBAwrQWgfKHaxQ43QlAb-xPw" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">tutorials for GammaRay</a> here.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="33.33%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r31-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 12px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/G03eNPB2twQUaxvDVkmQwL7urGjbjwoBmWJZm9DJH-cNyY68vhLqLZQeV9qY_ZNtaVF0JrEkOMxYN9oiHksjymtY6Z0ERIIM4l2WUjbeXd6XIJqr2-aBdg9XW7BHzUs9F_A_Gb8Hoho1jsgBSJSnw_TsThOusKDWg8LnL7k_znB9zGp-hjU1Xs7zk-Vu81NgaqLnQSITYImREOd8E_l5wBFrQDqJ" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/76f22c80ebbce103b7e3578feb71f2bb163278fbcc6265ea344994704eb1584c.png?e=Q1FNvBdyO6NSI2Pc4f48sSbEbK3kmFr52W7C18sRf2ebrcq8ySlIO-WSbGrtmBT0J5Dqfg3tUIS_MXXnCPeIew4dP2G6cYMEsMBBxte14P2Yj6LlTq1gLce1nNa9KIvQpazMYZN6XE-jdOhns9XCEzWGV6sdmAKNIw9p8XBHpN0GeM2l46p1rKNyMqDnMXcVKFX0LNWfic-eYisYGRzb8ZlvnHnr7F0pd7pY3_VwU6O07_I" style="display: block; width: 100%;" width="169"></a></td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #677876; font-size: 18px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/g8h4k8ZG37rCbzlfYykoeRRPXCAEIhipyVeM0NA683x9vyapq1X5vCik_tRB5YVUfh9xLKj-OX89CAIhRGu6Usw9QqvYLme1hO9u4ij2UVp69KT4axXIKmDfA_iAZNFjTkav6pnrB9UcMtwdU3MpoAGb_AtzNe6bze8oT_K9MctED6w9w8Bc6V9Jk3AAPnoZC2yHhVsMD65vfcbpqOQuKXNpIGhx" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Deploy Faster!</a></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r30-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 5px; text-align: left;">
<div>
<p style="margin: 0;">Learn how to bundle your executables and much more, in this 17 minute master class from Christoph.</p>
<p style="margin: 0;"></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r25-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">Hotspot v1.5.0 released</p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><span style="font-size: 22px;">The Linux perf GUI for Performance Analysis</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-right: 8px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r23-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">One of KDAB’s most successful R&D projects gets a major update.</p>
<p> </p>
<p style="margin: 0;">Hotspot v1.5.0 comes packed with a wealth of code cleanups, bug fixes and new functionality. Most notably, the disassembly view has been further improved with better searching, highlighting and faster performance.</p>
<p> </p>
<p style="margin: 0;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/VrbIGzKtcTjVjFvBgWlP7YqUrcrD4W-8A-NknFYobo4NG_a4c6O8ca7dtoB3dSHuYbMUnk3Oy8RhfiqT3855HCGpkAJbPfVkLKBuLmQkiMPuuuEwtZgPdKB5u1Gbiy7---A3fw09VwXkKW5a9p1T0Q5GG76auBZX94JTw1THfwZ9MVG6cpnXgM6yxgp87wVn43amTUuBrQsWopPRsp9OWOO3YV0-" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Find out more</a>.</p>
<p style="margin: 0;">Check out the <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/T33XSqE_aaje7VTn8WeR1KhR4hDvqrG-Zv11tqvCyiz0n-wWwWK87YduncWEVmETjutCH0Cm3k_RJYllrzv_nQl0gLohWC7Bfmg8QP_Pp5kKJs3NqGS2Xn7qmc5Olckj3htACPKxv3KXVAGpT9PLY2wburmE6UXLeO-278VOwXPvRBNqGf0TBt326jkhnj-22bHMyvgQ0C0V-MO_D5M93O6V0mmbEGC_gOJN7JtITh3y" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">changelog</a>.</p>
<p style="margin: 0;"></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r24-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><img border="0" src="https://img-cache.net/im/3790426/17c56a817a721136dd6f5be0ee97c2da417a068d5a06ab2650533965c33087d4.png?e=VEgritmiJ-UaJp_3gMRt81G4TmeqhrpypDXBCHijo7cVCAjPS7iTa-JcFOyCfPI4OTF-YVvkYVN7927lWYviG7JJEJKh72pSTrLdBr4T_dgifvfj9fgtFLcCbTNYCqWyOU6t6UnJsOHcDc8JsFxzT7lMPRtkE4EX_Eyn3I8pSSq8KtkK1tTreB8W133bLMju1Q476emXG5KrSXheWEHNoz52ncxaFgzeRjlc9mwjdg7nSpg" style="display: block; width: 100%;" width="266"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r25-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">Qt 6.7 is released</p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><span style="font-size: 22px;">with support from C++ 20</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r23-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">Just in case you hadn’t noticed, earlier this month Qt released its latest version, with lots of updates, big and small. Check out the details <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/mEkKeFDkbSGAV0DsedUIFhUbf1bCAbGpV9t7nsERHNWMPTbphzBYIUUwHx1ksRpjIRa_TOdiT3Qk_iOe-jpO70wXE3NHLkGySkPvtf_8l9Bk7Ylr3ZtYM4hyMhxnElqc6Vp9XQ0u1adaL2R-40r8Q-14MRtTE4aT155SD7LKwAmN4Ss_y-rKy93-ZabL1YFIATj8kqSeVgenTH0D6Xg" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">here</a> or, if you want to go deeper, in the <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/HopasATe-CodVdwJi-vNawkcXuLB9NExnRx1WTNi9gxVEwccixCwdh8gcsJtNBPUBQMTKyrbQvXOXUDN25qFq0t_U4dMexpvRYCo3b2W8yAuckzgt2NGZ_3VlhV74Qo0FvuPTj0Sdg3pYdFca5VI2SE1WqeK8j8EiQecXPR06DHlxUzK0n4YHyPcWB-b9HarXaf0cLr2MYmj3bCJiMw2LI3mLKo4Hm8-tHtMHX9ltvU0GB-MUDB7evHyPdLFcJskkhNSxhziJwPAladOZ_A" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">release notes</a>.</p>
<p> </p>
<p style="margin: 0;">Way down at the bottom of that page the many folk who made this release possible are listed, including around fifteen or so from KDAB. Hats off to all of them, and thanks!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r7-c">
<table border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 202px;" width="202">
<tbody>
<tr>
<td class="r32-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/n9naTQ_qr-GGyXlsavL4yPP6ZErCgcZ6eyV9nclA_myUQVzhLW2Rcwv2u_YDXOcOjJsVY69wSV_5vk-6GFxYBk4_ZekEKWV612045lBMi1q1OUeiN889XMKq0fmY3sohS-8RIE-Ep0yGGjeDpnewezye4oQWT1nOWDloAC8oEOtk7oU6efD1VxiitKCaAum6TKCJ_RuTTV-VJ6RghGs" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/3ac36aadc6d869e9ff8f3572574a058d822f6c775895e083f2a2eb65babb3254.png?e=s7TbV4LZuCYk3FfpCg5eXmX1XMXYiZ_LlZlfuCWiLFxZiWzHukhBejnWitoypKFILgHhoC48UxvfLAeASMhfjXw-ggWNwE3wXpRDZFS4Y_-QFJdy9KktNffZwsJQdQFJ0IL1kUoDrxw8CB1wdhBEAcHp-U01JrFBWrZjrt61AAuITfKyKyXbHjZ2nu4dNgKt1JUZ_pkXpS1kNYsU9YhIa9I9yLYIqwqIzdY-RsiYkkQJ4yc" style="display: block; width: 100%;" width="202"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r25-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r17-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;">GCompris in India</p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 28px;"><span style="font-size: 22px;">An example of its global spread, from a contributor’s perspective</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-right: 8px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r23-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">The final episode in our series about this open source teaching aid, supported by <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/zdfVYIef4J0sJs2hYPGC9vlNpZELStP8JHkqv8r3uQSaLXQ4AB0BrEFXFYNAYlXBdVxB-bM1SYXTg4WXSSSUY1fJ0pO5AsWfCnCA8q-_xtJ7V9Sl1ZwIbiqoAfcznPrkaBJLc1bt6A3ToXXmVxLC1VftM2FSPO2bX1SNwCsttv8pf5HH4gg" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">KDE</a>.</p>
<p> </p>
<p style="margin: 0;">It’s amazing how, the things these folk get up to (mostly in their spare time), can cheer you up, even on a bad hair day <img alt="😉" class="wp-smiley" src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f609.png" style="height: 1em;"></p>
<p> </p>
<p style="margin: 0;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/F974Xv-cpUgLd92t95cdrJO_u9CsjAOTWSwHQLeUaipVujlo6Re-qC3lJotHtPmODoRQUffJc8dnAmiwgJV4-hp8Vg17QvUBjTeM6_gxq8WDV4KugdE4sRZQTQepHDyJRzcZN5MXNHALBzzDSm1YdnZRtoyxRD6w2Hz5mrnugkZ0-i1VwZf1NxEP42Yf2p7myjf-HKioRWuHtxaoEQK3q03IIoRl" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Watch the video</a>.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r24-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 15px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/eC4KpYdc91ucMVqP8yXiwj6byuZTfUcrbemQo6ZTXLDyfd9nKeVPAKRXN4NmXwv5ShI7upwVhrSfQ-NBumL0gTGVRXOKMUjGwBuWG6FjEjq6mikQAtAjB-xAHvWqsCwhnsbi1NXxx5ftvED_HOfIkxVQsjf8CYdGw1ftqX1lMNoaGGtWiDOhNPdO5sTnAEn62IQ5-eO5OFoWSpJgRULlK9tppvDH" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/75bdb3d83660930e90362b6a14ae2b7402f9ffd7df85ee87981263efcf96f57d.png?e=IsH4H2hk1upZk3i0_HubRKz2R2ZLgsgUpkmw_18zJO_wIFr92p0e_6kmFFZTa7VEenU7h1xE2QnMl0llo8PvJAZaCoQ6yVJ1fnFoaRRq5LJlK2f6o6T4qjs3eODHkiqCmmGxc0hH2_796thfklhurhlrELoGBvWNPqwHk6FnlN13JS7g9rVoXw16txraNPlGXz5pQ0On1Tsja-Oh2QtIKXjjLOYD-hkq2sALmLWlvKvOtaw" style="display: block; width: 100%;" width="266"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r33-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 10px; padding-right: 10px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r25-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="r34-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 2; padding-top: 15px; text-align: left;">
<div>
<h2 class="default-heading2" style="margin: 0; color: #222; font-family: Open Sans,Arial; font-size: 28px; direction: ltr;">Events</h2>
</div>
</td>
</tr>
<tr>
<td align="left" class="r20-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 2; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; direction: ltr;">Last month’s <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/OtlJ3zE3VPbphlTafvpByylsvN_c0f_JgMBq6gITwnyhxvH3bx8ZUYZXeuI6SA8SNbVDsnNj6VJKWVFhw5N2-Fvb2Z2a0eIKz0Rt_Q2JjfljIwUqrY1nc3bDwCEwX75L605ykw1Ma9uSj6bpE2lfbpWqB4jbG_br_3-pqirvg0Hz1_8tS3l2A23Q7uN90WC92R8n5TzW" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Embedded World 2024</a> in Nuremberg, Germany, went amazingly well, with attendee numbers up to pre-pandemic level and lots of visitors to KDAB’s booth.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r11-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r15-c nl2go-default-textstyle" style="line-height: 2; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 15px; text-align: left;">
<div>
<p style="margin: 0;">Check out the 5 on-site videos about <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/QxdqiKO9kEOdCOZhi7h-RvU0d3BKnHMMW66xvDl2V7EQs1lzOwK9msF71kGs7zn7oMj1YODRYc8JL11AG0g33c4Jk9uKMREcyoh_7eQJh5XEMuAc_C3IHYc_d0HUU0yGJmZz6c2SX-j7ky_QGeJMch_OBD7NpwKCquZKtNuQYh9cWZkWoW5a-0IWo4AM2cQsgmA-wNMzLAZ3-8rkqjTXzZCsI7B8-0tekj-b_TsYTjc60CZCd8oA8hYDNMoBcInVdLs" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">some of the demos</a> we had on display –>.</p>
<p> </p>
<p style="margin: 0;">More about <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/jKNYfdXY0pnb1cSBn9OKdVCY-Zy1sqKJSsBUONb_rJ7Q3hoIron00Tj1HXLgxjeSxFktFohdoRQufD-Hpyo1f5Dcvse3KNrzTkasmBPoPSC0svWYffBilHh8OaB5Avhk9DV230HLM3bXrHDUX6y1kAXu6dRrKYI6_wzha2Rin38OwO-2qnLRSn72TwNtz2Mv4zfq7mQKI15DEGaqegGNMPxqpTfKKyxXeQ" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">our presence at Embedded World</a>. We’ll be back next year!</p>
<p> </p>
<p style="margin: 0;">A selection of events to come in 2024 follows.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r7-c">
<table border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 229px;" width="229">
<tbody>
<tr>
<td class="r35-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-bottom: 15px; padding-top: 10px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/2xdq2h3aovHLYqeCmVj8CKI1dJJjGpJZNMiyfrvRRiI75CfLajwp082MSl8mghwUZlJaxCv-zCOKhU2bxbqkW2uSQQB8DOVtYs9qPT_giSC1m0L0V0XG1Yd6ACxvnzQygwIglzYdq8SWZF_Jc2IX69M5__jLEXicAQzoMB29Gx3PiIyu-6-9JS1tz8HKGoJqPhBFOFHa6ab6EKEV_qucYl997Bj3ndpBz5--nQL5FN-IZjzCXy9ZIZJAqS3Vjqike9g" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/e062def20432e2cb609878c4d21418aa924df79b91f32068c05f5b5305f1f643.png?e=6ippS7ZEl6KtBTllxe3uNlwVJ2IdFo9Wl8B0o01BqB9WXpjTewQqFG6Mr31h27RlH6s2Nz4m-pcNrLnRcXkXsJWJXX0Dul_oNXLbS_0XbSxkQhR7K9t3lC0kHqKeTUkt0j0V7Psa49XS_44Jh3r8OThdOp_ulTZdBa5OTxp8ER25cqsEEfl1Q28m1ufYKqlGdl4DBRpckFdMpw7GZ_JvmREtVLazfm44e_ZNsmhuILg2oXI" style="display: block; width: 100%;" width="229"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r36-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/edztUVyvbtveNOCDhqdPw1f8F7ktB5fNyDWJhtlczey8UvR-Lb672YVBcdBd3THdhfWaDuBqKma3sCFsGOmfeASMIvw8EmE6xlLgpCkkBRywUMcJUvbshadl07ZpWFiBGAxndt2mPeXCPTzWTBETDT1d2KzvK1RGvCwyJPQZK7yF07warr_s_ZP3CUTZYA" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">Oxidize</span></a><span style="font-size: 18px;">, 05/28-30</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Berlin, Germany</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">“<strong>Two day of applied insights from Rust innovators</strong>“</p>
<p style="margin: 0;">We’re co-hosting, with Ferrous Systems and Slint. Come and talk to us about C++ and Rust.</p>
<p> </p>
<p style="margin: 0;">With workshops on May 28th, and a talks program on May 29th-30th that includes <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/fcBgZUn3TyPpvTgzgDopcUvzU-HMNr6mQoZs4nxbDe9wc3mihvotmNzlHIcqJed0Vqq5eM52VIKi9E81dBPiC4SJkEwfr5bCGWUbYIrad7ZMBelnhVFWcU4Cj5XrS7muXbafbuSuiYMTPTahHoHWA67-r90I4VqAmbknyFAXGfUIy4-nfzvZ5z83Sdmb8gKHRbRIctl1NncFIKIUSDtX-Lc45OvP1wjVh-itvak" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Building an LLM pre-training data pipeline in Rust at Aleph Alpha</a>, you don’t want to miss this one.</p>
<p> </p>
<p style="margin: 0;">Check out <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/mILu84V3Ujgd76ZmgXi8CVJWjMG2pixS7DVnIYTXP2Ft5WN3hzAmJbTCc8YQBkzlxk9v1HLUixi9wPCY2dBeTSlTYwnwqlIYsfarD5xmjSA0eHq8Iq4E9wVaFM5hloxXqLnvXVASF3BIH_zfdWoLM-3192AGkCs5z5yxsjJQpje4XYtFQa-Sg1n0Nz6Kbw" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">the program</a> and <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/v-H9nlOMPYtOlkfc0qOanN2E8tQduDIciI43HTHcZ4KNWYAozPuBatO3OpSK2-JxDYJoAfxP6uGvLPRoSPjcgwODsbS7N3B2EOoJu8LzN8Mh-iXwJVno-eA-phtfzkai-dXvuaFHlVr83DL5XnXKw8D0s5HQyESTQ1SQrv67xSRiCK6kn5jB_oI1i7asBA" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">sign up</a>!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/cBx72RvXEZ4QwbbF4yvg9dkhHrFd6CCUQyWifZSPsuANgsdRYCUUrncB1JpPWcEvjtRJzH0Z5yUU5C-sRZyMNTm9GJJ48B48FWTmT7Acf71sQ2eSoHsIRylZW5Q5uULTql7xyBhDbwt-RnGyg1_iJ-TDO0vngfSIud5YOlddY6JXOwWSCUPVr65nl1yobQ" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/7fb61a083b014b01981c7bb721ec4e127bb5dcbf1eb29c5ee098da1a611a5fc5.png?e=7W4XJ5RSU0wf74mbasoxZ31Y-kjWSiIeiTXPna88lJKKuvIWIwi6diHbjKxWv_zhtWdtwSghSaAZC98x1S89cOHIidAyneBkzFJ4wcDa4HkmOBUVHBKe-lMy5ZniWcugMeVgEgZ5NMVu1atGmtgVeVouUCShzXA9rOqgjD1Q7Z-uIGfWGAaT_16rBqjjbRjAnZAewvT9Mrx2ymK5NYNpsO1HPccNOIYZu5rRVwRKjT0jGA0" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r36-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/OumDmSd2GWF5p12NxrXyXpejwl1hGKrGMC6j32DXzm0tq8RhfSxC2_HHJf3dv5uGU7_IrOHmRuy9SrH80gMTIc1srETfeuc-WMAp2sI0PaNdR7fyss8F-btuYwMjooqWJuAh68fmy_JzqwWQPw-53vC5O745WB-uLw5P7uxS0Ynx6n7t3RtknMXARizp" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">FlutterCon</span></a><span style="font-size: 18px;">, 07/3-5</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Berlin, Germany</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">We’re silver sponsors and will be exhibiting and running a workshop. Speakers TBA after May 1st. Save the dates!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/G8VXdbT5sdC4LmgC0-0k81_c4UqmOqtHpeniaQu1x077qgMrkpFxsrJlxv7iMv_s9rIuRmwIHIaacvNi55mtifNHyi4gbPNWInERM355ygs-6qEGYEA8AKJ8TSqz8POGCQ-PpUvm-AXyYUK3x95RqzRVz6kXtoSlqQz49auBNr2Rzw29v3nCT2c86VXk" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/6e5f8482bf9577f3c3dbfdf20383cd38c5b2e18f76eb2b5a374ae77cfb6f9236.png?e=FFwuiTZZNEhXbR0hNq_CzlVptxuJm08pZ_j3vX0Z6GT-Bo8Ab9tYv-UxdboIaBGymt85WH4znx9_DaO3XcbgsNipqoBLxykoTLc_uWJNKfm3uZBUXzgCdpP4MKzSxfPH4-glRzxYRNilFIyEVtbXBH6ve5MpQujLvVsTs1RCPzz5exDRyPPrirJCdVyjSQUhP0vKic2knjfAk0Tzs2IYBrCJOWsgDi_eawj2XaFothwUfYI" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/o_ujTuUPSYKce7rEn0JSQ7c8AeSzxgf7JNNx1nB412YdOfTIMV_om_kpMll10G_BW_k20CxgKVIrRZ8norF7J_N7pzckzadJKSlWU1C7Oel4O4lHk-pG32tJdWJTYd9_n339OHepsxirv2keGRrJ_Dv6Lt0tmKc4x7jTb-Ta-ph1NWjjLGu3vZ0ZTOwc260NSg" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">SIGGRAPH</span></a><span style="font-size: 18px;">, 07/28-08/01</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Denver, USA</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">Registration is now open! <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/X7b81d30GrzbNrI5C8KRrW2gU8oD74etE5x3EvOB2cs1CqpsqPazSFQLqUU35O5OoefmvEvrW8lGBH-MZCka2vGX8JD0qn4QRjW4KbjCh4GbKAV60hxoDzEGPqztnljn8bLd2ZnHLvcp_UV-tFa-ovoG2RXbo-Ukd9pCnZPZTmAd5VX568ogbu1Cfym1wjM3-lYOaOkC2nk4npcLW237tknv8VRrgTq1pdfHcZSEPNw-2-c" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Check out the options and register</a><a rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">.</a> Best rates if you register by Friday, 17th May.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/F0lonb9bD5T20OsNd-9ZUMaI2RP2bX2NLRt-JgrubMiHW-0zVtc0jhVH9ErN8jrOCqny-cC69kBpmop9X26AJGdP-oZY_qjtL58qrrRBynM-b_sVa3ygtjZmD_zPR3_7-tYyE0vPTizJQAm_WKy1IqAUu91KzjzRuzQgSlfkzOmI9nEBMFWJbI8HQQN3k3dkig" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/424625e6e0b5e0401c625e02e3f8eedf807eba5cfd9799b6ce85fd7722d80cca.png?e=9hIutHbKq9oXDlZ1afONMEe8Qb2iqn55XtEcx2es72URltpa8seUD25Zgx5YYRKebMmfJys8jn1qmPTjfGPYuUgro5HDpB9BJQsF4p57hlRHgG1j-pAj4ywgOcbH8F_X5Cajjf-OyFtPg9EleXH-jJcFN48tiaMPxuWe85NmsELD0ilLCmv22oaEGJFqPtEY1uIGKn9MOUGQBZ6o6JlDkbhCNx_dCxDEOJOfjwyo1_C3Cp0" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/0XzKP1VODORyABZkxsPDmRtaCTIhL7mRoujB8mEC1Wh2_FglA78dnTNJhevdV0df7P-BrIOnkYYUfWjD4a80u34URX20_fkMOSATMbyuwOgsoL1hJvIi_y49bDsu0uN2DjIPt-_v3W2_X53EeVb4lnItrp-1OCXM5dbnpX8ctTxSWx7Ygd7PModJmNRPok3PEoyGGIIjSCLCkGbfawrPO-DbkfGiyywBjDbN" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">Qt Contributor Summit</span></a><span style="font-size: 18px;">, 09/5-6</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Würzburg, Germany</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;"><span style="color: #27f00a;"><strong>Attention Qt Developers!</strong></span> This event is now back-to-back with KDE Akademy in the same town. Save the dates!!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/o3erbI9Uas0nC3qndUkKJOWEuA-7JQBtJ-V4BP5SQ-QS8gSgx0ElJGn5wJa3RhsnM2fWOPCzlAoX0u5zY1woeFhMyGdNio0ecAJdw3OgKKZJDmgTdUpwR4928fg4ifwhrVy_nS3rJy-svYtt2QaFVTQRn1h1I832OKgYGxZsD4MXd6J16TMVgSwMC03Q9kJYMFROzQ4Zglwi_7ivBi9YK7LuhrPCcEd2I7hx" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/d922ae83011ca0af2b7abeca9c763c0db04bb8861fe8a0796934f8f7e9dde5f0.png?e=I8_OQoDYVu-MbgWYLoKigv6VfkJHc-T6nAh5Mxdy4yikvOdlzScd3ytJKwuNWZ5ytSq5kv_BeHIAEB1Lyc2LY_wniIz-W1Gn-nUuZb0ip7pfiajL3SxqOlHHFRGH1kpt2WzhTF4W9QgNa2cruwhHFPw4pSw_SU93k2h9klAEDalWNWPnZFiUMzJlXC4THA4pcnHsFX4-u9Dql8DsVjES_qqV58L1x3guHnxwP0e4akcsvrM" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/5xdbeIHRIoapSqkZG1mX_AEAQOQdRHoccgU8NAjGAFj5yiTilpAbQaEHhwsOa_o9EQmDnAQUkku5XBuNyfJq6Wun4o9zIz8fSVfA2RjBavo1shzUBsuVClulKUnqb3layvITKlN-ShjKnfnWz_D6SMI035JfY9epSMH6Xz5Y94vzzwOPz9YynCUMHH7LLkAwD5sRDGU" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">KDE Akademy</span></a><span style="font-size: 18px;">, 09/7-12</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Würzburg, Germany</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">The call for proposals is out for talks on Sept 7th and 8th. <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/lF5VzLRnPCd49JSq6C050ntctlFKUgFbReQs571Vq_IpkvF4LTJJoRHw97f7ifloSkiHQpBjgefGQmDukMbc2XSqvh4endL_e-sxhonDlyLUD529FGFUSWXVpPt-HqEyggr3fxr-ioc32t5I9Y43PuPxPhz-1KOWL89cSFU3KAS2LNtz11QoGq53IHS57fqq5JSfHyr_cFH3r5E" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">Submit a talk</a>!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/ja06ng4_vVBmuk21k6iQjHNb5Jh_7LwM83SaPPO4apajk9PRwHZu-ZQ0p-3GfB7Wthy7t1Kq4ZdXazTa6J5mS9LIV2FHX3zpEMhW5ZjBLQ1DPpLLSKifo-8BCmLoP30f10fZ28u2hMyIuw-MDQFtjVu22KzOeYs63lMobyav0seHx1oiQhrhG_uRwKcEfZlWrQ7gdD8" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/be552a158203cd963add24b791bcd3e301bd340d797be74165e1f827ef661413.png?e=3qI9ddJQlYxYEj0cIOxK7COFFEsArB0wTZzjbRtKpUsdGIQck2pROhh3WEooXNVMlPt4EZs_31EzmNG8FrXroShSdT4LxwmRjLCZYS-lTtt2IIiUVmEbtfCQJR2QjtAhO2Uz4QUVjHnr76evUn5C6jIlq6Qll-dmzyiPs6olQjJplOJbn737LkZefLXYSR9f83bivPmvnDthJ0cGYkqQijP6P0V6YHzbOER46OUOr2hxxQ8" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/REn_e7IraZf-6parayETvD6W0y_VDosqk2mhi0-Bb46_HEve7HW1qLXQDVEhOMGNEcOa7sAGLH44NMUvD1G2XLRdjIdr_EeiwNP6bNwjRwZwRrtZNGWYKGAp794Mr-xzz6Iq3dJ42dhiEu2mYfSIofO11Y9WBMCJhjyoRytT0hS-QSwozcAWcXrL3Zv7PKVP5w" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">CppCon</span></a><span style="font-size: 18px;">, 09/15-20</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Aurora, Colorado, USA</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">Get ready for the biggest and best C++ conference in the world. Save the dates!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/YASxnsgColejLBua4ExNrQjF11vdCRvS6KPXFuvDJ5SjgKIJcbHSF3nJtD8hluWd-JRmEPlaYsIAXn2emDlHVDIpaHi2hpp6tHR9zrL8fVU9m-yPeGXBMH_LU2iy1q8C5LuzQaaYFviacRHpYFsc4hLnfKOjgNyH5hI_KmyY1b0QAXZ3E3Dpzy6WdDqjXKGRQQ" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/63b32b583a77d80860d4a2611d0822a2d3e3394c43fa69c616ab503f5152fa6c.png?e=ns7AM4UIQYnMJAFWMLZcENewoZdzMcqGOP8uS_lSTfRdf2OYcgad-uvRNu2eZStFCTsqytaqqIyZiK3scX-Yuh9Ro33SIJC5906LnTzzfTUO1OCHAPs1o0HMljqCuN9w6YnxyZqpzSroeHf5XsR8l3XMUmZ2P7e9fnWAGqMQWkfkcgrA7ztEtZlIk9YMabbL5jdJU_kgScJbkq6a4ywFrjtqsi4E41778GfK52qpFUvRXwc" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/HUkYumzWHUNkZpQlrcbGgLov8Dw8I9A6HsVppIuYCExNxoNMSR6jij6xIk6qD5Jv6GEEMH2cNR3NrFXhLEUgt8AqDzZokOx4TAx6cOVyvLm-R6TvRrQ3ye1TY1jAp8XtR4kweeZfH9V9oVYfjVgNJ93pCkrIwgDEEAaSeQxcFCe722ra646Z0xI" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">RustLab</span></a><span style="font-size: 18px;">, 11/9-11</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Florence, Italy</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">The <a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/6TbbT1LYegtRoQv0JPwz89N27V0xNavB634F57M_uQMC0jvT1qQz_YR1LdBkZjmdCEcNZ4KmoD1uQl63kSXDCMcSL7_2_TtDWvsryaCPKNv-wyUuhM1zZO2KUrd8WT3t2OoBylYm9leHeHOL2-cAbJJenfSJEJxyJ7yBtOv0TN43V_zxO3UybCj-_jk3Fy_wxoDypXeSjjjWsBI" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank">call for proposals</a> is open. There’ll be two kinds of talks: 25-min ‘inspirational’ and 40-min ‘deep-dives’, all in English and it happens in Florence. What’s not to love?!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/TvnccsW2W3FTj54gk8fEdsJMuGfNBMx8Sq87n7kMiR-hIjqojhhPtY122T6TDPKU_3nQZIPj7R_i8fGTck9euGYkyfAfI6drQy_Qcy1-YTtBBzgYiDbqppIC8-mepUc_50Zip59oBt_EhiGgIawqjDCHE9ZOzW3cXsNlsS9dmw76CmoIyOkh0tw" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/d627f4f33f2be7f9875f781399065adf6167869724f3788585c6c8c0982d17f5.png?e=xrPFXyl4RVWGFZLUgWvv_6O4WDpyLH49W8iAr3npEYWJvoctUtugGOj2wLzMnOM9KdfckhU64RIgro0K-B9eBZ8W363vOIhlGWL56s0LYh_wbCdsSW5R-2R-dHfQ_pmIf-prVSH8NHuJzJ3FBsAFJswgmtrzzggu2bzAB2kZ_C0loxAAlySypKQIHX0auPW77QS4nZomfQ1xh7kafJcodHncG8AmqZ53Nb44XBcMdrN_2UM" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r27-i" style="background-color: #ffffff; color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-bottom: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/ApsO8AIHE1R70f1sj8DW6wWupcd4obvNsP728kSM_lvQ7ZLmpv8BrtinoKzv3W9aFKuIdoHQLjZKV0LVRuFcJptwggSez8PV28ybNkb-l9-OT4ZJkOA_l-NQFqsAcal2lLpCXN7aGknf875NNnsD9q0ZegqBiT1ms0cVjhdkd_no7pr3LzMnYd6gqJypz4U2XTJ_-jj_DtVKt9-LbhK0sNyMq5E5bDIx4o1d5p0RB6tOLHeVtrbc7RxVLoCgxIZzLsY7rYaiLLcy" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><span style="font-size: 18px;">Meeting C++ 2024</span></a><span style="font-size: 18px;">, 11/14-16</span></p>
<p style="margin: 0; color: #222222; font-family: Open Sans; font-size: 22px;"><span style="font-size: 16px;">Berlin, Germany & online</span></p>
</div>
</td>
</tr>
<tr>
<td align="left" class="r14-c nl2go-default-textstyle" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; line-height: 1.5; padding-top: 15px; text-align: left;">
<div>
<p style="margin: 0;">With C++ committee members likely to be passing through (and giving talks) en route to the ISO C++ meeting in Poland a week later, it’s not to be missed. Save the dates!</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="r12-c" style="font-weight: normal;" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r13-i" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 12px; padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r37-c" style="color: #808080; font-family: verdana,geneva,sans-serif; font-size: 0px; line-height: 0px; padding-top: 28px;"><a href="https://6hcgu.r.sp1-brevo.net/mk/cl/f/8oJ_-m-SeX7InAl5DUHh2cyvX4ah4EsEop4TTg2aie7VkOIx9rk7hhHu1EhrfBO0FzxZ5rvbm104i8XQe9GDyv7iik7QR6dBzsW7jXCqIF6Wt5tFiQySfuj8vSoq-TA3igzm0Ro-EDbxuML5AAbjiD5JgqChwBXvkeQdMHYgIERH9rponi-7IUgjsgVgXPGbWjlVcAKRZcY--9PcHCb4iHwdnmREegDZUSIrU9WAH1eZ9aDiLLndK64gA_GH0_q4jhluZ_CPqomu" rel="noopener" style="color: #4caad8; text-decoration: none;" target="_blank"><img border="0" src="https://img-cache.net/im/3790426/cb39b2b508f5403c7cc0e02706b81a1fa6c10484d24f9e7e901508bb8139708c.png?e=bO9e-uXcZ1d67MrcB6l0aceACTNGE125738jJ2zZ-0sCkBr-CdkMalOjqQBv2dNSdCcJsCdCle_m65e2d0ia6_iG1ukeJYEFKmE00jeeLyem8YqEyADZpwq_QNPn9W_PHiQGo4Q9XdGVqsAQodigDhS3nb1BUTCDlNfF4gxAi6bmllPmmAifOY0O_i0-j0jztlcfvUW--gwLYoFFayGP81k0MiPX2KfXJXnsSz6c6gtNiMY" style="display: block; width: 100%;" width="270"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r18-i" style="background-color: #ffffff; padding-bottom: 20px; padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th class="r12-c" style="font-weight: normal;" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="r5-o" style="width: 100%;" width="100%">
<tbody>
<tr>
<td class="r19-i" style="padding-left: 15px; padding-right: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="r16-c" style="padding-bottom: 30px; padding-top: 30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-top-style: solid; border-top-color: #4caad8; border-top-width: 1px; font-size: 1px; line-height: 1px;" width="100%">
<tbody>
<tr>
<td height="0" style="font-size: 0px; line-height: 0px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" class="r43-c">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="r10-o" style="width: 570px;" width="570">
<tbody>
<tr>
<td valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="color: #727272; font-size: 10px;"></div>
<p>The post <a href="https://www.kdab.com/2024-april-newsletter/">C++ & Rust, Servo Web & Qt, Qt Quick & JSON, Embedded – blogs & videos, Hotspot 1.5, Qt 6.7, GCompris in India, Events</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/qt-visual-studio-tools-3.2.0-released</guid>
<title>The Qt Company Blog: Qt Visual Studio Tools 3.2.0 Released</title>
<pubDate>Mon, 29 Apr 2024 08:53:55 GMT</pubDate>
<link>https://www.qt.io/blog/qt-visual-studio-tools-3.2.0-released</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-visual-studio-tools-3.2.0-released" title=""><img alt="Qt Visual Studio Tools 3.2.0 Released" class="hs-featured-image" src="https://www.qt.io/hubfs/Settings.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p>We are happy to announce the release of the Qt Visual Studio Tools version 3.2.0. Installation packages are now available at the <a href="https://marketplace.visualstudio.com/publishers/TheQtCompany">Visual Studio Marketplace</a> and <a href="https://download.qt.io/official_releases/vsaddin/">download.qt.io</a>.<br>
<br>
This update of the Qt VS Tools extension adds experimental support for QML LSP server, as well as full support of the Qt VS Tools for Visual Studio 2022 on ARM64.<br>
<br>
<br>
<br>
Qt MSBuild file support:<br>
<br>
Alongside providing Qt-related MSBuild files within the Qt VS Tools package, we now offer them as a separate .zip download for your convenience. Starting from version 3.2.0, access the standalone Qt MSBuild files by visiting our public server download location: <a href="https://download.qt.io/official_releases/vsaddin/">Official releases</a>. <br>
<br>
Please refer to the project's <a href="https://code.qt.io/cgit/qt-labs/vstools.git/tree/Changelog">Changelog</a> for a list of all changes included in this release. Feel free to report any problems, or make any suggestions or comments, in the <a href="https://bugreports.qt.io/projects/QTVSADDINBUG/issues">Qt Visual Studio Tools bug tracker</a>.</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fqt-visual-studio-tools-3.2.0-released&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.basyskom.de/?p=9069</guid>
<title>Qt – basysKom GmbH: How To Use Modern QML Tooling in Practice</title>
<pubDate>Fri, 26 Apr 2024 07:37:58 GMT</pubDate>
<link>https://www.basyskom.de/2024/how-to-use-modern-qml-tooling-in-practice/</link>
<description><p><a href="https://www.basyskom.de/2024/how-to-use-modern-qml-tooling-in-practice/"><img align="left" alt="How To Use Modern QML Tooling in Practice" height="150" src="https://www.basyskom.de/wp-content/uploads/2020/07/Qt_logo_space-01-01-300x150.png" style="margin: 0 20px 20px 0;" width="300"></a></p>
<p>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.</p>
<p><a href="https://www.basyskom.de/2024/how-to-use-modern-qml-tooling-in-practice/" rel="nofollow">Continue reading How To Use Modern QML Tooling in Practice at basysKom GmbH.</a></p></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/qt-meetup-community-events-in-toronto-and-detroit</guid>
<title>The Qt Company Blog: Qt Meetup: Community Events in Toronto and Detroit!</title>
<pubDate>Thu, 25 Apr 2024 15:21:53 GMT</pubDate>
<link>https://www.qt.io/blog/qt-meetup-community-events-in-toronto-and-detroit</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-meetup-community-events-in-toronto-and-detroit" title=""><img alt="Qt Meetup: Community Events in Toronto and Detroit!" class="hs-featured-image" src="https://www.qt.io/hubfs/Qt%20Toronto%20%2B%20Detroit%20May%202024.jpg" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p>Hey Qt,</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fqt-meetup-community-events-in-toronto-and-detroit&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://blog.felgo.com/updates/felgohotreload-1.2.0-load-from-cache-auto-connect-qt-6-7</guid>
<title>Felgo: Felgo Hot Reload 1.2.0: Load from Cache, Auto-Connect from Command Line, Improved QML Reload and Qt 6.7 Support</title>
<pubDate>Wed, 24 Apr 2024 12:47:04 GMT</pubDate>
<link>https://blog.felgo.com/updates/felgohotreload-1.2.0-load-from-cache-auto-connect-qt-6-7</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://blog.felgo.com/updates/felgohotreload-1.2.0-load-from-cache-auto-connect-qt-6-7" title=""><img alt="Felgo Hot Reload 1.2.0: Load from Cache, Auto-Connect from Command Line, Improved QML Reload and Qt 6.7 Support" class="hs-featured-image" src="https://blog.felgo.com/hubfs/felgo-hot-reload-product-release.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p>The Felgo QML Hot Reload release 1.2.0 brings additional options on the connection screen, command line arguments, several QML Hot Reload improvements, and an overhauled user interface. Read on to check out all of the updates below:</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=6147417&k=14&r=https%3A%2F%2Fblog.felgo.com%2Fupdates%2Ffelgohotreload-1.2.0-load-from-cache-auto-connect-qt-6-7&bu=https%253A%252F%252Fblog.felgo.com&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/qt-safe-renderer-2.1.0-beta-3-released</guid>
<title>The Qt Company Blog: Qt Safe Renderer 2.1.0 Beta 3 Released</title>
<pubDate>Fri, 19 Apr 2024 16:15:29 GMT</pubDate>
<link>https://www.qt.io/blog/qt-safe-renderer-2.1.0-beta-3-released</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-safe-renderer-2.1.0-beta-3-released" title=""><img alt="Qt Safe Renderer 2.1.0 Beta 3 Released" class="hs-featured-image" src="https://www.qt.io/hubfs/qtsr-qtcluster-telltales-eventsender-1-1.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p><span>We have released Qt Safe Renderer 2.1.0 Beta 3 for commercial license holders today. It provides a snapshot of upcoming Qt Safe Renderer features and the following improvements for <span>Qt Safe Layout Tool QML and JavaScript parsing</span>:<br></span></p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fqt-safe-renderer-2.1.0-beta-3-released&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/qt-for-android-automotive-6.7-is-released</guid>
<title>The Qt Company Blog: Qt Android Automotive 6.7 is released</title>
<pubDate>Fri, 19 Apr 2024 12:24:29 GMT</pubDate>
<link>https://www.qt.io/blog/qt-for-android-automotive-6.7-is-released</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-for-android-automotive-6.7-is-released" title=""><img alt="Qt Android Automotive 6.7 is released" class="hs-featured-image" src="https://doc.qt.io/qt-6/images/select_example_project.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p><span><span><span>The latest release of</span> <span>Qt for Android Automotive (</span><span>QtAA</span><span>) is out, based on <a href="https://www.qt.io/blog/qt-6.7-released">Qt 6.7.</a></span></span><br></span></p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fqt-for-android-automotive-6.7-is-released&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.qt.io/blog/security-advisory-potential-use-after-free-issue-in-qt-for-webassemblys-implementation-of-qnetworkreply</guid>
<title>The Qt Company Blog: Security advisory: Potential Use-After-Free issue in Qt for WebAssembly’s implementation of QNetworkReply</title>
<pubDate>Thu, 18 Apr 2024 09:00:00 GMT</pubDate>
<link>https://www.qt.io/blog/security-advisory-potential-use-after-free-issue-in-qt-for-webassemblys-implementation-of-qnetworkreply</link>
<description><p>A recently reported potential Use-After-Free issue in Qt’s wasm implementation of QNetworkReply has been assigned the CVE id CVE-2024-30161.</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fsecurity-advisory-potential-use-after-free-issue-in-qt-for-webassemblys-implementation-of-qnetworkreply&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://www.ics.com/4827 at https://www.ics.com</guid>
<title>ICS Insights: Qt and QML: Key Takeaways from 2024 Embedded World</title>
<pubDate>Tue, 16 Apr 2024 15:43:15 GMT</pubDate>
<link>https://www.ics.com/blog/key-takeaways-2024-embedded-world</link>
<description><p>With the 2024 Embedded World Exhibition & Conference in the rear view, here are some key impressions from the ICS team around the future of embedded development.</p></description>
</item>
<item>
<guid isPermaLink="false">https://www.kdab.com/?p=33391</guid>
<title>KDAB on Qt: Recursive Instantiation with Qt Quick and JSON</title>
<pubDate>Thu, 11 Apr 2024 07:00:37 GMT</pubDate>
<link>https://www.kdab.com/recursive-instantiation-with-qt-quick-and-json/</link>
<description><p>Recently I was tasked to come up with an architecture for remote real time instantiation and updating of arbitrary QML components.</p>
<p>This entry shows how you can use a simple variation of the factory method pattern in QML for instantiating arbitrary components. I’ve split my findings into 3 blog entries, each one covering a slightly different topic. Part 1 focuses on the software design pattern used to dynamically instantiate components. Part 2 shows how to layout these dynamic components by incorporating QML’ s positioning and layout APIs. The last entry, consisting of Parts 3 and 4, addresses the anchors API and important safety aspects.</p>
<p>This is Part 1: Recursive Instantiation with Qt Quick and JSON.</p>
<p>The original factory method pattern made use of static methods to programmatically instantiate objects of different classes, instead of having to call their constructors. It achieved that by having the classes share a common ancestor. Our variation of the popular pattern uses a Loader to choose which component to load, and a Repeater to dynamically instantiate arbitrary instances of this loader using a model.</p>
<p>Here we specify which components with a JSON array and use a Repeater to load them.</p>
<pre class="language-js" tabindex="0">
<code class="language-js"><span class="token comment"> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">root</span>
// A JSON representation of a QML layout:</span>
property <span class="token keyword">var</span> <span class="token literal-property property">factoryModel</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token string">"Button"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token string">"Button"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token comment"> // Root of our component factory</span>
Repeater <span class="token punctuation">{</span>
<span class="token literal-property property">model</span><span class="token operator">:</span> root.factoryModel
<span class="token literal-property property">delegate</span><span class="token operator">:</span> loaderComp
<span class="token punctuation"> }</span></code>
</pre>
<p>To be able to instantiate any kind of item, you can use a Component with a Loader inside, as the Repeater’s delegate. This allows you to load a different component based on the Repeater’s model data.</p>
<pre class="language-javascript" tabindex="0">
<code class="language-javascript"> <span class="token comment">// Root component of the factory and nodes</span>
Component <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> loaderComp
Loader <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> instantiator
required property var modelData
<span class="token literal-property property">sourceComponent</span><span class="token operator">:</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>component<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token string">"Button"</span><span class="token operator">:</span>
<span class="token keyword">return</span> buttonComp<span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token string">"RowLayout"</span><span class="token operator">:</span>
<span class="token keyword">return</span> rowLayoutComp<span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token string">"Item"</span><span class="token operator">:</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">return</span> itemComp<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code>
</pre>
<p>To assign values from the model to the component, add a method that gets called when the Loader’s onItemChanged event is triggered. I use this method to take care of anything that involves the component’s properties:</p>
<pre class="language-javascript" tabindex="0">
<code class="language-javascript"> <span class="token comment">// Root component of the factory and nodes</span>
Component <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> loaderComp
Loader <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> instantiator
required property var modelData
<span class="token literal-property property">sourceComponent</span><span class="token operator">:</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>component<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token string">"Button"</span><span class="token operator">:</span>
<span class="token keyword">return</span> buttonComp<span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token string">"RowLayout"</span><span class="token operator">:</span>
<span class="token keyword">return</span> rowLayoutComp<span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token string">"Item"</span><span class="token operator">:</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">return</span> itemComp<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token literal-property property">onItemChanged</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// Pass children (see explanation below)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">"object"</span><span class="token punctuation">)</span>
item<span class="token punctuation">.</span>model <span class="token operator">=</span> modelData<span class="token punctuation">.</span>children<span class="token punctuation">;</span>
<span class="token comment">// Button properties</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>component<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token string">"Button"</span><span class="token operator">:</span>
<span class="token comment">// If the model contains certain value, we may assign it:</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>text<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span>
item<span class="token punctuation">.</span>text <span class="token operator">=</span> modelData<span class="token punctuation">.</span>text<span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Item properties</span>
<span class="token comment">// Since Item is the parent of all repeatable, we don't need to check</span>
<span class="token comment">// if the component supports Item properties before we assign them:</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>x<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span>
loaderComp<span class="token punctuation">.</span>x <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>y<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span>
loaderComp<span class="token punctuation">.</span>y <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>modelData<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code>
</pre>
<p>Examples of components that loaderComp could load are defined below. To enable recursion, these components must contain a Repeater that instantiates children components, with loaderComp set as the delegate:</p>
<pre class="language-javascript" tabindex="0">
<code class="language-javascript"> Component <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> itemComp
Item <span class="token punctuation">{</span>
property alias children<span class="token operator">:</span> itemRepeater<span class="token punctuation">.</span>model
<span class="token literal-property property">children</span><span class="token operator">:</span> Repeater <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> itemRepeater
<span class="token literal-property property">delegate</span><span class="token operator">:</span> loaderComp
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
Component <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> buttonComp
Button <span class="token punctuation">{</span>
property alias children<span class="token operator">:</span> itemRepeater<span class="token punctuation">.</span>model
<span class="token literal-property property">children</span><span class="token operator">:</span> Repeater <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> itemRepeater
<span class="token literal-property property">delegate</span><span class="token operator">:</span> loaderComp
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
Component <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> rowLayoutComp
RowLayout <span class="token punctuation">{</span>
property alias children<span class="token operator">:</span> itemRepeater<span class="token punctuation">.</span>model
<span class="token literal-property property">children</span><span class="token operator">:</span> Repeater <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> itemRepeater
<span class="token literal-property property">delegate</span><span class="token operator">:</span> loaderComp
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code>
</pre>
<p>The Repeater inside of the components allows us to instantiate components recursively, by having a branch or more of children components in the model, like so:</p>
<pre class="language-javascript" tabindex="0">
<code class="language-javascript"> <span class="token comment">// This model lays out buttons vertically</span>
property <span class="token keyword">var</span> <span class="token literal-property property">factoryModel</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token string">"RowLayout"</span><span class="token punctuation">,</span>
<span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token string">"Button",</span>
<span class="token string-property property">"text"</span><span class="token operator">:</span> <span class="token string">"Button 1"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token string">"Button",</span>
<span class="token string-property property">"text"</span><span class="token operator">:</span> <span class="token string">"Button 2"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span></code>
</pre>
<p>Here we’ve seen how we can use a Repeater, a JSON model, a Loader delegate, and simple recursive definition to instantiate arbitrary QML objects from a JSON description. In my next entry I will focus on how you can lay out these arbitrarily instantiated objects on your screen.</p>
<p>Thanks to <a href="https://www.kdab.com/trainer/kevin-krammer/">Kevin Krammer</a> and <a href="https://www.kdab.com/trainer/jan-marker/">Jan Marker</a> whose insights helped improve the code you’ve seen here.</p>
<p>I hope you’ve found this useful! Part 2 may be found already or later by following <a href="https://wp.me/p2b2Fz-8Sr">this link</a>.</p>
<h5>Reference</h5>
<ul>
<li>To see a real world application of this factory design pattern in action, watch “QML for building beautiful desktop apps | Dev/Des 2021”, by Prashanth N. Udupa <a href="https://youtu.be/l2nC-onPGQs?si=Q-xawseUUzsNADk9&t=1720" rel="noopener noreferrer" target="_blank">https://www.youtube.com/watch?v=l2nC-onPGQs</a></li>
</ul>
<div class="panel panel-info">
<div class="panel-heading">About KDAB</div>
<div class="panel-body">
<p>If you like this article and want to read similar material, consider subscribing via <a href="https://www.kdab.com/category/blogs/feed/">our RSS feed</a>.</p>
<p>Subscribe to <a href="https://www.youtube.com/kdabtv">KDAB TV</a> for similar informative short video content.</p>
<p>KDAB provides market leading software consulting and development <a href="https://www.kdab.com/software-services/">services</a> and <a href="https://training.kdab.com/">training</a> in Qt, C++ and 3D/OpenGL. <a href="https://www.kdab.com/about/contact/">Contact us</a>.</p>
</div>
</div>
<p>The post <a href="https://www.kdab.com/recursive-instantiation-with-qt-quick-and-json/">Recursive Instantiation with Qt Quick and JSON</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></description>
</item>
<item>
<guid isPermaLink="false">https://www.kdab.com/?p=34100</guid>
<title>KDAB on Qt: Embedding the Servo Web Engine in Qt</title>
<pubDate>Fri, 05 Apr 2024 08:00:03 GMT</pubDate>
<link>https://www.kdab.com/embedding-servo-in-qt/</link>
<description><p>With the Qt WebEngine module, Qt makes it possible to embed a webview component inside an otherwise native application. Under the hood, Qt WebEngine uses the Chromium browser engine, currently the de facto standard engine for such use cases.</p>
<p>While the task of writing a brand new standard-compliant browser engine is infamous as being almost unachievable nowadays (and certainly so with Chromium coming in at 31 million lines of code), the Rust ecosystem has been brewing up a new web rendering engine called <a href="https://servo.org/">Servo</a>. Initially created by Mozilla in 2012, Servo is still being developed today, now under the stewardship of the Linux Foundation.</p>
<p>With the browser inherently being exposed to the internet, it is usually the biggest attack vector on a system. Naturally this makes Servo very attractive as an alternative browser engine, given that it is written in a memory-safe language.</p>
<h2>A Servo WebView</h2>
<p>At KDAB we managed to embed the Servo web engine inside Qt, by using our <a href="https://github.com/KDAB/cxx-qt">CXX-Qt</a> library as a bridge between Rust and C++. This means that we can now use Servo as an alternative to Chromium for webviews in Qt applications.</p>
<p>From a QML perspective this component is similar to the Chromium <a href="https://doc.qt.io/qt-6/qml-qtwebview-webview.html">WebView</a>, such as providing <code>canGoBack</code>, <code>canGoForward</code>, <code>loading</code>, <code>title</code>, <code>url</code> properties and <code>goBack</code>, <code>goForward</code> methods. The QML item itself acts in the same way with the contents being rendered to match its size.</p>
<pre class="brush: plain; title: ; notranslate">
import QtQuick
import QtQuick.Window
import com.kdab.servo
Window {
height: 720
width: 1280
title: webView.title
visible: true
ServoWebView {
id: webView
anchors.fill: parent
url: "https://servo.org/"
}
}
</pre>
<p>The screenshot below shows a basic QML application with a toolbar containing back, forward, go buttons and an address bar. We use CXX-Qt to define Qt properties, invokables, and event handlers (e.g. touch events) in Rust and trigger events in the Servo engine. Then any update requests from Servo can trigger an update of the Qt side via the Qt event loop.</p>
<p><img alt="" class="aligncenter wp-image-34507 size-full" height="833" src="https://www.kdab.com/wp-content/uploads/stories/cxx-qt-servo-webview.png" width="1286"></p>
<p>As we move towards stabilising <a href="https://github.com/KDAB/cxx-qt/">CXX-Qt</a> at KDAB, investigating real world use cases, such as exposing Servo to Qt, allows us to identify potential missing functionality and explore what is possible when joining the Rust and Qt ecosystems together.</p>
<h2>Technical details</h2>
<p>Under the hood most of the heavy lifting is done by our <a href="https://github.com/KDAB/cxx-qt/">CXX-Qt</a> bindings, which already bridges the obvious gap between the Rust and Qt/C++ worlds. However, some further glue is needed to connect the rendering contexts of Servo to being able to render the surfaces into the actual Qt application. Internally, Servo uses <a href="https://github.com/servo/surfman">surfman</a>, a Rust library to manage rendering surfaces. At the time of writing, surfman supports OpenGL and Metal, with support for Vulkan being planned.</p>
<p>We use surfman to <a href="https://github.com/KDABLabs/cxx-qt-servo-webview/blob/157b65bb44c7bb2ef5d84542f03dccc0de18c002/src/windowheadless.rs#L29">create a new OpenGL context</a>, that <a href="https://github.com/KDABLabs/cxx-qt-servo-webview/blob/157b65bb44c7bb2ef5d84542f03dccc0de18c002/src/servothread.rs#L76-L81">Servo then uses for rendering</a>. To render the result into the QtQuick scene, we <a href="https://github.com/KDABLabs/cxx-qt-servo-webview/blob/157b65bb44c7bb2ef5d84542f03dccc0de18c002/src/servothread.rs#L145-L161">borrow the surface</a> from Servo, <a href="https://github.com/KDABLabs/cxx-qt-servo-webview/blob/157b65bb44c7bb2ef5d84542f03dccc0de18c002/src/renderer.rs#L130">create a new framebuffer object</a> and <a href="https://github.com/KDABLabs/cxx-qt-servo-webview/blob/157b65bb44c7bb2ef5d84542f03dccc0de18c002/src/renderer.rs#L133">blit the framebuffer</a> into a <a href="https://doc.qt.io/qt-6/qquickframebufferobject.html">QQuickFrameBufferObject</a> on the Qt side.</p>
<h2>Future possibilities</h2>
<p>Servo development is <a href="https://servo.org/blog/2023/12/18/this-year-in-servo/">active</a> again after a period of less activity, therefore the API is evolving and there is work to improve the API for <a href="https://servo.org/blog/2024/01/19/embedding-update/">embedders</a>. This could result in a simpler and documented process for integrating Servo into apps. Also as part of the <a href="https://tauri.app/">Tauri</a> and Servo <a href="https://nlnet.nl/project/Tauri-Servo/">collaboration</a>, a backend for <a href="https://github.com/tauri-apps/wry">WRY</a> could become available. All of these result in many possible changes for the bridge to Qt, as currently this demo directly constructs Servo components (similar to servoshell) but could instead use a shared library or WRY instead.</p>
<p>On the Qt side, there are areas that could be improved or investigated further. For example, currently we are using a framebuffer object which forces use of the OpenGL backend, but with RHI, developers might want to use other backends. A way to solve this for QML would be to change the implementation to instead use a custom Qt Scene Graph node, which can then have implementations for Vulkan, OpenGL etc and read from the Servo engine.</p>
<p>Alternatively <a href="https://www.qt.io/blog/qt-6.7-released#hybrid-applications-with-native-ui-elements-and-rendering">Qt 6.7 has introduced a new QQuickRhiItem element</a>, which is currently a technical preview, but can be used as a <a href="https://doc-snapshots.qt.io/qt6-6.7/qquickrhiitem.html">rendering API-agnostic alternative to QQuickFrameBufferObject</a>.</p>
<p>If this sounds interesting to your use case or you would like to collaborate with us, the code for this tech demo is available on GitHub under <a href="https://github.com/KDABLabs/cxx-qt-servo-webview">KDABLabs/cxx-qt-servo-webview</a> or <a href="https://www.kdab.com/about/contact/">contact KDAB directly</a>. We also have a <a href="https://cxx-qt.zulipchat.com">Zulip chat</a> if you want to discuss any parts of bridging Servo or CXX-Qt with us.</p>
<p>Come and see us at <a href="https://www.embedded-world.de/en">Embedded World 2024</a> where we will have the Servo demo and <a href="https://www.kdab.com/kdab-at-embedded-world-2024/">others</a> on display!</p>
<p> </p>
<p>The post <a href="https://www.kdab.com/embedding-servo-in-qt/">Embedding the Servo Web Engine in Qt</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></description>
</item>
<item>
<guid isPermaLink="false">https://www.basyskom.de/?p=8828</guid>
<title>Qt – basysKom GmbH: Use Compute Shader in Qt Quick</title>
<pubDate>Tue, 02 Apr 2024 09:14:23 GMT</pubDate>
<link>https://www.basyskom.de/2024/use-compute-shader-in-qt-quick/</link>
<description><p><a href="https://www.basyskom.de/2024/use-compute-shader-in-qt-quick/"><img align="left" alt="Use Compute Shader in Qt Quick" height="150" src="https://www.basyskom.de/wp-content/uploads/2020/07/Qt_logo_space-01-01-300x150.png" style="margin: 0 20px 20px 0;" width="300"></a></p>
<p>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.<br>
Compute<br>
Shader are used to perform arbitrary computations on the GPU. For<br>
example, the screenshot below shows a Qt Quick application that<br>
generates Gray Scott Reaction Diffusion patterns.  The simulation is executed by a compute shader that is configured directly in QML.</p>
<p><a href="https://www.basyskom.de/2024/use-compute-shader-in-qt-quick/" rel="nofollow">Continue reading Use Compute Shader in Qt Quick at basysKom GmbH.</a></p></description>
</item>
<item>
<guid isPermaLink="false">tag:www.pythonguis.com,2024-03-27:/faq/adding-images-to-pyside6-applications/</guid>
<title>Python GUIs - qt: Q&A: How Do I Display Images in PySide6? — Using QLabel to easily add images to your applications</title>
<pubDate>Wed, 27 Mar 2024 06:00:00 GMT</pubDate>
<link>https://www.pythonguis.com/faq/adding-images-to-pyside6-applications/</link>
<description><p>Adding images to your application is a common requirement, whether you're building an image/photo viewer, or just want to add some decoration to your GUI. Unfortunately, because of how this is done in Qt, it can be a little bit tricky to work out at first.</p>
<p>In this short tutorial, we will look at how you can insert an external image into your PySide6 application layout, using both code and Qt Designer.</p>
<div class="toc"><span class="toctitle">Table of Contents</span>
<ul>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#which-widget-to-use">Which widget to use?</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#using-qt-designer">Using Qt Designer</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#using-code">Using Code</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#conclusion">Conclusion</a></li>
</ul>
</div>
<h3 id="which-widget-to-use">Which widget to use?</h3>
<p>Since you're wanting to insert an image you might be expecting to use a widget named <code>QImage</code> or similar, but that would make a bit too much sense! <code>QImage</code> is actually Qt's image <em>object</em> type, which is used to store the actual image data for use within your application. The <em>widget</em> you use to display an image is <code>QLabel</code>.</p>
<p>The primary use of <code>QLabel</code> is of course to add labels to a UI, but it also has the ability to display an image — or <em>pixmap</em> — instead, covering the entire area of the widget. Below we'll look at how to use <code>QLabel</code> to display a widget in your applications.</p>
<h3 id="using-qt-designer">Using Qt Designer</h3>
<p>First, create a <em>MainWindow</em> object in Qt Designer and add a "Label" to it. You can find Label at in <em>Display Widgets</em> in the bottom of the left hand panel. Drag this onto the <code>QMainWindow</code> to add it.</p>
<p><img alt="MainWindow with a single QLabel added" height="1027" src="https://www.pythonguis.com/static/faq/adding-images-to-applications/1.png" width="1917"> <em>MainWindow with a single QLabel added</em></p>
<p>Next, with the Label selected, look in the right hand <code>QLabel</code> properties panel for the <code>pixmap</code> property (scroll down to the blue region). From the property editor dropdown select "Choose File…" and select an image file to insert.</p>
<div style="padding: 79.5% 0 0 0;"></div>
<p>As you can see, the image is inserted, but the image is kept at its original size, cropped to the boundaries of the<code>QLabel</code> box. You need to resize the <code>QLabel</code> to be able to see the entire image.</p>
<p>In the same controls panel, click to enable <code>scaledContents</code>.</p>
<div style="padding: 79.5% 0 0 0;"></div>
<p>When <code>scaledContents</code> is enabled the image is resized to the fit the bounding box of the <code>QLabel</code> widget. This shows the entire image at all times, although it does not respect the aspect ratio of the image if you resize the widget.</p>
<p>You can now save your UI to file (e.g. as <code>mainwindow.ui</code>).</p>
<p>To view the resulting UI, we can use the standard application template below. This loads the <code>.ui</code> file we've created (<code>mainwindow.ui</code>) creates the window and starts up the application.</p>
<div class="code-block"><span class="code-block-language code-block-PySide6">PySide6</span>
<pre>
<code class="PySide6">import sys
from PySide6 import QtWidgets
from PySide6.QtUiTools import QUiLoader
loader = QUiLoader()
app = QtWidgets.QApplication(sys.argv)
window = loader.load("mainwindow.ui", None)
window.show()
app.exec()
</code>
</pre></div>
<p>Running the above code will create a window, with the image displayed in the middle.</p>
<p><img alt="QtDesigner application showing a Cat" height="639" src="https://www.pythonguis.com/static/faq/adding-images-to-applications/5.png" width="802"> <em>QtDesigner application showing a Cat</em></p>
<h3 id="using-code">Using Code</h3>
<p>Instead of using Qt Designer, you might also want to show an image in your application through code. As before we use a <code>QLabel</code> widget and add a <em>pixmap</em> image to it. This is done using the <code>QLabel</code> method <code>.setPixmap()</code>. The full code is shown below.</p>
<div class="code-block"><span class="code-block-language code-block-PySide6">PySide6</span>
<pre>
<code class="PySide6">import sys
from PySide6.QtGui import QPixmap
from PySide6.QtWidgets import QMainWindow, QApplication, QLabel
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.title = "Image Viewer"
self.setWindowTitle(self.title)
label = QLabel(self)
pixmap = QPixmap('cat.jpg')
label.setPixmap(pixmap)
self.setCentralWidget(label)
self.resize(pixmap.width(), pixmap.height())
app = QApplication(sys.argv)
w = MainWindow()
w.show()
sys.exit(app.exec())
</code>
</pre></div>
<p>The block of code below shows the process of creating the <code>QLabel</code>, creating a <code>QPixmap</code> object from our file <code>cat.jpg</code> (passed as a file path), setting this <code>QPixmap</code> onto the <code>QLabel</code> with <code>.setPixmap()</code> and then finally resizing the window to fit the image.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">label = QLabel(self)
pixmap = QPixmap('cat.jpg')
label.setPixmap(pixmap)
self.setCentralWidget(label)
self.resize(pixmap.width(), pixmap.height())
</code>
</pre></div>
<p>Launching this code will show a window with the cat photo displayed and the window sized to the size of the image.</p>
<p><img alt="QMainWindow with Cat image displayed" height="439" src="https://www.pythonguis.com/static/faq/adding-images-to-applications/4.png" width="602"> <em>QMainWindow with Cat image displayed</em></p>
<p>Just as in Qt designer, you can call <code>.setScaledContents(True)</code> on your <code>QLabel</code> image to enable scaled mode, which resizes the image to fit the available space.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">label = QLabel(self)
pixmap = QPixmap('cat.jpg')
label.setPixmap(pixmap)
label.setScaledContents(True)
self.setCentralWidget(label)
self.resize(pixmap.width(), pixmap.height())
</code>
</pre></div>
<p class="admonition admonition-note">Notice that you set the scaled state on the <code>QLabel</code> widget and not the image pixmap itself.</p>
<h3 id="conclusion">Conclusion</h3>
<p>In this quick tutorial we've covered how to insert images into your Qt UIs using <code>QLabel</code> both from Qt Designer and directly from PySide6 code.</p></description>
</item>
<item>
<guid isPermaLink="false">https://www.kdab.com/?p=33552</guid>
<title>KDAB on Qt: Introducing the ConnectionEvaluator in KDBindings</title>
<pubDate>Thu, 21 Mar 2024 08:00:17 GMT</pubDate>
<link>https://www.kdab.com/introducing-the-connectionevaluator-in-kdbindings/</link>
<description><p>Managing the timing and context of signals and slots in multithreaded applications, especially those with a GUI, can be a complex task. The concept of deferred connection evaluation offers a nice and easy API, allowing for controlled and efficient signal-slot connections. This approach is particularly useful when dealing with worker threads and GUI threads.</p>
<p>A classic example <span class="hljs-keyword">where</span> <span class="hljs-keyword">cross</span>-thread signal-slot connections are useful <span class="hljs-keyword">is</span> <span class="hljs-keyword">when</span> we have a worker thread performing <span class="hljs-keyword">some</span> computations <span class="hljs-keyword">or</span> data collection <span class="hljs-keyword">and</span> periodically emits signals. The GUI thread can <span class="hljs-keyword">connect</span> <span class="hljs-keyword">to</span> these signals <span class="hljs-keyword">and</span> <span class="hljs-keyword">then</span> display the data however it wishes. Graphical display usually must happen <span class="hljs-keyword">on</span> the main thread <span class="hljs-keyword">and</span> at specific times. Therefore, controlling exactly <span class="hljs-keyword">when</span> the receiving slots <span class="hljs-keyword">get</span> executed <span class="hljs-keyword">is</span> <span class="hljs-keyword">of</span> critical importance <span class="hljs-keyword">for</span> correctness <span class="hljs-keyword">and</span> performance.</p>
<h2><em>A Quick Recap on Signals & Slots and KDBindings</em></h2>
<p>Signals and slots are integral to event handling in C++ applications. Signals, emitted upon certain events or conditions, trigger connected slots (functions or methods) to respond accordingly. This framework is highly effective, but there are cases where immediate slot invocation is not ideal, such as in multithreaded applications where you might want to emit a signal in one thread and handle it in another, like a GUI event loop.</p>
<p><a href="https://github.com/KDAB/KDBindings">KDBindings</a> <span class="hljs-keyword">is</span> a <span class="hljs-keyword">header</span>–<span class="hljs-keyword">only</span> C++<span class="hljs-number">17</span> library that implements the signals <span class="hljs-keyword">and</span> slots design pattern. <span class="hljs-keyword">In</span> addition, KDBindings <span class="hljs-keyword">also</span> provides an easy <span class="hljs-keyword">to</span> use property <span class="hljs-keyword">and</span> bindings <span class="hljs-keyword">system</span> <span class="hljs-keyword">to</span> <span class="hljs-keyword">enable</span> reactive programming <span class="hljs-keyword">in</span> C++. For more information, read <a href="https://www.kdab.com/signals-slots-properties-bindings/">this introduction blog</a>.</p>
<h2><em>Understanding Deferred Connection Evaluation</em></h2>
<p>In Qt, a signal that should be evaluated on a different thread will be executed by the event loop of that thread. As <a href="https://www.kdab.com/signals-slots-properties-bindings/">KDBindings</a> doesn’t have its own event loop and needs to be able to integrate into any framework, we’re introducing the <strong>ConnectionEvaluator</strong> as our solution to those nuanced requirements. It allows for a deferred evaluation of connections, providing a much-needed flexibility in handling signal emissions.</p>
<p>In multithreaded environments, the immediate execution of slots in response to signals can lead to complications. Deferred connection evaluation addresses this by delaying the execution of a slot until a developer-determined point. This is achieved through a <strong>ConnectionEvaluator</strong>, akin to a <strong>BindingEvaluator</strong>, which governs when a slot is called.</p>
<h2><em>Implementing and Utilizing Deferred Connections</em></h2>
<p>We have introduced <strong>connectDeferred.</strong> This function, mirroring the standard connect method, takes a <strong>ConnectionEvaluator</strong> as its first argument, followed by the standard signal and slot parameters.</p>
<p>Signals emitted are queued in the <strong>ConnectionEvaluator</strong> instead of immediately triggering the slot. Developers can then execute these queued slots at an appropriate time, akin to the <strong>evaluateAll</strong> method in the <strong>BindingEvaluator</strong>.</p>
<h4><em>How It Works</em></h4>
<p><strong>1. Create a ConnectionEvaluator:</strong></p>
<pre class="brush: cpp; title: ; notranslate">
auto evaluator = std::make_shared<ConnectionEvaluator>(); // Shared ownership for proper lifetime management
</pre>
<p><strong>2. Connect with Deferred Evaluation:</strong></p>
<pre class="brush: cpp; title: ; notranslate">
Signal<int> signal;
int value = 0;
auto connection = signal.connectDeferred(evaluator, [&value](int increment) {
value += increment;
});
</pre>
<div class="line number6 index5 alt1"></div>
<p><strong>3. Queue Deferred Connections</strong></p>
<p>When the signal emits, connected slots aren’t executed immediately but are queued:</p>
<pre class="brush: cpp; title: ; notranslate">
signal.emit(5); // The slot is queued, not executed.
</pre>
<p><strong>4. Evaluate Deferred Connections</strong></p>
<p>Execute the queued connections at the desired time:</p>
<pre class="brush: cpp; title: ; notranslate">
evaluator.evaluateDeferredConnections(); // Executes the queued slot.
</pre>
<h4><em>Usage Example</em></h4>
<p>To illustrate how this enhanced signal/slot system works in a multithreaded scenario, let’s have a look at a usage example. Consider a scenario where a worker thread emits signals, but we want the connected slots to be executed in an event loop on the GUI thread:</p>
<pre class="brush: cpp; title: ; notranslate">
Signal<int> workerSignal;
int guiValue = 0;
auto evaluator = std::make_shared<ConnectionEvaluator>();
// Connect a slot to the workerSignal with deferred evaluation
workerSignal.connectDeferred(evaluator, [&guiValue](int value) {
// This slot will be executed later in the GUI thread's event loop
guiValue += value;
});
// ... Worker thread emits signals ...
// In the GUI thread's event loop or at the right time
evaluator->evaluateDeferredConnections();
// The connected slot is now executed, and guiValue is updated
</pre>
<p>In this example, the connectDeferred function allows us to queue the connection for deferred execution, and the ConnectionEvaluator determines when it should be invoked. This level of control enables more sophisticated and responsive applications.</p>
<h2><em>Conclusion</em></h2>
<p>In simple terms, the ConnectionEvaluator is a valuable tool we’ve added to KDBindings. It lets you decide when exactly your connections should ‘wake up’ and do their jobs. This is especially helpful in complex applications where you want to make sure that certain tasks are performed at the right time and in the right order (preferably in multithreading applications). Think of it like having a remote control for your connections, allowing you to press ‘play’ whenever you’re ready.</p>
<p>It may also be worthwhile mentioning that we will be integrating this feature into the KDFoundation library and event loop in the <a href="https://github.com/KDAB/KDUtils">KDUtils GitHub repo</a>. Additionally, it’s important to note that it could easily be integrated into any application or framework, regardless of whether it utilizes an event loop.</p>
<div class="panel panel-info">
<div class="panel-heading">About KDAB</div>
<div class="panel-body">
<p>If you like this article and want to read similar material, consider subscribing via <a href="https://www.kdab.com/category/blogs/feed/">our RSS feed</a>.</p>
<p>Subscribe to <a href="https://www.youtube.com/kdabtv">KDAB TV</a> for similar informative short video content.</p>
<p>KDAB provides market leading software consulting and development <a href="https://www.kdab.com/software-services/">services</a> and <a href="https://training.kdab.com/">training</a> in Qt, C++ and 3D/OpenGL. <a href="https://www.kdab.com/about/contact/">Contact us</a>.</p>
</div>
</div>
<p>The post <a href="https://www.kdab.com/introducing-the-connectionevaluator-in-kdbindings/">Introducing the ConnectionEvaluator in KDBindings</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></description>
</item>
<item>
<guid isPermaLink="false">tag:www.pythonguis.com,2024-03-06:/faq/pyside6-drag-drop-widgets/</guid>
<title>Python GUIs - qt: Drag & Drop Widgets with PySide6 — Sort widgets visually with drag and drop in a container</title>
<pubDate>Wed, 06 Mar 2024 13:00:00 GMT</pubDate>
<link>https://www.pythonguis.com/faq/pyside6-drag-drop-widgets/</link>
<description><p>I had an interesting question from a reader of my <a href="https://www.pythonguis.com/pyside6-book/">PySide6 book</a>, about how to handle dragging and dropping of widgets in a container showing the dragged widget as it is moved.</p>
<blockquote>
<p>I'm interested in managing movement of a QWidget with mouse in a container. I've implemented the application with drag & drop, exchanging the position of buttons, but I want to show the motion of <code>QPushButton</code>, like what you see in Qt Designer. Dragging a widget should show the widget itself, not just the mouse pointer.</p>
</blockquote>
<p>First, we'll implement the simple case which drags widgets without showing anything extra. Then we can extend it to answer the question. By the end of this quick tutorial we'll have a generic drag drop implementation which looks like the following.</p>
<div style="padding: 79.5% 0 0 0;"></div>
<div class="toc"><span class="toctitle">Table of Contents</span>
<ul>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#drag-drop-widgets">Drag & Drop Widgets</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#visual-drag-drop">Visual Drag & Drop</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#generic-drag-drop-container">Generic Drag & Drop Container</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#adding-a-visual-drop-target">Adding a Visual Drop Target</a></li>
</ul>
</div>
<h2 id="drag-drop-widgets">Drag & Drop Widgets</h2>
<p>We'll start with a simple application which creates a window using <code>QWidget</code> and places a series of <code>QPushButton</code> widgets into it.</p>
<p class="admonition admonition-tip">You can substitute <code>QPushButton</code> for any other widget you like, e.g. <code>QLabel</code>. Any widget can have drag behavior implemented on it, although some input widgets will not work well as we capture the mouse events for the drag.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PySide6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class Window(QWidget):
def __init__(self):
super().__init__()
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = QPushButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
app = QApplication([])
w = Window()
w.show()
app.exec()
</code>
</pre></div>
<p>If you run this you should see something like this.</p>
<p><img alt="Widgets in a layout" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/windows-in-layout.png" width="421"> <em>The series of <code>QPushButton widgets</code> in a horizontal layout.</em></p>
<p class="admonition admonition-note">Here we're creating a window, but the <code>Window</code> widget is subclassed from <code>QWidget</code>, meaning you can add this widget to any other layout. See later for an example of a generic object sorting widget.</p>
<p><code>QPushButton</code> objects aren't usually draggable, so to handle the mouse movements and initiate a drag we need to implement a subclass. We can add the following to the top of the file.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PySide6.QtCore import QMimeData, Qt
from PySide6.QtGui import QDrag
from PySide6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class DragButton(QPushButton):
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
drag.exec(Qt.DropAction.MoveAction)
</code>
</pre></div>
<p>We implement a <code>mouseMoveEvent</code> which accepts the single <code>e</code> parameter of the event. We check to see if the <em>left</em> mouse button is pressed on this event -- as it would be when dragging -- and then initiate a drag. To start a drag, we create a <code>QDrag</code> object, passing in <code>self</code> to give us access later to the widget that was dragged. We also <em>must</em> pass in mime data. This is used for including information about what is dragged, particularly for passing data between applications. However, as here, it is fine to leave this empty.</p>
<p>Finally, we initiate a drag by calling <code>drag.exec_(Qt.MoveAction)</code>. As with dialogs <code>exec_()</code> starts a new event loop, blocking the main loop until the drag is complete. The parameter <code>Qt.MoveAction</code> tells the drag handler what type of operation is happening, so it can show the appropriate icon tip to the user.</p>
<p>You can update the main window code to use our new <code>DragButton</code> class as follows.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class Window(QWidget):
def __init__(self):
super().__init__()
self.setAcceptDrops(True)
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = DragButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
</code>
</pre></div>
<p>If you run the code now, you <em>can</em> drag the buttons, but you'll notice the drag is forbidden.</p>
<p><img alt="Drag forbidden" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-forbidden.png" width="421"> <em>Dragging of the widget starts but is forbidden.</em></p>
<p>What's happening? The mouse movement is being detected by our <code>DragButton</code> object and the drag started, but the main window does not accept drag & drop.</p>
<p>To fix this we need to enable drops on the window and implement <code>dragEnterEvent</code> to actually accept them.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class Window(QWidget):
def __init__(self):
super().__init__()
self.setAcceptDrops(True)
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = DragButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
</code>
</pre></div>
<p>If you run this now, you'll see the drag is now accepted and you see the move icon. This indicates that the drag has started and been accepted by the window we're dragging onto. The icon shown is determined by the action we pass when calling <code>drag.exec_()</code>.</p>
<p><img alt="Drag accepted" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-accepted.png" width="421"> <em>Dragging of the widget starts and is accepted, showing a move icon.</em></p>
<p>Releasing the mouse button during a drag drop operation triggers a <code>dropEvent</code> on the widget you're currently hovering the mouse over (if it is configured to accept drops). In our case that's the window. To handle the move we need to implement the code to do this in our <code>dropEvent</code> method.</p>
<p>The drop event contains the position the mouse was at when the button was released & the drop triggered. We can use this to determine where to move the widget to.</p>
<p>To determine where to place the widget, we iterate over all the widgets in the layout, <em>until</em> we find one who's <code>x</code> position is <em>greater</em> than that of the mouse pointer. If so then when insert the widget directly to the left of this widget and exit the loop.</p>
<p>If we get to the end of the loop without finding a match, we must be dropping past the end of the existing items, so we increment <code>n</code> one further (in the <code>else:</code> block below).</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if pos.x() < w.x():
# We didn't drag past this widget.
# insert to the left of it.
break
else:
# We aren't on the left hand side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
e.accept()
</code>
</pre></div>
<p>The effect of this is that if you drag 1 pixel past the start of another widget the drop will happen to the right of it, which is a bit confusing. To fix this we can adjust the cut off to use the middle of the widget using <code>if pos.x() < w.x() + w.size().width() // 2:</code> -- that is x + half of the width.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if pos.x() < w.x() + w.size().width() // 2:
# We didn't drag past this widget.
# insert to the left of it.
break
else:
# We aren't on the left hand side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
e.accept()
</code>
</pre></div>
<p>The complete working drag-drop code is shown below.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PySide6.QtCore import QMimeData, Qt
from PySide6.QtGui import QDrag
from PySide6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class DragButton(QPushButton):
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
drag.exec(Qt.DropAction.MoveAction)
class Window(QWidget):
def __init__(self):
super().__init__()
self.setAcceptDrops(True)
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = DragButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if pos.x() < w.x() + w.size().width() // 2:
# We didn't drag past this widget.
# insert to the left of it.
break
else:
# We aren't on the left hand side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
e.accept()
app = QApplication([])
w = Window()
w.show()
app.exec()
</code>
</pre></div>
<h2 id="visual-drag-drop">Visual Drag & Drop</h2>
<p>We now have a working drag & drop implementation. Next we'll move onto improving the UX by showing the drag visually. First we'll add support for showing the button being dragged next to the mouse point as it is dragged. That way the user knows exactly what it is they are dragging.</p>
<p>Qt's <code>QDrag</code> handler natively provides a mechanism for showing dragged objects which we can use. We can update our <code>DragButton</code> class to pass a <em>pixmap</em> image to <code>QDrag</code> and this will be displayed under the mouse pointer as the drag occurs. To show the widget, we just need to get a <code>QPixmap</code> of the widget we're dragging.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PySide6.QtCore import QMimeData, Qt
from PySide6.QtGui import QDrag
from PySide6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class DragButton(QPushButton):
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
drag.exec(Qt.DropAction.MoveAction)
</code>
</pre></div>
<p>To create the pixmap we create a <code>QPixmap</code> object passing in the size of the widget this event is fired on with <code>self.size()</code>. This creates an empty <em>pixmap</em> which we can then pass into <code>self.render</code> to <em>render</em> -- or draw -- the current widget onto it. That's it. Then we set the resulting pixmap on the <code>drag</code> object.</p>
<p>If you run the code with this modification you'll see something like the following --</p>
<p><img alt="Drag visual" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-visual.png" width="421"> <em>Dragging of the widget showing the dragged widget.</em></p>
<h2 id="generic-drag-drop-container">Generic Drag & Drop Container</h2>
<p>We now have a working drag and drop behavior implemented on our window. We can take this a step further and implement a <em>generic</em> drag drop widget which allows us to sort arbitrary objects. In the code below we've created a new widget <code>DragWidget</code> which can be added to any window.</p>
<p>You can add <em>items</em> -- instances of <code>DragItem</code> -- which you want to be sorted, as well as setting data on them. When items are re-ordered the new order is emitted as a signal <code>orderChanged</code>.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PySide6.QtCore import QMimeData, Qt, Signal
from PySide6.QtGui import QDrag, QPixmap
from PySide6.QtWidgets import (
QApplication,
QHBoxLayout,
QLabel,
QMainWindow,
QVBoxLayout,
QWidget,
)
class DragItem(QLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setContentsMargins(25, 5, 25, 5)
self.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.setStyleSheet("border: 1px solid black;")
# Store data separately from display label, but use label for default.
self.data = self.text()
def set_data(self, data):
self.data = data
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
pixmap = QPixmap(self.size())
self.render(pixmap)
drag.setPixmap(pixmap)
drag.exec(Qt.DropAction.MoveAction)
class DragWidget(QWidget):
"""
Generic list sorting handler.
"""
orderChanged = Signal(list)
def __init__(self, *args, orientation=Qt.Orientation.Vertical, **kwargs):
super().__init__()
self.setAcceptDrops(True)
# Store the orientation for drag checks later.
self.orientation = orientation
if self.orientation == Qt.Orientation.Vertical:
self.blayout = QVBoxLayout()
else:
self.blayout = QHBoxLayout()
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if self.orientation == Qt.Orientation.Vertical:
# Drag drop vertically.
drop_here = pos.y() < w.y() + w.size().height() // 2
else:
# Drag drop horizontally.
drop_here = pos.x() < w.x() + w.size().width() // 2
if drop_here:
break
else:
# We aren't on the left hand/upper side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
self.orderChanged.emit(self.get_item_data())
e.accept()
def add_item(self, item):
self.blayout.addWidget(item)
def get_item_data(self):
data = []
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
data.append(w.data)
return data
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.drag = DragWidget(orientation=Qt.Orientation.Vertical)
for n, l in enumerate(["A", "B", "C", "D"]):
item = DragItem(l)
item.set_data(n) # Store the data.
self.drag.add_item(item)
# Print out the changed order.
self.drag.orderChanged.connect(print)
container = QWidget()
layout = QVBoxLayout()
layout.addStretch(1)
layout.addWidget(self.drag)
layout.addStretch(1)
container.setLayout(layout)
self.setCentralWidget(container)
app = QApplication([])
w = MainWindow()
w.show()
app.exec()
</code>
</pre></div>
<p><img alt="Generic drag drop horizontal" height="139" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-generic-horizontal.png" width="306"> <em>Generic drag-drop sorting in horizontal orientation.</em></p>
<p>You'll notice that when creating the item, you can set the label by passing it in as a parameter (just like for a normal <code>QLabel</code> which we've subclassed from). But you can also set a data value, which is the internal value of this item -- this is what will be emitted when the order changes, or if you call <code>get_item_data</code> yourself. This separates the visual representation from what is actually being sorted, meaning you can use this to sort <em>anything</em> not just strings.</p>
<p>In the example above we're passing in the enumerated index as the data, so dragging will output (via the <code>print</code> connected to <code>orderChanged</code>) something like:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">[1, 0, 2, 3]
[1, 2, 0, 3]
[1, 0, 2, 3]
[1, 2, 0, 3]
</code>
</pre></div>
<p>If you remove the <code>item.set_data(n)</code> you'll see the labels emitted on changes.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">['B', 'A', 'C', 'D']
['B', 'C', 'A', 'D']
</code>
</pre></div>
<p>We've also implemented <em>orientation</em> onto the <code>DragWidget</code> using the Qt built in flags <code>Qt.Orientation.Vertical</code> or <code>Qt.Orientation.Horizontal</code>. This setting this allows you sort items either vertically or horizontally -- the calculations are handled for both directions.</p>
<p><img alt="Generic drag drop vertical" height="216" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-generic-vertical.png" width="202"> <em>Generic drag-drop sorting in vertical orientation.</em></p>
<h2 id="adding-a-visual-drop-target">Adding a Visual Drop Target</h2>
<p>If you experiment with the drag-drop tool above you'll notice that it doesn't feel completely intuitive. When dragging you don't know where an item will be inserted until you drop it. If it ends up in the wrong place, you'll then need to pick it up and re-drop it again, using <em>guesswork</em> to get it right.</p>
<p>With a bit of practice you can get the hang of it, but it would be nicer to make the behavior immediately obvious for users. Many drag-drop interfaces solve this problem by showing a preview of where the item will be dropped while dragging -- either by showing the item in the place where it will be dropped, or showing some kind of placeholder.</p>
<p>In this final section we'll implement this type of drag and drop preview indicator.</p>
<p>The first step is to define our target indicator. This is just another label, which in our example is empty, with custom styles applied to make it have a solid "shadow" like background. This makes it obviously different to the items in the list, so it stands out as something distinct.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PySide6.QtCore import QMimeData, Qt, Signal
from PySide6.QtGui import QDrag, QPixmap
from PySide6.QtWidgets import (
QApplication,
QHBoxLayout,
QLabel,
QMainWindow,
QVBoxLayout,
QWidget,
)
class DragTargetIndicator(QLabel):
def __init__(self, parent=None):
super().__init__(parent)
self.setContentsMargins(25, 5, 25, 5)
self.setStyleSheet(
"QLabel { background-color: #ccc; border: 1px solid black; }"
)
</code>
</pre></div>
<p class="admonition admonition-tip">We've copied the contents margins from the items in the list. If you change your list items, remember to also update the indicator dimensions to match.</p>
<p>The drag item is unchanged, but we need to implement some additional behavior on our <code>DragWidget</code> to add the target, control showing and moving it.</p>
<p>First we'll add the drag target indicator to the layout on our <code>DragWidget</code>. This is hidden to begin with, but will be shown during the drag.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class DragWidget(QWidget):
"""
Generic list sorting handler.
"""
orderChanged = Signal(list)
def __init__(self, *args, orientation=Qt.Orientation.Vertical, **kwargs):
super().__init__()
self.setAcceptDrops(True)
# Store the orientation for drag checks later.
self.orientation = orientation
if self.orientation == Qt.Orientation.Vertical:
self.blayout = QVBoxLayout()
else:
self.blayout = QHBoxLayout()
# Add the drag target indicator. This is invisible by default,
# we show it and move it around while the drag is active.
self._drag_target_indicator = DragTargetIndicator()
self.blayout.addWidget(self._drag_target_indicator)
self._drag_target_indicator.hide()
self.setLayout(self.blayout)
</code>
</pre></div>
<p>Next we modify the <code>DragWidget.dragMoveEvent</code> to show the drag target indicator. We show it by <em>inserting</em> it into the layout and then calling <code>.show</code> -- inserting a widget which is already in a layout will move it. We also hide the original item which is being dragged.</p>
<p>In the earlier examples we determined the position on drop by removing the widget being dragged, and then iterating over what is left. Because we now need to calculate the drop location before the drop, we take a different approach.</p>
<p class="admonition admonition-tip">If we wanted to do it the same way, we'd need to remove the item on drag start, hold onto it and implement re-inserting at it's old position on drag fail. That's a lot of work.</p>
<p>Instead, the dragged item is left in place and hidden during move.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dragMoveEvent(self, e):
# Find the correct location of the drop target, so we can move it there.
index = self._find_drop_location(e)
if index is not None:
# Inserting moves the item if its alreaady in the layout.
self.blayout.insertWidget(index, self._drag_target_indicator)
# Hide the item being dragged.
e.source().hide()
# Show the target.
self._drag_target_indicator.show()
e.accept()
</code>
</pre></div>
<p>The method <code>self._find_drop_location</code> finds the index where the drag target will be shown (or the item dropped when the mouse released). We'll implement that next.</p>
<p>The calculation of the drop location follows the same pattern as before. We iterate over the items in the layout and calculate whether our mouse drop location is to the left of each widget. If it isn't to the left of any widget, we drop on the far right.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def _find_drop_location(self, e):
pos = e.position()
spacing = self.blayout.spacing() / 2
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if self.orientation == Qt.Orientation.Vertical:
# Drag drop vertically.
drop_here = (
pos.y() >= w.y() - spacing
and pos.y() <= w.y() + w.size().height() + spacing
)
else:
# Drag drop horizontally.
drop_here = (
pos.x() >= w.x() - spacing
and pos.x() <= w.x() + w.size().width() + spacing
)
if drop_here:
# Drop over this target.
break
return n
</code>
</pre></div>
<p>The drop location <code>n</code> is returned for use in the <code>dragMoveEvent</code> to place the drop target indicator.</p>
<p>Next wee need to update the <code>get_item_data</code> handler to ignore the drop target indicator. To do this we check <code>w</code> against <code>self._drag_target_indicator</code> and skip if it is the same. With this change the method will work as expected.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def get_item_data(self):
data = []
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if w != self._drag_target_indicator:
# The target indicator has no data.
data.append(w.data)
return data
</code>
</pre></div>
<p>If you run the code a this point the drag behavior will work as expected. But if you drag the widget outside of the window and drop you'll notice a problem: the target indicator will stay in place, but dropping the item won't drop the item in that position (the drop will be cancelled).</p>
<p>To fix that we need to implement a <code>dragLeaveEvent</code> which hides the indicator.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dragLeaveEvent(self, e):
self._drag_target_indicator.hide()
e.accept()
</code>
</pre></div>
<p>With those changes, the drag-drop behavior should be working as intended. The complete code is shown below.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PySide6.QtCore import QMimeData, Qt, Signal
from PySide6.QtGui import QDrag, QPixmap
from PySide6.QtWidgets import (
QApplication,
QHBoxLayout,
QLabel,
QMainWindow,
QVBoxLayout,
QWidget,
)
class DragTargetIndicator(QLabel):
def __init__(self, parent=None):
super().__init__(parent)
self.setContentsMargins(25, 5, 25, 5)
self.setStyleSheet(
"QLabel { background-color: #ccc; border: 1px solid black; }"
)
class DragItem(QLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setContentsMargins(25, 5, 25, 5)
self.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.setStyleSheet("border: 1px solid black;")
# Store data separately from display label, but use label for default.
self.data = self.text()
def set_data(self, data):
self.data = data
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
pixmap = QPixmap(self.size())
self.render(pixmap)
drag.setPixmap(pixmap)
drag.exec(Qt.DropAction.MoveAction)
self.show() # Show this widget again, if it's dropped outside.
class DragWidget(QWidget):
"""
Generic list sorting handler.
"""
orderChanged = Signal(list)
def __init__(self, *args, orientation=Qt.Orientation.Vertical, **kwargs):
super().__init__()
self.setAcceptDrops(True)
# Store the orientation for drag checks later.
self.orientation = orientation
if self.orientation == Qt.Orientation.Vertical:
self.blayout = QVBoxLayout()
else:
self.blayout = QHBoxLayout()
# Add the drag target indicator. This is invisible by default,
# we show it and move it around while the drag is active.
self._drag_target_indicator = DragTargetIndicator()
self.blayout.addWidget(self._drag_target_indicator)
self._drag_target_indicator.hide()
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
def dragLeaveEvent(self, e):
self._drag_target_indicator.hide()
e.accept()
def dragMoveEvent(self, e):
# Find the correct location of the drop target, so we can move it there.
index = self._find_drop_location(e)
if index is not None:
# Inserting moves the item if its alreaady in the layout.
self.blayout.insertWidget(index, self._drag_target_indicator)
# Hide the item being dragged.
e.source().hide()
# Show the target.
self._drag_target_indicator.show()
e.accept()
def dropEvent(self, e):
widget = e.source()
# Use drop target location for destination, then remove it.
self._drag_target_indicator.hide()
index = self.blayout.indexOf(self._drag_target_indicator)
if index is not None:
self.blayout.insertWidget(index, widget)
self.orderChanged.emit(self.get_item_data())
widget.show()
self.blayout.activate()
e.accept()
def _find_drop_location(self, e):
pos = e.position()
spacing = self.blayout.spacing() / 2
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if self.orientation == Qt.Orientation.Vertical:
# Drag drop vertically.
drop_here = (
pos.y() >= w.y() - spacing
and pos.y() <= w.y() + w.size().height() + spacing
)
else:
# Drag drop horizontally.
drop_here = (
pos.x() >= w.x() - spacing
and pos.x() <= w.x() + w.size().width() + spacing
)
if drop_here:
# Drop over this target.
break
return n
def add_item(self, item):
self.blayout.addWidget(item)
def get_item_data(self):
data = []
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if w != self._drag_target_indicator:
# The target indicator has no data.
data.append(w.data)
return data
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.drag = DragWidget(orientation=Qt.Orientation.Vertical)
for n, l in enumerate(["A", "B", "C", "D"]):
item = DragItem(l)
item.set_data(n) # Store the data.
self.drag.add_item(item)
# Print out the changed order.
self.drag.orderChanged.connect(print)
container = QWidget()
layout = QVBoxLayout()
layout.addStretch(1)
layout.addWidget(self.drag)
layout.addStretch(1)
container.setLayout(layout)
self.setCentralWidget(container)
app = QApplication([])
w = MainWindow()
w.show()
app.exec()
</code>
</pre></div>
<p>If you run this example on macOS you may notice that the widget drag preview (the <code>QPixmap</code> created on <code>DragItem</code>) is a bit blurry. On high-resolution screens you need to set the <em>device pixel ratio</em> and scale up the pixmap when you create it. Below is a modified <code>DragItem</code> class which does this.</p>
<p>Update <code>DragItem</code> to support high resolution screens.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class DragItem(QLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setContentsMargins(25, 5, 25, 5)
self.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.setStyleSheet("border: 1px solid black;")
# Store data separately from display label, but use label for default.
self.data = self.text()
def set_data(self, data):
self.data = data
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
# Render at x2 pixel ratio to avoid blur on Retina screens.
pixmap = QPixmap(self.size().width() * 2, self.size().height() * 2)
pixmap.setDevicePixelRatio(2)
self.render(pixmap)
drag.setPixmap(pixmap)
drag.exec(Qt.DropAction.MoveAction)
self.show() # Show this widget again, if it's dropped outside.
</code>
</pre></div>
<p>That's it! We've created a generic drag-drop handled which can be added to any projects where you need to be able to reposition items within a list. You should feel free to experiment with the styling of the drag items and targets as this won't affect the behavior.</p>
<div style="padding: 79.5% 0 0 0;"></div></description>
</item>
<item>
<guid isPermaLink="false">https://www.kdab.com/?p=33589</guid>
<title>KDAB on Qt: Meet KDAB at Embedded World 2024 – Hall 4-302</title>
<pubDate>Wed, 28 Feb 2024 11:06:00 GMT</pubDate>
<link>https://www.kdab.com/kdab-at-embedded-world-2024/</link>
<description><p>For the 14th time, KDAB exhibited at <a href="https://www.embedded-world.de/en" rel="noopener" target="_blank">Embedded World</a> <em>– The meeting place for the global embedded community!</em> Here, as expected, you got three days of pioneering technologies, solutions, new ideas, and intelligent concepts.</p>
<p>Embedded World took place in Nürnberg, Germany from <strong>9 – 11 April 2024</strong> and the <strong>KDAB booth  was in Hall 4-302</strong> showcasing outstanding demos featuring <strong>Qt, C++, 3D, Slint, Rust, and Flutter</strong>.</p>
<p>Visitors could use the code <strong>ew24518375</strong> to get a free ticket.</p>
<p>Here are the demos that you will have found at our booth, including an interstellar navigation interface built with Flutter…</p>
<h2>Augmenting 3D Support for Machine Control</h2>
<p><strong>Interactive 3D rendering using Qt3D</strong></p>
<p>KDAB helped <a href="https://www.idig-system.com/" rel="noopener" target="_blank">iDig, a provider of excavator machine controls,</a> implement 3D-related work: loading CAD files, mesh data structures and algorithms, and rendering.</p>
<ul>
<li>Embedded software for the control of machinery</li>
<li>Integrate design models and field data</li>
<li>Highly configurable user interface</li>
<li>Embedded Linux system, C++ & Qt application</li>
</ul>
<p><a href="https://www.qt.io/ew_2024" rel="noopener" target="_blank"><img alt="KDAB Demos Built with Qt" class="alignleft wp-image-33619" height="37" src="https://www.kdab.com/wp-content/uploads/stories/Built_with_Qt_Pine_RGB.png" width="118"></a></p>
<h2>Developing Next Generation UI for an EV Charger</h2>
<p><strong>High-quality touch-based interface based on Slint</strong></p>
<p>KDAB and <a href="https://www.tqcs.io/" rel="noopener" target="_blank">tQCS</a> used <a href="https://slint.dev/" rel="noopener" target="_blank">Slint, a UI toolkit built with Rust,</a> to overhaul the user interface of SK Signet’s flagship Electric Vehicle charger.</p>
<ul>
<li>15-inch and 32-inch variants with dynamic dark/light mode</li>
<li>Video playback with FFmpeg and networking with Curl</li>
<li>Windows 10 IoT embedded hardware</li>
</ul>
<p><a href="https://www.kdab.com/wp-content/uploads/stories/MadeWithSlint-logo-light.svg"><img alt="" class=" wp-image-34378 alignleft" height="51" src="https://www.kdab.com/wp-content/uploads/stories/MadeWithSlint-logo-light.svg" width="114"></a></p>
<h2>Modernizing an Embedded Charge Amplifier UI with Qt</h2>
<p><strong>Multi Value Measurements device brought to market readiness</strong></p>
<p>Starting from a legacy codebase, KDAB implemented a multi-measurement channel architecture, extended the UI, and improved stability and performance to reach production quality. The device helps with verification and quality control processes with sensitive measurements in cramped spaces.</p>
<ul>
<li>Graphing and Result-Visualization of a High-Precision Measurement Process</li>
<li>User Interface built with Qt and QML</li>
<li>Maintaining 2 Product Variants in 1 Software Solution</li>
<li>Texas Instruments AM335x Sitara, 1 x 1Ghz, with GPU</li>
</ul>
<p><a href="https://www.qt.io/ew_2024" rel="noopener" target="_blank"><img alt="KDAB Demos Built with Qt" class="alignleft wp-image-33619" height="37" src="https://www.kdab.com/wp-content/uploads/stories/Built_with_Qt_Pine_RGB.png" width="118"></a></p>
<h2>CXX-Qt – Safe Rust Bindings for Qt</h2>
<p><strong>Integration for C++ and Rust applications</strong></p>
<p>KDAB supports and maintains <a href="https://github.com/KDAB/cxx-qt" rel="noopener" target="_blank">CXX-Qt</a>. A set of Rust crates for creating bidirectional Rust ⇄ C++ bindings with Qt. It can be used to integrate Rust into C++ applications using CMake or used to build Rust applications with Cargo.</p>
<ul>
<li>Enables Rust and C++ ecosystems to be used in the same application</li>
<li>Allows for idiomatic Rust and C++ code</li>
<li>Integrates easily into existing applications</li>
</ul>
<p><a href="https://www.qt.io/ew_2024" rel="noopener" target="_blank"><img alt="KDAB Demos Built with Qt" class="alignleft wp-image-33619" height="37" src="https://www.kdab.com/wp-content/uploads/stories/Built_with_Qt_Pine_RGB.png" width="118"></a></p>
<h2 class="p1">3D Embedded Interstellar Navigation Interface</h2>
<p><strong>Flutter on embedded hardware using <a href="https://github.com/ardera/flutter-pi" rel="noopener" target="_blank">flutter-pi</a> and CAN-Bus Integration</strong></p>
<p>To demonstrate the capabilities of Flutter on embedded we developed an interstellar navigation interface.</p>
<ul>
<li>Smooth 3D components, running at 60fps</li>
<li>Physical buttons connected via CAN-Bus (CANopen)</li>
<li>Flutter Embedder: flutter-pi</li>
<li>Image built with Yocto and meta-flutter</li>
<li>Hardware: Toradex Verdin AM62, 4x Cortex-A53, 2GB RAM, PowerVR AXE-1-16M GPU</li>
</ul>
<h2>Developer Tools for Qt, C++, and Linux</h2>
<p><strong>A selection of useful developer tools for debugging and profiling</strong></p>
<p>GammaRay: Remote Embedded Introspection</p>
<p>Using <a href="https://www.kdab.com/development-resources/qt-tools/gammaray/" rel="noopener" target="_blank">GammaRay</a>, we introspect a Qt-based game at runtime on the SteamDeck (which is powered by KDE Plasma).</p>
<ul>
<li>Inspection of a Qt-based SteamDeck game</li>
<li>Full remote Qt introspection capabilities</li>
<li>Visual forwarding and remote control</li>
<li>Injection without recompilation of target software</li>
</ul>
<p>Further, there are also <a href="https://www.kdab.com/hotspot-video/" rel="noopener noreferrer nofollow" target="_blank">Hotspot</a>, <a href="https://github.com/KDE/heaptrack" rel="noopener noreferrer nofollow" target="_blank">Heaptrack</a>, and <a href="https://github.com/KDE/clazy" rel="noopener noreferrer nofollow" target="_blank">Clazy</a>, which are all useful helpers to make your code more performant.</p>
<p>Last but not least, for those needing an advanced docking solution for Qt applications, the <a href="https://github.com/KDAB/KDDockWidgets" rel="noopener noreferrer nofollow" target="_blank">KDDockWidgets</a> demo.</p>
<ul>
<li>KD DockWidgets: KDAB’s Dock Widget Framework for Qt</li>
<li>Clazy Static Code Analyzer: LLVM/Clang-based static analyzer for Qt</li>
<li>Hotspot Profiler: GUI for Linux Perf to analyze profiling data</li>
<li>Heaptrack: Heap memory profiler and analysis GUI for Linux</li>
</ul>
<p><a href="https://www.qt.io/ew_2024" rel="noopener" target="_blank"><img alt="KDAB Demos Built with Qt" class="alignleft wp-image-33619" height="37" src="https://www.kdab.com/wp-content/uploads/stories/Built_with_Qt_Pine_RGB.png" width="118"></a></p>
<h2>Getting Started with Customized Embedded Linux</h2>
<p><strong>Free four-part guide for Designing your first Embedded Linux device</strong></p>
<p>Embedded Linux is widely used on embedded devices. Still, it is not trivial to implement. We have created a <a href="https://www.kdab.com/publications/embedded-linux/" rel="noopener" target="_blank">comprehensive guide</a>, starting from framing the development process, via choosing the software stack and the hardware to setting up your development environment.</p>
<h2>Brochures, Whitepapers & Articles</h2>
<p>In the booth, we had a digital brochure kiosk with access to all <a href="https://www.kdab.com/development-resources/whitepapers-brochures-articles/" rel="noopener" target="_blank">KDAB brochures, whitepapers, and articles</a>. Here, you could easily scan the material you were interested in with your phone or grab a physical copy from our selection.</p>
<p>Whether you like to dive into our multi-part series <a href="https://www.kdab.com/publications/bestpractices/best-practices-embedded.html" rel="noopener" target="_blank">“Best Practices for Embedded Development”</a> or <a href="https://www.kdab.com/publications/bestpractices/best-practices-hybrid-rust-cpp-apps.html#building-hybrid-rust-and-c-c-applications" rel="noopener" target="_blank">“Building Hybrid Rust and C/C++ Applications”</a>? KDAB has got you covered.</p>
<h2>The free ticket!</h2>
<p>We invited folk to visit <a href="https://www.messe-ticket.de/Nuernberg/embeddedworld2024/Register/" rel="noopener" target="_blank">Embedded World</a> free of charge with our voucher code <strong>ew24518375. </strong></p>
<p><img alt="kdab at embedded world 2024" class="wp-image-33593 aligncenter" height="243" src="https://www.kdab.com/wp-content/uploads/stories/embedded-world-2024-en-SoMe-Asset-Facebook-WSD-1200x630px.jpg" width="462"></p>
<p>The post <a href="https://www.kdab.com/kdab-at-embedded-world-2024/">Meet KDAB at Embedded World 2024 – Hall 4-302</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></description>
</item>
<item>
<guid isPermaLink="false">https://www.kdab.com/?p=33514</guid>
<title>KDAB on Qt: Incredibly Simple QR Generation in QML</title>
<pubDate>Thu, 22 Feb 2024 08:00:42 GMT</pubDate>
<link>https://www.kdab.com/incredibly-simple-qr-generation-in-qml/</link>
<description><div class="stackedit__html">
<h2 id="the-need-for-simple--modular-qr-generation-in-qml">The Need for Simple & Modular QR Generation in QML</h2>
<p>Recently, our designer Nuno Pinheiro needed to generate QR codes for an Android app in QML and started asking around about a simple way to do this. The best existing QML solution was <a href="https://github.com/ftylitak/qzxing">QZXing</a>, a Qt/QML wrapper for the 1D/2D barcode image processing library ZXing. He felt this was too much.</p>
<p>QZXing is quite a large and feature-rich library and is a great choice for something that requires a lot more rigorous work with encoding and decoding barcodes and QR. However, this application wasn’t focused around barcode processing. It just needed to display a few QR codes below its other content; it didn’t need something so heavy-duty. It seemed like too much work to build and link this library and register QML types in C++ if there was something simpler available.</p>
<h2 id="finding-a-javascript-library-to-wrap-in-qml">Finding A JavaScript Library to Wrap in QML</h2>
<p>There are plenty of minimal QR Code libraries in JS, and JS files can be imported natively in QML. Why not just slap a minified JS file into our Qt resources and expose its functionality through a QML object? No compiling libraries, no CMake, simple setup for a simple task.</p>
<p>My colleague, the one and only Javier O. Cordero Pérez attempted to tackle this first using <a href="https://github.com/davidshimjs/qrcodejs">QRCode.js</a>. He found a few issues, which I’ll let him explain. This is what Javier contributed:</p>
<h2 id="why-most-browser-libraries-don’t-work-with-qml">Why Most Browser Libraries Don’t Work With QML</h2>
<p>Not all ECMAScript or JavaScript environments are created equal. <a href="https://doc.qt.io/qt-6/qtqml-javascript-hostenvironment.html">QML, for example, doesn’t have a DOM (Document Object Model) that represents the contents on screen</a>. That feature comes from HTML, so when a JS library designed for use in the browser attempts to access the DOM from QML, it can’t find these APIs. This limits the use of JS libraries in QML to business logic. Frontend JS libaries would have to be ported to QML in order to work.</p>
<blockquote>
<p><em>Note to those concerned with performance:</em> At the time of writing, JS data structures, and many JS and C++ design patterns don’t optimize well in QML code when using QML compilers. You should use C++ for backend code if you work in embedded or performance is a concern for you. Even JavaScript libraries have started a trend of moving away from pure JS in favor of Rust and WASM for backend code. Having said that, we cannot understate the convenience of having JS or QML modules or libraries you can simply plug and play. This is why we did this in the first place.</p>
</blockquote>
<p>In my first approach to using <code>qrcodejs</code>, I tried using the library from within a QML slot (<code>Component.onCompleted</code>) and found that <code>QRCode.js</code> calls <code>document.documentElement</code>, <code>document.getElementById</code>, <code>document.documentElement</code>, and <code>document.createElement</code>, which are undefined, because <code>document</code> is typically an <code>HTMLDocument</code>, part of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API#structure_of_an_html_document">HTML DOM API</a>.</p>
<p>I then began attempting to refactor the code, but quickly realized there was no easy way to get the library to use QtQuick’s Canvas element. I knew from past experiences that Canvas performs very poorly on Android, so, being pressed for time and Android being our target platform, I came up with a different solution.</p>
<h2 id="embedding-and-communicating-with-a-browser-view">Embedding and Communicating With A Browser View</h2>
<p>My second approach was to give <code>QRCode.js</code> a browser to work with. I chose to use <code>QtWebView</code>, because on mobile, it displays web content using the operating system’s web view.</p>
<p>To keep things simple, I sent the QRCode’s data to the web page by encoding it to a safe character space using Base64 encoding and passing the result as a URL attribute. This attribute is then decoded inside the page and then sent to the library to generate a QR code on the Canvas. The WebView dimensions are also passed as attributes so the image can be produced at the width of the shortest side.</p>
<p>This is what my solution looked like at this point:</p>
<pre>
<code class="prism language-qml">import QtQuick 2.15
import QtQuick.Window 2.15
Window {
id: document
QRCode {
id: qr
text: "https://kdab.com/"
anchors.centerIn: parent
// The smallest dimension determines and fixes QR code size
width: 400
height: 600
}
width: 640
height: 480
visible: true
title: qsTr("Web based embedded QR Code")
}
</code>
</pre>
<pre>
<code class="prism language-qml">// QRCode.qml
import QtQuick 2.15
import QtWebView 1.15
Item {
required property string text
// Due to platform limitations, overlapping the WebView with other QML components is not supported.
// Doing this will have unpredictable results which may differ from platform to platform.
WebView {
id: document
// String is encoded using base64 and transfered through page URL
url: "qrc:///qr-loader.html?w=" + width + "&t=" + Qt.btoa(text)
// Keep view dimensions to a minimum
width: parent.width < parent.height ? parent.width : parent.height
height: parent.height < parent.width ? parent.height : parent.width
anchors.centerIn: parent
// Note: To update the contents after the page has loaded, we could expand upon this
// by calling runJavaScript(script: string, callback: var) from the WebView component.
// Any method attributes, such as dimensions or the QR Code’s contents would have to
// be concatenated inside the script parameter.
}
}
</code>
</pre>
<pre>
<code class="prism language-html">// qr-loader.html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
margin: 0;
padding: 0;
}
#qr {
width: 100%;
height: 100%;
margin: auto;
}
</style>
</head>
<body>
<h1>u</h1>
<div id="q"></div>
<script src="jquery.min.js"></script>
<script src="qrcode.min.js"></script>
<script>
function generateQRCode() {
const s = new URLSearchParams(document.location.search);
const w = Number(s.get("w"));
const t = atob(s.get("t"));
new QRCode(document.getElementById("q"), {
text: t,
width: w,
height: w
});
}
generateQRCode();
</script>
</body>
</code>
</pre>
<h2 id="why-you-should-avoid-qtwebview-on-mobile">Why You Should Avoid QtWebView On Mobile</h2>
<p>If you read the comments in the code, you’ll notice that <em>“due to platform limitations, overlapping the WebView with other QML components is not supported. Doing this will have unpredictable results which may differ from platform to platform.”</em> Additionally, there is so much overhead in loading an embedded site that you can see the exact moment the QR code appears on screen.</p>
<p>Unfortunately for Nuno, <code>QtWebView</code> is unable to load pages embedded as Qt resources on mobile systems. This is because by default, Qt resources become a part of the app’s binary, which can’t be read by the embedded browser. If the site was stored online or the app hosted its own web server, we could load our resources from there. Since this app didn’t do either of those things, all resources had to be copied into a temporary folder and accessed via the <code>file://</code> protocol. Even then, the embedded browser would fail to locate or load the resources, making it necessary to inline all of our resources into the HTML for this to work.</p>
<p>As you can see, what started as a simple way to use a JS library on the desktop, quickly became cumbersome and difficult to maintain for mobile devices. Given more time, I would’ve chosen to instead re-implement <code>QRCode.js</code>'s algorithm using QtQuick’s Shapes API. The Shapes API would allow the QR code to be rendered in a single pass of the scene graph.</p>
<p>Fortunately, there’s a better, simpler and more practical solution. I will defer back to Matt here, who figured it out:</p>
<p><span style="color: #0077c8; font-family: inherit; font-size: 27px;">Proper JS in QML Solution</span></p>
<p>I decided to expand on Javier’s idea and try <a href="https://github.com/papnkukn/qrcode-svg">qrcode-svg</a>. This library uses a modified version of QRCode.js and enables creation of an SVG string from the QR Code data.</p>
<p>Here’s an example snipped from the project’s README:</p>
<pre>
<code class="prism language-js">var qrcode = new QRCode({
content: "Hello World!",
container: "svg-viewbox", // Responsive use
join: true // Crisp rendering and 4-5x reduced file size
});
var svg = qrcode.svg();
</code>
</pre>
<p>Since the data is SVG, it can be used with QML’s <code>Image</code> item natively by transforming it into a data URI and using that as the source for the image. There’s no need to write or read anything to disk, just append the string to <code>"data:image/svg+xml;utf8,"</code> and use that as the source file.</p>
<h2 id="starting-our-wrapper">Starting Our Wrapper</h2>
<p>We can just wrap the function call up in a QML type, called QR, and use that wherever we need a QR code. Let’s make a ridiculously basic <code>QtObject</code> that takes a content string and uses the library to produce an SVG:</p>
<pre>
<code class="prism language-qml">// QR.qml
import QtQuick
import "qrcode.min.js" as QrSvg
QtObject {
id: root
required property string content
property string svgString: ""
Component.onCompleted: {
root.svgString = new QrSvg.QRCode({
content: root.content
}).svg()
}
}
</code>
</pre>
<p>So, whenever we make a <code>QR</code> object, the string bound to <code>content</code> is used to make the SVG and store it in <code>svgString</code>. Then we can render it in an <code>Image</code> item:</p>
<pre>
<code class="prism language-qml">// example.qml
import QtQuick
import QtQuick.Window
Window {
visible: true
QR {
id: qrObj
content: "hello QR!"
}
Image {
source: "data:image/svg+xml;utf8," + qrObj.svgString
}
}
</code>
</pre>
<p>This is basically effortless and works like a charm.</p>
<h2 id="finishing-up-the-wrapper">Finishing Up The Wrapper</h2>
<p>Now let’s completely wrap the QRCode constructor, so all the options from qrcode-svg are exposed by our QML object. We just need to set all options in the constructor through QML properties and give all the unrequired properties default values.</p>
<p>While we’re at it, let’s go ahead and connect to <code>onContentChanged</code>, so we can refresh the SVG automatically when the content changes.</p>
<pre>
<code class="prism language-qml">// QR.qml
import QtQuick
import "qrcode.min.js" as QrSvg
QtObject {
id: root
required property string content
property int padding: 4
property int width: 256
property int height: 256
property string color: "black"
property string background: "white"
property string ecl: "M"
property bool join: false
property bool predefined: false
property bool pretty: true
property bool swap: false
property bool xmlDeclaration: true
property string container: "svg"
property string svgString: ""
function createSvgString() {
root.svgString = new QrSvg.QRCode({
content: root.content,
padding: root.padding,
width: root.width,
height: root.height,
color: root.color,
background: root.background,
ecl: root.ecl,
join: root.join,
predefined: root.predefined,
pretty: root.pretty,
swap: root.swap,
xmlDeclaration: root.xmlDeclaration,
container: root.container
}).svg()
}
onContentChanged: createSvgString()
Component.onCompleted: createSvgString()
}
</code>
</pre>
<h2 id="nice-and-easy">Nice and Easy</h2>
<p>With these 45 lines of QML and the minified JS file, we have a QML wrapper for the library. Now any arbitrary QML project can include these two files and generate any QR Code that qrcode-svg can make.</p>
<p>Here I use it to re-generate a QR code as you type the content into a TextInput:</p>
<pre>
<code class="prism language-qml">// example.qml
import QtQuick
import QtQuick.Window
import QtQuick.Controls
Window {
id: root
visible: true
QR {
id: qrObj
content: txtField.text
join: true
}
TextField {
id: txtField
width: parent.width
}
Image {
anchors.top: txtField.bottom
source: (qrObj.svgString === "")
? ""
: ("data:image/svg+xml;utf8," + qrObj.svgString)
}
}
</code>
</pre>
<p>This runs well when deployed on Android, and the image re-renders on content change in under 30 milliseconds, sometimes as low as 7.</p>
<p>Hopefully this code will be useful to those looking for the simplest no-frills method to generate a QR code in QML, and maybe the post can inspire other QML developers who feel like they’re overcomplicating something really simple.</p>
<blockquote>
<p><em>The solution associated with this post is available <a href="https://github.com/KDABLabs/QR-Code-Generator-QML">in a GitHub repo linked here</a>, so it can be used for your projects and tweaked if needed. There is also a branch that contains the code for Javier's alternate solution, <a href="https://github.com/KDABLabs/QR-Code-Generator-QML/tree/alternative-web-solution">available here</a>.</em></p>
</blockquote>
<blockquote>
<p><em>Note: Nuno settled on QZXing before we got a chance to show him this solution, and was so frustrated about not having it earlier that he made us write this blog post <img alt="😅" class="wp-smiley" src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f605.png" style="height: 1em;"></em></p>
</blockquote>
<div class="panel panel-info">
<div class="panel-heading">About KDAB</div>
<div class="panel-body">
<p>If you like this article and want to read similar material, consider subscribing via <a href="https://www.kdab.com/category/blogs/feed/">our RSS feed</a>.</p>
<p>Subscribe to <a href="https://www.youtube.com/kdabtv">KDAB TV</a> for similar informative short video content.</p>
<p>KDAB provides market leading software consulting and development <a href="https://www.kdab.com/software-services/">services</a> and <a href="https://training.kdab.com/">training</a> in Qt, C++ and 3D/OpenGL. <a href="https://www.kdab.com/about/contact/">Contact us</a>.</p>
</div>
</div>
</div>
<p>The post <a href="https://www.kdab.com/incredibly-simple-qr-generation-in-qml/">Incredibly Simple QR Generation in QML</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></description>
</item>
<item>
<guid isPermaLink="false">tag:www.pythonguis.com,2024-02-07:/faq/pyqt6-drag-drop-widgets/</guid>
<title>Python GUIs - qt: Drag & Drop Widgets with PyQt6 — Sort widgets visually with drag and drop in a container</title>
<pubDate>Wed, 07 Feb 2024 13:00:00 GMT</pubDate>
<link>https://www.pythonguis.com/faq/pyqt6-drag-drop-widgets/</link>
<description><p>I had an interesting question from a reader of my <a href="https://www.pythonguis.com/pyqt6-book/">PyQt6 book</a>, about how to handle dragging and dropping of widgets in a container showing the dragged widget as it is moved.</p>
<blockquote>
<p>I'm interested in managing movement of a QWidget with mouse in a container. I've implemented the application with drag & drop, exchanging the position of buttons, but I want to show the motion of <code>QPushButton</code>, like what you see in Qt Designer. Dragging a widget should show the widget itself, not just the mouse pointer.</p>
</blockquote>
<p>First, we'll implement the simple case which drags widgets without showing anything extra. Then we can extend it to answer the question. By the end of this quick tutorial we'll have a generic drag drop implementation which looks like the following.</p>
<div style="padding: 79.5% 0 0 0;"></div>
<div class="toc"><span class="toctitle">Table of Contents</span>
<ul>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#drag-drop-widgets">Drag & Drop Widgets</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#visual-drag-drop">Visual Drag & Drop</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#generic-drag-drop-container">Generic Drag & Drop Container</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#adding-a-visual-drop-target">Adding a Visual Drop Target</a></li>
</ul>
</div>
<h2 id="drag-drop-widgets">Drag & Drop Widgets</h2>
<p>We'll start with a simple application which creates a window using <code>QWidget</code> and places a series of <code>QPushButton</code> widgets into it.</p>
<p class="admonition admonition-tip">You can substitute <code>QPushButton</code> for any other widget you like, e.g. <code>QLabel</code>. Any widget can have drag behavior implemented on it, although some input widgets will not work well as we capture the mouse events for the drag.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class Window(QWidget):
def __init__(self):
super().__init__()
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = QPushButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
app = QApplication([])
w = Window()
w.show()
app.exec()
</code>
</pre></div>
<p>If you run this you should see something like this.</p>
<p><img alt="Widgets in a layout" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/windows-in-layout.png" width="421"> <em>The series of <code>QPushButton widgets</code> in a horizontal layout.</em></p>
<p class="admonition admonition-note">Here we're creating a window, but the <code>Window</code> widget is subclassed from <code>QWidget</code>, meaning you can add this widget to any other layout. See later for an example of a generic object sorting widget.</p>
<p><code>QPushButton</code> objects aren't usually draggable, so to handle the mouse movements and initiate a drag we need to implement a subclass. We can add the following to the top of the file.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import QMimeData, Qt
from PyQt6.QtGui import QDrag
from PyQt6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class DragButton(QPushButton):
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
drag.exec(Qt.DropAction.MoveAction)
</code>
</pre></div>
<p>We implement a <code>mouseMoveEvent</code> which accepts the single <code>e</code> parameter of the event. We check to see if the <em>left</em> mouse button is pressed on this event -- as it would be when dragging -- and then initiate a drag. To start a drag, we create a <code>QDrag</code> object, passing in <code>self</code> to give us access later to the widget that was dragged. We also <em>must</em> pass in mime data. This is used for including information about what is dragged, particularly for passing data between applications. However, as here, it is fine to leave this empty.</p>
<p>Finally, we initiate a drag by calling <code>drag.exec_(Qt.MoveAction)</code>. As with dialogs <code>exec_()</code> starts a new event loop, blocking the main loop until the drag is complete. The parameter <code>Qt.MoveAction</code> tells the drag handler what type of operation is happening, so it can show the appropriate icon tip to the user.</p>
<p>You can update the main window code to use our new <code>DragButton</code> class as follows.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class Window(QWidget):
def __init__(self):
super().__init__()
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = DragButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
</code>
</pre></div>
<p>If you run the code now, you <em>can</em> drag the buttons, but you'll notice the drag is forbidden.</p>
<p><img alt="Drag forbidden" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-forbidden.png" width="421"> <em>Dragging of the widget starts but is forbidden.</em></p>
<p>What's happening? The mouse movement is being detected by our <code>DragButton</code> object and the drag started, but the main window does not accept drag & drop.</p>
<p>To fix this we need to enable drops on the window and implement <code>dragEnterEvent</code> to actually accept them.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class Window(QWidget):
def __init__(self):
super().__init__()
self.setAcceptDrops(True)
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = DragButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
</code>
</pre></div>
<p>If you run this now, you'll see the drag is now accepted and you see the move icon. This indicates that the drag has started and been accepted by the window we're dragging onto. The icon shown is determined by the action we pass when calling <code>drag.exec_()</code>.</p>
<p><img alt="Drag accepted" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-accepted.png" width="421"> <em>Dragging of the widget starts and is accepted, showing a move icon.</em></p>
<p>Releasing the mouse button during a drag drop operation triggers a <code>dropEvent</code> on the widget you're currently hovering the mouse over (if it is configured to accept drops). In our case that's the window. To handle the move we need to implement the code to do this in our <code>dropEvent</code> method.</p>
<p>The drop event contains the position the mouse was at when the button was released & the drop triggered. We can use this to determine where to move the widget to.</p>
<p>To determine where to place the widget, we iterate over all the widgets in the layout, <em>until</em> we find one who's <code>x</code> position is <em>greater</em> than that of the mouse pointer. If so then when insert the widget directly to the left of this widget and exit the loop.</p>
<p>If we get to the end of the loop without finding a match, we must be dropping past the end of the existing items, so we increment <code>n</code> one further (in the <code>else:</code> block below).</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if pos.x() < w.x():
# We didn't drag past this widget.
# insert to the left of it.
break
else:
# We aren't on the left hand side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
e.accept()
</code>
</pre></div>
<p>The effect of this is that if you drag 1 pixel past the start of another widget the drop will happen to the right of it, which is a bit confusing. To fix this we can adjust the cut off to use the middle of the widget using <code>if pos.x() < w.x() + w.size().width() // 2:</code> -- that is x + half of the width.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if pos.x() < w.x() + w.size().width() // 2:
# We didn't drag past this widget.
# insert to the left of it.
break
else:
# We aren't on the left hand side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
e.accept()
</code>
</pre></div>
<p>The complete working drag-drop code is shown below.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import QMimeData, Qt
from PyQt6.QtGui import QDrag
from PyQt6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class DragButton(QPushButton):
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
drag.exec(Qt.DropAction.MoveAction)
class Window(QWidget):
def __init__(self):
super().__init__()
self.setAcceptDrops(True)
self.blayout = QHBoxLayout()
for l in ["A", "B", "C", "D"]:
btn = DragButton(l)
self.blayout.addWidget(btn)
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if pos.x() < w.x() + w.size().width() // 2:
# We didn't drag past this widget.
# insert to the left of it.
break
else:
# We aren't on the left hand side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
e.accept()
app = QApplication([])
w = Window()
w.show()
app.exec()
</code>
</pre></div>
<h2 id="visual-drag-drop">Visual Drag & Drop</h2>
<p>We now have a working drag & drop implementation. Next we'll move onto improving the UX by showing the drag visually. First we'll add support for showing the button being dragged next to the mouse point as it is dragged. That way the user knows exactly what it is they are dragging.</p>
<p>Qt's <code>QDrag</code> handler natively provides a mechanism for showing dragged objects which we can use. We can update our <code>DragButton</code> class to pass a <em>pixmap</em> image to <code>QDrag</code> and this will be displayed under the mouse pointer as the drag occurs. To show the widget, we just need to get a <code>QPixmap</code> of the widget we're dragging.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import QMimeData, Qt
from PyQt6.QtGui import QDrag, QPixmap
from PyQt6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidget
class DragButton(QPushButton):
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
pixmap = QPixmap(self.size())
self.render(pixmap)
drag.setPixmap(pixmap)
drag.exec(Qt.DropAction.MoveAction)
</code>
</pre></div>
<p>To create the pixmap we create a <code>QPixmap</code> object passing in the size of the widget this event is fired on with <code>self.size()</code>. This creates an empty <em>pixmap</em> which we can then pass into <code>self.render</code> to <em>render</em> -- or draw -- the current widget onto it. That's it. Then we set the resulting pixmap on the <code>drag</code> object.</p>
<p>If you run the code with this modification you'll see something like the following --</p>
<p><img alt="Drag visual" height="93" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-visual.png" width="421"> <em>Dragging of the widget showing the dragged widget.</em></p>
<h2 id="generic-drag-drop-container">Generic Drag & Drop Container</h2>
<p>We now have a working drag and drop behavior implemented on our window. We can take this a step further and implement a <em>generic</em> drag drop widget which allows us to sort arbitrary objects. In the code below we've created a new widget <code>DragWidget</code> which can be added to any window.</p>
<p>You can add <em>items</em> -- instances of <code>DragItem</code> -- which you want to be sorted, as well as setting data on them. When items are re-ordered the new order is emitted as a signal <code>orderChanged</code>.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import QMimeData, Qt, pyqtSignal
from PyQt6.QtGui import QDrag, QPixmap
from PyQt6.QtWidgets import (
QApplication,
QHBoxLayout,
QLabel,
QMainWindow,
QVBoxLayout,
QWidget,
)
class DragItem(QLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setContentsMargins(25, 5, 25, 5)
self.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.setStyleSheet("border: 1px solid black;")
# Store data separately from display label, but use label for default.
self.data = self.text()
def set_data(self, data):
self.data = data
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
pixmap = QPixmap(self.size())
self.render(pixmap)
drag.setPixmap(pixmap)
drag.exec(Qt.DropAction.MoveAction)
class DragWidget(QWidget):
"""
Generic list sorting handler.
"""
orderChanged = pyqtSignal(list)
def __init__(self, *args, orientation=Qt.Orientation.Vertical, **kwargs):
super().__init__()
self.setAcceptDrops(True)
# Store the orientation for drag checks later.
self.orientation = orientation
if self.orientation == Qt.Orientation.Vertical:
self.blayout = QVBoxLayout()
else:
self.blayout = QHBoxLayout()
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
def dropEvent(self, e):
pos = e.position()
widget = e.source()
self.blayout.removeWidget(widget)
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if self.orientation == Qt.Orientation.Vertical:
# Drag drop vertically.
drop_here = pos.y() < w.y() + w.size().height() // 2
else:
# Drag drop horizontally.
drop_here = pos.x() < w.x() + w.size().width() // 2
if drop_here:
break
else:
# We aren't on the left hand/upper side of any widget,
# so we're at the end. Increment 1 to insert after.
n += 1
self.blayout.insertWidget(n, widget)
self.orderChanged.emit(self.get_item_data())
e.accept()
def add_item(self, item):
self.blayout.addWidget(item)
def get_item_data(self):
data = []
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
data.append(w.data)
return data
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.drag = DragWidget(orientation=Qt.Orientation.Vertical)
for n, l in enumerate(["A", "B", "C", "D"]):
item = DragItem(l)
item.set_data(n) # Store the data.
self.drag.add_item(item)
# Print out the changed order.
self.drag.orderChanged.connect(print)
container = QWidget()
layout = QVBoxLayout()
layout.addStretch(1)
layout.addWidget(self.drag)
layout.addStretch(1)
container.setLayout(layout)
self.setCentralWidget(container)
app = QApplication([])
w = MainWindow()
w.show()
app.exec()
</code>
</pre></div>
<p><img alt="Generic drag drop horizontal" height="139" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-generic-horizontal.png" width="306"> <em>Generic drag-drop sorting in horizontal orientation.</em></p>
<p>You'll notice that when creating the item, you can set the label by passing it in as a parameter (just like for a normal <code>QLabel</code> which we've subclassed from). But you can also set a data value, which is the internal value of this item -- this is what will be emitted when the order changes, or if you call <code>get_item_data</code> yourself. This separates the visual representation from what is actually being sorted, meaning you can use this to sort <em>anything</em> not just strings.</p>
<p>In the example above we're passing in the enumerated index as the data, so dragging will output (via the <code>print</code> connected to <code>orderChanged</code>) something like:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">[1, 0, 2, 3]
[1, 2, 0, 3]
[1, 0, 2, 3]
[1, 2, 0, 3]
</code>
</pre></div>
<p>If you remove the <code>item.set_data(n)</code> you'll see the labels emitted on changes.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">['B', 'A', 'C', 'D']
['B', 'C', 'A', 'D']
</code>
</pre></div>
<p>We've also implemented <em>orientation</em> onto the <code>DragWidget</code> using the Qt built in flags <code>Qt.Orientation.Vertical</code> or <code>Qt.Orientation.Horizontal</code>. This setting this allows you sort items either vertically or horizontally -- the calculations are handled for both directions.</p>
<p><img alt="Generic drag drop vertical" height="216" src="https://www.pythonguis.com/static/faq/drag-drop-widgets/drag-generic-vertical.png" width="202"> <em>Generic drag-drop sorting in vertical orientation.</em></p>
<h2 id="adding-a-visual-drop-target">Adding a Visual Drop Target</h2>
<p>If you experiment with the drag-drop tool above you'll notice that it doesn't feel completely intuitive. When dragging you don't know where an item will be inserted until you drop it. If it ends up in the wrong place, you'll then need to pick it up and re-drop it again, using <em>guesswork</em> to get it right.</p>
<p>With a bit of practice you can get the hang of it, but it would be nicer to make the behavior immediately obvious for users. Many drag-drop interfaces solve this problem by showing a preview of where the item will be dropped while dragging -- either by showing the item in the place where it will be dropped, or showing some kind of placeholder.</p>
<p>In this final section we'll implement this type of drag and drop preview indicator.</p>
<p>The first step is to define our target indicator. This is just another label, which in our example is empty, with custom styles applied to make it have a solid "shadow" like background. This makes it obviously different to the items in the list, so it stands out as something distinct.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import QMimeData, Qt, pyqtSignal
from PyQt6.QtGui import QDrag, QPixmap
from PyQt6.QtWidgets import (
QApplication,
QHBoxLayout,
QLabel,
QMainWindow,
QVBoxLayout,
QWidget,
)
class DragTargetIndicator(QLabel):
def __init__(self, parent=None):
super().__init__(parent)
self.setContentsMargins(25, 5, 25, 5)
self.setStyleSheet(
"QLabel { background-color: #ccc; border: 1px solid black; }"
)
</code>
</pre></div>
<p class="admonition admonition-tip">We've copied the contents margins from the items in the list. If you change your list items, remember to also update the indicator dimensions to match.</p>
<p>The drag item is unchanged, but we need to implement some additional behavior on our <code>DragWidget</code> to add the target, control showing and moving it.</p>
<p>First we'll add the drag target indicator to the layout on our <code>DragWidget</code>. This is hidden to begin with, but will be shown during the drag.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class DragWidget(QWidget):
"""
Generic list sorting handler.
"""
orderChanged = pyqtSignal(list)
def __init__(self, *args, orientation=Qt.Orientation.Vertical, **kwargs):
super().__init__()
self.setAcceptDrops(True)
# Store the orientation for drag checks later.
self.orientation = orientation
if self.orientation == Qt.Orientation.Vertical:
self.blayout = QVBoxLayout()
else:
self.blayout = QHBoxLayout()
# Add the drag target indicator. This is invisible by default,
# we show it and move it around while the drag is active.
self._drag_target_indicator = DragTargetIndicator()
self.blayout.addWidget(self._drag_target_indicator)
self._drag_target_indicator.hide()
self.setLayout(self.blayout)
</code>
</pre></div>
<p>Next we modify the <code>DragWidget.dragMoveEvent</code> to show the drag target indicator. We show it by <em>inserting</em> it into the layout and then calling <code>.show</code> -- inserting a widget which is already in a layout will move it. We also hide the original item which is being dragged.</p>
<p>In the earlier examples we determined the position on drop by removing the widget being dragged, and then iterating over what is left. Because we now need to calculate the drop location before the drop, we take a different approach.</p>
<p class="admonition admonition-tip">If we wanted to do it the same way, we'd need to remove the item on drag start, hold onto it and implement re-inserting at it's old position on drag fail. That's a lot of work.</p>
<p>Instead, the dragged item is left in place and hidden during move.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dragMoveEvent(self, e):
# Find the correct location of the drop target, so we can move it there.
index = self._find_drop_location(e)
if index is not None:
# Inserting moves the item if its alreaady in the layout.
self.blayout.insertWidget(index, self._drag_target_indicator)
# Hide the item being dragged.
e.source().hide()
# Show the target.
self._drag_target_indicator.show()
e.accept()
</code>
</pre></div>
<p>The method <code>self._find_drop_location</code> finds the index where the drag target will be shown (or the item dropped when the mouse released). We'll implement that next.</p>
<p>The calculation of the drop location follows the same pattern as before. We iterate over the items in the layout and calculate whether our mouse drop location is to the left of each widget. If it isn't to the left of any widget, we drop on the far right.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def _find_drop_location(self, e):
pos = e.position()
spacing = self.blayout.spacing() / 2
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if self.orientation == Qt.Orientation.Vertical:
# Drag drop vertically.
drop_here = (
pos.y() >= w.y() - spacing
and pos.y() <= w.y() + w.size().height() + spacing
)
else:
# Drag drop horizontally.
drop_here = (
pos.x() >= w.x() - spacing
and pos.x() <= w.x() + w.size().width() + spacing
)
if drop_here:
# Drop over this target.
break
return n
</code>
</pre></div>
<p>The drop location <code>n</code> is returned for use in the <code>dragMoveEvent</code> to place the drop target indicator.</p>
<p>Next wee need to update the <code>get_item_data</code> handler to ignore the drop target indicator. To do this we check <code>w</code> against <code>self._drag_target_indicator</code> and skip if it is the same. With this change the method will work as expected.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def get_item_data(self):
data = []
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if w != self._drag_target_indicator:
# The target indicator has no data.
data.append(w.data)
return data
</code>
</pre></div>
<p>If you run the code a this point the drag behavior will work as expected. But if you drag the widget outside of the window and drop you'll notice a problem: the target indicator will stay in place, but dropping the item won't drop the item in that position (the drop will be cancelled).</p>
<p>To fix that we need to implement a <code>dragLeaveEvent</code> which hides the indicator.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python"> def dragLeaveEvent(self, e):
self._drag_target_indicator.hide()
e.accept()
</code>
</pre></div>
<p>With those changes, the drag-drop behavior should be working as intended. The complete code is shown below.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import QMimeData, Qt, pyqtSignal
from PyQt6.QtGui import QDrag, QPixmap
from PyQt6.QtWidgets import (
QApplication,
QHBoxLayout,
QLabel,
QMainWindow,
QVBoxLayout,
QWidget,
)
class DragTargetIndicator(QLabel):
def __init__(self, parent=None):
super().__init__(parent)
self.setContentsMargins(25, 5, 25, 5)
self.setStyleSheet(
"QLabel { background-color: #ccc; border: 1px solid black; }"
)
class DragItem(QLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setContentsMargins(25, 5, 25, 5)
self.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.setStyleSheet("border: 1px solid black;")
# Store data separately from display label, but use label for default.
self.data = self.text()
def set_data(self, data):
self.data = data
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
pixmap = QPixmap(self.size())
self.render(pixmap)
drag.setPixmap(pixmap)
drag.exec(Qt.DropAction.MoveAction)
self.show() # Show this widget again, if it's dropped outside.
class DragWidget(QWidget):
"""
Generic list sorting handler.
"""
orderChanged = pyqtSignal(list)
def __init__(self, *args, orientation=Qt.Orientation.Vertical, **kwargs):
super().__init__()
self.setAcceptDrops(True)
# Store the orientation for drag checks later.
self.orientation = orientation
if self.orientation == Qt.Orientation.Vertical:
self.blayout = QVBoxLayout()
else:
self.blayout = QHBoxLayout()
# Add the drag target indicator. This is invisible by default,
# we show it and move it around while the drag is active.
self._drag_target_indicator = DragTargetIndicator()
self.blayout.addWidget(self._drag_target_indicator)
self._drag_target_indicator.hide()
self.setLayout(self.blayout)
def dragEnterEvent(self, e):
e.accept()
def dragLeaveEvent(self, e):
self._drag_target_indicator.hide()
e.accept()
def dragMoveEvent(self, e):
# Find the correct location of the drop target, so we can move it there.
index = self._find_drop_location(e)
if index is not None:
# Inserting moves the item if its alreaady in the layout.
self.blayout.insertWidget(index, self._drag_target_indicator)
# Hide the item being dragged.
e.source().hide()
# Show the target.
self._drag_target_indicator.show()
e.accept()
def dropEvent(self, e):
widget = e.source()
# Use drop target location for destination, then remove it.
self._drag_target_indicator.hide()
index = self.blayout.indexOf(self._drag_target_indicator)
if index is not None:
self.blayout.insertWidget(index, widget)
self.orderChanged.emit(self.get_item_data())
widget.show()
self.blayout.activate()
e.accept()
def _find_drop_location(self, e):
pos = e.position()
spacing = self.blayout.spacing() / 2
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if self.orientation == Qt.Orientation.Vertical:
# Drag drop vertically.
drop_here = (
pos.y() >= w.y() - spacing
and pos.y() <= w.y() + w.size().height() + spacing
)
else:
# Drag drop horizontally.
drop_here = (
pos.x() >= w.x() - spacing
and pos.x() <= w.x() + w.size().width() + spacing
)
if drop_here:
# Drop over this target.
break
return n
def add_item(self, item):
self.blayout.addWidget(item)
def get_item_data(self):
data = []
for n in range(self.blayout.count()):
# Get the widget at each index in turn.
w = self.blayout.itemAt(n).widget()
if w != self._drag_target_indicator:
# The target indicator has no data.
data.append(w.data)
return data
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.drag = DragWidget(orientation=Qt.Orientation.Vertical)
for n, l in enumerate(["A", "B", "C", "D"]):
item = DragItem(l)
item.set_data(n) # Store the data.
self.drag.add_item(item)
# Print out the changed order.
self.drag.orderChanged.connect(print)
container = QWidget()
layout = QVBoxLayout()
layout.addStretch(1)
layout.addWidget(self.drag)
layout.addStretch(1)
container.setLayout(layout)
self.setCentralWidget(container)
app = QApplication([])
w = MainWindow()
w.show()
app.exec()
</code>
</pre></div>
<p>If you run this example on macOS you may notice that the widget drag preview (the <code>QPixmap</code> created on <code>DragItem</code>) is a bit blurry. On high-resolution screens you need to set the <em>device pixel ratio</em> and scale up the pixmap when you create it. Below is a modified <code>DragItem</code> class which does this.</p>
<p>Update <code>DragItem</code> to support high resolution screens.</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">class DragItem(QLabel):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setContentsMargins(25, 5, 25, 5)
self.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.setStyleSheet("border: 1px solid black;")
# Store data separately from display label, but use label for default.
self.data = self.text()
def set_data(self, data):
self.data = data
def mouseMoveEvent(self, e):
if e.buttons() == Qt.MouseButton.LeftButton:
drag = QDrag(self)
mime = QMimeData()
drag.setMimeData(mime)
# Render at x2 pixel ratio to avoid blur on Retina screens.
pixmap = QPixmap(self.size().width() * 2, self.size().height() * 2)
pixmap.setDevicePixelRatio(2)
self.render(pixmap)
drag.setPixmap(pixmap)
drag.exec(Qt.DropAction.MoveAction)
self.show() # Show this widget again, if it's dropped outside.
</code>
</pre></div>
<p>That's it! We've created a generic drag-drop handled which can be added to any projects where you need to be able to reposition items within a list. You should feel free to experiment with the styling of the drag items and targets as this won't affect the behavior.</p>
<div style="padding: 79.5% 0 0 0;"></div></description>
</item>
<item>
<guid isPermaLink="false">tag:www.pythonguis.com,2024-02-05:/docs/qlineedit-widget/</guid>
<title>Python GUIs - qt: QLineEdit — A Simple Text Input Widget</title>
<pubDate>Mon, 05 Feb 2024 06:00:00 GMT</pubDate>
<link>https://www.pythonguis.com/docs/qlineedit-widget/</link>
<description><p>The <code>QLineEdit</code> class is a versatile tool for single-line text input. The widget facilitates text manipulation by supporting insertion, deletion, selection, and cut-copy-paste operations natively. You can use line edits when you need to accept text input from your users in a PyQt/PySide application.</p>
<p>The widget is highly customizable. You can set it up to include placeholder text, input masks, input validators, and more. It also supports many keyboard shortcuts out of the box and is able to process custom ones. This feature opens an opportunity to enhance user input speed and efficiency.</p>
<p>In this article, you will learn the basics of using <code>QLineEdit</code> by going through its most commonly used features and capabilities.</p>
<div class="toc"><span class="toctitle">Table of Contents</span>
<ul>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#creating-line-edit-widgets-with-qlineedit">Creating Line Edit Widgets With QLineEdit</a>
<ul>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#creating-non-editable-line-edits">Creating Non-Editable Line Edits</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#creating-line-edits-for-passwords">Creating Line Edits for Passwords</a></li>
</ul>
</li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#manipulating-the-input-in-a-line-edit">Manipulating the Input in a Line Edit</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#aligning-and-formatting-the-text-in-a-line-edit">Aligning and Formatting the Text in a Line Edit</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#connecting-signals-and-slots">Connecting Signals and Slots</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#validating-input-in-line-edits">Validating Input in Line Edits</a></li>
<li><a href="https://www.pythonguis.com/feeds/qt.tag.atom.xml#conclusion">Conclusion</a></li>
</ul>
</div>
<h2 id="creating-line-edit-widgets-with-qlineedit">Creating Line Edit Widgets With <code>QLineEdit</code></h2>
<p>A line edit allows the user to enter and edit a single line of plain text with a useful collection of editing functionalities, such as insertion, deletion, selection, cut-copy-paste, and drag-and-drop operations.</p>
<p>If you've used <a href="https://www.pythonguis.com/pyqt6/">PyQt</a> or <a href="https://www.pythonguis.com/pyside6/">PySide</a> to create GUI applications in Python, then it'd be likely that you already know about the <a href="https://doc.qt.io/qt-6/qlineedit.html"><code>QLineEdit</code></a> class. This class allows you to create line edits in your graphical interfaces (GUI) quickly.</p>
<p>The <code>QLineEidt</code> class provides two different constructors that you can use to create line edits according to your needs:</p>
<table>
<thead>
<tr>
<th>Constructor</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#QLineEdit"><code>QLineEdit(parent: QWidget = None)</code></a></td>
<td>Constructs a line edit with a parent widget but without text</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#QLineEdit-1"><code>QLineEdit(text: str, parent: QWidget = None)</code></a></td>
<td>Constructs a line edit with default text and a parent widget</td>
</tr>
</tbody>
</table>
<p>The parent widget would be the window or dialog where you need to place the line edit. The text can be a default text that will appear in the line edit when you run the application.</p>
<p>To illustrate how to use the above constructors, we can code a demo example:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtWidgets import QApplication, QLineEdit, QVBoxLayout, QWidget
class Window(QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("QLineEdit Constructors")
self.resize(300, 100)
# Line edit with a parent widget
top_line_edit = QLineEdit(parent=self)
# Line edit with a parent widget and a default text
bottom_line_edit = QLineEdit(
"Hello! This is a line edit.", parent=self
)
layout = QVBoxLayout()
layout.addWidget(top_line_edit)
layout.addWidget(bottom_line_edit)
self.setLayout(layout)
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, we first do the required imports and then define the <code>Window</code> class inheriting from <code>QWidget</code>. Inside <code>Window</code>, we create two <code>QLineEdit</code> widgets.</p>
<p>To create the first line edit, we use the first constructor of <code>QLineEdit</code>, passing only a <code>parent</code> widget. For the second line editor, we use the second constructor, which requires the parent widget and a default text. Note that the text is a regular Python string.</p>
<p>Save the code to a file called <code>constructors.py</code> file and run it from your command line. You'll get a window that looks something like this:</p>
<p><img alt="QLineEdit constructors example" height="256" src="https://www.pythonguis.com/static/docs/qlineedit/qlineedit-constructors.png" width="600"> <em>Standard window showing our two line edits.</em></p>
<p>The first line edit has no text. In most cases, this is how you would create your line edits because they're designed for accepting input. If you'd like to just display some text, then you can use a <code>QLabel</code> widget instead. The second line edit displays the text that you passed to the constructor.</p>
<p>Both line edits are ready for accepting input text. Note that you can use all the following keyboard shortcuts to optimize your text input process:</p>
<table>
<thead>
<tr>
<th align="left">Keys</th>
<th align="left">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Left Arrow</td>
<td align="left">Moves the cursor one character to the left</td>
</tr>
<tr>
<td align="left">Shift+Left Arrow</td>
<td align="left">Moves and selects text one character to the left</td>
</tr>
<tr>
<td align="left">Right Arrow</td>
<td align="left">Moves the cursor one character to the right</td>
</tr>
<tr>
<td align="left">Shift+Right Arrow</td>
<td align="left">Moves and selects text one character to the right</td>
</tr>
<tr>
<td align="left">Home</td>
<td align="left">Moves the cursor to the beginning of the line</td>
</tr>
<tr>
<td align="left">End</td>
<td align="left">Moves the cursor to the end of the line</td>
</tr>
<tr>
<td align="left">Backspace</td>
<td align="left">Deletes the character to the left of the cursor</td>
</tr>
<tr>
<td align="left">Ctrl+Backspace</td>
<td align="left">Deletes the word to the left of the cursor</td>
</tr>
<tr>
<td align="left">Delete</td>
<td align="left">Deletes the character to the right of the cursor</td>
</tr>
<tr>
<td align="left">Ctrl+Delete</td>
<td align="left">Deletes the word to the right of the cursor</td>
</tr>
<tr>
<td align="left">Ctrl+A</td>
<td align="left">Select all</td>
</tr>
<tr>
<td align="left">Ctrl+C</td>
<td align="left">Copies the selected text to the clipboard</td>
</tr>
<tr>
<td align="left">Ctrl+Insert</td>
<td align="left">Copies the selected text to the clipboard</td>
</tr>
<tr>
<td align="left">Ctrl+K</td>
<td align="left">Deletes to the end of the line</td>
</tr>
<tr>
<td align="left">Ctrl+V</td>
<td align="left">Pastes the clipboard text into the line edit</td>
</tr>
<tr>
<td align="left">Shift+Insert</td>
<td align="left">Pastes the clipboard text into the line edit</td>
</tr>
<tr>
<td align="left">Ctrl+X</td>
<td align="left">Deletes the selected text and copies it to the clipboard</td>
</tr>
<tr>
<td align="left">Shift+Delete</td>
<td align="left">Deletes the selected text and copies it to the clipboard</td>
</tr>
<tr>
<td align="left">Ctrl+Z</td>
<td align="left">Undoes the last operation</td>
</tr>
<tr>
<td align="left">Ctrl+Y</td>
<td align="left">Redoes the last undone operation</td>
</tr>
</tbody>
</table>
<p>That's a lot of shortcuts! This table is just a sample of all the features that the <code>QLineEdit</code> class provides out of the box.</p>
<p>In addition to these keyboard shortcuts, the <code>QLineEdit</code> class provides a context menu that you can trigger by clicking on a line edit using the right button of your mouse:</p>
<p><img alt="QLineEdit context menu" height="592" src="https://www.pythonguis.com/static/docs/qlineedit/qlineedit-context-menu.png" width="662"> <em>QLineEdit with a context menu visible.</em></p>
<p>The built-in context menu provides basic edition options, such as cut, copy, paste, and delete. It also has options for undoing and redoing edits, and for selecting all the content of a given line edit.</p>
<h3 id="creating-non-editable-line-edits">Creating Non-Editable Line Edits</h3>
<p>Sometimes, we need to make a line edit non-editable. By default, all line edits are editable because their main use case is to provide text input for the user. However, in some situations, a non-editable line edit can be useful.</p>
<p>For example, say that you're creating a GUI application that generates some recovery keys for the users. The user must be able to copy the key to a safe place so that they can use it to recover access if they forget their password. In this situation, creating a non-editable line edit can provide a suitable solution.</p>
<p>To make a line edit read-only, we can use the <a href="https://doc.qt.io/qt-6/qlineedit.html#readOnly-prop"><code>readOnly</code></a> property and its setter method <code>setReadOnly()</code> as in the following example:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">import secrets
from PyQt6.QtWidgets import (
QApplication,
QLabel,
QLineEdit,
QVBoxLayout,
QWidget,
)
class Window(QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("Non-editable QLineEdit")
self.resize(300, 100)
non_editable_line_edit = QLineEdit(parent=self)
non_editable_line_edit.setReadOnly(True)
non_editable_line_edit.setText(secrets.token_hex(16))
layout = QVBoxLayout()
layout.addWidget(QLabel(parent=self, text="Your secret key:"))
layout.addWidget(non_editable_line_edit)
self.setLayout(layout)
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, we create a non-editable line edit by using the <code>setReadOnly()</code> method. When we set the <code>readOnly</code> property to <code>True</code>, our line edit won't accept editions. It'll only allow us to select and copy its content.</p>
<p>Go ahead and run the application from your command line to explore how this line edit works. You'll get a window like the following:</p>
<p><img alt="Non-editable line edit" height="424" src="https://www.pythonguis.com/static/docs/qlineedit/non-editable-lineedit.png" width="662"> <em>A read-only line edit with editing disabled.</em></p>
<p>If you play a bit with this line edit, you'll soon discover that you can't change its text. You'll also note that the options in the context menu are now limited to <em>Copy</em> and <em>Select All</em>.</p>
<h3 id="creating-line-edits-for-passwords">Creating Line Edits for Passwords</h3>
<p>Another cool feature of the <code>QLineEdit</code> class is that it allows you to create text input for passwords. This can be pretty convenient for those applications that manage several users, and each user needs to have access credentials.</p>
<p>You can create line edits for passwords by using the <a href="https://www.riverbankcomputing.com/static/Docs/PyQt6/api/qtwidgets/qlineedit.html#echoMode"><code>echoMode()</code></a> method. This method takes one of the following constants as an argument:</p>
<table>
<thead>
<tr>
<th>Constant</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>QLineEdit.EchoMode.Normal</code></td>
<td><code>0</code></td>
<td>Display characters as you enter them.</td>
</tr>
<tr>
<td><code>QLineEdit.EchoMode.NoEcho</code></td>
<td><code>1</code></td>
<td>Display no characters when you enter them.</td>
</tr>
<tr>
<td><code>QLineEdit.EchoMode.Password</code></td>
<td><code>2</code></td>
<td>Display platform-dependent password mask characters instead of the characters you enter.</td>
</tr>
<tr>
<td><code>QLineEdit.EchoMode.PasswordEchoOnEdit</code></td>
<td><code>3</code></td>
<td>Display characters as you enter them while editing. Display characters as the <code>Password</code> mode does when reading.</td>
</tr>
</tbody>
</table>
<p>The <code>Normal</code> mode is the default. The <code>NoEcho</code> mode may be appropriate for critical passwords where even the length of the password should be kept secret. The <code>Password</code> mode is appropriate for most password use cases, however <code>PasswordEchoOnEdit</code> can be used instead if you need to give users some confirmation of what they are typing.</p>
<p>Here's a sample app that shows a user and password form:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtWidgets import (
QApplication,
QFormLayout,
QLineEdit,
QWidget,
)
class Window(QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("Password QLineEdit")
self.resize(300, 100)
username_line_edit = QLineEdit(parent=self)
password_line_edit = QLineEdit(parent=self)
password_line_edit.setEchoMode(QLineEdit.EchoMode.Password)
layout = QFormLayout()
layout.addRow("Username:", username_line_edit)
layout.addRow("Password:", password_line_edit)
self.setLayout(layout)
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, you call <code>setEchoMode()</code> on the <code>password_line_edit</code> widget using the <code>Password</code> mode as an argument. When you run this code from your command line, you get the following window on your screen:</p>
<p><img alt="Password line edit" height="256" src="https://www.pythonguis.com/static/docs/qlineedit/password-qlineedit.png" width="600"> <em>Window with a username and password line edit.</em></p>
<p>The <code>username_line_edit</code> line edit is in <code>Normal</code> mode, so we can see the characters as we type them in. In contrast, the Password line edit is in <code>Password</code> mode. In this case, when we enter a character, the line edit shows the platform's character for passwords.</p>
<h2 id="manipulating-the-input-in-a-line-edit">Manipulating the Input in a Line Edit</h2>
<p>You can change the text of a line edit using the <a href="https://doc.qt.io/qt-6/qlineedit.html#text-prop"><code>setText()</code></a> or <a href="https://doc.qt.io/qt-6/qlineedit.html#insert"><code>insert()</code></a> methods. You can retrieve the text with the <a href="https://doc.qt.io/qt-6/qlineedit.html#text-prop"><code>text()</code></a> method. However, these are not the only operations that you can perform with the text of a line edit.</p>
<p>The following table shows a summary of some of the most commonly used methods for text manipulation in line edits:</p>
<table>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#text-prop"><code>setText(text)</code></a></td>
<td>Sets the text of a line edit to <code>text</code>, clears the selection, clears the undo/redo history, moves the cursor to the end of the line, and resets the <a href="https://doc.qt.io/qt-6/qlineedit.html#modified-prop">modified</a> property to false.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#insert"><code>insert(text)</code></a></td>
<td>Deletes any selected text, inserts <code>text</code>, and validates the result. If it is valid, it sets it as the new contents of the line edit.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#clear"><code>clear()</code></a></td>
<td>Clears the contents of the line edit.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#copy"><code>copy()</code></a></td>
<td>Copies the selected text to the clipboard.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#cut"><code>cut()</code></a></td>
<td>Copies the selected text to the clipboard and deletes it from the line edit.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#paste"><code>paste()</code></a></td>
<td>Inserts the clipboard's text at the cursor position, deleting any selected text.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#redo"><code>redo()</code></a></td>
<td>Redoes the last operation if redo is <a href="https://doc.qt.io/qt-6/qlineedit.html#redoAvailable-prop">available</a>. Redo becomes available once the user has performed one or more undo operations on text in the line edit.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#undo"><code>undo()</code></a></td>
<td>Undoes the last operation if undo is <a href="https://doc.qt.io/qt-6/qlineedit.html#undoAvailable-prop">available</a>. Undo becomes available once the user has modified the text in the line edit.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#selectAll"><code>selectAll()</code></a></td>
<td>Selects all the text and moves the cursor to the end.</td>
</tr>
</tbody>
</table>
<p>You can use any of these methods to manipulate the text of a line edit from your code. Consider the following example where you have two line edits and two buttons that take advantage of some of the above methods to copy some text from one line edit to the other:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtWidgets import (
QApplication,
QGridLayout,
QLabel,
QLineEdit,
QPushButton,
QWidget,
)
class Window(QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("Copy and Paste")
self.resize(300, 100)
self.source_line_edit = QLineEdit(parent=self)
self.source_line_edit.setText("Hello, World!")
self.dest_line_edit = QLineEdit(parent=self)
copy_button = QPushButton(parent=self, text="Copy")
paste_button = QPushButton(parent=self, text="Paste")
copy_button.clicked.connect(self.copy)
paste_button.clicked.connect(self.paste)
layout = QGridLayout()
layout.addWidget(self.source_line_edit, 0, 0)
layout.addWidget(copy_button, 0, 1)
layout.addWidget(self.dest_line_edit, 1, 0)
layout.addWidget(paste_button, 1, 1)
self.setLayout(layout)
def copy(self):
self.source_line_edit.selectAll()
self.source_line_edit.copy()
def paste(self):
self.dest_line_edit.clear()
self.dest_line_edit.paste()
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, we create two line edits. The first one will hold some sample text. The second line edit will receive the text. Then, we create two buttons and connect their <code>clicked</code> signals to the <code>copy()</code> and <code>paste()</code> slots.</p>
<p>Inside the <code>copy()</code> method we first select all the text from the source line edit. Then we use the <code>copy()</code> method to copy the selected text to the clipboard. In <code>paste()</code>, we call <code>clear()</code> on the destination line edit to remove any previous text. Then, we use the <code>paste()</code> method to copy the clipboard's content.</p>
<p>Go ahead and run the application. You'll get the following window on your screen:</p>
<p><img alt="QLineEdit Copy and Paste" height="256" src="https://www.pythonguis.com/static/docs/qlineedit/qlineedit-text-manipulation.png" width="600"> <em>QLineEdit with Copy & Paste buttons attached to handlers.</em></p>
<p>Once you've run the app, then you can click the <em>Copy</em> button to copy the text in the first line edit. Next, you can click the <em>Paste</em> button to paste the copied text to the second line edit. Go ahead and give it a try!</p>
<h2 id="aligning-and-formatting-the-text-in-a-line-edit">Aligning and Formatting the Text in a Line Edit</h2>
<p>You can also align and format the text in a line edit. For example, for text alignment, you can use the <a href="https://doc.qt.io/qt-6/qlineedit.html#alignment-prop"><code>setAlignment()</code></a> method with one or more alignment flags. Some of the most useful flags that you can find in the <a href="https://doc.qt.io/qt-6/qt.html#AlignmentFlag-enum"><code>Qt.AlignmentFlag</code></a> namespace includes the following:</p>
<table>
<thead>
<tr>
<th>Flag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>AlignLeft</code></td>
<td>Aligns with the left edge.</td>
</tr>
<tr>
<td><code>AlignRight</code></td>
<td>Aligns with the right edge.</td>
</tr>
<tr>
<td><code>AlignHCenter</code></td>
<td>Centers horizontally in the available space.</td>
</tr>
<tr>
<td><code>AlignJustify</code></td>
<td>Justifies the text in the available space.</td>
</tr>
<tr>
<td><code>AlignTop</code></td>
<td>Aligns with the top.</td>
</tr>
<tr>
<td><code>AlignBottom</code></td>
<td>Aligns with the bottom.</td>
</tr>
<tr>
<td><code>AlignVCenter</code></td>
<td>Centers vertically in the available space.</td>
</tr>
<tr>
<td><code>AlignCenter</code></td>
<td>Centers in both dimensions.</td>
</tr>
</tbody>
</table>
<p>If you want to apply multiple alignment flags to a given line edit, you don't have to call <code>setAlignment()</code> multiple times. You can just use the bitwise OR operator (<code>|</code>) to combine them. Consider the following example:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import Qt
from PyQt6.QtWidgets import QApplication, QLineEdit
class Window(QLineEdit):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("Aligning Text")
self.resize(300, 100)
self.setText("Hello, World!")
self.setAlignment(Qt.AlignmentFlag.AlignCenter)
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, we use a <code>QLineEdit</code> as the only component of our app's GUI. Using the <code>setAlignment()</code> method, we center the <code>"Hello, World!"</code> message in both directions, horizontally and vertically. To do this, we use the <code>AlignCenter</code> flag. Here's what the app looks like:</p>
<p><img alt="QLineEdit text alignment" height="256" src="https://www.pythonguis.com/static/docs/qlineedit/qlineedit-text-alignment.png" width="600"> <em>QLineEdit with text alignment set.</em></p>
<p>Go ahead and play with other flags to see their effect on the text alignment. Use the <code>|</code> bitwise operator to combine several alignment flags.</p>
<p>Line edits also have a <code>textMargins</code> property that you can tweak to customize the text alignment using specific values. To set margin values for your text, you can use the <code>setTextMargins()</code> method, which has the following signatures:</p>
<table>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#setTextMargins"><code>setTextMargins(left, top, right, bottom)</code></a></td>
<td>Sets the margins around the text to have the sizes <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#setTextMargins-1"><code>setTextMargins(margins)</code></a></td>
<td>Sets the <code>margins</code> around the text using a <a href="https://doc.qt.io/qt-6/qmargins.html"><code>QMargins</code></a> object.</td>
</tr>
</tbody>
</table>
<p>The first signature allows you to provide four integer values as the left, top, right, and bottom margins for the text. The second signature accepts a <code>QMargins</code> object as an argument. To build this object, you can use four integer values with the same meaning as the <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code> arguments in the first signature.</p>
<p>Here's an example of how to set custom margins for the text in a line edit:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtWidgets import QApplication, QLineEdit
class Window(QLineEdit):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("Aligning Text")
self.resize(300, 100)
self.setText("Hello, World!")
self.setTextMargins(30, 30, 0, 0)
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, you set the left and top margins to custom values. Here's how this app looks when you run it:</p>
<p><img alt="QLineEdit text margins" height="256" src="https://www.pythonguis.com/static/docs/qlineedit/qlineedit-text-margins.png" width="600"> <em>QLineEdit with text margins added.</em></p>
<p>Using the <code>setTextMargins()</code> method, we can place the text in the desired place in a line edit, which may be a requirement in some situations.</p>
<h2 id="connecting-signals-and-slots">Connecting Signals and Slots</h2>
<p>When you're creating a GUI application and you need to use line edits, you may need to perform actions when the user enters or modifies the content of the line edit. To do this, you need to connect some of the signals of the line edit to specific slots or functions.</p>
<p>Depending on specific user events, the <code>QLineEdit</code> class can emit several different signals. Here's is a summary of these signals and their corresponding meaning:</p>
<table>
<thead>
<tr>
<th>Signal</th>
<th>Emitted</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#textChanged"><code>textChanged(text)</code></a></td>
<td>Whenever the user changes the text either manually or programmatically. The <code>text</code> argument is the new text.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#textEdited"><code>textEdited(text)</code></a></td>
<td>Whenever the user edits the text manually. The <code>text</code> argument is the new text.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#editingFinished"><code>editingFinished</code></a></td>
<td>When the user presses the <em>Return</em> or <em>Enter</em> key, or when the line edit loses focus, and its contents have changed since the last time this signal was emitted.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#inputRejected"><code>inputRejected</code></a></td>
<td>When the user presses a key that is an unacceptable input.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#returnPressed"><code>returnPressed</code></a></td>
<td>When the user presses the <em>Return</em> or <em>Enter</em> key.</td>
</tr>
<tr>
<td><a href="https://doc.qt.io/qt-6/qlineedit.html#selectionChanged"><code>selectionChanged</code></a></td>
<td>When the selection changes.</td>
</tr>
</tbody>
</table>
<p>We can connect either of these signals with any slot. A slot is a method or function that performs a concrete action in your application. We can connect a signal and a slot so that the slot gets called when the signal gets emitted. Here's the required syntax to do this:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">line_edit.<signal>.connect(<method>)
</code>
</pre></div>
<p>In this construct, <code>line_edit</code> is the <code>QLineEdit</code> object that we need to connect with a given slot. The <code><signal></code> placeholder can be any of the abovementioned signals. Finally, <code><method></code> represents the target slot or method.</p>
<p>Let's write an example that puts this syntax into action. For this example, we'll connect the <code>textEdited</code> signal with a method that updates the text of a <code>QLabel</code> to match the text of our line edit:</p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtWidgets import (
QApplication,
QLabel,
QLineEdit,
QVBoxLayout,
QWidget,
)
class Window(QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("Signal and Slot")
self.resize(300, 100)
self.line_edit = QLineEdit(parent=self)
self.label = QLabel(parent=self)
self.line_edit.textEdited.connect(self.update_label)
layout = QVBoxLayout()
layout.addWidget(self.line_edit)
layout.addWidget(self.label)
self.setLayout(layout)
def update_label(self):
self.label.setText(self.line_edit.text())
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, we connect the line edit's <code>textEdited</code> signal with the <code>update_label()</code> method, which sets the label's text to match the text we enter in our line edit. Go ahead and run the app. Then, enter some text in the line edit and see what happens with the label at the bottom of the app's window.</p>
<h2 id="validating-input-in-line-edits">Validating Input in Line Edits</h2>
<p>We can provide input validators to our line edits using the <a href="https://doc.qt.io/qt-6/qlineedit.html#setValidator"><code>setValidator()</code></a> method. This method takes a <code>QValidator</code> object as an argument. PyQt has a few built-in validators that you can use directly on a line edit:</p>
<ul>
<li><a href="https://doc.qt.io/qt-6/qintvalidator.html">QIntValidator</a> for integer validation</li>
<li><a href="https://doc.qt.io/qt-6/qdoublevalidator.html">QDoubleValidator</a> for floating-point validation</li>
<li><a href="https://doc.qt.io/qt-6/qregularexpressionvalidator.html">QRegularExpressionValidator</a> for validation based on regular expressions</li>
</ul>
<p>Validator objects process the input to check whether it's valid. In general, validator object has three possible states:</p>
<table>
<thead>
<tr>
<th>Constant</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>QValidator.State.Invalid</code></td>
<td><code>0</code></td>
<td>The input is invalid.</td>
</tr>
<tr>
<td><code>QValidator.State.Intermediate</code></td>
<td><code>1</code></td>
<td>The input is a valid intermediate value.</td>
</tr>
<tr>
<td><code>QValidator.State.Acceptable</code></td>
<td><code>2</code></td>
<td>The input is acceptable as a final result.</td>
</tr>
</tbody>
</table>
<p>When you set a validator to a given line edit, the user may change the content to any <a href="https://doc.qt.io/qt-6/qvalidator.html#State-enum"><code>Intermediate</code></a> value during editing. However, they can't edit the text to a value that is <a href="https://doc.qt.io/qt-6/qvalidator.html#State-enum"><code>Invalid</code></a>. The line edit will emit the <code>returnPressed</code> and <code>editingFinished</code> signals only when the validator validates input as <a href="https://doc.qt.io/qt-6/qvalidator.html#State-enum"><code>Acceptable</code></a>.</p>
<p>Here's an example where we use a <code>QIntValidator</code> and a <code>QRegularExpressionValidator</code></p>
<div class="code-block"><span class="code-block-language code-block-python">python</span>
<pre>
<code class="python">from PyQt6.QtCore import QRegularExpression
from PyQt6.QtGui import QIntValidator, QRegularExpressionValidator
from PyQt6.QtWidgets import (
QApplication,
QFormLayout,
QLabel,
QLineEdit,
QWidget,
)
class Window(QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("Input Validators")
self.resize(300, 100)
self.int_line_edit = QLineEdit(parent=self)
self.int_line_edit.setValidator(QIntValidator())
self.uppercase_line_edit = QLineEdit(parent=self)
input_validator = QRegularExpressionValidator(
QRegularExpression("[A-Z]+"), self.uppercase_line_edit
)
self.uppercase_line_edit.setValidator(input_validator)
self.uppercase_line_edit.returnPressed.connect(self.update_label)
self.signal_label = QLabel(parent=self)
layout = QFormLayout()
layout.addRow("Integers:", self.int_line_edit)
layout.addRow("Uppercase letters:", self.uppercase_line_edit)
layout.addRow("Signal:", self.signal_label)
self.setLayout(layout)
def update_label(self):
self.signal_label.setText("Return pressed!")
if __name__ == "__main__":
app = QApplication([])
window = Window()
window.show()
app.exec()
</code>
</pre></div>
<p>In this example, we have two line edits. In the first line edit, we've used a <code>QIntValidator</code> object. This way, the line edit will only accept valid integer numbers. If you try to type in something different, then the line edit won't accept your input.</p>
<p>In the second line edit, we've used a <code>QRegularExpressionValidator</code>. In this specific case, the regular expression accepts one or more uppercase letters. Again if you try to enter something else, then the line edit won't accept the input.</p>
<p>The <code>QLabel</code> will show the text <code>Return pressed!</code> if the input in the second line edit is valid and you press the Enter key. Here's what the app looks like:</p>
<p><img alt="QLineEdit with input validator" height="292" src="https://www.pythonguis.com/static/docs/qlineedit/qlineedit-input-validators.png" width="600"> <em>QLineEdit with input validator.</em></p>
<p>Validators provide a quick way to restrict the user input and set our own validation rules. This way, we can ensure valid user input in our applications.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Line edits are pretty useful widgets in any GUI application. They allow text input through a single-line editor that has many cool features.</p>
<p>In this tutorial, you've learned how to create, use, and customize your line edits while building a GUI application with PyQt/PySide.</p></description>
</item>
<item>
<guid isPermaLink="false">https://blog.felgo.com/release-felgo-qml-hot-reload-for-qt-projects</guid>
<title>Felgo: Felgo Hot Reload: Enhance your Qt Project Development with QML Code Reload</title>
<pubDate>Thu, 25 Jan 2024 12:58:33 GMT</pubDate>
<link>https://blog.felgo.com/release-felgo-qml-hot-reload-for-qt-projects</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://blog.felgo.com/release-felgo-qml-hot-reload-for-qt-projects" title=""><img alt="Felgo Hot Reload: Enhance your Qt Project Development with QML Code Reload" class="hs-featured-image" src="https://blog.felgo.com/hubfs/felgo-hot-reload-product-release.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p>Felgo specializes in unique Qt products and tools to develop fast and efficiently. QML Hot Reload is one of them, and it transforms the way you develop Qt Quick applications.</p>
<p><span style="font-weight: normal;">The</span> <span style="font-weight: bold;">Felgo Hot Reload</span> release now makes the tool available as a standalone product - independent from the Felgo SDK. This means that you can <span style="font-weight: bold;">integrate code reloading to any Qt/QML project</span> to enhance your development workflow. To do so, simply add the Felgo QML Hot Reload library to your project. No change to your production code is required.</p>
<p style="text-align: center;"><a class="cta_button" href="https://hs.felgo.com/cs/ci/?pg=d3780ea5-44e6-4b22-a0b3-1875caeed7f4&pid=6147417&ecid=&hseid=&hsic="><img alt="Get Felgo Hot Reload" class="hs-cta-img" src="https://no-cache.hubspot.com/cta/default/6147417/d3780ea5-44e6-4b22-a0b3-1875caeed7f4.png"></a><br>
<br></p>
<p>Read this post to learn why you should not miss QML Hot Reload in your development setup, and what benefits it brings to your project:</p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=6147417&k=14&r=https%3A%2F%2Fblog.felgo.com%2Frelease-felgo-qml-hot-reload-for-qt-projects&bu=https%253A%252F%252Fblog.felgo.com&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">https://blog.felgo.com/develop-qt-quick-apps-with-visual-studio-code-qml-extension</guid>
<title>Felgo: QML Extension for Visual Studio Code: Develop Qt Quick with VS Code and QML Hot Reload</title>
<pubDate>Thu, 11 Jan 2024 17:15:00 GMT</pubDate>
<link>https://blog.felgo.com/develop-qt-quick-apps-with-visual-studio-code-qml-extension</link>
<description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://blog.felgo.com/develop-qt-quick-apps-with-visual-studio-code-qml-extension" title=""><img alt="QML Extension for Visual Studio Code: Develop Qt Quick with VS Code and QML Hot Reload" class="hs-featured-image" src="https://blog.felgo.com/hubfs/develop-qt-quick-apps-with-vs-code-and-qml-hot-reload-2023.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div>
<p>Visual Studio Code ranks <strong>#1 among the most popular development tools</strong> in the annual developers survey of Stack Overflow. More than 70% of all participants use this code editor for development. And there’s a reason why: It is fast, reliable, supports a wide range of languages and runs on Windows, macOS and Linux.</p>
<p>With the right extensions and tools, you can set up and use Visual Studio Code to develop your Qt and QML projects. Watch the tutorial or read this guide to learn how:</p>
<div class="hs-embed-wrapper" style="overflow: hidden; width: 100%; height: auto; padding: 0px; display: block; margin: auto;">
<div class="hs-embed-content-wrapper">
<div style="overflow: hidden; padding-bottom: 56.5%; margin: 0px;"></div>
</div>
</div>
<p> </p>
<img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=6147417&k=14&r=https%3A%2F%2Fblog.felgo.com%2Fdevelop-qt-quick-apps-with-visual-studio-code-qml-extension&bu=https%253A%252F%252Fblog.felgo.com&bvt=rss" width="1"></description>
</item>
<item>
<guid isPermaLink="false">http://planet.qt.io/rss20.xml#id8a10ab52a5df2a23ab8c1d542cfa111805687424</guid>
<title>Cutelyst Framework: Cutelyst v4 - 10 years 🎉</title>
<pubDate>Thu, 21 Dec 2023 21:49:36 GMT</pubDate>
<link>https://cutelyst.org/2023/12/21/cutelyst-v4-10-years</link>
<description><p>Cutelyst the Qt web framework is now at v4.0.0 just a bit later for it's 10th anniversary.</p>
<p>With 2.5k commits it has been steadly improving, and in production for many high traffic applications. With this release we say good bye to our old Qt5 friend, also dropped uWSGI support, clearsilver and Grantlee were also removed, many methods now take a QStringView and Cutelyst::Header class was heavly refactored to allow usage of QByteArrayView, and stopped storing QStrings internally in a QHash, they are QByteArray inside a vector.</p>
<p>Before, all headers were uppercased and dashes replaced with underscores, this was quite some work, so that when searching the string had to be converted to this format to be searcheable, this had the advantage of allowing the use of QHash and in templates you could c.request.header.CONTENT_TYPE. Turns out both cases aren't so important, speed is more important for the wider use cases.</p>
<p>With these changes Cutelyst managed to get 10 - 15% faster on TechEmpower benchmarks, which is great as we are still well positioned as a full stack framework there.</p>
<p>https://github.com/cutelyst/cutelyst/releases/tag/v4.0.0</p>
<p>Have fun, Merry Christmas and Happy New Year!</p></description>
</item>
<item>
<guid isPermaLink="false">https://scythe-studio.com/en/blog/qt-for-mcu</guid>
<title>Scythe Studio Qt Blog: Qt Embedded Programming &#8211; First Steps with Qt for MCUs</title>
<pubDate>Wed, 20 Dec 2023 14:27:26 GMT</pubDate>
<link>https://scythe-studio.com/en/blog/qt-for-mcu</link>
<description><p>On our blog, we have repeatedly covered various ‘branches’ of Qt-a such as 3D, Android, DBus, etc (the latter topic […]</p></description>
</item>
</channel>
</rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://www.rssboard.org/rss-validator/check.cgi?url=http%3A//planet.qt-project.org/rss20.xml"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.rssboard.org/rss-validator/check.cgi?url=http%3A//planet.qt-project.org/rss20.xml

Home · About · News · Docs · Terms

Software created by Sam Ruby, Mark Pilgrim, Joseph Walton and Phil Ringnalda

RSS Advisory Board

Really Simple Syndication specifications, tutorials and discussion

RSS Validator

Congratulations!

Recommendations

Source: http://planet.qt-project.org/rss20.xml