이번에 프로그램 하나를 개발해야 하는데요…
기기랑 시리얼 통신을 통해서 데이터를 계속 받아옵니다.
그래서 그 데이터를 기반으로 이와 같은 화면을 만들어야 하거든요.
격자 무늬는 필요 없고 저 색깔 표현을 해줘야 하는데 어떻게 해야할지 막막하네요.
일단 검은색으론 표시를 해보긴 했는데 FillRectangle 함수를 이용해서 그냥 작은 네모로 표현을 하다보니 이미지와 같이 부드럽게도 안되고 색깔은 어찌저찌 할꺼같지만요…
일단 구현해야 되는건 저런 화면입니다. 데이터 값은 ushort[48, 128]로 좌표 처럼 넘어오며 값은 0~255로 들어옵니다.
저런 화면을 구현하는데 참고될 만한게 있을까요?
그리고 일단 대충이라도 만들긴 했는데요 . 이게 실시간으로 데이터가 많이 빨르게 들어와서 조금 랙이 걸리는 느낌이 있네요. 좀 알아보니 gpu 연산을 이용하는 방법도 있다던데 국내엔 자료가 너무 없네요. 있어도 너무 옛날꺼고요 ㅠㅠ. 혹시 gpu 연산은 어떤걸 알아보면 될까요?
이미지 프로세싱에 관련된 영역이고요.
질문하신 내용은 GPU하고는 1도 관계 없습니다.
GPU가 필요한 경우는 데이타가 크고 고속 연산이 필요한 경우입니다.
질문의 내용은 소규모 데이타가 빠르게 들어오는데.
그걸 빠르고 이쁘게 그리고 싶은거잖습니까?
이미지 프로세싱으로 알아보셔야 하는데요.
아마 엔간한 곳에서는 답변 잘 안나올 겁니다. 워낙 전문 영역이라
질문이 구체적이지 않으면 답변 잘 안달립니다.
일단 1번 조건에서 gpu활용하는건 많은 제약이 따른다는 건 아실거 같고…(wpf를 다룰줄 아신다면 wpf강추합니다)
2번 조건을 보면 시리얼통신이 아시다시피 이벤트 기반이잖습니까? 그래서 이벤트수신과 동시에 ui처리를 하려면 당연히 3번의 상황으로 인해 보틀넥이 무조건 생길 수 밖에 없는데요.
왜냐하면 data recieve 이벤트에서 스레드가 잡혀있는 상태에서 ui를 미처 다 처리하기도 전에 이미 시리얼 버퍼에는 데이터가 쌓이고 있는 상황이거든요…
여기서 우리가 인정하고 넘어가야될게, 윈폼에서는 동시에 아주 많은 데이터가 빠르게 통신으로 넘어올 경우에 그 데이터를 한꺼번에 처리할 수가 없다는겁니다.
(보레이트가 높을수록 더욱 그러하지만, 만일 보레이트가 9600 정도라면 보틀넥이 그렇게 생길것 같진 않네요)
제가 저런 프로그램을 다루거나 작성할 때는 통신 수신부와 ui처리부를 분리하는 방식을 택하는 편입니다.
데이터 수신은 막힘없이 하고, ui를 조금 늦게 처리하는거죠. (실제로는 화면 반영이 느리다는 느낌도 별로 없을듯)
일종의 버퍼를 만들어두고 데이터 수신하면 그 버퍼에 데이터를 쌓아둡니다.
그리고나서 별도의 작업 스레드를 돌려서(반복주기가 매우 짧은) ui를 처리하는 방식으로요…(한꺼번에 혹은 나눠서)
정확히 얼마나 많은 데이터를 얼마나 짧은 주기로 화면에 표현하는지 모르다보니 답변이 뭔가 확실하지가 않네용…ㅠ
부디 잘 해결하시길…
일단 문제를 다음처럼 나눠야 할 것 같습니다.
그림을 보면 대응하는 값과 격자 간의 1:1 표현이 아닙니다. 근접한 값에 따라 가공되는 듯 보이고
이것은 특정 프로그래밍 언어나 프레임워크에 종속된 것이 아니기 때문에
관련된 처리를 조사하거나 요청하셔서 가공하는 방법을 찾아야 할 것 같습니다.
윈폼에서 Direct2D 그리기를 사용할 수 있게 도와주는 라이브러리 찾아 사용할 수 있습니다.
1은 다음의 글 처럼 비트맵 정보를 백터화 하는 기법을 이용 + 가우시안 블러를 이용하면 달성할 수 있어 보입니다.
또는 입력 데이터가 아마도 압력 데이터일 것이므로 – 등고선과 유사한 데이터 특성이 있을 것으로 추측되니 등고선을 표현하는 방법으로 조사하셔도 될 듯 하네요.
@mincook 실제 사용하시는 샘플 데이터도 한번 제공해주시면 재밌을 것 같습니다. 
오 저도 그 생각 하고 있었는데… 데이터를 어떻게 시각화 해야 그림처럼 유사하게 나오면서 쉽게 될까… 생각중이였습니다. 그걸 확인하려면 샘플 데이터가 있으면 좋으니까! ^^
저희 사람이 보기에 편한 방식으로 하면 이런 식으로 데이터가 넘어옵니다.
해당 부분은 센서가 가로 48개, 세로 128개의 센서가 있는 판 위에 아령을 올려놓았을 때의 모습입니다. 그러다보니 아령의 형태로 데이터가 생기네요. 해당 이미지에서는 아령이 올려진 위치 부분만 제가 잘라서 가져온겁니다. 실제론 x축이 48개이며, y축이 128개 입니다.
0으로 표시된 부분은 압력을 아예 받고 있지 않은, 즉 물건이나 힘이 가해지지 않은 위치이며 0 초과인 부분만 압력이 가해지고 있는 부분 입니다.
이걸 소스에서는 ushort[48,128] 의 데이터 형태로 넘어옵니다.
샘플 데이터를 있으면 좋겠다고 하셔서 올립니다.
아래는 C#에서 온도를 colormap으로 표시한 예제입니다. 압력을 아래 예제의 온도로 생각하시면 참고할 만할 것 같습니다.
조금 무거운 라이브러리인데, C#에서도 영상표시/영상저리를 쉽게 할 수 있는 ‘OpenCV for C#’ opencvsharp를 사용할 수 있습니다. WinForm/WPF에 표시하는 것도 어렵지 않을거에요
도움이 됐으면 좋겠습니다
@jyje 정말 제가 딱 원하던 내용들이네요. 찾아보니 OpenCV에 대한 내용들도 종종 나오고 말씀하신데로 블러와 필터 효과를 사용하면 될 듯 하네요. 정말 감사합니다.
다른 답변 주신 모든 분들께도 감사드립니다.
