CN105630501A - 一种基于QML+OpenGL的车载图形界面系统 - Google Patents

Abstract

本发明提供一种基于QML+OpenGL的车载图形界面系统，包括以下步骤：步骤S1，初始化进入用户界面定义状态；步骤S2，通过使用鼠标区域控件设置鼠标响应区域,切换不同的状态；步骤S3，判断状态是否满足触发条件，直到满足触发条件状态被激活；步骤S4，添加过渡元素触发动作；步骤S5，调用脚本变化执行动作。使用QML和OpenGL语言,通过定义状态和添加过渡元素来定义车载图形界面,通过属性变化修改状态元素属性，并通过使用鼠标区域控件设置鼠标响应区域，来达到元素属性都可以改变，状态同时也可以改变；通过使用属性变化对元属添加动画，并通过使用数据类型和视图列表来显示动画效果，应用动画和视觉效果来扩展过渡变化，可以帮助我们查看所有的功能都被覆盖到。

Description

一种基于QML+OpenGL的车载图形界面系统

技术领域

本发明属于嵌入式应用开发领域，涉及Qt开发、QML软件设计和OpenGLES图形技术，尤其涉及一种基于QML+OpenGL的车载图形界面系统。

背景技术

MFC是专门为windows设计的一个用于开发图形用户界面的类库。MFC或多或少使用了面向对象的方法包装了Win32的API，正因如此，这些API有时是C++，有时是C，甚至是C和C＋＋的混合体。

消息循环

MFC是事件驱动的架构。要执行任何操作，都必须是对特定的消息作出响应。Windows对应用程序发送的信息数以千计，遗憾的是，要分清楚这些分繁芜杂的消息是很困难的，并且关于这方面的文档并不能很好的解决这些问题。创建界面

MFC无法创建大小动态可变的子窗口，必须重新手动修改代码来改变窗口的位置，这个问题在软件进行国际化翻译的时候更加严重，因为许多国家表达相同意思需要更长的词汇和句子，必须要对每个语言的版本重新修改自己的软件。

国际化

使用MFC是可以国际化的，但是需要将每一个字符串放在一个字符串表中，在代码中到处使用LoadString(IDENTIFIET)。然后转化这些资源到DLL中，翻译字符串到所需要的语言，改变图形界面，然后调用程序使用这个DLL。整个过程是如此的繁琐，可谓牵一发而动全身。考虑的事情要面面俱到。

Resources问题

使用MFC，一部分开发过程要依靠“resources”,在很多的案例中开发者必须使用他们。这样会导致如下的后果：除了VisualStudio，你很难使用其他的工具来完成开发。资源编辑器仅有有限的功能，比如：通过Dialog编辑器不可能改变所有的属性，一些属性可以改变，另一些属性则不可能改变。

发明内容

发明所要解决的技术问题是提供一种基于QML+OpenGL的车载图形界面系统,可以应用动画和视觉效果来扩展过渡变化帮助我们查看所有的功能全都被覆盖到了。

对此，本发明提供基于QML+OpenGL的车载图形界面系统，包括以下步骤；

步骤S1，初始化进入用户界面定义状态；

步骤S2，通过使用鼠标区域控件设置鼠标响应区域，切换不同的状态；

步骤S3，判断状态是否满足触发条件，直到满足触发条件状态被激活；

步骤S4，添加过渡元素触发动作；

步骤S5，调用脚本变化执行动作。

本发明的进一步技术方案是：所述步骤S3的触发条件为根据用户需求进行自定义设置的触发指令，当接收到对应的指令时状态被激活。

本发明的进一步技术方案是：所述的触发条件为鼠标触发、按键触发或者状态触发其中一种。

本发明的进一步技术方案是：所述步骤S4还包括步骤S401，所述步骤S401中设置起始属性和目标属性，将起始属性和目标属性分别绑定到特定的状态名称上，当所述过渡元素的过渡被设为可逆过渡时，可逆过渡条件为真则自动切换到上一个状态。

