Arduino avec Oled ssd1306 et U8Glib

ARDUINO utilisation d'un afficheur graphique 128*64 de type Oled SSD1306 avec la librairie U8Glib

Pour les montages il nous faudras :

1 Arduino uno

1 afficheur OLED 128*64 sd1306 le miens viens d'ici , mais vous pouvez le prendre ailleurs du moment qu'il est i2c :)

1 module horloge temps réel DS3231 le miens viens d'ici (pour la suite des tutoriaux)

1 plaque d'essai et des cavaliers de pontage.

Accès direct : Premier exemple barre de progression

                        Deuxième expemple graphique avec lcd_assistant

                        Troisième exemple avec un DS3231

Premier exemple.

Une barre graphique qui va progresser de gauche a droite indéfiniment , ce qui nous permettras de comprendre la librairie utilisée ici la U8Glib

Pour le cablage rien de plus simple, il suffit de relier le SCL de l'afficheur au A5 de l'arduino et le SCA de l'afficheur au A4 , le VCC au 3.3v de l'arduino et surtout pas le 5v, le GND au GND de l'arduino.

Première chose insérer la librairie U8Glib , 2 solutions : la rechercher par le gestionnaires interne de l'ide arduino ou la télécharger ici puis l'installer.

entrer le code si dessous ou le télécharger ici :

***********************************************************

/*
Barre de progression avec bibliothèque U8Glib et afficheur Oled SSD1306 128*64 en I2c
Version 1.0
Arduino uno SCL en A5 et SDA an A4 + oled sur 3,3v arduino
*/

#include "U8glib.h"
// on prends le bon drivers de la lib U8Glib
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0|U8G_I2C_OPT_NO_ACK|U8G_I2C_OPT_FAST);    // Fast I2C / TWI

// initialisation de la variable pour incrémenter la barre
int largPos = 0;

void setup() {  
  u8g.setFont(u8g_font_tpssb); // on utilise une fonte choisie parmis le tableau de référence : https://github.com/olikraus/u8glib/wiki/fontsize
  u8g.setColorIndex(1); // Instruction pourt mettre pixel à on.(affiche le pixel en blanc)
}

void loop() {  
  //on débute l'affichage ici appel de la procédure
  u8g.firstPage();
  do {  
    u8g.drawStr( 0, 50, "Barre de Progression"); // on ecrit le texte aux coordonnées X et Y
    u8g.drawFrame(0,10,128,20); // on créer un rectangle vide (frame) avec les valeurs (x,y,largeur,hauteur)
    draw(); // on va a la fonction draw
  } while( u8g.nextPage() ); // on marque ici la fin de la procédure d'affichage
 
  // si cela est trop rapide ajouté une pause
  // delay(5);
 //Si la barre n'est pas encore a la position souhaité
  if(largPos < 108){
    // si cela n'est pas assez rapide incrémenter de plus que 1
    largPos++;  } // on incrémente de 1
  else{ // sinon
    largPos = 0; // on remet à 0.
  }  
}  
// fonction draw
void draw(){
    u8g.drawBox(10,15,largPos,10);   // on créer un rectangle plein de coordonnées et de dimensions (x,y,largeur,hauteur) et on incrémente donc sa largeur (largPos)
}

***********************************************************

Résultat :

Une petite vidéo

Deuxième exemple.

Nous allons créer une image et la transposer sur l'afficheur grâce a un programme nommer LCD_assistant que vous pouvez télécharger ici : Lcdassistant (433.68 Ko)

**************************************

/*
Utilisation de lcd_assitant et de paint ou  autre pour afficher un
graphisme sur Oled ssd1306 en i2c 128*64
créer une image avec votre logiciel de dessin de 128*64 en monochrome (2 couleurs)
Lancer Lcd_assistant charger l'image et mettre en Horizontal puis mettre un nom Dans Table name et faire Save output.
L'image de test affiche le texte 'LG LINUX 3D' en oblique sur l'écran  
*/

#include "U8glib.h"
// on prends le bon drivers de la lib U8Glib
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0|U8G_I2C_OPT_NO_ACK|U8G_I2C_OPT_FAST);  // Fast I2C / TWI

