查看: 2034|回复: 1

[原创] 米尔电子HMI试用报告#6——直流充电桩充电界面(一)

[复制链接]
  • TA的每日心情
    开心
    7 天前
  • 签到天数: 1011 天

    连续签到: 1 天

    [LV.10]以坛为家III

    发表于 2019-5-8 21:49:33 | 显示全部楼层 |阅读模式
    分享到:
    本帖最后由 idiy 于 2019-5-9 13:26 编辑

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

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

    基础代码

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

    • 在evcharger目录下添加12_evcharger.desktop,内容如下:


    1. [Desktop Entry]
    2. Name=EV Charger
    3. Name[zh_TW]=充电桩
    4. Name[zh_CN]=充电桩

    5. Type=Application
    6. Icon=/usr/share/pixmaps/evcharger192.png
    7. Exec=/home/myir/evcharger --platform linuxfb
    8. Terminal=false
    9. MimeType=application/x-directory;inode/directory;
    10. Categories=System;FileTools;Utility;Qt;FileManager;
    复制代码

    • 在evcharger目录下添加evcharger.pro,内容如下:


    1. #-------------------------------------------------
    2. #
    3. # Project created by QtCreator 2017-12-22T18:54:31
    4. #
    5. #-------------------------------------------------

    6. QT       += core gui dbus

    7. greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

    8. TARGET = evcharger
    9. TEMPLATE = app


    10. SOURCES += main.cpp \
    11.     mxmaindialog.cpp \
    12.     systemactionwidget.cpp \
    13.     systemcontentwidget.cpp

    14. HEADERS  += mxmaindialog.h \
    15.     systemactionwidget.h \
    16.     systemcontentwidget.h

    17. target.path = /home/myir

    18. inst1.files = ./12_evcharger.desktop
    19. inst1.path = /usr/share/applications
    20. inst2.files = ./res/images/evcharger192.png
    21. inst2.path = /usr/share/pixmaps

    22. INSTALLS += target inst1 inst2

    23. include(../mxbase/mxbase.pri)

    24. win32:CONFIG(release, debug|release): LIBS += -L$OUT_PWD/../mxdbus/release/ -lmxdbus
    25. else:win32:CONFIG(debug, debug|release): LIBS += -L$OUT_PWD/../mxdbus/debug/ -lmxdbus
    26. else:unix:!macx: LIBS += -L$OUT_PWD/../mxdbus/ -lmxdbus

    27. INCLUDEPATH += $PWD/../mxdbus
    28. DEPENDPATH += $PWD/../mxdbus

    29. win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/release/libmxdbus.a
    30. else:win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/debug/libmxdbus.a
    31. else:win32:!win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/release/mxdbus.lib
    32. else:win32:!win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $OUT_PWD/../mxdbus/debug/mxdbus.lib
    33. else:unix:!macx: PRE_TARGETDEPS += $OUT_PWD/../mxdbus/libmxdbus.a

    34. DISTFILES += \
    35.     res/images/evcharger192.png
    复制代码

    • 在mxde.pro中添加 evcharger


    在mxde_pro中添加evcharger.png

    这样就新建立了一个新的工程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!经过好一会折腾才解决了问题。


    找不到lrelease.png

    修改标题显示

    修改标题显示.png

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

    空白界面.jpg

    二维码代码移植和显示

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

    移植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));
    复制代码


    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-10-10 08:53
  • 签到天数: 6 天

    连续签到: 6 天

    [LV.2]偶尔看看I

    发表于 2022-10-7 14:11:10 | 显示全部楼层
    讲得很清楚,学习学习,谢谢。
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 注册/登录

    本版积分规则

    关闭

    站长推荐上一条 /2 下一条

    手机版|小黑屋|与非网

    GMT+8, 2024-3-19 19:53 , Processed in 0.144011 second(s), 18 queries , MemCache On.

    ICP经营许可证 苏B2-20140176  苏ICP备14012660号-2   苏州灵动帧格网络科技有限公司 版权所有.

    苏公网安备 32059002001037号

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.