Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法

文章链接1-布局方案https://qtchina.blog.csdn.net/article/details/901416462-配色方案https://qtchina.blog.csdn.net/article/details/901663793-新建布局https://qtchina.blog.csdn.net/article/details/901825684-布局另存https://qtchina.blog.csdn.net/article/detai...

有了之前可视化大屏电子看板系统的经验，要做这个ERP库存库房发货电子看板，可以说是水到渠成轻车熟路，技术难度比之前做过的各种大屏系统的子模块都要简单。由于库存库房发货数据的特殊性，基本上都是要求表格形式展示，唯一稍微多一点的代码就是有部分表格数据要求不同警报需要不同颜色显示数据，还有部分字段需要展示成进度条，但是总归都还是在表格中，这几种特殊要求用自定义委托即可。之前就把委托搞得滚瓜烂熟，还搞了个自定义委托全家桶，要的各种委托效果，常用的都具备了，直接把他拿过来用在这里就行。

一、前言大屏地图模块采用浏览器模块+echart组件，Qt自带了webkit或者webengine模块，其中在win上mingw编译器的Qt5.6以后的版本，没有了浏览器模块，这个就需要用第三方的浏览器模块比如miniblink或者cef等，个人偏好miniblink因为足够简单。为了能够兼容所有的Qt版本和应用场景，特意专门写了通用浏览器控件独立的类webview，只要new即可，会自动判断Qt版本以及存在哪种浏览器模块就用哪种，优先采用Qt自带的浏览器模块，除非手动指定miniblink就用minib

一、前言视频监控模块采用ffmpeg作为解码内核，可以在系统设置中填入一个视频地址，同时支持本地视频文件、USB摄像机、远程onvif摄像机（海康大华等）、网络视频地址，大屏系统中默认有一个视频监控，如果需要显示多个则new多个视频监控模块即可，在本系统中每个最小单元的小模块都是一个类，需要多少个就可以new多少个出来显示，二级模块作为一个悬停窗体嵌入主界面mainwindow，都可以拖动到任意位置自动嵌入。视频监控模块有多个参数设置，以便用户设置，最开始做的是内置的写死在代码中，后面随着用户场景的变化

一、前言物料管理模块包括库存占比、主要零件库存状况子模块，其中库存占比采用自定义控件环形进度条展示，总共有多种库存，具体根据数据库中的名称展示不同的界面，当库存数不够的时候，对应环形进度条颜色红色显示；主要零件库存状况采用表格显示数据，末尾有预警进度条，字段包括编号、品名、规格、材料、尺寸、目标库存、当前库存、库存百分比；子模块表名对应表：子模块标题子模块表名库存占比t_8_1_key_invt主要零件库存t_8_2_invt_table1 库存占比表名：t_8_

一、前言品质管理模块是在送检合格模块的基础上增加了统计而来，总共包括了三个子模块：品质占比、班组合格率、每日合格率统计，其中品质占比子模块采用饼图控件显示对应的百分比，不同百分比颜色不一样，这个饼图控件采用自定义控件painter绘制，最开始采用的qchart内置的饼图，使用方便，但是不支持Qt4，索性直接painter绘制一个简单的饼图控件，核心就是drawpie函数；班组合格率采用柱状图显示数据；每日合格率统计采用平滑曲线图展示。子模块表名对应表：子模块标题子模块表名品质占比

一、前言送检合格率模块包括钢件合格率、电机合格率、当天合格率、模具零件合格率四个子模块，其中钢件合格率和电极合格率都是采用的曲线图展示，统计的15天内的合格率，定位线放在90这个值的位置，相当于90%的合格率，在此控件中不同于前面的折线图，采用平滑曲线的方式展示，当然封装的这个曲线控件任意地方都可以采用这个特性；当天合格率采用的自定义控件合格率仪表盘展示，仪表盘的中间显示对应的合格率文字；模具零件合格率采用柱状图展示不同的模具零件类别的合格率，对应合格率的值显示在柱状图的顶上，为了使得这个值能够完整的显示

