nathan-murphy Posted August 21, 2019 Report Share Posted August 21, 2019 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: 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: 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: 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. (*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. 2 1 Quote Link to comment Share on other sites More sharing options...
Jim Kring Posted August 21, 2019 Report Share Posted August 21, 2019 Wow! What a fantastic post, Nathan! And, your User Interface looks great. I wanted to let you know that we just posted a (better) resizable string that addresses the "two resizable elements" issue. Quote Link to comment Share on other sites More sharing options...
Jim Kring Posted August 22, 2019 Report Share Posted August 22, 2019 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. Quote Link to comment Share on other sites More sharing options...
nathan-murphy Posted August 22, 2019 Author Report Share Posted August 22, 2019 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! 1 Quote Link to comment Share on other sites More sharing options...
Jim Kring Posted August 22, 2019 Report Share Posted August 22, 2019 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). Quote Link to comment Share on other sites More sharing options...
Ruslan Posted April 5, 2020 Report Share Posted April 5, 2020 nathan-murphy Great design. Is it possible to put it here (what can be laid out)? Quote Link to comment Share on other sites More sharing options...
nathan-murphy Posted April 6, 2020 Author Report Share Posted April 6, 2020 Hey Ruslan, What specifically do you like about it? Anything you dislike or don't agree with? I can probably share my front panels so you can play with the colors, etc. but I don't think I can share the code due to the NDA/IP rights with my company. If you're looking for something in particular about it I can probably share a screenshot or explain how/why I did certain things. The actual code isn't really all that magical. I think it's just a JKI State Machine doing some logic to get data to and from a file. -Nate Quote Link to comment Share on other sites More sharing options...
Ruslan Posted April 7, 2020 Report Share Posted April 7, 2020 I am interested in the drop-down menu (setting, etc.). Quote Link to comment Share on other sites More sharing options...
Ruslan Posted April 7, 2020 Report Share Posted April 7, 2020 In terms of design, it looks quite harmonious 1 Quote Link to comment Share on other sites More sharing options...
nathan-murphy Posted April 7, 2020 Author Report Share Posted April 7, 2020 Hey Ruslan, Thanks - I was able to take that dialog window out of my project pretty easily. Not sure what version of LabVIEW you're using, so I saved it back for 2013 just in case. The one dialog window is effectively two clusters stacked on top of each other. First I make the selection cluster visible, then when a user selects which option they want, I hide that cluster and the Name and Apply buttons are visible beneath it. Happy to answer any questions you've got on it. -Nate Add New Specification.vi 1 Quote Link to comment Share on other sites More sharing options...
Ruslan Posted April 7, 2020 Report Share Posted April 7, 2020 Hey, Nathan-Murphy! Thanks for the quick answers) I would also add, boolean text, it’s convenient to click not on the button icon but also on the button text. Quote Link to comment Share on other sites More sharing options...
nathan-murphy Posted April 7, 2020 Author Report Share Posted April 7, 2020 No problem, and you're absolutely right about the boolean text. Quote Link to comment Share on other sites More sharing options...
Ruslan Posted April 7, 2020 Report Share Posted April 7, 2020 By the way, how to make sure that the interface does not block when the menu is called, in a separate cycle? Quote Link to comment Share on other sites More sharing options...
nathan-murphy Posted April 7, 2020 Author Report Share Posted April 7, 2020 In my case, the Main UI doesn't really do anything in the background, so I didn't have to worry about it blocking. If you have a case where you have a running VI that needs to continue to load, you can call the dialog window by reference using an Asynchronous call by reference, and check to see if the VI has finished executing in the timeout case of the Main VI (assuming the Main VI is something similar to a JKI State Machine). Quote Link to comment Share on other sites More sharing options...
Ruslan Posted April 7, 2020 Report Share Posted April 7, 2020 Nathan, thanks, everything is clear Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.