8ms 可视化开发平台操作手册-cnV2.2 0

文档编号版本号密级
V2.2.0 无
文档名称 8ms 可视化开发平台操作手册日期 2021-8-3
·· 1
深圳市启明云端科技有限公司版本 V2.2.0
1 概述 ..................................................................................................................................... 4
1.1 编写目的.................................................................................................................... 4
1.2 术语和缩略语............................................................................................................. 4
1.2.1 术语 ................................................................................................................ 4
1.2.2 缩略语............................................................................................................. 4
1.3 参考文档.................................................................................................................... 4
2 软件概述 6
2.1 6
2.2 6
2.3 7
3 功能说明 7
3.1 8
3.2 工作区说明
3.3 工具栏
3.3.1 文件
保存
新建场景
删除选中场景
3.3.2 编辑
回退
重做
3.3.3 编译 ...............................................................................................................17
编译 ......................................................................................................................17
编译（在线预览）& 预览 .....................................................................................18
刷新 ......................................................................................................................18
下载源码 ...............................................................................................................18
下载 bin................................................................................................................19
3.3.4 布局 ...............................................................................................................19
设计器...................................................................................................................19
混合 ......................................................................................................................20
积木 ......................................................................................................................20
3.3.5 帮助 ...............................................................................................................21
4 控件（widgets）使用 ..........................................................................................................19
深圳市启明云端科技有限公司版权所有©2020 2
4.1 页面布局...................................................................................................................22
4.1.1 页签切换 ........................................................................................................22
4.1.2 滑动面板 ........................................................................................................22
4.1.3 页面 .............................................................................................................23
4.2 简单显示...................................................................................................................24
4.2.1 文本 ...............................................................................................................24
4.2.2 图片 ...............................................................................................................25
4.2.3 圆环 ...............................................................................................................25
4.2.4 文本域............................................................................................................26
4.2.5 图表................................................................................................................26
4.3 动态显示....................................................................................................................27
4.3.1 滑块..............................................................................................................................27
4.3.2 复选框..........................................................................................................................28
4.3.3 开关..............................................................................................................................28
4.3.4 进度条 .........................................................................................................................29
4.3.5 下拉框..........................................................................................................................29
4.3.6 对话框 .........................................................................................................................30
4.3.7 预加载提示..................................................................................................................31
4.3.8 选择器..........................................................................................................................31
4.4 人机交互...................................................................................................................33
4.4.1 按钮 ...............................................................................................................33
4.4.2 列表 ...............................................................................................................34
4.4.3 折线 ...............................................................................................................36
4.5 功能控件...................................................................................................................36
4.5.1 日历 ...............................................................................................................36
4.5.2 仪表盘............................................................................................................37
4.5.3 LED.................................................................................................................38
4.5.4 时钟控件........................................................................................................38
5 烧录 ...................................................................................................................................40
5.1 ESP 32 烧录 ...................................................................................................40
5.2 Sigmastar SSD 201 烧录................................................................................42
6 实例 ...................................................................................................................................46
6.1 温控器......... .....................................................................................................47
6.2 磁能热水器 ........................................................................................................49
6.3 天气预报...........................................................................................................51
1 概述
1.1
编写本软件操作手册的目的是充分叙述本软件所能实现的功能及运行环境，

以便使用者了解本软件的使用范围和使用方法，并为软件的维护和更新提供必要
的信息。
1.2
1.3
表 1 参考文档清单
名称编号作者发布日期备注
8ms 图形化开发平台使用手册林富良 2020- 07-13
2 软件概述
2.1
8ms 可视化开发平台是一个款基于 web 的嵌入式或单片机终端的 UI 及功能程序可

视化设计的系统，能够提高外设应用程序以及 UI 界面的通用性。通过鼠标或者触摸屏
触控拖拽的方式实现界面编辑以及逻辑代码编写，可以低代码甚至零代码的方式实现应
用程序及其 UI 界面的设计开发。
目前支持的硬件为 ESP32、Sigmastar SSD201 以及云知声一些相关的（具体支持哪

些硬件，可以通过官网联系客服确认硬件信息），采用的 GUI 库为 littlevGL7.11.0代
码，逻辑部分使用Google 的Blockly 。
2.2
平台主要由如表 1 所示三部分组成。
1 GUI 编辑器基于Web 的控件编辑

