像车上的油箱表盘和速度表盘可以让油量和速度的数据在表盘上形象的展示出来一样,仪表控件可以反映用户主机上的数据变化,满足用户使用的仪器仪表界面。常用于速度、电压等参数的体现

1. 车速表:通过仪表和文本控件联动展示速度变化

2. 时钟:脚本实现时钟效果


适用范围:只适用分辨率1024*600

仪表控件工程案例下载链接:《仪表控件工程案例》


4.1 仪表控件属性

起始值

仪表量程最小的数值,最小为“0”

终止值

仪表量程最大的数值,最大为“360”,也是指向0°

初始值

指针一开始指向的数值,当初始值设置为“90”时,如下所示

显示数值

表盘上的刻度值。可选“是”或者“否”,当且仅当【表盘类型】为“自绘表盘”时该选项才生效。如下所示

字库

可以选择基本字库,也可选择自定义字库

字符集

表盘刻度数值所使用的字符集,目前仅可使用ASCII

字体大小

设置表盘的刻度值大小,如设置为6*12,如下所示

数值颜色

设置表盘的刻度值颜色,如设置为蓝色,如下所示

表盘类型

分为“自绘表盘”、“背景图片”、“透明”,如下所示

自绘表盘:默认表盘类型是“自绘表盘”,可显示刻度值

背景图片:当表盘类型“背景图片”时,可插入表盘图片

透明:只有指针,没有表盘

起始角

指针初始指向角度,如设置起始角为180°

终止角

指针表盘最终指向角度,如设置终止角为0°(360°)

注:不要将起始值与起始角度、终止值与终止角度搞混。起始值与终止值表示的是该仪表的最小值与最大值,即表盘上的刻度的起始;起始角度与终止角度表示的是仪表的表盘是从哪个角度画到哪个角度,与表盘的刻度无关。

旋转方向

分为“顺时针”和“逆时针“

顺时针:指针沿顺时针的方向走

逆时针:指针沿逆时针的方向走

刻度(自绘表盘)

默认表盘类型是“自绘表盘”,可显示刻度值

显示背景色

设置表盘的背景颜色。可选“是”或者“否”,如下所示

背景颜色

为表盘设置纯色背景。当“显示背景色”选择“是”时支持该项参数设置

显示主线

主线是仪表最外围的那个圆圈,选择“是”或者“否”

主线颜色

设置主线的颜色,如设置为红色,如下所示

主线宽度

设置主线的宽度,如设置为“5”

刻度颜色

即刻度的颜色,如下所示

刻度

设置刻度的个数,默认为4,起始位置的刻度不计入。

刻度宽度

设置刻度的宽度,默认为2

显示子刻度

选择“是”或者“否”

子刻度

设置子刻度个数,默认为9个刻度

子刻度宽度

设置刻度的单一颜色,默认为红色

子刻度颜色

设置刻度的宽度,默认为2

表针类型

可以对表针的类型进行设置,分为“直线”、“三角形”、“四边形”。默认为“三角形”,如下所示

指针颜色

指针的颜色。默认为绿色

中心颜色

指针中心的颜色。默认为紫色

4.2 车速表(仪表控件应用)

画面背景配置

在【车速表】画面的“背景图片”导入相应的美工图片。在该画面中添加仪表控件、文本控件、按钮控件,如下所示

属性配置

1.仪表控件属性

仪表控件ID为2,设置【表盘类型】“透明”、【初始角度】为“150”、【终止角度】为“31”、【指针类型】为“四边形”等,配置如下所示

2.文本控件属性

文本控件ID为4,设置【输入方式】“用户手机输入”等,配置如下所示

3.按钮控件属性

按钮控件ID为3,设置【触控用途】为“开关描述”,等,配置如下所示

lua脚本实现速度变化

在工程文件中找到脚本文件output->FontAndLib->31_0x1F.lua,代码如下所示。


