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

freeFree Technical Resource

This content is free to read, suitable for basic learning and search traffic.

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

什么是图标控件?

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

图标控件为GIF或ICON格式的文件,デフォルト索引Start from 0。使用图标控件,形象地把变量的不同ステータス表示出来或修改背景图片

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

  1. ステータス表示:実装4种ステータス表示
  2. 修改背景图标:実装4个背景图的切换

适用範囲:全系列

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

8.1 图标控件属性

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

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

初期化表示

Choice“是”或者“否”

图标文件

選択图标文件的路径

透明処理

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

触摸設定

設定触摸設定,可設定如下选项

  1. 禁止触摸:不允许触摸
  2. 允许触摸:触摸时有通知有蜂鸣
  3. 水平滑动时换 frame: 水平向左、水平向右滑动时换フレーム
  4. 垂直滑动时换 frame: 水平向上、水平向下滑动时换フレーム

8.2 图标文件制作

在我司VisualTFT トップマシン软件集成图标文件“ICON”的制作工具,本章节介绍如何生产“ICON”文件

  1. 在VisualTFT软件菜单栏,Choice【Tools】→“图标生成”,如下所示아이콘 컨트롤은 어떻게 사용합니까?Figure2
  2. Click【增加フレーム】,将準備して的素材追加进来。用户导入图片デフォルト为元の的宽和高表示,也可以对宽度和高度的微调及任意拖动进行位置调整,最后点击“生成图标”。操作如下所示
아이콘 컨트롤은 어떻게 사용합니까?Figure3

8.3 ステータス表示

【ステータス更新】画面,介绍用户デバイス和シリアルポート屏通讯时,用户デバイス向シリアルポート屏送信指令,更新图标控件的フレーム

画面設定

在【ステータス更新】画面的“背景图片”导入相应的美工图片。在画面中追加1个图标控件(controlID:1),和3个按钮控件(controlID:2-6)

属性設定

图标属性

設定【图标文件】为素材的路径。【透明処理】为“与背景融合”,設定如下所示

아이콘 컨트롤은 어떻게 사용합니까?Figure4
【工作中】按钮属性

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

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

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

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

填写图标对内指令

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

실행 미리 보기

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

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

외부 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) 를 추가 합니다 .

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

속 성 구성

아이 콘 속 성

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

아이콘 컨트롤은 어떻게 사용합니까?Figure10
[ 이 전 ] 버튼 컨트롤 속 성

컨트롤 속 성 구성

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

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

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

  • Click【对内指令】→“按下时”,弹出指令填写框
아이콘 컨트롤은 어떻게 사용합니까?Figure12

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

실행 미리 보기

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

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

외부 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 을 설정 하는 아이 콘 컨트롤 다음 프레 임 표시
    ……
}
Related Tags
Put this resource to use in a real project?

Go to the Tool Center for message parsing, CRC verification and device debugging, or submit your requirements for selection and integration advice.

Engineer Membership

Turn this article into actionable debugging resources

After activation, you can use advanced message parsing, resource pack downloads, code examples, engineering cases and priority technical support, suitable for real project delivery.

Unlimited Advanced Tools
Resource & Code Packs
Complete Engineering Case Library
Priority Technical Support

Leave a Reply

Your email address will not be published. Required fields are marked *.