Le premier site francophone dédié au développement Pocket PC

Comment gérer une signature avec eVB ?

Vous pouvez télécharger les sources eVB de cet article ici

La signature, un classique...

Dans le cadre de mon travail (je suis directeur du développement mobilité dans une société Chambérienne) je suis tous les jours en contact avec des cahiers des charges d'applications Pocket PC. La gestion de la signature client est une demande qui revient au moins 30% du temps, autant dire que c'est un sujet important.

La signature, il faut la gérer

La saisie de la signature n'est qu'une partie du problème. En effet, il faut pouvoir la stocker (de préférence dans une base de données), la récupérer pour l'afficher sur le Pocket PC, mais aussi, sur le PC car 9 fois sur 10 le PC et le Pocket PC sont synchronisés (quelle que soit la manière) et les données de la signature migrent du Pocket PC vers le PC où des traitements complémentaires peuvent être réalisés (impression papier entre autres).

Celà signifie que l'on doit disposer d'une méthode qui fonctionne aussi bien sur Pocket PC que sur PC, et là les choses se compliquent. Il existe bien un composant gratuit "signature" (voir article sur ce sujet) mais il se borne à gérer la signature sur le Pocket PC et pas plus loin, donc il ne répond (dans la plus part des cas) qu'à la moitié du cahier des charges.

On est jamais aussi bien servi que par soi-même, non ?

Je vous propose aujourd'hui du code qui fonctionnera avec eVB. Le code en lui même n'étant pas très compliqué, les développeurs PC utilisant VB ou d'autres langages n'auront normalement aucun mal à l'adapter.

Etape 1 : stocker les infos de la signature

Pour que la signature puisse être facilement stockée dans un champ de base de données, il faut qu'elle soit sous un format simple. La chaine de caractères est le plus simple à manipuler. Nous devons coder 2 types d'informations : Les coordonnées du début d'un tracé Les coordonnées du tracé proprement dit Chaque caractère de la chaine peut avoir une valeur comprise entre 0 et 255, on peut donc, sur ce principe enregistrer des coordonnées comprises entre 0 et 255 maxi. Comme l'écran des Pocket PC fait 240x320 pixels on peut raisonnablement dire que nous ne dépasserons pas une zone de saisie de 255x255. Malheureusement ce n'est pas si simple. Nous devons trouver le moyen de coder aussi le fait qu'un point est un début de tracé ou non. Nous allons utiliser une astuce très souvent utilisée en développement qui consiste à indiquer cette information au niveau binaire.

Petit rappel sur les opérations logiques binaires

Chaque caractère est codé sur 8 bits (0 à 255). Le caractère n°0 a donc comme valeur binaire 00000000 (sur 8 bits donc) et le caractère N°255 a comme valeur binaire 11111111 (toujours sur 8 bits).

Nous allons utiliser le dernier bit (celui le plus à gauche) pour indiquer si le point est un début de tracé (le bit sera activé, à 1 donc). Ainsi, si le point X a pour valeur 8 et qu'il est un début de tracé il sera codé 10001000 (car 8 est codé en binaire 00001000 et on active le dernier bit).

Pour "lever" un bit avec eVB il faut utiliser l'opérateur logique OR (voir dans le code eVB comment OR est mis en oeuvre).

