Get best of the week

Produktion von Material Icons für MacOSX Home Assistant auf Electron

In der ersten Serie habe ich mit dem Home Assistant ein Smart Home gebraut. Dabei habe ich mich in den Home Assistant verliebt und darüber nachgedacht, eine Desktop-Anwendung für dieses System zu schreiben. Home Assitant hat eine wunderbare webbasierte Oberfläche und es schien vernünftig, sie in Electron zu verpacken, um ein schönes Dock-Symbol, native Benachrichtigungen, eine Menüleiste für den schnellen Zugriff und andere Null-Konferenzen zu erhalten. Home Assistant für alles, was verwendet werden kann Materialsymbole: für Dashboards, für Status, für Schaltflächen, für alles. Dies bedeutet, dass Sie den gesamten Satz von Materialsymbolen in die Electron-Anwendung ziehen müssen.

Electron verwendet die nativeImage- API, um mit Bildern zu arbeiten , die im Jahr 2020 keine Vektorformate akzeptiert und nur PNG und JPG verwendet. JPG ist für uns nicht geeignet, da die Komprimierungsartefakte für die Symbole tödlich sind. Sie benötigen also einen Ort, an dem das Format in PNG übertragen werden kann. Klettern auf die Home - Site von Material Symbolen für etwa 15 Minuten war ich für ein fertiges Paket von Material Icons für MacOSX Schnitt suche in in verschiedenen Größen png und unter verschiedenen dpi ... Es ist schwer , warum zu sagen, aber sie nicht veröffentlicht so etwas gibt. Muss unabhängig produzieren.

Home Assistant bietet an, in Konfigurationssymbolen Symbole im Format „mdi: home-cirlce“ zu deklarieren - den Namen des Symbols ( von hier aus)) mit der Ersetzung des ersten Zeichens '-' durch ':'. Ersetzen Sie "-" => ":" Wir konvertieren programmgesteuert, um näher am Original zu sein, und haben die Zeichen ":" in den Dateinamen nicht verwendet. Der erste Ort, an dem ich die Symbole anschrauben wollte, war das Home Assistant-Dashboard-Menü . Für die Menüleiste verwendet macosx Bilder mit 16 x 16 Pixeln und @ 2 für die Netzhaut (vielleicht mehr, @ 2 war genug auf meiner Mohnblume). Ich muss also zwei Dateien für jedes Symbol aus dem Materialsatz abrufen:

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

Dem Namen wurde eine Größe hinzugefügt, damit das Hinzufügen neuer Bildgrößen das Gehen in Zukunft nicht beeinträchtigt.

Die endgültigen Schriftarten werden normalerweise aus SVG-Bildern gesammelt. Dies führte zu zwei Aufgaben: 1 - Finden von SVG-Materialsymbolen, 2 - Automatisieren des Schneidens für> 5000 Dateien.

Die native Site war immer noch nützlich, dort fand ich den Befehl „npm installmdi/ font. " Durch zufälliges Ersetzen von svg anstelle von font durch den Befehl „npm installmdi/ svg ”Wir haben den gesamten Satz von Materialsymbolen ordentlich im selben Verzeichnis node_modules / @ mdi / svg / svg / mit Namen wie mdi-icon-name.svg. Der bekannte ImageMagick zeigte eine extrem niedrige Qualität der resultierenden Bilder, das Dienstprogramm svg2png funktionierte noch schlechter. Der gute Stackoverflow deutete jedoch darauf hin, dass inkscape diese Aufgabe mit einem solchen Befehl bewältigen würde

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

Das Ergebnis erwies sich als zufriedenstellend.



Eine genauere Untersuchung ergab jedoch, dass solche Symbole im Dunklen Modus langweilig aussehen: Auf der



Apple-Website wurde ein spezielles Vorlagenformat erfunden , mit dem die Bilder ohne große Schwierigkeiten invertiert werden können, wenn das Schicksal sie in den Dunklen Modus versetzt. Die Rolle solcher Dateien ist ein PNG-Bild, in dem alle Pixel schwarz sind und das Symbol selbst transparent gezeichnet ist (auf dem Alphakanal). Gleichzeitig kann Electron solche Bilder aufnehmen, wenn der Name eine „Vorlage“ enthält. Also müssen zwei weitere Dateien mit Symbolen hinzugefügt werden, zwei weitere mit Vorlagensymbolen. Wir erhalten diesen Satz für jedes Symbol:

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

Inkscape kann mit dem Alpha-Kanal von der Konsole aus keine Wunder vollbringen, aber es ist einfach, von ImageMagick aus zu konvertieren.

Wir machen in drei Schritten:

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 - Erstellen eines Bitmap-Bildes aus einem Vektor
2 - Erstellen eines transparenten Bildes für Schritt 3
3 - Erstellen einer Datei mit der Übertragung von Graustufen auf den Alphakanal

Bereits mit den Symbolen des Vorlagenmenüs im Dunkelmodus sah es so aus.



Ok, das Ziel ist erreicht. Das Skript destilliert alle Bilder in den gewünschten Formaten


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

Wir warten ein paar Stunden, bis> 20.000 Bilder vom Band

laufen ... PS Dies sind nicht die einzigen Abenteuer bei der Arbeit mit Electron, ich werde über weitere Abenteuer schreiben, sobald sie abgeschlossen sind ...

More articles:


All Articles