KOS Developer's Portal

Code the App

Introduction

Our digital rack project is quite straightforward. We need to loop through a collection of content and display it on the screen. This can be easily achieved by installing Linux on a Raspberry Pi and running a small Java Swing application. In fact, this example will demonstrate the KOS equivalent of this setup. While the example is simple, it allows us to introduce a few initial KOS concepts, use KOS Studio to install software and run in a simulator, and set up debugger support for remote debugging on any hardware target. We’ll also get a glimpse into the simplicity of building a dedicated-purpose device using KOS, where no install or startup scripts are required. We’ll simply push the play button and watch our device boot as a smart rack.

What is an Application in KOS?

KOS is an application-based platform. There are many examples of application-based platforms these days. From mobile devices to smart televisions, it seems everything can run applications. How is KOS any different from these platforms? The primary difference is the collaboration model for applications. On most consumer devices, applications represent dedicated experiences that a user interacts with one at a time. These applications are inherently untrusted and are typically isolated from each other using a form of sandboxing. In KOS, the application model is designed to be collaborative, where applications work together to enable new functionality. This model emphasizes the ability for applications to provide core functionality that other applications can use, similar to a library or a microservice.

More here

The System Application

Now that we have a way to display our digital content, we need to code the core component that launches it: the System Application.

The System Application

As KOS is designed for dedicated-use devices, the operating system boots into a single user-provided application that takes over the device and orchestrates all other functionality. In our example, this application simply displays content on the screen, but in other cases, the system application may load other applications that are dynamically defined and pushed over the air. In this tutorial, we’ll get our first look at a simple system application.

Displaying Content

Before we get to the system application, let’s consider our options for displaying content on our rack. A common approach to displaying content is to use a web browser. It’s a rich display engine for a broad range of content, including device user interfaces. KOS has sophisticated browser integration support, including the ability to control multiple browsers across multiple devices, push real time data, handle asynchronous operations and even provides the ability for different browsers to communicate directly to each other. However, for our first example we want to focus on the basics such as learning how to use KOS Studio and debugger integration, so we’re going to display content in the simplest way possible, which is using Java Swing to rotate through images using a timer.

The class below uses basic Swing components to fill the screen with a Jframe that switches between images using a timer. As this is standard Swing programming, we show the class below without any additional description. This class will be used in our system application to display content.

Creating a system application for KOS is as simple as extending the SystemApplication class as shown below:

/**
 * (C) Copyright 2024, TCCC, All rights reserved.
 */
package com.bookstore.rack;

import javax.swing.SwingUtilities;

import com.tccc.kos.core.service.app.BaseAppConfig;
import com.tccc.kos.core.service.app.SystemApplication;

/**
 * System application for simple digital rack that has a display that
 * rotates content.
 *
 * @author David Vogt (david@kondra.com)
 * @version 2024-09-17
 */
public class RackApp extends SystemApplication<BaseAppConfig> {

    @Override
    public void started() throws Exception {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new RackUI().setVisible(true);
            }
        });
    }
}

The User Interface

The provided Java code defines a class RackUI that displays the book rack content from the resources folder. It is launched in the started method of the System Application.

package com.bookstore.rack;

import java.awt.BorderLayout;
import java.awt.Color;
import java.net.URL;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.Timer;

public class RackUI extends JFrame {
    private JLabel imageLabel;
    private int currentIndex = -1;
    private final String[] imagePaths = {
        "/images/all.png",
        "/images/book1.png",
        "/images/book2.png",
        "/images/book3.png"
    };

    public RackUI() {
        // run full screen
        setExtendedState(JFrame.MAXIMIZED_BOTH);
        setUndecorated(true);

        // select the layout manager
        setLayout(new BorderLayout());

        // Set background color
        getContentPane().setBackground(Color.BLACK);

        // Image label to display the image content
        imageLabel = new JLabel();
        imageLabel.setHorizontalAlignment(JLabel.CENTER);
        add(imageLabel, BorderLayout.CENTER);

        // timer to rotate the image on the display
        Timer timer = new Timer(5000, (e) -> displayNextImage());
        timer.start();

        // show the first image
        displayNextImage();
    }

    private void displayNextImage() {
        currentIndex++;
        URL imageUrl = getClass().getResource(imagePaths[currentIndex % imagePaths.length]);
        ImageIcon icon = new ImageIcon(imageUrl);
        imageLabel.setIcon(icon);
    }
}

Code the App

Introduction

The System Application

Displaying Content

The User Interface

Send us your feedback!