[CR] Flatline Controls

[drjdpowell]

View File

Flatline Controls

---

A set of custom controls, following the trend of a more flat UI design.  Heavily influenced by Google’s Material Design, though constrained by what can be done with available tools and options in LabVIEW.  Uses icons from Google Material Design.

— Buttons based on the system booleans (with hover effects).  Icons can be added as decals (such as from materialdesignicons.com) 

— Matched sets of controls for numeric/string/enum/etc., based on Silver controls, but swapping out all ‘chrome’ for simple boxes and lines.

— flattened versions of switches/sliders/arrays/graphs etc.

Now on the LabVIEW Tools Network

JDP Science Tools group on NI.com.

---

• Submitter
  drjdpowell
• Submitted
  06/13/2016
• Category
  User Interface
• LabVIEW Version
  2011
• License Type
  BSD (Most common)

 

[drjdpowell]

Here is a demo button based on Silver buttons (instead of system buttons).  No hover effects, but one can colour ON and OFF state differently, which you can't with system buttons.

Flatline Non-hover button.vi  

[Neko]

These are marvelous. Thanks so much. 

[smithd]

Yeah, they're very nice controls. Using them for current project, and they really de-labview the user interface

[Neko]

Is there any way to change the ON color of a Dark-colour Button?

[drjdpowell]

6 hours ago, Neko said:

Is there any way to change the ON color of a Dark-colour Button?

Do you know how to Customise controls?    

To get mouse-hover effects, I based these buttons on the System controls, which do not support different colours for ON/OFF states.  So I instead made the ON state a 4x4 pixel PNG (like the hover states).  If you install Bitman from the LAVA-CR, you can use the utility I used to make these PNGs: 

<LabVIEW>\vi.lib\drjdpowell\Flatline Controls\Utilities\Make small transparent square in PNG.vi

