UI

You might have used mbd2’s visual editor to create the UI, but you may have noticed that apart from the trait widget, the other widgets don't really work. This is because we haven't set up the UI logic, such as what should happen when a button is pressed. As mentioned in the Ldlbib UI, we recommend using the UI Editor to create and edit the UI layout, and using KubeJS / NodeGraph (W.I.P) to set up the interaction logic.

Here, we implement a simple, UI-based manual lava filling machine.

Note

Example can be download here!

Put it under the .minecraft folder.

First, we configure the machine to have one item trait and one fluid trait, and prepare our UI:

1. A UI corresponding to the trait.
2. Two buttons corresponding to the filling directions.
3. A TextTexture to display the amount of fluid in the tank.

Once you have everything set up, opening the machine's UI should look like this:

KubeJS Control

Next, we use KubeJS to add interaction logic to the UI. We provide an event MBDMachineEvents.onUI for you to setup the root widget. This event is triggered after MBDMachineEvents.onOpenUI and everything is prepared except the logic.

MBDMachineEvents.onUI("mbd2:kjs_ui_test", e => {
    const { machine, root } = e.event;
    const slot = root.getFirstWidgetById("ui:item_slot_0") // SlotWidget
    const tank = root.getFirstWidgetById("ui:fluid_tank_0") // FluidTankWidget
    const fill_button = root.getFirstWidgetById("fill_button") // Button
    const drain_button = root.getFirstWidgetById("drain_button") // Button
    const label = root.getFirstWidgetById("tank_label") // TextWidget

    // Set label to display fluid amount
    label.setTextProvider(() => Component.string(tank.fluid.amount + "mB"))

    // on button click
    fill_button.setOnPressCallback(clickData => {
        if (clickData.isRemote) {
            // trigger on the remote side
            // because everything is synced from server to client. you can do nothing on the remote side
        } else {
            var stored = slot.item
            // check if a lava bucket is stored
            if (stored && stored.id === "minecraft:lava_bucket") {
                // check if there is enough space in the tank
                if (tank.lastTankCapacity - tank.fluid.amount >= 1000) {
                    // remove the lava bucket
                    slot.item = { item: "minecraft:bucket", count: 1 }
                    // add 1000mB of lava to the tank
                    tank.fluid = { fluid: "minecraft:lava", amount: tank.fluid.amount + 1000 }
                }
            }
        }
    })

    drain_button.setOnPressCallback(clickData => {
        if (!clickData.isRemote) {
            // check if there is lava in the tank
            if (tank.fluid.amount >= 1000 && slot.item.id === "minecraft:bucket") {
                // remove 1000mB of lava from the tank
                tank.fluid = { fluid: "minecraft:lava", amount: tank.fluid.amount - 1000 }
                // add a lava bucket
                slot.item = { item: "minecraft:lava_bucket", count: 1 }
            }
        }
    })

})

Let's see our final result!

We only use four widgets here (TextTexture, Button, Slot, and Tank). For more details about other widgets please check pages.