.. 제목: 예측 RF 모델링 도구
.. 슬러그: 예측-rf-모델링 도구
.. 날짜: 2025-12-29 16:00:00 UTC
.. 태그: 네트워킹, 계산기, 도구, Wi-Fi, RF, 무선
.. 카테고리:
.. 링크:
.. 설명: 무선 네트워크 배포 계획을 위한 전문 WiFi RF 모델링 및 사이트 조사 도구
.. 유형: 텍스트
<link href="/assets/css/rf-modeling-tool.css" rel="stylesheet"/>
외부 테이블: 사이드바 | 캔버스 영역
<table class="rf-outer-table">
<tr>
왼쪽 사이드바(250px 고정 너비)
<td class="rf-sidebar-cell">
<div class="rf-sidebar-title">RF 모델링 도구</div>
<div class="rf-sidebar-subtitle">예측 WiFi 범위</div>
업로드 섹션
<div class="rf-section" id="uploadSection">
<div class="rf-section-title">평면도 업로드</div>
<div class="rf-upload-area" id="uploadArea">
<div class="rf-upload-icon">📁</div>
<div class="rf-upload-text">평면도를 업로드하려면 클릭하세요.</div>
<div class="rf-upload-hint">(PNG, JPG 또는 PDF)</div>
</div>
<input accept="image/*,.pdf" id="floorPlanInput" style="display: none;" type="file"/>
</div>
교정 섹션
<div class="rf-section" id="calibrationSection">
<div class="rf-section-title">스케일 교정</div>
<div class="rf-form-group">
<label class="rf-label" for="calibrationDistance">알려진 거리</label>
<input class="rf-input" id="calibrationDistance" min="0" placeholder="Enter distance" step="0.1" type="number"/>
</div>
<div class="rf-form-group">
<label class="rf-label" for="calibrationUnit">단위</label>
<select class="rf-select" id="calibrationUnit">
<option value="feet">피트</option>
<option value="meters">미터</option>
</select>
</div>
<button class="rf-btn rf-btn-primary" disabled="" id="startCalibrationBtn">교정 시작</button>
<span class="rf-hint">축척을 설정하려면 평면도의 두 지점을 클릭하세요.</span>
</div>
AP 속성 섹션
<div class="rf-section" id="apPropertiesSection" style="display: none;">
<div class="rf-section-title">액세스 포인트 속성</div>
<div class="rf-form-group">
<label class="rf-label">이름</label>
<input class="rf-input" id="apName" placeholder="AP Name" type="text"/>
</div>
<div class="rf-slider-group">
<label class="rf-slider-label">송신 전력<span class="rf-slider-value" id="txPowerValue">20</span>dBm</label>
<input class="rf-slider" id="txPower" max="30" min="0" step="1" type="range" value="20"/>
</div>
<div class="rf-slider-group">
<label class="rf-slider-label">얻다<span class="rf-slider-value" id="gainValue">4</span>dBi</label>
<input class="rf-slider" id="gain" max="20" min="0" step="0.5" type="range" value="4"/>
</div>
<div class="rf-form-group">
<label class="rf-label">빈도</label>
<select class="rf-select" id="frequency">
<option value="2400">2.4GHz</option>
<option selected="" value="5000">5GHz</option>
<option value="6000">6GHz</option>
</select>
</div>
<div class="rf-slider-group" id="orientationGroup" style="display: none;">
<label class="rf-slider-label">정위<span class="rf-slider-value" id="orientationValue">0</span>°
          </label>
<input class="rf-slider" id="orientation" max="360" min="0" step="5" type="range" value="0"/>
</div>
<div class="rf-slider-group" id="beamwidthGroup" style="display: none;">
<label class="rf-slider-label">빔폭<span class="rf-slider-value" id="beamwidthValue">360</span>°
          </label>
