UI Development

Image Setup

Overview

In this video, we create a basic image for the device in KOS Studio, which is a pre-requisite to develop using KOS UI SDK.

This assumes a working backend is already present and these artifacts are used in this video to set up an image. Use Image Manager in KOS Studio to create a new image.

Configure the image using the configuration manager, to have the appropriate KOS release with the Dispense SDK option selected, appropriate hardware profile, port mappings if used, and local artifacts for the backend project. With these settings, you should be able to run the image, which will be used for UI development.

Transcript

One of the prerequisites to development with the KOS UI SDK is to have an image that’s running that we can communicate with.

So I’m going to go through that process right now in Studio to get everything set up in a way that we can start development.

The assumption here is that we have a backend that’s already been created that we’re going to be working against.

So that’s already been created, all the artifacts are there, I’m just going to create an image now that I can use to validate my development.

So to start with, I come in, I have no images here, but I can create one using the image manager.

I can open it up, create a new image that I’ll just simply call Tutorials.

Close this up.

I need to go and do a little bit of configuration.

So from here, I’ll open up the image configuration.

I need to pick Release.

For the purpose of this tutorial, we’re going to use the 1.1 snapshot, but you can choose the release that makes the most sense for you.

From here, I have a little bit of configuration I need to do to set up.

So I want to set up a profile.

In this case, I’ll use a relatively standard Raspberry Pi profile, which has got two giga RAM and a relatively good size screen.

I do want to set up port mappings that I can communicate with this image from within a web browser, rather than having to deploy to the dispenser all the time.

This allows me to do active development.

So I’m going to do some port mapping here.

I’m going to map the SSH port to an externally visible one of 8022, and I’m going to map the HTTPT port, just pass it through using 8081.

That means my browser will be able to communicate with this backend dispenser using that particular port.

From there, I have a little bit of configuration I need to do where I need to set up some local artifacts in order to have them deployed to this dispenser.

So I’m going to go through this and just pick the artifacts that I need.

There are really only a few, but in the backend project, there is an artifact that represents or a cab file that represents the system application that we’re going to be running in the backend.

I have another local artifact, the same location or in a similar location.

That’s going to have the brand set that I’m going to be working with.

Now the brand set is really just information about the ingredients that are potentially installable onto this dispenser, including things like, you know, whether it’s chilled or carbonated, or whether it has an icon that I need to be able to use.

This is metadata that’s useful for the UI, but isn’t necessarily consumed by the backend.

So we want to make sure that this thing is available, and our particular system application will load this up.

I also have a couple of other pieces that I want to include, so I’ll go in here and pull in the native cab file so that we can actually talk to the hardware, and that’s only optional.

And the last thing that I need to be able to do is map in a couple of artifacts from our own registry.

So in this case, I’ve got the dispense SDK, which will give us access to all of the assembly and all of the extensions that are going to let us actually dispense beverages on this particular image, and I’m then going to map in our various local artifacts into the system application so that they can be used.

And that’s about it.

So when I close this up, I don’t have any error markers, and I can start running this.

You can see here that it’s started up, and I should be able to start operating against this particular image.

That’s all there is just to make sure we have a minimum image setup, and you can set up your own backend application as per your needs.

Bye.

Code

Summary

Previous
Next
On this page
Java Development
Seamlessly transition from Legacy+ systems to Freestyle microdosing and advanced distributed dispense systems.
UI Development
Using KOS SDKs, integrating Consumer and Non-consumer facing UIs becomes seamless, giving you less hassle and more time to create.
Video Library
Meet some of our development team, as they lead you through the tools, features, and tips and tricks of various KOS tools.
Resources
Familiarize yourself with KOS terminology, our reference materials, and explore additional resources that complement your KOS journey.
Copyright © 2024 TCCC. All rights reserved.