A graphical application to enhance user experience with Ubuntu on WSL during the distro installation process.

Last update: Jun 8, 2022

Ubuntu WSL Splash

A graphical application to enhance user experience with Ubuntu on WSL during the distro installation process. Made with:

Flutter & C++

Getting Started

To experiment with the code you'll need Flutter on Windows. Refer to the Flutter documentation if you need to install it on Windows. You can skip the steps related to Android.

Also, Flutter requires Visual Studio. You can download the community edition from the IDE offical website. Make sure to read Flutter documentation thoroughly.

Beware: We are not talking about VSCode!

With Flutter and Visual Studio installed, you can git clone this repository (or download the source code from it) and:

cd ubuntu_wsl_splash
flutter run

You can also use your favorite editor/IDE to work with this project, like VSCode, IntelliJ or even Vim.

Contributing

Before submitting any issues or pull requests, make sure to review our contributor guidelines.

Technical details

Please check the explanation if you want to know more about how this project works.

License

The Ubuntu Desktop Installer is licensed under the GNU General Public License version 3.

GitHub

https://github.com/ubuntu/ubuntu-wsl-splash
Comments
  • 1. Added LogView widget

    • Will be used to display what would be printed to the launcher console.
    • Shamelessly copied from github.com/jpnurmi/ubuntu-desktop-installer.

    It is the black component of the screenshot below: image

    Reviewed by CarlosNihelton at 2022-01-11 19:16
  • 2. Matches the design team output

    This PR updates the slide show contents to match the output from the design team.

    The window has been scaled a little bit and forced centering the user's main display as a partial workaround to ensure the OOBE will not catch user's attention before the right time. There is another side of this work on WSL launcher itself to find and control the visibility of the OOBE window as the main way of reaching this aim, so the window resizing and positioning is just a secondary measure.

    Design screenshots and text can be found in the document: https://docs.google.com/document/d/16JdUzXox6bYDrsrrDvZ66LJskhy6qBxVyWBh2J7RobM/preview

    This is how it looks now:

    https://user-images.githubusercontent.com/11138291/161046142-b61c505d-6e65-449c-bfb1-822ffc8e6cdf.mp4

    Reviewed by CarlosNihelton at 2022-03-31 10:48
  • 3. Integrating the pieces

    It turns out that due the simplicity of this app I could keep the state management in one single top-level widget. Thus no need for the provider package.

    AppHome handles the InstallerStateController, making sure it's disposed in the end and reacts to its state change thru the method _buildStatusTile() which builds the pieces of the ListTile that are affected by the state changes.

    I didn't make it stateless because I needed to ensure the controller's dispose() method is called. I could have wrapped it in a Provider, but that would be the single reason why I'd bring that dependency to this project. So, to my understanding that is the perfect use case for a stateful widget, even though I don't need to call setState()

    Reviewed by CarlosNihelton at 2022-01-26 20:19
  • 4. Stdin transformer to fix broken lines

    By design this project is meant to display in the LogView widget the contents that would be printed in the launcher process stdout. That is achieved by having the launcher redirecting its output to a pipe whose read end is inherited as the stdin of this Flutter app.

    When building the proof of concept I noticed a fairly consistent behavior of stdin.transform(systemEncoding.decoder) stream interpreting line breaks just after the first character. I did some investigation on the C++ side, but nothing was conclusive enough, so I preferred to perform this quick fix and investigate further later on, since I don't really have a clue about what causes that behavior at this point after the first investigation steps being done.

    The fix implemented in the POC was just adding some more state to an already stateful widget. The need for state is what motivates writting a transformer class instead of just a function.

    As demonstrated in the test file it is meant to be passed straight into stdin.transform().

    void _transformerAssert(
        {required Iterable<String> input, required Iterable<String> output}) {
      final fakeStdin = StreamController<List<int>>();
      final stringStdin = Stream.fromIterable(input);
      fakeStdin.addStream(stringStdin.transform(systemEncoding.encoder));
    
      final resultStream = fakeStdin.stream.transform(StdinTransformer());
    
      expect(resultStream, emitsInOrder(output));
    }
    
    Reviewed by CarlosNihelton at 2022-01-20 17:26
  • 5. Make the custom exit dialog non-dismissible

    https://github.com/ubuntu/WSL/issues/177 documents the possibility of dismissing the dialog that notifies the user when its time to leave the slide show and interact with the OOBE, halting the installation. Making the dialog non-dismissible gives time for the user to acknowledge the notification and automatically close out in case it doesn't react on time, moving the installation forward.

    This closes https://github.com/ubuntu/WSL/issues/177 while we prepare the redesign that will remove the dialog in favor of something smoother.

    Reviewed by CarlosNihelton at 2022-05-03 21:39
  • 6. Translations into pt_BR

    Portugal variant requires more skilled translator. Brazilian one is being handled here, but the arb workflow wouldn't accept it without the more general pt version.

    Reviewed by CarlosNihelton at 2022-04-21 21:29
  • 7. Rename assets and fix missing 'u'

    When attempted to package the Flutter build artifacts using Visual Studio, MSBuild failed to understand the '%20' in asset files names, added by Flutter because the original assets have spaces in their file names. Removing the spaces in the original files solve the issue.

    Also, this fixes a typo causing a missing 'u' in the 'Ubuntu' name, as you may recall 😅

    Reviewed by CarlosNihelton at 2022-04-04 18:54
  • 8. Enables custom messaging for hiding the window

    The state in which the WSL launcher application was expected to close the splash actually works best by hiding the splash instead.

    This PR changes the semantic and behavior of the message WM_USER+7 from custom closing to custom hiding (thus the renaming) and adds another message for the actual close, which doesn't require method calls from the higher level API.

    Reviewed by CarlosNihelton at 2022-03-03 14:58
  • 9. IPC'ing the top level window HWND to the launcher

    By this change the Flutter app will post it's top level window handle through a named pipe created by the launcher as soon as it's created. WSL Launcher needs that information in order to programmatically close the splash or control its visibility.

    The launcher currently creates this named pipe before starting this application, even though, just for precaution a timeout of 3s is enabled and even if this IPC fails, the launcher has a fallback mechanism based on EnumTheadWindows API, for which the thread ID is known since it was created by the launcher.

    The other side of this IPC mechanism can be seen here: https://github.com/ubuntu/WSL/blob/f53f973569b4c4563fbdbbccca036081ad4a6831/DistroLauncher/splash_controller.h#L64-L136

    And its usage can be seen here: https://github.com/ubuntu/WSL/blob/f53f973569b4c4563fbdbbccca036081ad4a6831/DistroLauncher/splash_controller.h#L273-L301

    The end result looks like this:

    https://user-images.githubusercontent.com/11138291/155314417-6e8687df-fbb8-42d0-9cde-35dea80aea58.mp4

    Reviewed by CarlosNihelton at 2022-02-23 11:55
  • 10. Enables reacting to window close events

    • Method channel into the FlutterWindow to access its window handle.
    • If it was a plugin, indirect methods would be required (more fragile).
    • Launcher will send WM_USER+7 message to request close.
    • That enables distinguishing between launcher and user close requests.
    Reviewed by CarlosNihelton at 2022-02-17 21:41
  • 11. Installer Status Widget

    Builds on top of LogView (ubuntu-flutter-pluggins/ubuntu-widgets), the same component used in the U-D-I). It will be used to display the messages coming from the launcher app.

    Currently it is not protected against too many log lines, like rsync'ing the snap directories when debugging. That causes the GUI to jank. But that situation is not expected anyway, so let's not focus on it before detecting a real use case under the context of WSL.

    This PR aims to provide the bare bones configurable widget. Below is how it looks when fully configured:

    image

    Reviewed by CarlosNihelton at 2022-01-25 19:11

