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 comment
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 comment
  • 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 comment
  • 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 comment

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 comment
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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment

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.

  • Create New...

Important Information

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