Catégorie : MacOS

Comment afficher plusieurs repères sur Google Maps à partir d’adresses dans un fichier Excel

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 3 minutes
Écouter cet article

Si vous travaillez avec un grand nombre d’adresses, vous savez combien il peut être fastidieux de les copier-coller une à une dans Google Maps. Heureusement, il existe une solution simple et efficace : importer directement un fichier CSV contenant vos adresses dans Google Maps via My Maps.

Dans cet article, nous vous expliquons pas à pas comment créer une carte personnalisée avec vos adresses, ainsi que quelques astuces pour optimiser l’importation et l’utilisation de votre carte.

Étape 1 : Préparer votre fichier CSV

Avant de commencer, il est essentiel de structurer correctement votre fichier Excel et de l’exporter au format CSV (Comma-Separated Values). Voici les bonnes pratiques à suivre :

  1. Structure des colonnes :
    • Créez une colonne nommée Adresse, qui contiendra toutes vos adresses complètes.
    • Vous pouvez ajouter d’autres colonnes optionnelles comme Nom ou Description pour personnaliser les points d’intérêt sur la carte.
  2. Format du fichier CSV :
    • Assurez-vous que les colonnes sont séparées par des virgules.
    • Enregistrez le fichier avec l’encodage UTF-8. Cela évitera les problèmes d’affichage des caractères spéciaux (accents, symboles, etc.) lors de l’importation.

Pour exporter votre fichier depuis Excel :

  • Cliquez sur Fichier > Enregistrer sous.
  • Choisissez le format CSV (délimité par des virgules).
  • Sélectionnez l’encodage UTF-8 si cette option est disponible.

Étape 2 : Importer le fichier dans Google My Maps

Une fois votre fichier CSV prêt, rendez-vous sur Google My Maps pour créer votre carte.

  1. Accédez à Google My Maps.
  2. Cliquez sur + Créer une nouvelle carte.
  3. Dans le panneau de gauche, cliquez sur Importer.
  4. Sélectionnez votre fichier CSV préalablement enregistré.
  5. Google vous demandera de choisir la colonne contenant les adresses à afficher. Sélectionnez la colonne Adresse.
  6. Définissez une colonne pour les noms ou descriptions si vous en avez ajouté une.

Après quelques secondes, Google Maps placera automatiquement des marqueurs sur votre carte à chaque adresse mentionnée.

Étape 3 : Personnaliser votre carte

Vous pouvez personnaliser l’apparence de votre carte pour la rendre plus attractive et lisible.

  • Modifier les icônes et couleurs : Cliquez sur un marqueur, puis sur l’icône de peinture pour changer son apparence.
  • Ajouter des couches : Vous pouvez organiser vos adresses en différentes catégories, par exemple par ville ou par type d’emplacement.
  • Ajouter des descriptions : Cliquez sur chaque marqueur pour ajouter des détails supplémentaires.

Étape 4 : Partager et exploiter votre carte

Google My Maps permet de partager vos cartes avec d’autres utilisateurs ou de les rendre publiques. Voici comment procéder :

  1. Cliquez sur Partager dans le panneau de gauche.
  2. Définissez les autorisations de partage :
    • Privé : seuls les utilisateurs ayant un lien peuvent y accéder.
    • Public : tout le monde peut consulter votre carte.

Vous pouvez partager le lien par e-mail, le publier sur les réseaux sociaux ou l’intégrer à votre site Web.

Cas d’utilisation pratiques

Voici quelques exemples de situations où cette fonctionnalité peut vous être utile :

  1. Planification de voyage : Créez un itinéraire avec tous les sites à visiter, les hôtels et les restaurants.
  2. Gestion commerciale : Visualisez vos clients ou points de vente sur une carte pour optimiser vos tournées.
  3. Organisation d’événements : Localisez les différents lieux d’un événement (parking, scène principale, entrées).
  4. Analyse géographique : Comparez la répartition de vos points d’intérêt selon les zones géographiques.

N’hésitez pas à tester ces options pour trouver celle qui correspond le mieux à vos besoins.

Pour finir…

Importer un fichier CSV d’adresses dans Google Maps est une solution pratique pour visualiser rapidement vos données géographiques. En suivant ce tutoriel, vous gagnez du temps et pouvez exploiter votre carte de manière optimale, que ce soit pour le travail ou les loisirs.

Préparez votre fichier, essayez Google My Maps dès aujourd’hui et explorez toutes les possibilités offertes par cet outil puissant !