Related

Ubuntu-flutter-plugins - A collection of Flutter plugins and packages for Ubuntu applications.

Flutter plugins for Ubuntu A collection of Flutter plugins and packages for Ubuntu applications. ubuntu_localizations - provides localizations for Flu

Jun 18, 2022
Ubuntu Desktop Installer

Ubuntu Desktop Installer This project is a modern implementation of the Ubuntu Desktop installer, using subiquity as a backend and Flutter for the UI.

Jun 26, 2022
A tutorial for creating an Ubuntu Linux Flutter app, using the yaru theme
A tutorial for creating an Ubuntu Linux Flutter app, using the yaru theme

Building a Yaru app with Flutter Summary URL https://github.com/ubuntu/user_manager Category Environment Linux Status Feedback Link Author Frederik Fe

May 18, 2022
Ubuntu Software Store
Ubuntu Software Store

Unofficial Ubuntu Store Flutter - WIP An alternative software store for the Ubuntu Desktop made with Flutter. First goals Great UX Adaptive Layout Sna

Jun 22, 2022
Unofficial Ubuntu Desktop Settings App made with Flutter
 Unofficial Ubuntu Desktop Settings App made with Flutter

Unofficial Ubuntu Desktop Settings App made with Flutter - WIP The goal of this project is to build a feature complete settings app for the Ubuntu des

