{Usage Question} TFT_Sprite & M5.lcd

[MDAR]

I have tried looking for more information and I can't find it, I apologise if the info or a detailed example is somewhere.

Regarding these commands for a M5StickC and M5StickC-Plus

tftSprite.setTextColor(colour);
tftSprite.fillRect(0, 0, 240, 135, bgColour); // startX,startY, Width, Height

or

M5.Lcd.fillScreen(bgColour);
M5.Lcd.setTextColor(colour);

Where bgColour and Colour are either int or unit32_t

 int bgColour = 0x000000;
 int colour = 0x000001;
 uint32_t encLED = 0x000000;

What I'm trying to achieve is the ability to set the Screen colour and Text colour via a MQTT message.

{"bgColour":0xFF0000,"Colour":0x00FF00} for example

 if (JSONmsgIN.containsKey("bgColour"))  {
  bgColour  = JSONmsgIN["bgColour"];
 }

 if (JSONmsgIN.containsKey("colour"))  {
  colour  = JSONmsgIN["colour"];
 }
 
 if (JSONmsgIN.containsKey("encLED"))  {
  encLED  = JSONmsgIN["encLED"];
  sensor.setLEDColor(1, encLED); // Set MiniEncoder LED state
 }

So far I can pass HEX values to a Key in the M5StickC, but when applied to the commands, the colours are very strange.

0x000001 to 0x0000ff work perfectly for all four commands, ever tone of Blue that I could ever want,

But when I try to add RED or GREEN, the colours are very strange.

Is it that I can ONLY use the preset colour options?

Where can I find the list?

Are these correct?

https://github.com/Bodmer/TFT_eSPI/blob/master/TFT_eSPI.h

/***************************************************************************************
**                         Section 6: Colour enumeration
***************************************************************************************/
// Default color definitions
#define TFT_BLACK       0x0000      /*   0,   0,   0 */
#define TFT_NAVY        0x000F      /*   0,   0, 128 */
#define TFT_DARKGREEN   0x03E0      /*   0, 128,   0 */
#define TFT_DARKCYAN    0x03EF      /*   0, 128, 128 */
#define TFT_MAROON      0x7800      /* 128,   0,   0 */
#define TFT_PURPLE      0x780F      /* 128,   0, 128 */
#define TFT_OLIVE       0x7BE0      /* 128, 128,   0 */
#define TFT_LIGHTGREY   0xD69A      /* 211, 211, 211 */
#define TFT_DARKGREY    0x7BEF      /* 128, 128, 128 */
#define TFT_BLUE        0x001F      /*   0,   0, 255 */
#define TFT_GREEN       0x07E0      /*   0, 255,   0 */
#define TFT_CYAN        0x07FF      /*   0, 255, 255 */
#define TFT_RED         0xF800      /* 255,   0,   0 */
#define TFT_MAGENTA     0xF81F      /* 255,   0, 255 */
#define TFT_YELLOW      0xFFE0      /* 255, 255,   0 */
#define TFT_WHITE       0xFFFF      /* 255, 255, 255 */
#define TFT_ORANGE      0xFDA0      /* 255, 180,   0 */
#define TFT_GREENYELLOW 0xB7E0      /* 180, 255,   0 */
#define TFT_PINK        0xFE19      /* 255, 192, 203 */ //Lighter pink, was 0xFC9F
#define TFT_BROWN       0x9A60      /* 150,  75,   0 */
#define TFT_GOLD        0xFEA0      /* 255, 215,   0 */
#define TFT_SILVER      0xC618      /* 192, 192, 192 */
#define TFT_SKYBLUE     0x867D      /* 135, 206, 235 */
#define TFT_VIOLET      0x915C      /* 180,  46, 226 */

As a work around, I have limited myself to 8 colour options and set the colour based on the MQTT message

 if (bgColour == 0){
  tftSprite.fillRect(0, 0, 240, 135, BLACK); // startX,startY, Width, Hieght
  if (SerialDebug){
                  Serial.println("Black rectangle");
                 }
  }
if (bgColour == 1){
  tftSprite.fillRect(0, 0, 240, 135, WHITE);
    if (SerialDebug){
                  Serial.println("WHITE rectangle");
                 }
}
if (bgColour == 2){
  tftSprite.fillRect(0, 0, 240, 135, RED); 
    if (SerialDebug){
                  Serial.println("RED rectangle");
                 }
  } // startX,startY, Width, Hieght
if (bgColour == 3){
  tftSprite.fillRect(0, 0, 240, 135, GREEN);
    if (SerialDebug){
                  Serial.println("Green rectangle");
                 }
  }
if (bgColour == 4){
  tftSprite.fillRect(0, 0, 240, 135, BLUE);
    if (SerialDebug){
                  Serial.println("Blue rectangle");
                 }
  }
if (bgColour == 5){
  tftSprite.fillRect(0, 0, 240, 135, YELLOW); 
    if (SerialDebug){
                  Serial.println("Yellow rectangle");
                 }

and so on

The core question is

What is the correct way to pass a HEX colour value to either the tftSprite.fillRect( or M5.Lcd.fillScreen( commands?

For reference, if I do the this with the MiniEncoder LED, it works PERFECTLY

 if (JSONmsgIN.containsKey("encLED"))  {
  encLED  = JSONmsgIN["encLED"];
  sensor.setLEDColor(1, encLED); // Set MiniEncoder LED state
 }

using JSON messages like these

{"encLED":0x000000}

{"encLED":0xFF0000}

{"encLED":0x00FF00}

{"encLED":0x00FF00}

or anything.
(I use a colour picker in Node-RED for testing)

(Going forward, I want to try to add the 8-Encoder to this script)

Many thanks in advance.

Going forward, is it acceptable to post an example script when I have this working?

[Tinyu-Zhao]

You can use these color codes
https://github.com/M5stack/M5StickC/blob/8468b22249195d17a6d2fff9f830269200abc21b/src/utility/ST7735_Defines.h#L100-L118
If you use the command alone (as follows),

color = 0x000001 to 0x0000ff 
tftSprite.setTextColor(color)

If StickC can work normally, but after the remote transmission of the color appeared abnormal, that is to say that the data read from the MQTT into the corresponding color conversion process has a problem, you can focus on reading the data, each color data separate output, to see where the problem is in the end

[MDAR]

@Tinyu-Zhao

Re

You can use these color codes
https://github.com/M5stack/M5StickC/blob/8468b22249195d17a6d2fff9f830269200abc21b/src/utility/ST7735_Defines.h#L100-L118
If you use the command alone (as follows),

color = 0x000001 to 0x0000ff
tftSprite.setTextColor(color)

I think I see the issue

I've been sending six digital colours, not four

The link you have provided shows four digit colours.

Would you happen to have a reference for your to create 4 digital HEX colours?

Thanks for your assistance, yet again.

[Tinyu-Zhao]

Those color codes are RGB565
https://rgbcolorpicker.com/565

[MDAR]

Those color codes are RGB565 https://rgbcolorpicker.com/565

Thank you so much for your assistance.

I've read this and think I might be able to do the RGB24 to RGB565 in NodeRed before sending over MQTT, hopefully without any changes to my M5StickC code.

http://www.barth-dev.de/about-rgb565-and-how-to-convert-into-it/

Based loosely on this formula

RGB565 = (((RGB888_RedValue & 0xf80000)>>8) + ((RGB888_GreenValue & 0xfc00)>>5) + ((RGB888_BlueValue & 0xf8)>>3));

I'll try it later on the week and report the results.

[Tinyu-Zhao]

Maybe you can use this function
uint16_t color565(uint8_t red, uint8_t green, uint8_t blue);
This article describes the instructions
https://programmer.ink/think/color-setting-and-text-display-esp32-learning-tour-arduino-version.html

[MDAR]

Thanks for all your help and support.

I've gone the very long way around to get an RGB565 value from a colour picker and double checked the results with various web converters I've found.

I'm fairly confident that I'm creating the correct RGB565 values and passing them to the M5stickC-Plus.

Some work very well, others are wildly wrong.

For this exercise, I think I'll stick to using hard coded / fixed values in the TFT library or send RGB565 values from an option list, rather than a colour picker.

I've learnt a lot in the exercise, so nothing has been wasted.

For your reference and for anyone else that is looking for RGB565 convertion

soloam/node-red-contrib-colorspace#8

https://discourse.nodered.org/t/rgb565-color-space-mainly-for-spi-tft-screens/80574