cancel
Showing results for 
Search instead for 
Did you mean: 
Reply

Post your cool buttons and controls

Post your cool buttons and controls

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.

Capture.PNG

 

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



CLA // LabVIEW 2016 // BALUG // Unofficial Forum Rules and Guidelines
Message 1 of 16
(1,466 Views)
Highlighted

Re: Post your cool buttons and controls

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.

5929e284e4eb2_VectorBooleanControlCreator.png.58b2a7cadc629362f0372de961e199f9.png

 

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


Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
Interesting in learning all you can about automotive CAN bus communication? Checkout my 11 part CAN Blog series.

Message 2 of 16
(1,194 Views)

Re: Post your cool buttons and controls

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.



CLA // LabVIEW 2016 // BALUG // Unofficial Forum Rules and Guidelines
0 Kudos
Message 3 of 16
(1,163 Views)

Re: Post your cool buttons and controls


@gregoryj 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.


Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
Interesting in learning all you can about automotive CAN bus communication? Checkout my 11 part CAN Blog series.

0 Kudos
Message 4 of 16
(1,156 Views)

Re: Post your cool buttons and controls

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.



CLA // LabVIEW 2016 // BALUG // Unofficial Forum Rules and Guidelines
0 Kudos
Message 5 of 16
(1,151 Views)

Re: Post your cool buttons and controls

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.


Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
Interesting in learning all you can about automotive CAN bus communication? Checkout my 11 part CAN Blog series.

0 Kudos
Message 6 of 16
(1,145 Views)

Re: Post your cool buttons and controls


@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.



CLA // LabVIEW 2016 // BALUG // Unofficial Forum Rules and Guidelines
0 Kudos
Message 7 of 16
(1,127 Views)

Re: Post your cool buttons and controls


@gregoryj 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.


Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
Interesting in learning all you can about automotive CAN bus communication? Checkout my 11 part CAN Blog series.

Message 8 of 16
(1,121 Views)

Re: Post your cool buttons and controls

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?



CLA // LabVIEW 2016 // BALUG // Unofficial Forum Rules and Guidelines
0 Kudos
Message 9 of 16
(1,105 Views)

Re: Post your cool buttons and controls

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.


Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
Interesting in learning all you can about automotive CAN bus communication? Checkout my 11 part CAN Blog series.

0 Kudos
Message 10 of 16
(1,102 Views)