Dessin et peinture dans Wisej.NET

Dessin et peinture dans Wisej.NET s’ouvre sur une décision qui précède tout code de dessin : où les pixels sont réellement produits. Dans ce module, une seule mesure de télémétrie est affichée sur quatre surfaces différentes de Visual Operations Studio, pour que vous puissiez les comparer côte à côte.

Demander à une application de dessiner un nombre, ce n’est pas un besoin mais quatre. Un cadran sur un tableau de bord, un petit indicateur dans une cellule de grille, un nœud sur une carte de topologie et une image écrite dans un fichier de rapport présentent tous la même valeur, et pourtant chacun est produit ailleurs et chacun envoie autre chose au navigateur.

Un gestionnaire Paint s’exécute sur le serveur, et l’image terminée voyage jusqu’au navigateur. Le dessin de cellule fait le même travail, confiné aux limites d’une seule cellule de grille. Un Canvas se comporte autrement : il envoie des commandes de dessin que le navigateur exécute lui-même. Le rendu hors écran produit des octets d’image qu’aucun contrôle n’affiche jamais.

Dans la page, les quatre surfaces lisent un même champ d’échantillon de télémétrie, donc aucune ne possède la valeur. Un seul bouton modifie ce champ et rafraîchit chaque surface à sa manière : le label et la barre de progression se contentent de le lire, le panneau dessiné est invalidé pour que le serveur le redessine, la méthode de scène du Canvas s’exécute à nouveau, et une nouvelle image hors écran est produite.

Le dessin personnalisé se trouve au bout d’une échelle de décision, pas à son début. Cherchez d’abord un contrôle standard, puis du balisage ordinaire, et seulement ensuite un gestionnaire Paint, une cellule dessinée ou un Canvas. Le rendu hors écran vient après, et une boucle de dessin qui tourne dans le navigateur est réservée aux cas où le taux de rafraîchissement compte vraiment.

Redessiner un Canvas, c’est l’effacer et reconstruire toute la scène depuis le modèle, car le serveur ne peut pas compter sur la copie que détient le navigateur. Le moteur de rendu hors écran est à l’extrême opposé : un Bitmap, et une surface Graphics créée par-dessus, suffisent à produire une image sans qu’aucun contrôle n’intervienne.

Lancez la page et appuyez sur New reading. Le même nombre apparaît d’un coup aux quatre endroits, ce qui donne l’impression d’une seule opération. Il n’en est rien. Chaque surface vient de mettre sur le réseau quelque chose de très différent pour y parvenir, et c’est de cette différence que parle vraiment ce module.

Redimensionnez maintenant la fenêtre du navigateur. Trois des surfaces reviennent d’elles-mêmes, parce que le serveur possède toujours ce qu’elles affichent. Le Canvas revient vide, et le reste tant que la méthode de redessin ne le reconstruit pas depuis l’échantillon de télémétrie conservé par le serveur. Cette asymétrie est la conséquence pratique de la frontière.

Dans le premier lab, vous construisez cette page vous-même : un modèle derrière quatre surfaces, un seul bouton qui les rafraîchit toutes, et une note courte qui consigne ce qui traverse le réseau pour chaque surface et quels visuels survivent à un redimensionnement.

Ce module construit un contrôle dessiné dans les règles. La jauge de télémétrie dessine un anneau, ses zones de seuil, une aiguille et une valeur numérique, et chacune de ses propriétés publiques borne ce qu’on lui donne avant de décider s’il faut seulement redessiner.

Votre code de dessin s’exécute sur le serveur, et le navigateur reçoit l’image produite. C’est pratique, et c’est aussi pourquoi un gestionnaire recopié dans six panneaux coûte cher : six images sont produites, six jeux d’objets de dessin sont créés, et des redessins surviennent que personne n’a demandés.

Alors mesurez d’abord, dessinez ensuite. L’assistant de géométrie prend un rectangle et renvoie les limites de l’anneau, les angles de balayage, les points de l’aiguille et le rectangle où se pose le texte. C’est de l’arithmétique ordinaire, sans aucun dessin, ce qui veut dire que vous pouvez tester la partie difficile sans jamais créer de contrôle.