const uint8_t lglinux3d_image[] PROGMEM = { // on change juste le nom pour moi c'est lglinux3d_image et on insère juste les code obtenu avec le save output du LCD_assitant
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x03, 0xC0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x03, 0xC0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x03, 0xC0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x07, 0xC0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x07, 0x80, 0x00, 0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x07, 0x80, 0x03, 0xFF, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x0F, 0x80, 0x07, 0xFF, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x0F, 0x00, 0x0F, 0xC0, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x0F, 0x00, 0x1F, 0x00, 0x00, 0x01, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x1F, 0x00, 0x3E, 0x00, 0x00, 0x01, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x1E, 0x00, 0x3E, 0x00, 0x00, 0x01, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x1E, 0x00, 0x3C, 0x00, 0x00, 0x03, 0xE0, 0x03, 0xC0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x3E, 0x00, 0x7C, 0x1F, 0x00, 0x03, 0xC0, 0x03, 0xC1, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x3E, 0x00, 0x7C, 0x1F, 0xE0, 0x03, 0xC0, 0x03, 0xC1, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x3E, 0x00, 0x7C, 0x0F, 0xC0, 0x07, 0xC0, 0x07, 0xC1, 0xF8, 0x1E, 0x00, 0x00, 0x00, 0x00, 0x00,
0x7F, 0xF0, 0x7C, 0x03, 0xC0, 0x07, 0x80, 0x07, 0x83, 0xF8, 0x1E, 0x00, 0x00, 0x00, 0x00, 0x00,
0x3F, 0xFC, 0x3E, 0x03, 0xC0, 0x07, 0x80, 0x07, 0x83, 0xF8, 0x1E, 0x1E, 0x00, 0x00, 0x00, 0x00,
0x01, 0xF8, 0x3F, 0x07, 0x80, 0x0F, 0x80, 0x0F, 0x83, 0xFC, 0x3C, 0x1E, 0x00, 0x00, 0x00, 0x00,
0x00, 0x08, 0x1F, 0xC7, 0x80, 0x0F, 0x00, 0x0F, 0x07, 0xBC, 0x3C, 0x1E, 0x01, 0xE0, 0x00, 0x00,
0x00, 0x00, 0x0F, 0xFF, 0x80, 0x0F, 0x00, 0x0F, 0x07, 0xBC, 0x3C, 0x3E, 0x03, 0xE0, 0x00, 0x00,
0x00, 0x00, 0x03, 0xFF, 0x00, 0x1F, 0x00, 0x1F, 0x07, 0x9E, 0x7C, 0x3C, 0x03, 0xE3, 0xE0, 0x00,
0x00, 0x00, 0x00, 0x3F, 0x00, 0x1F, 0x00, 0x1E, 0x0F, 0x1E, 0x78, 0x3C, 0x03, 0xC1, 0xE0, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x1F, 0x00, 0x1E, 0x0F, 0x1E, 0x78, 0x7C, 0x07, 0xC1, 0xE0, 0x7C,
0x00, 0x00, 0x00, 0x00, 0x00, 0x3F, 0xF8, 0x3E, 0x0F, 0x0E, 0x78, 0x78, 0x07, 0xC1, 0xF0, 0xF8,
0x00, 0x00, 0x00, 0x00, 0x00, 0x1F, 0xFE, 0x3E, 0x1E, 0x0F, 0xF0, 0x78, 0x07, 0x80, 0xF1, 0xF0,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFC, 0x3C, 0x1E, 0x0F, 0xF0, 0xF8, 0x0F, 0x80, 0xF3, 0xE0,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x7C, 0x1E, 0x0F, 0xF0, 0xF0, 0x0F, 0x80, 0xFF, 0x80,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3C, 0x3C, 0x07, 0xE0, 0xF0, 0x0F, 0x00, 0xFF, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1C, 0x07, 0xE0, 0xF0, 0x1F, 0x00, 0x7E, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0xE0, 0xF0, 0x1F, 0x00, 0xFC, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xC0, 0xF8, 0x3E, 0x01, 0xFC, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7F, 0xFC, 0x03, 0xFC, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3F, 0xF8, 0x0F, 0x9E, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xF0, 0x1F, 0x1E, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3E, 0x1E, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7C, 0x1F, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38, 0x0F, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x80,
0x00, 0x00, 0x00, 0x00, 0x00, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x01, 0xFE, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x01, 0xFF, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xC0, 0xFC, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0xC0, 0xFF, 0xC0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0xC0, 0xFF, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0xC1, 0xF1, 0xF8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x01, 0xFF, 0x81, 0xE0, 0x7C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x01, 0xFE, 0x01, 0xE0, 0x3E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0xFC, 0x03, 0xE0, 0x3E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x1E, 0x03, 0xC0, 0x1E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x1F, 0x03, 0xC0, 0x1E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0x07, 0xC0, 0x3E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x10, 0x1F, 0x07, 0x80, 0x3E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x3C, 0x3F, 0x07, 0x80, 0x3E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x3F, 0xFE, 0x0F, 0x80, 0x7C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x1F, 0xFC, 0x0F, 0x00, 0xFC, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x03, 0xE0, 0x0F, 0x01, 0xF8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1F, 0xFF, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xFF, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};