2 代码编辑器基于 Blockly 的代码逻辑编辑
3 后台基于 Java 模板引擎的工程生成
GUI 编辑器
提供可视化的页面编辑功能，生成项目描述文件，包含页面（传统页面、Tab 子页
面、窗口页面），控件（暂支持 20 种控件），保存格式为 JSON 格式。
Blockly 逻辑编辑
GUI 中的控件事件和页面支持代码逻辑，在 GUI 界面编辑代码可以进入 Blockly 入

口，可以新增代码块，或者选择已有代码块。代码块中可以控制所有 GUI 中的控件，修
改控件名可在基本属性中修改。编辑好后点击保存即可保存到后台。
后台工程生成、编译
通过工程模板，将 GUI 项目JSON 描述文件生成 C 工程文件，并进行编译，提供二
进制文件下载。
2.3
访问网站：http://8ms.xyz/login。
3 功能说明
3.1
1. 访问网站 “http://8ms.xyz/login”，进入如图 2 所示。
说明：
访问本地址，首先确认是否有账号，如果没有，则请注册账号。
a) 单击“没有账号？去注册”。
b) 自定义用户名（只能数字字母，至少 5 位）、密码（密码不能为空，至少 6 位）、用于找回密码的邮箱、
公司及手机号。
c) 单击“注册”。
2. 输入已注册的 “用户名”、“密码”，单击“登录”，进入如图 3 所示。
说明：
现有平台支持的硬件芯片有乐鑫的 ESP32 、Sigmastar、云知声、全志及 RK 。
3. 单击右上角进入工作台，进入如图 4 所示。
4. 单击“新建项目”，进入如图 5 所示。
a) 选择芯片项目。
b) 定义“项目名称”。
c) 选择“硬件”，硬件型号是根据项目类型匹配的。
d) 选择“主题”。
e) 描述项目内容。
f) 定义标签。
h ) 单击“确定”，项目创建成功。
如果需要编辑项目信息，则选择需要编辑的项目，单击项目右下角的“…”，单击“编辑
项目信息”即可。
如果需要添加权限成员，则选择需要编辑的项目，单击项目右下角的“…”，单击“权
限管理”即可。
如果需要删除项目，则选择需要删除的项目，单击项目右下角的“…”，单击“删除项目
”即可。
如果需要克隆项目，则选择需要克隆的项目，直接点击克隆或者单击项目右下角的
“…”，单击“克隆”即可。
3.2
每个项目都包括八大工作区，如图
包括对文件、编辑、编译、布局文件
与帮助。
保存
保存并复制
新建场景
删除选中场景
导出项目
1 导入项目
上传自定义代码
资源
工具栏
版本
编辑
回退
重做
编译
编译
编译（在线预览）
预览
刷新
下载源码
开发板运行
下载bin
布局
设计器
混合
积木
布局
文档中心
入门指南
视频案例
关于
2 对当前工程实现保存、回退、重做对齐包括：
快捷按钮、格式刷、对齐、编译、下载和对左对齐
控制编辑区进行缩放。水平居中对齐
右对齐
上对齐
垂直居中对齐
下对齐
3 默认是 main_screen,根据项目新建场景的操作请参见 “新建场景”
场景情况还可以新建场景。。
4 默认的主题有深色模式与浅色模
主题式，根据项目情况还可以新建主
题。
5 包括四类：放置鼠标在控件上，显示控件的名称

控件栏；单击控件，即在当前场景创建该控
页面布局
件。详细操作请参见 “”。
简单显示
动态显示
人机交互
功能控件
6 画布尺寸对应屏幕尺寸，可以通图片控件不支持设置大小，控件大小
控件编辑区过拖动控件调整位置，以及拖动与图片大小一致。
边框调整大小。
7 选中控件或者页面右侧会有对应部分控件支持事件逻辑
控件属性区控件或者场景的基础属性。
8 提供发布、分享和评论功能。
项目发布分享区
说明：每个控件有不同的属性，以“label”控件为例展示控件的基本属性，下图所示。
说明：id 为该控件的唯一标识，在整个工程属于唯一。其他的属性可以调整控件的实际效果。
3.3
保存
保存设计的项目，既可以通过工具栏“文件 ”的“保存”，也可以通过快捷按
钮实现。当设计项目后没有执行编译，单击“保存”时，会首先执行一次项目
编译。
保存并复制
暂未开放。
新建场景
新建场景既可以通过工具栏中“文件”的“新建场景”实现，也可以通过“场
景”区域的“新建场景 ”实现。实现操作为，单击场景区域的“新建场景 ”，在如
图 8 所示输入场景名称，单击“确定 ”。
场景创建后在右侧属性栏设置场景类型及背景颜色，属性阐述如下。
1、场景类型：
场景。
对话框。
标签页。
容器。
2、创建方式：
静态建设
动态建设
3、背景颜色：
删除选中场景
删除场景，只允许删除自己创建的场景，不可以删除系统的场景。选择自建

