September 23, 2024 by Slint Team

Slint 1.8 Released with New Property Changed Callbacks, Timer, and Swipe GestureBlog RSS


Slint is a native GUI toolkit written in Rust, with APIs in Rust, C++, Python, and JavaScript, designed for fast and responsive applications on all platforms.
Today, we've released 1.8! This version brings several much requested features. Property change callbacks. Timer and SwipeGestureHandler elements. Improvements to the live-preview and vscode extension. C++ templates for STM32 embedded boards. Math gains postfix support and atan2.

Property Change Callbacks

Property bindings are part of how you can achieve a lot with so little code in Slint. Then many elements have callbacks to help manage side effects. Take TextEdit and the edited call back to let you react to the changing text the user is being entered. However you quickly find places where your UI is updating and changing, but unlike TextEdit there is no callback to use. Enter Property Change Callbacks. They can help you make your interface even more dynamic without having to write extra business side logic.
Let's imagine TextEdit didn't have an edited callback. You can create the same behavior as follows:

my-edit := TextEdit {
    changed text => { t.text = self.text; }
}
t := Text {}

This callback is triggered when the text property of the TextEdit changes, updating the text in the second Text element accordingly.
They also can be used to help you debug your bindings.

my-edit := TextEdit {
    changed text => { debug(self.text); }
}

And now see a log of every time the text changes. With great power, comes great responsibility. In most cases try to rely on declarative property bindings, which are more efficient. So be careful not to introduce unintended performance issues or loops, especially if changes cascade into other properties. For more detailed information about the caveats, check out Olivier's recent blog post.

Timer Element

Chances are at some point your user interface needs to trigger a callback at a regular interval. Now you can easily do this with the Timer element.

Timer {
    interval: 1s;
    triggered() => { debug("Tick"); }
}

Be sure to bind to the Timer's running property to stop the timer when you don't need it anymore. Your battery and CPU will thank you.

SwipeGestureHandler Element

For those needing advanced interactions we are pleased to be able to take our gesture system to the next level with the new SwipeGestureHandler element. As the name suggests it allows your UI to recognize and respond to interactive swipe gestures.

sgh := SwipeGestureHandler {
    handle-swipe-left: true;
    handle-swipe-right: true;
    swiped => { /* the swipe is finished */ }
}
Rectangle {
   x: sgh.swiping ? sgh.current-position.x - sgh.pressed-position.x : 0px;
}

Enhanced Live Preview

Nigel Breslaw

We've again improved the UX of the live-preview and enhanced the property editors.

VSCode New Project Template

If you have ever wanted to quickly create a new Slint project to try out an idea it's now easier than ever. Hit CTRL+shift+P (CMD+shift+P on Mac) and "Slint: Create New Project from Template" is a new option. It will guide you through selecting a template to fit the language of your choice.

Easier MCU Development

Are you targeting STMicroelectronics' STM32 platform with C++? In this release we've included two brand new templates that make it very easy to get started on the STM32H747I-DISCO and the STM32H735G-DK boards:
     1. Download the template archive from the table in our documentation.
     2. Open the extracted folder in VS Code.
     3. Press F5 to cross-compile, flash, and debug in one go. We're working on adding templates for additional boards in the future.
For Espressif's ESP-IDF platform with C++, we've updated our ESP-IDF component to use pre-compiled Slint binaries. This speeds up compilation time and eliminates the need to install Rust.

Math Gains Postfix Support

A subtle but profound change to the language. Traditional syntax:
Math.max(20, Math.abs(value.x))

New postfix syntax:
value.x.abs().max(20)

The new syntax improves readability by making the transformation steps more explicit. It works well for many operations but has limitations:
Effective for simple transformations (e.g., abs, max) Less intuitive for operations like clamp or atan2.

pos.y.atan2(pos.x) // Less clear than atan2(pos.y, pos.x)

So for now you cannot use postfix for all functions in the Math namespace. We may revisit these cases later, so give them a try and let us know your thoughts.

Math Gains atan2()

While creating the new dial example our new designer, Nigel, complained it would have been easier with Math.atan2. So we suggested he add it himself. It's his first time writing any Rust, so he insisted we mention that in the release notes. Time will tell if this leads to fewer complaints or more Rust commits!

Finally...

To start using Slint 1.8, you can upgrade by following the instructions attached to the GitHub release.

With this release, we hope to make Slint even more powerful and user-friendly for developers building modern, performant UIs. Be sure to check out the full ChangeLog for more details. As always, we welcome your feedback and contributions. In particular, thanks to the following contributors!
@crai0
@Enyium
@DataTriny
@madsmtm
@otiv-wannes-vanleemput
@wetheredg
@sigmaSd
@danutsu
@asuper0
@dragonrider7225
@tiaoxizhan
@algovoid
@0x6e
@Justyna-JustCode
@MiKom
@botent
@microhobby

Happy coding!


Comments

Slint is a Rust-based toolkit for creating reactive and fluent user interfaces across a range of targets, from embedded devices with limited resources to powerful mobile devices and desktop machines. Supporting Android, Windows, Mac, Linux, and bare-metal systems, Slint features an easy-to-learn domain-specific language (DSL) that compiles into native code, optimizing for the target device's capabilities. It facilitates collaboration between designers and developers on shared projects and supports business logic development in Rust, C++, JavaScript, or Python.