《高森 (Qt)-Qt 助力工业HMI设计.pdf》由会员分享,可在线阅读,更多相关《高森 (Qt)-Qt 助力工业HMI设计.pdf(58页珍藏版)》请在三个皮匠报告上搜索。
1、Qt 助力工业HMI设计高森evan.gaoqt.io从第一天开始就不断发展和创新。发布历程1.0 19952.0 19993.0 20014.0 20055.0 20126.0 20201.55亿欧元2022财年销售收入28%2022年增长率688员工(12个国家)3500商业客户70行业150万全球开发者1995第一个公众预览版发布2016Qt公司在纳斯达克上市28年公司发展史Qt Group17 May 2023 The Qt Company4 Qt Framework defines the core,providing a complete,stable and scalable m
2、iddleware platform for your products.Individual solutions and products boosting your productivity within each step of the software development lifecycle.Integrations and seamless collaboration enable to break the classic waterfall model and move towards iterative,quickly adapting design and developm
3、ent updates.Qt Product PortfolioSCALING FROM FRAMEWORK SUPPLIER TO END-TO-END SOLUTION PARTNERDesignDevelopTest/QAManageImport pluginsQt Design StudioCollaboration ToolsQt FrameworkQt CreatorEmbedded ToolingSquishCoCoTestCenterQt Digital AdsQt InsightCloud CIAxivionQts Products in the Product Creati
4、on Flow5Seamless collaboration from Concept to Completion with integrated best-in-class technologiesProduct DefinitionArchitecture DesignUIDesignIndustrial DesignDesignDevelopAssure QualityProduce&ManageArchitecture VerificationStatic Code AnalysisFunctional TestingPerformance TestingLogicDevelopmen
5、tUIDevelopmentDeploymentContinuous IntegrationSupportProductionUpdateProduct AnalyticsQT INSIGHTQT QUALITY ASSURANCE TOOLSQT FRAMEWORK&DEV TOOLSQT DESIGN STUDIOQT DIGITAL ADSChallenge:Developing the First Prototype17 May 2023 The Qt Company6Developing a scalable graphical user interface,connectivity
6、,sensors,multimedia,and hardware adaptation capabilities from scratch can take months to complete.Rapidly developed prototypes and Minimum Viable Product software might not support porting across cross-platform without rewriting large parts of the code.17 May 20237Code once.Deploy Everywhere.Qt Quic
7、k UI software libraries with ready UI elements for anything from buttons to complete calendar views Qt Modelling Language(QML)to abstract operating system-specific capabilities in a declarative,easy-to-read UI language QML Performance Analyzer for optimizing UI performance Qt Quick 2D/3D effects inc
8、luding a wide range of capabilities from transitions,materials,light reflections,camera angle,to particle emittersQt UI FrameworkRevolutionize your development process by turning your design visions into production-ready UIs.Automatically generate functioning UI code by importing UI designs from des
9、ign tools like Figma,Adobe XD or Adobe Photoshop.Add your 3D assets from tools like Blender or 3ds Max,then animate your 3D objects,add various materials,textures and shaders and alter their values to your liking.Qt Design Studio17 May 2023817 May 2023 The Qt Company9Qt Design StudioLibraryLive prev
10、iewCanvas areaNavigatorTimeline editorsProperty editorThis is great to learn Qt Quick and an extremely powerful tool for advanced usersWhile Qt Design Studio is primarily a WYSIWYG editor,it is possible to use the Form Editor and Text Editor side-by-sideQt Design Studio includes a library of usable
11、items Basic items(e.g.Rectangle,Text,Flickable,MouseArea)Layout items(e.g.Column,Row,Grid)Advanced view to show items in grids,list or on a custom path Safe Renderer(SafeImage,SafePicture,SafeText)Basic controls(e.g.Button,CheckBox,SpinBox)Graphical primitives(e.g.Arc,Pie,Triangle,SvgPath)Graphical
12、effects(e.g.Blend,Blur,Glow,Colorize)Own custom types can be defined in Photoshop or SketchYou can import files you created using 3D graphics applications and stored in several widely-used formats,such as.blend,.dae,.fbx,.glb,.gltf,.obj,.uia,or.uipQt Design Studio-Bridge17 May 2023 The Qt Company14C
13、hallenge:Cross-Platform Development17 May 2023 The Qt Company15Low-endMid-rangeCompanion appHigh-end17 May 202316Accelerate your time to market with ready software code.Over 5 million lines of managed and maintained code in over 50 different middleware and UI component libraries Cross-platform API a
14、bstraction of all leading embedded,desktop,and mobile operating systems Hardware and graphics-acceleration abstraction for a variety of chipsets from from high-end MPUs to low-end MCUsQt Framework LibrariesMy SoftwareServiceQt跨平台能力 操作系统Qt Cross-Platform capability-OSMicrocontroller:FreeRTOS/RTEMs/RT
15、T/OneOS/BareMetalEmbedded:Embedded Linux,Windows Embedded RTOS:QNX,VxWorks,INTEGRITY(Delta-OS,Reworks,SylixOS,AcoreOS)Desktop:Windows,Linux,Mac OS X Enterprise UNIXMobile:Android,iOS,Windows 10,WinRT,Universal Windows Platform ArchitectureARM processor familyProfileScopeARMv6-MCortex-M0,Cortex-M1Mic
16、rocontrollerOut of scope,not supported by Qt.ARMv7-MCortex-M3MicrocontrollerARMv7E-MCortex-M4,Cortex-M7MicrocontrollerQt on MCU(Typically:200KB RAM+500KB ROM)STM32 L4 F4-F7 etc.ARMv8-MCortex-M33,Cortex-M35MicrocontrollerARMv7-ACortex-A5,Cortex-A7,Cortex-A8,Cortex-A9,Cortex-A12,Cortex-A15ApplicationQ
17、t With Device Creation License(Standard Qt)STM32 MP13x/MP15x etc.ARMv8-AMore.Application17 May 202318ARM架构硬件平台支持17 May 202319Ideal IDE for C+cross-platform development Features code completion,syntax highlighting,refactoring and has built-in documentation at your fingertips.Embedded debugging for di
18、fferent technologies Version control with Git,Subversion,Perforce,and Mercurial Build management with CmakeQt Creator IDEChallenge:Chipset Independence17 May 2023 The Qt Company2061%of decision makers agree that the current semiconductor shortage has negatively impacted their ability to deliver new
19、products,according to research by Forrester in 2021.Lacking the ability to switch from one chipset technology to another within weeks can cost months of throttled or even stopped production.Qt for MCUsThe advanced GUI solution for microcontrollers 17 May 202322Small screens everywhere and they run M
20、CUsMotorcyclesBicyclesE-scootersCarsHome IoTWatchesSmall appliancesLarge appliancesConstructionAutomationPrintersInstrumentsMedicalDiagnosticsTools17 May 202323Why are MCUs used in products?These are the common requirements from the underlying hardware More products include graphical UI Improvements
21、 in UI appearance and features Shorter time from design to market Moving to hardware independence Existing MPUs are replaced by MCUsTrends in MCU marketWhat is Qt for MCUsQt Quick Ultralite can be reused for your Qt for Device Creation application codeQt QuickQt APIsQt Quick UltraliteC/C+Logic backe
22、nd17 May 202327Qt Quick UltraliteKey features details Memory requirements Optimized for low memory footprint RAM:min.200 KB recommended Flash:min 500 KB recommended Display Any resolution GPU support Hardware-accelerated layers Flexible frame buffering Controls More than 20 ready-made UI controls to
23、 build fluid GUIs using QML Styles Custom styling and theming 2D Drawing 2D vector graphics and shapes(rectangle,line,arc,path,etc.)Anti-aliasing Image Various 8-bit,16-bit,24-bit,and 32-bit pixel formats PNG and RLE image compression Text Runtime or compile-time font rendering Supports any language
24、 Anti-aliasing Text wrap RTL and BiDi Effects Powerful animation framework 2.5D effects Input Integrate any input device Tools C+14 code generator for QML,image,and font assets Platform support Ports for most-popular MCUs Supports bare metal or RTOS such as Autosar or FreeRTOS Other Extensive docume
25、ntation,tutorials,and examples Smartwatch:Showcases consumer electronic use case To see the full demo clip,please visit https:/youtu.be/EIoBvWTzkTY?t=60Key MetricsSTM32L4R9iDisplayResolution390 x390Pixel Depth32-bit colorRAM UsageQt runtime117 kBFramebuffer(single buffering)365 kBTotal482 kBFlash Us
26、ageQt Application307 kB Assets1.7 MBTotal2MBFrame rateMax60Min2417 May 202329Showcases screen transition animations,multi-level settings menu,animated 2D shapes,live charts,and multi-language supportKey MetricsSTM32H750BDisplayResolution320 x272pxPixel Depth32-bit colorRAM UsageQt runtime204 kBFrame
27、buffer(double buffering)696 kBTotal900 kBFlash UsageQt Application390 kBAssets(images,fonts)3.9 MBTotal4.3 MBFrame rateMax.60Min.(some animations)5517 May 202330Multiple fontsMultiple text sizesMultiple languagesKey MetricsSTM32F769iDisplayResolution800 x480pxPixel Depth32-bit colorRAM UsageQt runti
28、me208 kBFramebuffer(double buffering)3072 kBTotal3.3 MBFlash UsageQt Application419 kBAssets(images,fonts)3.0 MBTotal3.4 MBFrame rateMax.60Min.(some animations)45Demo on STM32F769iPERSPECTIVE TRANSFORMS Welding machine for professional use STM32F769 Screen resolution 800 x 480 Winner of design award
29、Welding machine by ESAB17 May 202332“We are already using Qt Device Creation on high-end products and we wanted to create new Low cost solutions with Qt for MCUs”SmartHome17 May 2023 The Qt Company33Demo Description:SmartHome HVAC/ThermostatQt Thermostat demonstrates a responsive,functional and aest
30、hetic UITemperature,Remote Settings,Thermal Profile FunctionsUI and graphical components optimized for specific displayGraphical assets(buttons,icons,sliders,indicators)adapted to display sizeConnectivity(Wifi/BLE)to Central Hub&Mobile Companion AppMPU:STM32MP157F(Display 480 x800)SmartHome PrinterQ
31、t Printer demonstrates a responsive,functional and aesthetic UI for small displaysPrint,Copy,Scan,Ink levels,User Manual FunctionsUI and graphical components optimized for specific displayGraphical assets(buttons,icons,sliders,indicators)adapted to display sizeEasy settings adjustment and functional
32、ities divided into different screensDisplay multimedia content(User Guides,Instructions,etc)STMicroelectronics STM32F769 MCU(Display 472x800)17 May 202334HMI designer-developer WorkflowDesign teamSW teamGraphic designWireframeCodingDeployment.Graphic assetUX specGUI specVisual resultDeployment.Cover
33、 with QDSDevelopmentITERATIONWireframe screensDESIGN SCREENs for wireframe Lorem ipsum dolor sit amet,consectetueradipiscing elit,sed diam nonummy nibh euismod tincidunt utlaoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis
34、 nisl ut aliquipex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in.MAKING CONNECTIONS BETWEEN EACH SCREEN IN FLOW EDITORSetting screen transition with wireframe screensYOUR EXPORTED WIREFRAME SCREENS ARE SAVED AS METADATA FILEExporting QML file17 May 2023 The Qt Company39IMPORT
35、QML FILE TO PHOTOSHOP VIA QTBRIDGEImport QML file to Photoshop17 May 2023 The Qt Company40Completely imported screenEVERY ITEM IN QML FILE WILL BE DIVIDED INTO LAYER UNIT17 May 2023 The Qt Company41LAYERS CONTAIN INFORMATION FROM QT DESIGN STUDIOWireframe layer with QML info17 May 2023 The Qt Compan
36、y42USING QML ID,EVERY WIREFRAME LAYERS WILL BE REPLACED WITH DESIGN ASSETSCreate design assets17 May 2023 The Qt Company43VIA QTBRIDGE,PSD FILE WILL BE EXPORTED AS METADATA FILEExporting designed wireframe17 May 2023 The Qt Company44EVERY DESIGN ASSETS ARE REPLACED AND SETTLE ON ITS POSITIONDesigned
37、 wireframe17 May 2023 The Qt Company45BASED ON WIREFRAME LOGIC,SET THE CONNECTIONS VIA FLOW EDITORSetting screen transition with designed wireframe screensChallenge:Quality Assurance in Embedded World GUI Testing Automation Time Management in Quality Assurance Test Coverage Analysis Technology Debt
38、in Software Secure Software Programming17 May 2023 The Qt Company46Qt Quality Assurance Portfolio17 May 2023 The Qt Company48Automated GUI testing that works Object-aware automated GUI testing interoperable with Qt software development platform Supports Qt,Java,Windows,macOS,iOS,Android and Web Scri
39、pt-based or BDD-based+record/replaySquish17 May 2023 The Qt Company49Find untested or dead code Code coverage analysis measures the percentage of code that is checked by automated tests helping product leaders to understand product risk and minimize bugs late in the product creation process.Supporte
40、d languages:C/C+,C#&QMLCode Coverage AnalysisClick icon to add picture(Download more pictures from brand.qt.io)17 May 2023 The Qt Company50Click icon to add picture(Download more pictures from brand.qt.io)Your test results,managed.Centralized storage and analysis platform for automated and manual te
41、sting.Connect results to the product creation lifecycle,requirements management tools and issue tracking systems.Customizable views for company leadership,Project Managers,QA Engineers and Developers.Test Center17 May 2023 The Qt Company51Fighting Software Erosion&Enabling Coding Standards Complianc
42、e Clone Detection detects both duplicates and similar pieces of code in the code.Cycle Detection recognizes cyclical dependencies on different levels posing risk of endless recursion.Dead Code Analysis detects code that does not get executed.Coding Guidelines Verification ensures quality code meetin
43、g standards like MISRA AUTOSAR C+14,and CERT.Static Code Analysis Tools17 May 2023 The Qt Company52Click icon to add picture(Download more pictures from brand.qt.io)Build safe and sustainable software from day one.Ensures that developers create a future-proof architecture in every software iteration
44、.Supports the maintenance of an clear and clean software architecture.Enables that the software architecture meets secure programming standards.Architecture Analysis ToolsValidation and unit tests17 May 202353 What is it?A collection of 80 manual tests and 100 unit tests.Benefits Simplifies the vali
45、dation of custom platform ports Reference on how to use QTest with Qt for MCUs for unit testing on desktop What should I know?All tests available under/tests Manual tests can be run on desktop and target Auto(unit)tests can only be run on desktop Same tests used by Qts QA team What next?Performance
46、benchmark mode in demos Learn more https:/doc-snapshots.qt.io/qtformcus-2.4/platform-porting-guide-testing-new-platform.htmlQt for MCUs 2.4Challenge:Understanding end user behaviourYour Developers and Designers are usually not your end users.How Do You Learn to Understand Your Customers Daily Behavi
47、our?Are you relying on end user surveys and key user interviews to design your products and plan your roadmap17 May 202354Understand how end users are using your devices and applications:Build better user experiences by understanding daily user behaviour Identify power users and inactive users Lower
48、 maintenance costs by removing unused features Identify the drivers of engagement and long-term retentionQt Insight17 May 202355Enjoy:New revenue streams and/or business models with a single software development platformUse:Ready advertising plug-ins for design and development phase Self-service pla
49、tform for campaign management and reporting Works with embedded devices,desktops,tablets and smartphones Qt Digital AdvertisingQt DigitalAdvertisingPlugin Qt Digital AdvertisingSSP PlatformCustomers17 May 20235717 May 202358Thank you!高 森/evan.gaoqt.ioHow can we help you?微信公众号:Qt软件WeChat ID:TheQtCompany演讲材料获取二维码Qt BD工程师Evan Gao