..標題：預測射頻建模工具
.. slug：預測射頻建模工具
.. 日期: 2025-12-29 16:00:00 世界標準時間
..標籤：網路、計算機、工具、wifi、射頻、無線
..類別：
..連結：
.. 描述：用於規劃無線網路部署的專業 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">射頻建模工具</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>分貝</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>分貝</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">刪除接入點</button>
</div>
模擬部分
<div class="rf-section" id="simulationSection">
<div class="rf-section-title">射頻類比</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>像素</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>分貝</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>
畫布位於中心
<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>