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.문자 컨트롤의 모양을 설정하는 방법 컨트롤을 선택하고 오른쪽 속성 창에서 → 를 클릭합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure1
그림 3. 1 과 같이 추가 버튼을 클릭하여 여러 텍스트 디스플레이를 추가합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure2
그림 3. 1 모양 속성 수정
3.1텍스트 형태를 설정하는 방법 텍스트를 클릭하면 정적 텍스트 및 동적 텍스트가 있으며, 정적 텍스트는 일반적으로 수동으로 입력하는 내용에 사용됩니다. 정적 텍스트 입력 상자에 내부 용량을 입력하여 창에 직접 표시되며, 동적 텍스트는 그림 3. 2 와 같이 변수의 내용을 표시하는 데 사용됩니다.
GUI Designer 문자 컨트롤 사용 설명서Figure3
그림 3. 2 텍스트 형식 설정
3.2글꼴 수정 방법 동적 텍스트의 글꼴 표시를 수정하려면 사전 설정에 대해 자재 관리에 가져와야 합니다. 자세한 설정 방법은 ≪ 자원 사용 설명서 ≫ 를 참조하십시오. 정적 텍스트를 선택하고 글꼴 오른쪽에 있는 버튼을 클릭하여 글꼴 수정 창을 팝업하여 그림 3. 3 과 같이 필요에 따라 글꼴 크기를 수정할 수 있습니다.
GUI Designer 문자 컨트롤 사용 설명서Figure4
그림 3. 3 글꼴 수정
3.3문자 색상을 변경하는 방법 문자 색상 오른쪽에 있는 상자를 클릭하여 팔레트가 팝업되어 필요에 따라 문자 색상을 수정할 수 있으며 문자 색상은 그림 3. 4 와 같이 검정색으로 기본값으로 설정됩니다. & lt; div class = "ne - card - contai"ner >>
GUI Designer 문자 컨트롤 사용 설명서Figure5
그림 3. 4 문자 색상 수정
3.4배경색을 수정하는 방법 배경색 오른쪽에 있는 상자를 클릭하여 필요에 따라 배경색을 수정할 수 있는 팔레트가 팝업됩니다. 그림 3. 5 에 표시된 것처럼 배경색은 기본적으로 투명합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure6
그림 3. 5 배경색 수정
3.5정렬을 수정하는 방법 정렬 모드 아래의 버튼을 클릭하면 사용자가 입력한 텍스트의 정렬에 따라 수정할 수 있습니다. 정렬은 그림 3. 6 과 같이 기본적으로 중앙에 있습니다.
GUI Designer 문자 컨트롤 사용 설명서Figure7
그림 3. 6 정렬 수정
4.사용 사례
4.1여러 언어 전환을 설정하는 방법 라디오 버튼을 클릭하여 중국어 및 영어 표시를 전환하며, 구체적인 작동 방법 및 설정은 다음과 같습니다.
언어 표시를 추가하는 방법 메뉴 모음에서 항목을 클릭하고 다중 언어 설정 → 추가 를 클릭합니다 → 새로 추가 된 언어 입력 상자를 선택하여 그림 4. 1 과 같이 "영어" 로 이름을 수정합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure8
그림 4. 1 언어 추가
2 컨트롤을 추가하는 방법 일반적인 컨트롤 모듈의 창 아이콘을 클릭하여 창 NEW 2 를 추가하고, 창 NEW 1 에 텍스트 컨트롤 및 버튼 컨트롤을 추가하고, 그림 4. 2 와 같이 창 NEW 2 에 라디오 버튼을 추가합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure9
그림 4. 2 컨트롤 추가
3 다중 언어를 설정하는 방법 창 NEW 1 의 문자 컨트롤을 선택하고 오른쪽 속성 창에서 문자를 클릭합니다 → 정적 텍스트를 선택합니다 → 텍스트 입력 상자 아래 오른쪽 버튼을 클릭합니다 → 그림 4. 3 과 같이 두 언어의 입력 상자에 다른 언어의 문자를 입력합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure10
그림 4. 3 다중 언어 설정
변수 바인딩 추가 방법 창에서 라디오 버튼을 클릭하고 오른쪽 속성 창에서 변수 바인딩 → 추가 → 바인딩된 컨트롤 속성은 "선택 상태" → 데이터 소스 바인딩 "언어" → 변환 모드는 "양방향" → 변환 방법은 그림 4. 4 와 같이 기본값입니다.
GUI Designer 문자 컨트롤 사용 설명서Figure11
그림 4. 4 변수 바인딩 추가 참고: language 변수는 다음과 같습니다.
GUI Designer 문자 컨트롤 사용 설명서Figure12
5 이벤트를 추가하는 방법 창 NEW 1 의 버튼 컨트롤을 클릭하고 오른쪽 속성 창에서 이벤트 → 이벤트 추가 → 이벤트 "클릭" 으로 설정 → 프로세서법 아래 "클릭" 을 클릭합니다.팝업 처리 방법 창 → 선택 창 전환에서 "전환 창" → 대상 창 선택 "NEW 2" 그림 4. 5 와 같이.
GUI Designer 문자 컨트롤 사용 설명서Figure13
그림 4. 5 버튼 컨트롤 이벤트 추가 창 NEW 2 에서 라디오 버튼을 클릭하고 오른쪽 속성 창에서 이벤트 → 이벤트 추가 → 이벤트 설정 "선택" → 처리자 법 아래에서 "선택" 을 클릭합니다.팝업 처리 방법 창 → 선택 창 전환에서 "전환 창" → 대상 창 선택 "NEW 1" 그림 4. 6 과 같이 표시됩니다.
GUI Designer 문자 컨트롤 사용 설명서Figure14
그림 4. 6 라디오 버튼 이벤트 추가
6. 시뮬레이션 시연 시뮬레이션 실행 버튼을 클릭하여 시뮬레이션 실행 창을 팝업하고 문자 컨트롤은 기본적으로 중국어를 표시하고 라디오 버튼을 클릭하면 문자 컨트롤은 그림 4. 7 과 같이 영어로 표시됩니다.
GUI Designer 문자 컨트롤 사용 설명서Figure15
그림 4. 7 시뮬레이션
4.2단추를 사용하여 문자 컨트롤 표시를 전환하는 방법
1) 컨트롤을 추가하는 방법 일반 컨트롤 모드 클릭블록의 텍스트 및 버튼 아이콘에 그림 4. 8 과 같이 텍스트 컨트롤과 버튼 컨트롤을 추가합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure16
그림 4. 8 컨트롤 추가
2. 문자 컨트롤을 설정하는 방법 문자 컨트롤을 선택하고 오른쪽 속성 창에서 문자를 클릭합니다 → 추가 버튼을 클릭하여 여러 텍스트를 추가합니다 → 텍스트를 클릭합니다 → 정적 텍스트를 선택합니다 → 그림 4. 9 와 같이 입력 상자에 표시해야 할 내용을 입력합니다.
GUI Designer 문자 컨트롤 사용 설명서Figure17
그림 4. 9 문자 컨트롤 설정
문자 컨트롤 변수 바인딩을 설정하는 방법 문자 컨트롤을 선택하고 오른쪽 속성 창에서 변수 바인딩 → 추가 → 바인딩된 컨트롤 속성은 "텍스트 인덱스" → 데이터 소스 바인딩 "Var 0" → 변환 모드는 "단방향" → 변환 방법은 그림 4. 10 과 같이 "기본값" 입니다.
GUI Designer 문자 컨트롤 사용 설명서Figure18
그림 4. 10 변수 바인딩 추가 주: Var 0 변수는 다음과 같습니다.
GUI Designer 문자 컨트롤 사용 설명서Figure19
버튼 컨트롤 이벤트를 설정하는 방법 버튼 컨트롤을 선택하고 오른쪽 속성 창에서 이벤트를 클릭합니다 → 추가를 클릭합니다 → 이벤트를 "클릭" 으로 설정합니다 → 클릭 처리 방법 아래의 "...팝업 처리 방법 창 → 선택 변수 작업에서 "변수 루프 증감" → 대상 변수 선택 "Var 0" → 단계 값 입력 "1" 은 그림 4. 11 과 같이 표시됩니다.
GUI Designer 문자 컨트롤 사용 설명서Figure20
그림 4. 11 이벤트 설정
5. 시뮬레이션 시연 시뮬레이션 실행 버튼을 클릭하면 시뮬레이션 실행 창이 팝업되며 버튼을 클릭하면 문자 컨트롤의 텍스트 표시가 그림 4. 12 와 같이 전환됩니다.
GUI Designer 문자 컨트롤 사용 설명서Figure21
그림 4. 12 시뮬레이션 데모 < span class = "ne - viewer - b - f"일러 >
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 *.