Journal TapTempo en Slint

Bonjour à tous,

Ce journal s'inscrit dans la série des journaux TapTempo. Je vous présente : TapTempo en Slint !

Pour ceux qui ne connaissent pas encore Slint, c’est un toolkit pour créer des interfaces graphiques natives. Je suis l'un des développeurs, et j’en ai déjà parlé dans ce journal et cette dépêche.

Dans ce portage de TapTempo, j'ai décidé de tout coder directement en Slint. Normalement, Slint sert principalement à construire l'interface utilisateur (UI), et la logique du programme est écrite dans le langage de programmation.
Mais pour ce journal, j'ai intégré toute la logique directement en Slint.

Pour réaliser cela, j'ai détourné la fonction animation-tick() pour mesurer le temps. Ce n’est pas la méthode la plus orthodoxe, je vous l'accorde, mais… ça fonctionne !

Voici le code :

import { Slider, HorizontalBox } from "std-widgets.slint";
export component TapTempo inherits Window {

    property <int> touch-count;
    property <[duration]> last_samples: [0ms, 0ms, 0ms, 0ms, 0ms, 0ms, 0ms, 0ms, 0ms, 0ms];
    property <int> sample-size: 5;
    property <int> bpm;

    preferred-height: 200px;
    preferred-width: 600px;
    forward-focus: fs;

    VerticalLayout {
        padding: 0.5rem;
        text := Text {
            text: @tr("Hit enter key for each beat");
            wrap: word-wrap;
            horizontal-alignment: left;
            vertical-alignment: center;
            font-size: 2rem;
            vertical-stretch: 1;
        }

        HorizontalBox {
            spacing: 1rem;
            Text {
                text: @tr("Sample size: {}", sample-size);
                vertical-alignment: center;
            }

            Slider {
                value: sample-size;
                minimum: 1;
                maximum: last_samples.length;
                changed(value) => {
                    touch-count = 0;
                    text.text = @tr("Hit enter key for each beat");
                    sample-size = value;
                    fs.focus();
                }
            }
        }
    }

    fs := FocusScope {
        key-pressed(e) => {
            if (e.text == "\n" || e.text == " ") {
                if (touch-count == 0) {
                    text.text = @tr("Hit enter key one more time to start bpm computation...");
                } else {
                    if (touch-count < sample-size) {
                        bpm = 60s / ((animation-tick() - last_samples[0]) / touch-count);
                    } else {
                        bpm = 60s / ((animation-tick() - last_samples[mod(touch-count, sample-size)]) / sample-size);
                    }
                    text.text = @tr("Tempo: {} bpm", bpm);
                }
                last_samples[mod(touch-count, sample-size)] = animation-tick();
                touch-count += 1;
                return accept;
            } else if (e.text == "q") {
                touch-count = 0;
                bpm = 0;
                text.text = @tr("Bye Bye!");
                return accept;
            }
            reject
        }
    }
}

Et si vous voulez essayer, vous pouvez le faire directement en ligne grâce à SlintPad, notre éditeur/preview en ligne.
Lien vers SlintPad