topic Re: Post your cool buttons and controls in BreakPoint

Post your cool buttons and controls

Gregory — Fri, 06 Apr 2018 16:36:17 GMT

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!

Re: Post your cool buttons and controls

Hooovahh — Mon, 09 Apr 2018 12:52:03 GMT

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

Re: Post your cool buttons and controls

Gregory — Mon, 09 Apr 2018 16:01:17 GMT

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.

Re: Post your cool buttons and controls

Hooovahh — Mon, 09 Apr 2018 16:15:41 GMT

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

Re: Post your cool buttons and controls

Gregory — Mon, 09 Apr 2018 16:41:12 GMT

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.

Re: Post your cool buttons and controls

Hooovahh — Mon, 09 Apr 2018 16:52:33 GMT

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.

Re: Post your cool buttons and controls

Gregory — Mon, 09 Apr 2018 18:26:00 GMT

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

Re: Post your cool buttons and controls

Hooovahh — Mon, 09 Apr 2018 19:04:41 GMT

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

Re: Post your cool buttons and controls

Gregory — Mon, 09 Apr 2018 21:01:27 GMT

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?

Re: Post your cool buttons and controls

Hooovahh — Mon, 09 Apr 2018 21:03:28 GMT

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.

Re: Post your cool buttons and controls

drjdpowell — Mon, 09 Apr 2018 21:16:37 GMT

The system controls actually do support colour, but only one colour. If you substitute colourable shapes for multiple states then all shapes have the same colour. You can also add colourable shapes as decals. My latest Flatline buttons support on and off state colouring in these ways, with hover states being supplied by partly-transparent PNGs.

Re: Post your cool buttons and controls

drjdpowell — Tue, 10 Apr 2018 13:44:09 GMT

My “coolest” button from Flatline Controls is actually a modified Radio-Buttons control. Colorable, dividing lines, and hover state (bottom “Option 3” is hover state):

Perfected with the assistance of Christina Rodgers from NI.

Re: Post your cool buttons and controls

Hooovahh — Tue, 10 Apr 2018 13:49:08 GMT

I do love that radio button and have used it on a couple projects, so kudos are in order. I used it in place of a tab on a touch panel where the tabs would be quite small. In my code all it did was change the value of the tab, and/or insert a VI into a subpanel.

Re: Post your cool buttons and controls

Gregory — Tue, 10 Apr 2018 18:51:12 GMT

@drjdpowell wrote:

You can also add colourable shapes as decals. My latest Flatline buttons support on and off state colouring in these ways, with hover states being supplied by partly-transparent PNGs.

Hi drjdpowell,

I imported a "Flat Box" as a decal. But, I have a couple questions:

The flat box decal resizes separately from the rest of the button (see below), how do I fix this?

How does it support on and off state colouring? Do you need multiple decals?

Re: Post your cool buttons and controls

drjdpowell — Tue, 10 Apr 2018 19:41:03 GMT

@Gregory wrote:

@drjdpowell

The flat box decal resizes separately from the rest of the button (see below), how do I fix this?

enableSecretPopups=True

How does it support on and off state colouring? Do you need multiple decals?

The decal sits behind the main button. The button itself has a 100% transparent PNG in the Off state, so the colour of the decal is the colour of OFF. The On state is a colorable box, placed precisely so it covers over the decal colour when On. Hover states are semi-transparent black PNGs (about 10-30% transparent, so they darken the Off-state colour underneath).

Re: Post your cool buttons and controls

drjdpowell — Tue, 10 Apr 2018 21:03:07 GMT

Here’s a talk I gave on this stuff a while ago, though it describes an older button design:

eCLA 2017: Flatline Controls