void draw(void) {
  // on affiche notre image avec pour coordonnées (x,y,largeur*8,hauteur,nom de l'image) ici c'est du plein ecran :) 128*64  
  u8g.drawBitmapP( 0, 0, 16, 64, lglinux3d_image);
}

void setup(void) {
}

void loop(void) {
  // picture loop
  u8g.firstPage();  
  do {
    draw();
  } while( u8g.nextPage() );
 
  // on réaffiche l'image après un certain temps. ici 1 seconde
  delay(1000);
}

****************************************************************

Voici le code , l'imge bmp de 128*64 et le fichier de convertion obtenu avec LCD_assistant : Lglinux3d (6.34 Ko).

Le résultat :

Troisième exemple.

Toujours notre librairie u8glib et le ssd1306 oled avec un petit plus le DS3231 qui est une horloge temps réel avec température et même une alarme programmable.

Pour la librairie du DS3231 je vous conseille le gestionnaire de bibliothèque de l'ide arduino et taper ds3231 vous aurez de suite la librairie a installer.

Je mets directement le code que vous pouvez télécharger ici.

J'ai commenté un maximum et j'ai fait le plus simple possible donc ce n'est pas optimiser , mais vous pourrez le faire vous-même après.

Il vous faudra juste quelques notions de fonctions ici.

************************************

/*
DS3231 avec bibliothèque U8Glib et afficheur Oled SSD1306 128*64 en I2c
Version 1.0
Arduino uno SCL en A5 et SDA an A4 ainsi qu'un module ds3231 brancher en paralèlle sur SDA et SCL + oled sur 3,3v arduino
*/

// on inclut ici la bibliothèque du DS3231 et celle de U8glib
#include <DS3231.h>
#include "U8glib.h"

// on prends le bon drivers de la lib U8Glib
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0|U8G_I2C_OPT_NO_ACK|U8G_I2C_OPT_FAST);    // Fast I2C / TWI

// ces 2 variables servent pour le retour des fonctions mois et jour.
char* moisok; // on déclare la valeur de moisok comme une chaine de caractères
char* jourok; // on déclare la valeur de jourok comme une chaine de caractères

// on initialise le ds3231
DS3231  rtc(SDA, SCL);

// Initialisation de la structure de donnée Time (Time-data structure)
Time  t;

void setup() {  
  u8g.setFont(u8g_font_tpssb); // on utilise une fonte choisie parmis le tableau de référence : https://github.com/olikraus/u8glib/wiki/fontsize
  u8g.setColorIndex(1); // Instruction pourt mettre pixel à on.(affiche le pixel en blanc)
  rtc.begin(); // on communique avec le 3231 et toutes les commandes rtc.(real transmission clock)
}

