|
|
|
@ -47,12 +47,13 @@ |
|
|
|
|
|
|
|
/* I/O */ |
|
|
|
.io-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:40px;margin-bottom:32px} |
|
|
|
.io-bot{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:40px} |
|
|
|
.io-bot{display:flex; gap: 40px ;flex-wrap:wrap;} |
|
|
|
.io-group{flex:1 1 0;min-width:320px;} |
|
|
|
.io-group h4{font-size:20px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px} |
|
|
|
.io-group h4::before{content:"";width:8px;height:8px;background:#aaa;display:inline-block} |
|
|
|
.io-fieldset{border:1px solid #bbb;padding:24px 32px;border-radius:4px;display:flex;flex-direction:column;gap:16px;width:100%} |
|
|
|
.io-row{display:grid;grid-template-columns:120px 12px 1fr;align-items:center;gap:8px} |
|
|
|
.io-row input,.io-row select{padding:4px 6px;border:1px solid #aaa;border-radius:4px;font-size:14px;width:100%} |
|
|
|
.io-row input,.io-row select{padding:4px 6px;border:1px solid #aaa;border-radius:4px;font-size:14px;width:50%} |
|
|
|
|
|
|
|
/* 비활성 input 시각화 */ |
|
|
|
.disabled{background:#f5f5f5;cursor:not-allowed} |
|
|
|
@ -173,8 +174,15 @@ |
|
|
|
<option value="full">full</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
<div class="io-row"><span>Speed</span><span>:</span><input id="rs485_baudrate"></div> |
|
|
|
<div class="io-row"><span>Parity</span><span>:</span><input id="rs485_parity"></div> |
|
|
|
<div class="io-row"><span>Speed</span><span>:</span><select id="rs485_baudrate"> |
|
|
|
<option value="9600">9600</option> |
|
|
|
<option value="115200">115200</option> |
|
|
|
</select></div> |
|
|
|
<div class="io-row"><span>Parity</span><span>:</span><select id="rs485_parity"> |
|
|
|
<option value="no">NONE</option> |
|
|
|
<option value="odd">ODD</option> |
|
|
|
<option value="EVEN">EVEN</option> |
|
|
|
</select></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- CAN --> |
|
|
|
@ -186,7 +194,15 @@ |
|
|
|
<option value="standard">standard</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
<div class="io-row"><span>Speed</span><span>:</span><input id="can_baudrate"></div> |
|
|
|
|
|
|
|
<div class="io-row"><span>Speed</span><span>:</span> |
|
|
|
<select id="can_baudrate"> |
|
|
|
<option value="1000">100kb/s</option> |
|
|
|
<option value="2500">250kb/s</option> |
|
|
|
<option value="5000">500kb/s</option> |
|
|
|
<option value="10000">1M/s</option> |
|
|
|
</select> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- IMU --> |
|
|
|
@ -221,6 +237,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
<!-- ▽ Register PAGE (placeholder) ▽ --> |
|
|
|
@ -230,8 +247,7 @@ |
|
|
|
|
|
|
|
<!-- 공통 액션 버튼 --> |
|
|
|
<div class="actions"> |
|
|
|
<button id="load-local">Load Local File</button> |
|
|
|
<button id="save-local">Save Local File</button> |
|
|
|
<button id="load-local">Load Device File</button> |
|
|
|
<button id="save-device">Save to Device</button> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
@ -239,7 +255,7 @@ |
|
|
|
|
|
|
|
<!-- ───── Script ───── --> |
|
|
|
<script> |
|
|
|
/* ───────────── 1. 기본 데이터 구조 ───────────── */ |
|
|
|
|
|
|
|
const data = { |
|
|
|
/* Wi-Fi */ |
|
|
|
wifi_static : 'off', wifi_ip:'', wifi_netmask:'', wifi_gateway:'', wifi_dns1:'', wifi_dns2:'', |
|
|
|
@ -271,7 +287,7 @@ |
|
|
|
WIFI_SSID:[{wifi_ssid:'',wifi_password:'',wifi_security:'none'}] |
|
|
|
}; |
|
|
|
|
|
|
|
/* ───────────── 2. 페이지 전환 ───────────── */ |
|
|
|
|
|
|
|
const pages = { |
|
|
|
ssid : document.getElementById('page-ssid'), |
|
|
|
network: document.getElementById('page-network'), |
|
|
|
@ -288,7 +304,7 @@ |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
/* ───────────── 3. SSID 행 생성 / 수집 ───────────── */ |
|
|
|
|
|
|
|
const ssidList = document.getElementById('ssid-list'); |
|
|
|
const ssidTmpl = document.getElementById('ssid-template'); |
|
|
|
|
|
|
|
@ -333,7 +349,7 @@ |
|
|
|
} |
|
|
|
document.querySelectorAll('input[name="ipMode"]').forEach(r=>r.addEventListener('change', toggleNetInputs)); |
|
|
|
|
|
|
|
/* ───────────── 5. IMU Re-map 보조 함수 ───────────── */ |
|
|
|
|
|
|
|
function axisValueToPair(val){ |
|
|
|
return val.startsWith('-') |
|
|
|
? {axis:val.slice(1), sign:'minus'} |
|
|
|
@ -370,7 +386,6 @@ |
|
|
|
} |
|
|
|
loadFromData(data); |
|
|
|
|
|
|
|
/* ───────────── 7. 화면 → 데이터 수집 ───────────── */ |
|
|
|
function collectData(){ |
|
|
|
const res = {...data}; |
|
|
|
|
|
|
|
@ -395,7 +410,7 @@ |
|
|
|
return res; |
|
|
|
} |
|
|
|
|
|
|
|
/* ───────────── 8. 저장 버튼 POST ───────────── */ |
|
|
|
|
|
|
|
document.getElementById('save-device').addEventListener('click', ()=>{ |
|
|
|
fetch('http://localhost:8080/setting/device',{ |
|
|
|
method :'POST', |
|
|
|
|