的场景，单击“ 删除选中场景”，在如图 9所示，单击“确定”即可删除。
导出项目 & 导入项目
1、先将编译好的工程项目导出（导出的压缩包不可修改，否则会导致无法导入）。
2、新建一个工程项目，点击导入项目，选择导出的压缩包即可。
上传自定义代码
1、先创建好像加入的文件，如下图所示。
2、点击上传自定义代码，选择相应的文件（添加的文件可在“资源”查看）。
3、添加头文件和函数调用，如下图所示。
说明：sigmastar上传的自定义代码需存于custom目录中（例：#include “custom/test.h”）。
版本（此功能后续只对企业版开放）
1、点击版本跳出版本创建图框，如下图所示。
2、给工程版本命名后点击创建版本即可（可对创建的版本工程删除和下载导入）。
回退
暂未开放。
重做
暂未开放。
编译
编译项目既可通过工具栏“编译”实现，也可以通过快捷按钮实现，编译

时的初始状态如图 10 所示。
平台会将设计工程在云端编译，编译生成对应的下载固件，在浏览器端显示

编辑日志。编辑日志可以查看固件烧录地址或者编辑错误原因，如图11所示。
平台会将设计的项目，编译应生成对的下载固件，显示编辑日志。
编译（在线预览）& 预览
点击编译（在线预览），编译成功后即可预览
刷新
点击刷新。
下载源码
下载源码既可以通过工具栏的 “编译”之 “下载源码 ”实现，也可以通过快

捷按钮实现，单击 “编译 \下载源码”，进入如所示，定义源码名称并选择保存
路径（编译错误的点击下载源码会直接下载编译错误的源码）。
下载 bin
下载 bin 通过工具栏的“编译”之“下载 bin”实现，进入如图 14 所示，定

义 bin 名称并选择保存路径。
设计器
新建项目，默认是处于设计器环境，设计器环境是包含七大区域，请参见“3.2

工作区说明”。
混合
混合是设计器与积木共享同一个工作界面，实现同步设计，如图 15 所示。

15
积木
blockly 操作界面，实现编辑控件逻辑。
说明：
控件控制在 UI 控件分类下，可用的控件可以在 widgets 中找到。
具体的blockly 操作可以详看对应 Blockly 使用手册。
点击任意选项可跳转到8ms文档。
4.1
切换页签是通过选择页签切换场景的控件。创建页签切换之前，需要创建场

景，为添加页签对应的场景做准备，页签和场景是一一对应的，有多少个页签就
有多少个场景。创建页签切换时，从左侧控件栏点击页签切换控件生成控件，然
后单击页签下拉，添加页签和场景 ID 。
1.创建滑动面板
注：
一定要给滑动面板添加场景。
从左侧控件栏点击滑动面板控件生成控件，创建如图17 所示的滑动面板图。
单击控件属性区域下拉，接着创建 3 个场景，分别作为滑动面板的左中右场
景添加到滑动面板的内容里。
页面，可添加容器，内部可滑动。
1、创建页面，从左侧控件栏点击页面控件生成控件，就创建好了一个默认的

