滑块控件
1. 属性
属性 |
说明 |
|---|---|
id |
控件ID号，不可更改 |
global |
勾选：作用于全局，不勾选：作用于所在页； 不可脚本读写 |
name |
控件名称，可改，默认名称slider+序号 |
x |
控件起始点x坐标 |
y |
控件起始点y坐标 |
width |
控件宽度，可读写 |
height |
控件高度，可读写 |
locked |
勾选后锁定控件位置，但不影响脚本操作控件属性 |
visible |
控件是否可见，脚本：visible=1，可见，visible=0，不可见 |
opacity |
不透明度，opacity=0，完全透明，opacity=100，完全不透明。值介于0~100之间。默认100，非必要不建议修改此项。 |
minVal |
设置滑块最小值 |
maxVal |
设置滑块最大值 |
val |
滑块当前值，改变当前值，可以改变滑块的位置，val=50，滑块移动到，0~100值范围的中间位置。 |
bgType |
背景类型，颜色或者图片 |
bgColor |
如果设置为颜色，设定具体颜色 |
bgImg |
背景类型是图片时，选择背景图片。根据图片资源名称和顺序号选择。 |
bgImgMd |
背景是图片时，默认背景的对齐模式。 |
tbType |
游标 背景类型，颜色或者图片 |
tbColor |
如果设置为颜色，设定具体颜色 |
tbImg |
背景类型是图片时，选择背景图片。根据图片资源名称和顺序号选择。 |
tbWidth |
游标宽度，如果游标背景是图片，图片宽度要>=游标宽度。 |
ori |
滑块摆放方向：横放 -> horizont,竖放 -> vertical。 |
showSel |
是否显示选择范围。 |
selBgColor |
划过区域，背景类型是颜色时，选择背景颜色。 |
selBgImg |
划过区域，背景类型是图片时，选择背景图片。根据图片资源名称和顺序号选择。 |
selBgImgMd |
划过区域，背景类型是图片时，默认背景图片的对齐模式。 |
valel |
仅在触摸时，触发值改变事件。 |
2. 事件
滑块控件的值改变事件可以写入脚本，当滑块值发生改变时触发脚本，常用在设置亮度，声音，播放进度等功能之中。
例如 移动滑块改变系统亮度
sys_light=slidero.val;
滑块值可以设置范围，默认滑块范围是0-100；
3. 示例
3.1 在脚本中访问属性（控件名以slider0为例）
3.1.1. 获取滑块控件背景类型（slider0.bgType）
例如 定义一个整数，获取控件背景类型
int type;
type=slider0.bgType; //返回值为0背景类型为颜色，返回值2背景类型为图片
3.1.2. 设置滑块控件的背景颜色（slider0.bgColor）
例如 设置滑块控件背景颜色为红色
slider0.bgColor=0xffff0000;//十六进制颜色格式
应用技巧：利用控件不同状态下的背景颜色是设计UI是最方便有效的方法，vp提供控件在不同操作状态下的背景颜色供客户使用
3.1.3. 设置滑块控件背景图片（slider0.bgImg）
例如 设置滑块控件背景图片为图片素材库第一张图片
slider0.bgImg=1;
应用技巧：利用控件不同状态下的背景图片可以设计不同风格的ui，vp提供非常自由的图片选择，图片尽量选用JPG格式，系统解码更快，运行更流畅，控件背景图片的对齐方式可以选择页面对齐，这样可以与页面背景用同一张图片，这样会最大程度的减少素材所占空间，系统运行也会更快，G系列暂时不支持带透明格式的png图片，但是S系列则支持这一选项
3.1.4. 获取滑块游标类型（slider0.tbType）
例如 定义一个整数，获取控件背景类型
int type;
type=slider0.tbType; //返回值为0背景类型为颜色，返回值2背景类型为图片
3.1.5. 设置游标背景颜色（slider0.tbColor）
例如 设置游标背景颜色为绿色
slider0.tbColor=0xff00ff00;
当背景为图片时
3.1.6. 设置游标背景图片（slider0.tbImg）
例如 设置游标背景图片为图片素材库第一张图片
slider0.tbImg=1;
应用技巧：使用不同图片素材可以将滑块做成不同的ui效果，游标背景图片无法选则页面对齐，故必须使用单独的素材
3.1.7. 设置滑块控件的高度(slider0.height)
例如 设置滑块高度为100
slider0.height=100;
3.1.8. 设置滑块控件的宽度(slider0.width)
例如 设置控件宽度为50
slider0.height=50;
3.1.9. 设置滑块位置的x坐标(slider0.x)
例如 设置控件x坐标为100
slider0.x=100;//坐标原点x=0为页面左上角顶点
3.1.10. 设置滑块位置的y坐标(slider0.y)
例如 设置控件y坐标为100
slider0.y=100;//坐标原点y=0为页面左上角顶点
应用技巧：控件的宽高和坐标，表示控件在工程中的大小和位置，数值都是以像素为单位，编辑此属性首先要了解工程对应串口屏的像素大小，利用对宽高和坐标的编辑，可以实现控件UI丰富多彩的变换。
3.1.11. 设置滑块控件的最大值(slider0.maxVal)
例如 设置控件的最大值为200
slider0.maxVal=200;
3.1.12. 设置滑块控件的最小值(slider0.minVal)
例如 设置控件的最大值为100
slider0.minVal=100;
应用技巧：滑块的最值要配合具体使用场景，滑块值会在给定的最值范围内均匀分布，比如，当用户用滑块控制RGB颜色时，此时单一色块最大值应为255，最小值为0。当用滑块显示控制音视频播放进度时，最大值为100，最小值为0。
3.1.13. 设置滑块控件的游标宽度(slider0.tbWidth)
例如 设置控件的最大值为20
slider0.tbWidth=20;
3.1.14. 设置滑块控件的游标宽度(slider0.tbWidth)
例如 设置控件的最大值为20
slider0.tbWidth=20;
3.1.15. 设置滑块控件的当前值(slider0.val)
例如 设置控件当前值为50
slider0.val=50;
应用技巧：此属性两个用法，
1. 编辑工程时，选定的当前值（默认是0）要与滑块表示的数据默认值一致。当切换页面时，控件的全局属性要勾选，否则每次回到页面滑块当前值会恢复到默认值，重新上电时，如果需要保留上次的数据需要做掉电保存，掉电保存相关操作见对应文档。
2. 脚本设置当前值可以触发值改变事件，比如控制播放进度时，值改变事件中将当前值与播放进度关联，就可以实时控制播放进度了
3.1.16. 设置滑块控件的方向(slider.ori)
例如 设置控件当前方向为垂直方向
slider0.ori=1; //0水平方向 “Horizo” 1为垂直方向 ”Vertical”
3.1.17. 设置滑块控件是否显示选择范围(slider.showSel)
例如 设置控件为显示
slider0.showSel=1; // 0为不显示 1为显示
3.1.18. 设置滑块控件选择范围的背景颜色(slider.selBgColor)
例如 设置选择范围的背景颜色为红色
slider0.selBgColor=0xffff0000; //十六进制颜色格式
应用技巧：选择范围的显示和背景的改变，用来制作丰富的UI，区分选择区域和总区域在很多时候是必要的，于是vp提供了这种选择
3.1.19. 设置滑块控件仅在触摸时触发值改变事件(slider.valel)
例如 设置仅在触摸时值改变事件才有效
slider0.valel=1; //0为不开启,值改变就出发值改变事件 1为开启,只有触摸时值改变事件才会生效
3.1.20. 设置滑块控件的可见性(slider0.visible)
例如 设置控件为可见
slider0.visible=1; //0为不可见 1为可见
应用技巧：vp工程中控件并非时时必须显示，可视性这个属性实现了控件视觉效果的可编辑性，用户自定义可视性，可配合其他控件在脚本中编辑，也可以配合协议解析器，在通讯过程中控制控件的显示和隐藏，简单直接且行之有效。
3.1.21. 设置滑块控件的透明度(slider0.opacity)
例如 设置滑块控件透明度0-100 0完全透明不可见 仅S系列支持调整
slider0.opacity=50; //0完全透明 100完全不透明
应用技巧：透明度在UI上的用处就是能透过控件看到背景，特定风格之下的UI大有用处，但是透明度会增加系统工作量，非必要时刻不建议使用，如果背景素材希望设置成带透明的，目前网络上很多制图P图软件都可以做到这一点，将素材做成图片图片很多时候都是一个不错的选择。
4. 常见问题
滑块可以用来显示进度，也可以手动控制改变数值，滑块总共有三个部分，背景，游标，选择范围，设计ui时可以选择不同类型的图片或者颜色设置这三个部分，丰富自己的ui。
滑块的值默认状态是每次加载页面都是重置，这有时候可能并不方便，所以记得勾选全局属性。
当重新上电的时候需要保存滑块值时，记得做掉电保存，多数情况下屏本身flash是一个不错的地方，如果数据较多或者刷写频繁，建议做在sd卡。