The fastest way to build GUI for embedded devices

Install

TotalCross exists to make Graphical User Interface creation easy.

To start you only need to install it on your machine, and you have two options:

Install TotalCross VSCode plugin

The quickest way to start using TotalCross is to download the VSCode plugin. We highly recommend this route as it is a smoother process.

Make sure all dependencies are fulfilled (Java JDK 11+, Maven 3.6.2+, and Microsoft Java Extension Plugin), create a new project, and you are ready to go!

... or run TotalCross from scratch yourself!

If you prefer to run TotalCross yourself so you can develop on your choice of IDE, clone our HelloWorld repository, make sure you have all dependencies listed above in place, run mvn package and you are ready to go!

Usage

This is how you create a button with TotalCross:

package com.totalcross;
import totalcross.ui.gfx.Color;
import totalcross.sys.Settings;
import totalcross.ui.Button;
import totalcross.ui.MainWindow;
public class HelloWorld extends MainWindow {

    private Button btnRed;
    public HelloWorld(){
        setUIStyle(Settings.MATERIAL_UI);
    }
    @Override
    public void initUI(){
        btnRed = new Button("Red");
        btnRed.setBackForeColors(Color.RED, Color.WHITE);
        add(btnRed, CENTER,CENTER );
    }
}

This is how you extend a button to full screen width:

     public void initUI() {
        btnRed = new Button("Red");
        btnRed.setBackForeColors(Color.RED, Color.WHITE);
        add(btnRed, CENTER, CENTER, PARENTSIZE, PREFERRED);
    }

This is how you round borders on a button:

     public void initUI() {
        btnRed = new Button("Red", Button.BORDER_ROUND);
        btnRed.setBackForeColors(Color.RED, Color.WHITE);
        add(btnRed, CENTER, CENTER, PARENTSIZE, PREFERRED);
    }

This is how event handling happens:

     public void initUI() {
        btnRed = new Button("Red", Button.BORDER_ROUND);
        btnRed.setBackForeColors(Color.RED, Color.WHITE);
        btnRed.addPressListener((event) -> {
            // DO SOMETHING
        });
        add(btnRed, CENTER, CENTER, PARENTSIZE, PREFERRED);
    }

Cool, right? Easy as pie! :)

What next?

Check out our documentation or read through a quick starting guide (aprox. 8 minutes) and learn how TotalCross Components will save you tons of time when you build your GUI.

Have any questions?

Join our Telegram group. We are super quick to welcome and provide help to new users 😅.

There's also a handy FAQ.md file with all sorts of useful information, as what is inside this repo, how TotalCross works, how to become a contributor, and more.

Our contributors

We'd like to give a BIG shout-out to our three first external contributors! These people have helped make TotalCross better by enriching ongoing discussions, reporting bugs, opening issues, and publishing relevant content (videos, articles and etc):

• @otavio
• @jeffque
• @microhobby

Guys, you rock!

RoadMap

Find out what TotalCross world domination plans are by clicking here.

Where you can find us:

• Docs;
• Issues;
• Telegram;
• Medium;
• Youtube;
• Twitter;
• Instagram.