中控屏面板-在线设计及LVGL代码生成

[复制链接]
查看872 | 回复7 | 2024-6-20 11:55:29 | 显示全部楼层 |阅读模式
  现在的智能家居系统,集成系统或者部分家电本身会配置一套中控屏,该屏通常集成系统中各种设备的控制功能。一般通过无线模式连接智能灯光、影音系统、开关、插座、门锁和家电等设备,从而实现对这些设备的远程控制和一键操控,为用户提供直观便捷的操作体验。例如,在背景音乐、灯控开关等场景中,中控屏不仅可以简化操作,还提供了丰富的音乐资源和家电运行状态的实时显示,让用户享受智能化带来的舒适和便捷。
  爱星物联IoT云平台,作为面向智能家居领域的物联网平台,自然也提供了中控屏开发相关的功能。开发者可在在云平台中,在线进行面板设计和代码生成。
  面板开发的基本操作流程如下图所示:
      11.png
本文主要简单介绍一下操作流程。
进入爱星物联开发平台首页,可以看到左侧菜单栏【面板开发】,点击面板开发后,可看到“屏”下面的子菜单【应用面板】,如下图所示:
   12.png
【应用面板】页面,首页展示用户已设计的面板。
  我们点击右上角的创建面板,进入如下图所示的页面:
      3.PNG
  这里需要输入面板的名称、套餐、型号。名称可以按需自行定义,套餐和型号请按照中控屏设备实际情况选择。
  创建完成后,该面板会在【应用面板】列表中展示,如下图所示,列表会显示该面板的名称、套餐、型号,同时也会显示该面板的预览图,由于我们是刚刚创建,所以预览图是默认的占位图,无实际意义。
   4.PNG

点击该面板的预览图,即可进入面板设计页面设计面板。
      5.PNG
进入到面板设计页面,该页面大致分几块内容:
中间是面板设计主界面,就像画家面前的画布,可以在这里进行屏面板的设计,所见即所得。
左一是页面和图层,中控屏是支持多屏,即多个不同的用户界面。每一屏在这里体现为每一页面。
左二是通用组件库,我们看到有布局、基础元素组件、控制类组件、展示类组件。
    6.PNG
所有的组件可以拖拽式地置入面板设计主界面。
右一是面板中组件的基本信息,样式和事件配置。和面板设计主界面中的组件联动,鼠标点击某个组件,则右一展示对应组件的基本信息、样式和事件。
7.PNG
右二是面板对齐和锁定功能。
顶部中间是面板相关操作配置、面板图片及字体配置。
其中图片管理,可以上传面板需要用到的图片。字体管理,设置面板组件要用到的字体信息。需要注意的是,图片管理、字体管理虽然是在面板中上传的,实际可以用于其它面板,所有面板共用。
8.PNG
9.PNG
设计面板这一步按照上述界面的内容,在页面中进行操作和配置即可。具体组件的样式配置、字体都是所见即所得。
面板设计完成后,点击面板设计页右上角的【保存】按钮,系统会将开发者设计的内容保存到云服务器,同时会在后台生成面板的C语言源代码。当前仅支持生成基于lvgl的C语言代码。
保存面板后,开发者点击面板设计页右上角【下载】按钮,即可下载到该面板的C语言源代码压缩包。代码目录结构如下所示:
    10.PNG
UI代码架构完全参考SquareLine Studio工具生成,了解lvgl技术的开发者比较容易理解,这里不再赘述。

回复

使用道具 举报

xktx09 | 2024-6-20 12:10:52 | 显示全部楼层
大佬牛逼
回复

使用道具 举报

WT_0213 | 2024-6-20 14:08:23 | 显示全部楼层
低代码就很棒
回复 支持 反对

使用道具 举报

1084504793 | 2024-6-20 14:15:36 | 显示全部楼层
回复

使用道具 举报

hdydy | 2024-6-20 23:38:48 | 显示全部楼层
厉害
回复

使用道具 举报

流水源 | 2024-6-21 09:23:21 | 显示全部楼层
赞一个
回复

使用道具 举报

jkernet | 2024-6-21 20:55:41 | 显示全部楼层
这个可以
回复

使用道具 举报

xktx09 | 2024-6-23 12:10:53 | 显示全部楼层
跟着大佬学习
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则