IMA4 2016/2017 P44
Sommaire
Cahier des charges
Présentation générale du projet
L'idée générale de ce projet est de donner une seconde vie aux minitels en les transformant en terminaux d'accès internet.
Contexte
Le Minitel (Médium interactif par numérisation d'information téléphonique) est un type de terminal informatique qui était destiné à la connexion au service français de Vidéotex baptisé Télétel. Lancé en 1980 en France, il permettait d’accéder à de nombreux services (annuaire, jeux, vente par correspondance, tchat ...) à une époque où peu de foyers possédaient un ordinateur. Le service a été arrêté en 2012, les minitels sont maintenant inutilisables et ne servent donc plus à rien, c'est pourquoi il peut être intéressant de leur donner une seconde vie afin d'éviter le gaspillage.
Objectif du projet
L'objectif du projet est d'adapter intégralement le site internet Facebook.com à l'affichage sur minitel. L'utilisateur doit pouvoir surfer sur son minitel de la façon la plus ergonomique possible.
Description du projet
Les minitels disposent généralement d'une prise série appelée prise péri-informatique permettant de communiquer avec le monde extérieur. En connectant une plateforme micro-contrôleur à cette prise série, on peut réaliser l'accès à des pages web et les afficher à l'écran. En raison de la petite taille d'affichage des minitels (24 lignes de 40 ou 80 caractères), il est nécessaire de mettre en place un proxy intermédiaire pour adapter les pages web à l'écran du minitel avant de lui les renvoyer pour affichage.
Choix techniques : matériel et logiciel
- Un Minitel 1 Bistandard Alcatel Telic (permet d'afficher 24 lignes de 80 caractères à l'écran et la transmission par voie série jusqu'à 4800 bauds)<br\>
- Un connecteur DIN 5 broches.
- Une plateforme micro-contrôleur Arduino Uno.
- Une extension Ethernet pour plateforme Arduino.
Calendrier prévisionnel
Liste des tâches à effectuer
- Communiquer avec le minitel via la prise série et afficher du texte à l'écran.
- Visualiser la partie texte seule des pages de Facebook.com à l'aide d'un navigateur adapté afin de réfléchir à comment adapter l'affichage.
- Piloter la carte Ethernet avec l'Arduino.
- Réaliser le proxy intermédiaire pour adapter les pages web à l'affichage du minitel.
Calendrier
Feuille d'heures
| Tâche | Prélude | Heures S1 | Heures S2 | Heures S3 | Heures S4 | Heures S5 | Heures S6 | Heures S7 | Heures S8 | Heures S9 | Heures S10 | Total |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Définition cahier des charges | 2 | 2 | ||||||||||
| Rédaction du wiki | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 10 | |
| Lecture de la documentation du minitel | 1 | 1 | 1 | 1 | 4 | |||||||
| Recherches, appropriation du matériel | 6 | 4 | 10 | |||||||||
| Fabrication du câble | 2 | 2 | ||||||||||
| Codage du programme pour établir la communication série entre l'arduino et le minitel | 4 | 2 | 6 | |||||||||
| Navigation sur Facebook en mode texte | 4 | 4 | ||||||||||
| Programmation de l'interface graphique du 3615 Facebook | 5 | 5 | 5 | 5 | 20 | |||||||
| Pilotage de l'ethernet shield et programmation d'un client web sur arduino | ||||||||||||
| Création du proxy d'adaptation des pages de Facebook | 4 | 6 | 6 | 10 |
Avancement du Projet
Semaine 1
Cette première semaine a été consacrée au rassemblement du matériel nécessaire et à sa prise en main, ainsi qu'a des recherches sur internet.
Prise en main du minitel
Le minitel que nous avons à notre disposition est bistandard, c'est à dire qu'il dispose de deux standards :
- Un standard Télétel comprenant deux modes :
- Un mode Vidéotex qui est le mode actif à la mise sous tension du minitel
- Un mode mixte
- Un standard téléinformatique
Nous allons utiliser le mode mixte car il permet d’utiliser l'écran en mode 80 colonnes de caractères (au lieu de 40 en mode Vidéotex), des échanges bidirectionnels simultanés quand le minitel est relié à un autre appareil via sa prise péri-informatique et l'utilisation des commandes protocole permettant par exemple de modifier la vitesse des échanges avec le périphérique en envoyant une commande spécifique avec le périphérique via la prise.
Les commandes intéressantes pour configurer notre minitel sont les suivantes :
| Tâche | Commande clavier | Commande par la prise (Hexadécimal) |
|---|---|---|
| Passage au standard téléinformatique | Fnct + T puis F | 1B 3A 31 7D |
| Passage du mode Vidéotex au mode mixte | Indisponible | 1B 3A 32 7D |
| Passage de l'écran en mode page/rouleau | Fnct + E puis P / Fnct + E puis R | 1B 3A 6A 43 / 1B 3A 69 43 |
| Modifier la vitesse de la prise (1200 bauds par défaut) |
Fnct + P puis 3 pour 300 bauds <br\> Fnct + P puis 1 pour 1200 bauds <br\> Fnct + P puis 4 pour 4800 bauds |
1B 3A 6B 52 <br\> 1B 3A 6B 64 <br\> 1B 3A 6B 76 |
Semaine 2
Fabrication du câble pour connecter le minitel et l'arduino
Lors de cette semaine, nous avons fabriqué le câble qui servira à la communication entre l'arduino et le minitel. Pour cela, nous avons acheté un connecteur DIN 5 broches sur lequel nous avons soudé 5 fils d'un vieux câble ethernet. Après avoir refermé le connecteur, nous avons dénudé les fils à l'autre extrémité afin de pouvoir les relier aux bonnes broches de l'arduino.
Figure 1 : Broches de la prise péri-informatique du minitel
Figure 2 : Soudage des fils sur le connecteur DIN
Correspondance fils/broches :
| Numéro de la broche | Fonction | Couleur du fil |
|---|---|---|
| 1 | Entrée RX | Bleu |
| 2 | 0V | Vert |
| 3 | Sortie TX | Orange |
| 4 | Entrée PT | Marron |
| 5 | Sortie 8,5V 1A | Blanc |
Semaine 3
Communication série entre le minitel et l'arduino
Ayant réalisé le câble permettant de connecter la prise péri-informatique du minitel à l'arduino, nous avons essayé d'envoyer des caractères au minitel via la liaison série et de les visualiser à l'écran correctement.
D'après le manuel "Minitel 1 B Spécifications techniques d'utilisation" dont le lien est disponible dans le cahier des charges, les niveaux électriques de la prise du minitel sont compatibles avec le niveau TTL, collecteur ouvert :
- Un niveau de tension supérieur ou égal à 2,5 V présenté sur l'entrée RX sera interprété comme un "1" logique
- Un niveau de tension inférieur ou égal à 0,4 V présenté sur l'entrée RX sera interprété comme un "0" logique.
Le format des signaux RX et TX de réception et d'émission du minitel est fixe avec 7 bits de données plus un bit de parité paire.
Nous avons donc codé en C un programme pour l'arduino qui envoie en continu le caractère "a" sur le port série afin de s'assurer de la bonne communication avec le minitel . On utilise la bibliothèque avr/io.h de façon à écrire dans les registres de l'atmega 328 de l'arduino. Le code du programme est donné ci-dessous :
#include <avr/io.h>
// For the serial port
#define CPU_FREQ 16000000L // Assume a CPU frequency of 16Mhz
void init_serial(int speed) //initialisation de la liaison série
{
/* Set baud rate */
UBRR0 = CPU_FREQ/(((unsigned long int)speed)<<4)-1;
/* Enable transmitter & receiver */
UCSR0B = (1<<TXEN0 | 1<<RXEN0);
/* Set 7 bits character and 1 stop bit even parity */
UCSR0C = (2<<UPM00)|(2<<UCSZ00);
/* Set off UART baud doubler */
UCSR0A &= ~(1 << U2X0);
}
void send_serial(unsigned char c) //envoyer un carctère sur le port série
{
loop_until_bit_is_set(UCSR0A, UDRE0);
UDR0 = c;
}
unsigned char get_serial(void) //récupérer un caractère envoyé sur le port série
{
loop_until_bit_is_set(UCSR0A, RXC0);
return UDR0;
}
int main ()
{
init_serial(1200);
while(1)
{
send_serial('a');
}
return 0;
}
Semaine 4
Afin de voir à quoi ressemble facebook en mode texte, nous avons installé le navigateur web Links pour linux qui n'affiche que le texte des pages web. La version pour ordinateur de facebook nécessite JavaScript, elle ne peut donc pas fonctionner correctement sur ce type de navigateur. On utilise par conséquent la version mobile de facebook (http://m.facebook.com) plus simple et donc plus adaptée pour un affichage rudimentaire (affichage très limité du minitel). On remarque que faute de pouvoir afficher les images, le navigateur affiche une description de celles-ci.
Figure 4 : Facebook mobile en mode graphique
Figure 5 : Facebook mobile en mode texte
Figure 6 : Page Facebook de Polytech Lille en mode graphique
Figure 7 : Page Facebook de Polytech Lille en mode texte
Semaine 5
Programmation de l'interface graphique du 3615 Facebook
Nous utilisons le minitel en mode mixte de façon à pouvoir utiliser les commandes protocole (passage en mode mixte, réglage de la vitesse de la prise en 4800 bauds, blocage de l'écran) et l'affichage en 80 colonnes de caractères à l'écran (voir semaine 1). Dans ce mode, peu d'attributs de visualisation des caractères sont disponibles, mais cela suffit pour faire une interface ergonomique. Les attributs disponibles sont donnés dans le tableau ci-dessous ainsi que le code à envoyer au minitel avant les caractères auxquels on veut appliquer l'attribut.
Attributs de visualisation des caractères
| Attribut | Code (Hexadécimal) |
|---|---|
| Aucun | 1B 5B 30 30 6D |
| Surintensité / Intensité normale | 1B 5B 30 31 6D / 1B 5B 32 32 6D |
| Souligné / Non souligné | 1B 5B 30 34 6D / 1B 5B 32 34 6D |
| Clignotant / Non clignotant | 1B 5B 30 35 6D / 1B 5B 32 35 6D |
| Fond inversé / Fond normal | 1B 5B 30 37 6D / 1B 5B 32 37 6D |
Des fonction de mise en page sont aussi disponibles en mode mixte, elles nous permettent à tout moment d'agir sur la position du curseur de façon à pouvoir positionner du texte à différents endroits sur l'écran. Ces fonctions avec le code correspondant sont données dans le tableau ci-dessous.
Fonctions de mise en page
| Fonction | Code (Hexadécimal) |
|---|---|
| Déplacement du curseur d'une colonne vers la gauche | 08 |
| Déplacement du curseur de 8 colonnes vers la droite | 09 |
| Déplacement du curseur d'une ligne vers le bas | 0A |
| Retour du curseur en position 1 de la ligne courrante | 0D |
| Effacer l'écran | 1B 5B 32 4A |
| Mettre le curseur en première ligne, première colonne | 1B 5B 00 3B 00 48 |
| Bloquer l'affichage sur l'écran / Débloquer | 1B 3B 60 58 50 / 1B 3B 61 58 50 |
Organisation modulaire du code
Notre programme arduino en C comporte 4 fichiers .c et les .h correspondant ainsi que que le fichier main.c et un Makefile.
- arduino.c contient les fonctions de configuration et d'utilisation de la liaison série de l'arduino.
- minitel.c contient les fonctions de configuration du minitel.
- affichage.c contient les fonctions gérant l'affichage à l'écran de l'interface graphique du 3615 facebook.
- ethernet.c contient les fonctions relatives à la configuration et à l'utilisation de l’Ethernet Shield.
- main.c contient la fontion main gérant l'exécution du programme d'affichage.
Semaine 6
Programmation de l'interface graphique du 3615 Facebook (suite)
Le minitel ne comportant ni souris, ni écran tactile, il est nécessaire de créer une interface qui se commande uniquement au clavier. L'ergonomie est donc un critère capital sur un terminal de ce type ayant, de plus, un affichage plutôt limité. Pour concevoir l'interface, nous nous sommes inspirés des pages minitel de l'époque qui utilisaient les touches de fonction (Sommaire, Annulation, Retour, Guide, Envoi ...) pour naviguer dans les différents menus. Une touche sera représentée à l'écran en noir sur fond blanc à coté du nom du menu correspondant. Les champs seront représentés par des "underscore" (Recherche : ____________________). Un prototype de la page "fil d'actualité" de Facebook sur minitel est donné ci-dessous. Sur cet exemple de page, on peut par exemple "liker" le premier post en appuyant sur la touche "1" du minitel puis sur "J" ou voir la page des notification en appuyant sur "Guide" ou encore afficher les posts suivants en appuyant sur "flèche bas".
Problème mémoire avec l'arduino uno
Lors du codage de l'application sur l'arduino, nous avons constaté un problème avec les chaînes de caractères. En effet, le programme compile correctement, mais les dernières chaines de caractères de notre programme ne s'affichent pas correctement sur le minitel. Cela est dû au fait que les chaines de caractères sont stockées dans la mémoire SRAM de l'arduino et que cette mémoire ne peut contenir que 2048 octets. Nous avons cependant besoin de stocker beaucoup de chaines de caractères dans l'arduino. Une solution existe à ce problème, il est possible de stocker les chaines de caractères dans la mémoire flash de l'arduino (mémoire de programme) qui peu contenir 32 Ko.
Pour stocker une chaîne de caractères dans la mémoire flash, on utilise l'attribut PROGMEM de la bibliothèque avr/pgmspace.h :
static const char chaine[] PROGMEM = "Chaine de caracteres";
Pour lire les chaîne de caractères stockées dans la mémoire flash et les envoyer sur le port série pour l'affichage sur l'écran du minitel, on utilise la fonction suivante :
void afficher_flash(const char chaine[])
{
int k;
char myChar;
int len = strlen_P(chaine);
for (k = 0; k < len; k++)
{
myChar = pgm_read_byte_near(chaine + k);
send_serial(myChar);
}
}
https://www.arduino.cc/en/tutorial/memory
Semaine 7
Caractères affichables sur le minitel
Le minitel dispose deux jeux de caractère :
- Un jeu américain
- Un jeu français
L'utilisation des deux jeux de caractère est nécessaire car le caractère '@' est dans le jeu américain et les caractères accentués sont dans le jeu français. La configuration du clavier en jeu français ou américain se fait en envoyant l'octet 0x0E ou 0x0F. Le clavier sera configuré en jeu américain sur la page de connexion pour pouvoir taper l'arobase de l'adresse mail et en jeu français sur toutes les autres pages.
- Figure 9 : Codes et touches correspondant aux différents caractères affichables sur le minitel en mode mixte
Semaine 8
Création d'un proxy pour adapter les pages de Facebook à l'affichage sur minitel
L'arduino uno ne comportant que très peu de mémoire vive (2 ko), il est difficile de se connecter et de récupérer directement les pages Facebook avec l'ethernet shield installé sur celui-ci. En effet, les pages html de Facebook comportent beaucoup trop de caractères dont la grande majorité sert à l’esthétique du site. Par exemple, la page de connexion pour appareils mobiles https://m.facebook.com/ comporte plus de 20 000 caractères, et cela est pire sur la version pour ordinateur qui comporte en plus du JavaScript. Nous n'avons de plus besoin que du texte brut des pages pour afficher sur notre minitel, d'où la nécessité de le filtrer. Pour cela, on met en place un serveur web http Apache 2 qui va héberger notre proxy intermédiaire sur lequel l'arduino va se connecter. On installe aussi PHP ainsi que son extension cURL qui permet de récupérer le texte des pages web et de le stocker dans une chaîne de caractères avant de le modifier à l'aide des fonctions de gestion et de manipulation des chaînes de PHP ( http://php.net/manual/fr/ref.strings.php) et de le réafficher sur la nouvelle page.
Semaine 9
Connexion à un compte Facebook directement depuis le serveur Apache
Pour pouvoir entrer l'adresse e-mail ainsi que le mot de passe de connexion à un compte Facebook directement depuis le minitel, il faut trouver une méthode permettant de remplir automatiquement les champs correspondants du formulaire PHP de la page "connexion" de Facebook. Nous avons tout d'abord essayé de nous connecter en créant une page avec un formulaire comportant les champs e-mail et mot de passe et qui envoie ces données à la page de connexion à facebook via la méthode POST. Cependant, Facebook détecte les tentatives de connexion venant d'une page extérieure au site et empêche la connexion (voir figure 10). Nous avons donc du trouver un moyen de contourner la sécurité de facebook. Pour cela, nous avons utilisé les fonctions cURL de PHP.
Filtrage du texte des pages Facebook récupérées via les fonctions cURL
Une fois qu'on a récupéré la page d’accueil de facebook connectée sur un compte avec cURL dans une variable $p, on découpe le texte utile de la page avec les fonctions de traitement des chaînes de caractères de PHP. Pour cela, on commence par repérer les balises <p></p>, <a</a>, ou encore les balises <h3</h3>, <h5</h5> qui contiennent du texte. On utilise la commande strip_tags qui permet de supprimer des balises html.
$p=strip_tags($p, '<a>'); supprime toutes les balises html sauf <a</a>
Ainsi, cela permet de se débarrasser des nombreuses balises qui ne contiennent pas de texte à afficher telles que <div>, <span>... On se sert ensuite des balises restantes pour placer des caractères de séparation qui permettent de délimiter les différentes lignes de texte, les différents posts... On utilise la commande strstr qui permet de remplacer toutes les occurrences d'une chaîne de caractères dans la page.
$trans=array("<p>" => "<p>|");
$p=strtr($p, $trans); ici on remplace <p> par <p>| ce qui revient à ajouter le caractère | après chaque balise <p>
Une fois qu'on a placé tous les caractères de séparation dans le texte, on enlève toutes les balises qui restent dans le texte :
$p=strip_tags($p);
Ainsi, il ne reste que les caractères de séparation et le texte des balises. Les caractères de séparation sont interprétés par le minitel de différentes manières et ne seront pas affichés sur son écran. Ils permettent de gérer la mise en page du texte récupéré de façon à l'aérer et qu'il ne soit pas en un seul bloc. Les caractères de séparation introduits dans le texte récupéré par le proxy et leur signification pour le minitel sont donnés dans le tableau ci-dessous :
| Caractère de séparation | Signification pour le minitel |
|---|---|
| @ | Début de texte |
| Retour à la ligne | |
| % | Saut de ligne (double retour à la ligne) |
| { | Inversion du fond (texte noir sur fond blanc) jusqu'au prochain retour à la ligne |
