什么是滑动选择控件?

滑动选择控件主要方便用户设置参数和显示状态。本例程中介绍滑动选择控件常见的应用,结合工程中的画面介绍每一个应用的配置,常见的应用如下所示:
- 滑动选择:通过上下滑动屏幕来实现用户对参数设置的选定
- 状态显示:设置显示某种文字状态
适用范围:全시리즈
例程下载链接:《滑动选择控件应用》(点击跳转)
11.1 滑动选择控件属性介绍
滑块有两种模式,分别为滑动选择以及状态显示
滑动选择

用途
上下滑动更改选项来设定用户所需要选择的参数
字体
更改显示文字的字体大小
文字颜色
指定被选中项的字体颜色,如下所示

两端颜色
用于设置两端待选择项的字体颜色,如下所示

两端待选项的字体与中间被选项字体大小的百分比例,缩放系数范围为[0-100],0表示不缩放,设置效果显示如下所示

候选数
用于设置在控件可视范围内显示待选择项的数量,如下所示

初始选项
设置初始化时默认选中的项,第一项标注以0开始,0代表所有项数里起始的第一项,如下所示

语言数
设置显示文字语言类别的数量,最多可选择10项语言(M시리즈15种)。选择好语言数后,在后面数据选项各种语言中分别写入对应的语言,每一项之间必须用半角(;)隔开,最后一项也需要,如下所示

状态显示

用途
用于显示某种文字状态。
字体
设置显示文字的字体大小(此处只代表设置字体的大小)。
文字颜色
用于设置状态显示文字的颜色,如下所示

初始选项
初始化时默认选中的文字状态,第一项标注以0开始,0代表所有项数里起始的第一项,如下所示

水平对齐
文字在控件范围内水平方向上的对齐方式设置
垂直对齐
文字在控件范围内垂直方向上的对齐方式设置
语言数
设置显示文字语言类别的数量,最多可选择10项语言(M시리즈15种)。选择好语言数后,在后面数据选项各种语言中分别写入对应的语言,每一项之间必须用半角(;)隔开,最后一项也需要。
11.2 滑动选择功能
【滑动选择功能】画面,介绍用户如何配置一个通过上下滑动屏幕或者通过给屏幕发送指令来选择设定参数的滑动选择控件
画面配置
在【滑动选择功能】画面的“背景图片”导入相应的美工图片。在该画面中添加滑动选择控件,如下所示

属性配置
以控件ID为1的滑动选择控件为例,设置【用途】为“滑动选择”、【字体】为“ASC_CHS_22”、【文字颜色】为“128;128;128”、【两端颜色】为“128;128;128”,【两端缩放】为“50”,【候选项数】为“5”,【初始选项】为“0”,【语言数】为“1”,【数据选项】设置为“10;20;30;40;50;60;70;80;90;100;”配置如下所示

运行预览
运行虚拟屏,用户可以利用鼠标在虚拟屏上上下滑动来选定设置参数(若用户手上有实体屏,只需将配置好的工程下载进去,即可体验),同时也可以通过虚拟串口给虚拟屏发送指令来设置选择项(VisualTFT软件和虚拟屏用“虚拟串口”建立联机。열기【指令助手】,选择左侧导航栏【滑动选择控件】,设置“设置滑动选择控件值”的指令参数。),例如设置画面0,control1的滑动选择控件设定值为第三项,运行效果如下所示

外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现设置上述设置好的滑动选择控件数据选项中的第三项的“30”numerical value,则直接调用滑动选择控件值设置函数SetSelectorValue ( )即可,代码如下所示
/************************************************************************
** 기능 name: void SetSelectorValue (uint16 screen_id,
** uint16 control_id,
** uint8 item);
** Descriptions : 设置滑动选择控件值
** input 파라미터s: screen_id: 画面ID
** control_id: controlID
** item: 设置的选项
** output 파라미터s: 无
** Returned value : 无
************************************************************************/
{
……
SetSelectorValue (0, 1, 2) //画面ID0,controlID1,设置的选项第三项
……
}
11.3 状态显示功能
【状态显示功能】画面,介绍如何去配置一个用来显示某种文字状态的滑动选择控件
画面配置
[ 상 태 표시 기능 ] 화 면의 " 배 경 이미지 " 에 해당 미 술 이미지를 가져 옵니다 .아래 와 같이 화 면에 슬 라이 드 선택 컨트롤 을 추가 합니다 .

속 성 구성
[ 용 도 ] 를 " 상 태 표시 ", [ 글 꼴 ] 를 " AS C _ CH S _ 30 ", [ 텍 스트 색 상 ] 을 " 25 5; 25 5; 255 ", [ 초 기 옵션 ] 을 " 0 ", [ 수 평 정 렬 ] 을 " 중앙 정 렬 ", [ 수 직 정 렬 ] 을 " 중앙 정 렬 ", [ 언 어 수 ] 를 "1 ", [ 데이 터 옵션 ] 을 " 장비 정상 / 정상 장비 ; 장비 일시 중지 / 장비 일시 중지 ; 장비 유지 보수 / 장비 유지 보수 ; 장비 복구 / 장비 복구 ; 구성 은 다음과 같습니다 .

실행 미리 보기
가상 화 면을 실행 하고 Visual T FT 소프트웨 어는 가상 화 면 과 " 가 상 직 렬 포 트 " 를 사용하여 연결 을 설정 합니다 . [ 명 령 도우 미 ] 를 열 고 왼쪽 탐 색 [ 슬 라이 드 선택 컨트롤 ] 을 선택 하고 " 슬 라이 드 선택 컨트롤 값 설정 " 의 명령 매 개 변 수를 설정 합니다 .예를 들어 설정 화 면 1, 컨트롤 1 의 슬 라이 드 선택 컨트롤 의 설정 값 은 세 번째 항목 으로 작동 하는 효과 는 다음과 같습니다 .

외부 MC U 제어
개발 패키 지 ke il 프로그램의 him . de ver . h 파일 의 함 수 선언 과 him . de ver . c 파일 의 정의 를 참조 하십시오 .
예를 들어 , 사용자는 위에서 설정 된 슬 라이 드 선택 컨트롤 데이터 옵션 의 세 번째 항목 을 설정 하는 " 장 비 유지 보수 / 장비 유지 보수 " 텍스트 를 구현 해야 하며 , 슬 라이 드 선택 컨트롤 값 설정 함 수 Set S ele ctor V alue () 를 직접 호출 하면 다음과 같은 코 드가 표시 됩니다 .
/** **********************************************************************
** 함 수 이름 : vo id Set S ele ctor V alue (u int 16 screen _ id ,
** u int 16 control _ id ,
** u int 8 항목)
** 설명 서 : 슬 라이 드 선택 컨트롤 값 설정
** input paramet ers : screen _ id : 화 면 ID
** control _ id : 컨트롤 ID
** item : 설정 된 옵션
** 출 력 매 개 변 수 : 없음
** 반환 된 값 : 없음
************************************************************************/
{
……
Set S ele ctor V alue (0, 1, 2) // 화 면 ID 0, 컨트롤 ID 1, 세 번째 옵션 설정
……
}
Leave a Reply