Platformların İkon İsyanı!Dostlar, bugün sizlere Electron'un `nativeImage` modülüyle yaşadığım, beni terminal başında saatlerce bırakan bir macerayı anlatacağım. Amacım basitti: Uygulamamın system tray (sistem çekmecesi) ikonunu dinamik olarak oluşturmak ve değiştirmek. "Kolay iş" dedim, `nativeImage.createFromPath()` ile başladım. Meğerse her platformun kendine has bir ikon beklentisi varmış, şaka gibi!
macOS, Windows, Linux: Üçü de Farklı Dilde Konuşuyorİlk denememde tek bir PNG dosyası kullandım. macOS'ta gayet güzel çalıştı, mutlu oldum. Sonra Windows'a geçtim... İkon bulanık, piksel piksel, rezalet! Sebebi, Windows'un tray ikonları için 16x16, 24x24, 32x32 gibi belirli boyutları beklemesi ve bunları `ICO` formatında tercih etmesiymiş. Linux deseniz, o da kendi bildiğini okuyor, genelde PNG kabul ediyor ama tema motoruna göre görünüm değişebiliyor.
Kodum kabaca şöyle başlamıştı:
JavaScript:
const { nativeImage, Tray } = require('electron');
let icon = nativeImage.createFromPath('assets/icon.png');
tray = new Tray(icon);
Çözüm: nativeImage.createEmpty() ve resize() KombosuÇözüm, `nativeImage`'ın esnekliğinde yatıyordu. Farklı boyutları tek bir görselde toplayıp, platforma uygun olanı seçtirmek gerekiyordu. İşte benim bulduğum yol:
1. Önce boş bir `nativeImage` objesi oluşturup, ona farklı boyutlardaki ikonları `addRepresentation()` metoduyla ekliyorsunuz.
2. Electron, tray'i oluştururken platformun istediği boyutu bu listeden otomatik olarak seçiyor.
Son kodum şuna benzer bir şey oldu:
JavaScript:
const path = require('path');
const { nativeImage, Tray } = require('electron');
function createTrayIcon() {
const baseIcon = nativeImage.createFromPath(path.join(__dirname, 'assets', 'icon_base.png'));
const image = nativeImage.createEmpty();
// macOS için yüksek çözünürlüklü (@2x) versiyon da eklenmeli
image.addRepresentation({
scaleFactor: 1,
buffer: baseIcon.resize({ width: 16, height: 16 }).toPNG()
});
image.addRepresentation({
scaleFactor: 2,
buffer: baseIcon.resize({ width: 32, height: 32 }).toPNG()
});
// Windows için 32x32 boyutu önemli
image.addRepresentation({
width: 32,
height: 32,
buffer: baseIcon.resize({ width: 32, height: 32 }).toPNG()
});
tray = new Tray(image);
}
Sonuç ve İsyanSonuç olarak, `nativeImage` güçlü ama platform detaylarını bilmezseniz sizi saatlerce uğraştırabilecek bir modül. Dokümantasyonu okumak yetmiyor, bazen deneme-yanılma ve biraz da forumlarda kafa patlatmak gerekiyor.
Siz de Electron tray ikonları veya `nativeImage` ile benzer bir platform savaşı yaşadınız mı? Windows için ICO dosyası kullanmak daha mı mantıklı, yoksa bu multi-representation yöntemi her yerde işe yarıyor mu? Fikirlerinizi bekliyorum, belki daha temiz bir yolu vardır!