I recently completed a major redesign of my home theater controller in order to simplify maintenance and streamline upgrades. I use a lot of buttons in my design, especially as shortcuts to Roku apps, and each button requires both a default (unselected) and a data-triggered (selected) image. When I add or delete Roku apps, or if I simply rearrange their order to reflect my changing interests, I do a lot of mouse-clicking within Designer to update button images. One of my goals with the controller redesign was to centralize button image management with a plugin. I wanted to be able to rearrange or update button images in a text editor or IDE, outside the Designer. I initially tried using a Gridview to select Roku apps, since a Gridview can accept an object array from a plugin. However, I need to support repeated button presses and a Gridview button doesn’t reset itself after a press – only if a selection changes. I decided on a hybrid approach: I kept the original button Grid, but overlaid this Grid on top of a Gridview. I have deleted all images from each Grid button, making the button Grid transparent on top and eliminating the data trigger for each selected button image. I only pass button images from the plugin to the Gridview below for display, and do not use the Gridview buttons for any user input. When I apply this hybrid approach to selecting my Roku apps, I actually have three “tiers” of apps that I can cycle through: Tier 0, Tier 1 and Tier 2. Each tier is a button Grid, where Tier 0 apps are most-used, Tier 1 is next-most-used and so on. I only enable a single tier to be visible at any time, and all three button Grids overlay a single Gridview. The plugin only passes an object array of images to the Gridview that is appropriate for the visible Tier. I have attached both my plugin
ButtonOverGrid.plugin (6.8 KB)
and a demo
Button Overlay Grid Demo.hrp (1.4 MB)
to better illustrate this approach.