一、前言负荷分布模块包括工序计划负荷、当日负荷、负荷百分比三个子模块，工序计划负荷用表格的形式展示不同工序在不同日期的负荷工作时长，比如组装工序在 2022-02-10 运行了88小时，一般表格显示最近的一星期的信息；当日负荷用柱状图的形式显示不同工序当天的负荷运行时长；负荷百分比用折线图展示，其中包括了定位线默认放在100的值位置。子模块表名对应表：子模块标题子模块表名工序计划负荷t_5_1_work_load当日负荷t_5_2_work_load_today负荷

一、前言模具进度主要用来展示不同的模具类别加工进度，表格的形式展示，显示内容包括模具编号、版本号、类型、状态、产品名称、计划交期、当前进度，其中进度条采用自定义控件三态进度条，有三种状态显示进度；右侧有两个小模块分别是模具状态统计、加工中模具数量，其中模具状态统计分别显示正常交付比例、加工中比例、延期比例；加工中模具数量采用自定义控件仪表盘显示数量值。由于之前就编写过接近200个自定义控件，所以对自定义控件这块非常熟悉，在整个大屏系统中好多控件直接利用现成的，部分需求直接改改换个代码就能用，不得不感谢Q

一、前言设备监控主要用来实时监测制造零件等使用的设备的工作运行状态，每个设备都有对应的需要、分组名称、分组编号、设备名称、文字1、文字2、工作状态（1-开机 2-待机 3-维护 4-空），不同的工作状态不同颜色显示，比如维护状态红色显示，待机状态黄色显示。右侧显示对应设备分组的稼动率、开机数量、待机数量、维护数量。Qt源自c++，类的思想非常强大，比如这个设备监控模块，每个设备需要显示设备名称、多种文字等，还有不同状态不用背景颜色，这就需要单独写个设备类，记录存储这些值，并根据设定的值做出反应，最后有多

一、前言延续分层模块化的设计思路，当月计划模块主要包括模具达成率、零件达成率、零件数、每日工序达成数5个子模块，其中模具达成率采用自定义控件环形图展示，比如计划多少达成多少，达成作为进度；零件达成率采用纵向分组图展示，对应完成的数量显示在柱状图的顶部；零件数采用自定义控件仪表盘显示；每日工序达成数采用标准柱状图展示，当月有多少天就多少个柱子。在整个可视化大屏电子看板系统中，为了随机生成合理范围的随机数，特意封装了一个函数专门处理，传入范围值生成随机数，从Qt5.10开始内置了QRandomGenerat

一、前言大屏系统采用结构模块化的分层设计思路，一个表对应一个最小模块比如模具产量、零件产量，数据库采集的时候采集对应的表，拿到数据后按照对应的数据规则传给控件绘制，其中模具产量、零件产量两个模块采用横向分组图的形式展示，每月模具产量趋势图、每月零件产量趋势图采用折线图来展示，两种图形组件都采用QCustomplot图表控件特殊定制而来，其中横向分组图隐藏横坐标，纵坐标显示对应的分组名称，折线图不同曲线不同颜色显示，折线图的横坐标是月份，纵坐标是对应的数据，为了方便用户观看，还增加了定位线突出显示，比如定位

欢迎关注公众号：Qt实战/Qt入门和进阶，获取最新文章推送学习。

一、前言平滑曲线是所有涉及到曲线图的项目中，绕不开的一个话题，尽管很多人爱看折线图，但是很多时候来个平滑曲线图，会更加赏心悦目，这就好比现在的手机app移动客户端上，从最初的四方四正到现在的平滑圆角大行其道，甚至连小米的LOGO都从方形稍微调整成丝滑的圆角，设计师还收了个几百万。曲线从弯来弯去的折线向平滑丝滑曲线转变是个趋势，所以这也是我一直纳闷的一个问题就是，为何现在众多的曲线图表控件，不仅限于Qt的，包括C#/JAVA/ANDROID等开发框架，默认都是折线图形式的而不是平滑的，莫非是英文折线图代码简

