Saturday, April 03, 2021

Tellsis language ("Nunkish") translator with Flutter UI


Update February 20, 2023:
Great news! The Tellsis translator app is now available through Flathub (link to Github packaging repo; this is not the actual app). More details in the main post below.
Update February 19, 2023:
I finally managed to package this app as a Flatpak bundle. It has been uploaded to the release page and instructions for installation have also been added. I am also applying for the app to be hosted on flathub.org and once that is approved, it will be much easier to install the app.
Update October 1, 2022:
Released version 0.2.1 today. The main change is to use SelectableText for the output so that it can be copied and pasted elsewhere. I also did a refresh install of Ubuntu MATE 22.04 and it works on that, so I guess there was something wrong with my previous install.
Update September 3, 2022:
Released version 0.2.0 today. Changed to version 0.2.0 since the use of dropdown_search, which required some code changes. Main fix was to rectify the poor handling of backslashes used to denote names. Sometimes, the names would not be properly replaced during the translation process, ending in "XXX1" "XXX2" being shown. Now it works.

 
Update (2) September 1, 2022:
Wow! Two updates in a day. Anyway, version 0.1.6 has been released. The major change is to replace flutter_form_builder with dropdown_search.
 
Update (1) September 1, 2022:
Version 0.1.5 released. Click here for Windows 10 installer and here for Android APK. For Linux users, it is available through snap. I was able to run it on Linux Mint 21 but not Ubuntu MATE 22.04. Main changes are to update the libraries used to the latest versions and add null checks and such due to null safety in Flutter.
 
Update July 9, 2021:
I have also created an account on Snapcraft, and Linux users should eventually be able to install it by
sudo snap install telsis-translator-flutter
on the command line. It seems to work on the snap that I previously built locally for amd64 architecture, but I have yet to figure out how to configure autobuild to work (it keeps failing).
Next is to add OCR capabilities, probably with the tesseract_ocr package, if I can figure out how to train it to recognise a custom font...
 
Update April 4, 2021: Binaries for Linux, Windows, and Android are available here.

I previously made a Python 3 script that translates to and from the Tellsis language (aka Nunkish), the language used in the Violet Evergarden world. I wanted to learn to create Android apps (I have done it previously in Java and Kivy, but I wanted to try something else), so I decided to learn how to program using the Flutter framework, which means I have to learn the Dart programming language. As part of learning Dart and Flutter programming, I decided to port my Tellsis language translator from Python 3 to Dart, then create a Flutter UI.

Using my spare time, I have finally managed to come up with a working version.

The advantage of using Flutter is that it is cross-platform. I can write the same code, and it will run on Linux, Windows, MacOS, Android, and iOS. Of course, I don't own an iPhone or iMac, so I can't test if the application works on those platforms, but so far, I have gotten the app to work on Linux and Android (my Samsung Galaxy S7).

Here is how it looks in Linux Mint 20.1. (Update 28 August 2023: I just found official sources that state "Tellsis" and have made changes to the text used in this blog from "Tellsis" to "Tellsis" but the software will not be updated as it may impact others who have already downloaded the software.)


And here is version 0.2.0 on Linux Mint 21.

 
And here is an example of it running in an Android phone (Samsung Galaxy S7) and Android emulator.
 

I have built them into binaries (as a snap package for Linux, and APK for Android) which can be downloaded here. The source code can be found in the Github repository given below. This app is just for demonstration and learning. It is not for commercial use.


The repo has instructions on building the source code as well as how to install the binary releases.

By the way, my review of the 2020 Violet Evergarden movie (VIOLET EVERGARDEN the Movie) can be found here.
 
Github repo: telsis_translator
 
All posts related to Violet Evergarden.

Okay, for more information about the programming part. I am quite new to Dart, so the code may not be written in the most "Dart-like" manner, such as expressions and coding conventions. For the main input form, I used the package "flutter_form_builder" which provides many readymade input widgets. The problem is that, being readymade, it is harder to customize without reading the source code. For example, I use a searchable dropdown menu for selecting the source and target languages. Right now, after tapping on the button, the user needs to tap again in the text field to type in the language. I really hope to be able to switch the input context to the text field when those buttons are tapped/clicked.
 
"flutter_launcher_icons" was used to create the icons for Android, using the previous icon from the Python 3 version. It was relatively easy; just following the instructions for the package.
 
I also had quite a hard time packaging the app for Android. If you leave everything as the default, it should be easy. But I tried to use my own Android package name, and the app would refuse to build (because I forgot to make sure that the package name was the same in the AndroidManifest.xml file for both debug and main folders) or launch (because the package name was not correctly reflected in the MainActivity.kt file). But I finally managed to iron all that stuff out.

Packaging for Linux (creating a snap package) was a bit problematic too. In the end, I settled on a workflow of snapcraft clean telsis-translator-flutter and snapcraft build. (Note: Will try to package as flatpak and publish on Flathub, see "To do" at end of post.)


Update April 4, 2021: Packaged for Windows using Inno Setup, which creates a self-extracting installer that will copy the required files into the "Program Files" directory and add a menu entry.
At first, I tried using the msix package as mentioned here, but it requires a signed certificate to create the installer, and the end user will also need to install that certificate on his or her computer in order to install the app. This was really a lot more hassle than what I expect most people want to go through. Still, I spent a couple of hours learning how to go about signing my own certificate and packaging a MSIX installer.
 
In the end, I just went with the "Building your own zip file for Windows" option to gather all the required files (after building for Windows using flutter build windows) and then Inno Setup to create an installer. There is no need to deal with certificates. The installer just works.

As of now, Flutter does not have a good way to set the title of the window on desktop systems (like Linux and Windows). There is a plugin that allows this, and a Stackoverflow issue and this article that gives a simple example on how to use the plugin. I thought about using this plugin but it seems that this functionality will eventually be added to the Flutter framework itself. So I guess, in the meantime, for hobby projects, I would just live without a fancy window title.

Get it from the Snap Store 

Note: Autobuild for arm64 architecture seems to be available, and you can try installing it by:
sudo snap install telsis-translator-flutter --channel=latest/edge
For amd64 platforms,
sudo snap install telsis-translator-flutter
should get you the latest stable release.
 
To do:
- Package as flatpak for Flathub using the following as example (DONE!):
 
Get the Tellsis translator app from Flathub here!
Or install it from the command line using the following command.
flatpak install flathub com.maplerain.telsis_translator_flutter

The app should also show up on Linux software manager apps that are integrated with Snap Store or Flathub, such as the one found in Linux Mint.

No comments: