Get best of the week

在Electron上为MacOSX Home Assistant制作材质图标

在第一个系列中，我在Home Assistant上酿造了一个智能家居。在此过程中，我爱上了家庭助理，并考虑为该系统编写桌面应用程序。 Home Assitant具有一个基于Web的出色界面，将其包装在Electron中以获得一个漂亮的停靠图标，本机通知，一个用于快速访问的菜单栏和其他zeroconf似乎是合理的。家庭助理，可使用的所有内容材质图标：用于仪表板，状态，按钮，所有内容。这意味着您需要将整个材料图标集拉入Electron应用程序。

Electron使用nativeImage API处理图片，该图片在2020年将不接受矢量格式，并且仅使用PNG和JPG。 JPG不适合我们，因为图标的压缩伪像是致命的。因此，您需要在某个地方将格式传输到PNG。爬到材质图标的首页大约15分钟，我正在寻找现成的MacOSX材质图标包，将其切成不同大小和不同dpi的png ...很难说为什么，但它们在那里没有发布任何类似内容。将不得不独立生产。

Home Assistant提供了在配置图标中声明“ mdi：home-cirlce”格式的图标-图标的名称（从此处开始）），并用“：”替换第一个字符“-”。替换“-” =>“：”，我们以编程方式将其转换为更接近原始名称，并且在文件名中未使用字符“：”。我要拧紧图标的第一个地方是Home Assistant仪表板菜单。对于菜单栏，macosx使用16x16像素图像，而@ 2用于视网膜（也许更多，@ 2对我的罂粟来说就足够了）。因此，我需要从材料集中为每个图标获取两个文件：

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

在名称中添加了尺寸，以便添加新尺寸的图片不会影响以后的行走。

最终的字体通常是从SVG图像中收集的，这产生了两个任务：1-查找svg材质图标，2-自动对超过5000个文件的切片。

本机站点仍然有用，在那里我找到了命令“ npm installMDI/字体。使用命令“ npm install”随机替换svg而不是fontMDI/ svg”，我们将整组素材图标整齐地放置在同一目录下的node_modules / @ mdi / svg / svg /目录中，名称类似于mdi-icon-name.svg。熟悉的ImageMagick显示出所得图像的质量极低，而svg2png实用程序的效果更差。但是良好的stackoverflow建议inkscape使用这样的命令可以完成此任务

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

结果证明是令人满意的，



但是仔细检查后发现，在暗模式下，这些图标看起来很呆板：



苹果公司的网站表示，他们发明了一种特殊的模板格式，以便将照片转换成暗淡的图案，如果命运将它们带入了暗模式。此类文件的作用是PNG图像，其中所有像素均为黑色，并且图标本身以透明方式绘制（在alpha通道上）。同时，如果名称中有“模板”，Electron可以拾取这些图片。因此，需要再添加两个带有图标的文件，再添加两个带有模板图标的文件，我们将为每个图标设置此设置：

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

Inkscape无法通过控制台的Alpha通道执行奇迹，但是可以很容易地从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-创建将灰度渐变传输到alpha通道的文件

已经在“黑暗”模式下使用“模板”菜单图标开始看起来像这样



，可以实现目标。该脚本以所需格式提取所有图像


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

我们正在等待几个小时，直到有20,000张图片下线为止……

PS这些并不是与Electron合作时的唯一冒险，我将在完成冒险时写一些进一步的冒险...

More articles:


All Articles