Pour vérifier qu'un bit particulier est "levé" il faut utiliser l'opérateur logique AND (voir aussi dans le code son mode d'utilisation).

Cette méthode (très pratique et simple à mettre en oeuvre) pose un problème. Comme on utilise le dernier bit pour indiquer une information, il ne nous reste que 7 bits pour stocker la valeur réelle de la coordonnée ce qui réduit la taille de notre zone de signature à 255x127 ou 127x255 suivant quelle coordonnée portera l'information sur son 8ème bit. Pas cool...

Heureusement il existe une astuce qui consite à diviser par 2 la valeur de la coordonnée qui porte l'information lorsqu'on stocke la valeur et à multiplier cette même valeur par 2 lorsqu'on l'utilise, on se retrouve ainsi avec une zone de saisie de signature de 255x255

Le stockage proprement dit

Si on applique cette méthode, on génère 2 caractères à chaque point. Les points caractérisant un début de tracé (l'utilisateur pose le stylet sur la zone, événement MouseDown de eVB) ont leur le dernier bit du Y qui est "levé". Notre signature, au fur et à mesure qu'elle est tracée est stockée dans une chaine de caractères

Etape 2 : Choisir le contrôle qui va bien

Ce n'est pas très difficile de choisir le contrôle qui sera utilisé pour recueillir et afficher le tracé de la signature. Le contrôle PictureBox est le seul (en standard) à fournir les méthodes de dessin et les événements de récupération des mouvements du stylet nécessaires.

Le système de coordonnées du PictureBox doit être IMPERATIVEMENT de type PIXEL (ScaleMode = VbPixels) sinon nous allons récupérer des Twips qui ne sont pas du tout adpatés à notre système de mémorisation.

Etape 3: Répondre aux événements clés

Pour récupérer les informations de déplacement du stylet nous devons répondre aux événements MouseDown et MouveMouve du contrôle PictureBox :

Code de l'événement MouveDown

Lorsque l'utilisateur pose le stylet sur le PictureBox, il faut réagir et traiter ceci comme le début d'un tracé. On réagit grâce à l'événement MouseDown.

Important : on doit utiliser 2 variables globales (au moins globales à la fenêtre qui "porte" le PictureBox) qui mémorisent d'un coup sur l'autre les coordonnées du style sur le PictureBox. Ces variables sont oX et oY de type Single. On utilise aussi une variable temporaire qui est chargée de stocker la signature sous la forme d'une chaine, c'est la variable wBuffer de type String. Ces 3 variables sont utilisées dans le code suivant.

Private Sub PictureBox1_MouseDown(ByVal Button As Long, _ 
                                  ByVal Shift As Long, _ 
                                  ByVal x As Double, _ 
                                  ByVal y As Double)           

If Button = 1 Then              
 
  If x > PictureBox1.ScaleWidth Then
   x = PictureBox1.ScaleWidth
  ElseIf x < 0 Then
   x = 0
  End If
  If y > PictureBox1.ScaleHeight Then
   y = PictureBox1.ScaleHeight
  ElseIf y < 0 Then
   y = 0
  End If
               
 oX = CInt(x)
 oY = CInt(y)
               
  wBuffer = wBuffer & Chr((oY \ 2) + 128) & Chr(oX)
               
 End If

End Sub

Code de l'événement MouseMove

Private Sub PictureBox1_MouseMove(ByVal Button As Long, _ 
                                  ByVal Shift As Long, _ 
                                  ByVal x As Double, _ 
                                  ByVal y As Double)            
  If Button = 1 Then
             
   If x > PictureBox1.ScaleWidth Then
    x = PictureBox1.ScaleWidth
   ElseIf x < 0 Then
    x = 0
  End If
               
  If y > PictureBox1.ScaleHeight Then
   y = PictureBox1.ScaleHeight
  ElseIf y < 0 Then
   y = 0
  End If
               
  Call PictureBox1.DrawLine(oX, oY, x, y)
  Call PictureBox1.Refresh
               
  oX = CInt(x)
  oY = CInt(y)
  wBuffer = wBuffer & Chr(y \ 2) & Chr(x)
  
 End If

End Sub

Avec le code de l'événement MouseDown et celui de l'événement MouseMove on arrive à stocker les coordonnées des points formant la signature.

Etape 4: Afficher la signature mémorisée dans la chaine

Le code d'affichage parcourt la chaine contenant les coordonnées de la signature à afficher et dessine dans le PictureBox :

Private Sub AfficherSignature()            


 Dim x As Integer
 Dim y As Integer
 Dim oX As Integer
 Dim oY As Integer
 Dim i As Integer
            
 Rem On efface la zone d'affichage
 Call PictureBox1.Cls
 Call PictureBox1.Refresh
               
 'On parcourt la chaine en traitant les caractères 2 par 2
 For i = 1 To Len(wBuffer) - 1 Step 2
               
  Rem On récupère X et Y 
  y = Asc(Mid(wBuffer, i, 1))
  x = Asc(Mid(wBuffer, i + 1, 1))
               
  Rem Si le bit de début de tracé est "levé" 
  Rem le point est un début de tracé (l'origine du point suivant)
  If (y And 128) = 128 Then
   oX = x
   oY = (y - 128) * 2
  Else
   Call PictureBox1.DrawLine(oX, oY, x, y * 2)
   Call PictureBox1.Refresh
   oX = x
   oY = y * 2
  End If
               
 Next

End Sub

Le stockage

Comme la signature est stockée dans une chaine de caractères, il est très simple de l'enregistrer dans un champ texte d'une base de données, dans la base de registre, ou tout simplement dans un fichier texte. On a le choix !

Conclusion : Y a plus qu'à !

Il est maintenant très simple d'inclure dans le code eVB la gestion d'une signature. Copier/Coller et hop c'est fait ! Dans le code d'affichage de la signature il y a la ligne suivante : Call PictureBox1.DrawLine(oX, oY, x, y * 2) Call PictureBox1.Refresh Le "PictureBox1.Refresh" permet d'afficher la signature avec un effet d'animation car on met à jour le PictureBox à chaque nouveau tracé. Pour enlever cet effet il suffit d'enlever cette ligne. Voilà, vous n'avez plus maintenant qu'à adapter ce code à votre langage PC préféré pour disposer un format de stockage de signature utilisable sur Pocket PC et PC. Sympa non ?

N'oubliez pas que les forums sont à votre disposition si vous rencontrez des problèmes avec cet article.

Stéphane Sibué