GUI Designer 버튼 클래스 컨트롤 사용 설명서

freeFree Technical Resource

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

GUI Designer 버튼 클래스 컨트롤 사용 설명서

버튼 클래 스 컨트롤 을 추가 하는 방법

그림 1. 1 과 같이 바로 가기 막 대 또는 도구 상 자 아이 콘 을 클릭 하여 컨트롤 을 추가 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure

주 : 바로 가기 모 음에 나 열 된 컨트롤 은 일반적으로 사용되는 컨트롤 이며 도구 상 자의 버튼 클래 스 컨트롤 에는 모든 버튼 컨트롤 이 포함되어 있습니다 .

用户点击需要追加控件的窗口,选中控件, 鼠标变为

마 우스 왼쪽 버튼 을 클릭 하여 추가 를 계속 하고 마 우스 오른쪽 버튼 을 클릭 하거나 편집 모듈 을 클릭 하여 추가 를 중지 합니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure1

컨트롤 위치 크기 및 모양 을 수정 하는 방법

2. 1 컨트롤 위치 와 크 기를 변경 하는 방법

컨트롤 을 선택 하고 마 우스 왼쪽 버튼 을 클릭 하여 확대 / 축 소 컨트롤 을 드 래 그 하거나 오른쪽 속 성 창 을 클릭 하여 그림 2. 1 과 같이 위치 와 크 기를 정확하게 조정 합니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure2

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure3

2. 2 모양 속 성을 수정 하는 방법

컨트롤 을 선택 하고 그림 2. 2 와 같이 오른쪽 속 성 창 에서 → 를 클릭 합니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure4GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure5

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure6

" 팝 업 상태 " 를 클릭 하면 아래 옵션 에는 투 명 , 단 색 , 그림 세 가지 옵션 이 있습니다 . 아래 표 와 같이 마 우스 클릭 은 임 의 로 전환 선택할 수 있습니다 .

투 명 성

컨트롤 이 투 명 상태로 표시 됨

단 색

控件为单个颜色表示,click

사진

控件为图片形式表示,点击弹起ステータス右侧ne - image " sr c =" www . example . com " wid th =" 25 "/ > , 그림 2. 3 에 표시 된 것처럼 이미지 대체 를 수행 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure7

참고 : 사진 의 양 이 큰 경우 사진 관리 기능을 사용하여 대 량 이미지를 추가 , 대체 , 분류 및 관리 할 수 있습니다 . 자세한 작업 은 사진 관리 지침 을 참조 하십시오 .

2. 3 버튼 컨트롤 에 문 자를 추가 하는 방법

버튼 컨트롤 을 선택 하고 그림 2. 4 와 같이 오른쪽 속 성 창 에서 → 를 클릭 합니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure8GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure9

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure10

텍스트 를 클릭 하면 그림 2. 5 와 같이 텍스트 콘텐츠 를 추가 하고 설정 할 수 있으며 선택 적 정 적 텍스트 가 있습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure11

창 에 직접 표시 할 수 있는 정 적 텍스트 입력 상 자에 내용을 입력 합니다 .

2. 3. 1 글 꼴 을 수정 하는 방법

글 꼴 오른 쪽에 있는 버튼 을 클릭 하여 글 꼴 수정 창 을 팝 업 하여 그림 2. 6 과 같이 필요 에 따라 글 꼴 크 기를 수정 할 수 있습니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure12

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure13

2. 3. 2 텍스트 색 상을 변경 하는 방법

문자 색 상 오른 쪽에 있는 상 자를 클릭 하여 팔 레 트가 팝 업 되어 필요 에 따라 문자 색 상을 수정 할 수 있으며 문자 색 상은 그림 2. 7 과 같이 검 정 색 으로 기본 값 으로 설정 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure14

2. 3. 3 배경 색 을 변경 하는 방법

배경 색 오른 쪽에 있는 상 자를 클릭 하여 필요 에 따라 배경 색 을 수정 할 수 있는 팔 레 트를 팝 업 합니다 . 그림 2. 8 과 같이 기본 값 은 투 명 입니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure15

그림 2. 8 / span > 배경 색 수정

2. 3. 4 정 렬 을 수정 하는 방법

정 렬 방법 아래 의 버튼 을 클릭 하면 사용자는 입력 텍스트 의 정 렬 방법을 수정 할 수 있으며 , 정 렬 방법은 그림 2. 9 과 같이 중앙 에 기본 설정 되어 있습니다 .