Chaque accesseur d’écriture suit la même recette : bornez la valeur entrante, comparez-la à l’actuelle, sortez immédiatement si rien n’a changé, affectez-la, puis appelez Invalidate exactement une fois. La même ligne de code rafraîchit la description accessible, pour que la mesure reste disponible sous forme de texte et pas seulement de pixels.

Le gestionnaire se protège d’un rectangle de découpe de taille nulle, appelle une fois l’étape de mesure, puis dessine. Cinq déclarations using couvrent les cinq objets que ce code crée et possède donc. La surface Graphics qu’on vous remet dans les arguments de l’événement n’en fait pas partie, et la libérer serait une erreur.

La propriété des objets règle la plupart des cas délicats. Les brosses et stylos du framework sont partagés et doivent être laissés tranquilles, un stylo statique à vous devient dangereux dès que plusieurs sessions dessinent ensemble, et un appel à la base de données, un chargement de police ou un minuteur n’ont rien à faire dans un chemin de dessin.

Regardez-le tourner. Une mesure bouge, donc une jauge s’invalide et une image est produite. Les deux autres accesseurs ont comparé leurs valeurs et sont sortis tôt, et c’est tout l’intérêt. Un redimensionnement reconstruit ensuite chaque image à partir du nouveau rectangle de découpe, à la nouvelle taille.

Vient ensuite le budget : le temps processeur sur le serveur, la mémoire du bitmap temporaire, et les octets envoyés à chaque redessin. Quand ces chiffres ne justifient plus les pixels, un contrôle thématisé est la meilleure réponse. Dans les deux cas, les valeurs elles-mêmes doivent rester lisibles sous forme de texte.

Dans le deuxième lab, vous construisez la jauge et son assistant de géométrie pur, vous protégez la taille nulle et la plage inversée, vous publiez la mesure par la description accessible, et vous consignez le coût d’un redessin dans vos propres notes.

Dans ce module, c’est la grille qui dessine. Visual Operations Studio affiche désormais mille machines, et deux de ses colonnes doivent se lire d’un coup d’œil plutôt qu’un nombre à la fois.

Il y a trois façons d’y arriver. Un nombre lié que personne ne parcourt est honnête mais inutile. Un contrôle jauge dans chaque ligne est lisible et ruineux, car cela fait mille contrôles côté serveur vivants dans une seule session. La troisième option est une cellule qui se dessine elle-même, et seulement tant qu’elle est réellement visible.

Le dessin utilisateur vient toujours avant le dessin de cellule : une cellule ou une colonne entière passe en mode UserPaint, et c’est seulement alors que la grille lève son événement de dessin de cellule pour elle. Les arguments de l’événement dérivent des arguments de dessin ordinaires, donc ils portent la surface Graphics et le rectangle de découpe, et ils ajoutent les index de ligne et de colonne dont vous avez besoin pour l’aiguillage.

Une différence compte plus que les autres. Les arguments d’événement de Wisej.NET ne portent aucun assistant pour dessiner le fond ou le contenu, donc votre gestionnaire répond de tout ce qui apparaît dans cette cellule. Recopier tel quel un exemple Windows Forms ne fonctionnera pas. Abonnez-vous une seule fois sur la grille et aiguillez sur les deux colonnes qui vous appartiennent.

Protégez-vous avant de dessiner. Un index de ligne négatif désigne un en-tête plutôt qu’une ligne de données, et une colonne qui ne vous appartient pas provoque un retour immédiat. Seulement ensuite, prenez la géométrie dans le rectangle de découpe et lisez les valeurs voulues, en une seule étape, depuis l’objet auquel la ligne est déjà liée.

À l’exécution, six lignes visibles produisent douze appels au gestionnaire : une barre colorée par seuil pour la santé, et un petit graphique en ligne pour la tendance. La ligne sélectionnée est dessinée avec ses propres couleurs, car une cellule dessinée qui ignore la sélection paraît cassée dès que quelqu’un clique.

Faites maintenant défiler les mille lignes. Chaque cellule nouvellement visible rappelle le gestionnaire, ce qui en fait un chemin chaud. C’est pour cela qu’il n’y a dedans aucun accès à un fichier ou à une base de données, aucune police ni image créée par cellule, et que la lecture des valeurs d’une ligne doit rester une étape à temps constant.

