👩‍💼 🏭 🧜 إنتاج أيقونات المواد لـ MacOSX Home Assistant على Electron 🤤 👩‍👦‍👦 🤹🏾

في السلسلة الأولى ، قمت بإعداد منزل ذكي على Home Assistant. في هذه العملية ، وقعت في حب المساعد المنزلي وفكرت في كتابة تطبيق سطح مكتب لهذا النظام. يحتوي Home Assitant على واجهة رائعة على الويب ويبدو أنه من المعقول لفه في Electron للحصول على رمز إرساء جميل وإشعارات أصلية وشريط قائمة للوصول السريع وغيرها من zeroconf. مساعد منزلي لكل شيء يمكن استخدامه رموز المواد: للوحات المعلومات ، للولايات ، للأزرار ، لكل شيء. هذا يعني أنك بحاجة إلى سحب مجموعة كاملة من رموز المواد في تطبيق Electron.

يستخدم Electron واجهة برمجة تطبيقات originalImage للعمل مع الصور ، التي لا تقبل في عام 2020 تنسيقات المتجهات وتتجه لاستهلاك PNG و JPG فقط. JPG ليست مناسبة لنا لأن القطع الأثرية للضغط للأيقونات مميتة. لذلك تحتاج إلى مكان ما لنقل التنسيق إلى PNG. عندما كنت أتسلق إلى الموقع الرئيسي لرموز المواد لمدة 15 دقيقة كنت أبحث عن حزمة جاهزة من أيقونات المواد لنظام MacOSX مقطوعة إلى png بأحجام مختلفة وتحت كل نقطة في البوصة ... من الصعب تحديد السبب ، لكنهم لا ينشرون أي شيء من هذا القبيل. يجب أن تنتج بشكل مستقل. يقدم برنامج

Home Assistant الإعلان عن أيقونات التهيئة بتنسيق "mdi: home-cirlce" - اسم الرمز ( ومن ثم) باستبدال الحرف الأول "-" بـ ":". استبدال "-" => ":" نقوم بالتحويل برمجيًا لتكون أقرب إلى الأصل ولم نستخدم الأحرف ":" في أسماء الملفات. كان المكان الأول الذي أردت أن أضعه على الأيقونات هو قائمة لوحة أجهزة المساعد الرئيسية . بالنسبة إلى menubar ، يستخدم macosx صور 16x16 pixel و @ 2 لشبكية العين (ربما أكثر من ذلك ، @ 2 كان كافيًا على خشخاشتي). لذلك أحتاج إلى الحصول على ملفين لكل رمز من مجموعة المواد:

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

تمت إضافة حجم إلى الاسم بحيث لا تتداخل إضافة أحجام جديدة للصور مع المشي في المستقبل.

عادة ما يتم جمع الخطوط النهائية من صور SVG ، مما أدى إلى مهمتين: 1 - العثور على رموز المواد svg ، 2 - أتمتة تشريحها لأكثر من 5000 ملف.

كان الموقع الأصلي لا يزال مفيدًا ، حيث وجدت الأمر "تثبيت npmmdi/ الخط. " عند استبدال svg عشوائيًا بدلاً من الخط باستخدام الأمر "npm installmdi/ svg "حصلنا على مجموعة كاملة من الرموز المادية الموجودة بدقة في نفس الدليل node_modules / @ mdi / svg / svg / مع أسماء مثل mdi-icon-name.svg. أظهر ImageMagick المألوف جودة منخفضة للغاية للصور الناتجة ، وعملت الأداة svg2png بشكل أسوأ. لكن التدفق الجيد للمكدس اقترح أن إنكسكيب سيتعامل مع هذه المهمة بمثل هذا الأمر

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

اتضح أن النتيجة مرضية ،

ولكن أظهر الفحص الدقيق أنه في الوضع الداكن تبدو هذه الرموز باهتة:

قال موقع Apple على الويب أنها اخترعت تنسيق قالب خاص بحيث يمكن عكس الصور دون صعوبة كبيرة ، إذا جلبها القدر إلى الوضع الداكن. دور هذه الملفات هو صورة PNG حيث تكون جميع وحدات البكسل سوداء ، ويتم رسم الرمز نفسه بشفافية (على قناة ألفا). في نفس الوقت ، يمكن لـ Electron التقاط مثل هذه الصور إذا كان هناك "قالب" في اسمهم. لذا ، يجب إضافة ملفين آخرين برموز إلى ملفين آخرين برموز القالب ، نحصل على هذه المجموعة لكل رمز:

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

لن يتمكن Inkscape من أداء المعجزات باستخدام قناة ألفا من وحدة التحكم ، ولكن من السهل التحويل من ImageMagick.

نقوم به في ثلاث خطوات:

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 - إنشاء صورة نقطية من ناقل
2 - إنشاء صورة شفافة للخطوة الثالثة
3 - إنشاء ملف بنقل التدرجات الرمادية إلى قناة ألفا

بالفعل باستخدام أيقونات قائمة القالب في الوضع الداكن ، بدأ يبدو مثل هذا

موافق ، وقد تحقق الهدف. يقطر البرنامج النصي جميع الصور بالتنسيقات المطلوبة


#!/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

نحن ننتظر لبضع ساعات حتى تخرج أكثر من 20000 صورة من خط التجميع ...

ملاحظة: هذه ليست المغامرات الوحيدة عند العمل مع Electron ، سأكتب عن المزيد من المغامرات عند اكتمالها ...

إنتاج أيقونات المواد لـ MacOSX Home Assistant على Electron

More articles: