页面布局及各个功能区块描述:


designer界面

designer界面主要分为6个部分:
分别是顶部菜单栏、左侧控件栏、中部功能栏、中下部的操作栏、右侧场景栏,以及右下角的属性栏。
顶部的菜单栏,左侧的文件、编译、布局、帮助及ESPRESSIF,各有一个下拉菜单。

顶部菜单栏

顶部菜单栏有着文件、编辑、布局、帮助、ESPRESSIF、发布、分享共七个功能控件。

文件下拉菜单如下,有着保存并复制、新建及删除选中场景、导入导出项目、上传自定义代码、资源、变量、清理编译缓存以及版本等选项。
保存:保存当前项目进行的修改
新建场景:在项目中添加一个新的页面,和右侧场景栏中的新建场景作用相同
删除选中场景:删除当前选择的场景(screen_main无法删除)
导出项目:将当前保存的项目代码打包成zip文件并下载
导入项目:
上传自定义代码:从本地选择特定文件后上传到项目中
资源:可从本地选择.png、.jpg、.c及.h文件添加到项目中
变量:可自定义变量名、类型及初始值,并将自定义变量参与到控件的互动逻辑中
点击弹出变量弹框,点击左下角新增一行后。分别输入变量名,初始值,变量稍多的情况可添加备注方便区分;然后选择类型为string或者number,string用来存储字符型数据,
number用来存储数字型变量。点击Save,将变量保存并转化为不可编辑状态;

清理编译缓存:可清理当前项目制作时产生的缓存文件,能够有效缓解打开积木页面时发生卡顿的情况
版本:可以创建版本号并将当前进度保存到该版本中,并能够在之后以后的开发过程中对之前保存的版本代码进行下载访问。

编译下拉选单

编译下拉选单如下,有着编译(调试固件)、编译(在线预览)、预览、刷新、下载源码、开发板运行、下载bin、下载编译日志共八种选项;

编译:对当前项目进行编译操作,查看是否有逻辑上的错误;
若没有出错,则会出现如下提示:“编译成功!!!”及“Done!!!”都出现,此时证明项目代码没有错误,可运行;

编译(在线预览):对当前项目进行编译操作,并可通过下方的“预览”选项在线预览编译结果,如下图所示:

刷新:可刷新当前界面;
下载源码:将当前保存的项目源码打包成source.zip文件并下载;
开发板运行:需绑定设备;
下载bin:可生成一个包含bootloader.bin、partition-table.bin、qmsd-demo.bin、readme.txt四个文件的bin.zip压缩包,
可以将三个.bin文件利用flash_download_tool_3.9.2烧录工具,烧录到开发板上。
下载编译日志:可将编译生成的log文件下载下来,便于检测问题。

布局下拉选单

布局下拉选单如下,有设计器、混合、积木三个选项。


设计器:访问blockly界面;
Blockly:将各种函数及功能实现封装好以进行可视化编程的一款工具,可以显著降低编程的难度,方便不同部门之间的沟通,缩短产品开发周期。

混合:让designer界面的操作框和积木化编程界面同框显示;

帮助下拉选单

帮助下拉选单如下,有文档中心、入门指南、视频案例、关于四种选项。

文档中心:可跳转至8ms GUI开发平台简介页面;
入门指南:可跳转至8ms GUI开发平台简介页面;
视频案例:可跳转至8ms GUI开发平台简介页面;
关于:可跳转至8ms GUI开发平台简介页面;

ESPRESSIF烧录

ESPRESSIF下拉选单有烧录和调试两个选项;
烧录:点击烧录,选择波特率并连接设备,在弹窗中选择设备连接的com口。连接成功后显示如下:

调试:点击调试,可在屏幕下方调出调试用的输入框;请注意,调试过程中无法添加控件

发布,分享

右侧三个功能按键:
发布:可将项目发布到8ms平台,以供大家进行技术交流;点击发布后,会弹出发布并公开到8ms平台的选框,您可以在此添加项目描述,
并修改项目的公开权限。完成修改后,点击右下角确定键。

分享:可将当前项目以可见模式生成网址,并复制分享。

复制链接后在新窗口打开,左侧的控件栏会消失,项目仅以可见模式呈现。

