아이콘 컨트롤은 어떻게 사용합니까?

什么是图标控件？

图标控件为GIF或ICON格式的文件，默认索引从0开始。使用图标控件，形象地把变量的不同状态显示出来或修改背景图片

本例程中介绍图标控件常见的应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示

1. 状态显示：实现4种状态显示
2. 修改背景图标：实现4个背景图的切换

适用范围：全시리즈

例程下载链接：《ICON控件应用》(点击跳转)

8.1 图标控件属性

本章节重点介绍图标控件的属性，属性窗口如下所示

初始化显示

选择“是”或者“否”

图标文件

选择图标文件的路径

透明处理

可选为“使用透明色”或“与背景融合”

触摸设置

设置触摸设置，可配置如下选项

1. 禁止触摸：不允许触摸
2. 允许触摸：触摸时有通知有蜂鸣
3. 水平滑动时换帧：水平向左、水平向右滑动时换帧
4. 垂直滑动时换帧：水平向上、水平向下滑动时换帧

8.2 图标文件制作

在我司VisualTFT 上位机软件集成图标文件“ICON”的制作工具，本章节介绍如何生产“ICON”文件

1. 在VisualTFT软件菜单栏，选择【工具】→“图标生成”，如下所示
2. 点击【增加帧】，将准备好的素材添加进来。用户导入图片默认为原始的宽和高显示，也可以对宽度和高度的微调及任意拖动进行位置调整，最后点击“生成图标”。操作如下所示

8.3 状态显示

【状态更新】画面，介绍用户设备和串口屏通讯时，用户设备向串口屏发送指令，更新图标控件的帧

画面配置

在【状态更新】画面的“背景图片”导入相应的美工图片。在画面中添加1个图标控件（控件ID：1），和3个按钮控件（控件ID：2-6）

属性配置

图标属性

设置【图标文件】为素材的路径。【透明处理】为“与背景融合”，配置如下所示

【工作中】按钮属性

用于显示图标第0帧，“工作中”状态。在按钮控件（控件ID：2）的属性窗口中，设置【触摸虚框】为“否”、【按下时的图片】为对应的素材路径、【裁剪】为“勾选”、【初始状态】为“按下”、【操作风格】为“开关”，如下所示

对“工作中”、“暂停”、“停止”、“隐藏”等按钮实现互斥效果：同时选中上述按钮，在菜单栏【编辑】-“开关按钮互斥（N）”，对应的按钮“对内指令”-“按下时”会自动填入一条互斥指令，操作如下所示

填写图标对内指令

• 点击【对内指令】→“按下时”
• 명령 채 우 기 상 자를 팝 업 하고 명령 도우 미 인터페 이스 에서 " 명 령 도우 미 " 를 선택 하고 왼쪽 탐 색 모 음 에서 " 아이 콘 컨트롤 " 을 선택 하여 " 아이 콘 컨트롤 표시 " 영역 의 명령 매 개 변 수를 설정 합니다 .
• 루 틴 에서 , 설정 [ 상 태 표시 ] 화 면의 아이 콘 컨트롤 은 프레 임 0 복 사 명령을 표시 하고 내부 명령 상 자에 다음 과 같이 채워 줍니다 .

실행 미리 보기

가상 화 면을 실행 하고 Visual T FT 소프트웨 어는 가상 화 면 과 " 가 상 직 렬 포 트 " 를 사용하여 연결 을 설정 합니다 .일시 중지 버튼 을 누 르 면 아이 콘 컨트롤 에 해당 일시 중지 프레 임 이 표시 됩니다 . [ 상 태 표시 ] 화 면의 아이 콘 컨트롤 (컨 트 롤 ID : 1) 에 대해 해당 변경 ID 및 컨트롤 ID 를 입력 하십시오 . 예를 들어 지정 된 " 2 " 를 표시 하고 " 표시 " 를 클릭 하십시오 .가상 화 면에서 " 정 지 " 가 표시 되며 다음과 같이 작동 합니다 .

외부 MC U 제어

개발 패키 지 ke il 프로그램 에서 him . de ver . h 파일 의 함 수 선언 과 him . de ver . c 파일 의 정의 를 참조 하십시오 .

M UC 제어 지정 된 프레 임 표시

예를 들어 , 사용자는 표시 아이 콘 컨트롤 의 프레 임 1 을 구현 해야 하며 , 텍스트 라이 브 러 리 문자 열 표시 함 수 Anim ation Play Fr ame () 를 직접 호출 하면 다음과 같은 코 드가 있습니다 .

/** **********************************************************************
** 함 수 이름 :    vo id Anim ation Play Fr ame ( u int 16 screen _ id ,
**                                           u int 16 control _ id ,
**                                           u int 8 frame _ id)
** 설명 서    : 프레 임 표시 지정
** 입력 매 개 변 수 : screen _ id :   화 면 ID
**                   control _ id : 컨트롤 ID
**                   frame _ id :    프레 임 지정
** 출 력 매 개 변 수 : 없음
** 반환 된 값   : 없음
************************************************************************/
{
    ……
    Anim ation Play Frame (0, 1, 1) // 화 면 ID 0, 컨트롤 ID 1, 표시 아이 콘 컨트롤 프레 임 1
    ……
}

8. 3 배경 이미지 수정

화 면 구성

[ 배 경 사 진 수정 ] 화 면의 [ 배 경 사 진 ] 에서 해당 미 술 사 진 을 가져 옵니다 .아래 와 같이 화 면에 아이 콘 컨트롤 1 개 (컨 트 롤 ID : 1) 와 버튼 컨트롤 3 개 (컨 트 롤 ID : 2 - 4) 를 추가 합니다 .

속 성 구성

아이 콘 속 성

[ 아이 콘 파일 ] 을 소 재 의 경 로 로 , [ 투 명 성 처리 ] 를 [ 배 경 과 혼합 ] 으로 설정 하여 다음과 같이 구성 합니다 .

[ 이 전 ] 버튼 컨트롤 속 성

컨트롤 속 성 구성

아이 콘 앞에 프레 임을 표시 합니다 .버튼 컨트롤 (컨 트 롤 ID : 2) 의 속 성 창 에서 [ 터 치 대 시 상 자 ] 를 [ 아니 오 ] 로 , [ 팝 업 이미지 ] 를 해당 소 재 경 로 로 , [ 자 르기 ] 를 [ 선 택 ] 로 , [ 눌 러 진 이미지 ] 를 해당 소 재 경 로 로 , [ 자 르기 ] 를 [ 선 택 ] 로 설정 하여 속 성 구성 은 다음과 같습니다 .

이전 프레 임 의 내부 지 시를 작성 합니다 .

• 点击【对内指令】→“按下时”，弹出指令填写框

마찬가지로 , 버튼 " 다 음 " 설정 은 버튼 " 상 위 " 설정 과 비슷 하며 , 명령 도우 미 에서 다음 프레 임을 선택 하고 해당 버튼 쌍 에 명령을 복 사 하면 됩니다 .

실행 미리 보기

가상 화 면을 실행 하고 Visual T FT 소프트웨 어는 가상 화 면 과 " 가 상 직 렬 포 트 " 를 사용하여 연결 을 설정 합니다 . " 다 음 " 버튼 을 누 르 면 아이 콘 컨트롤 이 다음 프레 임 표시 를 전환 하고 [ 배 경 이미지 수정 ] 화 면의 아이 콘 컨트롤 (컨 트 롤 ID : 1) 에 대해 해당 변경 ID 및 컨트롤 ID 를 입력 하고 " 다 음 " 을 클릭 합니다 .가상 화 면에서 아이 콘 컨트롤 이 다음 배경 효과 로 표시 되며 다음과 같이 작동 합니다 .

외부 MC U 제어

개발 패키 지 ke il 프로그램 에서 him . de ver . h 파일 의 함 수 선언 과 him . de ver . c 파일 의 정의 를 참조 하십시오 .

M UC 는 이전 프레 임 표시 를 제어 합니다 .

예를 들어 , 사용자는 아이 콘 컨트롤 이 이전 프레 임을 표시 하도록 제어 해야 하며 API 함 수 Anim ation Play Prev () 를 직접 호출 하면 다음과 같은 코 드가 있습니다 .

/** *********************************************************************
** 함 수 이름 :    vo id Anim ation Play P rev (u int 16 screen _ id ,
**                                          u int 16 control _ id)
** 설명 서     : 이전 프레 임 표시
** input paramet ers : screen _ id : 화 면 ID
** control _ id       : 컨트롤 ID
** 출 력 매 개 변 수 : 없음
** 반환 된 값   : 없음
***********************************************************************/
{
    ……
    Anim ation Play Prev (0, 1) // 화 면 ID 0 컨트롤 ID 1 을 설정 하는 아이 콘 컨트롤 이전 프레 임 표시
    ……
}

M UC 는 다음 프레 임을 제어 합니다 .

예를 들어 , 사용자는 다음 프레 임을 표시 하기 위해 컨트롤 아이 콘 컨트롤 을 구현 해야 하며 API 함 수 Anim ation Play Next () 를 직접 호출 하면 다음과 같은 코 드가 표시 됩니다 .

/** *********************************************************************
** 함 수 이름 :    vo id Anim ation Play Next (u int 16 screen _ id ,
**                                           u int 16 control _ id)
** 설명 서     : 이전 프레 임 표시
** input paramet ers : screen _ id : 화 면 ID
**                    control _ id : 컨트롤 ID
** 출 력 매 개 변 수 : 없음
** 반환 된 값   : 없음
***********************************************************************/
{
    ……
    Anim ation Play Next (0, 1) // 화 면 ID 0 컨트롤 ID 1 을 설정 하는 아이 콘 컨트롤 다음 프레 임 표시
    ……
}