function on_init()
	--numvar = 0
	volume = 0x20
	dataRecordId = 0
	meterNum = 0
	meterBackNum = 0
	sTimerNum = 0
	mTimerNum = 0
	hTimerNum = 0
	set_text(0, 4, "0")
	meterPlayerFlag = 0
	timerPlayerFlag = 1

	--秒针
	sTimerClockInitCmd = {0xAA, 0xB1, 0x10, 0x00, 0x02, 0x00, 0x02, 0x00, 0x00, 0x00, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	sTimerClockCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x02, 0x00, 0x02, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}

	--分针
	mTimerClockInitCmd = {0xAA, 0xB1, 0x10, 0x00, 0x02, 0x00, 0x03, 0x00, 0x00, 0x00, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	mTimerClockCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x02, 0x00, 0x03, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	
	--时针
	hTimerClockInitCmd = {0xAA, 0xB1, 0x10, 0x00, 0x02, 0x00, 0x04, 0x00, 0x00, 0x00, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	hTimerClockCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x02, 0x00, 0x04, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	
	
	
	--顺时针驱动仪表指令
	--meterClockwiseCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x05, 0x00, 0x02, 0x20, 0xCC, 0x33, 0xC3, 0x3C}
	meterClockwiseCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x00, 0x00, 0x02, 0x17, 0xCC, 0x33, 0xC3, 0x3C}
	--逆时针驱动仪表指令
	--meterAnticlockwiseCmd = {0xAA, 0xB1, 0x1D, 0x00, 0x05, 0x00, 0x02, 0x10, 0xCC, 0x33, 0xC3, 0x3C}
	meterAnticlockwiseCmd = {0xAA, 0xB1, 0x1D, 0x00, 0x00, 0x00, 0x02, 0x17, 0xCC, 0x33, 0xC3, 0x3C}
	
end

--函数功能:用户触摸修改控件后,执行此回调函数.
function on_control_notify(screen, control, value)

	if (screen == 0) and (control == 3) then
		if (value == 0) then
			meterPlayerFlag = 0
			stop_timer(0)
		else
			meterPlayerFlag = 1
			start_timer(0, 100, 0, 0)
		end
	end

end

运行预览

运行虚拟串口屏,点击按钮“LUA脚本”,可以看到模拟车速表的变化。如下所示

4.3 时钟(仪表控件应用)

画面背景配置

在【时钟】画面的“背景图片”导入相应的美工图片。在该画面中添加仪表控件,如下所示

属性配置

1.仪表控件属性

以仪表控件ID2为例,设置【表盘类型】“透明”、【初始角度】为“0”、【终止角度】为“0”、【指针类型】为“直线”等,配置如下所示

同理,仪表控件ID为3 配置参数如下所示

同理,仪表控件ID为4 配置参数如下所示

lua脚本实现模拟时钟

在工程文件中找到脚本文件output->FontAndLib->31_0x1F.lua,代码如下所示。


function on_init()
	--numvar = 0
	volume = 0x20
	dataRecordId = 0
	meterNum = 0
	meterBackNum = 0
	sTimerNum = 0
	mTimerNum = 0
	hTimerNum = 0
	set_text(0, 4, "0")
	meterPlayerFlag = 0
	timerPlayerFlag = 1

	--秒针
	sTimerClockInitCmd = {0xAA, 0xB1, 0x10, 0x00, 0x02, 0x00, 0x02, 0x00, 0x00, 0x00, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	sTimerClockCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x02, 0x00, 0x02, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}

	--分针
	mTimerClockInitCmd = {0xAA, 0xB1, 0x10, 0x00, 0x02, 0x00, 0x03, 0x00, 0x00, 0x00, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	mTimerClockCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x02, 0x00, 0x03, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	
	--时针
	hTimerClockInitCmd = {0xAA, 0xB1, 0x10, 0x00, 0x02, 0x00, 0x04, 0x00, 0x00, 0x00, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	hTimerClockCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x02, 0x00, 0x04, 0x0A, 0xCC, 0x33, 0xC3, 0x3C}
	
	
	
	--顺时针驱动仪表指令
	--meterClockwiseCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x05, 0x00, 0x02, 0x20, 0xCC, 0x33, 0xC3, 0x3C}
	meterClockwiseCmd = {0xAA, 0xB1, 0x1C, 0x00, 0x00, 0x00, 0x02, 0x17, 0xCC, 0x33, 0xC3, 0x3C}
	--逆时针驱动仪表指令
	--meterAnticlockwiseCmd = {0xAA, 0xB1, 0x1D, 0x00, 0x05, 0x00, 0x02, 0x10, 0xCC, 0x33, 0xC3, 0x3C}
	meterAnticlockwiseCmd = {0xAA, 0xB1, 0x1D, 0x00, 0x00, 0x00, 0x02, 0x17, 0xCC, 0x33, 0xC3, 0x3C}
	
end


--当画面需要切换时,执行此回调函数,screen为目标画面.
function on_screen_change(screen)
	if screen == 2 then
		if (timerPlayerFlag == 1 ) then
			--start_timer(1, 1000, 0, 0)
			--start_timer(2, 60*1000, 0, 0)
			--start_timer(3,  60*60*1000, 0, 0)
			
			start_timer(1, 1000, 0, 0)
			start_timer(2, 25000, 0, 0)
			start_timer(3, 60000, 0, 0)

			timerPlayerFlag = 0
		end
	end
end

运行预览

运行虚拟串口屏,可以看到时钟的变化。如下所示