에 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure16

3. 버튼 컨트롤 적용

3. 1 컨트롤 소개

버튼 컨트롤 은 사용자가 클릭 하여 작업을 수행 할 수 있는 생활 의 스위 치 와 비슷 합니다 .단 추 컨트롤 은 텍스트 와 이미지를 표시 합니다 .이 컨트롤 은 클릭 할 때 페이지 점 프 , 숫자 값 의 증가 및 감소 등의 기능을 트 리 거 할 수 있습니다 .

3. 2 사진 대체 방법

버튼 컨트롤 을 선택 하고 오른쪽 속 성 창 을 클릭 하여 이미지 수 정을 수행 합니다 .팝 업 상태 는 버튼 이 작동 하지 않을 때 표시 되는 상태 입니다 ; 누 름 상태 는 버튼 이 누 릴 때 표시 되는 상태 이며 그림 3. 1 과 같이 작업 단계를 대체 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure17

시 뮬 레이 션 할 때 버튼 은 작동 하지 않으며 그림 3. 2 와 같이 팝 업 상태 그림 이 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure18

버튼 을 클릭 하고 그림 3. 3 과 같이 상태 표시 그림을 누 릅니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure19

3. 3 응용 사례

3.3.1

다음 표 에 설명 된 이벤트 목록 :

컨트롤 초기 화

버튼 컨트롤 이 초기 화 될 때 트 리 거 되는 이벤트

컨트롤 제거

버튼 컨트롤 이 제거 될 때 트 리 거 되는 이벤트

클릭 합니다 .

버튼 컨트롤 클릭 이 활성화 될 때 이벤 트를 트 리 거 합니다 (미 끄 러 짐 없음).

긴 누 르기

단 추 컨트롤 을 길 게 누 르 면 (500 ms) 이벤 트가 트 리 거 됩니다 .

< p id = " 29 c 66 1 a 9 65 f 6 44 45 ba 9 18 b 161 f c 70 "022" class="ne-p">

버튼 컨트롤 을 누 르 면 이벤 트가 트 리 거 됩니다 (아 직 완료 되지 않은 클릭 만 누 르 면).

초 점 가져 오 기

버튼 컨트롤 을 누 르 면 이벤 트가 트 리 거 됩니다 (그 림 누 르 기로 전환 됨).

초 점을 잃 다 .

버튼 컨트롤 이 누 르 면 팝 업 으로 복 원 될 때 트 리 거 되는 이벤트

3.3.2

창 전환 버튼 을 클릭 하면 현재 창 에서 대상 창 으로 전환 할 수 있습니다 . 구체적인 설정 방법은 다음과 같습니다 .

1

버튼 컨트롤 을 선택 하고 오른쪽 속 성 창 에서 이벤 트를 클릭 하면 그림 3. 4 와 같이 이벤 트를 추가 할 수 있습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure20

2

처리 방법 오른쪽 아래 쪽 을 클릭 하여 처리 방법 창 을 팝 업 하고 그림 3. 5 와 같이 창 전환 및 대상 창 을 설정 합니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure21

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure22

3.3.3

1

창 전환 이벤트 추가 작업 방법 과 일치 하며 반복 하지 않습니다 .

2

표준 프로토 콜 은 변 수를 수정 하고 이벤 트를 보낼 수있는 T DF H UI 편집 도구 의 전 용 프로토 콜 입니다 .

Click処理方法右下方

→ 그림 3. 6 에 표시 된 것처럼 이벤트 번호 를 설정 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure23

3/ h 4 >

이벤트 번호 가 1 으로 설정 되면 시 뮬 레이 션 실행 버튼 을 클릭 하여 시 뮬 레이 션 인터페 이스 에서 버튼 을 클릭 하여 그림 3. 7 과 같이 보낸 명령을 봅니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure24

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure25

3.3.4

1

창 전환 이벤트 추가 작업 방법 과 일치 하며 반복 하지 않습니다 .

2

사용자 정의 프로토 콜 은 Mod bus 프로토 콜 과 같은 프로젝트 에서 사용할 수 있는 다른 프로토 콜 입니다 .

Click処理方法右下方

그림 3. 8 에 표시 된 것처럼 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure26

주 : [ 사 용 자 정의 프로토 콜 ] 을 클릭 하여 직 렬 명령을 보낼 때 그림 3. 9 와 같이 사용자 정의 명령 함 수 설명 창 이 팝 업 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure27

3

사용자 정의 프로토 콜 명령 이 " AB CD EF 01 $B Y TE (# 3000) $CR C 16 MO DB US (1, 5) $D ELA Y (1 000) " 인 경우 시 뮬 레이 션 실행 을 클릭 합니다 .

버튼 , 시 뮬 레이 션 인터페 이스 에서 버튼 을 클릭 하여 그림 3. 10 과 같이 보낸 명령을 봅니다 .GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure28

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure29

3. 4 버튼 컨트롤 을 사용하여 텍스트 입력 하는 방법

단 추 컨트롤 을 통해 텍스트 입 력을 위한 응용 프로그램은 " 입 력 상 자 사용 " 설명 서를 참조 하십시오 .

3. 5 버튼 컨트롤 을 사용하여 매 개 변 수를 설정 하는 방법

버튼 컨트롤 을 클릭 하여 밸 브 열 기 시간을 변경 하고 구체적인 설정 은 다음과 같습니다 .

1, 추가사용자 변수 추가

그림 3. 11 과 같이 밸브 열기 시작 시간의 값을 저장하는 데 사용되는 사용자 정의 변수를 추가합니다. 추가 절차는 "변수 적용" 설명서를 참조하십시오.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure30

2

밸브 시작 시간을 표시하는 새로운 텍스트 컨트롤을 작성하여 일반 모듈의 버튼 컨트롤 및 텍스트 컨트롤을 클릭하여 추가할 수 있습니다. 그림 3. 12 와 같이.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure31

3

텍스트 컨트롤을 선택하고 오른쪽 속성 창에서 변수 바인딩을 클릭하고 추가를 클릭하여 바인딩된 컨트롤 속성, 데이터 소스 바인딩 및 변환 모드, 변환 메서드 설정, 그림 3. 9 에 표시된 동작을 표시합니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure32

4

이벤트는 "클릭" 으로 추가되며, 작동 방법은 위에서와 동일하며, 자세한 내용은 3. 3. 2 창 전환 사례를 참조하십시오.

5

Click処理方法右下方

입력 상자에 1 을 입력하면 버튼을 클릭하면 Var 0 변수의 값이 초기 값 0 에서 1 으로 변경되며 다른 처리 방법의 변수 작업은 동일합니다.그림 3. 11 에서 볼 수 있습니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure33

6

사용자는 프로토콜 지시를 통해 밸브 열기 시간을 얻을 수 있으며, 자세한 작업 단계는 프로토콜 전송 지시를 참조하십시오.

3. 6 긴 키를 누르면 값을 빠르게 변경하는 방법

버튼 및 텍스트 컨트롤을 추가하는 방법

구체적인 조작 단계는 이전 사례와 동일합니다.

변수 바인딩 추가 방법

구체적인 조작 단계는 이전 사례와 동일합니다.

긴 누르기 이벤트 추가 방법

버튼 컨트롤을 선택하고 오른쪽 속성 창을 클릭하여 그림 3. 10 과 같이 긴 누르기 이벤트를 추가합니다.

& lt; img id = " HvzcB " class = " ne - image " src = " https: /image.modbus.cn/wp-content/uploads/2023/06/51ff46fd99b8b0ce5e809924048bde8b.jpg/

처리 방법을 설정 하는 방법

Click処理方法右下方

그림 3. 11 에 표시 된 것처럼 진 수 값 입니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure34

시 뮬 레이 션 프레 젠 테 이션

시 뮬 레이 션 하는 동안 버튼 컨트롤 을 길 게 누 르 면 그림 3. 12 와 같이 텍스트 컨트롤 에 표시 되는 값을 빠르게 증가 시킵니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure35

4. 라디오 단 추 (자 동 잠 금 단 추) 적용

4. 1 컨트롤 소개

라디오 버튼 컨트롤 은 스위 치 버튼 으로 이해 될 수 있으며 , 선택 되지 않은 상태 와 선택 된 상태 가 있으며 , 이 컨트롤 을 통해 스위 치 작업을 수행 할 수 있습니다 .

4. 2 사진 대체 방법

라디오 단 추 컨트롤 을 선택 하고 오른쪽 속 성 창 을 클릭 하여 이미지를 수정 합니다 .

라디오 버튼 을 클릭 하여 누 르 면 선택 상태 이며 , 라디오 버튼 이 작동 하지 않 거나 선택 상태 에서 다시 클릭 한 후 팝 업 상태 는 선택 되지 않은 상태 입니다 .절차 는 그림 4. 1 에 나와 있습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure36