页面。
2、设置属性效果
创建好对应的场景，设置页面属性和添加容器。
4.2
文本主要用于显示开发者需要表达的内容。
1. 创建文本
从左侧控件栏点击文本控件生成控件，就创建好了一个默认的文本。如图 18
所示。
2. 设置文本
单击控件属性区域属性的内容下拉按钮，可以设置文本的内容及外观。根据
工程需要设置广本，其设置后的实际效果如图19所示。
3. 设置行为
在积木界面中，可使用UI控件->基础设置控件可点击积木使文本控件可点击，在
事件流程->UI中选择添加的事件即可。
1. 创建&添加图片
注意：
a.选取的图片像素不大于当前屏幕。
b .建议设置图片的尺寸和实际大小一致，因为烧录到硬件里的图片尺寸和实际大小一致。
c.图片可在资源库进行增删选择操作。
从左侧控件栏点击图片控件生成控件，然后单击右侧内容->文件，添加图片即可。
2.设置行为
可在属性内容中启用点击行为，进入积木界面在事件流程->UI中选择添加的事件即
可。
1.创建圆环
从控件栏点击圆环控件生成控件，即可创建如图 21 所示的圆环。
2.设置圆环
单击控件属性区域内容下拉，设置如图 22 所示圆环的开始和结束角度，以及

圆环的样式等。
我们登陆平台输入用户和密码的区域就是一个文本域。
1.创建文本域创建
从左侧控件栏点击文本域控件生成控件，即可创建好默认文本域。
2.设置文本域设置
控件属性区域填入初始文本、提示文本、设置文本的（密文/明文模式)、单

行 (模式/多行 )模式、单击行为、内容改变行为。单击行为和内容改变行为需要编
写代码块。
4.2.5 图表
1.创建列表
从控件栏点击列表控件生成控件，即可创建列表。
2. 设置列表
单击控件属性区域内容下拉，设置如下图所示列表的颜色大小,添加项和
行等。
3、预览效果:
说明：创建图表时，至少添加一项一行，不然会导致编译不过。
4.3
滑块类似于进度条加上一个旋钮，当拖动旋钮时，值会发生改变。
1. 创建滑块
从左侧控件栏点击滑块控件生成控件，就创建好了一个默认的滑块。如图 23 所
示为一个默认滑块。
2. 设置滑块
单击控件属性区域内容下拉，设置滑块文案相关的初始值和样式。
1. 创建复选框
从左侧控件栏点击复选框控件生成控件，即可创建一个如图 24 所示的复选框
。
2. 设置复选框
单击控件属性区域内容下拉，设置复选框文本相关属性。
开关用来打开或关闭事物。
1. 开关的创建
从左侧控件栏点击开关控件生成控件，即可创建一个如图 25 所示的开关。
2. 开关设置
单击控件属性区域内容下拉，设置开关的默认值和实际样式。
进度条主要由背景和指示组成。用来显示事物的进程，如：我们平时观看的

视频，下方就有进度条，用来显示视频的进程。
1. 创建进度条
从左侧控件栏点击进度条控件生成控件，即可创建一个如图 26 所示的进度
条。
2. 设置进度条
单击控件属性区域内容下拉，设置进度条的默认值和实际样式。
1.创建下拉框
从左侧控件栏点击下拉控件生成控件，创建如图 27 所示的下拉框。
2.设置下拉框
单击控件属性区域内容下拉添加选项，如图 28 所示为添加了选项的下拉框。
1.创建对话框
从左侧控件栏点击对话框控件生成控件，单击控件属性区域内容下拉，输入

“ 提示信息”，创建如图 29 所示的设置了按钮对话框。
2.设置对话框效果
单击控件属性区域内容下拉，设置对话框的文本样式及对话框显示效果。
3.设置对话框单击行为
通过代码块程序实现对话框单击行为。
1.创建预加载提示
从左侧控件栏点击预加载提示控件生成控件，即可创建一个默认的预加载提

示。
2.设置预加载提示实际效果
单击控件属性区域内容下拉，设置如图30所示预加载提示的相关样式。
1.创建选器建
从左侧控件栏点击选择器控件生成控件，在控件属性的内容设置选择器文本

信息 ,如图 31所示。
2.设置选择器基本属性
控件属性的设置选择器的初始值、可见行数、文本相关和单击行为，单击行
为通过编写代码块实现。
3.选中主体样式
单击控件属性区域选中主体样式，设置选择器选中时的实际效果，设置属性

如图 33 所示。
33
4.4
当按钮按下或释放，它的状态和样式会发生改变，相应的我们可以利用按钮

