🏿 👨🏾‍⚖️ 💤 Production of Material Icons for MacOSX Home Assistant on Electron 🕥 ⛲️ 🙇🏼

In the first series, I brewed a smart home on the Home Assistant. In the process, I fell in love with the Home Assistant and thought about writing a desktop application for this system. Home Assitant has a wonderful web-based interface and it seemed reasonable to wrap it in Electron to get a beautiful dock icon, native notifications, a menu bar for quick access and other zeroconf. Home Assistant for everything that can be used Material Icons: for dashboards, for states, for buttons, for everything. This means that you need to pull the entire set of material icons into the Electron application.

Electron uses the nativeImage API to work with pictures , which in 2020 does not accept vector formats and deigns to consume only PNG and JPG. JPG is not suitable for us since the compression artifacts for the icons are deadly. So you need somewhere to get the format being transferred to PNG. Climbing to the home site of material icons for about 15 minutes I was looking for a ready-made package of material icons for MacOSX cut into png in different sizes and under different dpi ... It's hard to say why, but they don’t publish anything like that there. Will have to produce independently.

Home Assistant offers to declare in configs icons in the format “mdi: home-cirlce” - the name of the icon ( from here) with the replacement of the first character '-' by ':'. Replace “-“ => ”:” we programmatically convert to be closer to the original and did not use the characters “:” in the file names. The first place I wanted to screw on the icons was the Home Assistant dashboard menu . For menubar, macosx uses 16x16 pixel images and @ 2 for retina (maybe some more, @ 2 was enough on my poppy). So I need to get two files for each icon from the material set:

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

Added a size to the name so that adding new sizes of pictures would not interfere with walking in the future.

The final fonts are usually collected from SVG images, this gave rise to two tasks: 1 - find svg material icons, 2 - automate their slicing for> 5000 files.

The native site was still useful, there I found the command “npm installmdi/ font. " At random substituting svg instead of font with the command “npm installmdi/ svg ”we got the whole set of material icons neatly lying in the same directory node_modules / @ mdi / svg / svg / with names like mdi-icon-name.svg. The familiar ImageMagick showed extremely low quality of the resulting images, the svg2png utility worked even worse. But the good stackoverflow suggested that inkscape would cope with this task with such a command

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

The result turned out to be satisfactory.

But a closer examination showed that in Dark Mode such icons look dull:

Apple’s website said that they invented a special Template format so that the pictures could be inverted without much difficulty, if fate brings them to Dark Mode. The role of such files is a PNG image in which all the pixels are black, and the icon itself is drawn with transparency (on the alpha channel). At the same time, Electron can pick up such pictures if there is a “Template” in their name. So, two more files with icons need to be added two more with Template icons, we get this set for each icon:

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

Inkscape won’t be able to perform miracles with the alpha channel from the console, but it’s easy to convert from ImageMagick.

We do in three steps:

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 - Creating a bitmap image from a vector
2 - Creating a transparent image for step three
3 - Creating a file with the transfer of gray gradations to the alpha channel

Already with the Template menu icons in Dark Mode it began to look like this

Ok, the goal is achieved. The script distills all the images in the desired formats


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

We are waiting for a couple of hours until> 20,000 pictures come off the assembly line ...

PS These are not the only adventures when working with Electron, I will write about further adventures as they are completed ...

Production of Material Icons for MacOSX Home Assistant on Electron

More articles: