Sauvegarder votre image au format XBM
<div class="icon-instructions caution-icon">
<div class="icon-instructions-icon"><i class="fa fa-exclamation-triangle"></i></div>
<div class="icon-instructions-text">Sauvegarder le aussi au format PNG, vous ne pourrez pas modifier votre fichier XBM avec Krita !</div>
</div>
Ouvrez le fichier XBM avec un éditeur de texte et changez le nom des variables
Fichier XBM
#define _width 128
#define _height 32
static char _bits[] = {
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00...
};
Fichier logo.h
#define logo_width 128
#define logo_height 32
static const unsigned char logo[] U8X8_PROGMEM = {
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00...
};
+, <div class="icon-instructions idea-icon">
<div class="icon-instructions-icon"><i class="fa fa-lightbulb-o"></i></div>
<div class="icon-instructions-text">Je vous conseille de garder le code du logo dans un fichier .h, ainsi il sera plus simple de lire votre code</div>
</div>
Nous allons utiliser la bibliothèque U8g2 (elle est compatible avec beaucoup d'écrans)
#include <Wire.h> //I2C
#include <U8g2lib.h>
#include "logo.h"
//I2C SSD1306 128x32 (search U8g2 examples for other display)
U8G2_SSD1306_128X32_UNIVISION_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);
void setup() {
u8g2.begin(); //Start Screen
drawLogo();
}
void loop() {
}
void drawLogo() {
u8g2.firstPage();
do {
u8g2.drawXBMP(0, 0, logo_width, logo_height, logo);
} while ( u8g2.nextPage() );
}
J'ai aussi mis les fichiers PNG et XBM dans un dossier res/ dans mon code afin de savoir ce qu'il y a dans logo.h et de pouvoir le modifier ultérieurement.
Téléversez votre code et voilà !
+, <div class="icon-instructions info-icon">
<div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div>
<div class="icon-instructions-text">Tout le code est disponible sur github à cette adresse : https://github.com/maditnerd/oled_xbm</div>
</div>
Pour notre premier exemple, nous allons utiliser le logo d'hackster.io
Nous allons
* Redimensionner l'image en 128x32
* Redessiner l'image avec deux couleurs
* La convertir en XBM (code arduino)
<div class="icon-instructions idea-icon">
<div class="icon-instructions-icon"><i class="fa fa-lightbulb-o"></i></div>
<div class="icon-instructions-text">N'importe quel logiciel peut faire l'affaire, mais je recommande chaudement Krita : https://krita.org/en/</div>
</div>
Redimensionner l'image à la taille la plus proche de votre écran (128x32) : Image --> '''Redimensionner l'image à une nouvelle taille'''
Puis augmenter la taille de votre canvas à 128x32 : Image --> '''Redimensionner le tableau'''
Dans les préréglages des brosses, choisissez Pixel Art
Puis redessiner l'image.
<div class="icon-instructions idea-icon">
<div class="icon-instructions-icon"><i class="fa fa-lightbulb-o"></i></div>
<div class="icon-instructions-text">Appuyer sur X pour passer d'une couleur à l'autre.</div>
</div>
+,
…