[연습] 놓지 않은 프론트엔드 개발자의 꿈#1 - HMI 작화

PLC로 프론트엔드 개발하기ㅋㅋ

• Proface로 HTML을 하고, PLC로 javascript를 만들것
• 사용자 로그인을 통해서만 메인 작화에 접속할 수 있는 프로그램을 만들기

 

 

 

 

 

HTMI 작화(1)

• 왼쪽 상단에 "문자열"을 사용해서 크기 및 색상 설정과 텍스트 입력

 

 

 

 

HTMI 작화(2)

• 오른쪽 상단은 "이미지"를 사용해서 아날로그 시계를 넣었다

 

 

 

 

 

HMI 작화(3)

• 객체의 틀을 잡기위해 "사각형"으로 전체 화면을 밑 그림

 

 

 

 

 

HMI 작화(4)

• "데이터 표시기"를 사용하여 문자열 입력, 출력
• 입력 허가를 하여 "데이터 표시기"에 값을 입력 할 수 있음
• 영어는 1개문자 8비트(+공백). 즉, 10개 알파벳은 80비트(+공백)[5워드]를 점유함 

 

 

 

 

 

HMI 완성

• 회원가입 페이지 완성

 

 

 

 

 

PLC,Proface 프로그램

LoginPage.prx

1.21MB

LoginPage.gxw

0.89MB