3D TOUCH & PRESSURE JS

3D Touch est utilisé à la fois dans le système lui-même et au sein des applications. Par exemple, si vous souhaitez envoyer un SMS, un appui fort permettra de composer un nouveau message directement. La plupart du temps, les appuis forts permettent d’afficher des aperçus de l’application : cartes, miniatures de sites, par exemple. Cette technologie permet un gain de temps pour certaines tâches répétitives, l’accès rapide aux fonctionnalités les plus utilisées et donc une ergonomie améliorée.

En ce qui concerne Android, certains constructeurs ont intégré des technologies semblables. Mais le système ne gérant pas nativement les différences de pression, ils doivent développer leurs propres fonctionnalités. C’est donc sur iOs que cette nouveauté se développera probablement le plus dans les prochains mois.

Si vous aviez déjà entendu parler de “force touch”, 3D touch en est simplement une évolution. Ce dernier détecte un niveau de pression supplémentaire (pression forte) et a été introduit avec l’iPhone 6S, contrairement à force touch, présent sur l’Apple Watch et le MacBook Air.

Parallèlement à ces nouveautés en matière de force d’appui, des librairies Javascript sont apparues, pour proposer sur le web des expériences comparables à celles qu’on pourrait retrouver sur mobile.

Pressure JS est l’une d’entre-elles. En calculant quelle force est utilisée pendant la navigation, il devient possible de créer de nouvelles fonctionnalités sur son site. Elle est actuellement compatible avec les derniers iPhones, MacBook et MacBook Pro. Et très simple à utiliser !

Après avoir inclus le fichier “pressure.js” dans le projet, il faut cibler tous les éléments sur lesquels on souhaite mesurer la pression. Une fonction anonyme est ensuite appelée, selon l’évènement souhaité (‘change’, ‘start’, ‘end’, ‘startDeepPress’, …)


// On cible tous les élements possédant la classe “element”
Pressure.set('.element', { change: function(force, event){
// A chaque changement de niveau de pression, on modifie le contenu de l’élément par la valeur de la force exercé
this.innerHTML = force;
}
});
La variable “force” retourne une valeur entre 0 et 1, que vous pourrez ensuite utiliser pour mettre en place des interactions dépendantes de la pression exercée. Par exemple, faire déplacer un élément plus ou moins vite selon l'action de l'utilisateur. Soyez créatifs !

Pressure.js n’étant finalement compatible aujourd’hui qu’avec un nombre très réduit de plateformes, un événement, ‘unsupported’ existe aussi, pour afficher un message aux personnes qui naviguent avec un appareil sans Force Touch ou 3D Touch.