Personnaliser le marqueur d’une carte OpenLayers

Dans un tuto précédent sur la réalisation d’une carte à l’aide d’OpenLayers (carte du métro), j’ai utilisé des marqueurs personnalisés, mais comme ce n’était pas l’intérêt majeur du tuto, ne me suis pas attardé sur ce point.

Et c’est justement sur ce point, la personnalisation des marqueurs d’une carte OpenLayers, que l’on va se pencher aujourd’hui.

Retour sur la base

Avant de parler de la personnalisation d’un marqueur avec OpenLayers, je souhaite d’abord revenier rapidement sur la définition de ce marqueur.

Avec OpenLayers, un marqueur est une Feature dont la géométrie est un Point. Et les coordonnées de ce point sont définies via la méthode ol.proj.fromLonLat(), à laquelle on fournit un array contenant la longitude, puis la latitude.

En prenant en exemple le point zéro des routes de France (sur le parvis de Notre-Dame de Paris), dont les coordonnées en latitude/longitude sont 48.8533973/ 2.3487972, cela donne :

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([2.348785, 48.853402])),
});
Continuer la lecture

Comment déclencher n’importe quel événement en JavaScript vanilla

Après avoir réussi à automatiser les clicks sur les fortunes de Cookie Clicker (voir ici), par curiosité je me suis intéressé à la première version de ce jeu (voir ici).

Sur cette version, la première chose que j’ai cherché à automatiser est bien évidemment le click sur le cookie.

Après un rapide coup d’oeil au code de la page, j’ai trouvé l’id de notre cookie (dans notre cas “cookie”), et j’ai mis en place un classique setInterval pour déclencher un clic, avec notre grande amie la méthode click().

let legacyCookieClicker = setInterval(() => {
   document.querySelector('#cookie').click();
}, 250);

Mais cela n’avais par l’air d’avoir d’effet.

Continuer la lecture

Automatiser le clic sur les fortunes de Cookie Clicker

Aujourd’hui, après avoir effectué une ascension sur Cookie Clicker, je me suis dit : “Si je veux débloquer les fortunes (qui apparaissent dans le fil d’actualités), il va falloir encore que je reste attentif devant mon écran…”.

C’est alors que je me suis demandé s’il n’y avait pas moyen d’automatiser cela.

La première étape fut d’analyser le code principal du jeu.

Contrairement à d’autres aspects du jeu (les mini-jeux ou encore les cookies dorés…) le fil d’actualités n’est pas géré par l’intermédiaire de l’objet principal du jeu (Game dans le code du jeu).

Pour arriver à mon but, il faut donc passer par le code HTML du jeu. Un rapide coup d’oeil à ce code me donne l’ID (commentsText1) de la div qui contient la nouvelle affichée.

Avec cet ID je peux maintenant le sélectionner avec document.getElementById().

Continuer la lecture

Gloubi script – une horloge illustrée

Aujourd’hui, j’ai décidé de m’attaquer à la version gloubi d’un script que j’ai également déjà créé de mon côté : l’horloge illustrée.

La version gloubi est visible ici, tandis que la création de ma propre version, faite avec jQuery, est présentée ici.

Présentation de la version gloubi

Pour commencer, on créé 10 objets de type Image() en leur attribuant à chacun l’attribut src correspondant.

c1=new Image(); c1.src="c1.gif";
c2=new Image(); c2.src="c2.gif";
c3=new Image(); c3.src="c3.gif";
c4=new Image(); c4.src="c4.gif";
c5=new Image(); c5.src="c5.gif";
c6=new Image(); c6.src="c6.gif";
c7=new Image(); c7.src="c7.gif";
c8=new Image(); c8.src="c8.gif";
c9=new Image(); c9.src="c9.gif";
c0=new Image(); c0.src="c0.gif";

Vient ensuite la fonction affiche(), permettant de changer les images, qui prend 3 paramètres en entrée : le nombre d’heures, le nombre de minutes et le nombre de seconde. Pour chacun des trois paramètres on détermine l’image à afficher pour les dizaines et les unités. Chaque image est modifiée en passant par la propriété images de l’objet document.

Continuer la lecture

Gloubi script – un système de tooltip

J’ai décidé cette semaine de me pencher sur le script de tooltip présenté sur le site de gloubiweb.

Dans une première partie je présenterai rapidement le fonctionnement du script actuel, et dans une deuxième, je vous indiquerai comment recréer (quasi) à l’identique cet ancien script.

Présentation de du code existant

Le script actuel se compose de plusieurs fonctions et classes assurant les différents traitements nécessaires, et comme pour d’autres gloubi scripts déjà présentés, les textes à faire apparaître sont renseignés directement dans le JavaScript.

La première fonction, DetecteNavigateur(), est là, comme son nom l’indique, pour détecter le navigateur du visiteur de la page et renseigner automatiquement des variables qui seront utilisées plus tard pour faire quelques ajustement selon le type du navigateur détecté. Ce genre de fonction n’est plus nécessaire de nos jours, car tous (ou presque) les navigateurs modernes fonctionnent de la même façon (ou de façon très proche) au niveau du JS.

Ensuite viens la classe CreationFenetre, qui possède 4 méthodes :

