eHMI 데모로 정수장 운영 간소화: PLCnext Engineer 쇼케이스

안녕하세요 모두, 이번 여름이 PLCnext 기술로 처음 작업해본 경험이었고 제가 할 수 있었던 것을 공유하고 싶습니다. 더 구체적으로 PLCnext Engineer의 eHMI 기술을 다뤘습니다. 저처럼 예술적 능력이 없는 분들은 화면을 처음부터 그리기보다는 그래픽 디자이너 등이 미리 그려둔 이미지 세트를 사용하는 게 나을 수 있습니다. 그래서 여기에서 시작했습니다.

그래픽 디자이너가 이미 설계한 다양한 SVG 이미지가 들어있는 폴더를 받았습니다. 모르시는 분들을 위해: SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)입니다. 이미지 크기가 품질에 영향을 주지 않는 특수한 이미지입니다. 일반 이미지는 확대하면 픽셀화되지만 SVG 이미지는 품질을 유지합니다.

하지만 다음 부분에서 까다로워질 수 있습니다. PLCnext Engineer로 가져온 이미지에는 세부 애니메이션을 넣을 수 없습니다. 예를 들어 탱크 이미지를 가져왔다면 탱크 외곽선을 선택해 가득 찼을 때 녹색으로 바꾸는 게 불가능합니다. HMI에서 애니메이션하려는 요소는 PLCnext Engineer에서 직접 그려야 합니다.

그래서 타협해야 했습니다. Inkscape라는 무료 외부 리소스를 사용해 주어진 이미지를 원하는 정수장 시스템으로 조작했습니다. 그런 다음 HMI에서 애니메이션이 필요한 요소를 선택해 삭제했습니다. 결국 상세 레이어(detailed layer)라고 부른 것을 얻었습니다:

파이프에 물이 차오르는 애니메이션도 원해서 클립 패스(clip-path) 또는 컷아웃 레이어(cutout layer)를 만들어 상세 레이어 뒤에 배치해 애니메이션용 배경 요소를 숨겼습니다:

위 이미지들을 임포트하고 PLCnext Engineer에서 애니메이션 요소를 생성한 후 최종 HMI 화면:

이 프로젝트는 제 GitHub에서 상세한 생성 설명과 보너스 프로젝트와 함께 확인할 수 있습니다: plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation