안녕하세요. 슬남매맘입니다.
둘째를 낳고 복직하고 맡게된 프로젝트가 TouchGFX를 활용해서 LCD 화면을 구현하는거였어요!
그전에는 디자인팀한테 받아서 좌표 하나하나 잡고 어렵게했었는데
STM사에서 이 툴을 개발하면서 개발기간을 조금더 단축해주었어요~!
기초부터 하나하나 포스팅해보려고합니다.
TouchGFX는 버전이 여러가지입니다.
저는 4.20.0을 이용하고 있어요.
현재는 21인가 23인가 까지 나온것으로 알고있어요.
버전마다 조금씩 다르니 참고하세요~
예시 프로젝트를 하나 만들고 거기에 하나씩 채워나가볼게요.
맨처음 빈 프로젝트를 만들면 Screen이 하나 있어요!
노란색 박스를 둔 곳이 여러가지 디자인을 추가 할 수 있어요!
텍스트 박스, 이미지, 게이지, 슬라이드바 기타 등등
제일 많이 쓰이고 제일 기초인 텍스트 박스를 추가해 볼게요.
노란색을 눌러 추가해주면됩니다.
우측에보면 TextArea에 대한 특성들을 변경 할 수 있어요!
맨위 textArea1이라고 적힌 부분이 해당 변수명이 되고,
Location은 위치를 지정할 수 있어요.
여기서 Auto-size를 해제하면 사용자가 지정할 수 있어요.
추후 다국어 적용을 위해 넉넉하게 잡아주면 좋아요.
그리고 Text에 보면 ID가 있는데 이 부분이 중요한 포인트예요!
처음에는 Auto-generated라고 자동 생성되었다고 뜨는데, 이부분을 좌측바에 있는 Texts에서 확인 할 수 있어요.
이렇게 확인이 가능하지만, 저건 조금 비추천방법이고,
Add new text를 눌러서 textArea에 추가할 텍스트를 추가하고 해당 ID로 지정해주는 방법이 더 좋습니다.
이렇게 id sen_Hello로 텍스트는 Hello로 추가해주었어요.
Alignment를 누르면 정렬을 변경할 수 있어요! 중간정렬로 해보겠습니다.
다시 좌측바 Canvas로 돌아와서 해당 ID를 적용해볼게요
Text ID에 돋보기 버튼을 눌면 아까 추가한 sen_Hello가 나와요~!
그것을 눌러주면 됩니다.
그리고 글자색도 흰색으로 변경해보았어요.
이렇게 적용이 완료된 모습을 보실 수 있습니다.
다음번에는 글씨체 지정 및 크기 변경하는 것으로 돌아올게요~!
'프로그래밍 > TouchGFX' 카테고리의 다른 글
| TouchGFX:) 다국어 적용하기 (0) | 2023.06.14 |
|---|