本发明的进一步技术方案是：所述步骤S4还包括步骤S402，所述步骤S402中定义动画可以以并行、串行或暂停执行。

本发明的进一步技术方案是：所述步骤S4还包括步骤S403，所述步骤S403通过使用属性变化对元素添加动画。

本发明的进一步技术方案是：所述步骤S403通过使用基本属性动画、过渡和属性行为的其中一种实现添加动画。

本发明的进一步技术方案是：所述使用基本属性动画包括插入预定义的缓冲动画曲线。

本发明的进一步技术方案是：所述步骤S1还包括以下子步骤：

步骤S101，通过列表获取数据模型；

步骤S102，通过代理进行数据绑定；

步骤S103，通过视图显示数据。

本发明的进一步技术方案是：所述步骤S1通过属性变化修改状态元素。

与现有技术相比，本发明的有益效果在于：使用QML和OpenGL语言，通过定义状态和添加过渡元素来定义车载图形界面，通过属性变化修改状态元素属性，并通过使用鼠标区域控件设置鼠标响应区域，来达到元素属性都可以改变，状态同时也可以改变；通过使用属性变化对元属添加动画，并通过使用数据类型和视图列表来显示动画效果，应用动画和视觉效果来扩展过渡变化，可以帮助我们查看所有的功能都被覆盖到。

附图说明

图1是本发明一种实施例的工作流程图；

图2是图1添加过渡元素触发动作的细化流程图。

具体实施方式

下面结合附图，对本发明的较优的实施例作进一步的详细说明。

实施例1：

如图1所示，本发明提供一种基于QML+OpenGL的车载图形界面系统，包括以下步骤；

步骤S1，初始化进入用户界面定义状态；

步骤S2，通过使用鼠标区域控件设置鼠标响应区域，切换不同的状态；

步骤S3，判断状态是否满足触发条件，直到满足触发条件状态被激活；

步骤S4，添加过渡元素触发动作；

步骤S5，调用脚本变化执行动作。

如步骤S1所述，初始化进入用户界面定义状态；状态对应的英文名称为States，状态用于管理有id的元素它是由多个状态元素构成的，通过属性变化修改状态元素属性，指定修改的目标元素的id给目标属性，定义要修改的目标元素的属性值，当元素进入到某个状态，状态对应的属性将被设置，我们可以修改anchors对齐方式；修改item的parent；执行一段javascript代码；PropertyChanges对应的英文名称为属性变化。

如步骤S2所述，通过使用鼠标区域控件设置鼠标响应区域，切换不同的状态；鼠标区域对应的英文名称为MouseArea；例如我们需要定义两个状态“on”、“off”，使用PropertyChanges为每个状态设置目标和其对应的属性值；使用MouseArea的事件响应来完成不同状态间的切换响应用户界面的单击事件，让SwitchButton在状态“on”和“off”之间直接切换。

如步骤S3所述，判断状态是否满足触发条件，当满足触发条件状态被激活；所述触发条件为根据用户需求进行自定义设置的触发指令，当接收到对应的指令时状态被激活。所述的触发条件为鼠标触发、按键触发或者状态触发其中一种。比如U盘是否插入，当接收到鼠标触发或者按键触发或者状态触发对应的指令时状态被激活。还可以使用when属性表达式来触发状态改变，表达式内容为元素对应的状态，当表达式条件为真，stateslist中只能有一个状态是被激活的，当表达式条件为假，状态没有被激活。

如步骤S4所述，通过添加过渡元素触发动作；过渡元素对应的英文名称为Transition；过渡用于为状态之间的切换提供动画支持，过渡只能被状态切换激活。

如步骤S5所述，调用脚本变化执行动作。脚本变化对应的英文名称为StateChangeScript。

步骤S11，通过列表获取数据模型。

如步骤S11所述，在初始化进入用户界面定义和切换状态，我们可以通过列表获取数据模型，所述的数据模型提供数据；数据模型对应的英文名称为Model。QML使用了与Qt中Model-View类似的结构，模型类型提供了数据，模型可以使QML的简单数据，或者复杂的C++数据QML：ListModel、XmlListModel、VisualItemModel；C++:QAbstractItemModel、QStringList、QList<QObject*>。