变换状态的时候触发一些事件，如按钮按下的时候，跳转场景。
1. 创建按钮
从左侧控件栏点击按钮控件生成控件，就创建好了一个默认的按钮。如图34
所示。
2. 设置按钮内容
注意：
添加的图片像素不大于当前屏幕。按钮设置了图片，文字就没用了。
单击控件属性区域内容下拉，可以修改按钮的内容和内容的实际样式，以及给
按钮添加图片。
3. 设置行为
设置行为需添加积木块的实现，点击积木界面->流程事件->UI即可,可直接使用已搭
建好的积木或者使用自定义积木。也可使用UI控件->按钮中的积木操作控件。
4. 状态样式设置
按钮处于不同状态，可以有不同的样式，通过单击右侧样式下拉，实现不同按
钮的状态设置相应的样式。
1. 创建列表
从左侧控件栏点击列表控件生成控件，单击控件属性区域内容下拉，添加一
个如图35所示的列表。
2.属性设置
可设置文字大小、颜色，背景颜色、不透明度等，根据需求添加行，每行可
添加文本和图片文件。
3. 单击事件
进入积木界面，在流程/事件->UI中添加列表框被点击事件实现，还可添
加UI控件->列表框中选择获取文本积木。
1.创建折线
注意：
添加的坐标需要两个及以上，且添加的坐标点要在屏幕里，否则看不到线。
从左侧控件栏点击折线控件生成控件，再给折线添加坐标点，如图36所示。
2.设置折线实际样式
单击控件属性区域内容下拉，设置线条的颜色和宽度。
1.创建日历
从控件栏点击日历控件生成控件，即可创建如图 37 所示默认的日历。
2.设置日历当前日期
单击控件属性区域内容下拉，设置年月日的值即可。
1.创建仪表盘
从左侧控件栏点击仪表盘控件生成控件，即可就创建一个如图38所示的仪表盘。
2.设置仪表盘
单击控件属性区域内容下拉，设置仪表盘的样式和值，设置后的参考样式如

图 39 所示。
1. 创建 LED
从左侧控件栏点击LED 控件生成控件，即可创建好一个如图 40 所示
LED 。
2.设置 LED
单击控件属性区域基本下拉，设置
1、创建时钟控件
从控件栏点击时钟控件即可在编辑区生成时钟控件。
2.设置时钟。
单击控件属性区域基本下拉，设置时钟控件性相对应的属性，如下图所示。
说明： 1、添加时钟背景图和时针、分针和秒针。
2、根据图片尺寸大小可适当的对图片进行偏移。
3、可设置时钟初始时间和运动方式 (平滑和间断)。
5 烧录
本文重点介绍基于系统开发实现的 ESP 32 、Sigmastar SSD201 的烧录方式。
5.1
烧录固件步骤：
1. 保存功能已完成的项目。
2. 编译项目。
下载固件，并按照编译地址烧录固件。
4. 解压下载的固件包 xxx.zip，其包含文件：
bootloader.bin 、partition-table.bin 、lvgl-demo.bin 和 readme.txt 。
4. 打开 esp_download_tool 烧录固件。
（说明：打开该工具时，需选择对应的芯片型号，c3的
bootloader.bin 烧录地址为0x00 ）
5.2
烧录固件步骤：
1. 保存功能已完成的项目。
2. 编译项目。
3. 单击 “下载 bin”，下载如所示左下角固件。
45 bin
打开固件所在文件夹，如图
46
打开固件保存路径，并复制固件 DEMO 到烧录工具安装目录下的 “ Tftp32”,
替换目标中的文件，如图 47 所示。
47
6. 打开 Xshell，并新建会话，如创建“test”会话，同时为新建会话命名“名称”、
选择“连接协议”、选择“主机地址”，如“192.168.1.1”及端口号“22”，如图48所
示。
48
49 所示，选择已新建会话，进入 Xshell。
49 Xshell
8. 输入命令“ls”，查询文件。
9. 输入命令 “rm -f demo”，删除之前开板已有的 demo。
10. 输入命令 “tftp -g -r demo 服务器地址（如：192.168.1.156）”，如图 50 所示，

开始烧录，状态显示为 100%表示烧录完成。
50
11. 输入命令 “chmod +x demo”、“./demo” ,确认是否烧录成功，成功的标志
如图 51 所示。
51
注：需将字体文件 8ms.ttf 放到开发板的/usr目录下，然后执行demo即可。
字体文件链接：http://res.8ms.xyz/8ms/8ms.ttf
6 实例
实例是推荐项目，可以直接克隆到“我的项目”里，实现再次编辑或者直接

