bless
/
dpworld_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

modbus config

v2
gudae01 1 year ago
parent
bea7383e21
commit
046050ede9
1 changed files with 238 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 354
      src/main/resources/static/index.html

354
src/main/resources/static/index.html
View File

@ -86,6 +86,8 @@
box-shadow: none;
padding: 24px;
border-radius: 4px;
display: flex;
flex-direction: column;
}
#page-modbus table {
width: 100%;
@ -105,29 +107,32 @@
}
#page-modbus .modbus-input-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 32px;
margin: 24px 0 16px 0;
grid-template-columns: 200px 200px 200px 200px;
gap: 20px 20px;
margin: 24px auto 16px auto;
background: #eaeaea;
padding: 16px 0;
padding: 16px;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
}
#page-modbus .input-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
display: contents;
}
#page-modbus .modbus-input-area label.nowrap {
white-space: nowrap;
}
#page-modbus .input-row label {
min-width: 80px;
#page-modbus .modbus-input-area label {
min-width: auto;
color: #444;
white-space: normal;
}
#page-modbus .input-row input {
#page-modbus .modbus-input-area input {
background: #e0e0e0;
border: none;
border-radius: 2px;
padding: 4px 8px;
min-width: 120px;
min-width: auto;
}
#page-modbus .modbus-actions {
display: flex;
@ -163,6 +168,13 @@
min-width: 140px;
cursor: pointer;
}
.selected-row{
background: #d0e6ff !important;
}
.selected-row > td {
background: #d0e6ff !important;
}
</style>
</head>
<body>
@ -316,42 +328,42 @@
<option value="2500">250kb/s</option>
<option value="5000">500kb/s</option>
<option value="10000">1M/s</option>
</select>
</select>
</div>
</div>
<!-- IMU -->
<div class="io-group">
<h4>IMU Re-map</h4>
<div class="io-row"><span class="label-inline">X</span><span class="colon">:</span>
<select id="imu_remap_x">
<!-- IMU -->
<div class="io-group">
<h4>IMU Re-map</h4>
<div class="io-row"><span class="label-inline">X</span><span class="colon">:</span>
<select id="imu_remap_x">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="-x">-x</option>
<option value="-y">-y</option>
<option value="-z">-z</option>
</select>
</div>
<div class="io-row"><span class="label-inline">Y</span><span class="colon">:</span><select id="imu_remap_y">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="-x">-x</option>
<option value="-y">-y</option>
<option value="-z">-z</option>
</select>
</select></div>
<div class="io-row"><span class="label-inline">Z</span><span class="colon">:</span><select id="imu_remap_z">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="-x">-x</option>
<option value="-y">-y</option>
<option value="-z">-z</option>
</select></div>
</div>
<div class="io-row"><span class="label-inline">Y</span><span class="colon">:</span><select id="imu_remap_y">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="-x">-x</option>
<option value="-y">-y</option>
<option value="-z">-z</option>
</select></div>
<div class="io-row"><span class="label-inline">Z</span><span class="colon">:</span><select id="imu_remap_z">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="-x">-x</option>
<option value="-y">-y</option>
<option value="-z">-z</option>
</select></div>
</div>
</div>
</div>
</div>
<div class="actions">
<button id="loadDeviceBtn_io">Load Device File</button>
@ -487,21 +499,34 @@
</div>
</section>
<template id="modbus-row-template">
<tr>
<td><span class="field-display"></span></td>
<td><span class="addr-display"></span></td>
<td><span class="idt-display"></span></td>
<td><span class="odt-display"></span></td>
<td><span class="dv-display"></span></td>
<td><span class="shift-display"></span></td>
<td><span class="expr-display"></span></td>
<td><span class="mask-display"></span></td>
</tr>
</template>
<section id="page-modbus" class="page" style="display:none;">
<div class="card">
<h3>Register configuration</h3>
<h3>Register_Configuration Modbus화면</h3>
<div class="modbus-table-container">
<table>
<thead>
<tr>
<th>field</th>
<th>addr</th>
<th>idt</th>
<th>odt</th>
<th>dv</th>
<th>shift</th>
<th>expr</th>
<th>mask</th>
<th>Field</th>
<th>Address</th>
<th>IDT</th>
<th>ODT</th>
<th>Default Value</th>
<th>Shift</th>
<th>Expression</th>
<th>Mask</th>
</tr>
</thead>
<tbody id="modbus-field-list">
@ -510,22 +535,22 @@
</div>
<div class="modbus-input-area">
<div class="input-row">
<label>field</label><input type="text" id="modbus_field_input">
<label>idt(Input Data Type)</label><input type="text" id="modbus_idt_input">
</div>
<div class="input-row">
<label>addr(address)</label><input type="text" id="modbus_addr_input">
<label>odt(Output Data Type)</label><input type="text" id="modbus_odt_input">
</div>
<div class="input-row">
<label>shift</label><input type="text" id="modbus_shift_input">
<label>dv(Default Value)</label><input type="text" id="modbus_dv_input">
</div>
<div class="input-row">
<label>expr</label><input type="text" id="modbus_expr_input">
<label>mask</label><input type="text" id="modbus_mask_input">
</div>
<label>Field</label>
<input type="text" id="modbus_field_input" placeholder="Enter field name">
<label class="nowrap">idt (Input Data Type)</label>
<input type="text" id="modbus_idt_input" placeholder="Enter IDT">
<label>addr</label>
<input type="text" id="modbus_addr_input" placeholder="Enter address">
<label class="nowrap">odt (Output Data Type)</label>
<input type="text" id="modbus_odt_input" placeholder="Enter ODT">
<label>shift</label>
<input type="text" id="modbus_shift_input" placeholder="Enter shift value">
<label class="nowrap">dv</label>
<input type="text" id="modbus_dv_input" placeholder="Enter default value">
<label>expr</label>
<input type="text" id="modbus_expr_input" placeholder="Enter expression">
<label class="nowrap">mask</label>
<input type="text" id="modbus_mask_input" placeholder="Enter mask">
</div>
<div class="modbus-actions">
@ -535,7 +560,6 @@
</div>
</div>
<!-- 하단 버튼 영역 추가 -->
<div id="modbus-bottom-actions">
<button id="loadModbusBtn">Load Protocol File</button>
<button id="saveModbusBtn">Save Protocol File</button>
@ -869,9 +893,6 @@
console.error("Register data is null or undefined.");
return;
}
// 백엔드에서 받은 DTO 객체를 lastLoadedRegisterData에 저장합니다.
// 이 객체는 이미 camelCase 필드명을 가집니다.
lastLoadedRegisterData = {...register};
console.log("Extracted Body Data:", lastLoadedRegisterData); // DTO 객체 로깅
@ -905,7 +926,7 @@
}
}
// protocol 값이 있으면 select 값을 변경 (데이터 로드 시에만)
if (register.protocol && regProtocolSelect) {
@ -915,18 +936,28 @@
// 프로토콜 값에 따라 사이드바 버튼 토글
toggleProtocolMenus();
// 예시: MODBUS 필드를 UI에 표시하는 가상의 로직 (HTML 컨테이너 필요)
const modbusContainer = document.getElementById('modbus_fields_container'); // HTML에 이 ID의 div가 있다고 가정
if (modbusContainer) {
modbusContainer.innerHTML = ''; // 기존 내용 지우기
if (lastLoadedRegisterData.MODBUS && lastLoadedRegisterData.MODBUS.length > 0) {
lastLoadedRegisterData.MODBUS.forEach(field => {
const fieldDiv = document.createElement('div');
fieldDiv.textContent = `Field: ${field.field}, Addr: ${field.addr}, IDT: ${field.idt}`; // 예시
modbusContainer.appendChild(fieldDiv);
// MODBUS UI 테이블 렌더링
const modbusFieldList = document.getElementById('modbus-field-list');
const modbusRowTemplate = document.getElementById('modbus-row-template');
if (modbusFieldList && modbusRowTemplate) {
modbusFieldList.innerHTML = '';
if (Array.isArray(register.MODBUS) && register.MODBUS.length > 0) {
register.MODBUS.forEach(field => {
const newRow = modbusRowTemplate.content.cloneNode(true);
newRow.querySelector('.field-display').textContent = field.field ?? '';
newRow.querySelector('.addr-display').textContent = field.addr ?? '';
newRow.querySelector('.idt-display').textContent = field.idt ?? '';
newRow.querySelector('.odt-display').textContent = field.odt ?? '';
newRow.querySelector('.dv-display').textContent = field.dv ?? '';
newRow.querySelector('.shift-display').textContent = field.shift ?? '';
newRow.querySelector('.expr-display').textContent = field.expr ?? '';
newRow.querySelector('.mask-display').textContent = field.mask ?? '';
modbusFieldList.appendChild(newRow);
});
} else {
modbusContainer.textContent = 'No MODBUS fields configured.';
// MODBUS 데이터가 없으면 빈 행 하나 추가
const newRow = modbusRowTemplate.content.cloneNode(true);
modbusFieldList.appendChild(newRow);
}
}
@ -956,57 +987,148 @@
function collectData() {
const res = {...data};
const res = {...data};
res.wifi_static = document.querySelector('input[name="ipMode"]:checked')?.value === 'static'
? 'on' : 'off';
res.wifi_static = document.querySelector('input[name="ipMode"]:checked')?.value === 'static'
? 'on' : 'off';
/* 일반 input/select */
for (const k in res) {
const el = document.getElementById(k);
if (el) res[k] = el.value.trim();
}
/* 일반 input/select */
for (const k in res) {
const el = document.getElementById(k);
if (el) res[k] = el.value.trim();
}
/* IMU select → 축·부호 분리 */
['x', 'y', 'z'].forEach(a => {
const {axis, sign} = axisValueToPair(document.getElementById(`imu_remap_${a}`).value);
res[`imu_remap_${a}`] = axis;
res[`imu_remap_${a}_sign`] = sign;
});
/* IMU select → 축·부호 분리 */
['x', 'y', 'z'].forEach(a => {
const {axis, sign} = axisValueToPair(document.getElementById(`imu_remap_${a}`).value);
res[`imu_remap_${a}`] = axis;
res[`imu_remap_${a}_sign`] = sign;
});
/* SSID 배열 */
res.WIFI_SSID = gatherSsidRows();
return res;
}
/* SSID 배열 */
res.WIFI_SSID = gatherSsidRows();
return res;
}
function collectConfigData() {
const collectedRegister = {...lastLoadedRegisterData}; // DTO 필드명(camelCase)으로 값을 수집할 객체
function collectConfigData() {
const collectedRegister = {...lastLoadedRegisterData}; // DTO 필드명(camelCase)으로 값을 수집할 객체
// configIdMap을 순회하며 HTML ID로부터 값을 가져와 DTO 필드명에 매핑
for (const htmlId in configIdMap) {
const dtoKey = configIdMap[htmlId]; // HTML ID에 해당하는 DTO 필드명 (camelCase)
const el = document.getElementById(htmlId);
if (el) {
collectedRegister[dtoKey] = el.value !== null && el.value !== undefined ? el.value.trim() : '';
}
// configIdMap을 순회하며 HTML ID로부터 값을 가져와 DTO 필드명에 매핑
for (const htmlId in configIdMap) {
const dtoKey = configIdMap[htmlId]; // HTML ID에 해당하는 DTO 필드명 (camelCase)
const el = document.getElementById(htmlId);
if (el) {
collectedRegister[dtoKey] = el.value !== null && el.value !== undefined ? el.value.trim() : '';
}
}
// 체크박스 필드 (HTML ID와 DTO 필드명이 같음)
// AnalogPort 매핑: true -> "1", false -> "0"
['ai0', 'ai1', 'ai2', 'ai3', 'di0', 'di1', 'di2', 'di3'].forEach(id => {
const el = document.getElementById(id);
if (el && el.type === 'checkbox') {
collectedRegister[id] = el.checked ? "1" : "0";
} else {
if (collectedRegister[id] === undefined) {
collectedRegister[id] = "0";
}
// 체크박스 필드 (HTML ID와 DTO 필드명이 같음)
// AnalogPort 매핑: true -> "1", false -> "0"
['ai0', 'ai1', 'ai2', 'ai3', 'di0', 'di1', 'di2', 'di3'].forEach(id => {
const el = document.getElementById(id);
if (el && el.type === 'checkbox') {
collectedRegister[id] = el.checked ? "1" : "0";
} else {
if (collectedRegister[id] === undefined) {
collectedRegister[id] = "0";
}
}
});
return collectedRegister;
}
document.addEventListener('DOMContentLoaded', () => {
const list = document.getElementById('modbus-field-list');
// 처음에 행이 없으면 빈 행을 하나 추가
if(list.children.length === 0) {
const modbusRowTemplate = document.getElementById('modbus-row-template');
if(modbusRowTemplate) {
const newRow = modbusRowTemplate.content.cloneNode(true);
list.appendChild(newRow);
}
}
let selectedRow = null;
document.getElementById('modbus-field-list').addEventListener('click', function(e){
let tr = e.target.closest('tr');
if (!tr) return;
Array.from(this.children).forEach(row => row.classList.remove('selected-row'));
tr.classList.add('selected-row');
selectedRow = tr;
document.getElementById('modbus_field_input').value = tr.querySelector('.field-display').textContent;
document.getElementById('modbus_addr_input').value = tr.querySelector('.addr-display').textContent;
document.getElementById('modbus_idt_input').value = tr.querySelector('.idt-display').textContent;
document.getElementById('modbus_odt_input').value = tr.querySelector('.odt-display').textContent;
document.getElementById('modbus_dv_input').value = tr.querySelector('.dv-display').textContent;
document.getElementById('modbus_shift_input').value = tr.querySelector('.shift-display').textContent;
document.getElementById('modbus_expr_input').value = tr.querySelector('.expr-display').textContent;
document.getElementById('modbus_mask_input').value = tr.querySelector('.mask-display').textContent;
});
const modbusAddBtn = document.getElementById('modbus_add_btn');
const modbusFieldList = document.getElementById('modbus-field-list');
const modbusRowTemplate = document.getElementById('modbus-row-template');
if(modbusAddBtn && modbusFieldList && modbusRowTemplate){
modbusAddBtn.addEventListener('click',()=>{
const field = document.getElementById('modbus_field_input').value;
const addr = document.getElementById('modbus_addr_input').value;
const idt = document.getElementById('modbus_idt_input').value;
const odt = document.getElementById('modbus_odt_input').value;
const defaultValue = document.getElementById('modbus_dv_input').value;
const shift = document.getElementById('modbus_shift_input').value;
const expr = document.getElementById('modbus_expr_input').value;
const mask = document.getElementById('modbus_mask_input').value;
const newRow = modbusRowTemplate.content.cloneNode(true);
newRow.querySelector('.field-display').textContent = field;
newRow.querySelector('.addr-display').textContent = addr;
newRow.querySelector('.idt-display').textContent = idt;
newRow.querySelector('.odt-display').textContent = odt;
newRow.querySelector('.dv-display').textContent = defaultValue;
newRow.querySelector('.shift-display').textContent = shift;
newRow.querySelector('.expr-display').textContent = expr;
newRow.querySelector('.mask-display').textContent = mask;
modbusFieldList.appendChild(newRow);
document.getElementById('modbus_field_input').value = '';
document.getElementById('modbus_addr_input').value = '';
document.getElementById('modbus_idt_input').value = '';
document.getElementById('modbus_odt_input').value = '';
document.getElementById('modbus_dv_input').value = '';
document.getElementById('modbus_shift_input').value = '';
document.getElementById('modbus_expr_input').value = '';
document.getElementById('modbus_mask_input').value = '';
});
return collectedRegister;
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('modbus_modify_btn').onclick = function() {
if (!selectedRow) return alert('수정할 행을 선택하세요!');
selectedRow.querySelector('.field-display').textContent = document.getElementById('modbus_field_input').value;
selectedRow.querySelector('.addr-display').textContent = document.getElementById('modbus_addr_input').value;
selectedRow.querySelector('.idt-display').textContent = document.getElementById('modbus_idt_input').value;
selectedRow.querySelector('.odt-display').textContent = document.getElementById('modbus_odt_input').value;
selectedRow.querySelector('.dv-display').textContent = document.getElementById('modbus_dv_input').value;
selectedRow.querySelector('.shift-display').textContent = document.getElementById('modbus_shift_input').value;
selectedRow.querySelector('.expr-display').textContent = document.getElementById('modbus_expr_input').value;
selectedRow.querySelector('.mask-display').textContent = document.getElementById('modbus_mask_input').value;
};
// 삭제 버튼
document.getElementById('modbus_delete_btn').onclick = function() {
if (!selectedRow) return alert('삭제할 행을 선택하세요!');
const list = document.getElementById('modbus-field-list');
selectedRow.remove();
selectedRow = null;
document.querySelectorAll('.modbus-input-area input').forEach(i => i.value = '');
};
regProtocolSelect = document.getElementById('reg_protocol');
if(regProtocolSelect) {
regProtocolSelect.addEventListener('change', () => {

Write Preview
Loading…
Cancel
Save