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 Kitabxanası
📡 Modulyasiya vizualizatoru
Analoq və rəqəmsal modulyasiya sxemlərinin interaktiv vizuallaşdırılması. Mətni daxil edin və müxtəlif modulyasiya üsullarının datanı daşıyıcı dalğalara necə kodlaşdırdığına baxın. Real vaxt dalğa formalarına, bürc diaqramlarına baxın və simsiz rabitənin arxasında duran riyaziyyatı anlayın.
1.0x
Modulyasiya sxemləri haqqında
Modulyasiya bir və ya bir neçə xassələrini (amplituda, tezlik və ya faza) dəyişdirərək daşıyıcı dalğaya məlumatın kodlaşdırılması prosesidir. Bu alət müxtəlif modulyasiya sxemlərinin real vaxt rejimində necə işlədiyini vizuallaşdırır.
Amplituda Modulyasiyası (AM)
Formula:s(t) = [A + m(t)] · cos(2πfₒt)
Mesaj siqnalına əsasən daşıyıcı dalğanın amplitudasını dəyişir.
Tezlik Modulyasiyası (FM)
Formula:s(t) = A · cos(2πfₒt + β∫m(t)dt)
Mesaj siqnalına əsasən daşıyıcı dalğanın tezliyini dəyişir.
Faza Modulyasiyası (PM)
Formula:s(t) = A · cos(2πfₒt + kₚm(t))
Mesaj siqnalına əsasən daşıyıcı dalğanın fazasını dəyişir.
Amplituda sürüşmə açarı (ASK)
Formula:s(t) = A₁ · 1 bit üçün cos(2πfₒt), bit 0 üçün A₀ · cos(2πfₒt)
İki amplituda səviyyəsi arasında keçid edən rəqəmsal modulyasiya.
Tezlik dəyişdirmə açarı (FSK)
Formula:s(t) = A · 1 bit üçün cos(2πf₁t), bit 0 üçün A · cos(2πf₀t)
İki tezlik arasında keçid edən rəqəmsal modulyasiya.
Faza keçid açarı (PSK)
Formula:s(t) = A · cos(2πfₒt + φ), burada φ = 0° və ya 180°
Faza vəziyyətləri arasında keçid edən rəqəmsal modulyasiya.
Kvadrat Amplituda Modulyasiyası (QAM)
Formula:s(t) = I(t)cos(2πfₒt) - Q(t)sin(2πfₒt)
Yüksək məlumat sürəti üçün amplituda və faza modulyasiyasını birləşdirir. Simvol başına kodlanmış birdən çox bit.
Necə istifadə etməli
- Mətni daxil edin:100 simvola qədər istənilən mətni yazın
- Modulyasiya seçin:Analoq (AM/FM/PM), rəqəmsal (ASK/FSK/PSK) və ya QAM sxemlərindən seçin
- Sürəti tənzimləyin:Animasiyanı yavaşlatmaq və ya sürətləndirmək üçün slayderdən istifadə edin (0,1x - 2x)
- Simulyasiyanı işə salın:Vizuallaşdırmaya başlamaq və mətninizin necə kodlandığına baxmaq üçün klikləyin
- Addım rejimi:Ətraflı təhlil üçün hər dəfə bir simvol irəliləmək üçün Addım düyməsini istifadə edin
Təhsil Xüsusiyyətləri:
- Daşıyıcı, modulyasiya edən və modulyasiya edilmiş siqnalların real vaxtda vizuallaşdırılması
- I/Q komponentlərini göstərən QAM üçün bürc diaqramları
- Mətn məlumatlarınızın ikili təmsili
- Hər bir modulyasiya növü üçün riyazi düsturlar
- Vaxtı başa düşmək üçün simvol-simvol animasiyası