QT/pyqt tag/token input

5
votes

Is it possible to create tag/token input in QT5/pyqt5 ?

I am creating gui app where user can store image/photo and add tags. Specific tags are already in a database, user should be able to choose from existing ones (or create new ones if needed). Lets say: Image 1 Tags: (Clouds),(Tree),(mountain),road

User has chosen first 2 tags from database and added "road" which was not in database.

Currently I can create and populate QComboBox with database data which would just append to QLineEdit, later on i can process it back by formatting text. But it would be way more convenient to have something like tag/token input (exactly like in attached image):

  • Single line input
  • Each tag/text has its own 'remove' button
  • visually easy to distinguish between existing tags and tags just added (text vs box with close button)

Does QT has something like that out of the box, or should i create graphical icon for each text in custom widget?

enter image description here

1
pythonqtqt5pyqt5
Do you want a system similar to the one that has SO to add tags? If so, what have you tried? - eyllanesc
@eyllanesc, I don't think I am familiar with it, could you point me to example or where i could read about it ? thanks! - tmdag
mmm, I did not understand you, explain yourself better, what I point out is that the functionality you want is similar to the one that StackOverflow uses to add the tags that are at the bottom of your question. - eyllanesc
@eyllanesc, oh! You mean like on StackOverflow! :) yes, similar to that one, or just like one in attached image. Do you know how to implement it in QT/pyqt ? So far I haven't tried anything as I couldn't find anything online about tokens in QT. My current 'solution' is the one i described in question - populating QComboBox and with its selection appending QLineEdit (as a simple text) - tmdag
I am thinking about possibilities but an image is not very clear, you should indicate a list of requirements, that is: I want A but not B, I want C and also D. An image can be interpreted in many ways. - eyllanesc

1 Answers

2
votes

Yes it is possible. I have a naive implementation of such widget here. It is not finished yet, but the key functionality is implemented.

So, the implementation is based on QTextLayout class. Сompleted tokens are kept as an class member and are painted in paintEvent method. Сurrently editing token is painted with QTextLayout object. A cursor is painted with QTextLayout object too. User key presses are handled in keyPressEvent (typing, navigation). The widget also has a completer. This is the core idea, for more details, observe the code.

There is much work to do: customizable looking, tokenizing policies, removing by click on cross, etc. But it could be used for your own purposes or as an starting point for your own widget.

The implementation of QLineEdit was very helpful for me.