前端零代码5：新能源汽车HMI中控屏

合集 - UIOTOS(18)

1.UIOTOS前端零代码 第5节：（实践）嵌套+连线0开发扩展组件，实现切换开关控制扇叶转动2024-04-092.UIOTOS零代码开发一个仿Window简单计算器2024-04-103.UIOTOS前端零代码 第7节：（实践）利用嵌套+收发器组件，零代码实现简单计算器功能2024-04-104.回顾发展史，WEB组态终于可以搭建业务系统了！2024-04-225.2024了还在用Qt、PyQt做图形界面？致敬Qt Designer，这款前端无代码拖拽工具值得一用！2024-04-226.NodeRed节点编辑用于边缘计算和规则引擎，能做带UI界面和业务逻辑的上位机或前端应用吗？2024-04-227.刚交付了智慧园区统一管理平台，前端零代码+后端零代码+物联网平台，完美搭配！（一）2024-04-228.最新零代码，套娃一样开发IoT应用！2024-08-299.一觉醒来，Qt、C#界面开发的天塌了？2024-09-1010.NodeRed+UIOTOS绝配！流程连线搭建上位机 一2024-09-2311.大萧条，大裁员，一款技术人员的创收利器！2024-09-23

12.前端零代码5：新能源汽车HMI中控屏2024-09-23

13.后台管理前端设计器，个人商用1999！源码学习2024-09-2414.UIOTOS前端组态跟中控等SCADA、HMI有什么区别？2024-09-2915.前端零代码-技术原理：对话框嵌套和自定义按钮| uiotos致敬amis、appsmith、codewave、goview、dataroom、iotrouter、FUXA、乐吾乐、dooring等2024-10-0216.前端零代码-原理：与嵌套页面内的组件通信| uiotos致敬amis、appsmith、codewave、goview、dataroom、iotrouter、FUXA、乐吾乐、dooring等2024-10-0217.前端无代码-表单页面的查看和编辑| uiotos致敬amis、appsmith、codewave、goview、dataroom、iotrouter、FUXA、乐吾乐、dooring等2024-10-0218.GUI图形界面 无代码开发 原理 2 - 属性继承的重写| uiotos致敬amis、appsmith、codewave、goview、dataroom、iotrouter、FUXA、乐吾乐、dooring等2024-10-10

收起

UIOTOS前端零代码，原型即应用，由界面无限嵌套技术实现。本篇介绍中控屏示例。

效果

如下所示，典型的新能源汽车中控屏交互界面，参考原型1:1实现。若再加上接口组件，对接硬件，即可实现完整功能。

 

步骤1：主界面

以通知中心为例，通过嵌套、继承和重写，从公共页面搭建各信息面板。

 

底层公共消息条页面

 

嵌套后，继承重写数据

 

对话框嵌套成为弹窗面板

 

应用通知面板类似

步骤2：控制界面

主界面通过页签，嵌套多个菜单页面，以车机控制为例，如下所示，通过页签、滚动页、嵌套，实现界面的层层分解：

 

 

其他：略

小结

UIOTOS支持页面和页面之间，任意多层无限套娃，拆解成多个页面部件，单独开发设计。作为核心特色，是零代码开发前端界面的关键所在。