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))
پیغام سگنل کی بنیاد پر کیریئر لہر کا مرحلہ مختلف ہوتا ہے۔
Amplitude Shift Keying (ASK)
فارمولا:s(t) = A₁ · cos(2πfₒt) بٹ 1 کے لیے، A₀ · cos(2πfₒt) بٹ 0 کے لیے
ڈیجیٹل ماڈیولیشن جو دو طول و عرض کی سطحوں کے درمیان سوئچ کرتی ہے۔
فریکوئینسی شفٹ کینگ (FSK)
فارمولا:s(t) = A · cos(2πf₁t) بٹ 1 کے لیے، A · cos(2πf₀t) بٹ 0 کے لیے
ڈیجیٹل ماڈیولیشن جو دو تعدد کے درمیان بدلتی ہے۔
فیز شفٹ کینگ (PSK)
فارمولا:s(t) = A · cos(2πfₒt + φ)، جہاں φ = 0° یا 180°
ڈیجیٹل ماڈیولیشن جو فیز سٹیٹس کے درمیان سوئچ کرتی ہے۔
Quadrature Amplitude Modulation (QAM)
فارمولا:s(t) = I(t)cos(2πfₒt) - Q(t)sin(2πfₒt)
اعلی ڈیٹا کی شرحوں کے لیے طول و عرض اور فیز ماڈیولیشن کو یکجا کرتا ہے۔ ایک سے زیادہ بٹس انکوڈ فی علامت۔
استعمال کرنے کا طریقہ
- متن درج کریں:100 حروف تک کوئی بھی متن ٹائپ کریں۔
- ماڈلن کو منتخب کریں:اینالاگ (AM/FM/PM)، ڈیجیٹل (ASK/FSK/PSK) یا QAM اسکیموں میں سے انتخاب کریں
- رفتار کو ایڈجسٹ کریں:اینیمیشن کو سست یا تیز کرنے کے لیے سلائیڈر کا استعمال کریں (0.1x سے 2x)
- نقلی چلائیں:ویژولائزیشن شروع کرنے کے لیے کلک کریں اور دیکھیں کہ آپ کے ٹیکسٹ کو کیسے انکوڈ کیا گیا ہے۔
- مرحلہ موڈ:تفصیلی تجزیہ کے لیے ایک وقت میں ایک علامت کو آگے بڑھانے کے لیے Step بٹن کا استعمال کریں۔
تعلیمی خصوصیات:
- کیریئر، ماڈیولٹنگ، اور ماڈیولڈ سگنلز کا حقیقی وقت کا تصور
- QAM کے لیے نکشتر کے خاکے I/Q اجزاء دکھا رہے ہیں۔
- آپ کے ٹیکسٹ ڈیٹا کی بائنری نمائندگی
- ہر ماڈیولیشن کی قسم کے لیے ریاضیاتی فارمولے۔
- وقت کو سمجھنے کے لیے علامت بہ علامت حرکت پذیری۔