Jump to content
nathan-murphy

Developer tools don't have to be ugly!

Recommended Posts

In any validation setting, the tolerances around measured and reported values is critical, and so is tracking the tolerances for any given parameter being measured, with any measurement device or sensor. To automate the calculation of these ranges and limits within our overall application, we must track the specifications of any of these parameters. This used to be done using a peer reviewed excel table, and was loaded into LabVIEW using the Report Generation Toolkit. This had several drawbacks, but that's not the point of this post. The point is that using Excel means that any text becomes free text and if data isn't entered correctly then it can cause issues with parsing. So I created something I call the Specification Manager. It's a small utility that is intended to only be used by validation test case developers to add new specifications to the database of available specifications that can be tested, or to add new hardware for use in the validation tool. I built this tool in about 2-3 days as a way of trying out the JKI Flat UI 2.0 and the Design Palette.

 

Here's the home screen of the tool:

image.png.ed23e35807da1bbf2e6f9796e90bae51.png

Some things that I think make this a nice UI:

  • Dark background (76, 76, 76) and a nice pop of vibrant color, the icon for the tool uses the same two colors to provide consistency
  • All native windows elements are hidden as this tool is very small and simple, there's no need for a toolbar, etc.
  • Our company uses Century Gothic as a common font in many places, so I used that for some of my UI elements (title bar, specifically)
  • System Chiselled Line separating workflow components of the tool. That horizontal line doesn't look like much, but it's a visual separation of the two things you're supposed to do with this tool. 1) select a file path, 2) manipulate the individual .spec files
  • Listbox to store data - I hate working with listboxes, but I think they are the best UI element for storing continuous data. They look way better than any array I've seen when the data is simple.

To add a new specification to the library, you press 'add' and get a dialog window that's a sort of wizard:

image.png.16a43e3684356836ce8dec0548b2b480.png

I used the JKI built-in buttons here to give some sort of icon to the various specifications that can be created. I also changed the color scheme of this wizard to 'light' to signal to the user that this is a dialog/configuration type window and not really part of the core functionality of the utility. If this were a project for a wider audience, I would have customized them a bit more, but as-is, I think it's okay. The symbols are kind of meaningless as the library isn't as vast as I'd like it to be. After selecting the type of specification, you enter the name of it:

image.png.442eb20880571a998cf7c1f9ede617aa.png

This screen continues to use consistent fonts, and buttons from the previous screen. Pressing 'Continue' gets you to the heart of what this application is intended to do, modify specifications. 

image.png.23c9425701b8322081387e45cdd808ca.png

(*I typed in random data, please don't double check these against the actual specifications of the 6218 - I will not be using this data in production) I used an array of customized clusters containing the JKI Flat UI 2.0 numerics and enums, then used some more of their pre-built buttons at the bottom for continued navigation. I used the same pop of color on the cancel button, mostly for fun, but also as a way of drawing immediate contrast between the other two operations that the buttons provide.

 

That's about it!

This is an internal-only tool, but I think that editing specifications using this small purpose-built utility will be easier than us using Excel to do the same thing. 

 

Overall impressions of the Flat UI 2.0 library:

Pros:

  • good selection of commonly used buttons and controls, consistent theme across numerics, strings, enums, file paths, and buttons - makes a consistent UI easy to build
  • Color customization of buttons is easy, including customization of the hover-state (which I did to the 'X' button on the home screen of the utility)

Wishlist:

  • As with any library of icons and UI elements - a wider selection. I had a hard time finding icons for my 'Add Specification' wizard screen and had to reach pretty far
  • Design palette only launches when using the left ctrl+shift buttons, it'd be nice for it to work with either left or right

Cons:

  • Working with the String controls and indicators was a little strange. There are actually two resizable elements in a single control, one for the frame/background and one for the actual text field. I had to be careful when resizing the control to make sure that both fields were resized correctly. Also the front panel snapping meant that the border around the text area was easy to lose if the text field itself was resized incorrectly. 

I will probably continue to use the UI library for the internal only developer tools, but for the main applications that I'm working on there is still heavy customization specific to my company that I will continue to have to do. 

Thanks for reading - feel free to ask any questions about the design choices or other elements of the UI for this tool.

  • Like 1

Share this post


Link to post
Share on other sites
9 hours ago, nathan-murphy said:

Wishlist:

  • Design palette only launches when using the left ctrl+shift buttons, it'd be nice for it to work with either left or right

Another update for you: we just released Design Palette 1.0.2, which should support hotkeys (Ctrl-Shift-Space) on the right side of keyboard.

Share this post


Link to post
Share on other sites
1 hour ago, nathan-murphy said:

You're really making me think harder now about my cons and wishlists!

Thanks to you and the team for the continued refinement of the tool!

Yes, we're trying hard to whittle down the list reasons why it's hard to create amazing UIs in LabVIEW 🙂

Along those lines, you may want to update your File Path controls with this new one that has a Folder icon (we just posted it).

 

Share this post


Link to post
Share on other sites

Join the conversation

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

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

Loading...

×
×
  • Create New...

Important Information

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