Project

General

Profile

Journal de Travail

15.10.2014

  • Développement (9h)
    • Activer/Désactiver l'affichage du trafic
      • OSM (3h)
        • Il est possible d'ajouter des overlays dans les layers passés à la directive, comme dans cet exemple
        • Après essai, il faut que les paths soit donnés lors de l'initialisation. Donc pas intéressant
        • L'autre technique est de le faire directement dans le javascript. Assez simple
        • Création d'un layerGroup auquel viendront s'ajouté les polylines
        • Ajout de se layerGroup à la carte lors de l'initialisation
      • GMAPS (6h)
        • Il faut créer un contrôle externe, impossible d'ajouter un calque personnalisé ou un groupe de calques
        • Une polyline est considérée comme calque
        • La seule manière est que pour chaque polyline il faut faire: polyline.setMap(null)
        • Création d'un contrôle personnalisé: Bouton avec liste déroulante (pour une sélection du type de route)
        • Interaction entre le contrôle est la carte: Par le biais du contrôleur GMaps

14.10.2014

  • Développement
    • Recherche d'une solution de décoration des polylines sur LeafLet
      • Il existe un plugin Leaflet.PolylineDecorator
      • Le problème est qu'il n'existe que des symboles défini ou il faut utiliser des icones
    • Essai avec un icone --> devient beaucoup trop lent quand le zoom grandit
    • Avec tous les symboles, dès que le zoom est grand ça ralentit passablement l'application
    • Méthode à oublier

13.10.2014

  • Rdv avec Mr. Grünenwald (0.5h)
    • Planning
      • Rattraper les jours manqués en travaillant le week-end du 18-19.10 et 25-26.10 (rendu le 26.10)
    • Présentation de la fonctionnalité de base
    • TODO
      • Afficher les deux sens des routes
      • Donner la possibilité à l'utilisateur d'afficher ou pas le surlignage des routes
      • Sélectionner le type de route à surligner
      • Fonctionnalité organisateur
        • Transmettre par le biais de Twitter les conditions du trafic dans un certain rayon au tour d'un point
        • Deuxième à réfléchir
      • Rapport
  • Développement (8h)
    • Recherche (4.5h)
      • Réflexion sur un moyen mathématique pour décaler chaque voies d'un côté de la route
        • Données utilisable: le sens de la voie, les coordonnées GPS (peuvent être utiliser pour former un vecteur)
        • Trouver le vecteur perpendiculaire au vecteur formé par les coordonnées
        • Translater chaque coordonnées dans le sens du vecteur perpendiculaire d'une certaine distance
      • Recherche sur ce qu'il pouvait déjà exister dans cette idée
        • Rien trouvé concernant de telles opérations sur Google Maps
        • Mais sur Google Maps il est possible de "décorer" les polylines (exemples) avec des dessins en SVG
      • Décorer chaque côtés d'une polyline
    • Implémentation de l'idée de décoration (3.5h)
      • Créer un symbole qui affiche un point qui est décalé par rapport à la polyline (SVG: M 1,-1 1,1)
      • Donner la couleur voulue (par rapport au Jam Factor)
      • Masquer la polyline principale
      • Dessiner le symbole à chaque pixel de la polyline

12.10.2014

  • Développement (4.5h)
    • Correction du problème avec OSM (4.5h)
      • Ré-exécution de tous les tests fait le 10.10.2014
      • Le problème vient effectivement de la constructions des coordonnées, il fallait juste les convertir en float....

10.10.2014

  • Développement (9h)
    • Création d'un type Bounding Box général pour convertir les bbox de OSM et GMaps pour la requête à Here (3.5h)
      • OSM et GMaps donne les points Nord-Est et Sud-Ouest de la carte, alors que Here à besoin des points Nord-Ouest et Sud-Est
      • Création des deux méthodes dans le service convertBoundsOsm() et convertBoundsGMaps()
    • Surlignage des routes sur OSM (5.5h)
      • Utilisation du service trafficFlowService pour les coordonnées des polylines
      • Création des polylines dans un tableau sur lequel est bindé la carte
        • Erreur : Invalid data passed to the polyline path
        • Essayer de modifier tous les flags possible
        • Ecriture d'une polyline en dur à la place (couleur, coordonnées) ça fonctionne
        • Modifier la couleur dans le service --> ça change donc le problème vient des coordonnées
        • Test de la fonction de la création des coordonnées dans le service: Comparaison des coordonnées utilisées pour GMaps avec celle d'OSM --> ok
        • Problème à corriger!!!

