Using Flutter to teach the next generation part2

As promised I now want to share how well the teaching experiment went.

How the day went

Preparation

I used our kitchen table and moved it closer to the TV to mirror the MacBook’s screen to it.
I used AirPlay for that which turned out to be quite laggy (moving the mouse was very hard) so the next time I would rather run an HDMI cable to the TV

Start

We gathered 6 kids (2 of my kids and 4 friends) and started off discussing what the TicTacToe game has to look and behave like.
I used the version I already created beforehand to show what our goal will be.

After doing that we started Android Studio and created a new project. I explained briefly what the main parts of a Flutter app are and where we will spend our effort at (Position wise). Of course, I didn’t explain all the details of what’s written there. No information about State(less)Widgets, classes or anything on that end.

We started by simply placing 9 texts and layouted them using Columns and Rows. Before we started to fine tune the cells I mentioned that we might want to extract the Text part to a method so that we don’t have to make every modification 9 times.
The concept of a Function was already clear to my children (they used Swift Playgrounds a bit) so they were eager to explain the concept to the other kids.

So we created a method that creates the cell content, moved the Text there and made the content a parameter.
Afterwards we replaced all Texts with a call to that method.
The cells up to that point simply contain the “cell ID” (1-9) to see how the text will look like.

Using Flutter to teach the next generation

What I already tried

I have 3 kids at the age of 12, 10 and 2.
Without trying to be one of the parents that really insists on the kids having to do what the parents enjoy doing I still want to provide enough opportunities for them to get hooked by software development.
The tries I had to this point didn’t really work out:

Board games

I used board games that encourage “programmer thinking” (Robot Turtles). While it was quite funny to play it never stuck, so now it is waiting in the drawer for the 2y old to pick it up one day.

Educational Hardware pieces

I thought “maybe this is too theoretical and there is no connection to the real world” so I bought some hardware that is meant to be controlled by high level visual programming languages (Makeblock).

This also was fun only for a short period of time and then the kids lost interest.

Next plan: Apps

As the older kids are quite tied to their smartphones and given the battle that we as parents have almost every day regarding the smartphone usage (the kids have a very strict screen time with their smartphones) I thought “maybe it would be a good idea if they would be able to create a useful app for their smartphone”.

Avoid MacOS accent popup menu

For the Flutter based Terminal application I wanted to deactivate the MacOS behaviour that shows an accent selection popup when a key gets pressed long (instead of repeating the pressed character).

This is actually a feature in MacOS and can be disabled by tweaking some MacOS settings via terminal commands.
I wanted to do that programatically as this behaviour doesn’t make much sense for Terminal applications.

Finding information about this topic is really challanging even if the solution isn’t that complicated so I decided to leave that piece of information here so that someone else might stumble upon it.

Overriding MacOS default settings

The key to the desired behaviour is to override the ApplePressAndHoldEnabled setting for our application. This can be done by tweaking the integration layer of the Flutter app (the MacOs project).

Just extend the AppDelegate located in AppDelegate.swift by adding the following method:

override func applicationDidFinishLaunching(_ notification: Notification) {
    UserDefaults.standard.set(false, forKey: "ApplePressAndHoldEnabled");
}

That’s all. Now your application doesn’t trigger the accent popup any more.

Enums in Dart are worth an extension

Note! Time has moved on and in the meantime Dart has capabilities that make this post obsolete. You can read about the new features here

Dart is a relatively simple programming language.
In general this is a good thing as the number of possibilities and patterns you have to know in order to develop something with it or when reading code is lower.
On the other hand you will miss certain features that other programming languages have that can lead to quite elegant solutions for certain problems.

Enums int Dart are such a case.

Enums are very simple in Dart. In general, they are classes / objects like everything else, but you can’t do neat tricks with them like for example with C#.

Let’s assume we have a byte value and want to read some bits of it. Those bits should have names (mapped to an enum) for better understandability.

Enums in C#

In C# there is a language feature for exactly that. You can use any enum to represent bits in a bit field.

[Flags]
public enum FlagValues : byte
{
    None    = 0x00,
    Flag1 = 0x01 << 0,
    Flag2 = 0x01 << 1,
    Flag3 = 0x01 << 2,
    Flag4 = 0x01 << 3,
    Option4 = 0x01 << 4,
    All = 0xFF
};

// later in the code

byte val = 0x05; //00000101

var flags = (FlagValues) val;
flags.HasFlag(FlagValues.Flag1); // true
flags.HasFlag(FlagValues.Flag2); // false
flags.HasFlag(FlagValues.Flag3); // true
flags.HasFlag(FlagValues.Flag4); // false

You can even do bitwise operations directly with the enum like

Dart Isolates and huge amounts of data

Why?

