Post your cool buttons and controls

[Gregory]

I've always found it fun to make nice looking UIs in LabVIEW, but it often gets left until we have some "free time". I was inspired by drjdpowell's and JKI's flat controls to make my buttons look a little nicer. I was also looking through Google's material icons (a great resource of icons that can be used freely) and reading through their design philosophy.

I liked the monochrome look of the JKI buttons, which seem great for touch UIs, but they are a little bulky for desktop apps, and they don't do anything when you hover over them. So I made some buttons to address these:

You can see a couple of the different states in this picture. The 1st is depressed, 2nd is unpressed, and 3rd is hovered unpressed.

Picture only is 44px x 44px designed for a 36px icon.

Pic + Text is 36px high design for a 24px icon.

Please share some of the elements that make your UIs cool!

[Hooovahh]

I posted a tool on LAVA for making vector based buttons.  This makes for buttons that can be resized and have their decal resize properly too.

https://lavag.org/topic/20145-vector-boolean-creator/

It also works with searching, and creates buttons in various styles.  The decals are from an a library if included SVGs, and more can be added.  Most of the includes ones come from FlatIcon.  Here is a video.

https://www.screencast.com/t/RYcs1nTBU

[Gregory]

That's awesome! It is way too tedious to import the decals right now... I was trying to figure out a way to edit the "picture item" programatically (the ones you can modify to control how the button looks when unpressed and depressed, etc.) but I haven't figured it out yet.

[Hooovahh]

---

@Gregory wrote:

I was trying to figure out a way to edit the "picture item" programatically (the ones you can modify to control how the button looks when unpressed and depressed, etc.) but I haven't figured it out yet.

---

Well you can look at the source which is open and it shows one way it can be done.  This method uses a call to the LabVIEW internal function to load resource files, then modifies the WEMF section which corresponds to the EMF decal button, then saves that back with another internal call.  I'm guessing the other button states can be modified by editing other blocks of data. 

There also used to be a cool tool that you would upload a control to a website, and it would be edited and sent back to you.  It was a premium service and could only do so many controls for free.  I saw this in action and it was fascinating.  It would look for newly uploaded controls, then invoke the keyboard and mouse to programatically do the work you would normally do to edit the control replacing the images, then send the newly edited control back.  I remember seeing this in action on the NI Week expo floor and I told it's creator, "I don't know if I respect you more, or less having now known how the tool works."  I can't seem to find the tool or its creator at the moment.

[Gregory]

Is that the Studio Bods program? I downloaded that one but I didn't like having to wait for the file to be sent back to me.

[Hooovahh]

That's the one.  I suspect part of the reason why this code couldn't be just shared was due to the tight coupling between the OS and its settings, and what keyboard and mouse actions did what.

[Gregory]

---

@Hooovahh wrote:

I posted a tool on LAVA for making vector based buttons.  This makes for buttons that can be resized and have their decal resize properly too.

---

Have you tested this on Windows 10? When I open the "Initialize Explorer.vi" it has some broken refnums and I'm afraid it might be due to the OS.

[Hooovahh]

---

@Gregory wrote:

---

@Hooovahh

---

Have you tested this on Windows 10? 

---

I have not and if you are having issues I suspect you are right.  I tried making a pure G version but gave up after performance was terrible, wish I had time to look into making it more native.

[Gregory]

I've noticed the the "classic" flat buttons can actually be colored using the paintbrush in LabVIEW on different picture items. But, this is only a 4-state button. When I use a system button, which has 6-states, I can't color with the paintbrush. I have to "import from file" (or use those file editing methods) to import 6 different pictures made in powerpoint or inkscape. Has anyone found a way to color these in LabVIEW?

[Hooovahh]

System things have lots of restrictions.  Having the 6 states is likely a feature of the OS, and as a result likely can't have certain things changed.