How to give QTextFrame or QTextBlock a background-image in QTextEdit?

Question

I am developing an IM tool,as a part of it I have to develop a BubbleChatWidget on which all message items have a bubble-like background-image.I thought I could achieve my goal with QTextEidt,but I don't know how to give 'QTextFrame' or QTextBlock a background-image.

So my question is that how to give QTextFrame or QTextBlock a background-image in QTextEdit?If QTextEdit can't satisfy my demands, how to achieve my goal with other Qt techniques?

The BubbleChatWidget may contains clickable texts or pictures.And you can't forget the fact that the BubbleChatWidget may contains thousands of items.

The picture below displays what I want.

Ithaman

Answer 1

You need to modify Qt's source code for this.

I've done this last year.

You could set a background image (the bubble image ) for a frame.

If you r using Qt 4.8.6, locate qtextdocumentlayout.cpp, at line 402:

The default fill fillBackground implementation is

 p->fillRect(rect, brush);

You could change to qDrawBorderPixmap instead to draw a bubble background.

Armoured

Answer 2

Qt Style Sheets are a perfect fit to achieve what you want.

The solution is to use a border image. Fortunately you can do that with style sheets and you can style QTextEdits.

About styling the QTextBlocks or QTextFrames: A QTextEdit is a widget that displays a QTextDocument which can contain QTextBlocks and QTextFrames. Frames and blocks are text containers that provide structure for the text in a document but they're not rendered by separate widgets. For that reason they can not be styled independently. What I recommend is to use a QTextEdit or other widget for each message and properly manage the consequent increase in memory use.

I'll expose how to style a text edit.

First, take a clean image of your desired border. With a little Photoshop I've prepared my own image (not as clean as it should for a production app):

Lets style objects of the class QTextEdit and its subclasses.

QTextEdit {
    background-color: #eaedf2;              /* Same gray in your background center */
    border-image: url(":/images/bkg.png");  /* The border image                    */
    border-top-width: 11px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 11px;
}

Setting the previous style sheet to the container of the text edits will turn all of them into this

Something quite similar to your desired look. Of course you have to prepare a good border image and better adjust the border dimensions but I think this could be of help.

If you want different styles for incoming and outgoing messages then you will have to properly differentiate and select them in the style sheet. Check this for reference.

Paraselene

Thanks for your detailed answer.We are just finding a way better than using an individual widget for each message item before we use the simple but inefficient way. – Ithaman

In that case and if you want to keep things right and easy, why not using a QListView, providing the messages in a custom model and implementing your own delegate which presents the data the way you want. Views are responsible of creating and releasing delegates when needed. – Paraselene

A lower level approach you can follow is to implement your own widget or QTextEdit and render the contents in its paintEvent(). (That can be done style-aware if you want) QBalloonTip code could be of help. – Paraselene

Answer 3

You can use QBalloonTip which is an internal class defined in

QtDir/5.*/Src/qtbase/src/widgets/util/qsystemtrayicon_p.h

QBalloonTip inherits QWidget and it is implemented in qsystemtrayicon.cpp at the same directory. It has the following method to show a balloon tip:

void QBalloonTip::balloon(const QPoint& pos, int msecs, bool showArrow)

You can modify the source code of this class to have your desired balloon tip.

Extractive

Answer 4

If you are interested in open source project that implements the same thing(I call it 'Bubble Chat'), you can search Telegram Desktop and Cutegram in Github.

They are both clients of Telegram or its variant implemented by Qt/Qml.

I think Cutegram is better.

Hope this tip will help you.

Ithaman