Changing the color of a bargraph depending on his value

[Rollmops67]

Hello from France !
I have a 480x320 color LCD display on wich I show a bargraph made of a "drawWideLine" command.
The bargraph shows the voltage of a battery (VLiPo) between 35 V and 43 V.
Here is the interesting part :

  int bat = constrain(355+((VLiPo-35)*110/8),355,465);
  uint32_t couleur = TFT_YELLOW;
  if (VLiPo < 37) couleur = TFT_RED;
  if (VLiPo > 38.5) couleur = TFT_GREEN;
  spr.drawWideLine(355,308,bat,308,14,couleur,TFT_BLACK);

Nothing groundbreaking here, it shows an horizontal bar wich changes in size, is red when V<37 V, yellow when V is between 37 V and 38.5 V and green when V>38.5 V.

Now my idea is to having a continuous changing color going from red when V is 35 V to green when V is 43V
My idea is to map the bargraph value to the R and G values of a RGB color, with red (255,0,0) at 35 V, yellow (255,255,0) at mid-scale and green (0,255,0) at 43 V
This seems not difficult with map() and constrain() functions, but my problem is that the color values in the TFT_eSPI environment are in the RGB565 form and written in hexadecimal, so with my limited knowledge I'm a little stuck in how to do that (converting decimal numbers to hexadecimal or RGB565 for example)

I'm thankfull for any hint !

Roland

[Rollmops67]

So, after a little more brainstorming I found a solution, with a little help from this page :
http://www.barth-dev.de/about-rgb565-and-how-to-convert-into-it/

Here is the modified code :

int bat = constrain(355+((VLiPo-35)*110/8),355,465);
byte red = constrain(map(bat,410,465,255,0),0,255);
byte green = constrain(map(bat,355,410,0,255),0,255);
uint16_t couleur = (((red & 0b11111000)<<8) + ((green & 0b11111100)<<3));
spr.drawWideLine(355,308,bat,308,14,couleur,TFT_BLACK);

A little explanation for those interested :
The bargraph goes from pixel 355 to pixel 465 (so pixel 410 is midrange)
The line int bat... sets the endpoint of the bargraph between the 355th and the 465th pixel
The line byte red... defines the amount of red (in 8 bit format), 255 from beginning to midrange, decreasing to 0 between midrange and end
The line byte green... defines the amount of green, from 0 to 255 from beginning to midrange, 255 after midrange.
The line uint16_t couleur... does the conversion in RGB565, by eliminating the less important bits from the red and the green 8 bits bytes and shifting the result at the right place.
Finally, the spr.drawWideLine... line traces the bargraph.

I'm still interested in other solutions !

Roland

[Bodmer]

There is a function for this:

   // Convert 8-bit red, green and blue to 16 bits
  uint16_t color565(uint8_t red, uint8_t green, uint8_t blue);

So:

uint16_t col = tft.color565(255,255,0);

Will return the correct 16 bit value for a yellow colour.

[Rollmops67]

Wow !!!!!
Thank you Bodmer for this simple solution !

Your TFT_eSPI library is so rich, it has answers to questions you don't even ask yourself ! :-)
And when you ask the question, you don't think at looking if there is an existing keyword for the task...

Roland

[Bodmer]

You may find this sketch useful. It uses the library alphaBlend function and has a function to generate the colours of a rainbow:

https://github.com/Bodmer/TFT_eSPI/blob/master/examples/Generic/alphaBlend_Test/alphaBlend_Test.ino

The alphaBlend produces a gradual change from one colour to another by changing the alpha value from 0 to 255.

[Rollmops67]

Thank you !

Roland