09.10.2014

  • Rdv pour consultation à l'hôpital (10h20-13h)
  • Développement (7.5h)
    • Rafraîchissement des polylines (4.5h)
      • Recherches
        • Le problème de rafraîchissement viens du fait que Google Maps redessine toutes les polylines qui ont été ajouté à la carte
        • Il faut donc à chaque fois supprimer les polylines de la carte (exemple)
      • Création d'un tableau en attribut du contrôleur GMaps pour stocker les polylines
      • Création de la fonction de reset des polylines
        • Problème de mémoire --> remettre le tableau à vide à la fin
    • Couleur de surlignage des routes en fonction du Jam Factor (3h)
      • Dans un premier temps: la couleur se calculais en fonction du JamFactor lors de la création de la polyline dans le contrôleur GMaps
      • Mais une solution plus simple est de faire ça dans le service (trafficFlowServiceMod.js) et d'ajouter un champ couleur à utiliser ensuite dans le contrôleur GMaps

08.10.2014

  • Développement (9h)
    • Recherche d'un moyen pour transmettre les données d'information trafic aux contrôleurs, avec AngularJS il existe un moyen: les services (1.5h)
    • Implémentation d'un service pour les données trafic (4.5h)
      • Copie du contenu de trafficFlowCtrlMod.js dans trafficFlowServiceMod.js
      • Modification des boucles pour la créations des données à passer aux contrôleurs (elles étaient erronées)
      • Modification de la fonction de rechargement des données
    • Utilisations du service dans Google Maps (1.5h)
      • Inclusion du module
      • Modification de la création des polylines
    • Surlignages des routes (1.5h)
      • Le problème venait des boucles lors de la construction des données dans trafficFlowCtrlMod.js (maintenant trafficFlowServiceMod.js)
      • Affichage avec la directives <polylines>: beaucoup trop lent! --> le passage des polylines se fait dans le code en arrière-plan (exemple)

