Adaptation pour écran tactile

**ProgElecT** · 07/08/2024, 16h58

Salut

Jusqu’à maintenant dans l'un de mes programmes, j'utilisai l’évènement onclick, et détectai la touche clavier (window.event.)Alt ou Maj ou Ctrl associé.

Voulant donner la possibilité d'utiliser le dit programme avec une tablette ou telephone mobile, je me suis informé sur les évènements TOUCHE et POINTER.
Je ne trouve pas comment récupérer/différencier l'évènement tactile équivalant à onclick + Alt, onclick+ Maj ou onclick+ Ctrl.

Le onclick doit se produire sur une carte géographique contenue dans un <div> l’endroit cliqué me permettant de récupérer les coordonnées x et y (latitude,longitude).

Merci de vos lumières, en espérant que cela soit possible de déclencher l’évènement.
Si cela peut aider à comprendre mon besoin, un des programmes en ligne

**mathieu** · 07/08/2024, 18h14

je n'ai pas trouvé le code javascript dont vous parlez dans la page avec la carte.

d'après la documentation, PointerEvent hérite de MouseEvent et possède donc des propriétés comme "ctrlKey" :
https://developer.mozilla.org/fr/doc...API/MouseEvent
https://developer.mozilla.org/fr/doc...I/PointerEvent

**ProgElecT** · 07/08/2024, 18h48

Salut

Merci de intéresser à mon problème.
Sur un ordi non tactile, on clique avec la souris tout en appuyant sur une touche clavier.
Avec un écran tactile on clique/touche l'écran avec le doigt, mais on n'a pas de clavier dans le même temps.

Envoyé par Mathieu

je n'ai pas trouvé le code javascript dont vous parlez dans la page avec la carte.

