Spinner d'attente personnalisé - Série de consoles Spectre

Utilisation d'un spinner intégré

Tim commence par un exemple simple. À 0:37, il écrit du code en utilisant AnsiConsole.Status pour afficher un style de spinner connu pendant qu'un travail s'exécute en arrière-plan. Il sélectionne Spinner.Known.Aesthetic mais souligne que Spectre propose de nombreuses options dans la liste Spinner.Known. Tim ajoute une chaîne "Loading" à afficher à côté du spinner pour que l'utilisateur sache ce qui se passe.

À l'intérieur du bloc d'état, Tim insère un Thread.Sleep(10000) - dix secondes - juste pour le test. Cela oblige la console à montrer le spinner en action suffisamment longtemps pour qu'il soit visible. Il explique à 1:23 qu'une fois la tâche terminée, le spinner disparaît automatiquement. Il s'agit du modèle par défaut que Spectre encourage pour afficher l'état ou la progression d'une application console.

S'orienter vers un spinner personnalisé

À 1:41, Tim déclare : "Ok, créons un spinner personnalisé", montrant comment aller au-delà des options intégrées. Il explique qu'il arrive que l'on veuille formater ou styliser son spinner en fonction de son propre projet, des couleurs de sa marque ou même du type de données que l'on traite. En écrivant votre propre classe de spinner, vous contrôlez les cadres, le timing et l'utilisation ou non de caractères Unicode.

Création de la classe Spinner

Tim crée un nouveau fichier nommé TestSpinner.cs. À 2:05, il rend la classe publique et la configure pour qu'elle hérite de la classe abstraite Spinner de Spectre. Il utilise la fonction "implémenter une classe abstraite" de Visual Studio pour générer les membres nécessaires. Il s'agit ici de fournir vos propres valeurs - telles que la vitesse, les cadres et les paramètres Unicode - au lieu d'utiliser les valeurs par défaut.

Tim souligne à 2:18 qu'il s'agit de propriétés de type get-only, ce qui simplifie l'écriture de membres à corps d'expression. Ce format permet à votre définition de spinner d'être compacte et plus facile à maintenir ou à mettre à jour par la suite.

Contrôle de la vitesse par image

À 2:30, Tim définit la propriété de synchronisation à TimeSpan.FromMilliseconds(200). Cela signifie que le spinner se déplacera à une vitesse d'environ cinq images par seconde. Il explique que vous pouvez sélectionner une valeur différente si vous voulez que le spinner tourne plus vite ou plus lentement. L'ajustement de ce paramètre est un moyen facile d'améliorer la sensation de votre animation de chargement en fonction de ce que fait votre commande ou votre processus.

Gestion des caractères Unicode

À 3:00, Tim aborde une question clé : Unicode. Il note que lorsque vous exécutez votre projet dans la console intégrée de Visual Studio, les caractères Unicode peuvent ne pas s'afficher correctement, ce qui entraîne des erreurs ou des symboles manquants. Toutefois, si vous exécutez le même projet dans Windows Terminal ou PowerShell, l'Unicode et les emoji s'affichent généralement correctement. Dans sa démo, il définit la propriété sur false pour éviter ce problème, mais souligne que vous pouvez la définir sur true lorsque votre terminal la prend en charge.

Il est ainsi plus facile d'ajouter à votre application des symboles colorés, des flèches ou même des indicateurs de progression basés sur des emoji. Vous pourriez formater les cadres avec des ✅, 🌧, 🔄, ou tout autre caractère que vous souhaitez pour fournir des informations plus riches.

Définir les cadres

La propriété suivante est la liste de cadres. À 3:34, Tim écrit une fonction arrow qui renvoie un tableau de chaînes. Chaque chaîne correspond à une "image" de la toupie. Dans son exemple, il utilise un grand "O" et plusieurs petits "o" pour simuler le mouvement à travers la ligne.

Il copie et colle l'image de base cinq fois, puis, à 4:12, remplace un "O" à un endroit différent dans chaque image. Cela crée une animation simple : le grand "O" semble se déplacer de gauche à droite, puis revient en boucle au point de départ. Tim note qu'à 4:26, il est possible d'ajouter des images supplémentaires pour inverser le sens, d'ajouter un formatage de couleur (Spectre prend en charge un balisage riche tel que [green]text\N[/\N]), ou d'expérimenter les caractères Unicode si votre console les prend en charge.

