KOS Developer's Portal

UI On Simulator

Introduction

In this tutorial we’ll:

Get our React user interface to run inside the Studio simulator’s browser window
Set the height and width of the simuluator’s window

Java

There is only one change to make in our Java code:

Modification to MyKosApp

public class MyKosApp extends SystemApplication<AppConfig> {

    @Autowired
    private ChromeService chromeService; (1)

    @Override
    public void start() {
        log.info("MyKosApp.start()");
        ingredientService.setSource(new OurBrandSet());  // install ingredients
        assembly = new OurAssembly();
        installAssembly(assembly);
        log.info("Assembly installed.");
        chromeService.goToUrl(null, "http://localhost:8081/system/ncui/index.html", false); (2)
    }

    // . . .
}

1	Instantiate the KOS Chrome service by autowiring it in
2	Tell the Chrome service to jump to our NCUI web app: ⁃ port 8081 as set in both the Studio image configuration port mappings page and our React `.env` environment file ⁃ `system` because that’s our app ID (see `descriptor.json` file) ⁃ `ncui` because that’s the mount point of our NCUI KAB (see `MyKosApp.mountUIKabs()`) ⁃ `index.html` because that’s React’s home page

See It In Action

Build your Java and React KAB files as shown in previous tutorials, then open Studio and run your "My KOS App" image.

Inside the simulator’s window, now instead of seeing the "Welcome to KOS" message and Coca-Cola logo, you’ll see your React application:

Figure 1. Our KOS app running inside the simulator’s window

Well that was easy!

Temporary Workaround

At the moment, you must perform a workaround for this to work:

In the image configuration > settings > port mappings, set the SSH local override port to something, say 8022.
Run the application image as normal
Once it’s running, open a terminal into the simulator’s virtual machine using ssh -p 8022 root@localhost
Then execute the chromeAdapter application from the VM’s command line (it’s on the path)

Now, your React application should show up in the simulator’s window.

Change Display Size

While we’re here, let’s tell KOS the size of the display our application will eventually run on.

To do that, open the image configuration window, go to the Settings card, then click on Hardware Profiles. Click the "Configure new profile" button and fill out the form something like this:

Figure 2. Configuring hardware profile

As you can see, this page defines the hardware capabilities of the eventual target system. We’ve decided to set the screen size to 1280 x 700 pixels. Click the Create button to save this profile, then make sure it’s selected as the desired profile:

Figure 3. Selected hardware profile

Verify Screen Size

Once you’ve closed the image configuration window, then restart our application.

You should see that the application window’s size is now 1280 x 700. You may need to uncheck the "zoom to fit" option:

Figure 4. Uncheck zoom to fit

With the target display size now set, you can verify the exact positioning and spacing of all UI components without having the actual hardware available.

Using Local Browser

A nice feature here is that you can still view your application in a local browser, using the same http://localhost:8081/system/ncui/index.html URL. This gives you the ability to use all of your local browser’s developer’s tools for testing and debugging.

Summary

We now have our Java backend and React web application running inside Studio’s simulator.

Next up, we’ll think more about how to implement an actual dispenser’s man-machine interface.