Faites ensuite la comparaison honnête. Le balisage de cellule l’emporte pour le texte, les icônes et l’accessibilité. Le dessin l’emporte pour la géométrie que le balisage ne sait pas exprimer. Et un vrai type de cellule l’emporte dès que l’utilisateur doit interagir avec la cellule plutôt que seulement la lire.

Dans le troisième lab, vous construisez deux colonnes dessinées derrière un seul gestionnaire protégé, vous lisez les valeurs de chaque ligne en une étape, puis vous refaites le même indicateur d’état en cellule balisée et vous notez lequel des deux vous livreriez vraiment.

Visual Operations Studio a maintenant besoin d’une vraie surface de dessin. Le Canvas de Wisej.NET vous donne le contexte de dessin bidimensionnel du navigateur depuis C#, avec une condition attachée : il ne retient rien pour vous.

Paint et le dessin de cellule envoient tous deux une image terminée, et le serveur sait ce qu’elle contient. Un Canvas envoie plutôt des commandes de dessin que le navigateur exécute. Rien n’est retenu sur le serveur, et un redimensionnement peut effacer le résultat, donc la scène doit exister quelque part que vous contrôlez.

Traduire un exemple du navigateur demande trois passes. Ajustez la casse, car les membres sont ceux que vous connaissez, écrits à la convention C#. Remplacez les chaînes de style par des types .NET comme les couleurs et les polices. Convertissez les angles des radians vers les degrés. Puis vérifiez que le membre existe réellement, au lieu de supposer que tout ce qui vient du navigateur a été repris.

L’événement Redraw appelle exactement une méthode. Cette méthode commence par effacer toute la surface, et chaque forme ouvre un nouveau chemin avant de dessiner. Sautez cette étape et un tracé ultérieur traînera le contour précédent avec lui, ce qui est l’une des façons les plus courantes de rater un exemple traduit.

Le texte est positionné avec les propriétés d’alignement et de ligne de base plutôt que mesuré, car l’appel de mesure du navigateur ne fait pas partie de la surface documentée. Les dégradés sont des objets à part entière : vous en construisez un, puis vous l’affectez comme style de remplissage, au lieu de le décrire en ligne à chaque fois.

Chaque transformation se place entre un Save et un Restore. La région de découpe aussi, la transparence aussi, et le motif de pointillés et l’ombre également, car tout cela relève de l’état du Canvas et non des arguments d’un appel. Les encadrer empêche une section de déborder sur la suivante.

Cinq sections sont émises ensemble dans une seule mise à jour, car la mise à jour en direct reste désactivée par défaut. Ne l’activez que lorsqu’une longue opération côté serveur doit montrer sa progression au fil de son travail. Ce n’est pas un moyen d’animer, et une requête par image est la mauvaise architecture.

Deux échecs méritent d’être vus exprès. Redimensionnez la surface et elle devient vide jusqu’à ce que le redessin la reconstruise depuis le modèle. Enlevez un seul appel à Restore et tout ce qui est dessiné ensuite dérive hors de sa place. Aucun des deux n’apparaît dans le concepteur, et c’est précisément pour cela qu’ils coûtent si cher en temps.

Dans le quatrième lab, vous dessinez tout le bac à sable depuis une seule méthode appelée par Redraw, vous encadrez chaque transformation, vous ajoutez un clip, une section de transparence, des pointillés et une ombre, et vous portez un exemple du navigateur mesuré en radians vers les degrés qu’attend l’appel de rotation de Wisej.NET.

Le Canvas oublie, et le modèle ne doit pas. Dans ce module, le bac à sable du module précédent devient un éditeur de topologie avec sélection, glisser, panoramique et zoom, et chacun de ces gestes doit survivre à un redessin.

Un rectangle dans le navigateur n’est pas une pompe. Le sens vit dans l’objet scène sur le serveur : les nœuds, les arêtes, celui qui est sélectionné, l’endroit où se trouve la fenêtre d’affichage. La saisie modifie cet état, et une seule méthode de rendu transforme l’état en appels de dessin. Le moteur de rendu ne décide jamais rien.