编译，下载烧录到硬件里。本文展示的案例有：温控器、磁能热水器和天气预报。
6.1 温控器
52
这个实例看上去控件比较多，其实只有两类控件：分别为文本框、图片。
1、设置创建工程,硬件类型选择的是esp32_480*320。
设置背景：
53
从左侧控件栏点击图片控件生成控件，点击内容-> 文件，添加背景图片，将控件
位置设置为x = 0 ,y = 0。
注:是先创建的控件会垫底。
2、创建文本控件并文本内容
54
从左侧控件栏点击文本控件生成控件，单击控件属性区域内容下拉 ,设置文本

的实际效果。其他文本控件，重复步骤。
3、添加图片控件并添加图片
55
从左侧控件栏点击图片控件生成控件，单击控件属性区域内容下拉添加对应的图

片，并调整图片的位置和尺寸。其他图片控件，重复步骤即可。
4、效果展示
6.2
这个实例看上去控件比较多，其实只有三类控件：分别为文本框（红框里）、

按钮（紫框里）、图片（无框）。
1.设置当前屏幕的背景色为黑色。
2.创建图片控件并添加图片。
从左侧控件栏点击图片控件生成控件，单击控件属性区域内容下拉添加对应

的图片，并调整图片的位置和尺寸。其他图片控件，重复步骤即可。
说明：
建议图片的尺寸设置成和实际大小一致，因为烧录到硬件里的图片尺寸和实际大小一致。
创建文本控件并设置实际效果。
从左侧控件栏点击文本控件生成控件，单击控件属性区域内容下拉 ,设置文本
的实际效果。其他文本控件，重复步骤。
4.创建按钮控件并设置实际效果。
从左侧控件栏拖拽按钮控件到编辑区域，单击控件属性区域内容下拉添加图

片控件的“正常图片”和“按下图片”。其他按钮控件，重复步骤。
5.烧录到硬件里的效果展示。
6.3
新建项目，命名为：“天气预报”，单击确定后进入工作区。
2.拖放文本框在控件编辑区域，根据项目，创建了命名区，数据区和刷新按钮。具体可按需求修改。
设置完成如图 67 所示。
67
3.切换到积木编程环节，实现积木编程。
d) 单击“通信/IOT /HTTP”，选择“声明http 响应回调 ”。填入“http_cb”
e) 单击“UI控件->文本框”，选择“以特定格式设置label”。
f) 设置label：单击左上角添加“函数输入”。
g) 单击“基本功能/编解码”。选择“从json中获取字符串数据”
h) 单击“流程/事件-通信/IOT”,选择“http 响应回调”。
i) 单击“基本功能/编解码”，选择“获取 json 对象 ”，填入“datas”文本框。
j) 单击“基本功能/编解码”，选择“按序号获取json对象”，填入“0”。
k) 单击“基本功能/编解码”，选择“获取json对象”，填入“date”。
e->k 步骤执行多两次。
l)
m) 单击“流程/事件-UI”，选择“当按钮发生”。
n) 单击“通信/IOT /HTTP”，选择“设置http 响应回调 ”，填入“http_cb”。
o) 单击 “通信/IOT /HTTP”，选择“请求http网页”。
p) 设置 http 网页地址为：api.8ms.xyz，设置端口号为：80；设置路径为/weather/ 。
4.单击“保存”& “编译”。
5.单击“下载bin”。
6.烧录。
a) 选择乐鑫官方 Download Tool。
b) 选择相应的bin 文件及地址
c) 设置相应的参数：“COM 口”、“BAUD 率”。
d) 单击“ERASE”。
e) 单击“START”。
配置完成的界面如下图所示
效果展示：

8ms 可视化开发平台操作手册-cnV2.2 0

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

8ms 可视化开发平台操作手册-cnV2.2 0

Uploaded by

Copyright:

Available Formats

文 档 编 号 版本号 密级

文档名称 8ms 可视化开发平台操作手册 日期 2021-8-3

编写 本软件操作 手册的目的是 充分叙述本 软件所能实 现的功能及运 行环境，

8ms 图 形 化开发平台使用手册 林富良 2020- 07-13

8ms 可视化开发平台是一个款基于 web 的嵌入式或单片机终端的 UI 及功能程序可

目前支持的硬件为 ESP32、Sigmastar SSD201 以及云知声一些相关的（具体支持哪

1 GUI 编辑器 基于Web 的控件编辑

