자바스크립트와 엔유스페이스를 이용한 Web Data Visualization (Big data 처리)

enuSpace for Mars의 기능중 하나인 Web Data 인터페이스 작업 및 Big data 처리

아래 동영상을 확인하시면, 대용량 객체현시에 대한 각 브라우져의 특성을 보실수 있습니다. (16,384개 데이터)

Web Data Visualization 동영상 보기.

Step 1. Wave Model Task 생성 및 등록.

enuSpace에서 제공되는 Task 생성 SDK를 이용하여 Wave 데이터 파일을 생성하는 dll 파일을 생성합니다. 

double pinpower[8][8][26][16][16];

float initValue = 1.0f;

void MAIN()

{

initValue = initValue + 0.1;

//////////////////////////////////////////////////////////////

for (int x = 0; x < 8; x++)

{

for (int y = 0; y < 8; y++)

{

for (int k = 0; k < 26; k++)

{

for (int i = 0; i < 16; i++)

{

for (int j = 0; j < 16; j++)

{

pinpower[x][y][k][i][j] = 1.0 + sin(double((x * 16) + i + (y * 16) + j) / 3.141592 / 5 + initValue);

}

}

}

}

}

SetArrayValue(L"@CORE.pinpower[0][0][0][0][0]", pinpower, DEF_DOUBLE, 8 * 8 * 26 * 16 * 16);

}

배열변수를 이용하여 sin() 함수의 값을 매 주기마다 업데이트를 수행합니다.

저장된 배열 정보는 enuSpace의 데이터 베이스 메모리에 SetArrayValue() 함수를 이용하여 고속 복사를 수행합니다.

Step 2. 데이터베이스 매니져를 이용하여 배열 변수를 생성하여 Task의 연산 결과와 연동할 수 있도록 등록을 수행합니다.

Step 3. enuSpace의 Project Explorer의 팝업메뉴를 이용하여 Add 3d picture item을 이용하여 3D 픽쳐를 생성합니다.

생성한 픽쳐에 배열 변수값을 확인할 수 있는 Terrain 객체를 추가합니다.

생성한 객체의 Taskview() 함수에 그래픽 객쳍와 연동을 위한 루아 스크립트를 추가합니다. 루아 스크립트는 enuSpace에서 고속 데이터 처리를 수행합니다.

function _ontaskview()

memcpy(&data[0][0],&@CORE.pindis[0][0],128*128)

end

데이터 베이스의 메모리 주소와 복사하고자 하는 데이터의 주소값을 위 코드와 같이 입력합니다. Run 버튼을 이용하여 Wave 데이터 값을 업데이트 수행합니다.

Step 4. enuSpace에 Add new picture item을 선택하여 2D 화면 구성을 위한 페이지를 새성합니다.

사각형 객체를 16 by 16으로 나열하여 새성을 수행합니다. 생성된 객체를 선택후 Taskview() 함수에 Javascript 함수를 추가합니다.

직접 객체를 생성하기 어려운 경우에는 스크립트를 이용하여 동적으로 객체를 생성하고 스크립트 내용을 동적으로 적용하면 간단하게 생성할 수 있습니다. 

function _ontaskview()

{

var value_obj = document.getElementById("ID00_13_9_7");

var tag_val = GetTagValue("@CORE.pinpower[0][0][13][9][7]");

value_obj.setAttribute("fill", GetValueColor(tag_val));

}

// 전역 javascript 함수 => 리본 메뉴의 Edit Java Script 를 이용하여 추가 수행.

function GetValueColor(fValue)

{

fValue = fValue * 50;

var color;

if (fValue<0) 

{ color = "rgb(0,0,0)"; }

else if (fValue>0 && fValue <=5) 

{ color = "rgb(15,75,165)"; }

else if( fValue>5 && fValue <=10 )

{color = "rgb(30,110,200)"; }

else if( fValue>10 && fValue <=15 )

{color = "rgb(60,160,240)"; }

else if( fValue>15 && fValue <=20 )

{color = "rgb(80,180,250)"; }

else if( fValue>20 && fValue <=25 )

{color = "rgb(130,210,255)"; }

else if( fValue>25 && fValue <=30 )

{color = "rgb(160,240,255)"; }

else if( fValue>30 && fValue <=35 )

{color = "rgb(200,250,255)"; }

else if( fValue>35 && fValue <=40 )

{color = "rgb(230,255,255)"; }

else if( fValue>40 && fValue <=45 )

{color = "rgb(255,250,220)"; }

else if( fValue>45 && fValue <=50 )

{color = "rgb(255,232,120)"; }

else if( fValue>50 && fValue <=55 )

{color = "rgb(255,192,60)"; }

else if( fValue>55 && fValue <=60 )

{color = "rgb(255,160,0)"; }

else if( fValue>60 && fValue <=65 )

{color = "rgb(255,96,0)"; }

else if( fValue>65 && fValue <=70 )

{color = "rgb(255,50,0)"; }

else if( fValue>70 && fValue <=75 )

{color = "rgb(225,20,0)"; }

else if( fValue>75 && fValue <=80 )

{color = "rgb(192,0,0)"; }

else

{color = "rgb(150,0,0)"; }

return color

}

사각형 객체의 ID값을 이용하여 객체를 획득후, 색상값을 표현하기 위한 데이터베이스 메모리 데이터의 값을 가져옵니다. 가져온 데이터를 이용하여 값을 Color 로 변환하는 함수를 통하여 내부 색상값을 변경합니다.

스크립트를 이용하여 동적 객체 생성 및 스크립트 등록.

Step 5. Web publish 메뉴를 이용하여 Web publish 수행.

Web browser를 이용하여 enuSpace 서버에 접속을 수행합니다. 웹 브라우져 Chrome, Firefox, MS edge를 이용하여 접속하여 서버 데이터의 그래픽 가시화를 수행합니다.

웹 브라우져를 이용한 대용량 데이터 처리를 위해서는 enuSpace에서 제공하는 API  gatvalue_package 함수를 활용하였으며 Web Worker를 이용합니다. 16 * 16 * 8 = 2048개의 묶음데이터에서 대하여 8회(2048*8 = 16384개) 분활하여 서버에 데이터를 요청하여 전송받아서 처리를 수행합니다.