{"id":4229,"date":"2020-09-02T20:00:18","date_gmt":"2020-09-02T18:00:18","guid":{"rendered":"https:\/\/msalamon.pl\/?p=4229"},"modified":"2025-12-27T16:15:31","modified_gmt":"2025-12-27T15:15:31","slug":"grayscale-oled-on-ssd1327-part-3","status":"publish","type":"post","link":"https:\/\/msalamon.pl\/en\/grayscale-oled-on-ssd1327-part-3\/","title":{"rendered":"Grayscale OLED on SSD1327, Part 3"},"content":{"rendered":"\n

I ended the last post about the SSD1327 OLED<\/a> with the note that in order to use the GFX library, you need to introduce a few modifications to it. Today I\u2019ll deal with those modifications and we\u2019ll have full functionality of our display with a 16-level grayscale<\/a>. At the end, we\u2019ll check what speeds can be achieved on such an I\u00b2C OLED<\/a>. <\/p>\n\n\n\n\n\n\n\n

\"\"<\/a><\/figure><\/h1>\n\n\n\n

Table of contents of the entire series about the SSD1327 OLED:<\/strong><\/span><\/p>\n\n\n\n

Grayscale OLED on SSD1327 part 1<\/a>
<\/strong>Grayscale OLED on SSD1327 part 2<\/a>
<\/strong>How to prepare an image for an LCD or TFT display?<\/a>
<\/strong>Grayscale OLED on SSD1327 part 3<\/a><\/strong><\/p>\n\n\n\n

Modifying the GFX lib<\/h1>\n\n\n\n

The library that I pulled from another OLED \u2014 the one based on SSD1306 \u2014 works with images that use one-bit pixels. In that one, drawing a pixel was written in such a way that if it had the background color (which was passed as an argument), it could even not draw it, creating a transparent background.<\/p>\n\n\n\n

And in fact you could use it so that the picture would be drawn in a single color from the 0\u201315 range, but then why do we need such grayscale? We want to draw nice things, right? Things that will have depth and, for example, will render a nice GUI for us, right?<\/p>\n\n\n\n

That\u2019s why we need to slightly modify GFX BW so that it supports images saved in a 4-bit pixel format. Where should we introduce these changes? Exactly \u2014 in the image drawing function!<\/p>\n\n\n\n

First, we have to find which cell of the image array we want to assign to our buffer. You already know how to do this, because I wrote about it in the previous post<\/a>. If we go through the image height as j<\/strong> and through the width as i<\/strong>, the cell in the array that interests us is SelectedCell = img[i\/2 + j*(w\/2)]<\/strong> \u2014 w<\/strong> is the image width that we pass as an argument.<\/p>\n\n\n\n

As a side note, it would be nice to modify image drawing so that the function itself would read the height and width from the image header that Img2Lcd generates, which I wrote about in this post<\/a>. Maybe you\u2019ll fork my project on GitHub and write something like that? \ud83d\ude42<\/p>\n\n\n\n

Back to the main topic\u2026 having the selected cell, we now need to assign the appropriate pixel value to our pixel in the RAM buffer for the displayed image. In one byte we only have two pixels to choose from. In the previous post we also noticed that even ones are always on the same side of the byte. We need to use that!<\/p>\n\n\n\n

The procedure for selecting the appropriate pixel value and writing it into the OLED<\/a> RAM looks like this.<\/p>\n\n\n\n

if(i % 2)\n{\n\tSelectedCell &amp;= 0x0F;\n}\nelse\n{\n\tSelectedCell &gt;&gt;= 4;\n}\nGFX_DrawPixel(x+i, y+j, SelectedCell);<\/pre>\n\n\n\n
Looks simple, right? That\u2019s really it! So the entire function for drawing an image into the buffer looks like this.<\/p>\n\n\n\n
void GFX_Image(int x, int y, const uint8_t *img, uint8_t w, uint8_t h)\n{\n\tuint8_t i, j;\n\tuint8_t SelectedCell;\n\n\tfor(j = 0; j &lt; h; j++)\n\t{\n\t\tfor(i = 0; i &lt; w; i++)\n\t\t{\n\t\t\tSelectedCell = img[i\/2 + j*(w\/2)];\n\n\t\t\t if(i % 2)\n\t\t\t {\n\t\t\t\t SelectedCell &amp;= 0x0F;\n\t\t\t }\n\t\t\t else\n\t\t\t {\n\t\t\t\t SelectedCell &gt;&gt;= 4;\n\t\t\t }\n\n\t\t\tGFX_DrawPixel(x+i, y+j, SelectedCell);\n\t\t}\n\t}\n}<\/pre>\n\n\n\n
I also made a few minor changes like the library name and so on, so that it matches this display<\/a> nicely in terms of naming. The result? Beautiful images with color depth \ud83d\ude42<\/p>\n\n\n\n
\"\"<\/a><\/figure> 
\"\"<\/a><\/figure> 
\"\"<\/a><\/figure>How fast does it run?<\/h2>\n\n\n\n
We have much more data here than when sending to a monochrome display. Not only is the resolution slightly higher, but each pixel also contains 4x more data. So can we achieve satisfactory results over I\u00b2C? In the first part I did some theoretical calculations<\/a>. What does it look like in practice? Let\u2019s check!<\/p>\n\n\n\n
The whole thing at a 100 kHz<\/strong> clock, i.e., copying an image that fills the entire area of the OLED<\/a> and sending it to the controller, takes as much as 573 ms<\/strong>. An eternity!<\/p>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
Let\u2019s break it down. Copying the image from the array to the OLED<\/a> buffer itself is just under 23 ms. Better, but still a lot, right? Remember that this copy uses the DrawPixel function and is not a blind cell-by-cell copy. This introduces some calculations that could probably be partially avoided.<\/p>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
It turns out that sending is insanely long, which you can see in the waveforms. It takes about 550 ms.<\/p>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
Working at 100 kHz I\u00b2C means you won\u2019t get more than 2 FPS. Embarrassing! Let\u2019s move to 400 kHz<\/strong>, which is the maximum this OLED<\/a> can theoretically accept. In theory, it should be 4 times better.<\/p>\n\n\n\n
Copying the image + transfer is 182 ms<\/strong>. That would be about 5.5 FPS. Still poor\u2026 you\u2019ll see the redraw during full-screen animations.<\/p>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
Copying the image should take the same amount of time, i.e., ~23 ms. Nothing should change in this area.<\/p>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
However, transfer to the OLED is 159 ms<\/strong>.<\/p>\n\n\n\n
\"\"<\/a><\/figure>Acceleration possibilities.<\/h2>\n\n\n\n
You can try to overclock I\u00b2C even more. SSD1327<\/a> should easily run at 1 MHz just like the SSD1306. But that goes beyond the documentation, so it\u2019s living on the edge.<\/p>\n\n\n\n
A much better solution would be to connect the same OLED<\/a> via SPI. There you can go up to 10 MHz! That is truly suitable for a fast and unnoticeable image swap.<\/p>\n\n\n\n
But\u2026 my model doesn\u2019t have SPI on the PCB and doesn\u2019t allow changing the interface with any jumpers. You\u2019d need to look for an OLED<\/a> version with SPI, and that can be hard to find. Out of ready-made PCB modules, I think only Waveshare has it.<\/p>\n\n\n\n
You can make your own PCB! Take the bare OLED<\/a> module and connect the jumpers appropriately to select SPI. This also involves designing a converter for the panel supply, so it\u2019s rather for more advanced people.<\/p>\n\n\n\n
If you stick with I\u00b2C, there\u2019s nothing else to do than develop an interface that doesn\u2019t have fast animations. After all, you don\u2019t always need to refresh all pixels, and redrawing the same ones won\u2019t be visible.<\/p>\n\n\n\n
Another way could be to give up buffering and draw only in areas that change. With such a controller you can limit the drawing area in the controller, and then simply send pixels. There are quite a few possibilities!<\/p>\n\n\n\n
Summary<\/h2>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
Reworking the GFX library turned out to be ridiculously simple! Now you can easily throw beautiful images onto the OLED \ud83d\ude09<\/p>\n\n\n\n
The speed is worse\u2026 Unfortunately, you have to limit yourself to slowly changing content. However, from what I see on the Internet, most projects tend to have slowly changing GUIs anyway \ud83d\ude42<\/p>\n\n\n\n
If you liked the article, buy something from me! <\/span>\"?\" <\/span>https:\/\/sklep.msalamon.pl\/<\/a><\/strong><\/p>\n\n\n\n
The full project together with the library can be found as usual on my GitHub: <\/span>LINK<\/a><\/p>\n\n\n\n
If you noticed an error, disagree with something, would like to add something important, or simply feel like you\u2019d like to discuss this topic, write a comment. Remember that the discussion should be polite and follow the rules of the Polish language.<\/span><\/p>\n\n\n\n
Table of contents of the entire series about the SSD1327 OLED:<\/strong><\/span><\/p>\n\n\n\n
Grayscale OLED on SSD1327 part 1<\/a>
<\/strong>Grayscale OLED on SSD1327 part 2<\/a>
<\/strong>How to prepare an image for an LCD or TFT display?<\/a>
<\/strong>Grayscale OLED on SSD1327 part 3<\/a><\/strong><\/p>\n\n\n
\n            \n
\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
\n            <\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
I ended the last post about the SSD1327 OLED with the note that in order to use the GFX library, you need to introduce a few modifications to it. Today I\u2019ll deal with those modifications and we\u2019ll have full functionality of our display with a 16-level grayscale. At the end, […]<\/p>\n","protected":false},"author":1,"featured_media":3497,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[160],"tags":[176,174],"class_list":["post-4229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stm32","tag-programming","tag-stm32"],"_links":{"self":[{"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/posts\/4229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/comments?post=4229"}],"version-history":[{"count":3,"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/posts\/4229\/revisions"}],"predecessor-version":[{"id":4232,"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/posts\/4229\/revisions\/4232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/media\/3497"}],"wp:attachment":[{"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/media?parent=4229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/categories?post=4229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/msalamon.pl\/en\/wp-json\/wp\/v2\/tags?post=4229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}