Jun 26, 2022
Trident - The magic kernel manager for elementary os and ubuntu based distros.

trident The magic kernel manager for elementary os and ubuntu based distros. testing Make a cache directory for trident in /var/cache/ sudo mkdir /var

Apr 5, 2022
Manage Subiquity for Ubuntu Desktop Installer

Manage Subiquity for Ubuntu Desktop Installer

Mar 3, 2022
Highlighter Coach Mark There are different ways for user on-boarding
Highlighter Coach Mark  There are different ways for user on-boarding

Highlighter Coach Mark There are different ways for user on-boarding. It can be a show of screenshots or overlay with directions to features, feature

Feb 2, 2022
Android-Toolbox is a desktop app which enables the user to access android device features which are not accessible directly from the mobile device
Android-Toolbox is a desktop app which enables the user to access android device features which are not accessible directly from the mobile device

Android-Toolbox is a desktop app which enables the user to access android device features which are not accessible directly from the mobile device. One of Android-Toolbox's special feature is to transfer files at the highest speed using ADB push and pull bypassing a lot of Android API overheads.

Jun 9, 2022
File manager application

Website ● Discord ● Releases ● Donate ● Documentation File manager application File manager for dahliaOS Written in Flutter Contribute If you're inter

Jun 17, 2022
A flutter application to monitor your Linux PC statistic.
A flutter application to monitor your Linux PC statistic.

Linux Stats App A flutter application to monitor your Linux PC statistic. Screenshots Installation Download or clone the repository: $ git clone https

Feb 14, 2022
An open source desktop application for creating set-plans for TV and movie productions

lyghts_desktop An open source (Windows) desktop application for creating set-plans for TV and movie productions. Getting Started This application uses

Feb 15, 2022
Implementation of Flutter Desktop Application
Implementation of Flutter Desktop Application

Flashmall Vendor This project is an implementation of a Design i found on Dibble.com by Casprine Assempah Art Light Theme Dark Theme Getting Started T

Mar 5, 2022
A push notification application for multiple platforms
A push notification application for multiple platforms

notifi.it App | Website | Backend Run locally create an .env with the example content SERVER_KEY=Hu2J7b7xA8MndeNS KEY_STORE=notifi-local DEV=true TLS=

Apr 30, 2022
A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.
A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully

Jun 7, 2022
A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.
A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully

Jun 7, 2022
Quickly is build as a tool to enhance your Flutter UI development experience and make code easier

Quickly is build as a tool to enhance your Flutter UI development experience and make code easier. It is highly inspired by Bootstrap and Tailwind CSS. It also provide lots of extension methods on String, List and Map.

Mar 14, 2022
Ubuntu Yaru Style - Distinct look and feel of the Ubuntu Desktop
Ubuntu Yaru Style - Distinct look and feel of the Ubuntu Desktop

Ubuntu Yaru Style - Distinct look and feel of the Ubuntu Desktop Using Yaru To be able to use this package follow this steps: Installation Make you su

Jun 26, 2022
Ubuntu Yaru Style - Distinct look and feel of the Ubuntu Desktop
Ubuntu Yaru Style - Distinct look and feel of the Ubuntu Desktop

Ubuntu Yaru Style - Distinct look and feel of the Ubuntu Desktop Using Yaru To be able to use this package follow this steps: Installation Make you su

Jun 26, 2022
Ubuntu-flutter-plugins - A collection of Flutter plugins and packages for Ubuntu applications.

Flutter plugins for Ubuntu A collection of Flutter plugins and packages for Ubuntu applications. ubuntu_localizations - provides localizations for Flu

Jun 18, 2022