niagara N4 module : kitPxGraphics and kitN4svg

개요

Niagara에서 javaScript를 이용하여 chart등을 구현하기위한 방법에 대한 기술

1.비트맵과 벡터 방식 

kitPxGraphics 모듈과  kitN4svg모듈의 가장큰 차이는 이미지형식의 차이다.

kitPxGraphics : 비트맵 이미지 

*비트맵 이미지란? - 픽셀로 표현하여 이미지를 표현하여  다양한 색상을 가진 이미지를 만들 수 있으며 픽셀수를 증가시키면 좀더 정교한 표현을 할수 있다. 대신 이미지를 확대하고 축소할때 깨짐현상과 이미지 품질이 저하된다.  

kitN4svg : 벡터 이미지 

*벡터이미지란? - 점과 점을 연결함으로써 수학적 함수관계에 의해 이미지를 표현하여 확대 축소해도 해상도에 영향을 받지 않는다. 또한 용량이 많이 늘어나지 않는다 대신 사진이나 정교한 이미지 표현에는 한계를 가지고 있다.

나이아가라 화면상에서 확인해보자 

                 (그림1-kitPxGraphics 밸브)                   (그림2-kitN4svg 밸브)

 나이아가라에서 각 모듈이 제공하는 밸브 이미지를 470x470 크기로 px화면에 구현한 그림이다.

(그림1)의 경우는 크기를 키운탓에 이미지 픽셀이 부분부분 깨진것을 확일할 수있다 하지만 (그림2)와 비교할때 색깔 및 이미지의 정교함이 더 높다.

(그림2)의 경우는 크기를 키워도 이미지가 깨진부분이 없지만 매우 단순하게 표현되어있다.

   

2.제공하는 이미지

kitPxGraphics : 23개 장비 

kitN4svg : 25개 장비

 각 모듈이 제공하는 장비 이미지다 폴더 개수 차이는 있지만 기계설비 그래픽을 구현하는데에는 두 모듈 다 부족함은 없다. 또한 장비 폴더에 들어가면 세부 분류가 되었어 원하는 그래픽을 찾을 수 있다.  

3.결론

  각 이미지의 특성을 알고서 상황에 맞는 이미지를 표현하는것이 좋다. 

예를들어 한 px 파일에 여러 장비를 표현해야 하는 경우 svg 파일을 제공하는 kitN4svg모듈 이미지를 사용하는것이 시스템 부하를 줄일수 있어 좋다고 생각한다. 대신 그래픽 구현이 매우 단순해질 수 있다.

 가장 좋은 방법은 둘다 섞어서 쓰는 방법이다 그래픽의 일관성 측면을 고려하여 화면을 구성한다면 효율적인 퍼포먼스를 낼수 있을것이다.