Get best of the week

Production d'icônes de matériaux pour MacOSX Home Assistant sur Electron

Dans la première série, j'ai brassé une maison intelligente sur le Home Assistant. Dans le processus, je suis tombée amoureuse de l'Assistant Maison et j'ai pensé à écrire une application de bureau pour ce système. Home Assitant a une merveilleuse interface Web et il semblait raisonnable de l'envelopper dans Electron pour obtenir une belle icône de dock, des notifications natives, une barre de menus pour un accès rapide et d'autres zeroconf. Home Assistant pour tout ce qui peut être utilisé Material Icons: pour les tableaux de bord, pour les états, pour les boutons, pour tout. Cela signifie que vous devez extraire l'ensemble des icônes de matériaux dans l'application Electron.

Electron utilise l'API nativeImage pour travailler avec des images qui, en 2020, n'acceptent pas les formats vectoriels et daigne ne consommer que du PNG et du JPG. JPG ne nous convient pas car les artefacts de compression des icônes sont mortels. Vous avez donc besoin d'un endroit pour transférer le format en PNG. En montant sur le site principal des icônes de matériaux pendant environ 15 minutes, je cherchais un ensemble prêt à l'emploi d'icônes de matériaux pour MacOSX découpé en png de différentes tailles et sous différents dpi ... Il est difficile de dire pourquoi, mais ils ne publient rien de tel là-bas. Devra produire indépendamment.

Home Assistant propose de déclarer dans les configs des icônes au format "mdi: home-cirlce" - le nom de l'icône ( d'ici) avec le remplacement du premier caractère «-» par «:». Remplacez "-" => ":" nous convertissons par programmation pour être plus proche de l'original et n'avons pas utilisé les caractères ":" dans les noms de fichiers. Le premier endroit où je voulais visser les icônes était le menu du tableau de bord Home Assistant . Pour la barre de menu, macosx utilise des images 16x16 pixels et @ 2 pour la rétine (peut-être un peu plus, @ 2 était suffisant sur mon coquelicot). J'ai donc besoin d'obtenir deux fichiers pour chaque icône de l'ensemble de matériaux:

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

Ajout d'une taille au nom pour que l'ajout de nouvelles tailles d'images n'interfère pas avec la marche à l'avenir.

Les polices finales sont généralement collectées à partir d'images SVG, ce qui a donné lieu à deux tâches: 1 - trouver des icônes de matériau svg, 2 - automatiser leur découpage pour> 5000 fichiers.

Le site natif était toujours utile, là j'ai trouvé la commande «npm installmdi/ Police de caractère. " Au hasard en remplaçant svg au lieu de font avec la commande «npm installmdi/ svg ”, nous avons obtenu l'ensemble complet des icônes matérielles se trouvant soigneusement dans le même répertoire node_modules / @ mdi / svg / svg / avec des noms comme mdi-icon-name.svg. Le familier ImageMagick montrait une qualité extrêmement faible des images résultantes, l'utilitaire svg2png fonctionnait encore pire. Mais le bon stackoverflow a suggéré que inkscape ferait face à cette tâche avec une telle commande

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

Le résultat s'est avéré satisfaisant.



Mais un examen plus approfondi a montré qu'en mode sombre, ces icônes semblaient ternes:



le site Web d'Apple a déclaré avoir inventé un format de modèle spécial afin que les images puissent être inversées sans trop de difficulté, si le destin les amène en mode sombre. Le rôle de ces fichiers est une image PNG dans laquelle tous les pixels sont noirs et l'icône elle-même est dessinée en transparence (sur le canal alpha). Dans le même temps, Electron peut prendre de telles photos s'il y a un «modèle» dans leur nom. Donc, deux fichiers supplémentaires avec des icônes doivent être ajoutés deux autres avec des icônes de modèle, nous obtenons cet ensemble pour chaque icône:

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

Inkscape ne pourra pas effectuer de miracles avec le canal alpha à partir de la console, mais il est facile de convertir à partir d'ImageMagick.

Nous procédons en trois étapes:

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 - Création d'une image bitmap à partir d'un vecteur
2 - Création d'une image transparente pour l'étape trois
3 - Création d'un fichier avec le transfert des dégradés de gris vers le canal alpha

Déjà avec les icônes du menu Modèle en mode sombre, cela commençait à ressembler à



Ok, l'objectif est atteint. Le script distille toutes les images dans les formats souhaités


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

Nous attendons quelques heures jusqu'à ce que> 20 000 photos sortent de la chaîne de montage ...

PS Ce ne sont pas les seules aventures en travaillant avec Electron, j'écrirai sur d'autres aventures au fur et à mesure qu'elles seront terminées ...

More articles:


All Articles