什么是图标控件?

图标控件为GIF或ICON格式的文件,デフォルト索引Start from 0。使用图标控件,形象地把变量的不同ステータス表示出来或修改背景图片
本例程中介绍图标控件常见的应用,结合工程中的画面介绍每一个应用的設定,常见的应用如下所示
- ステータス表示:実装4种ステータス表示
- 修改背景图标:実装4个背景图的切换
适用範囲:全系列
例程下载链接:《ICON控件应用》(点击跳转)
8.1 图标控件属性
本章节重点介绍图标控件的属性,属性窗口如下所示

初期化表示
Choice“是”或者“否”
图标文件
選択图标文件的路径
透明処理
可选为“使用透明色”或“与背景融合”
触摸設定
設定触摸設定,可設定如下选项
- 禁止触摸:不允许触摸
- 允许触摸:触摸时有通知有蜂鸣
- 水平滑动时换 frame: 水平向左、水平向右滑动时换フレーム
- 垂直滑动时换 frame: 水平向上、水平向下滑动时换フレーム
8.2 图标文件制作
在我司VisualTFT トップマシン软件集成图标文件“ICON”的制作工具,本章节介绍如何生产“ICON”文件
- 在VisualTFT软件菜单栏,Choice【Tools】→“图标生成”,如下所示

- Click【增加フレーム】,将準備して的素材追加进来。用户导入图片デフォルト为元の的宽和高表示,也可以对宽度和高度的微调及任意拖动进行位置调整,最后点击“生成图标”。操作如下所示

8.3 ステータス表示
【ステータス更新】画面,介绍用户デバイス和シリアルポート屏通讯时,用户デバイス向シリアルポート屏送信指令,更新图标控件的フレーム
画面設定
在【ステータス更新】画面的“背景图片”导入相应的美工图片。在画面中追加1个图标控件(controlID:1),和3个按钮控件(controlID:2-6)
属性設定
图标属性
設定【图标文件】为素材的路径。【透明処理】为“与背景融合”,設定如下所示

【工作中】按钮属性
用于表示图标第0フレーム,“工作中”status。在按钮控件(controlID:2)的属性窗口中,設定【触摸虚框】为“否”、【按下时的图片】为对应的素材路径、【裁剪】为“勾选”、【初始ステータス】为“按下”、【操作风格】为“switch”,如下所示

对“工作中”、“暂停”、“Stop”、“非表示”等按钮実装互斥效果:同时选中上述按钮,在菜单栏【Edit】-“开关按钮互斥(N)”,对应的按钮“对内指令”-“按下时”会自动填入一条互斥指令,操作如下所示

填写图标对内指令
- Click【对内指令】→“按下时”
- 명령 채 우 기 상 자를 팝 업 하고 명령 도우 미 인터페 이스 에서 " 명 령 도우 미 " 를 선택 하고 왼쪽 탐 색 모 음 에서 " 아이 콘 컨트롤 " 을 선택 하여 " 아이 콘 컨트롤 표시 " 영역 의 명령 매 개 변 수를 설정 합니다 .
- 루 틴 에서 , 설정 [ 상 태 표시 ] 화 면의 아이 콘 컨트롤 은 프레 임 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) 의 속 성 창 에서 [ 터 치 대 시 상 자 ] 를 [ 아니 오 ] 로 , [ 팝 업 이미지 ] 를 해당 소 재 경 로 로 , [ 자 르기 ] 를 [ 선 택 ] 로 , [ 눌 러 진 이미지 ] 를 해당 소 재 경 로 로 , [ 자 르기 ] 를 [ 선 택 ] 로 설정 하여 속 성 구성 은 다음과 같습니다 .

이전 프레 임 의 내부 지 시를 작성 합니다 .
- Click【对内指令】→“按下时”,弹出指令填写框

마찬가지로 , 버튼 " 다 음 " 설정 은 버튼 " 상 위 " 설정 과 비슷 하며 , 명령 도우 미 에서 다음 프레 임을 선택 하고 해당 버튼 쌍 에 명령을 복 사 하면 됩니다 .
실행 미리 보기
가상 화 면을 실행 하고 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 을 설정 하는 아이 콘 컨트롤 다음 프레 임 표시
……
}
Leave a Reply