Communication en temps réel entre une page web et un Arduino avec Node.js et Socket.IO

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 2 minutes
Écouter cet article

Vous souhaitez créer une interaction dynamique entre une page web et un Arduino ? Grâce à Node.js et Socket.IO, il est possible d’établir une communication bidirectionnelle en temps réel. Dans cet article, nous allons voir comment envoyer des messages depuis un formulaire web vers un Arduino Uno, traiter ces messages et renvoyer une réponse affichée sur la page web.

Matériel et logiciels nécessaires

  • Arduino Uno : la carte microcontrôleur.
  • Câble USB : pour connecter l’Arduino à l’ordinateur.
  • Ordinateur : avec Node.js installé.
  • Bibliothèques Node.js : Express, Socket.IO et SerialPort.

Étapes de mise en place

Configurer le Serveur Node.js : Créez un fichier server.js et ajoutez le code suivant : 

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// Remplacez '/dev/ttyACM0' par le port série de votre Arduino
const port = new SerialPort('/dev/ttyACM0', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('Un client est connecté');

  socket.on('messageToArduino', (msg) => {
    port.write(msg + '\n');
  });

  parser.on('data', (data) => {
    socket.emit('messageFromArduino', data);
  });
});

server.listen(3000, () => {
  console.log('Serveur à l\'écoute sur le port 3000');
});

Ce code crée un serveur web qui sert des fichiers statiques depuis le dossier public, écoute les connexions Socket.IO et communique avec l’Arduino via le port série.

Créer la page web : Dans le dossier public, créez un fichier index.html avec le contenu suivant : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Communication Web-Arduino</title>
</head>
<body>
  <h1>Envoyer un message à l'Arduino</h1>
  <form id="form">
    <input type="text" id="input" placeholder="Entrez votre message" required>
    <button type="submit">Envoyer</button>
  </form>
  <h2>Réponse de l'Arduino :</h2>
  <pre id="response"></pre>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const response = document.getElementById('response');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      socket.emit('messageToArduino', input.value);
      input.value = '';
    });

    socket.on('messageFromArduino', function(msg) {
      response.textContent = msg;
    });
  </script>
</body>
</html>

Cette page permet à l’utilisateur d’envoyer un message à l’Arduino via un formulaire et d’afficher la réponse reçue.

Programmer l’Arduino : Utilisez le code suivant pour votre Arduino : 

void setup() {
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    String message = Serial.readStringUntil('\n');
    int separatorIndex = message.indexOf(':');
    if (separatorIndex != -1) {
      String key = message.substring(0, separatorIndex);
      String value = message.substring(separatorIndex + 1);
      key.trim();
      value.trim();
      String response = "Clé: " + key + " | Valeur: " + value;
      Serial.println(response);
    } else {
      Serial.println("Format invalide. Utilisez 'clé:valeur'");
    }
  }
}

Ce programme lit les messages reçus, les analyse pour extraire une clé et une valeur, puis renvoie une réponse appropriée.

Lancer l’application

Installer les dépendances : Dans le dossier de votre projet, exécutez :

  npm install express socket.io serialport @serialport/parser-readline

Démarrer le serveur : Lancez le serveur avec :

  node server.js

Accéder à l’interface web : Ouvrez votre navigateur à l’adresse http://localhost:3000 pour utiliser le formulaire et interagir avec l’Arduino.

En suivant ces étapes, vous pouvez établir une communication en temps réel entre une page web et un Arduino, permettant des interactions dynamiques pour divers projets. N’hésitez pas à adapter et étendre cet exemple pour répondre à vos besoins spécifiques.

Simplifiez l’intégration de la synthèse vocale en français avec l’API Web Speech

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 3 minutes
Écouter cet article

Introduction

La synthèse vocale est une technologie qui convertit du texte en parole, offrant ainsi des possibilités intéressantes pour améliorer l’accessibilité et l’interactivité des sites web. Grâce à l’API Web Speech, il est désormais possible d’intégrer cette fonctionnalité directement dans vos applications web sans dépendre de services externes. Dans cet article, nous vous guiderons pas à pas pour mettre en place une synthèse vocale en français qui prononce « Bonjour… » dès le chargement de la page.

Qu’est-ce que l’API Web Speech ?

L’API Web Speech est une interface JavaScript qui permet aux développeurs d’intégrer des fonctionnalités de reconnaissance et de synthèse vocale dans leurs applications web. Elle se compose de deux principales interfaces :

  • SpeechRecognition : pour la reconnaissance vocale, transformant la parole en texte.
  • SpeechSynthesis : pour la synthèse vocale, convertissant le texte en parole.

