ConfigDiv
센서를 등록하고 Data를 전송하는 과정에서 필요한 추가적인 설정값들을 사용자들에게 받을 수 있도록 input form을 넣는 구역이다.
기본적인 form의 형태는 제공하고 있으며, 필요한 값의 형태에 따라 자유롭게 추가, 수정, 삭제가 가능하다.
Script
script 부분은 기본적으로 3개의 필수 함수를 반드시 포함해야 한다. 그외에 추가적으로 필요한 함수는 자유롭게 삽입하여 사용할 수 있다.
프로그램 작성시 주의사항은 다음과 같다.
- 필수 함수들의 함수명은 절대 변경하지 않아야 하며 내용만 필요한 Data에 맞게 변경해서 사용한다.
- script 내에서 Jquery 문법을 사용할 때 each 함수의 경우 $.each()는 사용이 불가하며 반드시 $(선택자).each() 용법으로 사용해야 한다.
HTML 예제
<style>
/*
* Precautions
* 1. Don't change bootstrap used Class.
*/
#configDiv { padding: 3% 10px; }
.half { width: 49%; }
.hiddenRow { display: none !important; }
.i_formRow {
display: flex;
justify-content: space-between;
}
.i_input_wrap {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.i_form_input_label {
font-size: 0.8rem;
margin: 5px 10px 5px 0;
min-width: 120px;
font-weight: 500;
color: #1a1a1a;
}
.i_form_input {
height: 30px;
min-width: 174px;
margin: 10px 0;
padding: 5px 10px;
border: 1px solid #d9e3eb;
background-color: white;
color: #1a1a1a;
font-size: 0.8rem;
}
.i_form_input:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
</style>
<div id="configDiv">
<div class="i_formRow">
<div class="i_input_wrap">
<label class="i_form_input_label" for="ip">IP</label>
<input id="ip" class="i_form_input" type="text">
</div>
</div>
<div class="i_formRow">
<div class="i_input_wrap">
<label class="i_form_input_label" for="port">PORT</label>
<input id="port" class="i_form_input" type="text">
</div>
</div>
<div class="i_formRow hiddenRow">
<div class="i_input_wrap">
<label class="i_form_input_label" for="port">Hz</label>
<input id="hz" class="i_form_input" type="hidden">
</div>
</div>
</div>
<script>
/*
* Precautions
* 1. Don't use $.each(). Use $(selecter).each() instead of $.each().
* 2. Do not change function name.
* 3.
*/
var jsonToInput = function(aJson) {
/*
* Puts a value in the input of the settings tab in a new taglet or taglet modification.
* Put the data that comes in json form in input
*/
$('#ip').val(aJson.ip);
$('#port').val(aJson.port);
$('#hz').val(aJson.sampling_hz);
};
var inputToJson = function() {
/* Returns the data entered in input in json form. */
var sJson = {};
sJson['ip'] = $('#ip').val();
sJson['port'] = $('#port').val();
sJson['sampling_hz'] = $('#hz').val();
return sJson;
};
var makeConfig = function(aModuleIdx, aEdgeIp, aListenPort, aSensorCount) {
/*
* Returns data to create a setup file for use in the Taglet.
* Values received as parameters must be returned.
* Parameters
* - aModuleIdx : Taglet index
* - aEdgeIp : Edge ip
* - aListenPort : Edge to Taglet Communication Port
* - aSensorCount : Number of sensors registered in Taglet
* Returns other values to be used in Taglet program.
* Insert additional generated data into [Module] part in the form of a string of "Key = " + String(value)
*/
var sConfig = '';
var sIp = $('#ip').val();
var sPort = $('#port').val();
var sHz = $('#hz').val();
sConfig = '[Module]\nModuleIdx = \"' + String(aModuleIdx) + '\"\nIP = \"' + String(sIp) + '\"\nPort = ' + parseInt(sPort) + '\nUseSensor = ' + parseInt(aSensorCount) + '\nHz = ' + parseInt(sHz) + '\n\n[Edge]\nIP = \"' + String(aEdgeIp) + '\"\nPort = ' + parseInt(aListenPort);
return sConfig;
};
</script>
필수 함수
① jsonToInput (aJson)
html의 input에 초기 값, 또는 사용자가 설정한 값을 삽입해주는 함수이다.
Parameter인 aJson으로는 등록 시에는 Profile에 있는 설정 값이, 이후에는 Edge에 저장되어 있는 값이 사용된다.
Web에서 사용자가 Profile을 선택하거나, Taglet을 수정하는 경우 호출된다.
② inputToJson ()
html의 input에 입력된 값을 Json형태로 리턴시켜주는 함수이다.
Web에서 사용자가 입력한 값을 얻는데 사용한다.
ModuleInfo Json 예제
{"ip":"127.0.0.1","port":"7007","sampling_hz":"1024"}
③ makeConfig (aModuleIdx, aEdgeIp, aEdgePort, aSensorCount)
Edge에 Taglet을 등록하고 사용할 Config 파일 내용을 리턴시켜주는 함수이다.
매개변수로 넘어온 Taglet index, Edge ip, Edge port, Sensor 개수를 기본으로 html에서 입력받은 input 값, 그 외 추가적으로 생성한 Data들을 “Data명 = ” + String(Data) 의 문자열 형태(toml format)로 [Module] 부분에 삽입하여 리턴한다.
※ Tagelt Index, Edge ip, Edge port 및 Sensor 개수는 반드시 포함되어야 한다.
[Module]
ModuleIdx = "1"
IP = "192.168.0.210"
Port = 7007
UseSensor = 1
Hz = 1
[Edge]
IP = "192.168.0.88"
Port = 10001