步骤S12，通过代理进行数据绑定。

如步骤S12所述，获取数据模型的数据后，我们需要代理来绑定数据，代理对应的英文名称为Delegate；Delegate一个描述model中每条数据的显示方式的控件。代理用来定制视图中的数据显示方式，当用户编辑时代理直接与数据模型交互。

步骤S13，通过视图显示数据。

如步骤S13所述，通过代理对数据绑定，我们需要视图来显示数据。视图对应的英文名称为View；视图显示模型提供的数据：ListView、GridView、PathView、Repeater支持自动滚动，代理为视图创建模型中数据的实例，Highlight控件用来高亮视图里面的选中Item。Model为其他部件提供数据的接口QAbstractItemModel，视图获取数据的引用对数据的引用。

QML是Qt推出的QtQuick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面：无论是什么样子，以及它如何表现。在QML一个用户界面被指定为具有属性的对象树,这使得Qt更加便于很少或没有编程经验的人使用。

Qt的消息机制是建立在SIGNAL()发送和SLOT()接受的基础上的,这个机制是对象间建立联系的核心机制。利用SIGNAL()可以传递任何的参数,他的功能非常的强大。可以直接大传递信号给SLOT()，因此可以清楚的理解要发生的事情。一个类所发送的信号的数量通常非常的小(4或者5)，并且文档也非常的齐全；这让你感觉到一切尽在掌握之中。SIGNAL/SLOT机制类似于Java中listener机制,不过这种机制更加轻量级，功能更齐全。使用Qt的时候，只需要将字符串置于函数tr()中，在程序开发中这算是举手之劳，可以直接在代码中改变字符串的参考。QtLinguist,Qt的一个工具，能够提取所有待翻译的string并按照友好的界面显示出来。这个用户界面非常适合翻译，使用字典显示字符串内容恰当的unicode显示、快捷方式冲突检测、检测未翻译的字符串和检测字符串修改情况功能齐全。这个软件可以供没有任何编程经验的翻译者使用；同时该软件在GPL的版权下发布，可以按照你的需求来修改它。翻译以后的文档保存在XML中，适合软件复用的原则，为软件增加一种新的语言版本仅仅是用QtLinguist产生一个新的文件而已。

Qt提供了一个脚本使得能将编入你的代码。对于界面设计，QtDesigner则创建了可读的代码。简单的QML代码包含了QML元素，.qml后缀名的文件，或者文本编码方式为UTF-8。总是以至少一个import语句开始，并没有包含什么代码，仅仅只是为在运行时解释器寻找元素的定义，定义唯一的顶层QML组件，在执行之前并没有预处理机制，在运行时解释执行！

QML使用了与Qt中Model-View类似的结构。模型类提供了数据，模型可以使QML的简单数据，或者复杂的C++数据：

QML：ListModel,XmlListModel,VisualItemModel

C++：QAbstractItemModel,QStringList,QList<QObject*>

视图显示模型提供的数据：

ListView,GridView,PathView,Repeater(allQML)

都自动支持滚动，代理为视图创建模型中数据的实例，Highlight控件用来高亮视图里面的选中item。

QML很多核心的类型和元素都又C++实现的，然而用纯的QML对这些类型进行扩展也是可能的，用QML开发者可以添加新的属性properties、添加新的信号signals、添加新的方法methods和定义新的QML控件等。

在扩展QML元素时如何添加新的函数，是采用JavaScript编写的，并只属于定义它的元素；然而应用程序的逻辑都是和界面程序分开的，为了能够使用这些函数需要将他们导入到新的QML文档中，JavaScript可以直接被写在qml文件中，或者保存在一个独立的js文件里面，这是个更好的选择；应用程序也可以使用QML全局对象提供的服务。

