단선도 제작기

단선도
출처 : https://www.famictech.com/ko/automation-studio-%EC%A0%84%EB%AC%B8%EA%B0%80%EC%9A%A9/%EC%A0%84%EA%B8%B0%20%EB%8B%A8%EC%84%A0%20%EA%B2%B0%EC%84%A0%EB%8F%84.html

2016년 여름 단선도 제작 프로그램을 웹으로 구현 하는 미션이 주어졌다. 그것도 ‘웹’으로

전선, 변압기 등을 추가/삭제 하고 지정하여 작성하고 저장이 가능해야 했다. 회의가 지속되는동안 머릿속에서 설계를 진행 했다. jquery-ui의 draggable 을 사용하여 HTML코드를 적절히 섞어 만들면 될거 같았다. HTML 커스텀 태그로 전선, 변압기, 종류별 센서, 차단기 등 태그를 각각 만들고 그 위치를 top, left CSS를 사용하여 위치를 잡고 위 아래 개념은 z-index로 설계 하고 프로그램 개발을 진행하였다.

시간은 4개월 남짓 빠듯했다. 이 단선도 프로그램 말고도 소켓통신으로 센서별 상태를 받아오는 프로그래밍도 해야 했고, 일반적인 CRUD화면도 제작 해야 했다.

프로그래밍은 jquery의 plugin형태로 시작하였다. Single Line Diagram을 따서 SLD로 프로젝트 이름을 지었다. plugin형태의 가이드라인을 따르고 기본적인 아이템을 정의 했다.

각각의 고유이름과 기본적인 설정내용이 담겨있다.

단선도에 필요한 선과 아이템으로 구분하여 정의 하였다. 선의 경우 가로세로 방향을 지정하였고, 가로 방향일경우 세로로 크기를 늘리거나 하지 못하도록 막아 두었다. 세로 방향의 경우는 반대로 지정하였다. CSS와의 합을 맞추기 위하여 아이템의 실제 width, height 크기를 지정하고, 이미지를 지정하였다.

HTML 태그를 기반으로 제작하여

뼈대가 되는 DOM구조를 생성했다.

커스텀 태그를 사용하여 제작했고 각 상태는 css class를 추가/삭제하여 상태를 나타내었다. 각 태그는 마우스 우 클릭을 사용하여 각도를 회전하거나 앞으로/뒤로 하여 태그의 앞뒤 순서를 변경할수 있도록 하였다.

다중선택 박스를 만들기 위하여 마우스 이벤트를 만들고 있다.

다중선택기능을 만들었다. 마치 바탕화면에 아이콘을 다중선택하기 위하여 드래그를 했을때 푸른색 박스를 만들고 그 박스 안에 있는 객체들을 선택하기 위한 그 기능이다. 마우스를 눌렀을때 사각형 박스를 만들어 마우스 좌표와 일치 시키고, 누른상태에서 이동했을때 top, left, width, height 값을 적절히 섞어 박스의 크기를 마우스 이동거리만큼 늘어나도록 하였고, 마우스를 클릭한 – 값에 대해서도 고려하여 개발하였다. css를 사용하여 해당 박스를 반투명한 느낌으로 그럴 싸 하게 제작하였다. 그리고 마우스를 떼었을때 눌렀을때의 좌표와 떼었을때의 좌표를 기준으로 그 안에 있는 객체가 선택되도록 했다. css를 사용하여 선택되어있는 느낌을 주었다.

객체의 추가는 우클릭을 했을 때 마우스 주위를 동그랗게 감싸는 형태의 메뉴를 추가하여 클릭하면 단선도에 추가되도록 하였다.

그리고 이런 툴을 사용하는데 가장 중요한 단축키를 지정하였다.
제일 많이 사용하는 단축키인 Ctrl+C, Ctrl+V 키를 구현하였다. 사실상 클립보드를 직접 사용하기는 어려워 sessionStorage를 사용하여 Ctrl+c를 누를때 선택된 객체의 HTML 태크를 몽땅 저장하고 ctrl+v를 했을때 그 저장한 HTML태그를 불러내 좌표에 +30px씩 밀어 붙여넣기가 되도록 구현하였다.
물론 Ctrl+a (전체선택), 상하좌우 커서이동, delete키와 매핑하여 작동되도록 하였다.

약 두 달만에 단선도 제작프로그램을 마쳤다.

아래 링크를 통해서 테스트해 볼수 있다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다