void loop() {  
 // on prends les infos de date et heure compris dans le DS3231
 t = rtc.getTime();
   
float temperature = rtc.getTemp(); // on initialise la variable du ds3231 récupérer avec la fonction rtc.getTemp() qui est un float
   u8g.firstPage();
  do {  
  u8g.setPrintPos(1, 20);// on indique la position x et y ou sera ecrit la température
  u8g.print(temperature);// on ecrit le texte correspondant ici a la temperature relevée dans le module DS231
  u8g.println(" C");// on ajoute un espace et un C pour celcuis le caractère n'est pas gérer avec cet afficheur
  u8g.setPrintPos(1, 35);// on indique la position x et y ou sera ecrit le jour en lettres et chiffres
  // on va chercher le jour (t.dow) avec pour premier jour = lundi
  jour(t.dow); //on va la fonction mois avec la valeur t.mon le numéro du jour
  u8g.print(jourok); // on affiche le retour de la fonction jour (jourok)
  u8g.println(" "); // un espace
  u8g.print(t.date, DEC); // on affiche la date du jour 0-31
  u8g.setPrintPos(1, 50);// on indique la position x et y ou sera ecrit le mois et l'année
  // on affiche le mois
  mois(t.mon); //on va la fonction mois avec la valeur t.mon le numéro du mois
  u8g.println(moisok); // on affiche le retour de la fonction mois (moisok)
  u8g.println(" "); // unespace
  // on affiche l'année
  u8g.print(t.year, DEC);
  u8g.setPrintPos(60, 20);// on indique la position x et y ou sera ecrit l'heure a la suite de la température
    // on affiche les heures et on test si inférieur a 10 on met un zéro devant c'est plus beau :)
    if (t.hour < 10) {
    u8g.print("0");
    u8g.print(t.hour, DEC);    
    } else {
    u8g.print(t.hour, DEC);  
    }
  u8g.println(":");// on affichje : entre les heures et minutes
    // on affiche les minutes et on test si inférieur a 10 on met un zéro devant c'est plus beau :)
    if (t.min < 10) {
    u8g.print("0");
    u8g.print(t.min, DEC);    
    } else {
    u8g.print(t.min, DEC);  
    }
  u8g.println(":");// on affichje : entre les minutes et seondes
    // on affiche les secondes et on test si inférieur a 10 on met un zéro devant c'est plus beau :)
    if (t.sec < 10) {
    u8g.print("0");
    u8g.print(t.sec, DEC);    
    } else {
    u8g.print(t.sec, DEC);  
    }
  } while( u8g.nextPage() ); // on marque ici la fin de la procédure d'affichage
}  

// fonction mois
char mois (int m)
{
  switch (m)
  {
    case 1:
    moisok="Janvier";
    break;
    case 2:
    moisok="Fevrier";
    break;
    case 3:
    moisok="Mars";
    break;    
    case 4:
    moisok="Avril";
    break;  
    case 5:
    moisok="Mai";
    break;  
    case 6:
    moisok="Juin";
    break;
    case 7:
    moisok="Juillet";  
    break;
    case 8:
    moisok="Aout";
    break;  
    case 9:
    moisok="Septembre";
    break;  
    case 10:
    moisok="Octobre";
    break;
    case 11:
    moisok="Novembre";
    break;  
    case 12:
    moisok="Decembre";
    break;      
  }
return moisok;
}

//fonction jour
char jour (int j)
{
  switch (j)
  {
    case 1:
    jourok="Lundi";
    break;
    case 2:
    jourok="Mardi";
    break;
    case 3:
    jourok="Mercredi";
    break;    
    case 4:
    jourok="Jeudi";
    break;  
    case 5:
    jourok="Vendredi";
    break;  
    case 6:
    jourok="Samedi";
    break;  
    case 7:
    jourok="Dimanche";
    break;  
  }
return jourok;
}  

*******************************

Voici donc le résultat en video et en photos.

Voila une base ;)

Je prépare la suite avec les fonctions alarme et la modification de l'heure etc...

Merci de vos commentaires.

Si vous avez des questions n'hésité pas.

Retour en haut de page