GUI Designer 입력 상자 사용 설명서

freeFree Technical Resource

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

GUI Designer 입력 상자 사용 설명서
1. 입력 상자 소개 입력 상자는 키보드와 함께 사용되며 사용자는 키보드를 통해 입력 상자에 내용을 입력하고 인간 - 기계 상호 작용을 수행하며 동적 입력을 수행하며 입력 상자는 암호 입력 등 장면에 적용 할 수 있습니다.
2.입력 상자를 추가하는 방법 엔지니어링 파일을 열거나 새 엔지니어링 파일을 작성하고 도구 상자에서 입력 클래스 컨트롤을 클릭하고 그림 2. 1 과 같이 입력 상자 컨트롤을 추가하려면 입력 상자 아이콘을 클릭합니다.
GUI Designer 입력 상자 사용 설명서Figure
그림 2. 1 입력 상자 추가
3.입력 상자의 모양을 설정하는 방법
3.1입력 상자에서 이미지를 설정하는 방법 입력 상자를 선택하고 오른쪽 속성 창에서 이미지를 클릭하여 입력 상자의 배경을 설정하고 추가 버튼을 클릭하여 입력 상자의 선택 항목을 추가하여 표시합니다. 배경, 즉 입력 상자가 작동하지 않을 때 표시되는 이미지, 선택 항목은 입력 상자를 클릭하여 표시되는 내용으로 표시됩니다. 그림 3. 1 과 같이 표시됩니다.
GUI Designer 입력 상자 사용 설명서Figure1
GUI Designer 입력 상자 사용 설명서Figure2
그림 3. 1 이미지 설정
3.2텍스트 입력 상자에 대한 문자를 설정하는 방법 입력 상자의 문자 설정은 문자 컨트롤과 동일하며, 구체적인 조작은 더 이상 반복되지 않으며, 그림 3. 2 에 표시된 것처럼 문자 컨트롤 사용 설명서를 참조하십시오.
GUI Designer 입력 상자 사용 설명서Figure3
그림 3. 2 문자 설정
4.입력 상자에 대한 기타 설정 방법 오른쪽 속성 창에서 클릭하면 입력 상자의 입력 텍스트 길이 제한, 입력 모드 및 초기화 시 입력 초점을 설정할 수 있습니다. 그림 4. 1 에 표시되어 있습니다.
GUI Designer 입력 상자 사용 설명서Figure4
그림 4. 1 Miscellaneous < sp 설정class = " ne - vie wer - b - fil ler "
4.1입력 텍스트 의 길이 제한 을 설정 하는 방법 " 입 력 텍스트 길이 제한 " 아래 의 입력 상 자를 클릭 하여 키 보 드 또는 " + "- " 버튼 을 통해 입력 텍스트 길이 제한 을 설정 하여 입력 텍스트 길이 제한 을 설정 합니다 . 즉 , 그림 4. 2 와 같이 입력 상 자가 입력 할 수있는 텍스트 길 이를 제한 합니다 .
GUI Designer 입력 상자 사용 설명서Figure5
그림 4. 2 입력 텍스트 길이 제한 설정
4.2입력 모 드를 설정 하는 방법 입력 모 드 아래 의 드 롭 다운 상 자를 클릭 하면 일반 입력 모 드 , 암호 입력 모 드 및 네트워크 IP 입력 모 드가 있으며 , 일반 입력 모 드 , 즉 입력 표시 모 드 , 암호 입력 모 드 , 즉 입력 표시 " * ", 네트워크 IP 입력 모 드는 네트워크 세 그 먼 트의 형태로 입력 표시 "19 2. xxx . xxx " 를 표시 합니다 . 그림 4. 3 과 같이 .
GUI Designer 입력 상자 사용 설명서Figure6
그림 4. 3 입력 모 드 설정
4.3초기 화 시 입력 초 점 가져 오 기 설정 방법 초기 화 시 입력 초 점을 얻기 위해 클릭 , 비 활 성 화 및 활성화 , 비 활 성 화 시 시 키 보 드 입력 시 입력 초 점을 얻기 위해 입력 상 자를 클릭 해야 입력 , 활성화 시 시 키 보 드 입력 시 직접 입력 상 자에 입력 할 수 있습니다 , 그림 4. 4 에 표시 된 바 와 같이 .
GUI Designer 입력 상자 사용 설명서Figure7
그림 4. 4 설정 초기 화 시 입력 초 점 가져 오 기
5.입력 상 자를 통해 암호 인터페 이 스를 설정 하는 방법 암호 창 은 암호 를 입력 하여 확인 하고 올바른 암호 를 입력 하면 창 을 창 NEW 2 로 전환 합니다 .
1) 컨트롤 을 추가 하는 방법 도구 상 자 에서 입력 클래 스 컨트롤 을 클릭 하고 , 입력 상 자 및 키 보 드 아이 콘 을 선택 하여 입력 상 자 및 키 보 드를 추가 하고 , 도구 상 자 에서 기능 설정 클래 스 컨트롤 을 클릭 하고 , 암호 확인 버튼 아이 콘 을 선택 하여 암호 확인 버튼 을 추가 하고 , 일반적인 컨트롤 모듈 에서 창 아이 콘 을 클릭 하여 창 NEW 2 를 추가 합니다 . 그림 5. 1 과 같이 표시 됩니다 .
GUI Designer 입력 상자 사용 설명서Figure8
그림 5. 1 컨트롤 추가
컨트롤 의 위치 와 크 기를 설정 하는 방법 입력 상 자를 선택 하고 오른쪽 속 성 창 에서 마 우스 또는 공 용 을 통해 입력 상 자의 위치 와 크 기를 설정 합니다 (암 호 확인 버튼 의 작업 은 그림 5. 2 에 표시 된 것과 같습니다).
https://image.modbus.cn/wp-content/uploads/2023/07/20230719080447569.jpg <img class="ne-image ne-image-preview" draggable="true" src="" />
그림 5. 2 컨트롤 의 위치 및 크기 설정
3. 입력 상 자를 설정 하는 방법 선택 입력 상 자 → 수정 입력 상 자의 컨트롤 이름은 "1 " → 입력 모 드 설정 은 " 암 호 입력 모 드 " → 초기 화 시 입력 초 점 설 정을 활성화 합니다 . 그림 5. 3 과 같이 표시 됩니다 .
GUI Designer 입력 상자 사용 설명서Figure9
그림 5. 3 입력 상 자 설정
비밀 번호 확인 버튼 을 설정 하는 방법 암호 확인 버튼 을 선택 → 텍스트 설정 입력 " 확 인 " → 기타 설정 → 암호 입력 상 자 컨트롤 이름 입력 "1 " (이 전 입력 상 자에 설정 된 컨트롤 이름 과 일치) → 암호 입력 확인 해야 할 암호 를 입력 합니다 . 예를 들어 " 123 45 6 " 를 입력 하십시오 . 그림 5. 4 와 같이 .
GUI Designer 입력 상자 사용 설명서Figure10
그림 5. 4 암호 확인 버튼 설정
비밀 번호 확인 버튼 이벤 트를 설정 하는 방법 암호 확인 버튼 을 선택 하고 오른쪽 속 성 창 에서 이벤 트를 클릭 합니다 → 추 가를 클릭 합니다 → 이벤 트가 " 암 호 확인 이 올바 르게 " 로 설정 됩니다 → 처리 방법 아래 에서 " ...팝 업 처리 방법 창 → 선택 창 전환 에서 전환 창 → 대상 창 선택 NEW 2 그림 5. 5 와 같이 .
GUI Designer 입력 상자 사용 설명서Figure11
그림 5. 5 이벤트 설정
6. 시 뮬 레이 션 시 연 시 뮬 레이 션 실행 버튼 을 클릭 합니다 .
GUI Designer 입력 상자 사용 설명서Figure12
시 뮬 레이 션 실행 팝 업 창 암호 " 123 45 6 " 를 입력 하고 확인 버튼 을 클릭 하면 그림 5. 6 과 같이 창 이 NEW 2 로 전환 됩니다 .
GUI Designer 입력 상자 사용 설명서Figure13
그림 5. 6 암호 입력 확인 잘못된 암호 를 입력 하고 확인 버튼 을 클릭 하면 그림 5. 7 과 같이 동작 응답 이 없습니다 .
GUI Designer 입력 상자 사용 설명서Figure14
그림 5. 7 잘못된 암호 입력
& lt ; div class = " ne - inner - ov "erlay - container >>
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.

Open Debug Tools View Related Products
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 *.