Modulation Visualizer
.calc-header {
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
color: white;
}
.calc-header h2 {
margin-top: 0;
color: white;
font-size: 28px;
margin-bottom: 10px;
}
.calc-header p {
margin: 10px 0 20px 0;
opacity: 0.95;
font-size: 15px;
line-height: 1.6;
}
.control-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.control-group {
display: flex;
flex-direction: column;
}
.control-group label {
font-weight: bold;
color: white;
margin-bottom: 8px;
font-size: 14px;
}
.control-group input,
.control-group select {
padding: 14px;
font-size: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 6px;
background: rgba(255,255,255,0.95);
transition: all 0.3s ease;
}
.control-group input:focus,
.control-group select:focus {
outline: none;
border-color: #4CAF50;
background: white;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.speed-control {
display: flex;
align-items: center;
gap: 10px;
}
.speed-control input[type="range"] {
flex: 1;
padding: 0;
height: 8px;
accent-color: #4CAF50;
}
.speed-value {
min-width: 50px;
text-align: center;
font-weight: bold;
background: rgba(255,255,255,0.95);
padding: 8px;
border-radius: 4px;
color: #333;
}
.button-group {
display: flex;
gap: 10px;
margin-top: 20px;
}
.control-button {
padding: 14px 28px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 8px;
}
.btn-run {
background: #4CAF50;
color: white;
flex: 1;
}
.btn-run:hover:not(:disabled) {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-stop {
background: #f44336;
color: white;
flex: 1;
}
.btn-stop:hover:not(:disabled) {
background: #da190b;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-step {
background: #2196F3;
color: white;
padding: 14px 20px;
}
.btn-step:hover:not(:disabled) {
background: #0b7dda;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.control-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.visualization-section {
margin-top: 30px;
}
.wave-panel {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.wave-header {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 12px 20px;
font-weight: bold;
font-size: 16px;
}
.wave-content {
padding: 10px;
background: #fafafa;
min-height: 180px;
position: relative;
}
.wave-content svg {
display: block;
background: white;
border-radius: 4px;
}
.constellation-panel {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
display: none;
}
.constellation-panel.active {
display: block;
}
.info-panel {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.info-item {
padding: 12px;
background: #f5f5f5;
border-radius: 6px;
border-left: 4px solid #4CAF50;
}
.info-label {
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.info-value {
font-size: 18px;
font-weight: bold;
color: #333;
font-family: 'Courier New', monospace;
}
.binary-display {
background: #1e1e1e;
color: #00ff00;
padding: 15px;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.8;
overflow-x: auto;
white-space: nowrap;
margin-top: 10px;
}
.binary-display .current-byte {
background: rgba(76, 175, 80, 0.3);
padding: 2px 4px;
border-radius: 3px;
}
.formula-panel {
background: #e3f2fd;
border: 1px solid #2196F3;
border-radius: 8px;
padding: 15px 20px;
margin-top: 15px;
}
.formula-panel h4 {
margin-top: 0;
color: #1565c0;
font-size: 16px;
}
.formula-text {
font-family: 'Courier New', monospace;
font-size: 14px;
color: #0d47a1;
line-height: 1.8;
}
.description-section {
margin-top: 30px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
border-top: 3px solid #4CAF50;
}
.description-section h3 {
color: #4CAF50;
margin-top: 0;
}
.description-section p {
line-height: 1.6;
color: #555;
margin-bottom: 15px;
}
.description-section ul {
line-height: 1.8;
color: #555;
}
.modulation-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 15px;
margin-top: 20px;
}
.modulation-card {
background: #f5f5f5;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #4CAF50;
}
.modulation-card h4 {
margin-top: 0;
color: #4CAF50;
}
.modulation-card p {
font-size: 14px;
margin: 5px 0;
}
/* Axis styling */
.axis {
font-size: 12px;
}
.axis path,
.axis line {
stroke: #666;
stroke-width: 1;
}
.grid line {
stroke: #e0e0e0;
stroke-width: 1;
stroke-dasharray: 2,2;
}
.carrier-wave {
stroke: #2196F3;
stroke-width: 2;
fill: none;
}
.modulating-signal {
stroke: #ff9800;
stroke-width: 2;
fill: none;
}
.modulated-signal {
stroke: #4CAF50;
stroke-width: 2.5;
fill: none;
}
.constellation-point {
fill: #ccc;
stroke: #999;
stroke-width: 1;
}
.current-symbol {
fill: #4CAF50;
stroke: #2e7d32;
stroke-width: 2;
}
.symbol-path {
stroke: #4CAF50;
stroke-width: 1;
stroke-dasharray: 3,3;
fill: none;
}
/* Responsive design */
@media (max-width: 768px) {
.control-grid {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
.calc-header h2 {
font-size: 24px;
}
.wave-content {
min-height: 150px;
}
.info-grid {
grid-template-columns: 1fr;
}
.modulation-types {
grid-template-columns: 1fr;
}
}
/* Loading spinner */
.loading {
display: none;
text-align: center;
padding: 20px;
color: #666;
}
.loading.active {
display: block;
}
.spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #4CAF50;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
کتابخانه D3.js
📡 ویژوالایزر مدولاسیون
تجسم تعاملی طرح های مدولاسیون آنالوگ و دیجیتال. متن را وارد کنید و ببینید که چگونه تکنیکهای مدولاسیون مختلف دادهها را روی امواج حامل کدگذاری میکنند. شکل موجهای بیدرنگ، نمودارهای صورت فلکی را ببینید و ریاضیات پشت ارتباط بیسیم را درک کنید.
1.0x
درباره طرح های مدولاسیون
مدولاسیون فرآیند رمزگذاری اطلاعات بر روی یک موج حامل با تغییر یک یا چند ویژگی آن (دامنه، فرکانس یا فاز) است. این ابزار نحوه عملکرد طرح های مدولاسیون مختلف را در زمان واقعی به تصویر می کشد.
مدولاسیون دامنه (AM)
فرمول:s(t) = [A + m(t)] · cos(2πfₒt)
دامنه موج حامل را بر اساس سیگنال پیام تغییر می دهد.
مدولاسیون فرکانس (FM)
فرمول:s(t) = A · cos(2πfₒt + β∫m(t)dt)
فرکانس موج حامل را بر اساس سیگنال پیام تغییر می دهد.
مدولاسیون فاز (PM)
فرمول:s(t) = A · cos(2πfₒt + kₚm(t))
فاز موج حامل را بر اساس سیگنال پیام تغییر می دهد.
کلیدهای تغییر دامنه (ASK)
فرمول:s(t) = A1 · cos(2πfₒt) برای بیت 1، A₀ · cos(2πfₒt) برای بیت 0
مدولاسیون دیجیتال که بین دو سطح دامنه سوئیچ می کند.
کلیدهای تغییر فرکانس (FSK)
فرمول:s(t) = A · cos(2πf1t) برای بیت 1، A · cos(2πf0t) برای بیت 0
مدولاسیون دیجیتال که بین دو فرکانس سوئیچ می کند.
کلید تغییر فاز (PSK)
فرمول:s(t) = A · cos(2πfₒt + φ)، که در آن φ = 0 درجه یا 180 درجه
مدولاسیون دیجیتال که بین حالت های فاز سوئیچ می کند.
مدولاسیون دامنه چهارگانه (QAM)
فرمول:s(t) = I(t)cos(2πf2t) - Q(t)sin(2πfₒt)
مدولاسیون دامنه و فاز را برای سرعت داده بالا ترکیب می کند. چند بیت در هر نماد رمزگذاری شده است.
نحوه استفاده
- متن را وارد کنید:هر متنی تا 100 کاراکتر تایپ کنید
- مدولاسیون را انتخاب کنید:از طرحهای آنالوگ (AM/FM/PM)، دیجیتال (ASK/FSK/PSK) یا QAM انتخاب کنید.
- تنظیم سرعت:از نوار لغزنده برای کاهش یا افزایش سرعت انیمیشن استفاده کنید (0.1x تا 2x)
- شبیه سازی اجرا:برای شروع تجسم و مشاهده نحوه کدگذاری متن خود کلیک کنید
- حالت مرحله ای:از دکمه Step برای پیشبرد یک نماد در یک زمان برای تجزیه و تحلیل دقیق استفاده کنید
ویژگی های آموزشی:
- تجسم در زمان واقعی سیگنال های حامل، مدوله و مدوله شده
- نمودارهای صورت فلکی برای QAM که مؤلفه های I/Q را نشان می دهد
- نمایش باینری داده های متنی شما
- فرمول های ریاضی برای هر نوع مدولاسیون
- انیمیشن نماد به نماد برای درک زمان