控件栏

左侧控件栏有着五大种分类,分别是页面布局简单显示、动态显示、人机交互、功能控件;各控件的具体功能将在之后的控件文档章节进行详细介绍。


页面布局部分,有页签切换、滑动面板、页面、容器四种控件。


简单显示部分,有文本、图片、圆环、文本域、列表,共五种控件。


动态显示部分,有滑块、复选框、开关、进度条、下拉框、对话框、预加载提示、选择器、显示面板,共九种控件。


人机交互部分,有按钮、列表、折现,共三种控件。


功能控件部分,有日历、仪表盘、LED、时钟控件,共四种控件。


功能栏有调整大小、保存、上一步、下一步、对齐方式、编译、下载bin、编辑,共九种按键。


调整大小的功能控件可以调整操作栏的区域大小;100%后继续放大,则会部分显示画布区域。

保存:将当前的项目进度保存,方便后续进行下载编译等工作。

上一步:将当前操作还原到上一步。

下一步:将当前操作还原到下一步。

对齐方式:选中控件后,可以修改该控件的对齐方式:左对齐、水平居中对齐、右对齐、上对齐、垂直居中对齐、下对齐。

编译:编译当前工程,直到当前编译日志显示进度达到100%,出现编译成功及done!!字样,则说明编译完成。


下载bin:与顶部菜单栏控件同功能,可生成一个包含bootloader.bin、partition-table.bin、qmsd-demo.bin、readme.txt四个文件的bin.zip压缩包。
可以将三个.bin文件利用flash_download_tool_3.9.2烧录工具,烧录到开发板上。

编辑:可在弹框中对项目名称、闪存容量、描述、标签等您想要进行修改的信息进行修改。


场景栏

右侧场景栏可显示当前工程所包含的界面及控件名称。

新建场景:能够在当前工程中添加一个新的界面。输入场景名称后,点击确认,即可完成新界面的创建。

新创建的界面则会出现到右侧场景栏内。

属性栏:可在此修改场景及控件的属性。场景有着场景类型、创建方式、接收事件、背景颜色等属性,而控件的属性除了基础的位置及大小外各不相同。

页面、控件的添加删除:页面的添加在上述场景栏的新建场景中提过,而控件的添加,则是在左侧的控件栏,点击想要添加到当前界面的控件即可。

页面与控件的删除操作类似,右击控件或界面,在弹框中选择删除。

样式栏: 3.0在控件属性栏旁边新增了一个样式栏;点击添加样式,弹窗中有分类、区域、状态三个内容,分类下拉菜单可以选择想要添加样式的位置,比如背景、内外边框等;
区域下拉选单可选择样式显示的区域,比如主要区域、滚动条、滑动手柄等;状态下拉菜单可以选择该样式应在哪种状态下显示,比如通常状态、选中状态、聚焦状态、按下状态等;
并且,分类处可选择多种修改部分。如图所示,是对一个label控件通常状态下的外边框进行修改的例子:

点击提交后,可在下方生成更为详细的属性修改栏,上部用/分隔的是刚刚选中的样式属性,并可在下部修改对应的属性值;

行为栏: 3.0在控件属性栏旁边添加了行为栏;行为栏可以点击添加行为,在交互及行为下拉菜单中选择交互方式及交互目的:

确认后在下拉菜单中选择触发方式,数值操作后的栏位添加需要修改的变量,下方的输入框添加需要对变量进行的操作。
如图所示,图中label的行为是:点击后对数值变量num01进行+1操作;

若希望达到数值修改然后合并到label中,则需在交互下拉菜单中选择数值变化,行为下拉菜单中选择字符赋值;
确定后在格式绑定栏中填写label需要修改的内容,比如“此时数值为%d”,下方的栏位选择需要赋值的变量名;

blockly部分

Blockly的添加和删除:
以一段点击进度条跳转到其他屏幕的简单逻辑为例:

从右侧的UI控件栏找到按钮事件拖动到blockly操作栏,然后将显示界面功能拖动并嵌合到点击时的凹槽内,即可完成点击进度条跳转到其他界面的逻辑。
若想要删除某个blockly控件,则右击该控件,在弹窗中选择删除块。