07.10.2014

  • Fix Erreur CORS (1h)
    • WebStorm a son propre serveur pour le débogage
    • Et en utilisant JetBrain IDE Support sur Google Chrome il est automatiquement utilisé lors de l'exécution
    • C'est donc de là que venait l'erreur
    • Il suffit de suivre cette explication et d'ajouter http://traffic.cit.api.here.com/*
  • Développement (8h)
    • Fin du parsing des coordonnées GPS trafic info Here.com
      • Chaque coordonnée GPS est contenue en deux type, pour Google Maps et OpenStreetMap
      • Toutes les coordonnées sont stockées dans un tableau
    • Essais d'afficher les données parsées sur Google Maps
      • Création des polylines dans le contrôleur appGMAPSDirectives.js
      • Essai d'ajout dynamique de la directive <polyline>
      • Avec la directive <polylines> qui se bind sur un model (en l'occurrence les polylines créées)
      • Les deux solutions n'ont pas fonctionnées
    • Problèmes possibles
      • Rafraîchissement des données: Le passage des données du contrôleur de trafic au contrôleur de Google Maps se fait dans la page html avec une directive Angular, et peut être appelé de multiples fois à la suite
      • Le parsing des coordonnées n'est pas complet

06.10.2014

  • Développement (2.5h)
    • Parsing de la requête de Nokia
      • Extraction des données utiles de chaque RW
        • FI Flow information
        • SH de chaque FI, correspondant à la forme de la route (suite de coordonées GPS)
        • Et le CF qui a pour attribut JF (JamFactor)
  • Toujours malade je n'ai pas pu continuer à travailler

03.10.2014

  • Développement (6.5h)
    • Création d'un contrôleur pour les information trafic
    • Requête sur les informations trafic Nokia (5h)
    • Début du parsing de la requête
      • Extraction des <RW> et les stocker dans un tableau
      • Seul les routes suisses sont retenue (code country = 409)

02.10.2014

  • Malade

01.10.2014

  • Rdv avec Mr. Grünenwald (0.5h)
    • Rechercher une documentation Google pour les informations sur les routes
    • Garder la forge à jour
    • Refaire un planning pour la fin du projet (si jugé nécessaire)
    • Objectif pour le prochain rendez-vous: Finir la fonctionnalité de base + définir les fonctionnalités organisateurs
  • Mise à jour de la forge (5.5h)
    • Mise à jours du journal de travail
      • 23.09.2014
      • 24.09.2014
      • 25.09.2014
      • 26.09.2014
      • 27.09.2014
      • 29.09.2014
      • 30.09.2014
  • Migration du projet sur WebStorm IDE (0.5h)
  • Recherche sur Google Maps (1h)
    • Sur plusieurs site communautaire on trouve des personnes voulant chercher les attributs des routes sur Google Maps (ici et ici). Les réponses ne sont pas positives et les redirige vers des outils à liscence libre
    • Sur la documentation on ne trouve rien, mis à part ceci : Map Maker roads
  • Développement (1.5h)
    • Etudes de la formulation des polylines pour Google Maps for AngularJS
    • Le contenu est différent du format pour Leaflet
    • Créer deux contrôleur différent ?

30.09.2014

  • Développement (8.5h)
    • Bounding Box Leaflet (2.5h)
    • Implémentation (6h)
      • Récupération de la Bounding box
      • Passer les valeurs de la Bounding box dans la requête (l'ordre des valeurs se fait comme suit: latitude sud-ouest, longitude sud-ouest, latitude nord-est, longitude nord-est) All data in bounding box OverPass API
      • Affichage des routes
      • Listeners sur les événements zoomend (quand l'action zoom est terminée) et moveend (quand l'action move est terminée)
      • Rafraîchissement des données lors l'appel des événements ci-dessus
      • Si la Bounding box est trop grande (pas assez de zoom) la page plante -> trop de données à traiter
      • L'affichage des informations sur les routes est buggé lorsque l'on rafraîchit les données

29.09.2014

  • Développement (8h)
    • Correction du problème pour les paths (2h)
      • A l'aide des exemples et de la relecture, il s'agit d'une erreur qui se trouvait dans la création des nœuds, la clé JSON de la longitude doit être " lng " et non " lon "
      • Ce qui est confus c'est que lors de la réception des données la clé pour la longitude est " lon "
    • Surlignage des routes (6h)
      • Passage des paths à la carte
      • L'affichage se fait correctement, mais seulement autour d'une coordonnée GPS
      • Recherche d'un moyen pour trouver la bounding box de la carte avec Leaflet
        • L'attribut bounds de la carte permet de récupérer ces données
        • A l'aide cet exemple
        • Création d'un champ bounds dans le contrôleur roadsCtrl
        • Affichage des résultats dans des inputs
        • Je n'ai pas réussi à récupérer les valeurs de bounds dans le contrôleur, ça ne met pas à jour la variable pourtant passée à l'attribut bounds de la carte
        • Essai avec l'expression ng-change sur les inputs (détecte la modification de la valeur d'un champ de formulaire seulement lorsque c'est l'utilisateur qui la modifie et pas quand c'est dynamique comme dans ce cas)
        • Recherche d'un autre moyen de récupérer la bounding box

27.09.2014

  • Développement (9h)
    • Modification de la requête OverPass (7.5h)
    • Il existe énormément de type de route Key:Highway OSM
    • La requête précédente n'incluait pas le route de type "_link", qui correspond à des connexions entre les routes (ronds-point, bretelles, etc...)
    • Suite à plusieurs recherches j'ai trouvé cette requête). Elle récupère les routes à proximité des ponts.
    • J'ai récupéré la manière d'extraire les routes (way["highway"~"^((primary|secondary|trunk|motorway)(_link)?)$"])
    • La requête donne maintenant toutes les primary, secondary, trunk et motorway mais également les connexions (primary_link, secondary_link, trunk_link et motorway_link)
    • Affichage des routes récupérées (1.5h)
      • Toujours des problèmes dans la formation d'un path
      • Recherche d'exemple pour l'affichage d'une polyline sur LeafLet (Exemple1, Exemple2)
      • Pas trouvé le problème, à approfondir

26.09.2014

  • Développement (8h)
    • Modification du contrôleur de chemin et noeuds (roadsController) (3.5h)
      • Tri des données nécessaire pour l'affichage sur OSM
      • Nouvelle variable dans le contrôleur : paths. Elle contient tous les chemins path:
        • Un path contient : un id (id du way de la requête), une couleur (pour le moment tous en vert), une largeur de trait (pour le moment une largeur de 5), les tags du chemin, une liste des points GPS qui forment le chemin et un message qui affiche le nom du chemin et les tags
    • Affichage des données (4.5h)
      • Passage des paths à la carte OSM
        • Quelques erreurs de parsing encore sur les coordonnées GPS
        • Mal formation des objet path
      • Trop de route sont dans les données, les limiter sur la requête
        • Il faut enlever les routes de types "footway", "living_street", "residential", "steps", "service" et "path" (ce sont les types de routes trouvée sur la carte, il peut en exister plus encore)
        • Requête: [out:json];(way["highway"]["highway"!="footway"]["highway"!="living_street"]["highway"!="residential"]["highway"!="pedestrian"]["highway"!="steps"]["highway"!="service"]["highway"!="path"]["highway"!="cycleway"]["name"]["area"!~"."](around:500,46.989566,6.929408);>;);out body;

25.09.2014

  • RDV avec Mr. Grünenwald (0.5h)
    • Présentation du travail fait
    • Créer un doodle pour les dates pour la défense
    • Se renseigner sur les Web Component
  • Développement (8h)
    • Un autre moyen existe pour afficher les cartes (Google Maps for AngularJS et LeafLet Directive for AngularJS)
    • Affichage des deux cartes avec ces nouveaux outils (une carte dans un fichier) (1.5h)
    • Affichage des deux cartes sur une seule page (6.5h)
      • Je n'ai pas réussi à afficher les deux cartes côte à côte sur une page
      • En afficher qu'une alors que les deux modules (google-maps et leaflet-directive) sont inclus dans le module principal ne fonctionne pas non plus
      • D'après le message d'erreur il y aurait un conflit entre deux attributs des cartes (markers)
      • J'ai donc décider de faire dans deux fichiers séparés

24.09.2014

  • Développement (9h)
    • Parsing de la requête (3h)
      • Création d'un filtre pour trier les nœuds et chemins
      • Stockage de ces deux types de données dans des tableaux
      • Mise en relation d'un chemin avec ses nœuds
    • Affichage sur la carte (OSM et GMAPS) (6h)
      • Ajout d'une propriété "markers" dans la directive de la carte
      • Affichage de marker sur les deux cartes
        • Possibilité d'afficher les nœuds sur la carte mais seulement lors de l'initialisation
        • Impossible d’interagir avec les cartes pendant l’exécution
          • Impossible d'ajouter des markers par la suite

23.09.2014

  • Développement (8.5h)
    • Première requête qui semble correcte formulée (1.5h) : [out:json];(way["highway"]["highway"!="pedestrian"]["name"]["area"!~"."](around:500,46.989566,6.929408);>;);out body;
      • Cherche de tout type de chemin n'étant ni pédestre ni une zone, à 500 mètres autour d'une coordonées GPS (46.989566,6.929408)
      • Résultat sur OverPassTurbo : overpassturbo_query1
    • Analyse des résultats de la requête (JSON) (2h)
      • Tous les nœuds (node) sont reçus à la suite avec un id
      • Chaque chemin (way) contient une liste des id's des nœuds qui le forme
    • Création d'un contrôleur pour les chemins et nœuds (5h)
      • Implémentation de la requête OverPass dans AngularJS
      • Début de Parsing de la requête
        • Recherche d'un moyen existant sur AngularJS pour trier des données JSON
        • Des filtres peuvent être utilisés mais pour des données JSON il en créer un personnalisé

22.09.2014

  • Développement (4.5h)
    • Recherche une manière de récupérer la route autour d'une coordonnées GPS
      • Avec OverPass API (données de OSM), on peut récupérer les données voulues
      • Pour GoogleMaps je n'ai rien trouvé
    • Début d'implémentation pour la récuprération avec OverPass API

20.09.2014

  • Développement (8h)
    • Continuation sur l'idée d'un contrôleur de carte (5h)
      • Je n'ai jamais réussi à afficher une carte simple
    • Suite à quelques recherches, intégration de cette manière des cartes: vidéo d'exemple
      • Affichages des deux cartes
      • Ajout d'un marker sur chaque carte
    • Il existe également un ensemble de directives déjà implémentées pour intégrer GoogleMaps: Google Maps for AngularJS (à essayer?)

19.09.2014

  • Fin tutoriel sur AngularJS (4.5h)
    • Leçons 3.9-5
      • Directives personnalisées
      • Hiérarchisation des fichiers
      • Templating
      • Dépendences, services
  • Rdv avec Mr. Grünenwald et Mr. Kaluzny (0.5h)
    • Présentation générale du projet
    • Présentation de l'état d'avancement
  • Prise en main (4h)
    • Première implémentation d'un application avec deux carte (GoogleMaps et OpenStreetMap) côte à côte sans AngularJS
      • GoogleMaps JavaScript API v3
      • OpenStreetMap: Affichage avec la librairie Leaflet
    • Début de développement avec AngularJS, idée:
      • Contrôleur de carte

18.09.2014

  • Mise à jour de la documentation des données traffic (3.5h)
    • Ajout de l'explication des données du flot de trafic
    • Ajout d'un exemple
    • Documentation: API_traffic_data_Here.pdf
    • Bing Utilise les données d'information trafic de Nokia Here
    • Les codes d'identification d'incident suivent une norme ISO (14819-1)
  • Mise à jour du journal de travail (1h)
    • 17.09.2014
  • Tutoriel sur Angular.js (3.5h)
    • Leçons 1-3.9
      • Introduction à Angular
      • Notion de Module
      • Notion de Directive (ng-hide, ng-show, ng-repeat, ng-src, ng-click, ng-class)
      • Notion de Controller
      • Notion de Filtre (currency)
      • Opération sur les Form (binding, validation)

17.09.2014

  • Recherche de documentation sur les données du flot de trafic (4.5h)
    • Très peu de documentation sur la signification des champs
    • Sur une requête simple les informations de localisation son au format TMC (Traffic Message Channel)
      • Attribut important dans le cas de bouchon : JF = Jam Factor [0.0 - 10.0] Facteur d'indication sur la sévérité du bouchon (0=rien, 10=critique)
    • Un paramètre peut être ajouté dans la requête
      • responseattributes: Il permet d'ajouter deux informations supplémentaires à la réponse, le type de route (fc = Functional Class) et la forme de la route (sh = Shape) (à ajouter dans la requête: &responseattributes=sh,fc)
      • Dans la réponse, chaque route est représentée par plusieurs champs <SHP> avec comme attribut FC pour le type de route (FunctionalClass). Ce champ contient plusieurs coordonées GPS qui sont les points à utiliser pour dessiner la partie de la route.
      • Chaque <SHP> est un bout de route
  • Implémentation d'un exemple simple avec JQuery et des données de trafic dans un fichier XML + dessin sur Google Maps (5h)
  • A faire: Complémenter la doc exemple_incident_data_here.pdf

16.09.2014


15.09.2014

  • Rdv avec Mr. Grünenwald (0.5h)
    • Confirmation du planning Planning Final
    • Rendre la synthèse sur les services de cartographie
    • Choix des APIs d'information trafic (doc)
    • Proposition de Framework JS: AngularJS
    • Lors du développement, diviser en sous-objectifs la prise mains des APIs pour les cartes (Google Maps et OpenStreetMap). Ne pas passer au prochain tant que l'objectif n'est pas atteint dans les deux
    • Voir pour laisser le choix à l'utilisateur de la source des données d'info trafic
  • Données d'inf trafic (5h)
    • Obtention de clés pour les services suivants:
    • Viasuisse : Envoi d'un mail pour une demande d'exemple de données ou une solution pour les récupérer
    • Here.com
    • Bing
    • Essai de mapper un accident reçu depuis Here.com (lecture du code XML) sur Google Maps (en coordonnées GPS) --> Le point donne sur le même carrefour
  • Fin de la mise au propre de la synthèse sur les services de cartographies + explications des choix dans conclusions (3h)
    • Critères retenus
      • Type de licence
      • Explorateurs supportés
      • Fournisseur de données
      • Détail de l'emplacement
      • Information trafic disponible
      • Différentes APIs disponibles
    • MapServices.pdf

13.09.2014

  • Modification du planning (3h)
    • Prise en compte des remarques de Mr. Grünenwald (par mail)
      • Avancer le début développement, mettre en parallèle la prise en main des outils et le choix des outils (19.09.2014)
      • Finir le développement plus tôt (suggéré: 1 semaines avant la fin de projet) finalement 10 jours avant la fin (15.10.2014)
      • Détailler le choix des outils (Recherche d'API Info Trafic et Choix du framework JS)
      • Détailler le rapport entre Google Maps et OpenStreetMap (Va être mis à jour tout au long de l'avancement de l'application)
    • Planning Final
  • Recherche sur les données des routes pour Google Maps (4h)
    • Tutorial Google Maps Engine
      • Pas de données de la part de Google, Google Maps Engine est fait pour des données personnelles
  • Début de la synthèse sur les services de cartographie (1h)
    • Yahoo Maps et Bing Maps

12.09.2014

  • Recherche et résumé sur les services de cartographie en ligne (6h)
    • Modification sur le tableau comparatif
    • Fin des recherche sur MapQuest
    • Recherches sur Nokia Here
      • Est utilisé par beaucoup d'autre services
      • API intéressante
    • Recherche sur Google Maps
      • Le seul qui n'utilise pas de services d'autre
      • Difficulté de trouver des données sur les routes
      • Calques d'informations trafic disponibles (données brutes ?)
    • Recherche sur OpenStreetMap
      • Le seul en licence libre
      • Grande quantité de données
  • Lecture de doc sur les APIs (Nokia Here, Bing) (3h)

11.09.2014

  • Début de documentation sur les services de cartographie en ligne (8h)
    • Recherche et résumé sur les premiers services de cette Liste (Yahoo! Maps, Bing Maps et MapQuest)
  • Données sur le trafic (1h)

10.09.2014

  • Documentation (5h)
    • Mise en place d'un tableau comparatif sur les services d'inforoute selon les critères suivant:
      • National/international
      • Nombre de représentations disponible
      • Nombre de catégorie à choix (par ex.: trafic, accidents, travaux, cols,...)
      • Possibilité de pointer un lieu
      • Autres fonctionnalités

09.09.2014

  • Mise au propres du plan de rattrapage (PlanRattrapageV1) (0.5h)
  • Rdv Mr. Grunenwald (0.75h)
    • Reprendre les résultats de recherche et plus les détailler
      • Tableau récapitulatif sur les service existant
      • Significations des symboles
      • Commencer une doc sur les services de cartographie
    • Réfléchir sur une stratégie de représentation
    • Voir les services web offrant des données sur le trafic
    • Modification du plan de rattrapage (PlanRattrapageV2)
      • Les jours de rattrapages seront les samedis 13.09, 20.09 et 27.09
    • Rendez-vous tous les lundi à 10h30
    • Pour prochain rdv
      • Planning complet
      • Complémenter la documentation sur les services existants
      • Commencer une doc sur les services de cartographie
  • Planning (7h)
    • Liste des tâches
    • Établissement du planning (PlanningV1)

08.09.2014

Absent


05.09.2014

  • Comparaison GoogleMap-OpenStreetMap (9h)
  • Recherche d'un ouvrage: Sémiologie Graphique, Jacques Bertin

04.09.2014


03.09.2014

  • Recherche sur l'existant (6h)
  • Comparaison GoogleMap-OSM (2.5h)
  • Rdv Mr. Grunenwald (0.5h)
    • But principal: Représenter des données graphiquement
    • Réfléchir à un format de données convenable
    • Proposer plusieurs mode de représentation
    • 2 Maquettes, une GoogleMap et une OpenStreetMap
    • Planning complet pour le 12.09 (env.)
  • Tips:
    • Limiter le temps dans les recherches
    • Regarder les solutions en Asie
    • Livre: La Semiologie Graphique, Jacques Bertin
  • Pour prochain rdv (Lun. 8.09):
    • Présenter les solutions existantes
    • Comparaison entre GoogleMap et OpenStreetMap
    • Plan (rattrapage)