Dans notre cas, nous nous concentrerons sur l’interface SpeechSynthesis pour faire parler notre page web.

Implémentation de la synthèse vocale en français

Pour que votre page web utilise par défaut la synthèse vocale en français et prononce « Bonjour tout le monde ! » au chargement, suivez les étapes ci-dessous :

  1. Vérifier la compatibilité du navigateur : Assurez-vous que le navigateur de l’utilisateur prend en charge l’API Web Speech.
  2. Obtenir la liste des voix disponibles : Récupérez les voix de synthèse vocale disponibles sur le navigateur.
  3. Sélectionner la voix française : Choisissez la voix correspondant au français (fr-FR).
  4. Créer une instance de SpeechSynthesisUtterance : Cette instance contiendra le texte à prononcer.
  5. Associer la voix sélectionnée à l’instance : Attribuez la voix française à l’instance créée.
  6. Prononcer le texte : Utilisez la méthode speak de l’interface SpeechSynthesis pour lire le texte.

Voici un exemple de code illustrant ces étapes :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Synthèse vocale en français</title>
</head>
<body>
    <script>
        // Fonction pour vérifier si la synthèse vocale est supportée
        function estSyntheseVocaleSupportee() {
            return 'speechSynthesis' in window;
        }

        // Fonction pour obtenir la voix française par défaut
        function obtenirVoixFrancaise() {
            const voixDisponibles = window.speechSynthesis.getVoices();
            return voixDisponibles.find(voix => voix.lang === 'fr-FR') || voixDisponibles[0];
        }

        // Fonction pour prononcer un message avec la voix spécifiée
        function prononcerMessage(message, voix) {
            const utterance = new SpeechSynthesisUtterance(message);
            utterance.voice = voix;
            window.speechSynthesis.speak(utterance);
        }

        // Exécution au chargement de la page
        window.addEventListener('load', () => {
            if (estSyntheseVocaleSupportee()) {
                // Chargement des voix peut être asynchrone
                window.speechSynthesis.onvoiceschanged = () => {
                    const voixFrancaise = obtenirVoixFrancaise();
                    prononcerMessage("Bonjour tout le monde !", voixFrancaise);
                };
            } else {
                console.error("La synthèse vocale n'est pas supportée par ce navigateur.");
            }
        });
    </script>
</body>
</html>

Explications du code :

  • Vérification du support : La fonction estSyntheseVocaleSupportee s’assure que le navigateur supporte la synthèse vocale.
  • Obtention de la voix française : La fonction obtenirVoixFrancaise parcourt les voix disponibles et sélectionne celle en français.
  • Prononciation du message : La fonction prononcerMessage crée une instance de SpeechSynthesisUtterance avec le message à prononcer et la voix sélectionnée, puis utilise speechSynthesis.speak pour lire le message.
  • Chargement des voix : Les voix étant chargées de manière asynchrone, l’événement onvoiceschanged est utilisé pour s’assurer que la voix française est disponible avant de prononcer le message.

Compatibilité des navigateurs

L’API Web Speech est largement supportée dans les navigateurs modernes tels que Chrome, Firefox et Safari. Cependant, il est recommandé de vérifier la compatibilité pour les navigateurs spécifiques que vous ciblez.

Bonnes pratiques et améliorations possibles

Pour enrichir l’expérience utilisateur, vous pouvez envisager les améliorations suivantes :

  • Gestion des erreurs : Informer l’utilisateur si la synthèse vocale n’est pas supportée ou si aucune voix française n’est disponible.
  • Personnalisation : Permettre à l’utilisateur de choisir parmi différentes voix ou de modifier le message à prononcer.
  • Accessibilité : S’assurer que la synthèse vocale n’interfère pas avec les technologies d’assistance, comme les lecteurs d’écran, en fournissant des contrôles pour activer ou désactiver la lecture automatique.

L’intégration de la synthèse vocale en français dans vos applications web est désormais à portée de main grâce à l’API Web Speech. En suivant les étapes décrites ci-dessus, vous pouvez offrir une expérience utilisateur plus riche et accessible, tout en simplifiant le processus de développement. N’hésitez pas à explorer davantage les fonctionnalités de cette API pour adapter votre application aux besoins spécifiques de votre audience.

Pour approfondir vos connaissances, vous pouvez consulter la documentation officielle de l’API Web Speech sur MDN Web Docs.