Jump to content

[CR] Flatline Controls

Recommended Posts

  • 4 months later...
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

Button Pallet.png

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.

Link to post
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:

Flatline Dialog Box.png

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.

  • Like 1
Link to post
  • 2 weeks later...

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.  

Changing Icon on Flatline Button.png 

  • Like 1
Link to post
  • 3 months later...

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.

Link to post

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.

Link to post
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).

  • Like 1
Link to post
  • 2 months later...

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.

Link to post

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.

Link to post
  • 1 month later...

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.

Segmented Control.png

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

  • Like 2
Link to post
  • 3 months later...

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.


Link to post
  • 3 months later...

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?

Coloured Enum.png

Link to post

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.   

  • Like 1
Link to post
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 :beer_mug:

Link to post
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 :frusty:

Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By drjdpowell
      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.
    • By drjdpowell
      I’ve been trying to come up with my own consistent set of custom controls that has a more modern “flat” or “near-flat” style.  Largely this was inspired by reading Google Material Design, and I’ve just added the results as a package in the CR: Flatline Controls.  The latest thing I’ve been toying with are slider switches (here the Material Design guide on switches).  But I’m having a hard time coming up with something that is flat and non-skeumorphic, but also clearly a switch.  Attached is a VI (2011) with multiple switch types.  The most 3D, old-school, looks like a real-world switch (on the left) seems best in terms of being obviously a switch.  My most Google-like switch, on the right, is flat and simple, but not immediately obvious.

      My question is: what of the multiple LabVIEW switches do people actually use? 
      Trouble with Switches.vi
    • By MarkBarnes
      Hi all,
      I'm trying to anti-alias my vector-based custom controls. I know it's possible:

      The left hand circle is my custom control, the other 3 are various circular controls taken from the Silver controls palette.
      Obviously the anti-aliasing is not a public feature and is part of NI's internal control definition. Has anyone succeeding in either exposing this hidden property as something to be turned on, or editing the raw .ctl file code to enable anti-aliasing? 
      Any ideas?
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.