I’m currently experimenting with Dart and Flutter to take another shot at the terminal emulation application. This time not using C# but something completely new.
For this I decided to take a look at Flutter and Dart and try to implement the terminal application using that technology.
Gladly there is already a person in the internet that is working on implementing the xterm protocol for Dart and also has a working Flutter UI that renders the terminal.
https://github.com/TerminalStudio/xterm.dart
This implementation is not yet finished and has a couple of problems but is a really good starting point to dig into a Dart and Flutter based development of a terminal application.
One “problem” of the solution is that the whole terminal logic happens in the UI thread. So I wanted to move that logic into a separate thread and only copy the UI state to the UI thread for the UI to show it.
I did this for the C# based approaches and it speeded up the performance (especially reflow) a lot.

Current state

I know, I know. I planned to do this much more frequently as it then happened. I will do my best to keep you updated with anything of interest here.
There has not been so much going on in terms of development or side projects mostly because the Terminal application project got stale and there no all-focus new side project yet.

I started reviewing my small Smart Home setup I have here and see where I can improve things. When this gets more concrete it might also be worth on or two blog posts.

Current state of the Terminal application

The Terminal application got a bit stale due to several reasons.
Starting point of all that was me starting to think about the UI for the additional features. Things like managing different profiles as a starting point.
I played around with a couple of ideas and did some prototypes and I didn’t like anyone of them. Not so much because of the UX they used but the design.
I basically faced the standard problem of cross platform UI development. Qt can have styles - yes - but you will never reach a state where the application feels “natural” on any platform. I think this is especially visible on MacOS as a MacOS user is not very used to seeing all different kind of visual approaches between different applications.
This topic blocked me from continuing because I can not see how I will end up with a Qt/Qml based solution that looks like a nice MacOS application. Even small things like using some blur effect that modern MacOs apps have would be a pain if at all possible.

Creating a terminal application - Frontend take 2

Recap

We remember that the current state of building the terminal application was creating the user interface. I tried to use HTML to do the formatting of the text which turned out to be way too slow.

So I had to find a different approach as I wanted to stick with QML and .Net (for the already mentioned reasons)

QML alternatives

In QML there are a few alternatives for getting a formatted text to the screen. We already had a look at the HTML approach.
Another approach is to create a QQuickPaintedItem. You can imagine that control to be a drawing surface inside your QML layout that then can use a QPainter and its drawing API to draw whatever it wants.

This works by deriving a class from QQuickPaintedItem, implement the paint method and use the passed QPainter instance to draw.
The paint method is called whenever the content has to be redrawn.
This new class then has to be registered as a QuickItem with the QmlEngine and can then be used like any other QuickItem in your layout.

At some point in time you have to let it go

Minimalistic Text is almost 10 years old. The first commit to the repository happened on 7^th of November 2010.

How it began

I did not expect to create something that will reach the number of people Minimalistic Text did. It was basically just a try to create something for my new Smartphone (a Samsung Galaxy S). I was inspired by an application that already existed and was able to show the time as spoken text as a widget.

Recreating that widget and extending it by a first level of customization was basically the starting point. I started a thread over at Xda-Developers and immediately received great feedback. That encouraged me to extend the app step by step till it was a really feature packed text widget creator.

Creating a terminal application - Frontend take 1

Intro

The last post has been a while back. Sorry for that. I was busy with daily business and also the implementation of the terminal got a bit stuck. Now I’m back on track and can feed you with the latest development news.

The backend is only half way towards a complete terminal application. In fact it’s more 1/5 of the way.
The reason to use a terminal application other than the built in one is only its user interface. At least for normal operating systems where the built in terminal works as expected.

So it’s all about user interface and functionality.

As already mentioned I want to take the C# + QML route as it is a good way to dog food Qml.Net and also gain some more QML / Qt insights that help me with my day job. Win-Win 😁

QML might not be the first choice when you need a UI that basically renders its main content all the time and also needs to be fairly fast in doing so. We don’t want to hold back the process we control with having it waiting for our UI to render.

Creating a terminal application - Backend

How Terminals work

Maybe not all of you know what goes on behind the scenes when you launch your Terminal.
The term “terminal” is from the 1970s (or even earlier) Wikipedia: Computer terminal. At this time you had a real terminal device that was built in a way so that the input/output part was separated from the computing part. There were different protocols used for those two parts to talk to each other.
A well known terminal has been the VT100 that introduces special escape codes to control e.g. the cursor or status lights.
The protocol used there is still what drives the Terminal of your operating system (at least the Unix based ones).

So given the history a terminal application today is still controlled using the same protocol by the process it talks to.
The terminal application is “only” handling user input and output. It connects to the underlying process (most of the time the default shell of your OS) via special pseudo terminal connections where it sends the user input to the shell process and receives the UI data from the shell process (using the protocol from the old days).