Get best of the week

Produksi Ikon Bahan untuk MacOSX Home Assistant on Electron

Pada seri pertama, saya membuat rumah pintar di Home Assistant. Dalam prosesnya, saya jatuh cinta dengan Asisten Rumah dan berpikir untuk menulis aplikasi desktop untuk sistem ini. Home Assitant memiliki antarmuka berbasis web yang luar biasa dan sepertinya masuk akal untuk membungkusnya dalam Electron untuk mendapatkan ikon dok yang indah, pemberitahuan asli, bilah menu untuk akses cepat dan zeroconf lainnya. Home Assistant untuk semua yang dapat digunakan Ikon Bahan: untuk dasbor, untuk negara bagian, untuk tombol, untuk semuanya. Ini berarti bahwa Anda perlu menarik seluruh set ikon material ke dalam aplikasi Electron.

Electron menggunakan API nativeImage untuk bekerja dengan gambar , yang pada tahun 2020 tidak menerima format vektor dan berkenan hanya menggunakan PNG dan JPG. JPG tidak cocok untuk kita karena artefak kompresi untuk ikonnya mematikan. Jadi Anda perlu tempat untuk mendapatkan format yang ditransfer ke PNG. Mendaki ke situs rumah dari ikon-ikon material selama sekitar 15 menit, saya sedang mencari paket ikon-ikon material siap pakai untuk MacOSX yang dipotong menjadi png dalam berbagai ukuran dan di bawah dpi yang berbeda ... Sulit untuk mengatakan mengapa, tetapi mereka tidak mempublikasikan hal seperti itu di sana. Harus memproduksi secara mandiri.

Home Assistant menawarkan untuk mendeklarasikan ikon konfigurasi dalam format "mdi: home-cirlce" - nama ikon ( dari sini) dengan penggantian karakter pertama '-' oleh ':'. Ganti "-" => ":" yang secara terprogram kami konversi menjadi lebih dekat dengan aslinya dan tidak menggunakan karakter ":" dalam nama file. Tempat pertama yang saya ingin sekrup pada ikon adalah menu dashboard Home Assistant . Untuk menubar, macosx menggunakan gambar 16x16 piksel dan @ 2 untuk retina (mungkin lebih, @ 2 sudah cukup di poppy saya). Jadi saya perlu mendapatkan dua file untuk setiap ikon dari set materi:

mdi-icon-name16.png
mdi-icon-name16@2.png

Menambahkan ukuran pada nama sehingga menambahkan ukuran gambar baru tidak akan mengganggu jalan di masa depan.

Font terakhir biasanya dikumpulkan dari gambar SVG, ini memunculkan dua tugas: 1 - menemukan ikon material svg, 2 - mengotomatiskan pengirisan mereka untuk> 5000 file.

Situs asli masih berguna, di sana saya menemukan perintah "npm installmdi/ font. " Secara acak mengganti svg alih-alih font dengan perintah "npm installmdi/ svg ”kami mendapatkan seluruh set ikon material yang tertata rapi di direktori yang sama node_modules / @ mdi / svg / svg / dengan nama-nama seperti mdi-icon-name.svg. ImageMagick yang sudah dikenalnya menunjukkan kualitas gambar yang sangat rendah, utilitas svg2png bekerja lebih buruk. Tetapi stackoverflow yang bagus menyarankan bahwa inkscape akan mengatasi tugas ini dengan perintah seperti itu

inkscape -w 16 -h 16 node_modules/@mdi/svg/svg/ab-testing.svg \
    -o images/mdi-ab-testing16.png

Hasilnya ternyata memuaskan.Tetapi



pemeriksaan yang lebih dekat menunjukkan bahwa dalam Mode Gelap ikon tersebut terlihat membosankan:



Situs web Apple mengatakan bahwa mereka menemukan format Templat khusus sehingga gambar dapat dibalik tanpa banyak kesulitan, jika nasib membawa mereka ke Mode Gelap. Peran file tersebut adalah gambar PNG di mana semua piksel berwarna hitam, dan ikon itu sendiri digambar dengan transparansi (pada saluran alfa). Pada saat yang sama, Elektron dapat mengambil gambar seperti itu jika ada "Templat" di namanya. Jadi, dua file lagi dengan ikon perlu ditambahkan dua lagi dengan ikon Templat, kita mendapatkan set ini untuk setiap ikon:

mdi-icon-name16.png
mdi-icon-name16@2.png
mdi-icon-name16Template.png
mdi-icon-name16Template@2.png

Inkscape tidak akan dapat melakukan keajaiban dengan saluran alpha dari konsol, tetapi mudah untuk mengkonversi dari ImageMagick.

Kami melakukannya dalam tiga langkah:

inkscape -w 16 -h 16 \
    node_modules/@mdi/svg/svg/ab-testing.svg \
    -o images/mdi-ab-testing16.png
convert -size 16x16 xc:none images/background16.png
convert -verbose -composite images/background16.png \
    images/mdi-ab-testing16.png -compose CopyAlpha \
    menuicons/ab-testingTemplate16.png

1 - Membuat gambar bitmap dari vektor
2 - Membuat gambar transparan untuk langkah ketiga
3 - Membuat file dengan transfer gradasi abu-abu ke saluran alfa.

Sudah dengan ikon menu Templat dalam Mode Gelap mulai terlihat seperti ini



Ok, tujuannya tercapai. Script menyaring semua gambar dalam format yang diinginkan


#!/bin/sh -x

set -e

# Run 'npm install @mdi/svg' beforehead
MDISVG_PATH='node_modules/@mdi/svg/svg/'

#Put inkscape and convert into PATH
PATH=$PATH:/Applications/Inkscape.app/Contents/MacOS/

mkdir -p images
convert -size 32x32 xc:none images/background16@2x.png
convert -size 16x16 xc:none images/background16.png

SIZES="
16,16
32,16@2x
"
FILES=`ls ${MDISVG_PATH} |grep svg`
for SVG in $FILES; do
    BASE=$(basename "$SVG" | sed 's/\.[^\.]*$//')
    for PARAMS in $SIZES; do
        SIZE=$(echo $PARAMS | cut -d, -f1)
        LABEL=$(echo $PARAMS | cut -d, -f2)
        inkscape -w $SIZE -h $SIZE "$MDISVG_PATH/$SVG" \
            -o "images/mdi-${BASE}${LABEL}".png
        convert -verbose \
            -composite images/background${LABEL}.png "images/mdi-${BASE}${LABEL}".png \
            -compose CopyAlpha \
            "images/${BASE}Template${LABEL}".png
    done
done

Kami menunggu beberapa jam hingga> 20.000 gambar keluar dari jalur perakitan ...

PS Ini bukan satu-satunya petualangan ketika bekerja dengan Electron, saya akan menulis tentang petualangan selanjutnya saat mereka selesai ...

More articles:


All Articles