Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Emoji support
Forum Updated to NodeBB v4.3 + New Features

Emoji support

Scheduled Pinned Locked Moved Unsolved General and Desktop
21 Posts 6 Posters 17.6k Views 4 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    Vadi2
    wrote on last edited by
    #1

    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.

    VRoninV 1 Reply Last reply
    0
    • V 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.

      VRoninV Offline
      VRoninV Offline
      VRonin
      wrote on last edited by
      #2

      @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

      "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
      ~Napoleon Bonaparte

      On a crusade to banish setIndexWidget() from the holy land of Qt

      1 Reply Last reply
      2
      • V Offline
        V Offline
        Vadi2
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0
        • VRoninV Offline
          VRoninV Offline
          VRonin
          wrote on last edited by
          #4

          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

          "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
          ~Napoleon Bonaparte

          On a crusade to banish setIndexWidget() from the holy land of Qt

          1 Reply Last reply
          4
          • V Offline
            V Offline
            Vadi2
            wrote on last edited by
            #5

            Sounds good, thanks!

            1 Reply Last reply
            0
            • V Offline
              V Offline
              Vadi2
              wrote on last edited by
              #6

              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-worxR 1 Reply Last reply
              0
              • V 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-worxR Offline
                raven-worxR Offline
                raven-worx
                Moderators
                wrote on last edited by raven-worx
                #7

                @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)

                --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                If you have a question please use the forum so others can benefit from the solution in the future

                S P 2 Replies Last reply
                7
                • VRoninV Offline
                  VRoninV Offline
                  VRonin
                  wrote on last edited by
                  #8

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

                  "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
                  ~Napoleon Bonaparte

                  On a crusade to banish setIndexWidget() from the holy land of Qt

                  raven-worxR 1 Reply Last reply
                  0
                  • VRoninV VRonin

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

                    raven-worxR Offline
                    raven-worxR Offline
                    raven-worx
                    Moderators
                    wrote on last edited by
                    #9

                    @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.

                    --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                    If you have a question please use the forum so others can benefit from the solution in the future

                    1 Reply Last reply
                    2
                    • V Offline
                      V Offline
                      Vadi2
                      wrote on last edited by
                      #10

                      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.

                      S 1 Reply Last reply
                      0
                      • V 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.

                        S Offline
                        S Offline
                        Sikander Rafiq
                        wrote on last edited by
                        #11

                        @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.

                        1 Reply Last reply
                        0
                        • V Offline
                          V Offline
                          Vadi2
                          wrote on last edited by
                          #12

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

                          S 1 Reply Last reply
                          0
                          • Pablo J. RoginaP Offline
                            Pablo J. RoginaP Offline
                            Pablo J. Rogina
                            wrote on last edited by
                            #13

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

                            Upvote the answer(s) that helped you solve the issue
                            Use "Topic Tools" button to mark your post as Solved
                            Add screenshots via postimage.org
                            Don't ask support requests via chat/PM. Please use the forum so others can benefit from the solution in the future

                            1 Reply Last reply
                            0
                            • V Vadi2

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

                              S Offline
                              S Offline
                              Sikander Rafiq
                              wrote on last edited by
                              #14

                              @Vadi2
                              Thanks for reply.

                              1 Reply Last reply
                              0
                              • raven-worxR 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)

                                S Offline
                                S Offline
                                Sikander Rafiq
                                wrote on last edited by
                                #15

                                @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-worxR 1 Reply Last reply
                                0
                                • S 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-worxR Offline
                                  raven-worxR Offline
                                  raven-worx
                                  Moderators
                                  wrote on last edited by
                                  #16

                                  @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.

                                  --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                                  If you have a question please use the forum so others can benefit from the solution in the future

                                  1 Reply Last reply
                                  1
                                  • S Offline
                                    S Offline
                                    Sikander Rafiq
                                    wrote on last edited by
                                    #17

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

                                    1 Reply Last reply
                                    2
                                    • raven-worxR Offline
                                      raven-worxR Offline
                                      raven-worx
                                      Moderators
                                      wrote on last edited by
                                      #18

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

                                      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                                      If you have a question please use the forum so others can benefit from the solution in the future

                                      1 Reply Last reply
                                      1
                                      • raven-worxR 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)

                                        P Offline
                                        P Offline
                                        Pedro Vicente
                                        wrote on last edited by
                                        #19

                                        @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

                                        P 1 Reply Last reply
                                        0
                                        • P 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

                                          P Offline
                                          P Offline
                                          Pedro Vicente
                                          wrote on last edited by
                                          #20

                                          @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)
                                          
                                          P 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved