Skip to main content

Raymii.org Raymii.org Logo

Quis custodiet ipsos custodes?
Home | About | All pages | Cluster Status | RSS Feed

Responsive Qt/QML layout coming to Leaf Node Monitoring

Published: 15-08-2022 21:00 | Author: Remy van Elst | Text only version of this article


❗ This post is over one year old. It may no longer be up to date. Opinions may have changed.


Leaf Node Monitoring 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.

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

Responsive QML Layouting

A quick update, showcasing another new feature for the upcoming version 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

(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

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. 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

Just because I missed that feature myself.

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

Tags: android , blog , business , c++ , design , gpl , leaf-node-monitoring , qt