X-SCADA AI로 작화된 HMI를 WinForm에 적용

XISOM .NET Library

X-SCADA AI로 작화된 HMI를 WinForm에 적용

관리자 0 585

1. 오른쪽 솔루션 탐색기에서 Form1.cs 파일을 마우스 오른쪽 클릭한 뒤 [디자이너 보기]를 클릭한다

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965073_9083.png
 


2. 속성에서 Form1 컨트롤의 크기(Size)를 1920, 1080 (너비, 높이) 으로 설정한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965079_3323.png
 


3. 왼쪽에 [도구 상자] 탭에 없다면, 상단 보기 > 도구 상자 를 클릭하여 활성화해준다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965085_422.png
 


4. 왼쪽 도구상자에서 panel이라고 검색한 다음 Panel을 winform 위로 드래그하여 생성한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965102_6544.png
 


5. 생성된 Panel의 속성에서 Dock 속성을 None에서 Top으로 변경시킨다.

· 아래와 같이 설명없이 모습만 보이는 경우, 가장 위의 선택지가 Top 방식이다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965110_1098.png
 


6. 도구상자에서 label이라고 검색한 다음 아래와 같이 3개의 레이블을 생성한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965120_4796.png
 


7. Label 속성 > 모양 > Text에서 내용을 아래와 같이 수정한다. (3개의 Label 모두 수정)

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965127_541.png
 


8. 도구상자에서 textbox라고 검색한 다음 아래와 같이 3개의 텍스트박스를 생성한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965134_6702.png
 


9. TextBox 속성 > 디자인 > (Name)에서 이름을 변경시킨다.

· 왼쪽 TextBox부터 순서대로 이름을 tagNameBox , curValueBox , setValueBox 으로 설정한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965143_3273.png
 


10. 도구상자에서 button이라고 검색한 다음 아래와 같이 버튼을 1개 추가한다.

· 해당 버튼 속성 > 모양 > Text 를 “적용”이라고 수정한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965149_7419.png
 


11. Button 속성 > 디자인 > (Name)에서 "setButton"이라고 이름을 수정한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965155_9609.png
 


12. ScadaBrowser를 추가하기 위해 도구상자에서 마우스 오른쪽 클릭 후 [항목 선택]을 클릭한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965167_9826.png
 


13. 도구 상자 항목 선택 창에서 오른쪽 아래에 있는 [찾아보기]를 클릭한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965180_4314.png
 


14. X-SCADA AI 설치 폴더에 있는 Xisom.Scada.Browser.dll을 찾아 [열기]를 클릭한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965188_7725.png
 


15. 구성 요소에 ScadaBrowser가 추가/체크선택 된 것을 확인한 뒤 [확인]을 클릭한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965196_1033.png
 


16. 도구상자에 추가된 ScadaBrowser를 winform 위로 드래그하여 생성한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965202_5195.png
 


17. ScadaBrowser 속성에서 (Name)과 Dock을 아래와 같이 설정한다.

· 속성 > 디자인 > (Name)을 browser 로, 레이아웃 > Dock을 None에서 Fill로 설정한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965213_092.png
 


18. Form1.cs 코드 보기 상태에서 X-SCADA AI 화면 지정을 위해 아래와 같이 소스를 작성한다.

· browser.Navigate 함수를 통해 특정 페이지를 연동한다.

· 페이지 수가 2개 이상일 경우 페이지 Index번호 지정 ([0]이 1번째 페이지라는 의미)

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965230_2027.png
 

browser.Navigate(Program.document.Pages[0]);

browser.FitToWindow = true;



19. Form1.cs 디자이너 상태에서 [적용] 버튼을 선택한 뒤 속성에서 [이벤트] 아이콘을 클릭한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965240_2719.png
 


20. 작업 항목 > Click 이벤트의 우측 입력 공간을 마우스로 더블클릭한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965249_3934.png
 


21. 자동 생성된 메소드에 아래와 같이 실행될 스크립트를 작성한다.

· Form1.cs 디자이너 보기 상태에서 만든 객체들과 (Name)이 잘 매칭되는지도 확인한다.

· tagNameBox : 선택한 태그명 Label  /  setValueBox : 설정값 Label

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965263_352.png
 

private void setButton_Click(object sender, EventArgs e)

{

    string tagName = tagNameBox.Text;

    int setValue = Convert.ToInt32(setValueBox.Text);


    var tag = Program.document.Tags.GetByFullName(tagName);

    tag.Value = setValue;

}



22. Visual Studio 도구모음 중 [시작]을 눌러 프로젝트를 실행한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965274_8106.png
 


23. 실행된 프로그램에서 X-SCADA AI 파일을 잘 불러오는지, 직접 만든 객체들이 잘 동작하는지 확인한다.

· X-SCADA AI의 슬라이드를 조작해 값을 잘 전달하고, 모니터링 기능이 잘 동작하는지 확인한다.

· 설정값 Label에 값을 입력한 뒤 [적용] 버튼을 눌러 X-SCADA AI로 값을 잘 전달하는지 확인한다.

e6ce5bdb659b4d6fe2cbf574e08fc996_1707965280_7213.png
 


프린트
0 답글
로그인한 회원만 댓글 등록이 가능합니다.
제목