Change a button image

Overview

By default, when the Plugin Service needs to draw a button image, it uses the display name of the command that is assigned to the button.

However, the plugin can change this behavior so that an image is shown instead of the command name. To inform Plugin Service that a custom image should be used, the GetCommandImage method of the PluginDynamicCommand class must be overridden.

Moreover, if the plugin wants to change a button image at runtime when the command state changes, the plugin can call the ActionImageChanged method to inform Plugin Service that the image should be redrawn.

In the example below, we will create a simple dynamic command that changes its state when the user presses the button. When the command state changes, the command requests redrawing the button image.

You can find the ThumbUpDownCommand class here: ThumbUpDownCommand.cs

Steps

1. First, create a ThumbUpDownCommand dynamic command that toggles the internal boolean _isThumbDown variable on every button press. See Add a simple command for more information about creating dynamic commands.

   namespace Loupedeck.DemoPlugin
   {
       using System;
   
       public class ThumbUpDownCommand : PluginDynamicCommand
       {
           private Boolean _isThumbDown = false;
   
           public ThumbUpDownCommand() : base(displayName: "Thumb up/down", description: null, groupName: "Switches")
           {
           }
   
           protected override void RunCommand(String actionParameter)
           {
               this._isThumbDown = !this._isThumbDown;
           }
       }
   }
   

2. Add two images for "Thumb up" and "Thumb down" states to the plugin project. Build action for these files must be set to "Embedded Resource". The images "ThumbUp.png" and "ThumbDown.png" can be fetched from: DemoPlugin/images

   Note that the buttonimages must be in PNG format and have a size of 80x80 pixels.

3. Add two string class members that will hold the image resource paths. In the constructor, set these members to the full path of these files. Note that call to EmbeddedResources.FindFile() method eliminates the need to know the exact path to these files.

           private readonly String _imageResourcePathThumbUp;
           private readonly String _imageResourcePathThumbDown;
   
           public ThumbUpDownCommand() : base(displayName: "Thumb up/down", description: null, groupName: "Switches")
           {
               this._imageResourcePathThumbUp = EmbeddedResources.FindFile("ThumbUp.png");
               this._imageResourcePathThumbDown = EmbeddedResources.FindFile("ThumbDown.png");
           }
   

4. Override the GetCommandImage method to return the right image based on the command state:

           protected override BitmapImage GetCommandImage(String actionParameter, PluginImageSize imageSize)
           {
               var resourcePath = this._isThumbDown ? this._imageResourcePathThumbDown : this._imageResourcePathThumbUp;
               return EmbeddedResources.ReadImage(resourcePath);
           }
   

5. Call the ActionImageChanged method when the command state changes:

           protected override void RunCommand(String actionParameter)
           {
               this._isThumbDown = !this._isThumbDown;
               this.ActionImageChanged();
           }
   

   Note that calling this.ActionImageChanged(null) will redraw all the buttons currently shown on the device.

Adding background image and text to button

Here is an example.

Note: Don't use explicit fontsize parameters when drawing text. Plugin Service will define the best font size per device.

Note that MyImage.png file must be added to the plugin project as an embedded resource.

protected override BitmapImage GetCommandImage(String actionParameter, PluginImageSize imageSize)
{
    using (var bitmapBuilder = new BitmapBuilder(imageSize))
    {
        bitmapBuilder.SetBackgroundImage(EmbeddedResources.ReadImage("MyPlugin.EmbeddedResources.MyImage.png"));
        bitmapBuilder.DrawText("My text");

        return bitmapBuilder.ToImage();
    }
}