一、前言数据转曲线，这个用的非常多，比如串口或者网络收到的数据，对特定的字节数据绘制实时的曲线，或者对历史记录存储的数据进行曲线绘制，按照约定的规则，数据转曲线绘制必须提供规则，没有规则只能对所有数据绘制，那样的话肯定很难看，一般下位机传过来的数据都是有桢头帧尾校验码的，需要剔除无关的数据，一般需要指定哪个字节或者哪几个字节属于需要绘制曲线的数据，如果是多个数据，可能还需要合并，比如2个字节合并成一个无符号ushort数据，4个字节合并成一个uint数据，合并转换的规则还有高低字节位置的区分，有些是高字节

一、前言横向分组图是柱状分组图的横向展示，有了横向柱状图加上分组图的绘制经验，这个做起来就比较简单了，横向的设置规则按照横向柱状图来，分组的规则按照柱状分组图的算法来，在横向的柱子中要绘制对应的值，没必要垂直绘制，就按照横向普通文字方向绘制就行，方便人类直观理解，看到有些软件文字还垂直绘制，看的头和脖子都歪了，不知道软件开发作者当初怎么设计的，估计设计完他自己也不看的吧。自此继承自QCustomPlot的二次开发基本完成，为何选择继承进行开发而不是直接在源码上修改，因为直接源码上修改，虽然来得快，但是破

一、前言横向柱状图的绘制这玩意当初还着实花费了一些时间，因为从v1版本开始，默认XY坐标轴是没有交换位置的处理的，也只有垂直的柱状图，要想换成横向的柱状图必须是自己拿到数据重新绘制，数据值的设置一般有这几个参数，值的区域、显示数据值的位置（0-不绘制 1-顶部上面 2-顶部居中 3-中间居中 4-底部居中）、数据值的精确度（有时候可能是浮点数需要有小数位）、柱子的颜色（没有校验的时候按照设置的颜色）、是否校验数据（开启校验后按照校验的规则取对应的颜色）。在进行二次开发的时候，最初的版本是所有功能写在一个

一、前言柱状分组图是柱状堆积图的衍生或者另外一种展示效果，设置的数据值数据源集合完全一样，只不过就是把柱子给拿下来了放在旁边，然后一个分组多个柱子横向排列，不同分组之间有一定的空隙隔开，默认QCustomPlot是不提供分组图的，怎么办呢，于是搞了一个很巧妙的算法，在标注柱状图的基础上，通过不同分组设置不同的x坐标也就是key值来形成分组的效果，key相隔的差值越大则距离越大，同一分组之间的柱子是紧挨着的没有差值，只有不同分组的第一个柱子需要有差值，于是搞了一个小小的计算公式来计算这个差值。没有内置分组

一、前言柱状堆积图也叫堆积柱状图、堆积柱形图、堆叠图，有点类似跳动的音符，一个柱子上有多根柱子层叠，层叠之间可以设置间隔，这个其实和柱状分组图的功能类似，只不过把这个分组放到了柱子上面层叠，一般柱子的数量有要求，不建议很多个，不然看起来眼花缭乱，失去了原本的效果。著名的excel软件也都内置了这些处理，也许他就是这个数据展示效果的鼻祖，提供了各式各样的数据柱状图展示，这玩意算下来好像居然有几十年的历史了，通过各种用户现场需求演化而来，才使得用途这么广泛。开源的QCustomPlot默认就自带了堆积图设置

一、前言标准柱状图是大屏系统中最常用的一种展示数据效果图，提供不同的柱子显示数据值，在QCustomPlot的基础上拓展了顶部显示对应的值，不同的柱子不同的颜色，同时还可以调用内置的触发报警颜色的机制，比如超过90%就自动红色显示，这样用户使用的时候只要传入值就行，默认的机制一般是三种颜色，正常颜色、警告颜色、报警颜色，三种颜色都对应触发值，超过对应的值就显示对应的颜色。一般的规则都是大于设定的警戒值就触发，其实真实世界是简单的也是复杂的，还有不少的场景是低于一定的值才报警，倒过来的规则，可能会有三种规则

