Custom controls - edit disabled decoration

[Jenso]

Hey guys,

I am currently reworking our app's design and created some better looking buttons using PNGs. Now I struggle with modifying the "disabled grayed out" state. To me it looks as if LabVIEW simply puts a half-transparent PNG as decoration on top of the button as soon as it is disabled. But neither can I find nor can I edit this decoration.

Does anybody know how you can edit this? The 4 / 6 states of the custom buttons where you can import pictures are not including a disabled state. Here is what the button looks like in grayed out state. The PNG has some oversize due to the shadow it is casting.

Thanks in advance!

Jenso

[zou]

---

@Jenso wrote:

Hey guys,

I am currently reworking our app's design and created some better looking buttons using PNGs. Now I struggle with modifying the "disabled grayed out" state. To me it looks as if LabVIEW simply puts a half-transparent PNG as decoration on top of the button as soon as it is disabled. But neither can I find nor can I edit this decoration.

Because it's not a decoration layer.  And LabVIEW does NOT use png.

Avoid use png if you can, use LabVIEW decor instead.  You can find them here:

https://forums.ni.com/t5/LabVIEW/Custom-Bool-Control-with-Decorations/m-p/4409571#M1299396

What are you try to do with the "disabled grayed out" state?

[raphschru]

Hi Jenso,

When a control is "disabled and grayed out", LabVIEW simply paints a semi-transparent rectangle over the full bounding box of the control (including the shadow you've put in your image).

It is unfortunately not a customizable effect, and LabVIEW in general is quite bad for creating very polished UIs like that (at least easily).

A workaround could be:

 - When setting the property "Enabled" of your button to value "Disabled and Grayed Out", make a second button appear on top of your first button with its property "Visible".

 - The second button should resemble your first button, but with a custom "grayed out" look.

 - It should also be set to "Disabled" to prevent the user from interacting with it.

 - When setting the property "Enabled" of your first button back to "Enabled", make the second button invisible again.

Not easy as you've seen, and it will become harder the more controls you want this customization to be applied to...

Regards,

Raphaël.

[joshua.l.guthrie2.civ]

I've not dove off that rabbit hole yet.. but making the control in .net might be an option. 

[Jenso]

---

Because it's not a decoration layer.  And LabVIEW does NOT use png.

Avoid use png if you can, use LabVIEW decor instead.  You can find them here:

https://forums.ni.com/t5/LabVIEW/Custom-Bool-Control-with-Decorations/m-p/4409571#M1299396

What are you try to do with the "disabled grayed out" state?

---

Ok, that was basically my point that it is not a decoration layer, sorry for the bad wording. Also thanks for the decoration link but due to the fact that you do not seem to be able to edit those built-in decorations they seem to be quite useless for what I am trying to.

The question from my side is then: Why avoid PNGs as you write. What is the disadvantage if I do not want to set them programmatically using property nodes? Until now I did not experience problems using PNGs in buttons states and also background images can be placed easily as PNG without any problems. Did you have some bad experience here?

Using "disabled grayed out" is quite useful if you want to tell the operator that the function is currently not available. Right now I will simply make it invisible because a normal "disabled" might cause the user to think that the button is broken.

[Jenso]

---

A workaround could be:

 - When setting the property "Enabled" of your button to value "Disabled and Grayed Out", make a second button appear on top of your first button with its property "Visible".

 - The second button should resemble your first button, but with a custom "grayed out" look.

 - It should also be set to "Disabled" to prevent the user from interacting with it.

 - When setting the property "Enabled" of your first button back to "Enabled", make the second button invisible again.

---

Ok I see, I already thought about this on my own. The application our team is developing is basically a highly modular AF based test sequencer which is consisting of a lot of packed libs. Many developers will develop certain parts and the idea was to place a set of UI components inside a packed lib that is then used all over the software. Therefore the application should be as easy as possible because if it is not, they won't do this and the whole development is useless.

The packed UI component lib is basically already working the only missing thing is the greyed out problem. I was already aswell thinking about using XControls, but I feel this is a bit crazy for a simple button.

But I will also check the .net controls, but I do not have any experience with this until now. But thanks for the hint!

[zou]

Also thanks for the decoration link but due to the fact that you do not seem to be able to edit those built-in decorations they seem to be quite useless for what I am trying to.

The question from my side is then: Why avoid PNGs as you write. What is the disadvantage if I do not want to set them programmatically using property nodes? Until now I did not experience problems using PNGs in buttons states and also background images can be placed easily as PNG without any problems. Did you have some bad experience here?

---

NI decors are vectors, PNGs are not.  Other image formats, such as jpg, bmp, gif, etc. are no good either.

When resize, vector keeps its quality.  PNG does not (mono-color PNG is ok).

[altenbach]

An easy solution would be to set it only to disabled (and NOT greyed out!) and set the boolean text font color from black to grey while it is.