measureIt() : permet de mesurer la taille exacte du tooltip (utile pour son positionnement par rapport aux bords de la fenêtre de navigation)

writeIt() : permet de changer le texte à l’intérieur du tooltip

blendIn() et fadeIn() : ces deux fonctions permettaient de faire apparaître le tooltip de manière progressive, mais aucune des deux n’est encore fonctionnelle, car elles utilisent des propriétés et méthodes n’existant plus dans les navigateurs modernes

Il y a ensuite d’autres fonctions dont les plus importantes sont :

DetecteMouvementSouris() (le nom de cette fonction est suffisamment explicite pour que je n’ai pas à préciser sa tache)

PositionneFenetre() (la même)

AfficheTexte(), cette fonction a pour rôle de changer le contenu du tooltip.

Continuer la lecture

Gloubi script – un cadre clignotant

Aujourd’hui, nous allons nous attaquer à un script présenté chez notre gloubi rival qui pourra vous être très utile pour mettre en avant n’importe quel contenu sur, par exemple, la magnifique page d’accueil de votre tout aussi sublime site : le cadre clignotant.

Comme pour d’autres gloubi scripts déjà présentés, il est possible maintenant d’obtenir le même effet seulement avec du CSS. Dans cet article je présenterait la solution JavaScript actuelle (avec une légère correction) puis une solution utilisant uniquement CSS.

Solution JavaScript

Le code utilisé (visible ici) est très simple. Toutes les 500 millisecondes (avec setInterval) on appelle une fonction qui vérifie la couleur de bordure de notre élément cible (via son attribut style), et selon sa valeur, cette couleur est changé (par exemple, si la bordure est bleue, elle est changée en rouge, et inversement).

Continuer la lecture

Gloubi tuto – menu avec description du lien

Voici venu le temps d’un nouveau gloubi tuto sur un autre script de menu. Aujourd’hui, nous allons nous attaquer au menu interactif avec description du lien.

Fonctionnement du script

Le menu est mis en forme avec un simple tableau à une seule colonne, avec un case vide en pied de colonne permettant d’afficher la description du lien survolé.

Le script actuel utilise 2 fonctions : un fonction pour gérer l’arrivée de la souris sur un élément de notre menu (événement mouseover) et une autre pour gérer la sortie de la souris (événement mouseout). Ces deux fonctions sont appelées via les attributs onmouseover/out des éléments du tableau.

La première fonction, movein(), prend deux paramètres : l’id de l’élément et sa description. La deuxième fonction, moveout(), prend un seul paramètre, l’id de l’élément.

Les deux fonctions marchent de la manière suivante :

  • on change le style de l’élément (ciblé par son id) en utilisant son attribut style
  • on change le contenu de la case de description
Continuer la lecture

Une fenêtre modale en JavaScript natif

Aujourd’hui, nouveau retour sur un de mes anciens tutoriels qui a rencontré un certain succès, mon tutoriel sur comment faire une fenêtre modale avec jQuery.

Depuis maintenant à peu près un an, tous les navigateurs majeurs supportent la balise <dialog> qui permet de créer des fenêtres modales (ça ça tombe bien).

Un des avantages de cette solution plus moderne est qu’il n’y a plus besoin d’insérer manuellement un élément de masquage de la page, maintenant il y a le pseudo-élément ::backdrop pour ça.

Continuer la lecture

Gloubi tuto – texte changeant de couleur

Cette fois-ci encore, j’ai décidé de m’attaquer à un autre gloubi script d’effet sur texte, le texte changeant de couleur.

Une fois de plus, dû à l’évolution des technologies, plus besoin de JavaScript pour obtenir un résultat identique (ou en tout cas très proche).

Fonctionnement du script

On indique au script les couleurs (du texte et du fond) entre lesquelles faire une transition. Ces couleurs sont définies chacune par trois variables (ce qui nous fait 12 variables en tout) contenant une valeur décimale (entre 0 et 255) qui sera ensuite convertie en hexadécimal sur deux digits (entre 00 et FF) pour indiquer la couleur sous la notation #RRGGBB.

Les valeurs des différentes composantes sont progressivement incrémentées puis décrémentées entre les valeurs bornes.

Continuer la lecture

Le retour du compteur de caractères

Après être revenu dernièrement sur ma série de tutos d’introduction aux canvas, j’ai décidé de m’attaquer à l’un de mes anciens articles me valant le plus d’affichage sur le moteur de recherche d’Alphabet : le compteur de caractères.

Comme pour mes derniers articles traitant de JavaScript, une fois de plus je n’utiliserai que des fonctions natives, sans aucune librairie.

Organisation du nouveau code

Le nouveau code sera réparti dans deux fonctions : une fonction d’initialisation, et la fonction en charge du compte des caractères. Cette dernière fonction étant appelée une fois à l’initialisation, pour pouvoir être utilisable sur une page où les champs de formulaire contiennent déjà du texte (une amélioration par rapport à l’ancien code), et ensuite attachée à un événement sur les champs.

Un des gros changement est la manière dont on va passer les paramètres à notre champ compteur de caractères : au lieu de passer ces paramètres à notre fonction d’initialisation, on va utiliser des attributs HTML.

Continuer la lecture