So, this looks like a custom widget, but these are pretty standard
SvgSwitch buttons with three frames (unlit, yellow, pink). By drawing the white keys first, I ensure the bounding box of the black ones overlaps and hijacks their visually inactive clickable zone. Please do not get distracted by the name of the module (which is not a placeholder).
What would be the least dirty way to make it so the user can toggle between the first two states, while the module could push the third visual frame to the buttons - without breaking the button’s functionality for the user?
To be clear about what I want to do: when the user presses a button, it toggles from unlit to yellow. When the module is set to visualize processing data, it can make the buttons pink, but the buttons should continue to operate normally for users. And when the user presses a key, the visualization mode is disabled for a few seconds for the sake of usability, but this part is beyond the scope of the question.
I can think of multiple ways to do it, but which would be the least worse?