Set your desired colour and Alpha transparency (I use a slightly higher Alpha for the Hover states.  

You can see the "pallet" of colours I used in:  <LabVIEW>\vi.lib\drjdpowell\Flatline Controls\Button Pallet.vi

To actually use your new transparencies, I'm afraid you have to manually customise the control and swap in the new PNG for the old in the ON state.  If you Google you can probably fine a tutorial.  Once you learn it it's not that hard.

[drjdpowell]

13 hours ago, smithd said:

Using them for current project, and they really de-labview the user interface

I find the biggest improvement with Flat design is in the simplest of front panels.  Here's a dialog box:

Here I just used link-style buttons (the square around "Save as.." is placed by LabVIEW as it is bound to the Enter key).  I eliminated the window tittle normally on the window frame, and instead placed that text in bold.  This makes a very clear, uncluttered dialog box.

[drjdpowell]

The latest version contains an example, "Changing Icon on Flatline Button.vi” which contains instructions on how to substitute your own icons into the provided icon buttons (which all start with a “save” icon).  I did this, rather than provide a suite of ready-made buttons, because there are just too many types and styles of icons.  

 

[hooovahh]

Awesome job.  I installed these a while ago when you first posted them and had forgotten about them.  I then needed a checkbox and knew the only options were ugly old ones that scale, or system ones that look nice but are small and my UI is made to be a bit bigger.  I did a QuickDrop and to my surprise found several awesome looking modern ones that I could change the size of.  I've since installed the newer ones from the tools network and am even more delighted with the updates.  Thanks again.

[drjdpowell]

Thanks.  There is actually a couple more checkboxes that I've considered adding, but I have an excessive number of check boxes already.  

Possible Checkboxes.vi

Edited February 14, 2017 by drjdpowell

[hooovahh]

I only have but one 'like' to give.  I don't see myself ever using the pink-ish one but all the others I could see uses for depending on the UI design.  The larger check box with a hover is something I could use now.  The existing Rounded Square, or Google style are also very refreshing.

[drjdpowell]

20 hours ago, hooovahh said:

I don't see myself ever using the pink-ish one but all the others I could see uses for depending on the UI design.  

You can colour it whatever you want.   I just copy-pasted the green one a couple of times and changed the colour**.  I just wanted to make sure people knew that, as most custom control sets available on the Tools Network are based on PNGs, which cannot be recoloured (and don’t resize well either).  I’m trying for resizability and recolourability.  I include the “Google style” checkbox, because it is nice and fits well with other Google Icons, but it is not resizable or recolourable, unless you manually swap out the icons with new ones from materialdesignicons.com.

**Note: it’s slightly tricky to change the colour, as the checkmark’s invisible containing box blocks the colour tool from affecting the box underneath, unless you click near the edges.  Unfortunately, the checkmark isn’t recolourable (it’s a vector graphic imported from LibreOffice).

[hooovahh]

I'm sure you don't need more help finding flat icons, but I came across this site that has a decent amount of free and paid icon packs, with licenses that are relaxed enough to use in commercial applications.  The site is a bit limiting in the amount you can download per day as a free user.  I just saved a couple as SVG, then used an online site to convert to WMF but it seems Inkscape can do it through the command line too.  WMF is the only vector image type that LabVIEW supports and with it you can make buttons with icons that scale with your button, and don't look like stretched when they get too small or too large.

[hooovahh]

FYI I made a separate post over here talking about my process of taking SVGs and making nice looking scaling icons using them, and I demonstrate it using your Dark and Light controls as templates.

[drjdpowell]

FYI, here is a talk I recently gave on creating some of the controls in Flatline.

Edited April 25, 2017 by drjdpowell

[drjdpowell]

The 1.7 version just added include two significant improvements:

— “Segmented Control”, which is an improved “Selection Buttons” with divider bars and better spacing to get a clean look (thanks to Christina Rodgers from NI).  Previous version had one-pixel gaps.

— Improved buttons (motivated by the techniques discover with the Segmented Control) that maintain a rounded-rectangle boarder in their hover and ON states (the previous version lost its rounded-rectangle shape in those states).  This gives a much better look on hover.   Also allows the ON state to have its colour changed (also possible with the Segmented Control).  

It can be a bit confusing learning how to colour these controls.   One has to click on the outside boarder to colour the OFF state, and inside the boarder to colour the ON state.  Coloring inside the boarder will colour the ON state even when the control is OFF, due to weirdness of the system button’s treatment of colour.

[Alexander Gieg]

These controls are awesome! Thank you very much!

I'd like to ask for a change and a new control, if possible.

First, for the Time Stamp control. When the increment/decrement buttons are visible, they appear to the left of the control, outside it. It'd be nice if they were within the control and to the right, similar to numerical ones.

Second, for the Combo Box. It'd be nice to have the selection arrow within the control, similar to the Enum and Text Ring ones, instead of in an external box.

With these two changes it'd become very easy to pleasantly align controls vertically.

Thanks!

[drjdpowell]

On 25/09/2017 at 4:25 PM, Alexander Gieg said:

First, for the Time Stamp control. When the increment/decrement buttons are visible, they appear to the left of the control, outside it. It'd be nice if they were within the control and to the right, similar to numerical ones.

Second, for the Combo Box. It'd be nice to have the selection arrow within the control, similar to the Enum and Text Ring ones, instead of in an external box.

How about these?

New Flatline mods.vi

Edited September 28, 2017 by drjdpowell

[Alexander Gieg]

22 hours ago, drjdpowell said:

How about these?

Fantastic! The Time Stamp looks exactly as I imagined it, and the Combo Box looks better! Thank you very much!

Do you plan on adding those to the official pack? Or should I use the mods from the VI directly?

[drjdpowell]

They’ll be in the next release, but you can use them directly from the VI.

[Neil Pate]

Hi James,

Thanks for your fantastic work here.

Do you have any idea how (if) I can create an enum like this? The bit I am struggling with is upside down triangle decal on the right-hand side. I cannot seem to get it in the right layer that will allow the user to click there.

I tried customising one of your flatline controls, and I can replace your small triangle with my desired one, but then as soon as I change the fill colour to anything other than transparent it covers the decal.

Any tips?

[drjdpowell]

I'd have to remind myself but I think the text has to be on top of the decal (so the User can click on the text), so you can't colour the text background, but you can colour the outline box that sits behind both.   

[Neil Pate]

On 1/13/2018 at 9:26 PM, drjdpowell said:

I'd have to remind myself but I think the text has to be on top of the decal (so the User can click on the text), so you can't colour the text background, but you can colour the outline box that sits behind both.   

Bingo! Thanks James 

[smithd]

5 hours ago, drjdpowell said:

I'd have to remind myself but I think the text has to be on top of the decal (so the User can click on the text), so you can't colour the text background, but you can colour the outline box that sits behind both.   

Oh, labview 

[ThomasGutzler]

Could you make a package that opens in VIPM 2016? For complicated reasons, I can't update to 2017