一、前言曲线面积图其实就是在曲线图上增加了颜色填充，单纯的曲线可能就只有线条以及数据点，面积图则需要从坐标轴的左下角和右下角联合曲线形成完整的封闭区域路径，然后对这个路径进行颜色填充，为了更美观的效果，一般这个填充颜色采用曲线条颜色的透明度值150绘制，看起来更具科幻感，面积图和折线图类似都可以重叠绘制多条，每条都可以是不同的颜色，如果数据点不较少的情况下，还可以开启是否绘制数据值，开启的话直接居中区域绘制对应的数据值。为了更方便的使用二次开发改造的QCustomPlot，重命名了一些数据类型，比如曲线

一、前言近期将可视化大屏电子看板系统重新规划和调整项目结构代码，几个重大改变是新增启动窗体选择，可选大屏系统、控件演示、模块演示三种，其中控件演示是专门针对本系统中用到的各种自定义控件单独做的使用demo，模块演示是专门针对本系统中每个子模块单独演示，这样可以更方便的切换学习，而不是盲目的在项目代码中找，可以直接快速切换定位到具体的代码文件学习。大屏系统中用到的曲线图柱状图都是在开源的QCustomPlot曲线图表控件基础上二次开发改造的，最基础的曲线展示莫过于标准曲线图了，QCustomPlot官方一

一、前言之前发布的Qt编写的可视化大屏电子看板系统，很多开发者比较感兴趣，也收到了很多反馈意见，纵观市面上的大屏系统，基本上都是B/S结构的web版本，需要在后台进行自定义配置模块，绑定数据源等，其中比较有名的就是阿里云的DataV和百度的Sugar，都是很不错的，DataV是阿里云出品的专业大屏数据可视化服务，旨在让更多的人看到数据可视化的魅力，帮助非专业的工程师通过图形化的界面轻松搭建专业水...

一、前言数据采集是整个数据可视化大屏界面电子看板系统核心功能，没有数据源，这仅仅是个玩具UI，没啥用，当然默认做了定时器模拟数据，产生随机数据，这个可以直接配置文件修改来选择采用何种数据采集方法，总结了一下基本上会有这样几种数据源，timer-模拟数据 db-数据库采集 tcp-网络采集 http-post请求，大量的web会选择采用http作为post网络请求来获取数据，而对于本人来说，更喜欢...

一、前言说到自定义控件，我是感觉特别熟悉的几个字，本人亲自原创的自定义控件超过110个，都是来自各个行业的具体应用真实需求，而不是凭空捏造的，当然有几个小控件也有点凑数的嫌疑，在编写整个数据可视化大屏界面电子看板系统中，也用到了四五个自定义的控件，比如那个环形百分比图，多态进度条，合格率仪表盘，速度仪表盘等，这些控件在现有的类中是没有的，需要用QPainter这个牛逼的工具来绘制，类似于神笔马良...

一、前言为了抛弃对QChart的依赖，以及echart的依赖，（当然，后期也会做qchart的版本和echart的版本，尤其是echart的版本是肯定会做的，毕竟echart的效果牛逼的一塌糊涂，全宇宙最牛逼吧。）特意对QCustomPlot进行了大刀阔斧的改造，当然这个改造不是直接在源码上修改，这个就破坏了源码的完整性，说不定被QCustomPlot的作者知道了有种被QJ的感觉，我得改造是直接...

一、前言为了编写数据可视化大屏界面电子看板系统，为了能够兼容Qt4和嵌入式linux系统，尤其是那种主频很低的，但是老板又需要在这种硬件上（比如树莓派、香橙派、全志H3、imx6）展示这么华丽的界面时，就必须用最传统的painter方法来实现所有的控件了，一开始使用的QChart来实现各个子控件，在使用过程中发现比较鸡肋，个人感觉QChart是所有的子模块中源码写的最烂的，本人把QChart的源...

一、前言在数据可视化大屏界面电子看板系统中，前期为了使用目标客户机，调整间距是必不可少的工作，QMainWindow中的QDockWidget，会默认生成布局和QSplitter调整宽高大小，鼠标移动到模块之间的缝隙处，鼠标指针会形成调整大小间距的那种，上下左右拉动就可以调整大小了。Qt的dock默认底部布局是被全部填充的，即一旦产生了底部Dock，则底部的左侧和右侧也属于底部布局，此时需要用s...

