How to convert a BMP image to RGB565 with ESP32 (Arduino)
I am currently working on a project involving an ESP32. The ESP32 retrieves a BMP image from a PHP page that converts a JPG to BMP. The ESP32 then needs to convert the BMP image into RGB565 data to be displayed using LVGL. The issue is not with the display or LVGL, as standard images are displayed correctly. However, when the converted image is displayed, it is recognizable, but the colored pixels appear to be randomly placed. The converted BMP image looks perfectly fine when viewing it on Windows.
Here are the codes that give me the mentioned problem.
PHP code to fetch and convert the image:
<?php
// Function to make a request to the Mouser API and fetch the image
function fetchAndConvertImage() {
// API key for accessing the Mouser API
$apiKey = 'MY_API_KEY';
// URL for making a request to the Mouser API
$url = 'https://api.mouser.com/api/v1/search/keyword?apiKey=' . $apiKey;
// Data to be sent in the request
$requestData = array(
'SearchByKeywordRequest' => array(
'keyword' => 'Thermistor',
'records' => 0,
'startingRecord' => 0,
'searchOptions' => 'string',
'searchWithYourSignUpLanguage' => 'en'
)
);
// Encode the data in JSON format
$jsonData = json_encode($requestData);
// Set up the options for the POST request
$options = array(
'http' => array(
'method' => 'POST',
'header' => 'Content-Type: application/json',
'content' => $jsonData
)
);
// Create a context for the request
$context = stream_context_create($options);
// Make the request to the Mouser API
$response = file_get_contents($url, false, $context);
// Decode the JSON response
$responseData = json_decode($response, true);
// Extract the image path from the response
$imagePath = $responseData['SearchResults']['Parts'][0]['ImagePath'];
// Read the image data from the specified URL
$imageData = file_get_contents("$imagePath");
// Generate a unique file name
$fileName = uniqid('image_', true) . '.bmp';
$filePath = __DIR__ . '/' . $fileName;
// Get image dimensions
$image = imagecreatefromstring($imageData);
$width = imagesx($image);
$height = imagesy($image);
// Calculate row size including padding
$rowSize = floor(($width * 3 + 3) / 4) * 4; // Each pixel is 3 bytes (RGB), and we need to ensure each row is a multiple of 4 bytes
// BMP header
$bmpHeader = pack('c', 0x42) . pack('c', 0x4D); // Signature BM
$bmpHeader .= pack('V', 14 + 40 + ($rowSize * $height)); // File size
$bmpHeader .= pack('v', 0) . pack('v', 0); // Reserved
$bmpHeader .= pack('V', 14 + 40); // Data offset
$bmpHeader .= pack('V', 40); // Header size
$bmpHeader .= pack('V', $width); // Image width
$bmpHeader .= pack('V', $height); // Image height
$bmpHeader .= pack('v', 1); // Number of planes
$bmpHeader .= pack('v', 24); // Bits per pixel
$bmpHeader .= pack('V', 0); // Compression (0 = no compression)
$bmpHeader .= pack('V', 0); // Image size (can be 0 when no compression)
$bmpHeader .= pack('V', 0); // Horizontal resolution (pixels per meter)
$bmpHeader .= pack('V', 0); // Vertical resolution (pixels per meter)
$bmpHeader .= pack('V', 0); // Number of colors in the palette
$bmpHeader .= pack('V', 0); // Number of important colors
// Convert image data to BMP format
$bmpData = '';
for ($y = $height - 1; $y >= 0; --$y) {
for ($x = 0; $x < $width; ++$x) {
$rgb = imagecolorat($image, $x, $y);
$color = imagecolorsforindex($image, $rgb);
$bmpData .= pack('C', $color['blue']); // Blue
$bmpData .= pack('C', $color['green']); // Green
$bmpData .= pack('C', $color['red']); // Red
}
// Add padding to ensure row size is a multiple of 4 bytes
$paddingBytes = $rowSize - ($width * 3);
$bmpData .= str_repeat(pack('C', 0), $paddingBytes);
}
// Save BMP file
file_put_contents($filePath, $bmpHeader . $bmpData);
// Free memory
imagedestroy($image);
// Return file name
return $fileName;
}
// Call the function to fetch and convert the image
$imagePath = fetchAndConvertImage();
echo "https://theyoungmaker.ddns.net/opencomponent/$imagePath";
?>
ESP32 code to retrieve and convert the BMP image:
bool getImageFromURL(String url) {
http.begin(url);
int httpCode = http.GET();
if (httpCode == HTTP_CODE_OK) {
WiFiClient* stream = http.getStreamPtr();
size_t totalLen = http.getSize();
size_t len = totalLen;
// Allocate buffer for the image data
uint8_t* bmp_data = (uint8_t*)malloc(len);
if (!bmp_data) {
Serial.println("Failed to allocate memory for image data");
http.end();
return false;
}
// Read data into buffer
size_t index = 0;
while (http.connected() && (len > 0 || len == -1)) {
size_t size = stream->available();
if (size) {
int c = stream->readBytes((char*)(bmp_data + index), size);
index += c;
if (len > 0) {
len -= c;
}
}
delay(1);
}
// Parse BMP header
if (bmp_data[0] != 'B' || bmp_data[1] != 'M') {
Serial.println("Not a valid BMP file");
free(bmp_data);
http.end();
return false;
}
uint32_t dataOffset = *((uint32_t*)(bmp_data + 10));
uint32_t width = *((uint32_t*)(bmp_data + 18));
uint32_t height = *((uint32_t*)(bmp_data + 22));
uint16_t bitsPerPixel = *((uint16_t*)(bmp_data + 28));
uint32_t compression = *((uint32_t*)(bmp_data + 30));
if (bitsPerPixel != 24 || compression != 0) {
Serial.println("Unsupported BMP format");
free(bmp_data);
http.end();
return false;
}
// Allocate buffer for the image data in 16-bit format (RGB565)
size_t imgSize = width * height * 2;
gui_img_nouveau_projet_png_data = (uint8_t*)malloc(imgSize);
if (!gui_img_nouveau_projet_png_data) {
Serial.println("Failed to allocate memory for image data");
free(bmp_data);
http.end();
return false;
}
// Convert pixel data to 16-bit (RGB565) format
uint8_t* src = bmp_data + dataOffset;
uint16_t* dst = (uint16_t*)gui_img_nouveau_projet_png_data;
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
uint8_t b = *src++;
uint8_t g = *src++;
uint8_t r = *src++;
*dst++ = ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}
// Skip padding bytes if any
src += (4 - (width * 3) % 4) % 4;
}
// Set image descriptor data
gui_img_nouveau_projet_png.header.always_zero = 0;
gui_img_nouveau_projet_png.header.w = width;
gui_img_nouveau_projet_png.header.h = height;
gui_img_nouveau_projet_png.data_size = imgSize;
gui_img_nouveau_projet_png.header.cf = LV_IMG_CF_TRUE_COLOR;
gui_img_nouveau_projet_png.data = gui_img_nouveau_projet_png_data;
free(bmp_data);
http.end();
return true;
} else {
Serial.printf("HTTP GET failed, error: %s\n", http.errorToString(httpCode).c_str());
http.end();
return false;
}
}
Does anyone know why this problem occurs? I'm unsure if the issue stems from the conversion from JPG to BMP on the server side or from the conversion from BMP to RGB565 on the ESP32. Any insights or suggestions would be greatly appreciated.
The original image:
The image displayed on the display:
Solution
I was able to correctly display the image by swapping the bit of the image and then flip it vertically. Here is the corrected function :
bool getImageFromURL(String url) {
HTTPClient http;
http.begin(url);
int httpCode = http.GET();
if (httpCode == HTTP_CODE_OK) {
WiFiClient* stream = http.getStreamPtr();
size_t totalLen = http.getSize();
size_t len = totalLen;
// Allocate buffer for the image data
uint8_t* bmp_data = (uint8_t*)malloc(len);
if (!bmp_data) {
Serial.println("Failed to allocate memory for image data");
http.end();
return false;
}
// Read data into buffer
size_t index = 0;
while (http.connected() && (len > 0 || len == -1)) {
size_t size = stream->available();
if (size) {
int c = stream->readBytes((char*)(bmp_data + index), size);
index += c;
if (len > 0) {
len -= c;
}
}
delay(1);
}
// Parse BMP header
if (bmp_data[0] != 'B' || bmp_data[1] != 'M') {
Serial.println("Not a valid BMP file");
free(bmp_data);
http.end();
return false;
}
uint32_t dataOffset = *((uint32_t*)(bmp_data + 10));
uint32_t width = *((uint32_t*)(bmp_data + 18));
uint32_t height = *((uint32_t*)(bmp_data + 22));
uint16_t bitsPerPixel = *((uint16_t*)(bmp_data + 28));
uint32_t compression = *((uint32_t*)(bmp_data + 30));
if (bitsPerPixel != 24 || compression != 0) {
Serial.println("Unsupported BMP format");
free(bmp_data);
http.end();
return false;
}
// Allocate buffer for the image data in 16-bit format (RGB565)
size_t imgSize = width * height * 2;
gui_img_nouveau_projet_png_data = (uint8_t*)malloc(imgSize);
if (!gui_img_nouveau_projet_png_data) {
Serial.println("Failed to allocate memory for image data");
free(bmp_data);
http.end();
return false;
}
// Convert pixel data to 16-bit (RGB565) format with byte swapping
uint8_t* src = bmp_data + dataOffset;
uint16_t* dst = (uint16_t*)gui_img_nouveau_projet_png_data;
// Calculate padding
size_t rowSize = (width * 3 + 3) & ~3; // Each row is aligned to a multiple of 4 bytes
size_t padding = rowSize - width * 3;
for (int y = 0; y < height; y++) {
uint8_t* rowSrc = src + (height - 1 - y) * rowSize;
for (int x = 0; x < width; x++) {
uint8_t b = *rowSrc++;
uint8_t g = *rowSrc++;
uint8_t r = *rowSrc++;
uint16_t pixel = ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
// Swap bytes
pixel = (pixel >> 8) | (pixel << 8);
*dst++ = pixel;
}
// Skip padding bytes
rowSrc += padding;
}
// Set image descriptor data
gui_img_nouveau_projet_png.header.always_zero = 0;
gui_img_nouveau_projet_png.header.w = width;
gui_img_nouveau_projet_png.header.h = height;
gui_img_nouveau_projet_png.data_size = imgSize;
gui_img_nouveau_projet_png.header.cf = LV_IMG_CF_TRUE_COLOR;
gui_img_nouveau_projet_png.data = gui_img_nouveau_projet_png_data;
free(bmp_data);
http.end();
return true;
} else {
Serial.printf("HTTP GET failed, error: %s\n", http.errorToString(httpCode).c_str());
http.end();
return false;
}
}
- Using preg_replace() to convert alphanumeric strings from camelCase to kebab-case
- Replace matched uppercase letter with its lowercase version (camelCase to kebab-case)
- Inject a comma between alphanumeric substrings and non-alphanumeric substrings
- I can't set Session Items in laravel inertia
- Isolate substring from first asterisk to second asterisk and use the first word of the match in the replacement
- PHP : ReflectionParameter, isOptional vs isDefaultValueAvailable
- Laravel Carbon subtract days from current date
- strlen() expects parameter 1 to be string, array given
- Not Acceptable! An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security
- Extract a file from a ZIP string
- How to always show the stock status in WooCommerce products
- Symfony Validator does not work with nested AtLeastOneOf Constraint
- TYPO3 extension: Is the __construct() of a class only called when the record is created via the FE, not the BE?
- Why must I rewind IteratorIterator
- How to update a chart in Google Slides dynamically?
- How to ensure full string validation with regex on phone number string?
- Password strength validating regex error: No ending delimiter or unknown modifier
- Regex error: Delimiter must not be alphanumeric or backslash
- How can I install a pecl extension like mcrypt in DDEV's web container?
- Match curly braced placeholders with a variable number of dot-delimited internal values
- Shorten long numbers to K/M/B?
- How to disable csrf in symfony?
- Match 3 subdirectory names in a filepath string after a specified directory name
- Validate the existence of banned words including near spellings in a string
- Get all <option> text values from an HTML document
- Get all matches between distinct substrings occurring on multiple lines
- Parse MSHTML and extract a <table> and it's contents
- Scrape href values from qualifying hyperlinks in Amazon's search results HTML
- Laravel 11 - HasMiddleware's middleware() method conflits with Illuminate\Routing\Controller's middlware()
- Scrape all numeric values from all qualifying list items in an HTML document