Building a simple Dashboard using Medusa...

Aloha,

after spending some time creating my new Medusa gauges library I've started playing around with it to get an idea about the usability.
So in this little blogpost I will show you how you could create a simple dashboard with a flat ui design.
For this dashboard we will make use of the SlimSkin that will look like this

The dashboard should contain 6 gauges for 

• Steps
• Distance
• Active Calories
• Food Calories
• Weight
• Body Fat

Each of those gauges should also get a specific label for the description and a specific color. 

So the code to build one gauge will look like this

Gauge gauge = GaugeBuilder.create()
                          .skin(SlimSkin.class)
                          .barColor(Color.RED)
                          .decimals(0)
                          .maxValue(100)
                          .unit("UNIT")
                          .build();

Because we will also need a Label for the description we'll put each Label, with a Rectangle filled with the specific color and the Gauge in a VBox. Therefor we will create a little method that creates that VBox for us, here it is...

private VBox getVBox(final String TEXT, final Color COLOR, final Gauge GAUGE) {
    Rectangle bar = new Rectangle(200, 3);
    bar.setArcWidth(6);
    bar.setArcHeight(6);
    bar.setFill(COLOR);

    Label label = new Label(TEXT);
    label.setTextFill(COLOR);
    label.setAlignment(Pos.CENTER);
    label.setPadding(new Insets(0, 0, 10, 0));

    GAUGE.setBarColor(COLOR);
    GAUGE.setBarBackgroundColor(MaterialDesign.GREY_800.get());
    GAUGE.setAnimated(true);
    GAUGE.setAnimationDuration(1000);

    VBox vBox = new VBox(bar, label, GAUGE);
    vBox.setSpacing(3);
    vBox.setAlignment(Pos.CENTER);
    return vBox;
}

So the only thing that's missing is now is the creation of the Gauges and the VBoxes. By making use of the Medusa GaugeBuilder it's just a few lines of code to realize that, here it is...

GaugeBuilder builder = GaugeBuilder.create().skin(SlimSkin.class);
steps        = builder.decimals(0).maxValue(10000).unit("STEPS").build();
distance     = builder.decimals(2).maxValue(10).unit("KM").build();
actvCalories = builder.decimals(0).maxValue(2200).unit("KCAL").build();
foodCalories = builder.decimals(0).maxValue(2200).unit("KCAL").build();
weight       = builder.decimals(1).maxValue(85).unit("KG").build();
bodyFat      = builder.decimals(1).maxValue(20).unit("%").build();

VBox stepsBox        = getVBox("STEPS", MaterialDesign.CYAN_300.get(), steps);
VBox distanceBox     = getVBox("DISTANCE", MaterialDesign.ORANGE_300.get(), distance);
VBox actvCaloriesBox = getVBox("ACTIVE CALORIES", MaterialDesign.RED_300.get(), actvCalories);
VBox foodCaloriesBox = getVBox("FOOD", MaterialDesign.GREEN_300.get(), foodCalories);
VBox weightBox       = getVBox("WEIGHT", MaterialDesign.DEEP_PURPLE_300.get(), weight);
VBox bodyFatBox      = getVBox("BODY FAT", MaterialDesign.PURPLE_300.get(), bodyFat);

Finally we just have to put the VBoxes in a GridPane like follows...

pane = new GridPane();
pane.setPadding(new Insets(20));
pane.setHgap(10);
pane.setVgap(15);
pane.setBackground(new Background(new BackgroundFill(MaterialDesign.GREY_900.get(), CornerRadii.EMPTY, Insets.EMPTY)));
pane.add(stepsBox, 0, 0);
pane.add(distanceBox, 1, 0);
pane.add(actvCaloriesBox, 0, 2);
pane.add(foodCaloriesBox, 1, 2);
pane.add(weightBox, 0, 4);
pane.add(bodyFatBox, 1, 4);

And that's all it needs...so easy...here is the result (with random values)...

As you can see in the code I've also used the MaterialDesign colors that you can find in my Colors project. Means you need the Medusa jar and the Colors jar to run that code above.

Please keep in mind that the code above only contains the important parts, you need to create the Gauge and GridPane member variables and also need to add the GridPane to the JavaFX Scene which should be easy.

Please find the code over at github...

That's it for today, so keep coding...