How to load an image into an image widget from a list of files

[nathantg]

I have multiple images coming from spacecraft being downlinked to my ground station (where I run yamcs studio). I want to be able to display these images into an image widget, with the ability to select which file in a file list to display in the widget. I would also like the most recent image to be displayed upon arrival without the need to refresh the OPI. What would be the best way to do this?

I currently have this implemented, where I have arrow buttons to change the image that is being displayed. And the images are placed in a directory within the workspace for the Java script to read. However, when a new file is placed in the directory, the information for the image is accessible (the script knows the new file is there), but I get a "Could not load image" error when the script called the setPropertyValue() function with the file path. It's not until I refresh the OPI will the image be displayed.

Some advice on the best way to approach this would be great!

[ljburtz]

Hello @nathantg sharing our experience since we also ran into a similar issue when preparing Yamcs Studio displays for our previous mission.
Quick script below for reference (set and unset the widget property value)
We also experimented with rules and triggers to set / unset the widget property and force refresh
In the end what worked best was periodically setting the image property value to another image (e.g the previous image) then to the latest image. This causes a flicker but makes the refresh happen.

importPackage(java.lang);

var Runnable = java.lang.Runnable;
var Thread = java.lang.Thread;

var timerRunnable = new Runnable({
    run: function() {
        while (true) {
            // Clear the image first to force a refresh
            widgetController.setPropertyValue("image_file", "");
            try {
                Thread.sleep(1);
            } catch (e) {
                // Handle interruption if needed
            }
            
            // Set the image file
            widgetController.setPropertyValue("image_file", "reconstructed_images/lastimage1.png");
            
            try {
                // Wait for 1 second before next refresh
                Thread.sleep(1000);
            } catch (e) {
                // Handle interruption if needed
            }
        }
    }
});

var timerThread = new Thread(timerRunnable);
timerThread.start();

However I don't remember the "could not load image" error so your might be experiencing a different situation. Hope these pointers help somehow!

[ljburtz]

@nathantg another reference to consider: we then developed a image display plugin for Grafana that connects to Yamcs.
https://github.com/jaops-space/grafana-yamcs-jaops

The advantage is that you get the modern display capabilities of Grafana (including for other Yamcs telemetry, and also Yamcs commands!) For the image panel specifically, you can choose to display the image stored in a Yamcs bucket and get the name of the image from a Yamcs parameter. And the plugin subscribes to Yamcs via websocket so you get new images / new telemetry instantly, no need to have a refresh loop or any javascript.

glad to discuss further in the issues tab of that repository if you encounter any issue with our grafana plugin

[fqqb]

Assuming that the path to the image is a parameter value, you probably want to make sure that this values is only emitted after the image file has been fully written to disk. That would be my only guess for your "Could not load image" error. Else, see ~/.config/yamcs-studio/logs/ if you can find more error detail.

I concur with @ljburtz idea of sourcing your images from a bucket instead of a local path. This would also work in Yamcs Studio by setting image_file to something like ys://{mybucket}/{some/object.png}.