
**Labo image viewer**

Dans ce labo on nous a demander d'implementer un webserver qui va pouvoir afficher des images sur l'ecran de la mylab2

**Video de presentation**

[![Watch the video](https://i.imgur.com/aExWJzE.png)](https://youtu.be/3ZtmAOKuAjM)

**Installation initiale:**

Il faut commencer par relier l'ecran de la mylab avec la sama5d3

Pour ce qui est de la sama5d3 il faut faire les connections suivantes
```
MISO    pin1 - J16
MOSI    pin4 - J16
CLK     pin3 - J16
CS      pin10 - J15
GPIO data/cmd  pioA20 - J19
GPIO backlight pioA22- J19
```

![Image_base](https://i.imgur.com/iWUDH1Q.jpeg)

Pour la mylab 2 le cablage est le suivant
```
MISO    pin11 - P1
MOSI    pin12 - P1
CLK     pin13 - P1
CS      pin14 - P1
GPIO data/cmd  pin19 - P1
GPIO backlight pin9- P3
GND     pin 1 - P1
3.3V    pin 1 - P2
```

![Image_base](https://i.imgur.com/DL5Tyhd.jpg)


**Afficheur d'image**

En premier j'ai dévélopé un code en C qui va afficher une image sur l'ecran et ca de façon concurente.
Ce code ce trouve dans :
projet_sys_embarques->Lab2->Show_image
Vous pouvez le compiler avec la commande:
```
$make display
```
Et le programme va prendre une image en format .ppm et l'afficher sur l'ecran, 
pour cela il faut faire la commande suivante sur la carte:
```
$./display path_to_ppm
```

**Web server**

Pour commencer il va faloir modifier le code C sur plusieurs points:
```
1 On va mettre le code dans une boucle infinie
2 On va attende les signaux envoyés par l'API ici USR1
3 On va afficher toujour la meme image qui va etre changée par l'API a chaque affichage
```
Ce code ce trouve dans:
projet sys embarques->Lab2->show_image_signal
Vous pouvez le compiler avec la commande:
```
$make display
```
Et ce code sera rajouté au rcS et lancé avec l'option & a la fin pour la lancer en background

**API**

J'ai mis mon api dans un fichier apelé FLASK a la racine de ma carte.
On peut la lancer avec la commande:
```
$python api.py
```
Cela va lancer le serveur python a l'adresse 192.168.1.32:5000 et ce qui nous donne acces au methodes suivantes
```
192.168.1.32:5000/upload            méthode POST pour uploader une image sur le serveur, va la convertir au bon format et à la bonne taille
192.168.1.32:5000/list              médhode GET pour lister les images disponibles sur le serveur
192.168.1.32:5000/download/<file>   méthode GET pour télécharger une image depuis le serveur
192.168.1.32:5000/delete/<file>     méthode DELETE pour supprimer une image du serveur
192.168.1.32:5000/hello/<name>      méthode GET affichant le nom entré 
192.168.1.32:5000/display/<image>   méthode GET affichant l’image sur l’écran LCD
```
Par exemple je vais prendre l'image out.ppm qui est la suivante:

![Image_base](https://i.imgur.com/aVeBZzl.png)

Si je l'upload sur le serveur et que je lui demande de me l'afficher avec le lien:

![Image_base](https://i.imgur.com/kFRUW81.png)

Et voila le resultat sur l'écran

![Image_base](https://i.imgur.com/yWuskAA.png)

**Front End**

Pour pousser le projet un peu plus j'ai rajouter une frontend avec une page html qui va nous permetre d'acceder au differentes options de l'api crée precedement
On peut le lancer comme l'api avec la conmmande:

```
$python frontend.py
```
Cela va lancer le serveur python a l'adresse 192.168.1.32:800 le résultat est le suivant:

![Image_base](https://i.imgur.com/KJl6ejw.png)

On peut voir que on a acces a l'upload d'images et a un lien vers les images sur le serveur
Si maintenant on clique sur la liste des images:

![Image_base](https://i.imgur.com/8mjnyTI.png)

On peut voir que toutes les options de l'api sont disponibles pour chaque image.

Le tout maintenant fonctionel je l'ai ajouté au rcS et donc tout ce lance au demarage de la carte.

Comme derniere amelioration on pourait faire que les images contenues sur la clé usb soient aussi disponibles sur notre api.
