How to implement reading serial data with ANSI color codes and printing out to textbox in color

[SimonSchroeder]

@lukutis222 said in How to implement reading serial data with ANSI color codes and printing out to textbox in color:

Are you suggesting that I should incorporate 1B in my regex?

If you want to remove that character as well (which I assume you want to), then yes! I am not entirely sure about the full syntax that QRegularExpression supports, but it seems like you could include this character by its octal value as "\033". This would mean that your regular expression should be "(?<=\033[0;33m).*?(?=\033[0m)".

Here is the explanation for your last successful try: Every match has the full match as captured(0) (which in general might be empty if there is no match). If you want to have additional matches you need to use parentheses "(\w) (\w)" would match two words where captured(0) has the whole captured string with two words and a space in between, captured(1) has the first word, and captured(2) has the second word. However, the question mark in (?...) tells the regular expression that the part inside the parentheses is not a capture. This is the reason why in your case there is only one captured string (have a look at captureCount() which should be 0 (0 means that there is only the implicitly captured group).

[JonB]

@lukutis222
I do not claim to follow the full ins and outs of your long post. But I believe @SimonSchroeder is saying what I would: it is your use of the "advanced" (?... stuff that is probably at issue.

Please start your testing and grabbing of (...) segments on a much simpler reg ex. Just for example:

"(\\033[0;33m)(.*)(\\033[0m)"

(I'm not 100% about \\033 vs \033, you may have to play, I believe either/both will work, for different reasons.) That should have captures 1--3. Get that principle working before you move onto a more complex expression!

[lukutis222]

@SimonSchroeder

Thanks for help. Maybe you know how can I simulate this on regex tester online. That would allow me to understand how your suggested expression is intended to work:

"(?<=\033[0;33m).*?(?=\033[0m)"

If I put it in my code:

    QRegularExpression regex("(?<=\033[0;33m).*?(?=\033[0m)", QRegularExpression::MultilineOption);
    QRegularExpressionMatchIterator i = regex.globalMatch(text);

    while (i.hasNext())
    {
      QRegularExpressionMatch match = i.next();
      setFormat(match.capturedStart(), match.capturedLength(), myClassFormat1);
    }

The error message is returned:

QRegularExpressionPrivate::doMatch(): called on an invalid QRegularExpression object

Trying this on https://regex101.com/ or https://www.regextester.com/ does not seem to work. Is that because regex testers online do not accept octal representations?
String under testing:

[1B][0;33mW (00:02:12.590) THERMOSTAT: CURRENT TIME: Thu Jan  1 00:02:12 1970[1B][0m

Regex used:

(?<=\033[0;33m).*?(?=\033[0m)

Result(no match):

[JonB]

@lukutis222
It has red-underlined (?<=. Did you hover that to see if it says anything? You are using Javascript reg exes, have you looked to see whether that supports this construct? regex101 (or whatever online) reg exps won't be identical to Qt's, that's also why it offers different "flavors" of reg ex to try.

I previously suggested you try a simpler example which does not use that construct. Why bother with it all when you can just use a plain (...) anyway, and write your code accordingly? I think you are making your first attempt harder than it need be. Up to you....

[lukutis222]

@JonB When I decided to parse ANSI color codes I really did not expect this to be such complex topic.

As you have suggested, I started experimenting with different regex expressions. The one that I am currently working with is the following:

(0;33m)(.*)(0m)

My code:

    QRegularExpression regex("(0;33m)(.*)(0m)", QRegularExpression::MultilineOption);
    QRegularExpressionMatch match = regex.match(text);
    if (match.hasMatch()) {

        QString matched_text0 = match.captured(0);
        QString matched_text1 = match.captured(1);
        QString matched_text2 = match.captured(2);
        qDebug("matched text0 = %s \n",matched_text0.toStdString().c_str());
        qDebug("matched text1 = %s \n",matched_text1.toStdString().c_str());
        qDebug("matched text2 = %s \n",matched_text2.toStdString().c_str());
    }

Is now returning:

matched text0 = 0;33mW (00:30:02.590) THERMOSTAT: CURRENT TIME: Thu Jan  1 00:30:02 1970[0m 
matched text1 = 0;33m 
matched text2 = W (00:30:02.590) THERMOSTAT: CURRENT TIME: Thu Jan  1 00:30:02 1970[ 

Which I think is getting closer to what I want to achieve. matched text2 is a text that I want to highlight.

I am still not fully sure about how can I now ensure that the unmatched data does not get displayed on my console?

UPDATE

Do you know how can I format only the specific match that I choose instead of whole string? When I was using global match, I used capturedStart() but I dont think I can use that now.

For example, I want to format matched_text2 only. I tried the following:

    QRegularExpression regex("(0;33m)(.*)(0m)", QRegularExpression::MultilineOption);
    QRegularExpressionMatch match = regex.match(text);
    if (match.hasMatch()) {

        QString matched_text0 = match.captured(0);
        QString matched_text1 = match.captured(1);
        QString matched_text2 = match.captured(2);
        qDebug("matched text0 = %s \n",matched_text0.toStdString().c_str());
        qDebug("matched text1 = %s \n",matched_text1.toStdString().c_str());
        qDebug("matched text2 = %s \n",matched_text2.toStdString().c_str());
        setFormat(match.capturedStart(matched_text2), match.capturedLength(matched_text2), myClassFormat1);
    }

However, the format is not applied to the matched text

[JonB]

@lukutis222

match.capturedStart(matched_text2), match.capturedLength(matched_text2)

I believe you are doing totally the wrong thing here. If you want --- as you do --- the second (...) matched the whole thing is given in match.captured(2) (your matched_text2), and that is all you should be looking at.

[lukutis222]

@JonB

I really appreciate the help but I dont think we are on the same page and I am not sure if you fully understand what I am trying to achieve. I want to give a simpler example perhaps you can help me understand how the highlighter is meant to remove the unwanted text cause I am still not fully convinced this is possible. Imagine I have a text "12345HELLO12345" That I want to send to the console.

    const QByteArray data  = "12345HELLO12345";
    ui->Console->insertPlainText(data);
    syntaxhighlighter = new SyntaxHighlighter(ui->Console->document());

Since I have attached the syntaxhiglihhter to my console, as soon as the data is sent, the higlightblock function will be called.

Now 2 things need to happen inside higlightblock function:

1. Discard the "12345" before and after the word "HELLO"
2. Format the text and make it green color.

void SyntaxHighlighter::highlightBlock(const QString &text)
{
QTextCharFormat myClassFormat1;
myClassFormat1.setFontWeight(QFont::Bold);
myClassFormat1.setForeground(QColorConstants::Svg::darkorange);

qDebug(" text inside highlightblock = %s \n",text.toStdString().c_str());

QRegularExpression regex("(12345)(.*)(12345)", QRegularExpression::MultilineOption);
QRegularExpressionMatch match = regex.match(text);
if (match.hasMatch()) {

    QString matched_text0 = match.captured(0);
    QString matched_text1 = match.captured(1);
    QString matched_text2 = match.captured(2);
    qDebug("matched text0 = %s \n",matched_text0.toStdString().c_str());
    qDebug("matched text1 = %s \n",matched_text1.toStdString().c_str());
    qDebug("matched text2 = %s \n",matched_text2.toStdString().c_str());

}

}

The QT logs:

 text inside highlightblock = 12345HELLO12345 
matched text0 = 12345HELLO12345 
matched text1 = 12345 
matched text2 = HELLO 

As you can see I have sucesfully mathced the text that I want in matched text2. How can I ensure the "12345" is discarded from the console and how can I format the text? My console shows:

I only want to see text "HELLO" in green color in the console

I hope this very simple example is clear and shows what I am trying to achieve.

[SimonSchroeder]

@lukutis222 said in How to implement reading serial data with ANSI color codes and printing out to textbox in color:

Now 2 things need to happen inside higlightblock function:

1. Discard the "12345" before and after the word "HELLO"
2. Format the text and make it green color.

The QSyntaxHighlight has one job and that is highlighting. Just as I have said before:

The syntax highlighter will help with the highlighting, but I don't think it will remove any characters from what is displayed. I think, your original approach seems valid.

The best suggestion I have is to drop the syntax highlighter because you have to first have to remove the unwanted part of the string before adding it to your ui->Console. But then the syntax highlighter has no information for highlighting. (The syntax highlighter highlights syntax; ANSII escape code are more like markup and cannot be handled by a syntax highlighter.)

I suggest that you first clean up the string (maybe replace the ANSII escape code by HTML) and add them to the text edit with the right format. Using HTML would help to just replace the escape codes and then use addHTML() instead of addPlainText(). The regular expression will still help to capture the right parts of the string and the escape codes.

[JonB]

@lukutis222 said in How to implement reading serial data with ANSI color codes and printing out to textbox in color:

I dont think we are on the same page and I am not sure if you fully understand what I am trying to achieve

:) I think/hope we are!

"(12345)(.*)(12345)"

You keep talking about removing the segment(s) you do not want. In this case, remove groups 1 & 3, to leave group 2.

I am turning that round. I am saying why can't you implement this by simply preserving what you do want? In this case, don't worry about "removing" anything, instead only output group 2. That is what we normally do with regular expression matches. In order to end up with HELLO why do you want to worry about how to remove the 12345 which comes before and/or after when all you want to end up with is the HELLO?

Certainly that is what I would do from the regular expression above. Isn't QString matched_text2 = match.captured(2); all you want to end up outputting from this input?

BTW, just in case we are not on the same page about one thing: you are aware that you cannot actually remove anything once output has gone to the console, aren't you? You have to not-send-output in the first place if you don't want something to appear.

I'll also say one further thing. Although it is useful to get these regular expressions working it's clearly taking some time for you to get what you want. If all you want to do is the one reg exp you have shown so far, and you will not be expanding that to more complex/varied additional ones, you could have written this in ten minutes by abandoning reg exps and just using a loop to go through the characters in the string omitting/removing/outputting. Recognising \033[ etc. for your couple of cases without reg exps is trivially easy.

[lukutis222]

@JonB , @SimonSchroeder

Thanks for confirming. When I say I want to remove the unwanted part, I literally meant that I want to discard this from being printed to the console. I was hoping that maybe regex had some hidden feature to discard the unwanted text or replace it with NULL characters or something like that. I kept asking how can I discard the unwanted text but maybe you misunderstood what I meant by discarding. Since you both just confirmed that it is not possible with my current approach, I must select different approach then. I can use highlighter to highlight the text but not replace or discard some characters.

@SimonSchroeder suggested replacing ANSI escape codes by HTML although I have no clue what that means at this point. I will try to research about that and see if that makes sense to me. It is still unclear to me how the data will be sent to the console, I assume the HTML will still show up as some strange symbols on the console?

[JonB]

@lukutis222
I'm still a little lost in your question! :)

You receive some data from a serial port, right? And you write code to output that to the console (e.g. your ui->Console->insertPlainText(data);), right? So you are choosing what to output. You do not have to copy everything you receive, and then later try to "remove" some bits of it, right? In any case, once something has gone to the console you can't get it back/change it.

Consequently just outputting what you do want to output from the string you showed, rather than trying to delete what you don't want, seems simpler.

I will leave you with a couple of thoughts:

• The methods of QRegularExpression allow you to pick out captures. They do not offer to remove something from the input string.

• QString does have methods to remove bits of a string and return a new one. QString &QString::replace(const QRegularExpression &re, const QString &after) can be used to find occurences of a reg exp and replace the matching part with something (including an empty string to remove it completely). And it can deal with captures too if you want that. Perhaps you would have been more comfortable starting from QString rather than from QRegularExpression?

• Really to remove ANSI escape sequences you shouldn't be bothering to recognise that start-color-then-text-then-end-color pattern, like "(\\033[0;33m)(.*)(\\033[0m)". All you should do is recognise each ANSI escape sequence and remove it, without worrying about pairing it with a closing sequence or what comes in the middle. Now, for the two escape sequence you are at least currently interested they both match e.g.

\\033\[[^m]*m

i.e. escape, open-square, sequence of non-m characters, m character terminator. So you could just use that to remove all matching ANSI sequences you have, it covers both your begin and end ones. Then you don't have to worry about capture groups and stuff between a start and end marker.

[lukutis222]

@JonB

Yes I receive a bunch of data (alot of data actually) from a serial port. This data will come in 3 different colors (as far as I know).

If text has 0;33m ANSI prefix, I must display the text in orange color
if text has 0;32m ANSI prefix, I must display in green color
if text has 0;34m ANSI prefix, I must display in red color

I sort of understand what you mean, but one thing I am not sure about:

I can do some operation with QString before I send text to the console as you have suggested, I can even remove the ANSI color code and replace it with an empty string, however, how my higlighter is supposed to know how to format the text (apply different colors since I no longer have ASCI code to match and apply format.?

Are you suggesting that I can color different messages without using the higlihter. Some pseudo code:

void Widget::readData()
{
    const QByteArray data = serial->serial_connection.readAll();

// 1 .detect ANSI color code and replace it with empty characters 

// 2. Is it possible to apply different colors here instead of the highlighter?

    ui->Console->insertPlainText(data);



}

[JonB]

@lukutis222
I am getting a little lost in your questions, and also a touch exhausted :)

You seem to start with the ANSI escape codes, and you have shown output in the appropriate color from that. Then you want to remove those and replace them with something which shows the color, but you already had the color.... ???

I don't know what class ui->Console is so i don't know what you can do with it.

I don't know what you are or are not doing with a QSyntaxHighlighter.

I may be reaching my limit time on this topic... :)

[lukutis222]

@JonB
What I am trying to do is very simple. I am not sure if I am very bad at explaning but I have shown it with the 12345HELLO12345 example.

I have a string "12345HELLO12345" and I must do 2 things:

1. DISCARD "12345"
2. Color the remaining text in green color. So the output to the console should be "HELLO" in green color.

For my "real world" example, replace the "12345" with the ANSI color codes. The end user does not need to see the ANSI color codes in the console but he must see the text in different colors. The remote device might send me a string:

 HELLO FROM REMOTE DEVICE

I need to do 2 things:

1. Replace the [0;33m and [0m with empty string
2. Color the remaining text ("HELLO FROM REMOVE DEVICE") to orange color.

The remote device can send a different string:

 THIS MESSAGE MUST BE GREEN

I need to do 2 things:

1. Replace the [0;32m and [0m with empty string
2. Color the remaining text ("THIS MESSAGE MUST BE GREEN") to green color.

I was initially trying to do it all with the syntaxhighlighter because I thought that you said it is possible to discard (COMPLETELY REMOVE) the unwanted text. But I have just found out that this is not possible so my initial approach was not correct.

Another approach that you have suggested is to discard the unwanted data before it is sent to the console which makes sense, however, the syntax highlighter will have no way to distinguish whether that particular text must be displayed in green, yellow or red color since the ANSI color code has been already discarded before sending the data to the console

[JonB]

@JonB said in How to implement reading serial data with ANSI color codes and printing out to textbox in color:

I don't know what class ui->Console is so i don't know what you can do with it.

?

[lukutis222]

@JonB Sorry for the late response. The ui-> console class is QTextEdit

[mrjj]

@lukutis222
Hi
If you can already find and replace the ANSI codes then using a QTextEdit should be straightforward.
You simply note the code/color and remove it and then insert the "clean" text with the right color.

    auto output = ui->textEdit;
    output->setTextColor(Qt::red); // predefined color
    output->insertPlainText("hello");
    output->setTextColor(QColor(0,255,0)); // 'custom' color
    output->insertPlainText("device");

[lukutis222]

I am getting close to what I am trying to achieve and I have learnt a lot of things about QT while trying to achieve this. Currently, I am having issues of removing brackets("[" and "]") from the text that I receive. The messages that I receive from the remote device:

[1B][0;32mI (504) SEC_GATTS_DEMO: ESP_GATTS_REG_EVT[1B][0m

I have learnt how to replace characters before they are sent to the console for example removing the ANSI color code (0;32m)

const QByteArray data = serial->serial_connection.readAll();
QString DataAsString = QString(data);
DataAsString.replace(QRegularExpression("0;32m"), "");
ui->Console->insertPlainText(DataAsString);

I can also remove the ANSI color code using

DataAsString.replace(QRegularExpression("0;32m"), "");

However, there is this additional bracket that I am not certain where it comes from. Notice the [ and ] brackets highlighted with bold.
[1B] [ 0;32mI (504) SEC_GATTS_DEMO: ESP_GATTS_REG_EVT[1B] [ 0m

I would like to know how can I remove or replace it? This bracket octal code is \133 and I tried the following:

DataAsString.replace(QRegularExpression("\033\1330;32m"), "");
DataAsString.replace(QRegularExpression("\033[0;32m"), "");

But both does not seem to work for some reason. I am not sure why I cannot simple replace the brackets

[JonB]

@lukutis222
[ is a special character to mark the start of list of alternative characters to match till ]. So you need to do something to match a literal [ character.

• Try either \\[ or [[] in your C string for that. [EDIT Forum showing \\[ wrong on this line, I typed two \s, it shows two in preview mode but only one in final mode for some reason, grrr, this forum is very inconsistent in showing some literals inside backticks :( ]
• Personally I prefer \\033 (allow reg ex to see \033, which it interprets as octal character) over \033 (let C embed an actual ASCII 27 character in the string). Same for \133 -> \\133.

Perhaps play with these at regex101. Don't forget that if you are putting into a literal C string anything which works from there may need \ -> \\.

[mpergand]

@lukutis222

Unfortunatly what you're trying to do is not so trivial ...

Here a very basic attempt:

const char ESC=0x1b;            // escape char
const char* RESET="\033[0m";    // reset color

// basic 8 colors
const char *colors[]=
{
    "0;30","black",
    "0;31","red",
    "0;32","green",
    "0;33","yellow",
    "0;34","blue",
    "0;35","purple",
    "0;36","cyan",
    "0;37","white",
    nullptr,"black"
};


struct MsgAttr
{
        QString msg;
        QColor color;
};

bool parseMsg(const QByteArray& data, MsgAttr& attr)
{
    int index=0;
    // by default
    attr.color="black";
    attr.msg=data;
    const char* bytes=data.constData();     // use bytes data

    // search start/end of ansi color code
    if( (bytes[0] == ESC) && (bytes[1] =='[' ) )
        {
        index=2;

        while(bytes[index])   // search ending 'm'
            {
            if(bytes[index] == 'm') break;
            index++;
            }

        if(bytes[index] == 0) return false; // malformed msg
        }

    if(index>0)
        {
        QString colorStr=data.mid(2,index-2);
        int colorIndex=0;

        while(colors[colorIndex++])
            {
            if(colorStr == colors[colorIndex-1])
                attr.color=colors[colorIndex];
            }

        QString msg=data.mid(index+1);
        if(msg.endsWith(RESET))  // remove [0m
            msg.chop(strlen(RESET));

        attr.msg=msg;
        }

    return true;
}

// some text messages
   const char *msg[]=
   {
       "\033[0;30mBlack color\033[0m",
       "\033[0;31mRed color\033[0m",
       "\033[0;32mGreen color\033[0m",
       "\033[0;33mYellow color\033[0m",
       "\033[0;34mBlue color\033[0m",
       "\033[0;35mPurple color\033[0m",
       "\033[0;36mCyan color\033[0m",
       "\033[0;37mWhite color\033[0m",
       "no color",                     // no ansi color
       "\033[0;37mWhite color",        // no reset at the end
       "\033[0;37White color",         // malformed
       nullptr

   };

   MsgAttr attr;

   int m=0;
   while(msg[m])
       {
       bool ok=parseMsg(msg[m],attr);
       qDebug()<<"ok="<<ok<<"color="<<attr.color<<attr.msg;
       m++;
       }

console logs:

ok= true color= QColor(ARGB 1, 0, 0, 0) "Black color"
ok= true color= QColor(ARGB 1, 1, 0, 0) "Red color"
ok= true color= QColor(ARGB 1, 0, 0.501961, 0) "Green color"
ok= true color= QColor(ARGB 1, 1, 1, 0) "Yellow color"
ok= true color= QColor(ARGB 1, 0, 0, 1) "Blue color"
ok= true color= QColor(ARGB 1, 0.501961, 0, 0.501961) "Purple color"
ok= true color= QColor(ARGB 1, 0, 1, 1) "Cyan color"
ok= true color= QColor(ARGB 1, 1, 1, 1) "White color"
ok= true color= QColor(ARGB 1, 0, 0, 0) "no color"
ok= true color= QColor(ARGB 1, 1, 1, 1) "White color"
ok= false color= QColor(ARGB 1, 0, 0, 0) "\u001B[0;37White color"

This example supposes ansi colors are in the form 0;3x
but it could be 3x;0 as well.
see here:
https://gist.github.com/JBlond/2fea43a3049b38287e5e9cefc87b2124
http://jafrog.com/2013/11/23/colors-in-terminal.html

As I said, it's not trivial ;)