Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI...
Transcript of Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI...
![Page 1: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/1.jpg)
![Page 2: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/2.jpg)
Professional UIs in LabVIEW09/26/2019
Copyright JKI 2019
![Page 3: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/3.jpg)
Copyright JKI 2019
Why Professional UIs in LabVIEW?New free tools from JKI.
![Page 4: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/4.jpg)
Copyright JKI 2019
Who cares about making UIs look good?When should you care?
![Page 5: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/5.jpg)
Copyright JKI 2019
How do LabVIEW UIs come to be?
![Page 6: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/6.jpg)
Copyright JKI 2019
Most LabVIEW UIswere created by an engineer
with LabVIEWwhile building a hardware system
over time.
![Page 7: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/7.jpg)
Copyright JKI 2019
These (hardware) systems are amazing
It may add lots of valuefor them to look great, too
![Page 8: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/8.jpg)
Copyright JKI 2019
When does it add business value?(to have a professional UI)
When does usability drive value?When does perception drive value?
![Page 9: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/9.jpg)
Copyright JKI 2019
Usability
Who will use the software?How does getting work done
correctly and efficientlydrive business value?
![Page 10: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/10.jpg)
Copyright JKI 2019
Who will USE the software?
Test Operators, Systems Engineers, Service Technicians, End Customers
![Page 11: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/11.jpg)
Copyright JKI 2019
Perception
Who will see the software?How does their perception of the
software drive business value?
![Page 12: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/12.jpg)
Copyright JKI 2019
Who will SEE the software?
Users, Team, Stakeholders, Investors, Customers, Partners.
![Page 13: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/13.jpg)
Copyright JKI 2019
Since usability and perceptiondrive business value
User Interface and User Experiencedesign can make a huge difference.
![Page 14: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/14.jpg)
Copyright JKI 2019
New free tools from JKI...
![Page 15: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/15.jpg)
Copyright JKI 2019
At JKI we take design seriously.
We’ve done a lot of work learning how to create great-looking UIs in LabVIEW.
We want all LabVIEW developers to be able to create great looking UIs, too.
![Page 16: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/16.jpg)
Copyright JKI 2019
Who has used the JKI Flat UI Controls?
![Page 17: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/17.jpg)
Copyright JKI 2019
We’ve been working on 2.0
And, we decided to do it differently
![Page 18: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/18.jpg)
![Page 19: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/19.jpg)
JKI Flat UI Controls 2.0 for LabVIEW
![Page 20: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/20.jpg)
Copyright JKI 2019
“Material Design” Style
![Page 21: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/21.jpg)
Copyright JKI 2019
The Flat UI 2.0 theme has been designed using the Material Design style from Google for a more consistent experience
New “Material Design” style
![Page 22: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/22.jpg)
Copyright JKI 2019
• Buttons (Boolean)
• Strings + Numerics
• Arrays + Clusters
• Path, IO, DAQmx, VISA
• Graphs and Charts
What’s Included
![Page 23: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/23.jpg)
Copyright JKI 2019
• Over 200 Custom Controls that use a new “Material Design” style, in order to give LabVIEW UIs a much more contemporary look and feel.
• Major Improvements to Buttons so they are recolorable, resizeable, and have hover effects
• Integration with the JKI Design Palette for a completely redesigned user experience, allowing easy search and use of the Flat UI Controls in your projects.
What’s New in 2.0
![Page 24: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/24.jpg)
JKI Design Palette
![Page 25: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/25.jpg)
Copyright JKI 2019
We’ll talk more about Design Palette,but let’s look at the Flat UI Controls 2.0
![Page 26: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/26.jpg)
Copyright JKI 2019
Buttons
![Page 27: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/27.jpg)
Copyright JKI 2019
Buttons
![Page 28: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/28.jpg)
Copyright JKI 2019
These appear as an icon, only, and then have a round background when hovering.
40x40 Icon Only with Transparent Background
![Page 29: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/29.jpg)
Copyright JKI 2019
These look like what you might think of as a “traditional” buttons” (since they have a background, even when not hovering).
40x40 Icon Only
![Page 30: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/30.jpg)
Copyright JKI 2019
These also look like “traditional” buttons” and are commonly used where space is plentiful and text descriptions of the button’s functionality are helpful to users (e.g. a Test Station where there can be no ambiguity about the functionality of a button).
120x40 Icon and Text
![Page 31: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/31.jpg)
Copyright JKI 2019
It looks just like the 120x40 Icon and Text buttons, but does not have an icon -- only text, which you can change to be anything you like.
120x40 Text Only Button
![Page 32: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/32.jpg)
Copyright JKI 2019
Strings and Numerics
![Page 33: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/33.jpg)
Copyright JKI 2019
Path, VISA, Combo Box
![Page 34: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/34.jpg)
Copyright JKI 2019
Graphs and Charts
![Page 35: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/35.jpg)
Copyright JKI 2019
And More...
![Page 36: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/36.jpg)
Copyright JKI 2019
Now, let’s explore the Flat UI Controls using the JKI Design Palette.
![Page 37: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/37.jpg)
Copyright JKI 2019
Demo
![Page 38: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/38.jpg)
Copyright JKI 2019
JKI Flat UI Controls & Design Palette
Helps you build professional UIsEasy to search for controls
Add your own controls themesGet great tips on UI development
More to come...
![Page 39: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/39.jpg)
Copyright JKI 2019
Professional UIs in LabVIEW matter
JKI Flat UI Controls andJKI Design Palette are a big step forward
Jim wants to help you get you get there
![Page 40: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/40.jpg)
Copyright JKI 2019
Visit blog.jki.netfor all the latest news
![Page 41: Professional UIs in LabVIEW · 2019-10-01 · JKI Flat UI Controls 2.0 for LabVIEW. Copyright JKI 2019 “Material Design” Style. Copyright JKI 2019 The Flat UI 2.0 theme has been](https://reader030.fdocuments.in/reader030/viewer/2022040910/5e83187c4e5d76048a462389/html5/thumbnails/41.jpg)
Thanks!
Please...
• visit jki.net/tools and download Flat UI Controls 2.0
• try out these new tools
• get new tips for UI development in LabVIEW
• email me at [email protected] JKI 2019