시 뮬 레이 션 중에 라디오 버튼 이 작동 하지 않 거나 선택 상태 에서 다시 클릭 하면 그림 4. 2 와 같이 선택 되지 않은 상태 가 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure37

라디오 버튼 을 클릭 하여 누 르 면 그림 4. 3 과 같이 선택 상태 가 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure38

4. 3 사용 사례

4.3.1

& lt ; span class = " ne - text "다음 표 에서 설명 하는 대로 이벤트 목록 " & gt ;

컨트롤 초기 화

라디오 단 추 초기 화 시 트 리 거 이벤트

컨트롤 제거

라디오 단 추 제거 시 트 리 거 이벤트

터 치 스크 린 누 르기

라디오 단 추 를 누 르 면 이벤 트가 트 리 거 됩니다 (클 릭 만 누 르 면 완료 되지 않 음).

선택 됨

라디오 컨트롤 상태 가 선택 된 경우 트 리 거 이벤트

선택 되지 않 음

라디오 컨트롤 상태 가 선택 되지 않은 경우 트 리 거 이벤트

4.4.1

1

라디오 단 추 컨트롤 을 선택 하고 오른쪽 속 성 창 을 클릭 하여 그림 4. 4 에 표시 된 대로 이벤 트를 추가 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure39

2

Click処理方法右下方

그림 4. 5 에 표시 된 대로 번호 를 지정 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure40

4.4.2

1

명령 보내 기 → [ 사 용 자 정의 프로토 콜 ] 을 선택 하여 직 렬 포 트 명령 보내 기 → 설정 명령 , 그림 4. 6 과 같이 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure41

4. 4. 3 예를 들어잠 금 단 추 를 구성 하는 방법

여러 라디오 단 추 가 같은 창 에 있는 인터 로 크 , 라디오 단 추 중 하나를 선택 하면 , 나머지 라디오 단 추 는 자동 으로 선택 되지 않은 상태로 복 원 , 인터 로 크

의 설정 방법은 그림 4. 7 과 같이 동일한 창 에서 라디오 버튼 의 조합 이름이 일치 하도록 설정 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure42

다 중 키 세 트 응용 프로그램

5. 1 컨트롤 소개

다 중 키 컨트롤 세 트는 버튼 컨트롤 의 기능을 구현 하고 버튼 에 다른 상태를 이미 지로 표시 하는 데 적합 합니다 .

변 수 바 인 딩 의 데이터 속 성이 그림 인 덱 스 일 때 , 바 인 딩 된 값 에 따라 이 상태 이미 지의 그룹 을 호출 하여 다른 상태 에서 자주 적으로 전환 하는 기능을 달성 한다 .

5. 2 사진 대체 방법

여러 키 컨트롤 세 트를 선택 하고 오른쪽 속 성 창 을 클릭 하여 이미지 수 정을 수행 합니다 . " 추 가 " 를 클릭 하면 여러 개의 다른 상태 이미지 세 트를 추가 합니다 .버튼 이 작동 하지 않을 때 표시 되는 상태 는 팝 업 상태 이며 버튼 을 누 르 면 표시 되는 상태 는 누 르 면 상태 입니다 . 구체적인 단계는 그림 5. 1 에 표시 되어 있습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure43

시 뮬 레이 션 할 때 버튼 은 작동 하지 않고 그림 5. 2 에 표시 된 바 와 같이 팝 업 상태 1 그림을 표시 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure44

버튼 을 누 르 면 그림 5. 3 과 같이 누 르기 상태 1 화 면을 표시 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure45

5. 3 사용 사례

5.3.1

다음 표 에 설명 된 이벤트 목록 :

컨트롤 초기 화

버튼 컨트롤 이 초기 화 될 때 트 리 거 되는 이벤트

컨트롤 제거

버튼 컨트롤 이 제거 될 때 트 리 거 되는 이벤트

클릭 합니다 .

버튼 컨트롤 클릭 이 활성화 될 때 이벤 트를 트 리 거 합니다 (미 끄 러 짐 없음).

긴 누 르기

& lt ; span class = " ne - text " > " 버튼 " 컨트롤 을 길 게 누 르 면 (500 ms) 이벤 트가 트 리 거 됩니다 .

터 치 스크 린 누 르기

버튼 컨트롤 을 누 르 면 이벤 트가 트 리 거 됩니다 (아 직 완료 되지 않은 클릭 만 누 르 면).

초 점 가져 오 기

버튼 컨트롤 을 누 르 면 이벤 트가 트 리 거 됩니다 (그 림 누 르 기로 전환 됨).

초 점을 잃 다 .

버튼 컨트롤 이 누 르 면 팝 업 으로 복 원 될 때 트 리 거 되는 이벤트

프로토 콜 관련 작업 은 버튼 컨트롤 작업 과 유사 하며 반복 되지 않습니다 .

5.3.2

기본 인터페 이스 (윈 도우 NEW 1) 에서 키 의 여러 그룹 을 클릭 하여 모 드 선택 인터페 이스 (윈 도우 NEW 2) 로 전환 하고 모 드 선택 인터페 이스 에서 원하는 모 드를 클릭 하여 선택 하고 기본 인터페 이스 로 돌아 갑니다 . 기본 인터페 이스 에서 키 의 여러 그룹 은 해당 모 드 이미지를 표시 하고 모 드를 엽 니다 .

작업 단계

프로젝트를 열 거나 새 프로젝트를 만들고 일반적인 컨트롤 모듈 의 창 을 클릭 하여 그림 5. 4 와 같이 두 개의 창 을 추가 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure46

창 NEW 1 에 여러 키 컨트롤 세 트를 추가 하고 이벤 트를 추가 하고 설정 하기 위해 여러 키 세 트를 선택 합니다 . 그림 5. 5 에 표시 된 작업 절차 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure47

3. 창 NEW 1 의 여러 키 컨트롤 세 트를 선택 하고 속 성 창 에서 변 수 바 인 딩 을 클릭 하여 변 수를 바 인 딩 하고 그림 5. 6 에 표시 된 작업 단계를 수행 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure48

4, 창 NEW 2 를 클릭 하여 두 버튼 컨트롤 을 추가 하고 두 버튼 컨트롤 에 두 이벤 트를 추가 합니다 . 이벤트 트 리 거 는 클릭 입니다 . 이벤트 중 하나는 창 을 NEW 1 로 전환 하는 것이며 , 다른 이벤 트는 " 변 수 작업 "- " 변 수 설정 ", 대상 변 수 바 인 딩 " Var 0 " 변 수 , 설정 값 은 상 수 설정 , 첫 번째 버튼 은 입력 상 자에 "0 " 을 입력 하고 , 두 번째 버튼 은 그림 5. 7 과 같이 입력 상 자에 "1 " 을 입력 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure49

