Using $SD.setFeedbackLayout with custom layouts

[erikjmurray]

Hi there,

I'm having an issue with dynamically changing the layout of an encoder display. I'm trying to have a screen saver display on timeout like so:

async function setScreenSaver(context, coordinates) {
	const layout = "../assets/layouts/screensaver.json"
	$SD.setFeedbackLayout(context, layout)
	const screenSaverIcon = await getScreenSaverIconAsBase64String(coordinates)
	feedbackPayload = {
	     screenSaverIcon: {value: screenSaverIcon},
	}
	$SD.setFeedback(context, feedbackPayload)
}

When I try to trigger the $SD.setFeedbackLayout(), it defaults to a generic layout with the name of action and the action icon.

If I add a screenSaverIcon param to all of the custom layouts and call setFeedback without changing the layout it works. I would prefer not to have to override the other settings in my other custom layouts to achieve this though.

Thanks for your help!

EDIT: Adding JSON files

SCREENSAVER LAYOUT

{
    "id": "com.example.plugin.screensaver.layout",
    "items": [
        {
            "key": "screenSaverIcon",
            "type": "pixmap",
            "background": "transparent",
            "zOrder": 2,
            "rect": [0, 0, 200, 100]
        }
    ]
}

GENERAL LAYOUT

{
    "id": "com.example.plugin.channels.layout",
    "items": [
        {
            "key": "channelNumber",
            "type": "text",
            "rect": [10, 10, 190, 24],
            "zOrder": 1,
            "font": { "size": 18, "weight": 600 },
            "alignment": "center"
        },
        {
            "key": "channelName",
            "type": "text",
            "rect": [10, 40, 190, 48],
            "font": { "size": 24, "weight": 600 },
            "alignment": "center"
        },
        {
            "key": "screenSaverIcon",
            "type": "pixmap",
            "zOrder": 10,
            "rect": [0, 0, 200, 100]
        }
    ]
}

[GeekyEggo]

Hey @erikjmurray, could you share the layout defined in screensaver.json - I suspect this might be the root of the issue.

[erikjmurray]

I added the JSON to the original discussion. If I do everything the same, but comment out the $SD.setFeedbackLayout(...), the screensaver logo shows as expected on the general channels layout. I don't want to have to send a larger payload overriding the channelName, channelNumber values and then resetting them when the screensaver finishes its display. Note: I have other actions using different layouts. They also display the screensaver logo correctly. Switching between layouts seems cleaner to me though.

[GeekyEggo]

I notice the path to the layout file starts with ../ which implies the layout file is outside the root of the plugin; is this correct?

For example, should it instead be this:

const layout = "assets/layouts/screensaver.json"
$SD.setFeedbackLayout(context, layout);

[erikjmurray]

I defined the function in a separate file in the utils directory and wrote it in relation to that file. However it was being called from the app.js in the root and so the filepath didn't need the ../. I tested by trying to fetch the file at the filepath and received an error. Thanks for setting me straight!

Directory Overview

- app.js
- assets > 
  - layouts >
    - screensaver.json
    - channels.json
- utils >
  - screensaver.js