Dynamically chaning button image. How can I make that happen?

[roveer24]

I was led to believe (chatgpt) if I assign a button image to a file (jpg) that if I changed the image in that file it would automatically change on the stream deck. This does not work. Am I doing something wrong or has chatgpt given me bad info? If it has, is there an easy way to make a dynamic button image work?

[DhSufi]

To the best of my knowledge, that is how it works. The image of the button (action) will be updated in the next willAppear of the action.
If you want, you can create a custom function to listen for that file changes (for example listen for modification time of the file), Next you can send a settings message from that function to that action and handle it onDidReceiveSettings event of that action. Then you can update the image by calling the setImage.

[tiptronic]

Stream Deck caches the image until you tell it to draw a new image like so:

const foundAction = streamDeck.actions.find(action => action.id == "<myActionId>");

foundAction.setImage(<myimage>);

If you change the file in the meantime, you have to trigger the update in your code...

see here:

https://docs.elgato.com/streamdeck/sdk/guides/keys/#setimage

Usually you do that from inside an key-event:

override async onKeyDown(ev: KeyDownEvent<ActionSettings>): Promise<void> {
        ev.action.setImage('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72"><rect x="0" y="0" width="72" height="72" fill="red"/></svg>');
}