Emoji support

Vadi2

What is there involved in adding emoji support for a Qt application? Has anyone done it? Any lessons learnt?

I see that shipping an emoji-calable font is part of a requirement, like Google Chrome does it on Windows - and adding a way to enter emoji characters is another, as native keyboards don't support them yet.

This is only in the context of the desktop of a QWidgets application.

VRonin

@Vadi2 said in Emoji support:

What is there involved in adding emoji support for a Qt application?

Nothing. QString supports unicode so emojis are supported. You might want to set the emoji font in QTextEdit to make them look better but that's it

Vadi2

To make them look relatively acceptable, yeah... plus some way for the user to actually enter them other than copy/pasting. That's what I can think of right now - if anyone actually implemented decent emoji support in their app, would love to hear your input.

VRonin

To make them look relatively acceptable

Just add a font that makes them look good, like Twitter's emoji (source, ttf, how to add the font)

plus some way for the user to actually enter them

You'll have to implement a "virtual keyboard" like a floating QTableView displaying the emoji and adding them to the text once they are clicked like most mobile apps do

Vadi2

Sounds good, thanks!

Vadi2

This does not work for me. I'm pasting 😃 into a QTextEdit - if I use the Emoji One font, it comes up black & white. If I use the Apple Color Emoji you linked above, nothing gets pasted.

This is using Qt 5.9.3 on Ubuntu 17.04.

Does anyone have emoji's working in Qt?

raven-worx

@Vadi2
i once have implemented this. This wasn't an easy task and took quite some time.

@Vadi2 said in Emoji support:

This does not work for me. I'm pasting 😃 into a QTextEdit - if I use the Emoji One font, it comes up black & white

Using fonts for emoji will always result in b/w, since font's are basically nothing more than shapes rendered in a base color. You will ~~never~~ receive colored emoticons using fonts.

Here are some implementation hints:

i took the emoticons (16x16 PNGs) from Twitter - not all emoticon codes are covered unfortunately, but there are also other sources available for emoticons images
i used QTextObjectInterface class
i've overridden QTextEdit::createMimeDataFromSelection() to support copy of emoticons (convert custom text object back to unicode) to clipboard
connect to QTextDocument::contentsChange() signal to get notified when a emoticon unicode gets pasted from clipboard
scan the contexts of the QTextEdit/QTextDocument character by character and check if it's unicode is is an emoticon
watch out for the UTF-8 and UTF-16 pitfall (!!!): use QChar::isHighSurrogate(), QChar::isLowSurrogate() and QChar::surrogateToUcs4() methods to convert between UTF-16/UTF-8 and check if a character is a emoticon unicode character
keep in mind that some emoticons consist of up to 4 characters which combined result in a single emoticon

I researched quite some time before i started implementing, and that was the only way to generically implement this in Qt i've found. (Talking about QtWidgets, not QML)

VRonin

I'm wondering if it isn't easier to just skip Qt completely. Use an html/js text editor in a QWebEngineView

raven-worx

@VRonin
easier yes of course.
But you will loose the benefits of using just plain widgets and also you add a huge dependency which might not be desired in the product or even runable on the target system.

Vadi2

Thanks for the detailed reply @raven-worx! That helps a lot. We're using a custom widget where we do our own painting, so from what I gather, it'd be easiest for us to take the emotion images and paint them ourselves.

Sikander Rafiq

@Vadi2
Hi Vadi, Have you added support for emojis in qt application for windows. Have you added emoji support. It works well for colored emojis as well?. Please share how you implement it in qt application for windows.

Thanks.

Vadi2

No, I haven't. It's too complicated in Qt right now.

Pablo J. Rogina

@Vadi2 if your issue is solved, please don't forget to mark your post as such. Thanks.

Sikander Rafiq

@Vadi2
Thanks for reply.

Sikander Rafiq

@raven-worx
Have you implemented colored emojis properly in qt project in this way which you mentioned in this post?

You did not mentioned when we get uint by combining high and low surrogate and it is emoticons, then how to render it in qt.
Thanks in advance for your response.

raven-worx

@Sikander-Rafiq said in Emoji support:

Have you implemented colored emojis properly in qt project in this way which you mentioned in this post?

as written i used Twitter emoticon icons (PNGs), so yes they are colored.

You did not mentioned when we get uint by combining high and low surrogate and it is emoticons, then how to render it in qt.

As i mentioned use QTextObjectInterface. Following the same principle like in this example.

Sikander Rafiq

I have developed Emoticon widget in Qt C++. Please see https://youtu.be/QXDfhien_vM

raven-worx

FYI: https://forum.qt.io/topic/123515/qrwemoticons

Pedro Vicente

@raven-worx said in Emoji support:

Here are some implementation hints:

@raven-worx I am trying to change your github project to build with CMake

https://github.com/raven-worx/qrwemoticons

I seems the steps you described above are not in this implementation, is that correct? Do you have any samples to share with those steps, or are they not really needed any more? Thanks

Pedro Vicente

@Pedro-Vicente This is my Cmake script

cmake_minimum_required(VERSION 3.16)
project(qrwemoticons VERSION 1.0.0 LANGUAGES CXX)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

set(CMAKE_INCLUDE_CURRENT_DIR ON)
set(CMAKE_AUTOMOC ON)

if(MSVC)
 set (CMAKE_PREFIX_PATH "C:\\qt_install")
endif()

find_package(Qt6 REQUIRED COMPONENTS Widgets)
find_package(Qt6 REQUIRED COMPONENTS Svg)
find_package(Qt6 REQUIRED COMPONENTS Xml)
qt_standard_project_setup()

add_definitions(-DQRWEMOTICONS_LIB)

add_executable(qrwemoticons
src/QrwEmoticons.cpp 
src/QrwEmoticons_p.cpp 
src/QrwEmoticons_data.cpp 
src/TextEdit.cpp 
src/QrwEmoticonsTextObjectInterface.cpp
include/QrwEmoticons/Global.h 
include/QrwEmoticons/QrwEmoticonsPlugin.h 
include/QrwEmoticons/QrwEmoticons.h 
include/QrwEmoticons/TextEdit.h 
src/QrwEmoticons_p.h 
src/QrwEmoticonsTextObjectInterface_p.h
example-app/src/MainWindow.cpp
example-app/src/MainWindow.h
example-app/main.cpp)

include_directories(include)
include_directories(example-app/src)

target_link_libraries(qrwemoticons PRIVATE Qt6::Widgets)
target_link_libraries(qrwemoticons PRIVATE Qt6::Svg)
target_link_libraries(qrwemoticons PRIVATE Qt6::Xml)
set_target_properties(qrwemoticons PROPERTIES WIN32_EXECUTABLE ON MACOSX_BUNDLE ON)

#plugins
#The json file must reside in one of the include directories specified by the build-system. moc exits 
#with an error when it could not find the specified file.
include_directories(plugin-twitter)
include_directories(shared/src)

add_library(plugin-twitter SHARED 
shared/src/QrwEmoticonsHelper.cpp
shared/src/QrwEmoticonsHelper.h
plugin-twitter/src/plugin.cpp
plugin-twitter/src/plugin.h)
target_link_libraries(plugin-twitter PRIVATE Qt6::Widgets)
target_link_libraries(plugin-twitter PRIVATE Qt6::Svg)
target_link_libraries(plugin-twitter PRIVATE Qt6::Xml)