DGPad a bien progressé pendant ces vacances scolaires, en terme de stabilité, d’interface, et de fonctionnalités. Voici une présentation des nouveautés
DGPad, application autonome pour tablette et webApp pour ordinateur a fait l’objet d’un travail en profondeur de la part de son auteur, tout d’abord en terme de réactivité sous Android, mais aussi d’interface générale. Quelques fonctionnalités bienvenues ont été ajoutées également
1. Les progrès sous Androïd - Nouveau mode d’enregistrement (toute plateforme)
1.1. Prise en compte des tailles réelles d’écran
L’application (et la webApp) fonctionnait moins bien sous Android que sous iOS. Eric Hakenholz a passé du temps sur cette question, en particulier pour accéder aux dimensions physique réelles des écrans (qui ne sont pas accessibles directement en JavaScript en fait).
Désormais, avec n’importe quel appareil Android, lancer l’application donne une taille affichée qui permet d’avoir la barre de propriétés qui correspond exactement à la hauteur du canvas. Tout est ajusté au pixel près quel que soit l’appareil, que ce soit un téléphone ou une tablette.
Désormais, l’application est plus stable que la version webApp sous Androïd. L’utilisation de DGPad nécessite toutefois au minimum Android 4.1.1, inutile d’essayer avec des versions antérieures. Elle a été testée avec succès sur ces appareils :
Et donc même avec des écrans ayant des résolutions non standards (merci à Alain d’avoir les tablettes les plus improbables comme la 480x800).
1.2. Enregistrement et chargement des fichiers (tous OS)
L’enregistrement et le chargement sur et depuis « le cloud » se passe aussi désormais comme attendu sous Androïd.
Pour l’enregistrement local, on dispose désormais d’un enregistrement direct du fichier sur la plateforme dans laquelle on travaille : ordinateur, tablette Androïd. On sait que cela n’apporte rien sous iOS (en attendant iOS8), mais chacun a probablement un gestionnaire de fichier s’il utilise cet environnement.
Voici la nouvelle fenêtre d’exportation dans la version locale :
Cet enregistrement local n’est pour l’instant disponible que dans la webApp. Sera disponible dans les applications lors de la prochaine MAJ.
Dans la version actuelle de DGPad sous Androïd (2.7 du 26 août) utiliser simplement un explorateur de fichiers, comme File Manager ou Es Explorer. Lors de la sélection du fichier .txt , l’explorateur propose de l’ouvrir avec DGPad et le fichier s’ouvre bien avec DGPad.
Sous iOS (DGPad 1.5 du 27 août), utiliser de la même manière l’un quelconque des gestionnaires de fichier (Good Reader, Documentx, InterConneX, ou d’autres plus récents)
2. Le nouveau mode « Consultation »
Ce nouveau mode, même s’il paraît anodin, modifie en profondeur l’expérience utilisateur du logiciel sur tablette tactile. C’est pour cela que, après les progrès importants sous Androïd, nous commençons par lui pour cette présentation.
2.1. Retour sur le fonctionnement de l’interface
Comme on le sait, DGPad est centré sur les objets géométriques plutôt que sur les outils. Cela signifie en particulier que les outils sont infixés aux objets : on sélectionne un objet géométrique, alors les outils disponibles pour cet objet apparaissent dans une palette contextuelle. Dans ses présentations, Alain Busser a cette très belle image de la programmation objet. Il dit que, quand on chatouille un objet géométrique, il se réveille et nous montre ce que l’on peut faire avec lui. On choisit dans sa palette contextuelle l’outil voulu, et on termine ainsi la construction de l’objet géométrique. Ainsi pour construire une droite on crée - ou sélectionne - un point. Une palette propre au point apparait, on choisit l’outil droite et on termine la droite sur le point matérialisé par le lâcher de la tablette (TouchEnd) qui peut être construit à la volée. Pour construire une parallèle à une droite donnée passant par un point donné, on sélectionne la droite, la palette contextuelle propose des outils, on choisit la parallèle et on termine la construction en créant ou en montrant le point. Ce fonctionnement est spécifique de la tablette mais bien entendu s’adapte complètement à l’usage d’une souris dans la version navigateur.
Cette nouvelle interface peut surprendre a priori, mais elle est suffisamment opérationnelle pour qu’on oublie rapidement le mode préfixé des outils des logiciels de géométrie dynamique sur ordinateur.
2.2. La trop grande sensibilité de l’interface
Cette interface est volontairement très ouverte au sens où on crée facilement des points à la volée dans l’anticipation des constructions sans rupture de l’intention de construire. Elle avait toutefois un inconvénient pratique, à savoir une trop grande sensibilité, justement, au tactile. Les élèves avec lesquels nous avons pu tester l’usage régulier de DGPad sur tablette, en seconde, les enseignants en formation, et l’auteur de ces lignes lui-même pourtant gros utilisateur, avaient une tendance naturelle à créer des points par inadvertance en voulant en sélectionner d’autres ou agir sur des curseurs. Ceci aussi bien sur la tablette directement que dans la manipulation de figures dans des articles comme ceux de MathémaTICE.
D’un point de vue didactique, ces artefacts provoquaient de vraies ruptures d’activités, moins brutales certes que les boîtes à dialogues d’un autre logiciel de géométrie très pratiqué, mais du même ordre quand même. C’était un point paradoxal de cette nouvelle interface : une grande ouverture dans l’engagement direct qui, en elle-même, pouvait provoquer une rupture de ce même engagement direct.
Bien entendu, les utilisateurs de la webApp sur ordinateur ne rencontraient pas cette situation - ou beaucoup moins - c’était essentiellement une problématique tactile.
2.3. La solution avec le mode « consultation »
L’analyse était claire : il fallait pouvoir supprimer cette trop grande sensibilité au tactile, sans compliquer l’interface, avoir un mode sans outil actif, où l’on peut simplement manipuler la figure - déplacer des points, agir sur les curseurs - mais sans créer de points.
L’auteur de DGPad a alors proposé quelque chose d’élémentaire mais qui change complètement « la consultation » des figures sur tablette : il y a désormais un mode où aucun outil n’est actif : ce mode consultation est donc aussi un mode « sans outil ». De plus, c’est désormais le mode par défaut dans toute figure téléchargée sur le web dans une webApp, donc le mode par défaut de toute figure, par exemple dans un article SPIP comme ceux déjà écrits dans MathémaTICE traitant de - ou utilisant - DGPad.
Dans ce mode consultation, comme aucun outil n’est actif, on ne peut ni éditer un objet ni lancer une expression etc. On ne fait que « consulter la figure », c’est-à-dire la manipuler, de manière dynamique.
Pour quitter le mode consultation et reprendre un mode standard il suffit de sélectionner un outil du tableau de bord : le « curseur » (la flèche) qui permet de créer de nouveaux objets mais aussi l’un quelconque des autres outils qui agissent directement sur la figure. Ainsi on peut quitter le mode consultation en entrant directement dans une expression ou dans l’inspecteur d’objet.
2.4. Utilisation en classe : Standard/ Consultation en switch
On peut dire aux élèves qui ont du mal à manipuler leurs figures dans une séance de géométrie dynamique utilisant DGPad sur tablette qu’ils peuvent momentanément désactiver les outils : il leur suffit de « faire un tap » sur l’outil actuellement sélectionné pour passer en mode consultation : en pratique les deux modes « standard » (un outil actif) et « consultation » (aucun outil actif) fonctionnent comme un interrupteur qui agit sur le tableur de bord (actif/inactif). On peut donc compléter, par exemple une figure 3D déjà partiellement préconstruite, puis passer en mode consultation pour la manipuler et revenir en mode standard pour la corriger si nécessaire ou l’embellir.
Bien entendu, quand on s’aperçoit que l’on ne peux plus éditer une expression ou un objet géométrique, il faut se rappeler qu’on est passé en mode consultation, un oubli assez régulier au début quand on joue à explorer des figures avec paramètres par exemple.
2.5. Le mode consultation et la gestion de l’écran. Spécificité de la 3D.
Il y a deux intérêts à utiliser le mode consultation pour simplement manipuler en 3D :
• c’est un mode plus rapide (et il a été nettement optimisé au point que certaines figures complexes, comme on le verra plus loin, sont facilement consultables maintenant sur tablette) .
• le trièdre se modifie à un seul doigt ce qui est particulièrement confortable, même si le mode à deux doigts fonctionne toujours mais il est moins rapide. Sur ordinateur c’est avec clic-gauche glissé que le trièdre se modifie (qui en consultation est donc plus rapide qu’un « clic-droit glisser » correspondant à la manipulation du trièdre en mode standard).
Exemple : à l’ouverture, aucun outil n’est sélectionné (ni disponible), vous pouvez faire tourner le trièdre à un doigt (ou clic gauche glisser), déplacer les différents points.
Sur la figure ci-dessus, on notera les points qui servent d’ancres d’expressions pour déplacer plusieurs expressions à la fois . Sera abordé au point 4.
En 2D, comme en 3D bien entendu le zoom se fait avec deux doigts. En 2D, en mode consultation, la translation de la figure se fait avec un seul doigt sur tablette et par un simple « clic gauche-glisser » sur ordinateur.
On retiendra de ce paragraphe que la manipulation à l’écran - particulièrement en 3D - est simplifiée et plus rapide en mode consultation qu’en mode standard. C’est significatif sur des figures lourdes.
2.6. Conclusion
Après quelques moments d’utilisation sur des figures complexes, on peut témoigner que l’expérience utilisateur est réellement modifiée. Il apparaît alors que ce mode n’est pas un complément d’interface, il est une composante essentielle d’une interface infixée volontairement ouverte à l’anticipation des constructions. Mais pour arriver à cette conclusion très simple, il a fallu quelques expériences en classe pour observer les usages élèves et enseignants et les désagréments de l’interface initiale : selon ce que l’on veut en faire, nous apprenons tous les nouvelles règles de base des interfaces tactiles.
Rien que pour cette évolution, il aurait fallu une nouvelle version de l’application. Mais il y a eu beaucoup d’autres améliorations ...
3. L’inspecteur d’objets
L’inspecteur d’objet a subi plusieurs modifications, certaines dues à l’ajout de fonctionnalités, mais plusieurs simplement ergonomiques.
3.1. La Loupe
C’est encore un retour d’expérience des premières utilisations scolaires qui ont amené à ajouter une loupe - comme celle de Sketchometry. En effet, on a tout de suite vu qu’en cours, utilisant le mode « vidéoprojection », l’enseignant comme les élèves qui prenaient la tablette ne regardaient plus la tablette mais l’écran de projection car ils pouvaient voir à la fois le doigt matérialisé par un disque jaune et le point vers lequel le doigt se dirigeait, ce que l’on ne voit pas sur la tablette car le doigt n’y est plus virtuel. Les élèves - et les enseignants - ont vite demandé à voir eux aussi le point sous le doigt d’où l’idée de faire une loupe comme dans certains logiciels de dessins vectoriels - et comme dans Sketchometry.
3.2. Les propriétés globales de l’inspecteur d’objet
La loupe n’est pas présente en mode consultation, elle est activée par défaut à la création d’une nouvelle figure. On peut alors la désactiver dans la palette par défaut - sélectionnée depuis le tableau de bord - de l’inspecteur d’objet, palette dite des propriétés globales.
Dans cette copie d’écran on voit qu’il y a trois propriétés globale : la présence ou non de la loupe, celle du mode vidéo projecteur et une couleur de fond. Cette option de couleur de fond n’est disponible que sur tablette et ordinateur, elle disparaît sur les smartphones.
On remarque que la loupe en fait n’en n’est pas une, elle ne grossit pas, elle montre juste au dessus de quel objet est le doigt pour pouvoir sélectionner correctement un point par exemple.
3.3. Nouvelle palette de couleurs pour l’inspecteur d’objet
On voit déjà que le « skin » (l’allure ?) de l’interface est plus conforme au standard 2D actuel des terminaux tactiles. Ainsi, le noir a disparu des deux panneaux latéraux, celui de droite - inspecteur d’objet - et celui de gauche - les macros.
Mais ce qui nous intéresse ici c’est la modification de la palette de couleur. Désormais, elle conserve 12 couleurs spécifiques, que l’on peut réutiliser dans la figure en cours et même dans une prochaine figure .
3.4. Nouvel item : objet inerte
Une demande des utilisateurs avancés de l’IREM de Toulouse, pour des simulations sophistiquées de leur futur tutoriel en ligne sous Scénari : un objet peut ne pas réagir à la sollicitation tactile ou celle de la souris.
4. La palette de comportement
Les habitués du logiciel observeront une nouveauté à la palette de comportement : l’ancre à gauche de la calculatrice.
4.1. Ancrer des expressions
Comme illustré dans la figure des calculs d’équations de plans, l’ancre sert à associer une suite d’expressions à un point pour les déplacer simultanément. Sur cette figure, les coordonnées des 6 points M, N, P et I, J, K sont toutes attachées au même point. On peut aussi rendre inertes ces expressions, elles ne seront donc plus déplaçables que par le point d’ancrage.
Sur un même point on peut ancrer des expressions ou des curseurs comme ici les 4 curseurs coefficient du problème (comme autre illustration d’un exercice d’un autre article récent) :
Le même problème en 3D, avec sa sphère solution (ouvrir dans un nouvel onglet) : http://goo.gl/5h2QzM
4.2 Attacher/détacher un point sur objet - interface d’utilisation
La seconde utilisation de l’ancre est d’attacher un point à un objet, et surtout de le détacher : ainsi on peut explorer une situation dans un cas général et ancrer un point à un objet, puis le dé-ancrer pour tester autre chose ...
L’interface est s(o)ignée : on prend l’ancre que l’on déplace vers l’objet d’ancrage. Un objet ancré (point ou expression) peut être dé-ancré à chaque instant, comme on le voit ci-dessous : l’ancre est donc, lui aussi, un interrupteur.
5. Les listes graphiques
Les listes graphiques sont la dernière nouveauté de cette MAJ. On est donc là dans la programmation des expressions.
Pour rappel (voir par exemple le tutoriel proposé sur le site de l’IREM de La Réunion,en particulier les trois derniers onglets de la barre d’onglets sur les expressions) les expressions de DGPad peuvent contenir des programmes JavaScript. On ne revient pas sur les détails techniques. Les paragraphes suivants supposent que l’on a pratiqué un peu les « expressions-programmes ». Mais bien entendu ils peuvent se parcourir juste pour la culture de ce qu’il est possible de faire.
Ces programmes pouvaient produire des listes de points. Désormais elles peuvent produire des listes soit de points soient de segments, avec quelques finitions spécifiques à cette réécriture.
5.1. Points ou segments ?
Quand on construit une liste de points, on peut désormais choisir de créer des points ou des segments :
On peut choisir (détaillé plus loin) la taille des points et des segments, et même - si cela a du sens - une opacité (très légère ci-dessus). Par exemple l’illustration sur la loupe est issue de la même figure, mais il y a des points - et pas d’opacité.
On peut directement passer des points aux segments par une simple icone de comportement (celle de droite) :
Et comme le montre cette illustration on peut prendre un point sur objet d’une liste. C’est par exemple ce qui a été fait avec les points aimantés (en fait appartenant) sur les faces des plans de la première figure : ces points sont construits par des listes, une liste par plan et les points M, N, P sont pris comme point sur objet de ces listes. En pratique en 3D, il faut que les points soit d’abord sur objet des faces et ensuite on les aimante sur les listes. Une simple aimantation par les listes (pour le moment) ne fonctionne pas en 3D.
5.2. Ni point ni segment mais une liste
Ce qui est intéressant dans cette nouvelle version, par rapport à ce qui était présenté dans l’article « tutoriel » cité ci-dessus, c’est que désormais il n’y a plus de création effective ni de points ni de segment. Le code produit par le logiciel pour la figure précédente est seulement celui-ci :
- // Coordinates System :
- SetCoords(480.51498960212797,362.45617983785,59.02999218334108);
- // Geometry :
- ang=Expression("ang","","90","160","138.3","-7.4625622214879135","5.29317671036434");
- n=Expression("n","","300","600","483","-3.3968323929189936","5.29317671036434");
- E1=Expression("E1","","","","var tab=[];for (var i=1;i<=n;i++){var u=0.2*sqrt(i);var k=i*ang*\u03C0/180; var v=[u*cos(k),u*sin(k)];tab.push(v);};tab","-7.6319676310116185","-4.701742451534255");
- List1=List("List1",E1);
- // Styles :
- STL(ang,"c:#007c00;s:7;sn:true;f:18;p:4;cL:200;cPT:YzojMDA3YzAwO3M6MTA7ZjozMA==");
- STL(n,"c:#4f3666;s:6.5;sn:true;f:24;p:4;i:1;cL:200;cPT:YzojNzgwMDEzO3M6MTA7ZjozMDtpOjE=");
- STL(E1,"c:#17502b;s:7;f:15;p:4;cL:200;cPT:YzojNzgwMDEzO3M6MTA7ZjozMA==");
- STL(List1,"c:#ea15e4;s:0;f:30;p:0;sg:0.6");
- SetCoordsStyle("isAxis:false;isGrid:true;isOx:true;isOy:true;isLockOx:false;isLockOy:false;centerZoom:false;color:#111111;fontSize:18;axisWidth:1;gridWidth:0.1");
- SetGeneralStyle("background-color:#FFFFFF");
Autrement dit il n’y a que 4 variables, l’angle, le nombre de point, l’expression qui décrit la liste, et la liste elle-même. Son apparence est gérée par le style de la liste. Les 600 points possibles et 599 segments n’existent qu’en interne, ce qui rend les figures beaucoup plus fluides.
Par ailleurs, la taille de la liste produite par l’expression peut être variable, et donc la liste produite elle aussi. Autrement dit ces listes peuvent avoir une taille dynamique. C’est directement illustré dans le prochain exemple.
5.3. NaN pour briser les listes
Un autre raffinement des listes ayant des segments est la possibilité de briser un segment, par exemple pour changer de ligne ou de colonne. On peut donc faire des dizaines de listes en une seule fois. Par contre, dans ce cas, elles seront toutes gérées de la même façon, même taille, même couleur. Pour cela, il suffit de mettre NaN dans les coordonnées d’un point.
Voici par exemple un ruban de Moebius à k demi-tours réalisé avec deux listes, ce qui permet de mettre deux couleurs : on peut faire varier k mais aussi le nombres de segments horizontalement et verticalement. Sur tablette on déplace le ruban à un doigt, sur ordinateur avec un trackpad aussi sinon avec un« clic-gauche glisser »
Le code des expressions pour les lignes horizontales et verticales sont les suivants. On repèrera l’utilisation de NaN :
- // Les lignes horizontales
- //
- var moebius=[];var pt=2*nbtours-1;for(var kt=0;kt<=p;kt++){var t=-1+kt*pas1;var ts2=t/2;for(var kv=0;kv<=n;kv++){var v=kv*pas2;var b2=(1+ts2*cos(pt*v/2));var kx=b2*cos(v);var ky=b2*sin(v);var kz=ts2*sin(pt*v/2);moebius.push([kx,vy*ky,h*kz])};moebius.push([NaN, NaN, NaN])};moebius
- //
- // Les lignes verticales
- //
- var moebvert=[];var pt=2*nbtours-1;for(var kv=1;kv<=n;kv++){var v=kv*pas2;var bmin=(1-cos(pt*v/2)/2);var bmax=(1+cos(pt*v/2)/2);var kx1=bmin*cos(v);var ky1=bmin*sin(v);var kz1=-sin(pt*v/2)/2;var kx2=bmax*cos(v);var ky2=bmax*sin(v);var kz2=sin(pt*v/2)/2;moebvert.push([kx1,vy*ky1,h*kz1],[kx2,vy*ky2,h*kz2],[NaN,NaN,NaN])};moebvert
5.4. Inspecteur de liste
Si on sélectionne une liste graphique par l’inspecteur d’objets, on peut jouer sur deux paramètres : la taille des points et l’épaisseur des segments.
Chacun des deux « taille » et « segment » peuvent être réglés en dixièmes de pixel en dessous de 1 pixel. Chacun des deux peut être nul ... mais, bien-sûr, pas les deux simultanément. On peut y mettre de l’opacité.
Exemple avec l’algorithme GingerBreadMan dont la condition initiale (point A) est aimantée par tous les points représentés par une croix. Vous pouvez modifier le style en choisissant l’icone « roue » dans le tableau de bord.
Rappel de quelques infos sur le logiciel
DGPad est webApp, c’est-à-dire une utilisation dans un navigateur. C’est le seul usage possible sur ordinateur. C’est l’utilistion à privilégier dans un cadre scolaire sans tablette. Préférer Chrome ou Safari pour les figures complexes ou la 3D : Firefox est deux fois moins rapide que les deux autres pour le JavaScript dynamique.
DGPad est une iApp pour tablettes
L’intérêt de l’application sur tablette est qu’on peut être totalement autonome, sans utilisation d’une connexion internet : vous pouvez transférer le dossier des figures de cet article - entre autres - sur votre tablette (dans un dossier DropBox présent sur votre tablette par exemple).
Alors tout fichier peut directement s’ouvrir dans l’application DGPad.
DGPad pour Androïd
DGPad pour iOS
Depuis les versions de cet été 2014, la version tablette sous Androïd est désormais du même niveau que dans la version iOS.
Les tutoriaux
Le site de DGPad contient de nombreuses vidéos de l’auteur commentant le fonctionnement de son logiciel logiciel.
Toujours du même auteur, deux vidéos sur les expressions :
Une première vidéo de 15 min, par l’auteur du logiciel, présentant les premières fonctionnalité
Une deuxième vidéo, sur la programmation dans les expressions (7 min), résevée, selon l’auteur, aux « power users ».
Sur MathémaTICE, on trouvera cet autre article sur les expressions (Alain Busser - Monique Gironce)
Sur le site de l’IREM de La Réunion, ce tutoriel assez complet (avec l’ancienne interface d’avril 2014) dont cet article est un complément. On peut être intéressé par les 47 figures proposées en téléchargement.
Blog et forum
Il est commun à celui de CaRMetal (du même auteur), et a été déplacé suite à trop de spam. Le nouveau site (pointé sur le blog) est maintenu par Patrice Debrabant). Entre autre, sa figure du flocon de Koch avec expressions récursives est superbe (entrée du 16 août).
Utilisation scolaire - témoignage en lycée professionnel
Sur le site de l’IREM de La Réunion, notre collègue David Ethève, enseignant en Lycée Professionnel à Saint Joseph propose aussi des vidéos d’apprentissage dans plusieurs articles sur des activités pour ses élèves de seconde :
• article 1 : présentation de DGPad pour les élèves (géométrie, tracé de courbes)
• article 2 : Agrandissement/Réduction en seconde.
• article 3 : Géométrie dans l’espace avec DGPad, aménagement des combles : activité en lycée professionnel.
On notera aussi son bilan fort documenté d’une utilisation de tablettes tactiles sur 14 séances dans une classe de seconde de lycée professionnel en quelques mois de fin d’année 2013-2014.
Le fichier en téléchargement
En plus des figures de l’article, comme je n’aurais pas le temps d’en faire un article, j’ai ajouté un dossier sur le jeu Curvica, découvert grâce à JulienP dans un post du forum de DGPad, que je remercie encore une fois. J’avoue avoir bien passé 10 jours sur ce jeu pendant les vacances ! Dans le dossier il y a une version allégée, algébrique, car plus facilement jouable sur tablette. Mais ma version n’a qu’un seul napperon. Dans son post sur le forum, vous trouverez la version originale de JulienP, géométrique, avec 4 napperons.