Get best of the week

Producción de iconos de material para MacOSX Home Assistant en Electron

En la primera serie, preparé una casa inteligente en Home Assistant. En el proceso, me enamoré de Home Assistant y pensé en escribir una aplicación de escritorio para este sistema. Home Assitant tiene una maravillosa interfaz basada en la web y parecía razonable incluirlo en Electron para obtener un hermoso ícono de dock, notificaciones nativas, una barra de menú para acceso rápido y otro zeroconf. Asistente de inicio para todo lo que se puede usar Iconos de material: para paneles, para estados, para botones, para todo. Esto significa que debe extraer todo el conjunto de iconos de materiales en la aplicación Electron.

Electron usa la API nativeImage para trabajar con imágenes , que en 2020 no acepta formatos vectoriales y se digna que consuma solo PNG y JPG. JPG no es adecuado para nosotros ya que los artefactos de compresión para los íconos son mortales. Por lo tanto, necesita un lugar para transferir el formato a PNG. Subí al sitio de inicio de íconos de material durante unos 15 minutos. Estaba buscando un paquete de íconos de material listo para usar para MacOSX cortado en png en diferentes tamaños y con diferentes ppp ... Es difícil decir por qué, pero no publican nada de eso allí. Tendrá que producir de forma independiente.

Home Assistant ofrece declarar en los iconos de configuración en el formato "mdi: home-cirlce" - el nombre del icono ( desde aquí) con la sustitución del primer carácter '-' por ':'. Reemplace "-" => ":" convertimos programáticamente para estar más cerca del original y no usamos los caracteres ":" en los nombres de archivo. El primer lugar en el que quería atornillar los íconos fue el menú del panel de control de Home Assistant . Para la barra de menú, macosx usa imágenes de 16x16 píxeles y @ 2 para la retina (tal vez un poco más, @ 2 fue suficiente en mi amapola). Entonces necesito obtener dos archivos para cada ícono del conjunto de materiales:

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

Se agregó un tamaño al nombre para que agregar nuevos tamaños de imágenes no interfiera con la caminata en el futuro.

Las fuentes finales generalmente se recopilan de imágenes SVG, esto dio lugar a dos tareas: 1: buscar iconos de material de svg, 2: automatizar su división para> 5000 archivos.

El sitio nativo todavía era útil, allí encontré el comando "npm installmdi/ font ". Al azar sustituyendo svg en lugar de fuente con el comando "npm installmdi/ svg "tenemos todo el conjunto de iconos de material perfectamente ubicados en el mismo directorio node_modules / @ mdi / svg / svg / con nombres como mdi-icon-name.svg. El familiar ImageMagick mostró una calidad extremadamente baja de las imágenes resultantes, la utilidad svg2png funcionó aún peor. Pero el buen stackoverflow sugirió que inkscape haría frente a esta tarea con dicho comando

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

El resultado resultó ser satisfactorio,



pero un examen más detallado mostró que en el Modo oscuro estos íconos parecen aburridos:



el sitio web de Apple dijo que inventaron un formato de Plantilla especial para que las imágenes pudieran invertirse sin mucha dificultad, si el destino los lleva al Modo oscuro. El papel de dichos archivos es una imagen PNG en la que todos los píxeles son negros, y el icono en sí se dibuja con transparencia (en el canal alfa). Al mismo tiempo, Electron puede recoger esas imágenes si hay una "Plantilla" en su nombre. Entonces, se deben agregar dos archivos más con íconos, dos más con íconos de Plantilla, obtenemos este conjunto para cada ícono:

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

Inkscape no podrá realizar milagros con el canal alfa desde la consola, pero es fácil de convertir desde ImageMagick.

Lo hacemos en tres pasos:

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 - Crear una imagen de mapa de bits a partir de un vector
2 - Crear una imagen transparente para el paso tres
3 - Crear un archivo con la transferencia de gradaciones grises al canal alfa

Ya con los iconos del menú Plantilla en Modo Oscuro, comenzó a verse así



Ok, el objetivo se logró. El guión destila todas las imágenes en los formatos deseados.


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

Estamos esperando un par de horas hasta que> 20,000 imágenes salgan de la línea de ensamblaje ...

PD Estas no son las únicas aventuras cuando trabajamos con Electron, escribiré sobre nuevas aventuras a medida que se completen ...

More articles:


All Articles