SQuan-esristaff

ECMAScript 7: Unicode Emojis and Clipart

Blog Post created by SQuan-esristaff Employee on May 8, 2019

1. Introduction

 

This amazing clipart can be produced with a surprising short amount of code:

 

 

 

import QtQuick 2.7
import ArcGIS.AppFramework 1.0

App {
    id: app
    width: 400 * AppFramework.displayScaleFactor
    height: 640 * AppFramework.displayScaleFactor
    Text {
        anchors.centerIn: parent
        text: "\u{1f304}"
        font.pointSize: 128
    }
}

 

This blog talks about Unicode and the wonderful emojis and cliparts that are hidden within. It also covers some new syntax introduced in AppStudio 3.3, Qt 5.12.1 and ECMAScript 7 (which includes ECMAScript 6).

 

2. Use Unicode Clipart to rapidly create UI

 

You can use Unicode emojis and clipart in Buttons and MenuItems:

 

import QtQuick 2.7
import QtQuick.Controls 2.2
import ArcGIS.AppFramework 1.0

App {
    id: app
    width: 400 * AppFramework.displayScaleFactor
    height: 640 * AppFramework.displayScaleFactor

    Button {
        id: menuButton
        anchors.right: parent.right
        anchors.margins: 10
        text: "\u{2630}"
        onClicked: menu.open()
    }

    Menu {
        id: menu
        x: menuButton.x + menuButton.width - menu.width
        y: menuButton.y + menuButton.height
        MenuItem { text: "\u{1f4c2}  Open" }
        MenuItem { text: "\u{1f4be}  Save" }
        MenuItem { text: "\u{1f5a8}  Print" }
        MenuItem { text: "\u{2702}  Cut" }
        MenuItem { text: "\u{1f4cb}  Paste" }
        MenuItem { text: "\u{1f4c5}  Calendar" }
        MenuItem { text: "\u{2699}  Settings" }
        MenuItem { text: "\u{1f6aa}  Exit" }
    }
}

 

 

 

You can use emojis to improve text shown to the user:

 

import QtQuick 2.7
import ArcGIS.AppFramework 1.0

App {
    id: app
    width: 520 * AppFramework.displayScaleFactor
    height: 640 * AppFramework.displayScaleFactor

    ListView {
        anchors.fill: parent
        model: [
            '  \u{2139}  "Do. Or do not. There is no try." — Yoda',
            '  \u{26a0}  "It’s not wise to upset a Wookiee." - Han Solo',
            '  \u{1f534}  "It’s a trap!" - Admiral Ackbar'
        ]
        delegate: Text { text: modelData }
    }
}

 

 

3. Where is the list of emojis?

 

Using the String.fromCodePoint(codePoint) you can display any Unicode characters base on its code point number. You can use this code pattern to iterate code points searching for interesting emojis and clipart. The following shows the emojis and clipart from 1F300 to 1F3FF.

 

import QtQuick 2.7
import ArcGIS.AppFramework 1.0

App {
    id: app
    width: 520 * AppFramework.displayScaleFactor
    height: 640 * AppFramework.displayScaleFactor

    property int startCodePoint: 0x1f300
    property int endCodePoint: 0x1f3ff
    property int codePoint: startCodePoint

    Text {
        anchors.centerIn: parent
        text: String.fromCodePoint(codePoint)
        font.pointSize: 64
    }

    Timer {
        id: animTimer
        repeat: true
        running: true
        interval: 100
        onTriggered: codePoint = (codePoint < endCodePoint) ? codePoint + 1 : startCodePoint
    }
}

 

You can also use online lists to search for Unicode emojis and clipart, i.e. "sunrise over mountains" can be found in the following lists:

 

https://unicode.org/emoji/charts/full-emoji-list.html#1f304

https://emojipedia.org/sunrise-over-mountains/

 

Some interesting Unicode blocks are 2600 - 2BFF and 1F300 - 1F8FF.

 

For a listing of Unicode blocks refer to: https://en.wikipedia.org/wiki/Unicode_block

 

4. Character vs Code Point

 

A character is represented internally as a 16 bit number which means there can be a total of 65536.

 

Unicode allows for 17 planes, each of 65,536 characters. This gives a total of 1,114,112 possible characters (i.e. 0x to 0x10ffff).

 

If a Unicode Code Point is within a 16 bit number, it will only require 1 character to represent, otherwise, we will need two characters.

 

For instance, in AppStudio 3.2, Qt 5.11.2 and ES 5, we needed two characters to represent the sunrise over mountains emoji, i.e. "\ud83c\udf04".

 

The code point syntax "\u{1f304}" in AppStudio 3.3, Qt 5.12.1 and ECMAScript 7 (which includes ECMAScript 6) is new. It actually expands into the two characters that make it. The String.fromCodePoint() function is also new.


"\u{1f304}" === String.fromCodePoint(0x1f304)

 

we can always convert code point back into their numbers with:

 

"\u{1f304}".codePointAt(0) === 0x1f304

 

We can also convert code points to characters:

 

"\u{1f304}".length === 2
"\u{1f304}".charCodeAt(0) === 0xd83c
"\u{1f304}".charCodeAt(1) === 0xdf04
"\u{1f304}" === "\u{d83c}\u{df04}"

 


 

5. Caveats

 


5.1 Not all clipart is available or consistent cross platform

 


When viewing Unicode clipart on Windows 10 you find a set of Mahjong tiles at 1F000 - 1F02B. You might be inclined to use them in a Mahjong app:

 

 

However, when you check on other platforms, you may quickly change your mind. On Linux, we get the complete set of clipart, but, in black and white. On macOS, all of the characters appear black and white except for Mahjong Red Dragon appears in colour. On iOS, only the Mahjong Red Dragon appears whereas all other characters are unavailable. On Android, only the Mahjong Red Dragon tile is available there too. Also note the appearance of the no data tile is different on every platform.

 

On Linux:

 

 

On macOS:

 

 

On iOS:

 

 

On Android:

 

 

5.2 Issue with some CodePoints on Buttons

 

In the following code snippet we try to render the same text in Text and Button components:

 

import QtQuick 2.7
import QtQuick.Controls 2.2
import ArcGIS.AppFramework 1.0

App {
    id: app
    width: 520 * AppFramework.displayScaleFactor
    height: 640 * AppFramework.displayScaleFactor

    Column {
        Text {
            text: "\u{263a} \u{1f304} "
            font.pointSize: 32
        }

        Button {
            text: "\u{263a} \u{1f304} "
            font.pointSize: 32
            font.capitalization: Font.MixedCase
        }
    }
}

 

we see that the smiley and the face emoji renders okay on both the Text and the Button

 

 

However, the Button requires a workaround that disables the material design capitalization on Buttons. This is due to a bug in Qt 5.12.x reported in https://bugreports.qt.io/browse/QTBUG-75559. Help get this bug fix by voting on it.

 

 

Summary

 

You can find a lot of clipart or emojis that help deliver high visual impact for little expense in code.

 

Caveats are not every platform offers the same set of clipart or emojis nor are they consistent in appearance on the ones that they do offer.

 

Cross platform testing is essential.

 

 

References:

 

Send us your feedback to appstudiofeedback@esri.com

 

Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial.

 

Follow us on Twitter @AppStudioArcGIS to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.

 

The AppStudio team periodically hosts workshops and webinars; please click on this link to leave your email if you are interested in information regarding AppStudio events.

Outcomes