Küçük Kızının Sevdiği Uçaklar İçin Bir Ebeveynin Yaptığı Radar
(jacobbartlett.substack.com)- İki yaşındaki kızının uçaklara merak salmasının ardından, yakındaki hava araçlarını telefon radarı gibi gösteren iOS uygulaması Aviator birkaç akşamlık bir yan proje olarak geliştirildi
- FlightRadar24, hava araçlarının konumunu harita üzerinde gösteriyor; ancak gerçek gökyüzünde hangi yöne bakmak gerektiğine ve çocuğun kolay bulabileceği uçağın hangisi olduğuna ayrıca karar vermek gerekiyordu
- Uygulama, Core Location yön bilgisi, OpenSky Network’ün ticari olmayan REST API’si, MapKit annotation’ları ve SwiftUI arayüzünü birleştirerek hava araçlarını cihazın yönüne göre gösteriyor
- MVP testinde gerçek uçaklarla uygulamadaki gösterimin eşleştiği doğrulandıktan sonra haritayı gizleme, alçak irtifadaki hava araçlarını büyütme, radar animasyonu, CRT efekti, ses ve haptik geri bildirim ile renk ayarları eklendi
- Nihai uygulama App Store’da yayımlandı; sonraki iyileştirme adayları olarak yakınlaştırma seviyesi, OpenSky gelişmiş API, kalkış/varış ülkelerini gösterme, Metal shader iyileştirmeleri, mesafe/irtifa filtresi ve “zany mode” kaldı
Uçak gözleminden uygulama gereksinimlerine
- Kızı, yazın yurt dışı seyahatinde 3 saatlik uçuş öncesi uçak yolculuğunu heyecanla bekliyordu; uçağa bindikten sonra kabin ekibinin yönlendirmesiyle kokpiti gezince uçaklara daha da kapıldı
- Sonrasında sık sık gökyüzündeki uçakları bulmasını istemeye başladı; hatta bahçede bir saat boyunca onu omuzlarında taşıyıp akşam göğündeki uçakları aradıkları oldu
- FlightRadar24 hava aracı konumlarını harita üzerinde gösteriyordu; ancak gerçek gökyüzünde hangi yöne bakılması gerektiğini kullanıcının kendisinin eşleştirmesi gerekiyordu
- 2B haritada 40.000 feet’teki bir Learjet ile London City Airport’tan yeni kalkmış bir AirBus benzer görünebilir; ancak gerçek gökyüzünde alçak irtifadaki büyük bir hava aracını bulmak daha kolaydır
- İki yaşındaki bir çocuğun ihtiyacı harita yorumlamak değil, basitçe uçak bulmaktı
- İlk sorun üç başlıkta toplandı
- Yön eşleştirme: Cihazın yönüne göre hava aracı konumu gerçek gökyüzündeki yönle örtüşmeli
- Boyut gösterimi: Hava aracının irtifasına göre ekrandaki boyutu değişmeli
- Kullanılabilirlik: İş amaçlı bir uçuş takip uygulaması değil, retro tarzda bir oyuncak gibi olmalı
Aviator’ın ilk tasarımı
- Uygulama fikri “yakındaki uçuşları radarda göstermek”ti ve proje adı Aviator olarak belirlendi
- Temel gereksinimler üç taneydi
- Cihaz döndüğünde ekran da onunla birlikte dönerek hava araçlarını doğru yönde göstermeli
- Hava aracının irtifasına göre ekrandaki boyutu değişmeli
- Çocuğun kullanabileceği eğlenceli, retro bir oyuncak hissi vermeli
- Yön işleme için iOS Core Location API’sinin heading güncellemeleri kullanıldı
- Cihaz yönü
CLLocationManagerDelegateiçindekididUpdateHeadingile alındı - Yön değeri, Combine’ın
CurrentValueSubject’ı ile SwiftUI view’larına aktarıldı
- Cihaz yönü
- Havacılık verisi için OpenSky Network kullanıldı
- Basit bir REST API ile belirli enlem-boylam aralığındaki gerçek zamanlı hava aracı verilerini sağlıyor
- Ticari olmayan kullanım ücretsiz
- Gerçekçi bir radar taraması için endpoint’in birkaç saniyede bir çağrılması planlandı
- Konum verisi Core Location’dan alındı ve kullanıcı konumunun çevresindeki enlem-boylam aralığı sorgulandı
- İlk tasarımda kullanıcı konumunu yeterince belirsizleştirmek için enlem ±1 derece, konum hassasiyeti 0,1 dereceyle yaklaşık 10 km düşünülmüştü
- Gerçek API örnek kodunda, Birleşik Krallık enlemlerinde kabaca kare bir alan elde etmek için enlemde 0,5 derece, boylamda 1 derece aralığı kullanıldı
- OpenSky Network API’si ticari olmayan kullanımla sınırlı olduğundan ve uygulama da ticari bir servis olmadığından, SwiftUI tarafında basit bir MV yapısı kullanıldı; yalnızca API ve Location gibi temel servisler ayrıştırıldı
PoC: yön, uçuş verisi ve harita doğrulaması
- Yön PoC’si, konum izni isteme, delegate ayarlama ve heading güncellemelerini başlatma işlerini
LocationManagersingleton’ı ile ele aldı - SwiftUI view’u
.onReceiveilerotationAngleSubject’a abone oldu ve dikdörtgenleri dairesel olarak yerleştirip pusula gibi döndürme efektini uyguladı - Test cihazında gerçek konum değişimlerine iyi tepki verdi; ancak 0 ve 360 dereceyi ayrı değerler olarak ele alan animasyon nedeniyle gerçek kuzeyden geçerken dikdörtgenlerin tam tur attığı görsel bir glitch oluştu
- OpenSky REST API, enlem-boylam aralığı belirtilen bir
GETisteğiyle bölgedeki uçuşların dizisini döndürür- Örnek endpoint,
states/allüzerinelamin,lamax,lomin,lomaxparametrelerinin eklenmesi şeklindedir - REST API dokümantasyonu iyi hazırlanmıştı; ancak yanıt key içermeyen bir yapıda olduğu için JSON alanlarını sırayla parse etmek gerekiyordu
- Swift’in
UnkeyedContainer’ı ileicao24,callsign,origin_country,time_position,last_contact,longitude,latitudegibi alanlar decode edildi
- Örnek endpoint,
- Hava aracını çizmenin ilk denemesi, kullanıcı konumu ile hava aracının enlem-boylam farkını sabit bir ekran ölçeğiyle çarpıp SF Symbol
airplanegörselini yerleştirmekti- 1 derece enlem-boylamın gerçek mesafesi konuma göre değiştiği için bu yöntem doğru olamazdı
- Yine de başlangıç noktası olarak faydalıydı
- Doğruluk kontrolü için arka plana SwiftUI
Mapyerleştirildi; üzerine hava araçları ve pusula bindirildi- FlightRadar projeksiyonuyla karşılaştırıldığında hava aracı sayısı ve kümelenmeler kabaca tutuyordu; ancak konumlar epey sapıyordu
- Sonrasında hava araçlarını doğrudan harita üzerinde annotation olarak çizme yöntemine geçildi
MVP: MapKit annotation’ları ve kullanıcı testi
- iOS 17 hedeflenirken, MapKit’in harita annotation özelliği kullanılarak uçak biçimli marker’lar gerçek coğrafi koordinatlara yerleştirildi
FlightMapView,Map(position:)üzerine hava aracı annotation’larını çiziyor; radar kullanımına uygun olarak.allowsHitTesting(false)ile harita etkileşimini engelliyordu- İrtifa bazlı boyut ayarında başlangıçta yüksek irtifadaki hava araçlarının daha büyük görünmesi için log ölçeği uygulandı
- Hava aracının
true_trackdeğeri ile Core Location’dan gelen kullanıcı yönü birleştirilerek uçak ikonunun yönü ayarlandı
- Hava aracının
- İlk MVP kullanıcı testinde kızıyla gerçekten uçaklar buldu ve uygulamada görünen hava aracının gerçek gökyüzünde de göründüğünü doğruladı
- Testten sonra iki düzeltme gerektiği ortaya çıktı
- Boyutlandırma tersmiş: Gökyüzünde çıplak gözle bulunması kolay hava araçlarını göstermek için alçak irtifadakiler daha büyük olmalıydı
- Kızı haritayı değil yalnızca uçakları istiyordu; bu yüzden gürültüyü azaltmak için haritanın kaldırılması gerekiyordu
- Düzeltilen ölçek formülü
min(2, max(4.7 - log10(flight.geo_altitude + 1), 0.7))- Yerel gökyüzü taramalarında 0,7 ile 2,0 arasında değerler elde edildi ve ekrandaki dağılım iyi uydu
Radar arayüzünü oluşturmak
- OpenSky API sık sık timeout,
502 Bad Gatewayve null veri içeren 200 yanıtları döndürebiliyor- Ücretsiz, ticari olmayan bir API olduğu ve SLA bulunmadığı için istemciye temel retry logic eklendi
- Ertesi gün tüm gün sorunsuz çalıştı ve yoğun trafik olan belirli saatler dışında genel olarak iyi göründü
- Gerçek haritayı görünmez yapmak için
MapPolygonoverlay’i kullanıldı- Normalde harita alanı vurgulama için kullanılan bir overlay olsa da, yalnızca hava aracı annotation’larını bırakıp haritayı kapatmak için kullanıldı
- Apple’ın overlay’i haritanın üstüne, annotation’ların altına çizdiği için istenen sonuç elde edildi
- Radar ekranı çizgiler, eşmerkezli daireler ve 20 derece genişliğinde dönen angular gradient ile oluşturuldu
- Daha sonra radar çizgisi efekti 360 derecelik angular gradient’e sadeleştirildi
- Yeşilden saydama, ardından siyaha giden gradient döndürülerek tarama ve iz kalıntısı gibi görünmesi sağlandı
- “grug-brained” yaklaşımın çoğu zaman daha iyi uyduğu değerlendirildi
- Cihaz hızlı döndürüldüğünde ekran köşelerinde harita parçalarının göründüğü görsel artifact vardı; radar view’unun dışını siyahla kapatan reverse mask ile çözüldü
Ürünleştirme: CRT efekti, ses, ayarlar, App Store
- Retro oyuncak hissi için CRT ekran efekti eklendi
- iOS 17’nin
colorEffectiçinde yerleşik Metal shader desteği kullanıldı - Shader, siyah olmayan piksellere scanline değeri uyguluyor
timeparametresi eklenerek scanline’ların hızla yukarı doğru hareket etmesi sağlandı ve dinamik bir his verildi
- iOS 17’nin
- OpenSky Network politikası gereği App Store’a koymanın uygun olup olmadığını doğrulamak için iletişime geçildi ve 20 dakika içinde yanıt alındı
- Radar deneyimi ve erişilebilirlik için uçuş güncellemelerinde sistem sesi ve haptik geri bildirim eklendi
AudioServicesPlaySystemSound(1052)ile beep-boop sesi çıkarıldı- SwiftUI’nin
sensoryFeedback(.levelChange, trigger:)özelliği kullanıldı
- Ses rahatsız edebileceği için
@AppStoragetabanlı ayarlar eklendisilent: sessiz modshowMap: radar overlay’ini kapatıp alttaki haritayı görmeyi sağlaruserColor: SwiftUI color picker ile radar rengini seçer
- Midjourney aboneliği durdurulmuş olduğundan, pilot şapkası takmış kızı andıran Aviator maskotu oluşturmak için Gencraft’ın ticari olmayan ücretsiz üreticisi kullanıldı
- Apple Developer Program’a yeniden katılırken £79 ödendi ve App Store dağıtımı hazırlandı
- Yalnızca iOS 17 hedeflenmesine rağmen 6,5 inç ve 5,5 inç iPhone ekran görüntüleri göndermek gerekiyordu
- En yeni 5,5 inç iPhone olan iPhone 8 Plus en fazla iOS 16 desteklediğinden, iki boyuttaki ekran görüntüleri AppScreens ile dışa aktarıldı
- Uygulama App Store’a yüklendi; indirme bağlantısı Aviator — Radar on your Phone
Sonraki sürüm adayları
- Birkaç akşamda yapılan yan projenin sonucundan memnun kalındı; kızı için oyuncak yapma kodlama deneyimi uzun zamandır en keyifli olanıydı
- Sonraki sürüm için aday özellikler şunlar
- Daha yakın hava araçlarını radarla sınırlamak için harita zoom seviyesi ekleme
- OpenSky Network gelişmiş API ile helikopter, uydu ve uçak boyutu sınıfı gösterme
- Hava araçlarında kalkış/varış ülkelerini gösterme anahtarı ekleme
- Daha gelişmiş Metal shader ile CRT ekran efektini iyileştirme
- Kontrolleri yeniden boyutlandırılabilir progressive-disclosure pull-out modal olarak refactor etme
- Mesafe/irtifa slider filtreleri uygulayarak alçak ve uzak hava araçlarını gizleme
- UFO’ları, dev böcekleri ve uzaylıları radarda render eden zany mode uygulama
1 yorum
Hacker News yorumları
Harika bir iş, yazı da güzel. Özgün radar göstergesinin tasarımının bu projeyi ne kadar güçlü biçimde yönlendirdiği ilginç
Çocuğun gerçek bir CRT şöyle dursun, PPI göstergeli bir ASR-9’a dokunma fırsatı bile olmayabilir; buna rağmen onu simüle etmek için epey emek harcanmış
Bu biraz skeuomorfizmi sevmekten kaynaklanıyor olabilir, ama aynı zamanda orijinal radar ekranının “Gökyüzünde bir şey var mı, varsa bana göre nerede?” sorusunu mükemmel biçimde sıkıştırıp göstermesinden de kaynaklanıyor gibi
Günümüzdeki gökyüzü gözlem arayüzleri bağlam bilgisine, dış servis bağlantılarına ve reklam alanına kaydıkça bu soruyu kolayca yanıtlama becerisini kaybetmiş gibi geliyor
Hedefin mesafesi merkezden uzaklıkla, yönü ise dairenin çevresindeki açıyla ifade ediliyordu
Yine de süpürmeyi taklit eden kısım sorgulanabilir bir tasarım olmuş olabilir; parlak renkler ve haritasız arka plan ise ekranın amacına odaklanmayı sağladığından hiç sorunlu görünmüyor
Telefonu elde çevirirken pusula izleme özelliğinin süpürme yanılsamasını bozduğu da görülüyordu
https://github.com/sky-map-team/stardroid
İlgili teknik bileşenlerin hepsini anlıyor ve kendi ADSB istasyonumu da işletiyorum ama kamerayı gökyüzüne tuttuğumda görüş alanındaki uçakların meta verilerini görmek hâlâ şaşırtıcı
Harika. Bir gün yapılacaklar listeme ekledim
Benzer şekilde, 5 yaşındaki oğlum için bir uçuş seyir defteri hazırladım ve bebekliğinden beri kullanıyoruz. Her uçuşta kabin ekibine, kaptanın bir şey yazıp yazamayacağını sormasını sağlıyorum
Rota, uçak tipi ve olan biteni kaydediyoruz; kabin ekipleri bu tür şeyleri gerçekten çok seviyor. Kokpiti ve mürettebat dinlenme alanını da gezdik, yazdıkları mesajlar da her zaman çok içtendi
Defteri her geri aldığında çocuğun yüzü ışıldıyor; küçük uçak meraklılarına şiddetle tavsiye ederim
İlk sürümün olmazsa olmaz özellikleri arasına gösterge rengini değiştirme seçeneğinin konmasını sevdim. Hedef kullanıcı kitlesinin ihtiyaçlarının çok sağlam anlaşıldığı anlamına geliyor
3 yaşındaki bir çocuk bile renk seçicisi olan her oyuncağı sever
HN’de karma 250’yi geçtiğimdeki irrasyonel heyecanı düşünün
Bugün göstersem çocuğun ilk ilgileneceği şey rengi seçmek olur; ince motor gelişimi için de iyi
“Uçak yolculuğunu o kadar yücelttik ki çocuk havalimanına taksiyle gitmemiz gerektiğini öğrenince şaşırdı. Evden çıkıp doğrudan uçağa yürüyerek bineceğini sanıyordu” kısmı gerçekten sevimli, komik ve bir yandan da anlaşılır
https://www.architecturendesign.net/john-travoltas-house-is-...
Kabin ekibinin sevimli bir uçak meraklısı çocuğu görünce kokpiti gezdirdiği kısmına gelirsek, NASA turuncu tulumu ile takım giyinmek tüm kokpitlere giriş pasaportu gibi
Kabin ekipleri çocuklardan daha çok heyecanlanıyor; havalimanında çocuğu bulmak da çok kolay oluyor
Başarısız sosyal ağ uygulaması Tapstack’i yalnızca aile kullanımı için klonlayan An app can be a home cooked meal yazısı da bununla ilgili
https://www.robinsloan.com/notes/home-cooked-app/
Tabii viral olması da fena olmaz
İki küçük eksiklik var
Uçak noktaları çizildikten sonra hareket edince sürükleyicilik biraz bozuluyor. Noktalar süpürme tarafından “boyanıp” bir sonraki süpürmeye kadar sabit kalsa daha gerçekçi hissedebilir
Daha fazla gerçekçilik için önceki veri noktasından ekstrapolasyon yapıp her uçağın her süpürmede tutarlı biçimde hareket etmesini de sağlayabilirsiniz
İkincisi daha basit bile olabilir. API uçuş hızını döndürdüğü için tek bir veri noktasıyla bile hesaplanabilir
Kızınızla yapabileceğiniz güzel bir etkinlik olarak, en yakın uluslararası havalimanı pistinin iniş yönündeki ucunda bulunan yola, otoparka ya da parka gitmek iyi olur.
Genelde rüzgâr yönüne göre değiştiği için buna göre gidin; arabayı park edip uçakların yaklaşıp inişini izleyin.
Çocuk kendi radarıyla hangi uçağın geldiğini görebilir; biz flightradar24 kullanmıştık.
Yaklaşan büyük jetlerin yere ne kadar yakın indiğini görünce çocukların ağzı açık kaldı; saatlerce rahatça eğlendiler. Bir sonraki uçağın daha büyük mü yoksa daha yakın mı olacağını görmek istedikleri için ayrılmak istemediler, pazarlık yapmak zorunda kaldık.
Airbus A318 boyutuna kadar olan çok motorlu sabit kanatlı uçaklar içinde yalnızca 5,5° yaklaşma yapabilecek şekilde özel uçak ve mürettebat sertifikasyonu almış olanlar operasyon yapabilir.
https://www.youtube.com/watch?v=yZIDFgpT0-o
https://en.wikipedia.org/wiki/London_City_Airport
Bu uygulamayla ilgili bir sorun var. Uygulama sayfasında açıkça 4 yaş ve üzeri yazıyor, ama hedef kullanıcı 2 yaşında.
İyi iş çıkarmışlar.
Harika.
Küçük bir ayrıntı sorusu: CRT radar skoplarında gerçekten tarama çizgileri var mıydı? Vektör ekran olduklarını sanıyordum.
Ek özellikler listesiyle ilgili olarak, uçak gözlemleme uygulaması olduğuna göre bir noktaya dokununca birkaç saniyeliğine uçak tipini göstermesi güzel olurdu.
Fosfor kalıcılığı sayesinde güçlü radar yansımaları ekranda kısa süre kalıyordu. Bu süre içinde radar bir turdan fazla dönerse, aynı uçak biraz hareket etmiş yeni bir nokta, yani bir “plot” olarak görünüyordu.
Ekrandaki plot’ları keçeli kalemle işaretleyip “track” hâline getirmek de mümkündü.
Radar ekranına dönük bir film kamerasıyla saatlerce radar yansımasını kaydedip sonra oynatmaya yarayan özel ekranlar da vardı.
Örneğin 1968 Çekoslovakya Devrimi sırasında Varşova Paktı uçaklarının hızlandırılmış oynatılmış bir kaydı var: https://youtu.be/rAUodXI4LPw?t=622
İlk radar ekranları merkezden dışarı doğru, radyal yönde tarama yapıyordu. Tarama zamanlaması menzili ölçekleyecek şekilde önceden belirlenmişti; ışın yoğunluğu sinyali ise güçlendirilmiş radar yansıma sinyalinin kendisiydi.
Bu yüzden daha güçlü yansıma sinyalleri, uzun kalıcılıklı ekranda daha iyi görünen “blip”ler olarak beliriyordu.
İlginç olan şu: radar ışınının CRT ekranı etrafında tarama yapmasını sağlamak için tüm katot ışın tüpü yayıcı düzeneği, dönen radar çanağıyla senkronize bir motorla döndürülüyordu.
Bu dönüşün her zaman radar çanağının hızı ve yönüyle eşleşmesi gerekiyordu; yoksa blip yanlış yerde görünüyordu.
Sabit radyal çizgiler ve menzil çizgileri CRT tüpünün kendisine ya da şeffaf kapağa basılıydı. Bu tür ekranlar onlarca yıl boyunca, muhtemelen 1980’lere hatta 1990’ların başına kadar kullanılmıştır.
Daha yeni sürümler, karmaşık döner ışın yayıcı düzeneğinden kaçınmak için basit elektronik devrelerle X/Y yönlerini bağımsız olarak tarayabiliyordu.
Ayrıntılar: https://en.wikipedia.org/wiki/Radar_display#Plan_position_in...
Açı, saptırma plakalarını fiziksel olarak döndürerek ya da sin/cos’u elektronik olarak hesaplayıp X/Y saptırma plakalarına uygulayarak oluşturulabilir.
Geri dönen sinyalin genliği ışın akımını doğrudan sürdüğü için, daha büyük yansıması olan hedefler daha parlak görünür.
Buna bir de depolama tüpü etkisi eklenir; bu, ilk bilgisayarlardaki depolama tüplü X-Y vektör ekranlarında bulunan iki kararlı mod gibi değil, bazı osiloskoplardaki değişken kalıcılık modu gibi çalışır.
Bu özellik, SR-71 veya XB-70 gibi erken dönem stealth uçak tasarımı girişimleriyle bağlantılı bazı sonuçlara da yol açtı.
Radar tüpünde ışın akımı, “blip”lerin birkaç süpürme boyunca birikeceği şekilde ayarlanır ve genelde blip, süpürmeler arasında kendi çapından daha az hareket eder.
Ancak uçağın radar kesit alanı doğası gereği düşükse ve uçak çok hızlı olduğu için blip süpürmeler arasında daha uzun mesafe kat ediyorsa, radar operatörü özellikle çok sayıda hedefin olduğu karmaşık durumlarda küçük hayalet blip’leri gürültü olarak yorumlayabilir.