5 、設定按钮控件图像,如图 5.8 所示 (注:多组按键的图像設定同“

https://image.modbus.cn/wp-content/uploads/2023/06/16 <img id="pyDqn" class="ne-image" src="8 75 7 14 98 28 6 - e 15 48 c 5 f - 5 e 2 f - 48 5 c - 9 d 84 - 29 1988 b 55 d 7 f - 3. p ng " wid th =" 5 19 "/ >

시 뮬 레이 션 데 모 시 여러 키 세 트를 클릭 하면 NEW 2 창 으로 전환 되며 , 버튼 2 를 클릭 하면 NEW 1 창 으로 전환 되며 , 여러 키 세 트는 그림 5. 9 및 5. 10 과 같이 전환 된 두 번째 세 트의 이미지를 표시 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure50

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure51

6. 3 상태 다 중 그룹 키 응용

6. 1 컨트롤 소개

3 상태 다 중 키 세 트는 다 중 키 세 트의 기능 과 동일 하지만 버튼 을 무 효 상태 (사 용 불가능 상태) 에 설정 하는 데 사용되는 무 효 상태 표시 기능을 추가 합니다 .

6. 2 사진 대체 방법

3 상태 다 중 그룹 키 컨트롤 을 선택 하고 오른쪽 속 성 창 을 클릭 하여 3 상태 다 중 그룹 키 에 대한 이미지 수 정을 수행 합니다 . 작업 단계는 그림 6. 1 에 표시 되어 있습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure52

팝 업 상태 1 은 3 상태 다 중 그룹 키 가 작동 하지 않을 때 표시 되는 상태 입니다 .

누 르기 상태 1 은 3 상태 다 중 그룹 키 를 누 르 면 표시 되는 상태 입니다 .

무 효 상태 1 은 3 상태 다 중 키 가 활성화 되지 않은 경우 표시 되는 상태 입니다 .

시 뮬 레이 션 중에 3 상태 다 중 키 그룹 이 작동 하지 않을 때 그림 6. 2 에 표시 된 바 와 같이 팝 업 상태 1 을 표시 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure53

3 상태 다 중 그룹 키 를 클릭 하여 누 르 면 그림 6. 3 과 같이 누 르기 상태 1 이 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure54

3 상태 다 중 키 그룹 이 비 활 성 화 상태 일 경우 그림 6. 4 에 표시 된 것처럼 비 활 성 상태 1 이 표시 됩니다 .

https://image.modbus.cn/wp-content/uploads/2023/06/1687571499731-1dcb2abe-6e61-46e5-a1e7-101cd96d3dcd-3.jpg <img id="dUG8g" class="ne-image" src="8 "/>

6. 3 사용 사례

6.3.1

다음 표 에 설명 된 이벤트 목록 :

컨트롤 초기 화

버튼 컨트롤 이 초기 화 될 때 트 리 거 되는 이벤트

컨트롤 제거

버튼 컨트롤 이 제거 될 때 트 리 거 되는 이벤트

클릭 합니다 .

버튼 컨트롤 클릭 이 활성화 될 때 이벤 트를 트 리 거 합니다 (미 끄 러 짐 없음).

긴 누 르기

단 추 컨트롤 을 길 게 누 르 면 (500 ms) 이벤 트가 트 리 거 됩니다 .

터 치 스크 린 누 르기

버튼 컨트롤 을 누 르 면 이벤 트가 트 리 거 됩니다 (아 직 완료 되지 않은 클릭 만 누 르 면).

초 점 가져 오 기

버튼 컨트롤 을 누 르 면 이벤 트가 트 리 거 됩니다 (그 림 누 르 기로 전환 됨).

초 점을 잃 다 .

버튼 컨트롤 이 누 르 면 팝 업 으로 복 원 될 때 트 리 거 되는 이벤트

프로토 콜 관련 작업 은 버튼 컨트롤 작업 과 유사 하며 반복 되지 않습니다 .

6.3.2

다음 사례 는 가 습 기 버튼 설 정을 통해 설명 으로 가 습 기 버튼 을 클릭 하면 가 습 기가 작동 하기 시작 하며 자동 모 드 버튼 을 클릭 하면 가 습 기 버튼 이 무 효 상태 입니다 .

작업 단계

그림 6. 5 와 같이 프로젝트를 열 거나 새 프로젝트를 만들고 다 중 키 세 트 와 3 상태 다 중 키 세 트를 추가 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure55

2, 각 컨트롤 의 위치 와 크 기를 조정 하고 이미지 대체 를 설정 합니다 (참 고 : 다 중 키 그룹 은 자동 모 드 , 3 상태 다 중 키 그룹 은 가 습 모 드) 그림 6. 6 과 같이 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure56

여러 키 컨트롤 그룹 을 선택 하고 추가 합니다 .두 개의 이벤트를 설정하고, 이벤트 트리거는 모두 클릭이며, 그림 6. 7 과 같이 두 이벤트의 처리 방법과 대상 변수를 설정합니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure57

4, 여러 키 세트의 변수 바인딩을 설정하고, 바인딩된 컨트롤 속성은 그림 인덱스, 데이터 소스 바인딩 및 변환 모드 등의 설정 작업으로, 그림 6. 8 에 표시된 바와 같이.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure58

newmode 변수는 다음과 같습니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure59

자동 모드 변수는 다음과 같습니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure60

5, 세 상태 다중 그룹 키 컨트롤을 선택하여 이벤트를 추가하고, 이벤트 트리거는 클릭, 이벤트 처리 방법 및 매개 변수 설정, 그림 6. 9 에 표시된 것과 같습니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure61

6.9

6, 두 개의 삼상태 다중 그룹 키의 변수 바인딩을 추가하고, 두 변수가 바인딩된 컨트롤 속성과 데이터 소스 및 변환 모드 등의 설정 작업, 그림 6. 10 과 같이.

주: 유효하지 않은 상태 설정은 3 상태 다중 키 그룹에 대한 변수 바인딩을 필요로하며, 바인딩된 컨트롤 속성은 작동 활성화, 데이터 소스, 변환 모드, 변환 방법 및 변환 매개 변수 설정을 참조하여 그림 6. 10 에 표시되어 있으며, 자동 모드 변수의 값은 0 과 비교되며, false 는 3 상태 다중 키 그룹이 비활성화 상태인 경우 유효 상태이며, true 는 3 상태 다중 키 그룹이 유효 상태입니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure62

시뮬레이션 시, 가습 버튼을 클릭하여 가습 모드를 엽니다; 자동 모드 버튼을 클릭하면 가습 버튼이 그림 6. 11 및 6. 12 에 표시된 것처럼 비활성 상태입니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure63

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure64

7. 다중 무선 단추 적용

7. 1 제어기소

다중 무선 버튼 컨트롤은 다중 키 기능과 유사하며 무선 버튼의 기능을 포함하고 이미지를 통해 다른 상태를 표시할 수 있으며 다중 스위치로 해석됩니다.변수 바인딩의 데이터 속성이 그림 인덱스일 때 바인딩된 값에 따라 이 스위치 그림 세트를 호출하여 스위치 그림의 자율적인 전환 효과를 달성하고 동시에 이 컨트롤은 다른 상태의 누르거나 튀는 표시 효과를 표시할 수 있다.

7. 2 사진 교체 방법

다중 무선 버튼 컨트롤 세트를 선택하고 오른쪽 속성 창을 클릭하여 다중 무선 버튼 세트의 이미지 수정을 수행합니다. 작업 단계는 그림 7. 1 에 표시되어 있습니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure65

선택되지 않은 상태 1 은 여러 라디오 단추 그룹이 작동하지 않을 때 표시되는 상태입니다.

선택되지 않은 상태 1 을 누르면 여러 무선 단추 세트를 선택되지 않은 상태에서 누르면 표시되는 상태;

선택 상태 1, 여러 라디오 버튼 세트를 누를 때 표시되는 상태;

선택 상태 1 을 누르면 선택 상태에서 여러 무선 단추 세트를 누르는 동안 표시되는 상태입니다.

시뮬레이션 중에 다중 무선 버튼 세트가 작동하지 않을 때 그림 7. 2 와 같이 선택되지 않은 상태 1 이 표시됩니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure66

다중 무선 단추 그룹은 그림 7. 3 과 같이 선택되지 않은 상태 누르기 과정에서 선택되지 않은 상태 누르기 1 을 표시합니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure67

그림 7. 4 와 같이 여러 무선 단추를 누르면 선택 상태 1 이 표시됩니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure68

다중 무선 단추 그룹은 그림 7. 5 와 같이 선택 상태 누르기 과정에서 선택 상태 누르기 1 을 표시합니다.

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure69

7. 3 사용 사례

7.3.1

다음 표에 설명된 이벤트 목록:

& lt; td width =" 37 5 ">

라디오 단 추 초기 화 시 트 리 거 이벤트

컨트롤 초기화

컨트롤 제거

라디오 단 추 제거 시 트 리 거 이벤트

터 치 스크 린 누 르기

라디오 단 추 를 누 르 면 이벤 트가 트 리 거 됩니다 (클 릭 만 누 르 면 완료 되지 않 음).

선택 됨

라디오 컨트롤 상태 가 선택 된 경우 트 리 거 이벤트

선택 되지 않 음

라디오 컨트롤 상태 가 선택 되지 않은 경우 트 리 거 이벤트

프로토 콜 관련 작업 은 버튼 컨트롤 작업 과 유사 하며 반복 되지 않습니다 .

7.3.2

필요한 다른 모 드 버튼 (단 추 컨트롤) 을 클릭 하면 해당 모 드 켜 기 버튼 (다 중 무 선 버튼 컨트롤) 이 선택한 해당 모 드 이미지를 표시 하고 모 드 켜 기 버튼 을 클릭 하면 모 드가 켜 집니다 .

작업 단계

그림 7. 6 과 같이 프로젝트를 열 거나 새 프로젝트를 만들고 세 개의 버튼 컨트롤 과 다 중 라디오 버튼 을 추가 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure70

컨트롤 의 크기 및 위치를 조정 하고 설정 하고 그림 7. 7 과 같이 컨트롤 에 대한 이미지 대체 를 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure71

버튼 컨트롤 을 선택 하고 이벤 트를 추가 하고 세 이벤트 트 리 거 는 모두 " 클 릭 " 이며 처리 방법 및 대상 변 수 및 기타 매 개 변 수 설정 작업 은 그림 7. 8 과 같이 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure72

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure73

4, 두 개의 다 중 그룹 라디오 버튼 을 추가 하는 변 수 바 인 딩 을 설정 하고 , 두 개의 변 수 바 인 딩 작업 설정 은 그림 7. 9 에 표시 되어 있습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure74

그림 7. 9 다 중 무 선 단 추 그룹변 수 바 인 드

Var 0 과 Var 1 변 수는 다음과 같습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure75

5, 시 뮬 레이 션 데 모 , 공기 공급 모 드를 클릭 , 공기 공급 모 드 사진을 표시 하는 여러 무 선 버튼 그룹 , 공기 공급 모 드를 켜 기 위해 여러 무 선 버튼 그룹 을 클릭 ;

탈 습 모 드를 클릭 하면 여러 무 선 버튼 그룹 이 탈 습 모 드 사진을 표시 하고 여러 무 선 버튼 그룹 을 클릭 하여 선택 하여 탈 습 모 드를 엽 니다 .

냉 각 모 드를 클릭 하면 여러 무 선 버튼 세 트가 냉 각 모 드 이미지를 표시 하고 여러 무 선 버튼 세 트를 클릭 하여 그림 7. 10, 7. 11 및 7. 12 와 같이 냉 각 모 드를 엽 니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure76

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure77

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure78

8. 3 상태 다 중 그룹 라디오 버튼 적용

8. 1 컨트롤 소개

3 상태 다 중 그룹 라디오 버튼 컨트롤 은 다 중 그룹 라디오 버튼 기능 과 호 환 되며 , 버튼 을 무 효 상태로 설정 할 수 있는 무 효 상태 표시 기능 도 추가 됩니다 (법 적 사용 상태 없음).

8. 2 사진 교체 방법

3 상태 다 중 그룹 라디오 버튼 을 선택 하고 오른쪽 속 성 창 을 클릭 하여 3 상태 다 중 그룹 라디오 버튼 을 이미지 수 정을 수행 합니다 . 작업 단계는 그림 8. 1 에 표시 되어 있습니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure79

선택 되지 않은 상태 1: 3 상태 다 중 그룹 라디오 버튼 이 작동 하지 않을 때 표시 되는 상태 ;

선택 되지 않은 상태 누 르기 1: 3 상태 다 중 그룹 라디오 버튼 을 선택 되지 않은 상태 에서 누 르는 과정에서 표시 되는 상태 ;

선택 상태 1: 3 상태 다 중 그룹 라디오 버튼 을 누 를 때 표시 되는 상태 ;

선택 상태 누 르기 1: 3 상태 다 중 그룹 라디오 버튼 을 위해 선택 상태 에서 누 르는 과정에서 표시 되는 상태 ;

무 효 상태 1: 삼 상 태 다 중 그룹 라디오 버튼 이 활성화 되지 않은 상태 입니다 .

시 뮬 레이 션 중에 3 상태 다 중 그룹 라디오 버튼 이 작동 하지 않을 때 그림 8. 2 와 같이 선택 되지 않은 상태 1 을 표시 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure80

그림 8. 2.선택 되지 않은 상태 1

3 상태 다 중 그룹 라디오 버튼 은 그림 8. 3 과 같이 선택 되지 않은 상태 누 르기 과정에서 선택 되지 않은 상태 누 르기 1 을 표시 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure81

그림 8. 4 와 같이 3 상태 다 중 그룹 라디오 버튼 을 누 르 면 선택 상태 1 을 표시 합니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure82

3 상태 다 중 그룹 라디오 버튼 은 선택 상태 누 르기 과정에서 선택 상태 누 르기 1 을 표시 하여 그림 8. 5 와 같이 표시 됩니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure83

무 효 상태 는 3 상태 다 중 그룹 라디오 버튼 이 활성화 되지 않은 경우 표시 되는 상태 입니다 .

GUI Designer 버튼 클래스 컨트롤 사용 설명서Figure84

8. 3 이벤트 목록

다음 표 에 설명 된 이벤트 목록 :

컨트롤 초기 화

라디오 단 추 초기 화 시 트 리 거 이벤트

컨트롤 제거

라디오 단 추 제거 시 트 리 거 이벤트

터 치 스크 린 누 르기

라디오 단 추 를 누 르 면 이벤 트가 트 리 거 됩니다 (클 릭 만 누 르 면 완료 되지 않 음).

선택 됨

라디오 컨트롤 상태 가 선택 된 경우 트 리 거 이벤트

선택 되지 않 음

라디오 컨트롤 상태 가 선택 되지 않은 경우 트 리 거 이벤트

프로토 콜 관련 작업 은 버튼 컨트롤 작업 과 유사 하며 반복 되지 않습니다 .

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 *.