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.
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 362, column 0: (7 occurrences) [help]
<div style="padding: 79.5% 0 0 0;"></div>
line 458, column 0: (8 occurrences) [help]
auto evaluator = std::make_shared<ConnectionEvaluator>(); // Shared ow ...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
<body>
line 1442, column 0: (3 occurrences) [help]
<script src="jquery.min.js"></script>
<p>To start, we need to <code>#include <emscripten/bind.h> ...
... &#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.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.qt.io/blog/qtcs24-sep-5-6-save-the-date</guid><title>The Qt Company Blog: QtCS24 Sep 5-6 Save the Date!</title><pubDate>Fri, 12 Apr 2024 09:30:57 GMT</pubDate><link>https://www.qt.io/blog/qtcs24-sep-5-6-save-the-date</link><description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qtcs24-sep-5-6-save-the-date" title=""><img alt="QtCS24 Sep 5-6 Save the Date!" class="hs-featured-image" src="https://www.qt.io/hubfs/QtCS24%20Save%20the%20Date-2.jpg" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div><p style="font-size: 10px;">tldr; save the date for our QtCS24 Sep 5-6 in Würzburg.<br>Stay tuned for more information.</p><img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Fqtcs24-sep-5-6-save-the-date&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-mcus-2.5.3-lts-released</guid><title>The Qt Company Blog: Qt for MCUs 2.5.3 LTS Released</title><pubDate>Thu, 11 Apr 2024 13:16:42 GMT</pubDate><link>https://www.qt.io/blog/qt-for-mcus-2.5.3-lts-released</link><description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-for-mcus-2.5.3-lts-released" title=""><img alt="Qt for MCUs 2.5.3 LTS Released" class="hs-featured-image" src="https://www.qt.io/hubfs/_Website_Blog/Upload_Here/Qt%20for%20MCUs%20release%202.5.3.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div><p>Qt for MCUs 2.5.3 LTS (Long-Term Support) has been released and is available for download.<span> </span><span>As a patch release, Qt for MCUs 2.5.3 LTS provides bug fixes and other improvements, and maintains source compatibility with Qt for MCUs 2.5.x. It does not</span> <span>add any new functionality.</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-mcus-2.5.3-lts-released&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></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> loaderCompLoader <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> instantiatorrequired 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> loaderCompLoader <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> instantiatorrequired 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> itemCompItem <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> buttonCompButton <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> rowLayoutCompRowLayout <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.qt.io/blog/qt-project-top-contributors-of-2022-0</guid><title>The Qt Company Blog: Qt Project: Top Contributors of 2023!</title><pubDate>Wed, 10 Apr 2024 10:12:35 GMT</pubDate><link>https://www.qt.io/blog/qt-project-top-contributors-of-2022-0</link><description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-project-top-contributors-of-2022-0" title=""><img alt="Qt Project: Top Contributors of 2023!" class="hs-featured-image" src="https://www.qt.io/hubfs/Qt%20Project%20Top%20Contributors%202023.jpg" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div><p>So, 2023 was a successful year for Qt - and we highlight <span><span>the <a href="https://www.qt.io/blog/qt-6.5-lts-released" style="font-weight: bold;">Qt 6.5</a> and <a href="https://www.qt.io/blog/qt-6.6-released" style="font-weight: bold;">Qt 6.6</a> releases, <a href="https://www.qt.io/qt-world-summit-2023" style="font-weight: bold;">Qt World Summit</a>, and <a href="https://www.qt.io/blog/contributor-summit-2023-qt-highlights" style="font-weight: bold;">Qt Contributor Summit</a>.</span></span></p><p>Our community stays vibrant and engaged with the Qt Project through our forums, mailings lists, asking and answering questions, offering technical advice, reporting bugs, contributing patches, and in many other forms helping Qt flourish.</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-project-top-contributors-of-2022-0&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></description></item><item><guid isPermaLink="false">https://www.qt.io/blog/insights-from-industry-experts-improving-software-dev-productivity</guid><title>The Qt Company Blog: Insights from Industry Experts: Improving Software Dev Productivity</title><pubDate>Wed, 10 Apr 2024 07:36:07 GMT</pubDate><link>https://www.qt.io/blog/insights-from-industry-experts-improving-software-dev-productivity</link><description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/insights-from-industry-experts-improving-software-dev-productivity" title=""><img alt="Insights from Industry Experts: Improving Software Dev Productivity" class="hs-featured-image" src="https://www.qt.io/hubfs/iStock_000043979843Large_ICT%20copy.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div><p> </p><p>Software development is a dynamic and constantly evolving field that requires professionals to stay up-to-date with the latest technologies and tools to improve their productivity and efficiency. For developers, the ultimate goal is to complete tasks effectively, leading to better products and faster time-to-market. These topics were explored in our <a href="https://www.qt.io/qt-world-summit-2023">World Summit QtWS23</a> last November, where <a href="https://www.qt.io/resources/videos/panel-discussion-is-software-making-the-lives-of-developers-easier-with-kate-kevlin-and-volker?hsLang=en">experts Kate Gregory, Kevlin Henney, and Volker Hilsheimer</a> shared valuable insights. </p><img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=149513&k=14&r=https%3A%2F%2Fwww.qt.io%2Fblog%2Finsights-from-industry-experts-improving-software-dev-productivity&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.6.3-is-released</guid><title>The Qt Company Blog: Qt for Android Automotive 6.6.3 is released</title><pubDate>Tue, 09 Apr 2024 19:15:14 GMT</pubDate><link>https://www.qt.io/blog/qt-for-android-automotive-6.6.3-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.6.3-is-released" title=""><img alt="Qt for Android Automotive 6.6.3 is released" class="hs-featured-image" src="https://www.qt.io/hubfs/Outrun%20automotive%20demo/Apps.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.6.3-released">Qt 6.6.3</a></span></span> <span><span>with</span></span> more than 300 bug fixes, security updates, and other improvements to the top of the Qt 6.6.2 release.<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.6.3-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/qt-for-python-release-6.7</guid><title>The Qt Company Blog: Qt for Python release: 6.7 is now available! 🐍</title><pubDate>Tue, 09 Apr 2024 11:16:36 GMT</pubDate><link>https://www.qt.io/blog/qt-for-python-release-6.7</link><description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://www.qt.io/blog/qt-for-python-release-6.7" title=""><img alt="Qt for Python release: 6.7 is now available! 🐍" class="hs-featured-image" src="https://www.qt.io/hubfs/qt%20release-2.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div><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-python-release-6.7&bu=https%253A%252F%252Fwww.qt.io%252Fblog&bvt=rss" width="1"></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 QtQuickimport QtQuick.Windowimport com.kdab.servoWindow {height: 720width: 1280title: webView.titlevisible: trueServoWebView {id: webViewanchors.fill: parenturl: "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 sysfrom PySide6 import QtWidgetsfrom PySide6.QtUiTools import QUiLoaderloader = 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 sysfrom PySide6.QtGui import QPixmapfrom PySide6.QtWidgets import QMainWindow, QApplication, QLabelclass 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 evaluationworkerSignal.connectDeferred(evaluator, [&guiValue](int value) {// This slot will be executed later in the GUI thread's event loopguiValue += value;});// ... Worker thread emits signals ...// In the GUI thread's event loop or at the right timeevaluator->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">https://www.kdab.com/?p=33542</guid><title>KDAB on Qt: Reducing Visual Studio Installations with Toolchains</title><pubDate>Thu, 07 Mar 2024 08:00:40 GMT</pubDate><link>https://www.kdab.com/reducing-visual-studio-installations-with-toolchains/</link><description><p>If you work on C++ projects on Windows that need to be built with multiple Visual Studio C++ compiler versions, you need some way to manage the installations of all these build environments. Either you have multiple IDEs installed, or you know about build tools (<a class="external-link" href="https://aka.ms/vs/17/release/vs_BuildTools.exe" rel="nofollow">https://aka.ms/vs/17/release/vs_BuildTools.exe</a>) and maybe keep only the latest full VS IDE plus older Build Tools.</p><p>However, it turns out that you can have just the latest IDE but with multiple toolchains installed for older compiler targets. You won’t even need the Build Tools.</p><p>To use these toolchains you need to install them in your chosen VS installation and then call <code>vcvarsall.bat</code> with an appropriate parameter.</p><p>You can even have <em>no</em> IDE installed if you don’t need it but only the Build Tools with the required toolchains. That’s useful when you use a different IDE like <a href="https://www.jetbrains.com/clion/">JetBrains Clion</a> or <a href="https://code.visualstudio.com/">Visual Studio Code</a>. Note, however, that to be license- compliant, you still need a valid Visual Studio subscription.</p><h2>Installing the toolchain</h2><ol><li>Go to the Visual Studio Installer and click “Modify” on your main VS version (2022 in my case).</li><li>Go to “Individual components” and search for the appropriate toolchain. For example, to get the latest VS2019 C++ compiler in VS 2022 installer, you need to look at this:<img alt="Screenshot of Visual Studio 2022 installer illustrating how to locate Visual Studio 2019 toolchain" class="alignnone wp-image-33544 size-large" height="614" src="https://www.kdab.com/wp-content/uploads/stories/vs_installer_2022_toolchain_2019-1024x614.png" width="1024">How do you know that 14.29 corresponds to VS 2019? Well, you have to consult this table: <a class="external-link" href="https://en.wikipedia.org/wiki/Microsoft_Visual_C%2B%2B#Internal_version_numbering" rel="nofollow">https://en.wikipedia.org/wiki/Microsoft_Visual_C%2B%2B#Internal_version_numbering</a> – look at the “runtime library version” column as that’s the C++ compiler version really.</li><li>Finish the installation of the desired components.</li></ol><h2>Setting up the environment from cmd.exe</h2><p>The only thing you need to do to start with a different toolchain is to pass an option to your <code>vcvarsall.bat</code> invocation:</p><pre><code>C:\Users\mikom>"c:\Program Files\Microsoft Visual Studio\2022\Professional\VC\Auxiliary\Build\vcvarsall.bat" -vcvars_ver=14.29</code></pre><p>With such a call, I get a shell where cl.exe indeed uses the VS2019 compiler variant:</p><p><img alt="Screenshot of windows command prompt showing the results of using the discussed technique. It shows that visual studio 2019 compiler, version 19.29 is set up from Visual Studio 2022 installation folder" class="alignnone wp-image-33545 size-large" height="589" src="https://www.kdab.com/wp-content/uploads/stories/vs_toolchain_cmd-1024x589.png" width="1024"></p><p>As you can see, I called <code>vcvarsall.bat</code> from VS2022 yet I got VS2019 variant of the compiler For more info about <code>vcvarsall.bat</code> see: <a class="external-link" href="https://learn.microsoft.com/en-us/cpp/build/building-on-the-command-line" rel="nofollow">https://learn.microsoft.com/en-us/cpp/build/building-on-the-command-line</a><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">.</span></p><h2 id="id-20240201ReducingVSinstallationswithtoolchains-SettinguptheenvironmentforPowerShell">Setting up the environment for PowerShell</h2><p>If you do your compilation in Powershell, <code>vcvarsall.bat</code> is not very helpful. It will spawn an underlying <code>cmd.exe</code>, set the necessary env vars inside it, and close it without altering your PowerShell environment.</p><p>(You may try to do some hacks of printing the environment in the child <code>cmd.exe</code> and adopting it to your Pwsh shell, but that’s a hack).</p><p>For setting up a development environment from PowerShell, Microsoft introduced a PowerShell module that does just that.</p><p>To get it, you first have to load the module:</p><pre><code class="language-pwsh">Import-Module "C:\Program Files\Microsoft Visual Studio\2022\Professional\Common7\Tools\Microsoft.VisualStudio.DevShell.dll"</code></pre><p>And then call the <code>Enter-VsDevShell</code> cmdlet with appropriate parameters:</p><pre><code class="language-pwsh">Enter-VsDevShell -VsInstallPath 'C:\Program Files\Microsoft Visual Studio\2022\Professional\' -DevCmdArguments "-vcvars_ver=14.29" -Arch amd64 -SkipAutomaticLocation</code></pre><p>This cmdlet internally passes arguments to <code>vcvarsall.bat</code> so you specify the toolchain version as above.</p><p>With this invocation, you get your desired <code>cl.exe</code> compiler:</p><p><img alt="Screenshot of windows powershell console showing the results of using the discussed technique. It shows that visual studio 2019 compiler, version 19.29 is set up from Visual Studio 2022 installation folder" class="alignnone wp-image-33546 size-large" height="351" src="https://www.kdab.com/wp-content/uploads/stories/vs_toolchain_pwsh-1024x351.png" width="1024"></p><p>For more info about Powershell DevShell module see: <a class="external-link" href="https://learn.microsoft.com/en-us/visualstudio/ide/reference/command-prompt-powershell" rel="nofollow">https://learn.microsoft.com/en-us/visualstudio/ide/reference/command-prompt-powershell</a></p><h2 id="id-20240201ReducingVSinstallationswithtoolchains-SettingupQtCreatorKitwithatoolchain">Setting up Qt Creator Kit with a toolchain</h2><p>Unfortunately, Qt Creator doesn’t detect the toolchains in a single Visual Studio installation as multiple kits. You have to configure the compiler and the kit yourself:</p><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img alt="Screenshot showing the Qt Creator kit setup illustrating how to configure custom Visual Studio compiler version through a toolchain" class="alignnone wp-image-33547 size-large" height="645" src="https://www.kdab.com/wp-content/uploads/stories/vs_toolchain_qtcreator-1024x645.png" width="1024"></span></p><h2 id="id-20240201ReducingVSinstallationswithtoolchains-Iamascript,howdoIknowwhereisVisualStudioinstalled?">I am a script, how do I know where Visual Studio is installed?</h2><p>If you want to query the system for VS installation path programatically (to find either <code>vcvarsall.bat</code> or the DevShell PowerShell module) you can use the <code>vswhere</code> tool (<a class="external-link" href="https://github.com/microsoft/vswhere" rel="nofollow">https://github.com/microsoft/vswhere</a>).</p><p>It’s a small-ish (0.5MB) self-contained <code>.exe</code> so you can just drop it in your repository and don’t care if it’s in the system. You can also install it with <a href="https://learn.microsoft.com/en-us/windows/package-manager/winget/"><code>winget</code></a>:</p><pre><code>winget install vswhere</code></pre><p>It queries the well-known registry entries and does some other magic to find out what Visual Studio installations your machine has.</p><p>By default it looks for the latest version of Visual Studio available and returns easily parseable key:value pairs with various infos about the installation. Most notably, the installation path in <code>installationPath</code>.</p><p>It also has various querying capabilities, like showing only the VS installation that have the C++ workload installed.</p><p>For example, to get the installation path of the newest Visual Studio with C++ workload, you call:</p><pre><code>vswhere -latest -products * -requires Microsoft.VisualStudio.Component.VC.Tools.x86.x64 -property installationPath</code></pre><p><img alt="Screenshot illustrating the output of calling vswhere to locate Visual Studio installation. Query: vswhere -latest -products * -requires Microsoft.VisualStudio.Component.VC.Tools.x86.x64 -property installationPath results in the output of: C:\Program Files\Microsoft Visual Studio\2022\Professional" class="alignnone wp-image-33548 size-large" height="178" src="https://www.kdab.com/wp-content/uploads/stories/vswhere-1024x178.png" width="1024"></p><h2 id="id-20240201ReducingVSinstallationswithtoolchains-Caveats">Caveats</h2><p>I haven’t found an easy way to query <code>vcvarsall</code> for something along the lines “give me the latest available toolchain in a given VS product line (2019, 2022 etc.)”. So if you call an explicit version (like <code>14.29</code>) and a newer one appears, you will still be looking for the older one. However:</p><ul><li>When <code>vcvarsall.bat</code> is called without any toolchain parameter (<code>vcvars_ver</code>), it defaults to itself so you may assume that it’s the latest one in this installation folder.</li><li>Microsoft seems to stop bumping the relevant part of the version of the Visual Studio C++ compiler once the next version of VS is out. So for example it seems that <code>14.29</code> will be a proper target for VS2019 C++ compiler until the end of time.</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/reducing-visual-studio-installations-with-toolchains/">Reducing Visual Studio Installations with Toolchains</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, QWidgetclass 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, Qtfrom PySide6.QtGui import QDragfrom PySide6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidgetclass 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.breakelse:# We aren't on the left hand side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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.breakelse:# We aren't on the left hand side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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, Qtfrom PySide6.QtGui import QDragfrom PySide6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidgetclass 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.breakelse:# We aren't on the left hand side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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, Qtfrom PySide6.QtGui import QDragfrom PySide6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidgetclass 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, Signalfrom PySide6.QtGui import QDrag, QPixmapfrom 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 = datadef 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 = orientationif 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() // 2else:# Drag drop horizontally.drop_here = pos.x() < w.x() + w.size().width() // 2if drop_here:breakelse:# We aren't on the left hand/upper side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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 dataclass 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, Signalfrom PySide6.QtGui import QDrag, QPixmapfrom 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 = orientationif 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() / 2for 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() - spacingand pos.y() <= w.y() + w.size().height() + spacing)else:# Drag drop horizontally.drop_here = (pos.x() >= w.x() - spacingand pos.x() <= w.x() + w.size().width() + spacing)if drop_here:# Drop over this target.breakreturn 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, Signalfrom PySide6.QtGui import QDrag, QPixmapfrom 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 = datadef 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 = orientationif 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() / 2for 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() - spacingand pos.y() <= w.y() + w.size().height() + spacing)else:# Drag drop horizontally.drop_here = (pos.x() >= w.x() - spacingand pos.x() <= w.x() + w.size().width() + spacing)if drop_here:# Drop over this target.breakreturn ndef 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 dataclass 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 = datadef 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=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.15import QtQuick.Window 2.15Window {id: documentQRCode {id: qrtext: "https://kdab.com/"anchors.centerIn: parent// The smallest dimension determines and fixes QR code sizewidth: 400height: 600}width: 640height: 480visible: truetitle: qsTr("Web based embedded QR Code")}</code></pre><pre><code class="prism language-qml">// QRCode.qmlimport QtQuick 2.15import QtWebView 1.15Item {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 URLurl: "qrc:///qr-loader.html?w=" + width + "&t=" + Qt.btoa(text)// Keep view dimensions to a minimumwidth: parent.width < parent.height ? parent.width : parent.heightheight: parent.height < parent.width ? parent.height : parent.widthanchors.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 usejoin: 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.qmlimport QtQuickimport "qrcode.min.js" as QrSvgQtObject {id: rootrequired property string contentproperty 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.qmlimport QtQuickimport QtQuick.WindowWindow {visible: trueQR {id: qrObjcontent: "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.qmlimport QtQuickimport "qrcode.min.js" as QrSvgQtObject {id: rootrequired property string contentproperty int padding: 4property int width: 256property int height: 256property string color: "black"property string background: "white"property string ecl: "M"property bool join: falseproperty bool predefined: falseproperty bool pretty: trueproperty bool swap: falseproperty bool xmlDeclaration: trueproperty 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.qmlimport QtQuickimport QtQuick.Windowimport QtQuick.ControlsWindow {id: rootvisible: trueQR {id: qrObjcontent: txtField.textjoin: true}TextField {id: txtFieldwidth: parent.width}Image {anchors.top: txtField.bottomsource: (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, QWidgetclass 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, Qtfrom PyQt6.QtGui import QDragfrom PyQt6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidgetclass 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.breakelse:# We aren't on the left hand side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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.breakelse:# We aren't on the left hand side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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, Qtfrom PyQt6.QtGui import QDragfrom PyQt6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidgetclass 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.breakelse:# We aren't on the left hand side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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, Qtfrom PyQt6.QtGui import QDrag, QPixmapfrom PyQt6.QtWidgets import QApplication, QHBoxLayout, QPushButton, QWidgetclass 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, pyqtSignalfrom PyQt6.QtGui import QDrag, QPixmapfrom 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 = datadef 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 = orientationif 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() // 2else:# Drag drop horizontally.drop_here = pos.x() < w.x() + w.size().width() // 2if drop_here:breakelse:# We aren't on the left hand/upper side of any widget,# so we're at the end. Increment 1 to insert after.n += 1self.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 dataclass 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, pyqtSignalfrom PyQt6.QtGui import QDrag, QPixmapfrom 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 = orientationif 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() / 2for 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() - spacingand pos.y() <= w.y() + w.size().height() + spacing)else:# Drag drop horizontally.drop_here = (pos.x() >= w.x() - spacingand pos.x() <= w.x() + w.size().width() + spacing)if drop_here:# Drop over this target.breakreturn 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, pyqtSignalfrom PyQt6.QtGui import QDrag, QPixmapfrom 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 = datadef 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 = orientationif 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() / 2for 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() - spacingand pos.y() <= w.y() + w.size().height() + spacing)else:# Drag drop horizontally.drop_here = (pos.x() >= w.x() - spacingand pos.x() <= w.x() + w.size().width() + spacing)if drop_here:# Drop over this target.breakreturn ndef 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 dataclass 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 = datadef 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, QWidgetclass Window(QWidget):def __init__(self, parent=None):super().__init__(parent)self.setWindowTitle("QLineEdit Constructors")self.resize(300, 100)# Line edit with a parent widgettop_line_edit = QLineEdit(parent=self)# Line edit with a parent widget and a default textbottom_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 secretsfrom 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 Qtfrom PyQt6.QtWidgets import QApplication, QLineEditclass 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, QLineEditclass 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 QRegularExpressionfrom PyQt6.QtGui import QIntValidator, QRegularExpressionValidatorfrom 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://www.kdab.com/?p=33409</guid><title>KDAB on Qt: KDSoap 2.2.0 Released</title><pubDate>Fri, 12 Jan 2024 12:30:35 GMT</pubDate><link>https://www.kdab.com/kdsoap-2-2-0-released/</link><description><p><img align="right" alt="" class="alignleft size-full wp-image-1403" height="128" src="https://www.kdab.com/wp-content/uploads/stories/kdsoap128.png" width="128"> We’re pleased to announce the release of KDSoap version 2.2.0, an update that brings new enhancements to improve both the general build system and client-side functionality.</p><h4>What is KDSoap?</h4><p>KDSoap, a SOAP (“Simple Object Access Protocol“) component rooted in Qt, serves as an essential tool for both client-side and server-side operations. Tailored for C++ programmers using Qt, it not only facilitates the creation of client applications for web services but also empowers developers to seamlessly build web services without requiring additional components like dedicated web servers. For further details on KDSoap, visit <a href="https://www.kdab.com/development-resources/qt-tools/kd-soap">here</a>.</p><h4>What’s New in KDSoap Version 2.2.0?</h4><p><strong>Build System Co-installability:</strong> The buildsystem now supports the co-installability of Qt 5 and Qt 6 headers. Qt 6 headers are installed into their dedicated subdirectory. This ensures compatibility with client code and allows co-installation with Qt 5.</p><p><strong>Client-Side:</strong></p><ul><li><strong>WS-Addressing Support:</strong> The new release adds <code>KDSoapClientInterface::setMessageAddressingProperties()</code>. This addition enables the use of WS-Addressing support specifically with WSDL-generated services.</li><li><strong>SOAP Action Requirement Removal:</strong> KDSoap no longer requires a SOAP action for writing addressing properties.</li></ul><p><strong>WSDL Parser / Code Generator Changes:</strong></p><p><strong>Enhanced <code>-import-path Support</code>:</strong> Notable changes have been made to the WSDL parser and code generator, impacting both client and server sides. The update improves <code>-import-path</code> support by incorporating the import path in more areas within the code. This refinement enhances the overall functionality of the parser and code generator.</p><p>These updates collectively contribute to a more streamlined and efficient experience for KDSoap users, addressing specific issues and introducing valuable features to facilitate seamless integration with Qt-based applications. For detailed information and to explore these enhancements, we refer to the KDSoap documentation accompanying version 2.2.0 on <a href="https://github.com/KDAB/KDSoap/releases/tag/kdsoap-2.2.0">GitHub</a>.</p><h4>How to Get Started with KDSoap Version 2.2.0?</h4><p>For existing users, upgrading to the latest version is as simple as downloading the new release from the <a href="https://github.com/KDAB/KDSoap/releases/tag/kdsoap-2.2.0">GitHub page</a>. If you are new to KDSoap, we <a href="https://github.com/KDAB/KDSoap">invite you</a> to explore its capabilities and discover how it can streamline your web service development process.</p><p>As always, we appreciate your feedback and contributions to make KDSoap even better. Feel free to reach out to us with any questions, suggestions or bug reports on <a href="https://github.com/KDAB/KDSoap">our GitHub repository</a>.</p><p>Thank you for choosing KDSoap, and happy coding!</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/kdsoap-2-2-0-released/">KDSoap 2.2.0 Released</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></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">https://www.kdab.com/?p=33362</guid><title>KDAB on Qt: Qt 6 WASM: Uploading & Playing Back Audio Files</title><pubDate>Thu, 11 Jan 2024 09:00:20 GMT</pubDate><link>https://www.kdab.com/qt-6-wasm-uploading-playing-back-audio-files/</link><description><div class="stackedit__html"><blockquote><p><em>This article walks through an implementation using C++11 or later, Qt 6.5 or later for WebAssembly (multithreaded), and CMake. The browser environment used was Mozilla Firefox 119.0.1 (64-bit) provided by the Mozilla Firefox snap package for Ubuntu.</em></p></blockquote><h2 id="overview--motivation">Overview & Motivation</h2><p>Lately, I’ve been working on a small Qt Widgets project to help manage some weekly poker games with my friends, and realized it would be much nicer to distribute copies by web instead of building binaries. This gave me the perfect excuse to test out Qt for WebAssembly, and see how much tinkering I’d have to do with the original source code to make it work in Firefox!</p><p>Everything looked and felt great on the web browser when just compiling the desktop code with a Qt WASM CMake kit, but one feature caused some issues. The program plays a notification sound with <code>QMediaPlayer</code>, and allows the user to select any audio file on their computer to use as the sound. The original implementation for both getting a native file dialog and playing back audio files did not work in-browser. Using goofy audio is a must for our poker nights, so I quickly started rewriting.</p><p>Fixing the implementation to get the file dialog was simple and required me to replace a very small amount of code, but <code>QMediaPlayer</code> was unusable with file URLs. Firstly, browser code is sandboxed, so the <code>QMediaPlayer</code> can’t set its source to a file URL on the user’s file system. The data would have to be stored in the browser’s internal file system or on a server. Secondly, Qt Multimedia is pretty broken for WASM in general. It’s listed as <a href="https://doc.qt.io/qt-5/wasm.html#supported-qt-modules">not working in Qt 5</a>, and <a href="https://doc.qt.io/qt-6/wasm.html#supported-qt-modules">untested in Qt 6</a>, with some Qt 6 limitations detailed <a href="https://doc.qt.io/qt-6/qtmultimedia-wasm.html">here</a>.</p><p>However, I noticed that the Qt WASM method for opening files provided the file contents as a <code>QByteArray</code>.</p><p>I thought, why not just try to play back the audio from the buffer of raw bytes?</p><blockquote><p><em>Please note that there are other (and usually better) ways to do this. The program I was working on was simple enough that storing a buffer as a DOM variable was sufficient enough. In many cases, it would be preferable to store audio persistently on a server and fetch the stream to play it back, or even in some cases write the file to the browser’s IndexedDB. Either way, knowing how to use C++ to play audio in-browser from a buffer could be useful in these cases, so this simple example should cover a lot of the common ground without making it too complex. Additionally, note that cross-browser implementation may require a little bit more code, and production code should perform more checks than you’ll see here.</em></p></blockquote><h2 id="getting-file-contents">Getting File Contents</h2><p>I’ll start off this basic example by creating a regular Qt Widgets application, with a class that inherits from <code>QMainWindow</code>.</p><pre><code class="prism lang-cpp">#pragma once#includeclass MainWindow : public QMainWindow {Q_OBJECTpublic:explicit MainWindow(QWidget *parent = nullptr) noexcept;~MainWindow() override;};</code></pre><p>In the constructor, I’ll create a <code>QPushButton</code> to open a file dialog (<code>dialogButton</code>) and one to play the audio back (<code>playButton</code>).</p><p>Let’s connect <code>dialogButton</code>‘s <code>clicked</code> signal to a lambda and get our file dialog.</p><p>To do this in a Qt WASM project, we use <code>QFileDialog::getOpenFileContent</code>.</p><pre><code class="prism language-cpp">connect(dialogButton, &QPushButton::clicked, this, [this]() {QFileDialog::getOpenFileContent(tr("Audio files (*.mp3 *.flac *.wav *.aiff *.ogg)"),[this](const QString &fileName, const QByteArray &fileContent) {if (fileName.isEmpty()) {// no file selected} else {// do stuff with file data}});});</code></pre><p>Notice that, as I mentioned earlier, the file’s contents are provided as a <code>QByteArray</code>. To play the audio, we need our buffer to contain PCM data, while these bytes are the file’s binary contents in a specific file format. We need to decode the bytes and transform them to PCM.</p><p>How do we do that?</p><h2 id="finding-the-needed-decoding-method">Finding the Needed Decoding Method</h2><p>Let’s stick with the <code>QMediaPlayer</code> idea for now to illustrate some basic concepts. We want to use a buffer of bytes rather than a file URL, so we can set the <code>QMediaPlayer</code>‘s source device to a <code>QBuffer</code> containing PCM data.</p><p>To obtain this buffer, we need to create an initial <code>QBuffer</code> from the <code>QByteArray</code>, then give it to a <code>QAudioDecoder</code>, read the decoded bytes as a <code>QAudioBuffer</code>, then create another <code>QBuffer</code> from the <code>QAudioBuffer</code>‘s raw byte data and byte count. Now <em>this</em> buffer can be given to a <code>QMediaPlayer</code> by calling <code>setSourceDevice</code>.</p><p>Here’s the problem: <code>QAudioDecoder</code> needs a <code>QAudioFormat</code> to know how to decode the data. This is not just file format – we need to know about channels and bitrate as well. We want to be able to upload files in different formats, with different bitrates, and in both mono and stereo, so we would have to extract all this information manually somehow to decode correctly.</p><p>On top of that, this limitation is mentioned in the <a href="https://doc.qt.io/qt-6/qtmultimedia-wasm.html">Qt 6 WASM Multimedia page</a>:</p><blockquote><p>Playing streaming bytes instead of a url. e.g. setSource(QIOStream) is also not currently supported. Some advanced features may or may not work at this time.</p></blockquote><p>Even if we do all the decoding properly, we can’t play from our buffer (by <code>setSource(QIOStream)</code> they mean <code>setSourceDevice(QIODevice *)</code>)! We need to find another way.</p><p>Luckily, JavaScript’s Web Audio API has a great solution. <code>BaseAudioContext</code> has a nice <code>decodeAudioData</code> method that takes an <code>ArrayBuffer</code> of data in any kind of supported audio format and decodes it as an <code>AudioBuffer</code>. This buffer can be played with an <code>AudioSourceNode</code> connected to an <code>AudioContext</code>‘s destination node.</p><p>But wait, how do we get our <code>QByteArray</code> data into a JavaScript <code>ArrayBuffer</code>?</p><h2 id="using-the-emscripten-api">Using the Emscripten API</h2><p>We need to use emscripten’s C++ API for this. On Qt for WASM, it’s already linked and you can include its headers out of the box.</p><p>The idea is that we want to not only invoke JS functions and use JS <code>var</code>s, but also have C++ objects representing JS objects. Then we can create them, perform other operations in our C++ context, and then invoke methods on the JS objects later, even passing data from C++ objects to JavaScript and vice-versa.</p><p>Our best option for this is to use emscripten’s embind, instead of writing inline JavaScript with something like <code>EM_JS</code> or <code>EM_ASM</code>. This way, our JS objects are accessible in whatever scope their corresponding C++ objects are defined in.</p><p>To start, we need to <code>#include <emscripten/bind.h></code>.</p><p>We’ll be working with the C++ type <code>emscripten::val</code>, essentially emscripten’s wrapper for a JS <code>var</code>, which additionally has a static member function to access global objects and functions.</p><p>Since Qt 6.5, in Qt WASM, <code>QByteArray</code> conveniently has a member function <code>toEcmaUint8Array()</code> that represents its data in the layout of a JS <code>Uint8Array</code> and returns it as an <code>emscripten::val</code>. Since we receive <code>fileContent</code> as a <code>const</code> reference to a <code>QByteArray</code> and <code>toEcmaUint8Array</code> is <strong>not</strong> a <code>const</code> function, we’ll copy <code>fileContent</code> to a new <code>QByteArray</code>:</p><pre><code class="prism language-cpp">QFileDialog::getOpenFileContent(tr("Audio files (*.mp3 *.flac *.wav *.aiff *.ogg)"),[this](const QString &fileName, const QByteArray &fileContent) {if (fileName.isEmpty()) {// no file selected} else {auto contentCopy = fileContent;auto buf = contentCopy.toEcmaUint8Array();// ...// ...// ...}});</code></pre><p>Nice. Now we have to get the buffer property from our <code>buf</code> object and call <code>decodeAudioData</code>. For that, we need to initialize an <code>AudioContext</code>.</p><p>An easy way is to just give our <code>MainWindow</code> class a private data member <code>emscripten::val mAudioContext</code> and initialize it in the constructor. To get the embind equivalent of the JS expression <code>mAudioContext = new AudioContext()</code> we do this:</p><pre><code class="prism language-cpp">mAudioContext = emscripten::val::global("AudioContext").new_();</code></pre><p>We can go ahead and initialize it in our constructor’s initializer list:</p><pre><code class="prism language-cpp">MainWindow::MainWindow(QWidget *parent) noexcept: QMainWindow(parent), mAudioContext(emscripten::val::global("AudioContext").new_()){// ...// ...// ...}</code></pre><p>So why this syntax?</p><p>In JavaScript, functions are first-class objects. For a browser that complies with the Web Audio API, the constructor <code>AudioContext</code> is a property of <code>globalThis</code>, so it can be accessed as a global object with <code>emscripten::val::global("AudioContext")</code>. Then we can call <code>new_(Args&&... args)</code> on it, which calls the constructor with <code>args</code> using the <code>new</code> keyword.</p><p>Now let’s get back to setting up our <code>AudioBuffer</code>.</p><h2 id="finally-decoding-the-audio">Finally Decoding the Audio</h2><p>Recall that we have this:</p><pre><code class="prism language-cpp">auto contentCopy = fileContent;auto buf = contentCopy.toEcmaUint8Array();</code></pre><p>We need to access the property <code>buffer</code> of <code>buf</code> to get an <code>ArrayBuffer</code> object that we can pass to <code>decodeAudioData</code>. To get the property, we just use <code>operator[]</code> like so: <code>buf["buffer"]</code>. Easy.</p><p>To call <code>decodeAudioData</code>, we just invoke the template function <code>ReturnValue call(const char *name, Args&&... args) const</code> like so:</p><pre><code class="prism language-cpp">auto decodedBuffer = mAudioContext.call<emscripten::val>("decodeAudioData", /* arguments */);</code></pre><p>But wait a second, <code>decodeAudioData</code> is overloaded. There are two versions of this function with different arguments and return types. One involves a promise-await syntax where you just pass the buffer, which returns the decoded buffer. The other is void and involves passing both the buffer and a callback function that takes the decoded buffer as an argument. How can we do JS promise-await or pass JS callback functions as arguments in C++?</p><p>Well, to do promise-await syntax, we can just call <code>await()</code> on our return value.</p><pre><code class="prism language-cpp">auto decodedBuffer = mAudioContext.call<emscripten::val>("decodeAudioData", buf["buffer"]).await();</code></pre><p>Please keep in mind this <code>await()</code> is <strong>only</strong> available when Asyncify is enabled. If you’re using the multithreaded version of Qt WASM, you can enable this. Just add the following to your <code>CMakeLists.txt</code>:</p><pre><code class="prism language-cmake">target_link_options(<target name> PUBLIC -sASYNCIFY -O3)</code></pre><p>In C++20, you can also use coroutines to do promise-await syntax by placing a <code>co_await</code> operator to the left of the function call.</p><p>For the callback function, well, <code>Function</code> is a global object. Thus, you can call the <code>Function</code> constructor with <code>new_(Args&&... args)</code>, passing the function body as a string, and store the returned function as an <code>emscripten::val</code>.</p><p>The problem is that the callback function takes the decoded buffer as an argument, so we get it in JS rather than C++. It <strong>is</strong> possible to call a C++ function from the callback and forward the decoded buffer to it, which involves exposing the function to emscripten’s <code>Module</code> object using <code>EMSCRIPTEN_BINDINGS</code>. However, if we need it to be a member function, we get type errors on the function pointer.</p><p>I am still looking at how the callback syntax would work, but I believe it involves exposing the entire class to <code>Module</code>.</p><p>So, let’s just go with the promise-await syntax for now.</p><p>Since we will want to play from the buffer on a button press or some other event, let’s make a data member <code>emscripten::val mDecodedBuffer</code> so it’s in the class scope.</p><p>We now have this:</p><pre><code class="prism language-cpp">QFileDialog::getOpenFileContent(tr("Audio files (*.mp3 *.flac *.wav *.aiff *.ogg)"),[this](const QString &fileName, const QByteArray &fileContent) {if (fileName.isEmpty()) {// no file selected} else {auto contentCopy = fileContent;auto buf = contentCopy.toEcmaUint8Array();mDecodedBuffer = mAudioContext.call<emscripten::val>("decodeAudioData", buf["buffer"]).await();}});</code></pre><p>Cool, we can store the data from an audio file in a buffer in PCM format!</p><p>Let’s move on to playing the audio from that buffer.</p><h2 id="playing-back-the-audio">Playing Back the Audio</h2><p>When we want to play, we first need to create an <code>AudioBufferSourceNode</code> from the <code>AudioContext</code>, and set its buffer to <code>mDecodedBuffer</code>. We then connect the source node to our audio context’s destination node (our audio device). After this, we can call <code>start</code> on the source node to play the sound!</p><p>Here’s what that looks like with embind:</p><pre><code class="prism language-cpp">auto source = mAudioContext.call<emscripten::val>("createBufferSource");source.set("buffer", mDecodedBuffer);source.call<void>("connect", mAudioContext["destination"]);source.call<void>("start");</code></pre><p>A new <code>AudioBufferSourceNode</code> needs to be created every time you want to play the sound, but they are inexpensive to construct.</p><p>I have this code to play on the <code>QPushButton</code> click:</p><pre><code class="prism language-cpp">connect(playButton, &QPushButton::clicked, this, [this]() {auto source = mAudioContext.call<emscripten::val>("createBufferSource");source.set("buffer", mDecodedBuffer);source.call<void>("connect", mAudioContext["destination"]);source.call<void>("start");});</code></pre><p>To make sure the buffer will be populated successfully before this code executes, I make the button initially disabled and use Qt signals <code>readyToPlay</code> and <code>notReady</code> to enable and disable the button respectively.</p><h2 id="complete-code--final-thoughts">Complete Code & Final Thoughts</h2><p>Here is my full header for this basic example:</p><pre><code class="prism language-cpp">#pragma once#include <QMainWindow>#include <emscripten/bind.h>class MainWindow : public QMainWindow {Q_OBJECTpublic:explicit MainWindow(QWidget *parent = nullptr) noexcept;~MainWindow() override;signals:void notReady();void readyToPlay();private:emscripten::val mAudioContext;emscripten::val mDecodedBuffer;};</code></pre><p>and my entire implementation file (it’s a very basic example so I just left everything in the constructor):</p><pre><code class="prism language-cpp">#include "mainwindow.h"#include <QFileDialog>#include <QHBoxLayout>#include <QPushButton>MainWindow::MainWindow(QWidget *parent) noexcept: QMainWindow(parent), mAudioContext(emscripten::val::global("AudioContext").new_()){auto *centerWidget = new QWidget(this);auto *layout = new QHBoxLayout(centerWidget);auto *dialogButton = new QPushButton(centerWidget);dialogButton->setText(tr("Choose file"));auto *playButton = new QPushButton(centerWidget);playButton->setText(tr("Play"));playButton->setEnabled(false);layout->addWidget(dialogButton);layout->addWidget(playButton);centerWidget->setLayout(layout);setCentralWidget(centerWidget);connect(dialogButton, &QPushButton::clicked, this, [this]() {QFileDialog::getOpenFileContent(tr("Audio files (*.mp3 *.flac *.wav *.aiff *.ogg)"),[this](const QString &fileName, const QByteArray &fileContent) {if (fileName.isEmpty()) {emscripten::val::global().call<void>("alert", std::string("no file selected"));} else {emit notReady();auto contentCopy = fileContent;auto buf = contentCopy.toEcmaUint8Array();mDecodedBuffer = mAudioContext.call<emscripten::val>("decodeAudioData", buf["buffer"]).await();emit readyToPlay();}});});connect(playButton, &QPushButton::clicked, this, [this]() {auto source = mAudioContext.call<emscripten::val>("createBufferSource");source.set("buffer", mDecodedBuffer);source.call<void>("connect", mAudioContext["destination"]);source.call<void>("start");});connect(this, &MainWindow::notReady, this, [playButton]() {if (playButton->isEnabled())playButton->setEnabled(false);});connect(this, &MainWindow::readyToPlay, this, [playButton]() {if (!playButton->isEnabled())playButton->setEnabled(true);});}MainWindow::~MainWindow() = default;</code></pre><p>This example was simple, but I hope readers can use these building blocks in more complete codebases to work with audio in Qt WASM!</p><blockquote><p>Note: if you want to stream your audio, look into the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API">Media Capture and Streams API</a> and use a <code>MediaStreamAudioSourceNode</code> instead of an <code>AudioBufferSourceNode</code>.</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/qt-6-wasm-uploading-playing-back-audio-files/">Qt 6 WASM: Uploading & Playing Back Audio Files</a> appeared first on <a href="https://www.kdab.com">KDAB</a>.</p></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><item><guid isPermaLink="false">https://blog.felgo.com/qt-world-summit-2023-highlights</guid><title>Felgo: Qt World Summit 2023: Together We Shape the Future of Qt</title><pubDate>Wed, 13 Dec 2023 12:00:00 GMT</pubDate><link>https://blog.felgo.com/qt-world-summit-2023-highlights</link><description><div class="hs-featured-image-wrapper"><a class="hs-featured-image-link" href="https://blog.felgo.com/qt-world-summit-2023-highlights" title=""><img alt="Qt World Summit 2023: Together We Shape the Future of Qt" class="hs-featured-image" src="https://blog.felgo.com/hubfs/qtws23-shape-the-future-of-qt-1.png" style="width: auto !important; float: left; margin: 0 15px 15px 0;"></a></div><p>The Qt World Summit 2023 in Berlin was a huge success. After several years of virtual events, we once again had the chance to meet with industry experts and Qt enthusiasts from all around the world. We thus want to share our experiences, discuss the latest advancements, and strengthen our bonds with the Qt community! </p><img alt="" height="1" src="https://track.hubspot.com/__ptq.gif?a=6147417&k=14&r=https%3A%2F%2Fblog.felgo.com%2Fqt-world-summit-2023-highlights&bu=https%253A%252F%252Fblog.felgo.com&bvt=rss" width="1"></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
srcattribute if necessary):
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
Software created by Sam Ruby, Mark Pilgrim, Joseph Walton and Phil Ringnalda