参照图2，图2为本发明添加过渡元素触发动作的细化流程图，在本实施例中，步骤S4还包括步骤S401，设置起始属性和目标属性，将起始属性和目标属性分别绑定到特定的状态名称上，当所述过渡元素的过渡被设为可逆过渡时，可逆过渡条件为真则自动切换到上一个状态。

步骤S402，定义动画可以以并行、串行或暂停执行；

步骤S403，通过使用属性变化对元属添加动画。

如步骤S401所述，添加过渡元素，通过设置起始和目标元素属性，可以指定与特定状态绑定的动画，起始对应的英文名称为from，目标对应的英文名称为to，它们默认设置为“*”（任意状态），可逆过渡对应的英文名称为reversible，当过渡被设为可逆过渡条件为真，默认是假，自动切换到上一个状态。

如步骤S402所述,添加过渡元素，我们定义动画在执行的过程可以以串行、并行和暂停执行。串行动画同时执行一组动画，串行动画按顺序执行一组动画；例如在串行动画中的分组动画先执行串行再执行并行；不加串行或者并行动画标签时默认是按并行方式执行。串行动画和并行动画和暂停动画对应的英文名称分别为（SequentialAnimationParallelAnimationPauseAnimation）。

如步骤S403所述，通过使用属性变化对元属添加动画。对元素（Types:real,int,color,rect,point,size）等添加动画；动画对应的英文名称为Animation，所述通过使用基本属性动画、过渡和属性行为的其中一种实现添加动画；所述基本属性动画，都有一个公共的基类Animation；所述过渡，使用Transition；所述属性行为，使用Behavior。

所述使用基本属性动画包括插入预定义的缓冲动画曲线。缓和曲线对应英文名称为easingcurve，缓和曲线包括（OutQuad、InElastic、OutBounce……）属性值动画曲线。

与现有技术相比，其优点在于，使用QML和OpenGL语言，通过定义状态和添加过渡元素来定义车载图形界面，通过属性变化修改状态元素属性，并通过使用鼠标区域控件设置鼠标响应区域，来达到元素属性都可以改变，状态同时也可以改变；通过使用属性变化对元属添加动画，并通过使用数据类型和视图列表来显示动画效果，应用动画和视觉效果来扩展过渡变化，可以帮助我们查看所有的功能都被覆盖到。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (10)

1.一种基于QML+OpenGL的车载图形界面系统，其特征在于，包括以下步骤：

步骤S1，初始化进入用户界面定义状态；

步骤S2，通过使用鼠标区域控件设置鼠标响应区域，切换不同的状态；

步骤S3，判断状态是否满足触发条件，直到满足触发条件状态被激活；

步骤S4，添加过渡元素触发动作；

步骤S5，调用脚本变化执行动作。

2.根据权利要求1所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述步骤S3的触发条件为根据用户需求进行自定义设置的触发指令，当接收到对应的指令时状态被激活。

3.根据权利要求2所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述的触发条件为鼠标触发、按键触发或者状态触发其中一种。

4.根据权利要求1所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述步骤S4还包括步骤S401，所述步骤S401中设置起始属性和目标属性，将起始属性和目标属性分别绑定到特定的状态名称上，当所述过渡元素的过渡被设为可逆过渡时，可逆过渡条件为真则自动切换到上一个状态。

5.根据权利要求4所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述步骤S4还包括步骤S402，所述步骤S402中定义动画可以以并行、串行或暂停执行。

6.根据权利要求5所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述步骤S4还包括步骤S403，所述步骤S403通过使用属性变化对元素添加动画。

7.根据权利要求6所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述步骤S403通过使用基本属性动画、过渡和属性行为的其中一种实现添加动画。

8.根据权利要求7所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述使用基本属性动画包括插入预定义的缓冲动画曲线。

9.根据权利要求1所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述步骤S1还包括以下子步骤：

步骤S101，通过列表获取数据模型；

步骤S102，通过代理进行数据绑定；

步骤S103，通过视图显示数据。

10.根据权利要求1所述的基于QML+OpenGL的车载图形界面系统，其特征在于，所述步骤S1通过属性变化修改状态元素属性。