.. หัวข้อ: เครื่องมือสร้างแบบจำลอง RF แบบคาดการณ์
.. slug: เครื่องมือทำนายแบบจำลอง rf
.. วันที่: 29-12-2025 16:00:00 UTC
.. tags: ระบบเครือข่าย, เครื่องคิดเลข, เครื่องมือ, wifi, 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>เดซิเบลเมตร</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.4 กิกะเฮิร์ตซ์</option>
<option selected="" value="5000">5 กิกะเฮิร์ตซ์</option>
<option value="6000">6 กิกะเฮิร์ตซ์</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/>• Space + ลากเพื่อเลื่อน<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>