米尔电子HMI试用报告#6——直流充电桩充电界面（一）

idiy

现在，我们来制作直流充电桩界面，基本的要求如下：
1. 基于米尔的MEasey HMI实现。这样做的好处有界面风格统一，可以直接调用米尔提供的资源；易于代码的组织和管理等等。
2. 共计有 待机/启动充电/正在充电/停止充电 4个界面
3. 对于2的4个界面，用4个布局在同一窗口里实现。
4. 支持串口通信
5. 通过串口通信切换界面
6. 支持二维码

根据需求，我们可以在米尔提供的mxserial的基础上修改从而达到实现以上的需求。

基础代码

• 复制mxserial到同级目录下，并修改文件夹名字为evcharger
• 在evcharger/res/images目录下添加evcharger192.png
  

• 在evcharger目录下添加12_evcharger.desktop，内容如下：
  

1. [Desktop Entry]
   
2. Name=EV Charger
   
3. Name[zh_TW]=充电桩
   
4. Name[zh_CN]=充电桩
   
5. 
   
6. Type=Application
   
7. Icon=/usr/share/pixmaps/evcharger192.png
   
8. Exec=/home/myir/evcharger --platform linuxfb
   
9. Terminal=false
   
10. MimeType=application/x-directory;inode/directory;
    
11. Categories=System;FileTools;Utility;Qt;FileManager;
    

复制代码

• 在evcharger目录下添加evcharger.pro，内容如下：
  

1. #-------------------------------------------------
   
2. #
   
3. # Project created by QtCreator 2017-12-22T18:54:31
   
4. #
   
5. #-------------------------------------------------
   
6. 
   
7. QT       += core gui dbus
   
8. 
   
9. greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
   
10. 
    
11. TARGET = evcharger
    
12. TEMPLATE = app
    
13. 
    
14. 
    
15. SOURCES += main.cpp \
    
16.     mxmaindialog.cpp \
    
17.     systemactionwidget.cpp \
    
18.     systemcontentwidget.cpp
    
19. 
    
20. HEADERS  += mxmaindialog.h \
    
21.     systemactionwidget.h \
    
22.     systemcontentwidget.h
    
23. 
    
24. target.path = /home/myir
    
25. 
    
26. inst1.files = ./12_evcharger.desktop
    
27. inst1.path = /usr/share/applications
    
28. inst2.files = ./res/images/evcharger192.png
    
29. inst2.path = /usr/share/pixmaps
    
30. 
    
31. INSTALLS += target inst1 inst2
    
32. 
    
33. include(../mxbase/mxbase.pri)
    
34. 
    
35. win32:CONFIG(release, debug|release): LIBS += -L$OUT_PWD/../mxdbus/release/ -lmxdbus
    
36. else:win32:CONFIG(debug, debug|release): LIBS += -L$OUT_PWD/../mxdbus/debug/ -lmxdbus
    
37. else:unix:!macx: LIBS += -L$OUT_PWD/../mxdbus/ -lmxdbus
    
38. 
    
39. INCLUDEPATH += $PWD/../mxdbus
    
40. DEPENDPATH += $PWD/../mxdbus
    
41. 
    
42. win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/release/libmxdbus.a
    
43. else:win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/debug/libmxdbus.a
    
44. else:win32:!win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/release/mxdbus.lib
    
45. else:win32:!win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/debug/mxdbus.lib
    
46. else:unix:!macx: PRE_TARGETDEPS += $OUT_PWD/../mxdbus/libmxdbus.a
    
47. 
    
48. DISTFILES += \
    
49.     res/images/evcharger192.png
    

复制代码

• 在mxde.pro中添加 evcharger
  

这样就新建立了一个新的工程evcharger，在这个基础上可以进行修改了。由于工程比较多，在编译的时候会比较慢，可以把在mxde.pro中除 mxdbus 和 evcharger 之外的所有工程都删掉。

有些朋友可能会问，我不用在MEasy HMI框架上新建工程，而是直接用QT Creator新建工程，可以吗？答案是肯定的：可以！但是，如果这么做的话就不方便调用米尔提供的资源了。

在 mxapp_en.ts中添加如下（需要显示的英文字符串放在这个文件里）

1.     <message>
   
2.         <source>EV Charger</source>
   
3.         <translation type="unfinished"></translation>
   
4.     </message>
   

复制代码

切换到mxapp_en.ts所在目录，生成mxapp_en.qm

1. /opt/myir-imx6ulx-qt5/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/lrelease -v
   
2. erbose mxapp_en.ts -qm mxapp_en.qm
   

复制代码

在 mxapp_zh.ts中添加如下（翻译成中文的字符串放在这个文件里）

1.     <message>
   
2.         <source>EV Charger</source>
   
3.         <translation>充电桩</translation>
   
4.     </message>
   

复制代码

生成 mxapp_zh_CN.qm

1. /opt/myir-imx6ulx-qt5/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/lrelease -v
   
2. erbose mxapp_zh_CN.ts -qm mxapp_zh_CN.qm
   

复制代码

刚开始是这样的，一直提示找不到lrelease！经过好一会折腾才解决了问题。



修改标题显示



删除控件。这样，就生成了一个空白的界面，如下图：



二维码代码移植和显示

我选择了 QZXing 来做二维码的显示。QZXing 在 sourceforge.net 上的主页打不开了，
可能是由于众所周知的原因，需要爬扶梯。还好，在github上有副本：

• https://github.com/ftylitak/qzxing
  

移植QZXing

• 下载代码之后，将src目录复制到工程目录下并改名为QZXing
• 在evcharger.pro中末尾一行之后加上 include(QZXing/QZXing.pri)
  

使用QZXing显示二维码

使用QZXing显示二维码也很简单，如下：

1.     QString data = "20190508";
   
2.     QImage barcode = QZXing::encodeData(data, QZXing::EncoderFormat_QR_CODE,
   
3.                                     QSize(260, 260), QZXing::EncodeErrorCorrectionLevel_H);
   
4.     ui->label->setPixmap(QPixmap::fromImage(barcode));
   

复制代码

nieqiue

讲得很清楚，学习学习，谢谢。