Create stunning graphics with RA8875 library

The RA8875 display controller provides a unique way for drawing primitives (rectangles, circles, polygons, ellipses, text, bitmaps, built in/custom fonts) on LCD screens. The MCU just needs to send te command, the RA8875 takes care of the rest. To quote Sumotay writer of the RA8875 library: “It’s the only way to use a tiny MCU with big screens! And you get touch support too!”

But how to create stunning graphics with just those primitives? Let me show you some examples of what can be achieved.

Circle vertical gradient

Look at below sample code snippet to create a circle with a vertical gradient:

C code snippet

void DisplayGradientFilledCircle(RA8875_struct *ra8875, unsigned int x, unsigned int y, unsigned int radius, 
unsigned int color1, unsigned int color2, unsigned int scale) {
//	Draw a filled circle with radius using vertical direction gradient color between color1 and color 2
	uint8_t x1;
	uint8_t y1;
	uint16_t color;
	for (uint8_t i = 0; i < 2*radius; i++) {
		y1 = abs(radius-i);
		x1 = sqrt((radius*radius)-(y1*y1));
		color = RA8875_colorInterpolation(color1, color2, i, 2*radius);
		if (i<radius) {
		   RA8875_drawFastHLine(ra8875, x-doScale(x1, scale), y-doScale(y1, scale), doScale(x1*2, scale), color);
	    } else {
		   RA8875_drawFastHLine(ra8875, x-doScale(x1, scale), y+doScale(y1, scale), doScale(x1*2, scale), color);
// draw gradient circle at (x,y) = (110, 110), radius 95 using colors dark grey and black, scale 240 (= no scaling)
DisplayGradientFilledCircle(ra8875, 110, 110, 95, RA8875_DARK_GREY, RA8875_BLACK, 240);


Picture taken from 7″LCD screen, hence the moiré effect and distortion. Apologies for that.

3D effect LED

Using above vertical gradient circel and stacking a couple of circles with color variation and ellipses you’ll be able to create a stunning LED display.
See below code snippet and resulting picture (taken from 7 inch LCD screen) how this LED is created with just primitives:

C code snippet

void DisplayLED(RA8875_struct *ra8875, unsigned int x, unsigned int y, unsigned int radius, 
                unsigned int color, unsigned int scale) {
	x      = doScale(x, scale);
	y      = doScale(y, scale);
	radius = doScale(radius, scale);
	// draw metal edge
	RA8875_fillCircle(ra8875, x, y, radius, RA8875_BLACK);
	DisplayGradientFilledCircle(ra8875, x, y, radius - 3, RA8875_LIGHT_GREY, RA8875_BLACK, scale);
    // fill inner
	for (int i = 0; i < doScale(10, scale); i++) {
		RA8875_fillCircle(ra8875, x, y, radius - doScale(13, scale) - i,
				RA8875_colorInterpolation(RA8875_BLACK, color, i * 10, 100)); // shades of color from black
    // top glow light, use colors between color1 and white
	for (int i = 0; i < doScale(5, scale); i++) {
		RA8875_fillEllipse(ra8875, x, y - doScale(54, scale) - 2 * i,
				doScale(35 - 2 * i, scale) /*radiusx*/, doScale(20 - 2 * i, scale) /*radiusy*/,
				RA8875_colorInterpolation(color, RA8875_WHITE, i * 20, 100)); //
// create 4 LEDS next to each other. Scale 240 means 1:1
DisplayLED(ra8875, 110, 350, LEDRADIUS, RA8875_RED, 240); 
DisplayLED(ra8875, 305, 350, LEDRADIUS, RA8875_GREEN, 240); 
DisplayLED(ra8875, 500, 350, LEDRADIUS, RA8875_YELLOW, 240); 
DisplayLED(ra8875, 695, 350, LEDRADIUS, RA8875_LIGHT_GREY, 240);


I hope you like this!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.