Blog yazıları ve teknik makaleler için senaryo şekilleri

Otonom sürüş, kendi kendine giden araçlar ve ADAS hakkındaki mühendislik blogları, Medium / Substack yazıları, GitHub README’leri ve teknik bültenler düzenli olarak temiz bir senaryo şekline ihtiyaç duyar: açıkladığınız kavşak, üzerinde yürüdüğünüz sınır durum, kodunuzun hakkında muhakeme yürüttüğü şerit yapılandırması. drawtonomy bu şekiller için makuldür ve web için ayarlanmış çıktı formatlarına sahiptir.

Bu sayfa, Otonom sürüş makaleleri için şekiller sayfasının blog / makale karşılığıdır — aynı tuval, farklı çıktı kısıtlamaları.

Blog ve makale şekillerinin gereksinimleri

Kısıtlamalar bir makale şeklinden farklıdır:

Gömülebilir. Şekil dönüştürme yapmadan Markdown / MDX / Notion / Ghost / Substack editörüne girebilmeli.
Açık / koyu mod uyumlu. Birçok mühendislik blogu her ikisinde de gösterir. Şekil her ikisinde de okunabilmeli.
Küçük dosya boyutu. 4 MB taramalı görüntü sayfa yüklemesini ve SEO’yu olumsuz etkiler. SVG veya sıkıştırılmış PNG doğru varsayılan.
Sosyal kart uyumlu. Yazı Twitter / LinkedIn / Hacker News’te paylaşıldığında OG görüntüsü genellikle şekildir. En boy oranı ve küçük boyuttaki okunabilirlik önemlidir.
Yeniden düzenlenebilir. Blogcular yazıları günceller. Şeklin sonradan yeniden çizilmeden düzenlenebilmesi gerekir.

drawtonomy’nin varsayılanları bunlarla örtüşür:

.drawtonomy.svg (drawtonomy’nin yerel SVG formatı) geçerli bir SVG’dir; herhangi bir HTML / Markdown / MDX bağlamına gömülebilir — ve yazı güncelleme gerektirdiğinde drawtonomy’de yeniden düzenlenebilir.
PNG dışa aktarımı, SVG desteklenmediğinde yüksek DPI ile kullanılabilir (örneğin LinkedIn önizlemeleri).

Önerilen iş akışı

Tipik bir blog şekli için tekrar edilebilir bir iş akışı:

Senaryoyu seçin. Tek sahne, tek nokta. Tek bir şekilde tüm bir boru hattını göstermeye çalışmayın.
drawtonomy.com’da taslak çizin. Yollar, şeritler, kavşaklar, araçlar, yayalar, yollar, metin etiketleri.
Hem açık hem koyu mod için biçimlendirin. #fff ve #1a1a1a arka planda hayatta kalan renkler seçin. Saf beyaz konturlardan (açıkta görünmez) ve saf siyah konturlardan (koyuda görünmez) kaçının. Orta gri konturlar her ikisinde de iyi çalışır.
Tuval kırpmasını ayarlayın. En alakalı bölüm ortada olacak şekilde şekli konumlandırın. Aynı şekli OG kartı olarak kullanacaksanız yaklaşık 1200 × 630 olarak çerçeveleyin.
.drawtonomy.svg olarak kaydedin. Bu düzenlenebilir kaynak. Blog yazılarının çoğu yayınlandıktan sonra en az bir kez güncellenir — .drawtonomy.svg her güncellemenin yeniden çizim yerine bir düzenleme olmasına olanak tanır.
Gerçekten dağıtacağınız varlıkları dışa aktarın. Aynı sahneden:
- OG kartı için .png 1200 × 630 (LinkedIn / X / Hacker News önizlemeleri).
- Blog platformunuz .drawtonomy.svg yerine düz SVG tercih ediyorsa yazının gövdesi için Düz SVG (her ikisi de geçerli SVG olduğundan çoğu modern platform her ikisini de kabul eder).
Ekleyin. Blog editörünüze bırakın. Bir açıklama ekleyin — arama motorları ve ekran okuyucular buna güvenir.

Boyutlandırma ve çözünürlük

SVG için çözünürlük önemli değildir; şekil düzenin kararlaştırdığı boyuta ölçeklenir. PNG için kullanışlı boyutlar:

Kullanım	Boyut
Satır içi blog şekli (tam genişlik)	1600 × 900
Satır içi blog şekli (yarı genişlik)	800 × 450
OG / sosyal kart	1200 × 630
Twitter kartı	1200 × 600
LinkedIn paylaşım görüntüsü	1200 × 627
GitHub README başlık	1200 × 600

Bu ne için değil?

Fotogerçekçi görselleştirmeler. drawtonomy kesinlikle 2D kuş bakışıdır. Sensörün birinci şahıs görüntüsü için simülatör ekran görüntüsü kullanın.
Animasyonlar. drawtonomy statik şekiller dışa aktarır. Animasyonlu senaryo açıklamaları için statik şekli dışa aktarın ve ayrıca animasyon yapın veya basit bir oynatma için esmini ile OpenSCENARIO dışa aktarımını kullanın.

İlgili okumalar

Otonom sürüş makaleleri için şekiller — akademik makale karşılığı.
Tasarım incelemesi için sunumlar — sunum karşılığı.
Kesme ve şerit değişimi senaryolarını görselleştirme — çizeceğiniz tekrarlayan senaryolar.