The Sunday Blog: New Nextion Editor 1.63.3

Adding Chinese input method with on-screen Pinyin keyboard

We have to admit, this is about a rather rare use case in the Western hemisphere, but it might happen that you have to design a Nextion HMI project requiring text input in Chinese. Since it’s rather not possible to have an on-screen keyboard which displays 8273 characters of the Chinese gb2312 encoding, a different way, the so-called Pinyin input method was recently added to the Nextion Editor and firmware in the version 1.63.3. In today’s article, we’ll look deeper into that and try understanding what Pinyin is and how it works.

What??? or 什么???or shénme???

Pinyin was developed in the late 1950s to obtain a romanization of the Standard Mandarin Chinese. The idea was to find a transliteration in latin characters for each Chinese character or symbol. We have to understand that Chinese is not written letter by letter but symbol by symbol where a symbol corresponds most times to a word, a prefix, a suffix, or, more generally approximated, to a syllable. Pinyin was furthermore thought to allow a half-way correct pronunciation for anglo-saxon people when they’d read Pinyin as it was English, which works well with a few exceptions for specific sounds which are rather proprietary to the Chinese language and which are for example transliterated as “zh”, “q”, or “x” within a syllable.

Next thing is that vowels (always within a syllable) might be pronounced in several tonalities which can totally alter the meaning of an otherwise identical (transliterated in latin characters) syllable:
mā (妈, mother) != má (麻, hemp) != mǎ (马, horse) != mà (骂, scold), just to cite one example. And you’d better take care to not call accidentally your mother a horse, because she risks to scold you. You see the challenge…

How to use Pinyin as an input method for Chinese?

Pinyin based input methods work always following the same two-level principle: You enter a syllable in Latin characters without tonality sign and you are given a selection of corresponding symbols. For example entering “ma” would show you 妈, 麻, 马,骂, and some more, and you’d then select the corresponding symbol, depending on what you intend to write, “mother”, “hemp”, “horse”, “scold”, or whatever.

… and how to to this on a Nextion HMI?

It’s very simple and I’ve designed an example project for you. It consists of a single page with a nice background picture of Xichong Beach near Shenzen and a header with the inscription 和我们一起探索夏天!- “Discover the summer with us”!

Then, there are two text components to play with the new on-screen keyboard. The first is preset with 学习会让你更聪明!which means “Studying will make you smarter!” and the second with “your text here”. Both have a global .vscope attribute to allow linking an on-screen keyboard to these, and their .key attribute set to ChineseInput\keybdAP.

In addition to the other on-screen keyboards, the so-called ChineseInput keyboard will add not only one (ASCII) font to your project, but a second, Chinese one with gb2312 encoding. Now, to display the result of our keyboard entries, our text field components will naturally need to have their .font attribute set to a font with gb2312 encoding. You might for this purpose re-use the small (16px high) font added by the keyboard to save on flash memory since font resources with 8273 characters are somewhat heavy. For this demo project, I decided to “waste” another 1.7MB for a better readable 32px high font.

And now the usage, step by step:

Download, compile and upload the following demo HMI project: kbdtest.HMI
It’s made for the 3.5″ Discovery “F” HMI, but you can easily change the target device in the Editor to make it run on a Basic “T” or Enhanced “K” display before you upload it.

When launched, touch the line “your text here” to display the on-screen keyboard. Use the “DEL” button repeatedly to delete the current text (“your text here”) and then press the button with the Chinese symbol left of the spacebar since we’ll now enter a phrase in Chinese . I’ll show you the detailed proceeding with the debugger/simulator, this is clearer than shooting photos from the display itself. It works exactly the same on the display:

Now, we want to enter the phrase “Greetings from XiChong Beach” in Chinese, thus “来自西冲海滩的问候”. The first word (the first two symbols 来自) is láizì in Pinyin. We thus enter the first syllable with latin letters “lai” and we will find that these don’t appear in the entry text field, but below of it. Right of it, a list of possible symbols for this syllable are displayed. We’ll pick the second one from the left, because it’s the 来 which we are after. Then, it will appear in the entry field:

Now we continue by typing “zi” and selecting this time the first one of the suggested symbols:

Congratulations! You just wrote probably your first Chinese word on a Nextion HMI! Let’s continue with the symbols for xī chōng: 西冲 : Typing “xi” will show us 8 symbols to select from, but none is the one which we are looking for. But did you see the arrows right of them? Clicking on “>” will display more fitting symbols and the 西 is then the first in the list to take. For “chong”, we take the second one (冲) and we’ve already mastered almost half of our entry:

We are getting used to it! For the remaining 5 symbols 海滩的问候, we type “hai” and take the 4th (海) in the list, “tan” and take the 6th (滩), “de” and the 3rd (的), “wen” and the 1st (问), “hou” and the 3rd (候), and finally the “OK” button:

And now, have fun experimenting with Chinese text input!

Happy Nextioning!