Le rendu convertit les coordonnées monde en coordonnées écran en appliquant le zoom puis le décalage du panoramique. Le hit testing doit exécuter cette conversion à l’envers, en ramenant la position du pointeur en coordonnées monde avant de la comparer à un nœud. Le Canvas n’offre aucun test d’appartenance à un chemin sur lequel s’appuyer, donc cette arithmétique est la vôtre.

Partez du modèle. Les nœuds et les arêtes portent des identifiants stables et leur propre géométrie, et la scène qui les contient vit par session, jamais dans un champ statique modifiable que tous les utilisateurs partageraient. Le hit testing parcourt la liste à l’envers, pour que le nœud dessiné en dernier, et donc au-dessus, soit celui que l’utilisateur obtient.

Les trois gestionnaires de pointeur font très peu. L’appui convertit et fait le hit testing, le déplacement fait glisser la sélection ou déplace la fenêtre d’affichage, le relâchement termine le geste. Chacun modifie l’état puis appelle l’unique méthode de rendu. L’événement Redraw appelle cette même méthode, et c’est pourquoi un redimensionnement se contente de reconstruire la scène.

Quand le redessin coûte trop cher, descendez une échelle : moins de primitives d’abord, puis sautez ce qui est hors écran, puis simplifiez la géométrie, puis mettez en cache les couches qui changent rarement. Déplacer la boucle dans le navigateur est la dernière étape, pas la première, et la mise à jour en direct reste désactivée pour le rendu principal.

Dans le navigateur, le clic est converti en coordonnées monde, trouve la deuxième pompe, la marque comme sélectionnée et déclenche le rendu. Regardez le compteur de requêtes grimper pendant que vous faites glisser. Ce nombre, c’est ce que coûte vraiment un glisser côté serveur, et c’est la mesure qui vous dit quand vous arrêter.

Zoomez autour du pointeur et la sélection tombe toujours sur le bon nœud, car la conversion inverse tient compte du nouveau zoom. Les nœuds hors du rectangle visible sont entièrement éliminés. Et la touche Tab avec les touches fléchées atteint chaque nœud, donc l’éditeur n’exige pas de souris pour être utilisable.

Dans le cinquième lab, vous construisez la scène par session, faites le hit testing en coordonnées monde, gardez les trois gestionnaires qui appellent une seule méthode de rendu, éliminez ce qui est hors écran, ajoutez le chemin clavier, et consignez le point où vous déplaceriez l’interaction dans le navigateur.

Ce module produit un fichier plutôt qu’un écran. Les équipes d’exploitation veulent la même topologie sous forme d’image qu’elles peuvent conserver, générée sur un serveur qui n’a pas, en dessous, de sous-système graphique au sens traditionnel.

Aucune des trois surfaces précédentes ne sait faire cela, car chacune exige un contrôle vivant et une session vivante. La bibliothèque évidente est écartée elle aussi : Microsoft a rendu son paquet de dessin classique spécifique à Windows à partir de .NET 6, et l’interrupteur qui réactivait les autres systèmes a été retiré dans .NET 7.

Trois noms désignent une seule chose, et les garder bien distincts vous épargne un après-midi. Le paquet que vous référencez est la distribution managée, l’assembly sur le disque est la bibliothèque de dessin managée, et l’espace de noms qu’utilise votre code est le nom familier. C’est un moteur de rendu managé, pas une enveloppe autour de la couche graphique de la plateforme.

Le moteur de rendu prend une scène et une taille de sortie, et renvoie des octets. Il crée un Bitmap, obtient une surface Graphics par-dessus, dessine les arêtes, les nœuds et les libellés avec des stylos, des brosses et un chemin, puis enregistre le résultat dans un flux mémoire au format PNG. Aucun contrôle n’y apparaît nulle part.

La matrice des plateformes vaut d’être mémorisée. La mesure des polices est managée partout. Le dessin est managé sur .NET moderne, sur tous les systèmes d’exploitation, et retombe sur la couche de la plateforme sur le .NET Framework et dans la compilation du concepteur. N’épinglez jamais un déploiement multiplateforme à un framework cible réservé à Windows pour faire disparaître un problème de dessin.