GUI 中的控件事件和页面支持代码逻辑，在 GUI 界面编辑代码可以进入 Blockly 入

1. 访问网站 “http://8ms.xyz/login”，进入如图 2 所示。

b) 自定义用户名（只能数字字母，至少 5 位）、密码（密码不能为空，至少 6 位）、用于找回密码的邮箱、

2. 输入已注册的 “用户名”、“密码”，单击“登录”，进入如图 3 所示。

现有平台支持的硬件芯片有乐鑫的 ESP32 、Sigmastar、云知声、全志及 RK 。

5 包括四类： 放置鼠标在控件上， 显示控件的名称

场 景 创 建后在右 侧属性栏设置场景类型及背景颜 色，属性阐述如下。

删除 场景， 只允 许删除自己创 建的场景， 不可以删除 系统的场景。 选择自建

导出项目 & 导入项目

编 译项目既 可通过工 具栏“编 译”实现 ， 也可以 通过快捷 按钮 实现 ， 编译

平台 会将设计工 程在云端编译 ， 编译生成 对应的下载 固件， 在浏览 器端显示

平 台 会 将设计的 项目， 编译应生成对的下载固件 ， 显示编辑日志。

下载 源码既可以 通过工具栏的 “编译”之 “下载源码 ”实现， 也可 以通过快

下载 bin 通过工具 栏的“编译”之“下载 bin”实现，进入如 图 14 所示，定

新建项目 ，默认是处于设计器 环境，设计器环 境是包含七大区域 ，请参见“3.2

混 合 是 设计器与 积木共享同一个工作界面， 实现 同步设计， 如图 15 所示。

blockly 操作界面，实现编 辑控件逻辑。

控件控制在 UI 控件分类下，可用的控件可以在 widgets 中找到。

具体的blockly 操作可以详看对应 Blockly 使用手册。

切换 页签是通过 选择页签切换 场景的控件 。创建页签 切换之前， 需 要创建场

从左侧控件栏点击 滑动面板控件生成控件， 创建如 图17 所示的 滑动面板图。

1、创建页面，从左侧控件栏 点击页面控件生成控件，就创建好 了一个默认的

单击控件属性 区域内容下拉， 设置如图 22 所示 圆环的开始和结束角度， 以及

我 们 登 陆平台输 入用户和密码的区域就是一个文 本域。

控件 属性区域填入 初始文本、 提示文本、设 置文本的（密文/明文模式)、单

滑 块 类 似于进度 条加上一个旋钮， 当拖动旋钮时 ， 值会发生改变。

进度 条主要由背 景和指示组成 。用来显示 事物的进程 ， 如： 我们平 时观看的

单 击 控 件属性区 域内容下拉， 设置进度条的默认 值和实际样式。

从左 侧控件栏点击对话框控件 生成 控件， 单击控件 属性区域内容 下拉， 输 入

从左 侧控件栏点击预加载提示 控件生成控件， 即可 创建一个默认 的预加载 提

从左 侧控件栏点击选择器控件 生成控件 ， 在控件属 性的内容设置 选择器文 本

单击 控件属性区 域选中主体样 式， 设置选 择器选中时 的实际效果， 设置属性

当按 钮按下或释 放， 它的状态 和样式会发 生改变， 相 应的我们可以 利用按钮

单击 控件属性区 域内容下拉， 设置仪表盘 的样式和值 ， 设置后的参 考样式如

本文重点介绍基于系统开发实现的 ESP 32 、Sigmastar SSD201 的烧录方式。

bootloader.bin 、partition-table.bin 、lvgl-demo.bin 和 readme.txt 。

10. 输入命令 “tftp -g -r demo 服务器地址（如：192.168.1.156）”，如图 50 所示，

注：需将字体文件 8ms.ttf 放到开发板的/usr目录下，然后执行demo即可。

实例 是推荐项目 ， 可以直接克 隆到“我的 项目”里， 实现再次编辑 或者直接

这个实例看上 去控件比较多， 其实只有两类控 件 ： 分别为文本框、图片。

从左侧控件栏点击文本控件生成控件，单 击控件属性区域内容下拉 ,设置文 本

从左 侧控件栏点击图片控件生成控件， 单击控件属 性区域内容下 拉添加对 应 的 图

这个实例看上 去控件比较多， 其实只有三类控 件 ： 分别为文本框（红框里 ）、

