查看: 1663|回复: 1

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

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

    连续签到: 1 天

    [LV.10]以坛为家III

    发表于 2019-5-13 12:03:01 | 显示全部楼层 |阅读模式
    分享到:
    本帖最后由 idiy 于 2019-5-13 20:49 编辑

    界面布局与显示

    应用入口

    前面已经添加了一个 LED 测试应用,现在再来添加一个应用,如下图:

    充电桩应用入口.jpg

    动态显示/清除界面内容

    在主界面容器内,采取动态增加/关闭控件的方法来对不同的界面进行切换。

    采用QList来存储各界面的控件信息:

    1. QList<vLayoutList*>mWidgetList[layoutTotal];
    复制代码


    layoutClear()清除前一个界面的显示:

    1. void SystemContentWidget::layoutClear()
    2. {
    3.     QLayoutItem *item = nullptr;
    4.     while(nullptr!=(item = mainLayout->takeAt(0)))
    5.     {
    6.         item->widget()->close();
    7.         item = nullptr;
    8.     }
    9. }
    复制代码


    layoutAddWidgetByList()在清除前一个界面显示之后,显示指定QList存储的控件:


    1. void SystemContentWidget::layoutAddWidgetByList(QList<vLayoutList*>wList)
    2. {
    3.     layoutClear();
    4.     for(int i=0;i<wList.size();++i)
    5.     {
    6.         auto var = wList.at(i);
    7.         var->w->show();
    8.         mainLayout->addWidget(var->w, var->p);
    9.     }
    10. }
    复制代码

    待机界面显示

    • 显示字符串“扫描二维码充电”
    • 显示二维码


    扫码充电.jpg

    启动充电界面显示


    • 显示字符串“启动充电”
    • 显示一幅动画


    启动充电.gif

    正在充电界面显示


    • 显示字符串“正在充电”
    • 显示充电参数
    • 显示“结束充电”按钮
    • 点击“结束充电”按钮可跳转到停止充电界面


    正在充电.jpg

    停止充电界面显示


    • 显示字符串“停止充电”
    • 显示图片


    停止充电.jpg

    这样,充电桩充电应用的4个界面就完成了。进一步的,可以添加串口协议来控制界面切换了。




    回复

    使用道具 举报

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

    本版积分规则

    关闭

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

    手机版|小黑屋|与非网

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

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

    苏公网安备 32059002001037号

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.