一、前言窗体浮动的场景也比较多，用途也比较大，比如视频监控模块，有时候需要调整大小和位置，而不是作为dock嵌入到布局中，一旦嵌入到布局中，大小和位置都被布局接管了，只能任由布局使唤，按在地上摩擦的那种。所以窗体浮动独立出来以后，就可以当做单独的窗体使用了，八个方位任意调整大小，（做到这里，是不是想起来，很多人写的无边框窗体类，自己写代码实现边框的拉伸调整大小？原来Qt也内置类无边框调整大小的位...

一、前言二级窗体的打开与关闭，这个功能也很有必要，由于整个系统中各种模块数量窗体数量比较多，后期可能还会增加更多，在4K屏幕上可以显示很多的模块，但是有时候有些模块不想显示出来，就需要将该模块关闭掉，直接在二级窗体的标题栏上增加关闭按钮，可能会影响整体的布局，此时提供鼠标右键菜单来控制各个模块的开关，就非常爽了，QDockWidget上场，QMainWindow类中如果有Dock类，则会自动生成...

一、前言恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用，很多时候不小心把现有布局拖动乱了，（当然如果不想布局被拖动改动，可以修改配置文件中的MoveEnable参数来控制，默认为真表示可以任意拖动布局，后期如果不想再被拖动可以设置为假。）人总归有不小心的时候，一旦不小心拖动了布局，则可以在软件没有退出之前恢复，鼠标右键菜单增加恢复布局这个功能就很有必要了，在保存布局以前，单击这个...

一、前言布局另存是数据可视化大屏界面电子看板系统中的额外功能之一，主要用于有时候用户需要在现有布局上做个微调，然后直接将该布局另存为一个布局配置文件使用，可以省略重新新建布局重新来一次大的调整的工作，此功能主要是用到了配置文件的保存，另存为一个不同名字的配置文件即可，属于非常简单的功能，在代码上来讲，其实Qt的配置文件类QSettings使用起来不要太方便，不仅支持WIN的注册表的读取写入，还支...

一、前言能够新建布局，也是数据可视化大屏界面电子看板系统中的必备功能之一，新建布局这样的功能一般做到右键菜单中，单击新建布局菜单，弹出输入框要求输入新的布局的名称，为了更符合国情，直接支持中文名称，保存成配置文件直接中文名称命名，这样方便用户理解，Qt5以来对乱码的问题解决的就比较好了，不像Qt4时代稍不留神就乱码了，Qt5只要保证源码文件utf-8编码基本上就很少遇到乱码问题了。新建布局必须要...

一、前言做完整个数据可视化大屏界面电子看板系统后，为了提升点逼格，需要提供好几套默认的风格样式以供选择，这样用户可以选择自己喜欢的配色方案来作为整个系统的颜色方案，去看了下市面上大部分的大屏电子看板系统，都是以蓝色为主，部分黑色，估计也许这就是大众的审美吧，那就在数据可视化大屏界面电子看板系统中也加入蓝色风格、深蓝色风格、黑色风格，三种，加上默认的紫色风格，共计内置4套风格选择，Qt的QSS是我...

一、前言布局方案在整个数据可视化大屏界面电子看板系统中，是除了基础功能以外的核心功能之一，只有具备了布局方案这个功能，才能让用户随意调整自己想要的布局，保存成自定义名称的布局配置文件，这样就大大增加了灵活性，可以更好的适应各种分辨率，毕竟客户的电脑运行环境各种各样的都有，模块数量众多，有些不想展示，有些需要特别放大展示，有些需要偶尔全屏展示等，这些布局用户都可以自己定义好保存配置方案，存储到指定...

前言目前大屏大数据可视化UI这块非常火，趁热也用Qt来实现一个，Qt这个一站式超大型GUI超市，没有什么他做不了的，大屏电子看板当然也不在话下，有了QSS和QPainter这两个无敌的工具组合，借用几个Qt高手朋友的话来说，都是分分钟。在整个系统的编写过程中，发现数学知识真的还是蛮重要的，在重要的几个算法点上，需要多次用到二元一次方程才能搞定几个算法，比如如何分组绘制柱状图。电子看板介绍电子...