从左 侧控件栏点击图片控件生成控件， 单击控件属 性区域内容下 拉添加对 应

从左 侧控件栏拖 拽按钮控件到 编辑区域， 单击控件属 性区域内容下 拉添加图

d) 单击“通信/IOT /HTTP”，选择“声明http 响 应 回 调 ”。填入“http_cb”

i) 单击“基本功能/编解码”，选择“获取 json 对 象 ”，填入“datas”文本框。

n) 单击“通信/IOT /HTTP”，选择“设置http 响 应 回 调 ”，填入“http_cb”。

o) 单击 “通信/IOT /HTTP”，选择“请 求http网页”。

You might also like

文档编号版本号密级

文档名称 8ms 可视化开发平台操作手册日期 2021-8-3

编写本软件操作手册的目的是充分叙述本软件所能实现的功能及运行环境，

8ms 图形化开发平台使用手册林富良 2020- 07-13

1 GUI 编辑器基于Web 的控件编辑

5 包括四类：放置鼠标在控件上，显示控件的名称

场景创建后在右侧属性栏设置场景类型及背景颜色，属性阐述如下。

删除场景，只允许删除自己创建的场景，不可以删除系统的场景。选择自建

编译项目既可通过工具栏“编译”实现，也可以通过快捷按钮实现，编译

平台会将设计工程在云端编译，编译生成对应的下载固件，在浏览器端显示

平台会将设计的项目，编译应生成对的下载固件，显示编辑日志。

下载源码既可以通过工具栏的 “编译”之 “下载源码 ”实现，也可以通过快

下载 bin 通过工具栏的“编译”之“下载 bin”实现，进入如图 14 所示，定

新建项目，默认是处于设计器环境，设计器环境是包含七大区域，请参见“3.2

混合是设计器与积木共享同一个工作界面，实现同步设计，如图 15 所示。

blockly 操作界面，实现编辑控件逻辑。

切换页签是通过选择页签切换场景的控件。创建页签切换之前，需要创建场

从左侧控件栏点击滑动面板控件生成控件，创建如图17 所示的滑动面板图。

1、创建页面，从左侧控件栏点击页面控件生成控件，就创建好了一个默认的

单击控件属性区域内容下拉，设置如图 22 所示圆环的开始和结束角度，以及

我们登陆平台输入用户和密码的区域就是一个文本域。

控件属性区域填入初始文本、提示文本、设置文本的（密文/明文模式)、单

滑块类似于进度条加上一个旋钮，当拖动旋钮时，值会发生改变。

进度条主要由背景和指示组成。用来显示事物的进程，如：我们平时观看的

单击控件属性区域内容下拉，设置进度条的默认值和实际样式。

从左侧控件栏点击对话框控件生成控件，单击控件属性区域内容下拉，输入

从左侧控件栏点击预加载提示控件生成控件，即可创建一个默认的预加载提

从左侧控件栏点击选择器控件生成控件，在控件属性的内容设置选择器文本

单击控件属性区域选中主体样式，设置选择器选中时的实际效果，设置属性

当按钮按下或释放，它的状态和样式会发生改变，相应的我们可以利用按钮

单击控件属性区域内容下拉，设置仪表盘的样式和值，设置后的参考样式如

实例是推荐项目，可以直接克隆到“我的项目”里，实现再次编辑或者直接

这个实例看上去控件比较多，其实只有两类控件：分别为文本框、图片。

从左侧控件栏点击文本控件生成控件，单击控件属性区域内容下拉 ,设置文本

从左侧控件栏点击图片控件生成控件，单击控件属性区域内容下拉添加对应的图

这个实例看上去控件比较多，其实只有三类控件：分别为文本框（红框里）、

从左侧控件栏点击图片控件生成控件，单击控件属性区域内容下拉添加对应

从左侧控件栏拖拽按钮控件到编辑区域，单击控件属性区域内容下拉添加图

d) 单击“通信/IOT /HTTP”，选择“声明http 响应回调 ”。填入“http_cb”

i) 单击“基本功能/编解码”，选择“获取 json 对象 ”，填入“datas”文本框。

n) 单击“通信/IOT /HTTP”，选择“设置http 响应回调 ”，填入“http_cb”。

o) 单击 “通信/IOT /HTTP”，选择“请求http网页”。