<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[[Solved] Displaying images, various formats]]></title><description><![CDATA[<p dir="auto">Hi<br />
I would like to display images on the Fire's screen<br />
I've read docs about drawBitmap function, I've read the <a href="https://community.m5stack.com/topic/49/lesson-1-2-1-lcd-how-to-create-image-array">Lesson</a>, I've read a seemingly <a href="http://schrenk.hu/2020/04/29/M5StackImageFormats/" target="_blank" rel="noopener noreferrer nofollow ugc">complete tuto</a>, but I still don't get it working (image as a c file from flash memory).<br />
What should the c file look like ? How do I call it in code?<br />
<strong>Code:</strong><br />
#include &lt;M5Stack.h&gt;<br />
#define imgName codeImage<br />
#define PicArray extern unsigned char<br />
PicArray imgName[];</p>
<p dir="auto">void setup() {<br />
M5.begin();<br />
M5.Lcd.drawBitmap(0,0,320, 240, (uint16_t *)imgName);<br />
}<br />
void loop() {<br />
}<br />
<strong>"codeImage.c" file:</strong><br />
const unsigned char codeImage [] = {(<br />
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, (...)0x00, 0x00, 0x00, 0x1f)};</p>
<p dir="auto">I used the UTFT library tool as recommended (libraries\UTFT\Tools\ImageConverter565.exe)<br />
It does work with M5.Lcd.pushImage instead of M5.Lcd.drawBitmap if I use <a href="https://github.com/dsiberia9s/ImageToCode" target="_blank" rel="noopener noreferrer nofollow ugc">imageToCode</a><br />
So I guess the key here is the c file...is there a detailed doc on this topic ?</p>
]]></description><link>https://community.m5stack.com/topic/2305/solved-displaying-images-various-formats</link><generator>RSS for Node</generator><lastBuildDate>Mon, 09 Mar 2026 21:00:08 GMT</lastBuildDate><atom:link href="https://community.m5stack.com/topic/2305.rss" rel="self" type="application/rss+xml"/><pubDate>Tue, 15 Sep 2020 10:10:57 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Sun, 03 Jul 2022 11:19:41 GMT]]></title><description><![CDATA[<p dir="auto">Hello@F3l1x</p>
<p dir="auto">In the example below I am using lcd-image-converter.<br />
lcd-image-converter<br />
<a href="https://sourceforge.net/projects/lcd-image-converter/" target="_blank" rel="noopener noreferrer nofollow ugc">https://sourceforge.net/projects/lcd-image-converter/</a><br />
Select 8bit or 16bit for Block size and create xxx.c.<br />
Use M5.Lcd.pushImage(x,y,imgWidth,imgHeight,(unit16_t *) xxx);</p>
<p dir="auto">M5Stack Community :<br />
M5StickC Nixie tube Clock ( 2019.06.06 )<br />
<a href="https://forum.m5stack.com/topic/1087/m5stickc-nixie-tube-clock" target="_blank" rel="noopener noreferrer nofollow ugc">https://forum.m5stack.com/topic/1087/m5stickc-nixie-tube-clock</a></p>
<p dir="auto">Original text：<br />
M5StickC Nixie tube Clock<br />
<a href="https://macsbug.wordpress.com/2019/06/06/m5stickc-nixie-tube-clock/" target="_blank" rel="noopener noreferrer nofollow ugc">https://macsbug.wordpress.com/2019/06/06/m5stickc-nixie-tube-clock/</a></p>
<p dir="auto">UIFlow：( jpg )<br />
<a class="mention plugin-mentions-user plugin-mentions-a" href="https://community.m5stack.com/uid/187">@world101</a> implemented a Nixie tube clock in the uiFlow IDE for M5 Stick C-Plus devices.<br />
<a href="https://github.com/bstein2379/M5StickC-Plus-Nixie-clock" target="_blank" rel="noopener noreferrer nofollow ugc">https://github.com/bstein2379/M5StickC-Plus-Nixie-clock</a></p>
<p dir="auto">Reference material：<br />
M5STICKC's DISPLAY analysis part 3 drawn know -how<br />
<a href="https://lang-ship.com/blog/work/m5stickc-display3-m5lcd/" target="_blank" rel="noopener noreferrer nofollow ugc">https://lang-ship.com/blog/work/m5stickc-display3-m5lcd/</a></p>
<p dir="auto">Lang-ship's image code conversion site :<br />
<a href="https://lang-ship.com/tools/image2data/" target="_blank" rel="noopener noreferrer nofollow ugc">https://lang-ship.com/tools/image2data/</a></p>
]]></description><link>https://community.m5stack.com/post/17885</link><guid isPermaLink="true">https://community.m5stack.com/post/17885</guid><dc:creator><![CDATA[macsbug]]></dc:creator><pubDate>Sun, 03 Jul 2022 11:19:41 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Sat, 02 Jul 2022 00:21:51 GMT]]></title><description><![CDATA[<p dir="auto"><a class="mention plugin-mentions-user plugin-mentions-a" href="https://community.m5stack.com/uid/8891">@shift1313</a><br />
Thanks for doing this work. I failed 50 million times, but your tutorial was spot on for images.</p>
]]></description><link>https://community.m5stack.com/post/17882</link><guid isPermaLink="true">https://community.m5stack.com/post/17882</guid><dc:creator><![CDATA[jterrell]]></dc:creator><pubDate>Sat, 02 Jul 2022 00:21:51 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Mon, 16 May 2022 18:19:15 GMT]]></title><description><![CDATA[<p dir="auto"><a class="mention plugin-mentions-user plugin-mentions-a" href="https://community.m5stack.com/uid/443">@ajb2k3</a> Sure, I am still learning and figuring a few things out so I want to explore all options first before I write anything other than a forum reply.  I plan to make a few videos of it on my YT channel.  I cover mostly CAD topics but have a GPS speedo using sprites and was exploring using BMPs.  <a href="https://youtu.be/SUAqVUN9AuQ" target="_blank" rel="noopener noreferrer nofollow ugc">https://youtu.be/SUAqVUN9AuQ</a></p>
]]></description><link>https://community.m5stack.com/post/17502</link><guid isPermaLink="true">https://community.m5stack.com/post/17502</guid><dc:creator><![CDATA[Shift1313]]></dc:creator><pubDate>Mon, 16 May 2022 18:19:15 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Sun, 15 May 2022 07:26:14 GMT]]></title><description><![CDATA[<p dir="auto">Nice work.<br />
Can you write up a guide to Using images on <a href="http://Hackster.io" target="_blank" rel="noopener noreferrer nofollow ugc">Hackster.io</a> based on what you found as it would be easier to find instead of searching this forum in the future.</p>
]]></description><link>https://community.m5stack.com/post/17487</link><guid isPermaLink="true">https://community.m5stack.com/post/17487</guid><dc:creator><![CDATA[ajb2k3]]></dc:creator><pubDate>Sun, 15 May 2022 07:26:14 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Sat, 14 May 2022 20:56:09 GMT]]></title><description><![CDATA[<p dir="auto"><a class="mention plugin-mentions-user plugin-mentions-a" href="https://community.m5stack.com/uid/4335">@f3l1x</a> I know this is an OLD topic listed as solved but I came across it having the same issue.  I didn't feel it was actually solved so I wanted to chime in with what I found.</p>
<p dir="auto">First in the M5Stack.h it lists an RGBBitmap function but that isn't actually available.  You can push an RGB bitmap just using M5.Lcd.drawBitmap though.</p>
<p dir="auto">Getting a BMP converted to the appropriate code took a bit of work to find a format that made the Ardunio ide happy but here is what I found.<br />
If you are using a monochrome image and image2cpp you want to use the Arduino code output format and the draw mode as Horizontal - 2 bytes per pixel(565).  The 565 is the RGB format that is required.  If you use that format the image will be defined using a const uint16_t which will work just fine.<br />
<a href="https://javl.github.io/image2cpp/" target="_blank" rel="noopener noreferrer nofollow ugc">https://javl.github.io/image2cpp/</a></p>
<p dir="auto">For a color image you will need to use something else.  I ended up going with <a href="https://sourceforge.net/projects/lcd-image-converter/" target="_blank" rel="noopener noreferrer nofollow ugc">https://sourceforge.net/projects/lcd-image-converter/</a> but do a search and find something that is right for you.  The trick here again comes down to the options and format.  I used Color scanning from Top to Bottom and in the forward direction.  Again it is important to use the R5G6B5 preset to make sure the hex is proper for the code.  Also make sure to use 16bit block size.  16bit isn't needed for BW or monochrome images but still can be used at the expensive of more memory.  If you are using 16bit for BW images you will see this 0x0000, 0xffff.  8 bit would suffice for those leaving you with 2 less characters.</p>
<p dir="auto">When you are using a color bmp then 16 bit is needed.  You will still have the same number of characters but will see something more like this 0xf7be, 0xef7d, 0xdefc,   Each represents a color and I found that 16bit was needed for what I was doing.</p>
<p dir="auto">Some other points of contention.  Some of the image converters and examples will use different variable types.  For the drawBitmap I found that it wanted the file as a "short" (as per some of the examples) or uint16_t.  If you get an error just look at what the function is expecting to see.</p>
<p dir="auto">The image you displayed with the funky colors I found to happen when the width and height values in drawBitmap don't match the actual bitmap.  If your image is 32 x 32 (1024 pixels), then your call to drawBitmap should match that.  If it doesn't you will see the result you are looking for.  I haven't found a good way to scale things in the code but hopefully that will get someone else who comes across this ancient thread a point in the right direction.</p>
<p dir="auto">Also for whatever its worth it is much easier to call the images from SD than to go through all this hassle unless you have a good reason for it.  This process took way longer to figure out than I would have liked which is why I wanted to respond.  I have done this before on monochrome displays without issues but the color bmp on the M5 gave me a headache:)</p>
<p dir="auto">hope it helps.</p>
]]></description><link>https://community.m5stack.com/post/17484</link><guid isPermaLink="true">https://community.m5stack.com/post/17484</guid><dc:creator><![CDATA[Shift1313]]></dc:creator><pubDate>Sat, 14 May 2022 20:56:09 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Thu, 17 Sep 2020 14:01:56 GMT]]></title><description><![CDATA[<p dir="auto">maybe you try open your image in image editor and save it with 16bit color BMP (not 24bit) before use program to convert</p>
]]></description><link>https://community.m5stack.com/post/10120</link><guid isPermaLink="true">https://community.m5stack.com/post/10120</guid><dc:creator><![CDATA[robalstona]]></dc:creator><pubDate>Thu, 17 Sep 2020 14:01:56 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Thu, 17 Sep 2020 13:04:57 GMT]]></title><description><![CDATA[<p dir="auto">Well...using only 320x240 input and "ImageToCode" converter it seems to be OK not always but most of the time<br />
Thanks for your help</p>
]]></description><link>https://community.m5stack.com/post/10117</link><guid isPermaLink="true">https://community.m5stack.com/post/10117</guid><dc:creator><![CDATA[F3l1x]]></dc:creator><pubDate>Thu, 17 Sep 2020 13:04:57 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Wed, 16 Sep 2020 16:52:50 GMT]]></title><description><![CDATA[<p dir="auto">Believe me I did search...the forum and many other places...At the moment I'm trying to "reverse engineer" the only c filethat is working</p>
]]></description><link>https://community.m5stack.com/post/10110</link><guid isPermaLink="true">https://community.m5stack.com/post/10110</guid><dc:creator><![CDATA[F3l1x]]></dc:creator><pubDate>Wed, 16 Sep 2020 16:52:50 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Wed, 16 Sep 2020 16:01:44 GMT]]></title><description><![CDATA[<p dir="auto">Jpg and bmp images require some specific formatting but they are usable direct in code if the image is uploaded to the cores memory, for examples on this please search the forum as I did work hard to find out the exact specification the file has to be in.</p>
]]></description><link>https://community.m5stack.com/post/10108</link><guid isPermaLink="true">https://community.m5stack.com/post/10108</guid><dc:creator><![CDATA[ajb2k3]]></dc:creator><pubDate>Wed, 16 Sep 2020 16:01:44 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Wed, 16 Sep 2020 15:28:50 GMT]]></title><description><![CDATA[<p dir="auto"><a class="mention plugin-mentions-user plugin-mentions-a" href="https://community.m5stack.com/uid/2460">@robalstona</a><br />
Thanx for your help<br />
I added the c file in the arduino IDE, that's how it's done in the example <a href="https://github.com/m5stack/M5Stack/blob/master/examples/Basics/FactoryTest/bmp_map.c" target="_blank" rel="noopener noreferrer nofollow ugc">Factory Test</a><br />
It DOES work with the exemple (M5 logo) where the c file is given, that's why I suppose my problem is about converting jpg/bmp -&gt; c file<br />
There are a lot of converters out there, none gave me a c file that could be correctly displayed with drawBitmap</p>
]]></description><link>https://community.m5stack.com/post/10107</link><guid isPermaLink="true">https://community.m5stack.com/post/10107</guid><dc:creator><![CDATA[F3l1x]]></dc:creator><pubDate>Wed, 16 Sep 2020 15:28:50 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Wed, 16 Sep 2020 14:40:15 GMT]]></title><description><![CDATA[<p dir="auto">In this file there is no simply an array containing each color component R, G, B for each subsequent pixel. The color code is expressed by a total of 16 bits: red 5 bits, green 6 bits and blue 5 bits from the top. In this case a color of one pixel is represented as a two values like [0xff,0xff, ...</p>
<p dir="auto">You must include this file with  <strong>include</strong> directive and use name <strong>codeimage</strong> of this array as a parameter of function:</p>
<p dir="auto">M5.Lcd.drawBitmap(0,0,320, 240, codeimage);</p>
<p dir="auto">This file is concatenated with your code when compiling the program.  And it is downloaded as a whole program to the device.</p>
<p dir="auto">You also try a .drawBmpFile() function or .drawJpgFile() to draw files directly from your device flash</p>
<p dir="auto"><a href="https://github.com/m5stack/m5-docs/blob/master/docs/en/api/lcd.md" target="_blank" rel="noopener noreferrer nofollow ugc">https://github.com/m5stack/m5-docs/blob/master/docs/en/api/lcd.md</a></p>
]]></description><link>https://community.m5stack.com/post/10106</link><guid isPermaLink="true">https://community.m5stack.com/post/10106</guid><dc:creator><![CDATA[robalstona]]></dc:creator><pubDate>Wed, 16 Sep 2020 14:40:15 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Wed, 16 Sep 2020 14:34:22 GMT]]></title><description><![CDATA[<p dir="auto">Thanx for your help<br />
Unfortunately it does not work for me<br />
<img src="/assets/uploads/files/1600266524804-catzebra.jpg" alt="0_1600266519285_CatZebra.jpg" class=" img-fluid img-markdown" /><br />
instead of<br />
<img src="/assets/uploads/files/1600266786955-cat5stack.jpg" alt="0_1600266785037_cat5stack.jpg" class=" img-fluid img-markdown" /><br />
Does not even work with pushImage<br />
Are they parameters/arguments I should use?</p>
]]></description><link>https://community.m5stack.com/post/10105</link><guid isPermaLink="true">https://community.m5stack.com/post/10105</guid><dc:creator><![CDATA[F3l1x]]></dc:creator><pubDate>Wed, 16 Sep 2020 14:34:22 GMT</pubDate></item><item><title><![CDATA[Reply to [Solved] Displaying images, various formats on Wed, 16 Sep 2020 10:07:01 GMT]]></title><description><![CDATA[<p dir="auto">you could use this python script to create the conversion image to code</p>
<p dir="auto"><a href="https://github.com/m5stack/M5Stack/blob/master/tools/bin2code.py" target="_blank" rel="noopener noreferrer nofollow ugc">https://github.com/m5stack/M5Stack/blob/master/tools/bin2code.py</a></p>
]]></description><link>https://community.m5stack.com/post/10104</link><guid isPermaLink="true">https://community.m5stack.com/post/10104</guid><dc:creator><![CDATA[m5stack]]></dc:creator><pubDate>Wed, 16 Sep 2020 10:07:01 GMT</pubDate></item></channel></rss>