Deux décisions déterminent ensuite si tout cela survit au déploiement. Résolvez la police par une chaîne qui se termine sur quelque chose que vous livrez vous-même, plutôt que de supposer qu’une police existe sur l’hôte. Et gardez exactement une seule implémentation de dessin dans le graphe de références, car deux implémentations qui résolvent les mêmes noms de types sont un problème que vous n’aimerez pas diagnostiquer.

Lancez-le. L’export fait le rendu hors écran en trente-quatre millisecondes environ, sans aucun contrôle, et les octets sont remis au navigateur en téléchargement. Bornez tout de même la taille demandée : un bitmap de quatre mille pixels de large sur trois mille de haut coûte à peu près quarante-huit mégaoctets avant même que vous ayez dessiné quoi que ce soit.

Passons au conteneur. Le même test passe sous Linux, rien n’est lié à la bibliothèque graphique native de la plateforme, et les deux images sortent identiques octet pour octet, car la police a été livrée avec l’application au lieu d’être empruntée à l’hôte.

Dans le sixième lab, vous construisez le moteur de rendu sans contrôle, vous lui donnez une chaîne de repli de polices, vous téléchargez l’image depuis la page, vous vérifiez les références à la recherche d’une seconde implémentation de dessin, et vous consignez vos preuves Windows et Linux ainsi que ce qu’elles impliquent pour les cibles mobiles et bureau.

Voici le projet final. Six modules ont construit quatre surfaces de rendu dans Visual Operations Studio, chacune correcte de son côté. Les livrer, c’est les faire s’accorder entre elles, et le prouver.

Pour l’instant, chaque surface garde ses propres seuils, ses propres couleurs et sa propre idée de l’endroit où vont les choses. Déplacez la ligne d’avertissement une seule fois et l’image exportée contredit discrètement l’écran depuis lequel elle a été générée. Ce n’est pas un défaut de rendu ; ce sont quatre copies de la même règle métier.

Le remède tient en trois couches. Un modèle visuel porte l’état sémantique : les valeurs, les statuts, la sélection. Une couche de géométrie transforme cet état et une taille en formes, et c’est de l’arithmétique pure. Puis un moteur de rendu par surface, chacun gardant les primitives qui lui conviennent, car les forcer à passer par une interface commune n’aide personne.

Ensuite, mettez-vous d’accord sur des chiffres avant d’optimiser quoi que ce soit. Un contrôle dessiné devrait rester sous environ cinq millisecondes. Un redessin complet du Canvas se situe entre seize et cinquante millisecondes. Un export a le droit d’être plus lent que les deux, à condition de ne jamais bloquer la session d’un autre utilisateur pendant qu’il travaille.

L’appel de géométrie prend le modèle et une taille et renvoie des formes, et les deux moteurs de rendu l’appellent, donc aucun ne peut dériver. Autour d’eux, un petit assistant de métriques enregistre la durée d’un rendu, la taille de la sortie et le nombre d’objets de scène réellement dessinés. Sans ces trois chiffres, le réglage n’est que devinette.

Dessinez ensuite les mauvais états exprès. Des données vides, une surface sans taille, une plage dont le minimum dépasse le maximum, une police absente : chacun devrait se dégrader vers quelque chose de lisible plutôt que lever une exception. Et un export en échec doit atteindre l’utilisateur sous forme de message, pas d’un vide là où une image était attendue.

Une valeur change et les quatre surfaces la suivent : la jauge dessinée, les cellules dessinées, la topologie du Canvas et l’image exportée. À côté d’elles se trouve un tableau simple qui liste chaque mesure, et c’est lui qui rend l’information accessible à quelqu’un qui ne peut pas du tout utiliser les graphiques.

Enfin, les preuves. La jauge dessinée est passée d’environ onze millisecondes à quatre, l’export d’à peu près trois cent dix millisecondes à cent vingt-huit, et la matrice de tests couvre Windows, Linux, les cibles hybrides et trois navigateurs. Une décision mesurée de ne pas optimiser compte aussi, du moment qu’elle est écrite.

Le dernier lab est le projet final : un modèle derrière les quatre surfaces, un assistant de métriques, une optimisation que vous avez mesurée avant et après, quatre chemins dégradés qui échouent proprement, et les notes qui expliquent l’architecture et la frontière qu’elle respecte.