<input class="rf-slider" id="beamwidth" max="360" min="30" step="5" type="range" value="360"/>
</div>
<button class="rf-btn rf-btn-primary" id="applyAPBtn">변경 사항 적용</button>
<button class="rf-btn rf-btn-danger" id="deleteAPBtn">AP 삭제</button>
</div>
시뮬레이션 섹션
<div class="rf-section" id="simulationSection">
<div class="rf-section-title">RF 시뮬레이션</div>
<div style="margin-bottom: 10px;">
<label style="display: block; margin-bottom: 5px;">
<input id="showHeatmap" style="margin-right: 5px;" type="checkbox"/>적용 범위 히트맵 표시</label>
</div>
<button class="rf-btn rf-btn-primary" id="regenerateHeatmapBtn" style="margin-bottom: 10px; width: 100%;">🔄 히트맵 재생성</button>
<div class="rf-slider-group">
<label class="rf-slider-label">그리드 해상도<span class="rf-slider-value" id="gridResValue">20</span>px</label>
<input class="rf-slider" id="gridResolution" max="50" min="10" step="5" type="range" value="20"/>
</div>
<div class="rf-slider-group">
<label class="rf-slider-label">최소 신호<span class="rf-slider-value" id="minSignalValue">-85</span>dBm</label>
<input class="rf-slider" id="minSignal" max="-60" min="-100" step="5" type="range" value="-85"/>
</div>
<div style="margin-top: 10px; font-size: 11px; color: #6c757d;">
<div><strong>전설:</strong></div>
<div style="display: flex; align-items: center; margin-top: 3px;">
<span style="display: inline-block; width: 40px; height: 12px; background: linear-gradient(to right, #ff0000, #ffff00, #00ff00); border: 1px solid #ccc;"></span>
<span style="margin-left: 5px;">약함 → 강함</span>
</div>
</div>
</div>
보기 컨트롤 섹션
<div class="rf-section" id="viewControlsSection">
<div class="rf-section-title">보기 컨트롤</div>
<div style="display: flex; gap: 5px; margin-bottom: 10px;">
<button class="rf-btn rf-btn-secondary" id="zoomInBtn" style="flex: 1;">➕ 확대</button>
<button class="rf-btn rf-btn-secondary" id="zoomOutBtn" style="flex: 1;">➖ 축소</button>
</div>
<button class="rf-btn rf-btn-secondary" id="resetViewBtn" style="width: 100%; margin-bottom: 10px;">🔄 보기 재설정</button>
<div style="font-size: 11px; color: #6c757d;">
<div><strong>줌:</strong> <span id="zoomLevel">100%</span></div>
<div style="margin-top: 5px;">
<strong>통제 수단:</strong><br/>• 마우스 휠로 확대/축소<br/>• 스페이스바 + 드래그하여 이동<br/>• 마우스 가운데 마우스를 움직여 이동</div>
</div>
</div>
</td>
오른쪽 캔버스 영역
<td class="rf-canvas-cell">
중첩 테이블: 눈금자 및 캔버스용 3x3 격자
<table class="rf-ruler-table">
<tr>
왼쪽 상단
<td class="rf-ruler-corner"></td>
상단 눈금자
<td class="rf-ruler-top" id="rulerTop"></td>
오른쪽 상단
<td class="rf-ruler-corner"></td>
</tr>
<tr>
왼쪽 눈금자
<td class="rf-ruler-left" id="rulerLeft"></td>
중앙에는 CANVAS
<td class="rf-canvas-container">
<canvas height="600" id="rfCanvas" width="800"></canvas>
</td>
오른쪽 자
<td class="rf-ruler-right" id="rulerRight"></td>
</tr>
<tr>
왼쪽 하단 모서리
<td class="rf-ruler-corner"></td>
하단 눈금자
<td class="rf-ruler-bottom" id="rulerBottom"></td>
오른쪽 하단
<td class="rf-ruler-corner"></td>
</tr>
</table>
중첩된 테이블 아래의 상태 표시줄
<div class="rf-status-bar">
<span class="rf-status-left">
<span id="statusText">준비됨 - 시작하려면 평면도를 업로드하세요.</span>
<span class="rf-mode-indicator inactive" id="wallModeIndicator">벽 모드: 꺼짐(W 누르기)</span>
</span>
<span class="rf-status-right" id="cursorPosition">X: 0, Y: 0</span>
</div>
</td>
오른쪽 사이드바(250px 고정 너비)
<td class="rf-right-sidebar-cell">
<div class="rf-sidebar-title">도구 및 재료</div>
하드웨어 섹션
<div class="rf-section" id="hardwareSection" style="display: none;">
<div class="rf-section-title">액세스 포인트</div>
<select class="rf-select" id="vendorFilter">
<option value="all">모든 공급업체</option>
</select>
<div id="hardwareList" style="max-height: 400px; overflow-y: auto;">
<div style="color: #6c757d; font-size: 12px;">하드웨어 로드 중...</div>
</div>
<span class="rf-hint">AP를 캔버스로 드래그 앤 드롭</span>
</div>
벽 재료 섹션
<div class="rf-section" id="materialsSection">
<div class="rf-section-title">벽 재료</div>
<div id="materialList">
<div style="color: #6c757d; font-size: 12px;">자료 로드 중...</div>
</div>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #dee2e6;">
<label style="display: block; margin-bottom: 5px; font-size: 12px;">
<input id="continuousDrawing" style="margin-right: 5px;" type="checkbox"/>연속 벽 도면</label>
<label style="display: block; margin-bottom: 5px; font-size: 12px;">
<input checked="" id="snapToEndpoints" style="margin-right: 5px;" type="checkbox"/>벽 끝점에 스냅</label>
<label style="display: block; margin-bottom: 5px; font-size: 12px;">
<input id="wallSelectionMode" style="margin-right: 5px;" type="checkbox"/>선택 모드(클릭하여 선택)</label>
<div id="wallSelectionControls" style="margin-top: 10px;">
<button class="rf-btn rf-btn-secondary" disabled="" id="copyWallsBtn" style="margin-bottom: 5px;">📋 선택 항목 복사(<span id="selectedWallCount">0</span>)
            </button>
<button class="rf-btn rf-btn-secondary" disabled="" id="pasteWallsBtn" style="margin-bottom: 5px;">📄 벽 붙여넣기</button>
<button class="rf-btn rf-btn-danger" disabled="" id="deleteWallsBtn" style="margin-bottom: 5px;">🗑️ 선택 항목 삭제</button>
</div>
<div style="font-size: 10px; color: #6c757d; margin-top: 5px;">
<strong>벽 모드:</strong>W를 누르세요<br/>
<strong>선택:</strong>다중 선택은 Ctrl+클릭<br/>
<strong>바로가기:</strong>Ctrl+C(복사), Ctrl+V(붙여넣기), Del(삭제)</div>
</div>
</div>
</td>
</tr>
</table>
<script src="/assets/js/rf-modeling-tool.js"></script>