Get best of the week

Produção de ícones de materiais para o MacOSX Home Assistant em Electron

Na primeira série, preparei uma casa inteligente no Home Assistant. No processo, me apaixonei pelo Home Assistant e pensei em escrever um aplicativo de desktop para esse sistema. O Home Assitant possui uma maravilhosa interface baseada na Web e parecia razoável envolvê-la no Electron para obter um belo ícone de dock, notificações nativas, uma barra de menus para acesso rápido e outros zeroconf. Home Assistant para tudo o que pode ser usado Ícones de materiais: para painéis, estados, botões, tudo. Isso significa que você precisa puxar todo o conjunto de ícones de materiais para o aplicativo Electron.

A Electron usa a API nativeImage para trabalhar com imagens , que em 2020 não aceita formatos vetoriais e se digna de consumir apenas PNG e JPG. O JPG não é adequado para nós, pois os artefatos de compactação dos ícones são mortais. Então, você precisa de um local para obter o formato transferido para PNG. Subindo ao site inicial de ícones de materiais por cerca de 15 minutos, eu estava procurando por um pacote pronto de ícones de materiais para MacOSX cortado em png em tamanhos diferentes e em diferentes dpi ... É difícil dizer o porquê, mas eles não publicam nada parecido lá. Terá que produzir de forma independente.

O Home Assistant oferece a declaração de ícones de configuração no formato "mdi: home-cirlce" - o nome do ícone ( daí) com a substituição do primeiro caractere '-' por ':'. Substitua “-“ => ”:” convertemos programaticamente para estarmos mais próximos do original e não usamos os caracteres “:” nos nomes dos arquivos. O primeiro lugar que eu queria parafusar nos ícones foi o menu do painel do Assistente Doméstico . Para a barra de menu, o macosx usa imagens com tamanho de 16x16 pixels e @ 2 para retina (talvez um pouco mais, na minha papoula isso foi suficiente @ 2). Então, preciso obter dois arquivos para cada ícone do conjunto de materiais:

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

Foi adicionado um tamanho ao nome para que a adição de novos tamanhos de fotos não interferisse na caminhada no futuro.

As fontes finais geralmente são coletadas a partir de imagens SVG, o que deu origem a duas tarefas: 1 - encontre ícones de material svg, 2 - automatize sua fatia para> 5000 arquivos.

O site nativo ainda era útil, encontrei o comando “npm installmdi/ Fonte. " Substituindo aleatoriamente svg em vez de fonte pelo comando “npm installmdi/ svg ”, temos todo o conjunto de ícones de materiais ordenadamente no mesmo diretório node_modules / @ mdi / svg / svg / com nomes como mdi-icon-name.svg. O familiar ImageMagick mostrou uma qualidade extremamente baixa das imagens resultantes, o utilitário svg2png funcionou ainda pior. Mas o bom fluxo de pilha sugeriu que o inkscape lidaria com essa tarefa com esse comando

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

O resultado acabou sendo satisfatório,



mas um exame mais detalhado mostrou que, no modo escuro, esses ícones parecem opacos:



o site da Apple disse que inventou um formato de modelo especial para que as imagens possam ser invertidas sem muita dificuldade, se o destino as levar ao modo escuro. A função desses arquivos é uma imagem PNG na qual todos os pixels são pretos e o próprio ícone é desenhado com transparência (no canal alfa). Ao mesmo tempo, a Electron pode capturar essas imagens se houver um "Modelo" em seu nome. Portanto, mais dois arquivos com ícones precisam ser adicionados mais dois com ícones de modelo, temos esse conjunto para cada ícone:

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

O Inkscape não poderá realizar milagres com o canal alfa do console, mas é fácil converter o ImageMagick.

Fazemos em três etapas:

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 - Criando uma imagem de bitmap a partir de um vetor
2 - Criando uma imagem transparente para a etapa três
3 - Criando um arquivo com a transferência de gradações de cinza para o canal alfa

Já com os ícones do menu Modelo no Modo Escuro, ele começou a se parecer com este



Ok, o objetivo é alcançado. O script destila todas as imagens nos formatos desejados


#!/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 aguardando algumas horas até que mais de 20.000 fotos saiam da linha de montagem ...

PS: Essas não são as únicas aventuras ao trabalhar com a Electron; escreverei sobre outras aventuras à medida que forem concluídas ...

More articles:


All Articles