MFD Interface - Canvas-based Multi-Function Display
2025-12-07
Problem do rozwiązania
MFD musiał działać jak prawdziwy multi-function display w kabinie samolotu - wyświetlać rzeczywiste dane lotu w czasie rzeczywistym, reagować na kliknięcia przycisków OSB (Option Select Buttons) i obsługiwać wprowadzanie danych poprzez keypad. Wszystko musiało działać sprawnie z 60 FPS.
Architektura MFD
Stworzyłem system wieloekranowy, gdzie każdy ekran odpowiada za inną funkcjonalność: autopilot, radio, PFD, radar, plan lotu i systemy. Użytkownik może przełączać się między ekranami za pomocą menu.
Obsługiwane ekrany
- AUTOPILOT - wyświetla i pozwala kontrolować heading, altitude i speed bugi
- RADIO - pełna kontrola COM1/COM2/NAV1/NAV2/XPDR z możliwością wpisywania częstotliwości
- PFD - tradycyjny primary flight display ze wskaźnikami pitch, bank, altitude, vertical speed
- RADAR - wyświetla pobliski ruch w zadanym zakresie
- FPL - planowanie lotów z wyświetlaniem waypoints
- SYSTEMS - parametry systemu: RPM, zużycie paliwa, temperatura
Wyzwania
1. Wydajność - 60 FPS
Canvas miał służyć do efektywnego renderowania. Zwyczajne przerysowywanie całego ekranu co klatkę szybko prowadzi do spadku FPS. Musiałem zaimplementować caching wyrenderowanych elementów, batch rendering updateów i używać RequestAnimationFrame zamiast setInterval.
2. Interaktywność z Canvas
Canvas to bitmap, nie ma wbudowanej obsługi interaktywnych elementów. Musiałem ręcznie mapować kliknięcia myszy na pozycje przycisków OSB. Kliknięcia na lewej krawędzi ekranu to przyciski 1-5, na prawej to 6-10.
3. Real-time data updates
MFD musiał być zawsze zsynchronizowany z rzeczywistymi danymi z symulatora. Zaimplementowałem polling co sekundę, co jest optymalnym balansem między świeżością danych a obciążeniem sieci.
Wynik
Uzyskałem płynny, responsywny interfejs MFD, który odwzorowuje rzeczywiste multi-function displayy. System jest modularny - każdy ekran jest niezależnym komponentem, co ułatwia dodawanie nowych funkcji.
🖥️