Voici le code de la classe TestSpinner de Tim :

using Spectre.Console;

namespaces SpectreDemos;

public class TestSpinner : Spinner
{
    public override TimeSpan Interval => TimeSpan.FromMilliseconds(200);

    public override bool IsUnicode => false;

    public override IReadOnlyList<string> Frames => 
    [
        "Ooooo",
            "oOooo",
            "ooOoo",
            "oooOo",
            "ooooO"
    ]
}

using Spectre.Console;

namespaces SpectreDemos;

public class TestSpinner : Spinner
{
    public override TimeSpan Interval => TimeSpan.FromMilliseconds(200);

    public override bool IsUnicode => false;

    public override IReadOnlyList<string> Frames => 
    [
        "Ooooo",
            "oOooo",
            "ooOoo",
            "oooOo",
            "ooooO"
    ]
}

Mise en œuvre et test du spinner personnalisé

Une fois la classe définie, Tim revient à son programme principal. À 4:42, il remplace Spinner.Known.Aesthetic par new TestSpinner(). C'est tout - aucune autre modification du code n'est nécessaire. Il exécute ensuite l'application à 4:52 pour montrer le nouveau spinner en action.

Cette étape de test est importante. Tim recommande d'exécuter votre projet dans le même terminal que celui qu'utiliseront vos utilisateurs, afin de pouvoir détecter rapidement les problèmes d'encodage, de couleurs ou de timing. Différentes coquilles et polices de caractères peuvent affecter l'apparence de votre spinner.

Ajouter de l'Unicode, des Emojis et de la couleur

Tim explique à 5:00 que rien ne vous empêche d'utiliser des emojis ou des caractères spéciaux comme cadres si vous activez l'Unicode. Vous pouvez créer un compteur météo, une barre de progression verte utilisant le balisage de Spectre, ou tout autre affichage créatif adapté à votre application. Cela est particulièrement utile pour les commandes qui prennent beaucoup de temps à démarrer ou à continuer à fonctionner, car les utilisateurs apprécient un retour d'information visuel clair.

Il note également que la console Spectre simplifie l'ajout de couleurs et de texte formaté à votre spinner. Par exemple, vous pourriez écrire \N[green\N]Loading...\N[/\N] à côté du spinner pour mettre l'accent sur le succès, ou souligner les erreurs avec du texte rouge lorsque cela est nécessaire.

Conseils et paramètres de performance

À 5:19, Tim résume les éléments clés dont vous avez besoin pour un spinner personnalisé :

• Temps : durée d'affichage de chaque image.

• IsUnicode : utilisation ou non d'Unicode/emoji ou de texte brut.

• Cadres : le tableau de chaînes de caractères que vous animez.

Il met en garde contre un trop grand nombre d'images ou une vitesse trop lente, car les utilisateurs risquent de ne jamais voir les dernières images, à moins que votre processus ne soit très long. En sélectionnant les bonnes options ici, vous rendrez votre spinner plus efficace. Ces paramètres facilitent également l'extension de votre projet au fil du temps : vous pouvez ajouter des images ou ajuster la synchronisation sans avoir à réécrire l'ensemble de votre application console.

Conclusion

À 5:38, Tim montre qu'en héritant de la classe Spinner et en fournissant vos propres valeurs, vous pouvez rapidement créer un indicateur de chargement personnalisé pour votre console ou vos outils basés sur PowerShell. Cela vous permet de mieux contrôler les informations et l'impression que vous donnez à vos utilisateurs. À 5:47, il rappelle aux spectateurs que le code source et la documentation se trouvent dans la description de la vidéo afin que vous puissiez l'explorer et l'étendre vous-même.

Conclusion

En suivant la vidéo de Tim Corey, nous avons vu exactement comment mettre en œuvre un spinner de chargement personnalisé pour la console Spectre : hériter de Spinner, fournir une valeur de synchronisation, spécifier la prise en charge Unicode et définir vos cadres. Il vous suffit ensuite de remplacer un spinner connu par votre nouvelle classe pour l'ajouter à votre projet. Tim indique également comment ajouter des caractères Unicode, des emojis et des balises de couleur pour rendre les affichages d'état et de progression de votre application console plus informatifs et plus beaux.

En utilisant les fonctionnalités de Spectre Console, vous pouvez fournir un retour d'information plus clair, trouver et résoudre les problèmes plus rapidement, et créer de belles applications de console que les utilisateurs apprécient.