M5StickCPlus Console colors are not correct and line wrapping is incorrect

[Gonkers]

Library/API/IoT binding

M5StickCPlus ?

Visual Studio version

VS2022

.NET nanoFramework extension version

N/A

Target name(s)

M5StickCPlus

Firmware version

N/A

Device capabilities

M5StickCPlus

Description

When writing to the console, the colors are incorrect and the line wrapping doesn't break at the correct text positions.

How to reproduce

1. Use this code

   using nanoFramework.M5Stack;
   using nanoFramework.Presentation.Media;
   using System.Threading;
   
   namespace Samples
   {
       public static class Program
       {
           public static void Main()
           {
               M5StickCPlus.InitializeScreen();
               M5StickCPlus.ButtonM5.Press += ButtonM5_Press;
               Console.Clear();
               Console.WriteLine("Ready for launch; hold on to your nipples.");
               Thread.Sleep(Timeout.InfiniteTimeSpan);
           }
   
           private static void ButtonM5_Press(object sender, System.EventArgs e)
           {
               Console.WriteLine("This is a very long sentence that I intend to use to test word wrapping on the M5 Stick C Plus.");
               Console.WriteLine(string.Empty);
   
               Console.ForegroundColor = Color.Red;
               Console.WriteLine($"This text should be {nameof(Color.Red)}.");
               Console.WriteLine(string.Empty);
   
               Console.BackgroundColor = Color.Yellow;
               Console.ForegroundColor = Color.RoyalBlue;
               Console.WriteLine($"And this is {nameof(Color.RoyalBlue)} on a {nameof(Color.Yellow)} background.");
           }
       }
   }
   

2. Compile it
3. Deploy it
4. Run it
5. Press the M5 button

Expected behaviour

1. The text colors are the colors that they state they are.
2. The text should wrap correctly

Screenshots

Sample project or code

No response

Aditional information

No response

[Gonkers]

        private static void ButtonM5_Press(object sender, System.EventArgs e)
        {
            Console.WriteLine("This is a very long sentence that I intend to use to test word wrapping on the M5 Stick C Plus.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = Color.Red;
            Console.WriteLine($"This text should be {nameof(Color.Red)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = Color.Orange;
            Console.WriteLine($"This text should be {nameof(Color.Orange)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = Color.Yellow;
            Console.WriteLine($"This text should be {nameof(Color.Yellow)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = Color.Green;
            Console.WriteLine($"This text should be {nameof(Color.Green)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = Color.Blue;
            Console.WriteLine($"This text should be {nameof(Color.Blue)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = Color.Indigo;
            Console.WriteLine($"This text should be {nameof(Color.Indigo)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = Color.Violet;
            Console.WriteLine($"This text should be {nameof(Color.Violet)}.");
            Console.WriteLine(string.Empty);
        }

The colors displayed in the image are not true to life, but they are still clearly showing they are not the correct colors. ROYGBIV

It looks like the RED and BLUE bits in the numeric representation of the color have been switched.

[Gonkers]

here is some more info on the BGR vs RGB...

The value for Blue is 16711680 and when the number is converted to hexadecimal it is FF0000.

[Gonkers]

using nanoFramework.M5Stack;
using nanoFramework.Presentation.Media;
using System.Threading;

namespace Samples
{
    public static class Program
    {
        public static void Main()
        {
            M5StickCPlus.InitializeScreen();
            M5StickCPlus.ButtonM5.Press += ButtonM5_Press;
            Console.Clear();
            Console.WriteLine("Ready for launch; hold on to your nipples.");
            Thread.Sleep(Timeout.InfiniteTimeSpan);
        }

        private static void ButtonM5_Press(object sender, System.EventArgs e)
        {
            Console.WriteLine("This is a very long sentence that I intend to use to test word wrapping on the M5 Stick C Plus.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = MyColor.Red;
            Console.WriteLine($"This text should be {nameof(MyColor.Red)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = MyColor.Orange;
            Console.WriteLine($"This text should be {nameof(MyColor.Orange)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = MyColor.Yellow;
            Console.WriteLine($"This text should be {nameof(MyColor.Yellow)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = MyColor.Green;
            Console.WriteLine($"This text should be {nameof(MyColor.Green)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = MyColor.Blue;
            Console.WriteLine($"This text should be {nameof(MyColor.Blue)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = MyColor.Indigo;
            Console.WriteLine($"This text should be {nameof(MyColor.Indigo)}.");
            Console.WriteLine(string.Empty);

            Console.ForegroundColor = MyColor.Violet;
            Console.WriteLine($"This text should be {nameof(MyColor.Violet)}.");
            Console.WriteLine(string.Empty);
        }

        public static class MyColor
        {
            public static Color Red => ColorUtility.ColorFromRGB(0, 0, 255);
            public static Color Orange => ColorUtility.ColorFromRGB(0, 127, 255);
            public static Color Yellow => ColorUtility.ColorFromRGB(0, 255, 255);
            public static Color Green => ColorUtility.ColorFromRGB(0, 255, 0);
            public static Color Blue => ColorUtility.ColorFromRGB(255, 0, 0);
            public static Color Indigo => ColorUtility.ColorFromRGB(130, 0, 75);
            public static Color Violet => ColorUtility.ColorFromRGB(238, 130, 238);
        }
    }
}

I was able to get the correct colors by defining my own. This confirms the Red and Blue bit values are swapped for the M5StickCPlus at least.

[josesimoes]

Hey @Gonkers ! Thanks for the detailed bug report. You seem to have nailed the fix as well. Any chance you can submit a PR with the fix? That would be very helpful. 🙂

[mikeoliphant]

The internal representation of the colors is BGR, so the color values are correct. There is likely a problem with the specific display driver for this device.

[alberk8]

The internal representation of the colors is BGR, so the color values are correct. There is likely a problem with the specific display driver for this device.

This looks like a good candidate to add a configuration option like SUBPIXEL_LAYOUT_RGB="false" in the CMakePresets.json

[Gonkers]

Hey @Gonkers ! Thanks for the detailed bug report. You seem to have nailed the fix as well. Any chance you can submit a PR with the fix? That would be very helpful. 🙂

I haven't contributed to this project before and I've just used it for the first time, but I'll give it a shot!

The internal representation of the colors is BGR, so the color values are correct. There is likely a problem with the specific display driver for this device.

This looks like a good candidate to add a configuration option like SUBPIXEL_LAYOUT_RGB="false" in the CMakePresets.json

Let's see how far I get. I'll try an get more familiar with how the display drivers work.

[Ellerbach]

This looks like a good candidate to add a configuration option like SUBPIXEL_LAYOUT_RGB="false" in the CMakePresets.json

@alberk8 and @Gonkers please do not implement this in native code but rather expose it to the managed code. Almost everything is already existing. Native won't give the flexibility to use with any kind of screen.