désolé, en effet le code JS est minimisé, voici le code utilisé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
			function QRZmobile(e) {
				let coordon = e.latlng;
				if (window.event.ctrlKey) {
//...........................plus loin dans la même fonction ..........................................
				if (window.event.altKey) {

La fonction QRZmobile est déclencher avec le onclick sur la <div> contenant la carte.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (event.shiftKey != true){return}

dans une autre fonction suite au onclick sur un autre <div>.

Je ne voudrai pas ajouter 3 boutons bascule, on touche l'écran sur un bouton "Alt" ou "Ctrl" ou "MaJ", puis on touche sur la carte ........ pas très ergonomique pour l'utilisateur .......

**mathieu** · 07/08/2024, 19h31

quelles sont les fonctions de ces touches ?
d'après ce que j'ai testé, MAJ sert à dézoomer. ce que j'ai vu souvent c'est l'utilisation de 2 doigts pour zoomer et dézoomer, peut-être que leaflet le gère déjà, je n'ai pas de matériel pour essayer cela.
pour CTRL, j'ai vu que ça place un curseur. peut-être que ça peut être remplacé par un appui long qui affiche un menu radial avec plusieurs choix.
et pour ALT, je n'ai pas trouvé.

**ProgElecT** · 07/08/2024, 20h29

Re

J'ai besoin, justement, d'avoir un "masque" pour différencier les actions par défaut, déplacement de la carte, zoomer, dézoomer ....

Envoyé par Mathieu

quelles sont les fonctions de ces touches ?

Dans le programme sous PC écran non tactile,
-un clique souris + touche clavier Ctrl sur la carte permet par programmation de créer un marqueur à l'endroit du clique.
-un clique souris + touche clavier Alt sur la carte permet par programmation de créer deux marqueurs à l'endroit du clique.

Par la suite, ses marqueurs peuvent être déplacés (futur problème aussi) et par programmation il y a actualisation de la distance entre eux.
Une ligne peut relier les 2 marqueurs, chaque marqueurs peut retourner son adresse .....
Quand cela sera possible sur écran tactile, restera à pouvoir déplacer les marqueurs ...... pas encore gagné

Le truc c'est que je n'utilise que rarement des systèmes ayant un écran tactile, ce qui ajoute à ma difficulté d'appréhender cette partie utilisateur.

En tout cas merci d'avoir déjà répondu à ma demande d'aide.

**NoSmoking** · 08/08/2024, 11h45

Bonjour,
premier point ton IHM n'est pas top car rien ne te permet de savoir ce que tu peux faire en utilisant le clic et une touche !

D'une façon générale il est préférable de passer par l'interface PointerEvent.

Ceci étant ...

Envoyé par mathieu

d'après ce que j'ai testé, MAJ sert à dézoomer. ce que j'ai vu souvent c'est l'utilisation de 2 doigts pour zoomer et dézoomer, peut-être que leaflet le gère déjà, je n'ai pas de matériel pour essayer cela.

Le zoom/dézoom avec deux doigts est valable sur tous les supports tactiles et pris en compte par les cartes.

Envoyé par =ProgElecT

-un clique souris + touche clavier Ctrl sur la carte permet par programmation de créer un marqueur à l'endroit du clique.
-un clique souris + touche clavier Alt sur la carte permet par programmation de créer deux marqueurs à l'endroit du clique.

Là je ne comprend pas vraiment la finesse !?!

Envoyé par ProgElecT

Quand cela sera possible sur écran tactile, restera à pouvoir déplacer les marqueurs ...... pas encore gagné

Tu n'as pas de soucis à te faire cela fonctionne parfaitement et tu n'auras même rien à écrire de plus.

Je te propose de regarder du côté de Leaflet.Draw qui devrait t'enlever une épine du pied.

**ProgElecT** · 08/08/2024, 18h04

Salut NoSmoking

Envoyé par NoSmoking

Bonjour,
premier point ton IHM n'est pas top car rien ne te permet de savoir ce que tu peux faire en utilisant le clic et une touche !

Nom : BtnAide.png
Affichages : 210
Taille : 18,5 Ko

Qui permet d'arriver ici
Nom : BtnAideMenu.png
Affichages : 201
Taille : 24,7 Ko

en cliquant à tour de rôle sur chaque bouton "?" ==> une explication

Envoyé par NoSmoking

Envoyé par ProgElecT

-un clique souris + touche clavier Ctrl sur la carte permet par programmation de créer un marqueur à l'endroit du clique.
-un clique souris + touche clavier Alt sur la carte permet par programmation de créer deux marqueurs à l'endroit du clique.

Là je ne comprend pas vraiment la finesse !?!

Pour clique souris + touche clavier Ctrl, permet de créer un marqueur mobile (movable) sur la carte
Nom : MarqJaune.png
Affichages : 207
Taille : 114,7 Ko

Pour clique souris + touche clavier Alt, permet de créer 2 marqueurs mobile (movable) sur la carte
Nom : MarqJetB.JPG
Affichages : 212
Taille : 88,9 Ko

C'est le seul moyen (pratique) que j'ai pour différencier un simple clique sur la carte ou un déplacement de la carte.

Au départ ce programme ne devait afficher que des indicatifs radioamateurs connus pour 8 départements.
Mais au fur et à mesure du temps on m'a demandé de prévoir les radioamateurs en vacances passant dans la zone.
D’où l'ajout momentané de points du lieu provisoire et des radioamateurs de la zone, ou de 2 radioamateurs en vacances , ou encore durant des concours ou un radioamateur ne trafique pas de son domicile, mais par exemple d'un point haut pour faire de la longue distance.

**mathieu** · 08/08/2024, 18h19

Envoyé par ProgElecT

en cliquant à tour de rôle sur chaque bouton "?" ==> une explication

j'avoue que je suis arrivé à cet endroit et je n'ai pas eu le réflexe de cliquer sur les "?".
après ce n'est pas une page grand public donc s'il y a besoin d'un petit mode d'emploi pour démarrer ce n'est pas grave si ensuite c'est pratique à utiliser pour vos utilisateurs réguliers.

au sujet du ALT, je suis sous linux et le ALT + déplacement de la souris est intercepté par le gestionnaire des fenêtres pour les déplacer. donc c'est pour ça que le ALT + clic ne fait rien chez moi.

**NoSmoking** · 09/08/2024, 11h26

Envoyé par ProgElecT

...

Ok mais cela n'est néanmoins pas très « user friendly »

Il y a quelques années j'ai expérimenté un plugin de contextMenu sur Leaflet et après l'avoir testé ce matin sur tablette tactile, je pense qu'il pourrait tout à fait faire le job.
J'ai souvenir de l'avoir trouvé simple à intégrer et plutôt bien fait

Sur support tactile, l'accès au contextMenu s'obtient avec un « touchDown » prolongé, le grand classique donc !

A voir :

**ProgElecT** · 09/08/2024, 17h30

Merci NoSmoking pour les liens

J'ai changer de fusil d'épaule, des images.png avec couleur transparente blanche ontouchend dans un <div>.
Nom : Discute1.png
Affichages : 198
Taille : 89,6 Ko

Nom : Discute1.png
Affichages : 198
Taille : 89,6 Ko

Le code HTML en cours d'essais

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
	<div id="DivContainer">
		<div id="macarte">
			<div id="MenuCarte" class="MenuCarte">
				<img id="choixSatelites" class="SousMenu" title="Carte satelite" onclick="BasculeCarte(this)">
				<img id="choiXRoutes" class="SousMenu" title="Carte route" onclick="BasculeCarte(this)">
				<img id="DepsVue" class="SousMenu" title="Visualiser les departements" onclick="AffDep(this)">
				<img id="Bsol" class="SousMenu" title="Visualiser la boussole" onclick="AffBoussole(this)">
				<img id="Bt1marqueur" class="SousMenu" title="Placer 1 marqueur mobile" onclick="Aff1marq(this)">
				<img id="Bt2marqueur" class="SousMenu" title="Placer 2 marqueurs mobile" onclick="Aff2marq(this)">
			</div>
		</div>
	</div>

Après sélection d'un des boutons, element.classList.toggle("BtnActiver");.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
			.BtnActiver{
				background-color: SpringGreen;
			}

pour les 2 premiers boutons,bascule de la carte, route ==> satelite ou inversement

pour les 2 derniers boutons, au prochain clique sur la carte, je construit le/les bons marqueurs à l'endroit cliqué.

Quand la partie détection TOUCHE sur les boutons sera OK et quand cela fonctionnera correctement je mettrai un exemple dans la discussion.

Merci encore aux intervenants.

**mathieu** · 09/08/2024, 21h09

j'aime bien cette nouvelle présentation, ça se rapproche des présentations des plans populaires avec des barres d'outils sur les côté ou en haut :
https://www.openstreetmap.org/#map=4/47.28/8.19
https://www.mapcontrib.xyz/t/14710b-...fibrillateurs#
et bien sûr un 3e plan qui est bien connu mais que je ne citerai pas parce que j'estime que l'entreprise a déjà assez de publicité par rapport aux services rendus.

**ProgElecT** · 26/08/2024, 17h01

Salut

Suite et fin (provisoire), j'ai mis en ligne une version qui fonctionne moyennement Radio74 NEW, cette version va forcement évoluer au grès des retours venu d'ici ou d'ailleurs

Je suis surpris des différents systèmes tablettes, téléphone mobile .... tant qu'aux gestionnaires d'écran et autres OS de chaque appareils.
C'est la jungle.

Merci de vos différentes interventions qui m'ont bien aidé.

Adaptation pour écran tactile

JavaScript

Discussions similaires

Partager

Partager