This is a text-only version of the following page on https://raymii.org:
---
Title       : 	Responsive Qt/QML layout coming to Leaf Node Monitoring
Author      : 	Remy van Elst
Date        : 	15-08-2022 21:00
URL         : 	https://raymii.org/s/blog/Responsive_Qt_QML_Layout_coming_to_Leaf_Node_Monitoring.html
Format      : 	Markdown/HTML
---



[Leaf Node Monitoring](https://leafnode.nl) is my own open source (GPLv3), paid, network monitoring program for Windows, Linux & Android. Written in C++ & Qt 5. Perfect to run on your desktop and monitor your servers. Simple setup, auto-detects running services, runs checks concurrently and alerting. This post shows another upcoming feature in the next version, responsive layouting to more effectively use screen real estate.

You can find all [articles related to Leaf Node Monitoring here][8].

This page has no sponsor link block because it is about [my own paid app]
[1]. Most other pages on here do have a sponsor link block so if you really
want, you can check out [any other article][7].

#### Responsive QML Layouting


A quick update, showcasing another new feature for [the upcoming version]
[5] of Leaf Node Monitoring (v2022.02), responsive layouts.

The previous version has a set width/height for the host cards and check
tiles, in a big long column, just 1 row. Widen the window, host cards also
widen. With this change, the host cards no longer automatically widen, but
once the window is big enough, 2 rows will appear.

Here is a GIF showcasing the new responsive behavior:

[![resizeable layout][4]][4]

(stuttering is due to the GIF screen recording, actual app performs way better)

The old layout just became as wide as the window itself:

[![non resizeable layout][9]][9]


I've added a collapsible menu right on the monitoring screen so you can resize
and directly see the result. The new options are also available in the
settings screen.

This responsive layout feature was requested by a user that runs Leaf Node
Monitoring on a tablet and wanted to use the screen real estate better.

The technical details on how to make a responsive QML layout [can be found
here][6]. Using QML layouts, I can dynamically add or remove columns or rows
in the grid layout that holds either the host cards or check tiles. I also
added a short animation on resize, as eye candy and also because QML makes
that so easy.

### One more sneak peek

I've also added a right-click menu to the tray icon with
a few useful features:

![right click menu][10]

Just because I missed that feature myself.


This article is [cross-posted][2] on the Leaf Node Monitoring site.

[1]: https://leafnode.nl
[2]: https://www.leafnode.nl/news/also-coming-in-v2022-02-responsive-layouts-in-qt-qml/
[3]: /s/blog/Whats_coming_in_leaf_node_monitoring_v2022_02.html
[4]: /s/inc/img/leafnode-resizeable.gif
[5]: https://www.leafnode.nl/news/whats-coming-in-the-next-version-of-leaf-node-monitoring/
[6]: /s/articles/Responsive_Qml_layout_with_scrollbars.html
[7]: /s/tags/all.html
[8]: /s/tags/leaf-node-monitoring.html
[9]: /s/inc/img/leafnode-non-resizable.png
[10]: /s/inc/img/leafnide-tray-icon-menu.png

---

License:
All the text on this website is free as in freedom unless stated otherwise. 
This means you can use it in any way you want, you can copy it, change it 
the way you like and republish it, as long as you release the (modified) 
content under the same license to give others the same freedoms you've got 
and place my name and a link to this site with the article as source.

This site uses Google Analytics for statistics and Google Adwords for 
advertisements. You are tracked and Google knows everything about you. 
Use an adblocker like ublock-origin if you don't want it.

All the code on this website is licensed under the GNU GPL v3 license 
unless already licensed under a license which does not allows this form 
of licensing or if another license is stated on that page / in that software:

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.

Just to be clear, the information on this website is for meant for educational 
purposes and you use it at your own risk. I do not take responsibility if you 
screw something up. Use common sense, do not 'rm -rf /' as root for example. 
If you have any questions then do not hesitate to contact me.

See https://raymii.org/s/static/About.html for details.