Stream Deck Icon Builder

Stream Deck od Elgato to świetne narzędzie wspierające produktywność. Pozwala jednym przyciskiem wywoływać złożone akcje, automatyzować powtarzalne zadania i usprawniać codzienną pracę – nie tylko w streamingu, ale też w programowaniu, montażu czy też pracy biurowej. Kluczowym elementem urządzeń z rodziny Stream Deck jest to, że każdy przycisk może wyświetlać dowolną ikonę – pod przyciskami znajduje się kolorowy wyświetlacz. To pozwala na zbudowanie interfejsu według własnego upodobania – mogą to być kolorowe obrazki, symbole na jednolitym tle, czy też po prostu sam tekst.

Możliwość dostarczenia własnych ikon dla przycisków rodzi potencjał do zaprojektowania ciekawego, estetycznego interfejsu. Zawsze z zazdrością patrzyłem na zrzuty ekranu w Internecie, gdzie użytkownicy prezentowali swoje konfiguracje: estetyczne zestawy jednolitych ikon, spójna konwencja, starannie dobrane symbole. Przygotowanie takiego interfejsu przeze mnie wymagałoby pewnie dużo pracy – a wkładanie dużej ilości pracy w zaprojektowanie ikon dla urządzenia, które ilość tej pracy ma redukować wydało mi się trochę kontrproduktywne.

W Internecie znajdziemy dużo aplikacji pozwalających na projektowanie ikon dla Stream Decka. Większość z nich cierpi jednak na podobne problemy, które zniechęcają do ich używania. Zaprojektowaną kolekcję ikon w części z nich można zapisać, ale są to aplikacje internetowe, więc raczej nie wchodzi w grę zapisanie na dysku. Jeżeli więc chciałbym za kilka tygodni albo miesięcy wygenerować sobie dodatkowy przycisk – zwykle kończy się to tak, że muszę zacząć wszystko od nowa.

Pewnym problemem jest również znalezienie odpowiedniej ikony, która będzie wyświetlana na przycisku. W Internecie znajdziemy ogromne repozytoria ikon, ale użycie takiej ikony często wiąże się z koniecznością pobrania odpowiedniego pliku, wstawienia ikony, ustalenia rozmiarów i wypozycjonowania jej… tylko po to, żeby powtórzyć cały proces od początku, gdy okaże się, że ikona nam nie odpowiada i potrzebujemy innej. Kłopotliwe jest również pobranie ikon aplikacji. Stream Deck często służy do uruchamiania albo sterowania aplikacjami, więc wygodnie jest umieścić ich ikonę na przycisku. Taką ikonę można często znaleźć w Internecie, albo też wydobyć z aplikacji – ale to kosztuje zawsze czas, który trzeba przemnożyć przez każdą ikonę, którą chcemy zbudować.

Kłopotliwy jest też często brak mechanizmu szablonów. To znaczy edytory oferują pewne szablony, ale tylko w formie pewnej podstawy do zbudowania ikony. Gdybyśmy więc na przykład chcieli hurtem zmienić styl już zaprojektowanych ikon, zwykle oznacza to konieczność zaprojektowania wszystkich ikon od zera. Pewnym ułatwieniem może być skorzystanie z edytora grafiki wektorowej, który może pomóc taki efekt osiągnąć, ale edytory takie nie są dedykowane do ikon, więc projektowanie w nich ikon kosztuje często czas.

Postanowiłem więc napisać aplikację, która pomoże projektować ikony dla Stream Decka i jednocześnie rozwiąże wszystkie opisane powyżej problemy. Aplikacją tą jest Stream Deck Icon Builder.

Zacznijmy od tego, że w aplikacji można projektować przyciski oraz szablony. W przeciwieństwie jednak do aplikacji internetowych, szablony są aktywne. Zaprojektujmy prosty szablon.

Teraz, na podstawie szablonu możemy stworzyć nowy przycisk. Podczas dodawania przycisku należy wskazać szablon, który chcemy użyć – to ważne. Aplikacja przełączy wtedy przycisk w tryb szablonu – wszystkie jego parametry będą pobierane właśnie z szablonu (są one oznaczone szarym polem „Z szablonu”).

Możemy teraz zmodyfikować pojedyncze pole – zmieńmy na przykład ikonę na inną. Wystarczy kliknąć przycisk z ołówkiem, aby nadpisać wartość z szablonu dowolną inną.

Zwróćmy uwagę, że wszystkie parametry szablonu pozostały niezmienione, włączając w to nawet efekty nałożone na obrazek: wypełnienie kolorem i cień.
Powiedzmy teraz, że chcemy zmienić szablon oraz wszystkie przyciski, które z niego korzystają. W tym celu wprowadzamy po prostu zmiany do szablonu.

Wracamy do naszego przycisku – i odkrywamy, że zmieniło się wszystko: obrazek w tle, wypełnienie, kolor tła, a nawet rozmiar ikony. Pozostało tylko to, co zmieniliśmy: symbol biegnącego człowieka.

Jeżeli przyjdzie nam na to ochota, możemy też zmienić szablon na inny – i wtedy przycisk będzie czerpał wszystkie informacje z innego źródła, co pozwala szybko i znacząco zmienić jego wygląd.

Drugim problemem, który rozwiązuje moja aplikacja jest wybór ikony. Kiedy pobierzesz i uruchomisz aplikację, od razu masz dostęp do następujących zbiorów ikon:

• Elgato
• Feather
• Heroicons (warianty Outline i Solid)
• Lucide
• Material icons
• Remix

Aby wybieranie ikon nie było problematyczne, służy do tego wygodna wyszukiwarka, w której musimy tylko wpisać fragment nazwy poszukiwanej ikony.

Wymienione powyżej zbiory łączy to, że zostały opublikowane na permisywnych licencjach (zwykle MIT). Jeżeli jednak potrzebujesz ikon z innych zbiorów, zajrzyj do katalogu Scripts, który znajdziesz w katalogu aplikcji. Są tam skrypty, które automatycznie pobiorą, rozpakują oraz umieszczą we właściwym miejscu dodatkowe zbiory ikon. Po pobraniu ikon wystarczy ponownie uruchomić aplikację, aby ikony były dostępne w wyszukiwarce. Na poniższym obrazku możecie zobaczyć zbiór ikon Streamline Icons, pakiet o nazwie Pixel.

Uwaga: Do pobrania niektórych pakietów konieczne jest zainstalowanie programu git.

A jeżeli wśród symboli nie znajdziemy takich, które nas interesują, albo mamy już własne symbole, z których chcielibyśmy skorzystać? Żaden problem, obrazkiem może być też dowolny rysunek rastrowy (*.jpg, *.bmp, *.png itp.) lub wektorowy (*.svg).

I tu dochodzimy do kolejnej funkcjonalności edytora ikon: pozyskiwania ikon z aplikacji. Powiedzmy, że chcemy przygotować przycisk, który uruchomi Visual Studio. Po wybraniu bitmapy jako źródła ikony, możemy wybrać opcję „Pobierz”. Wystarczy wtedy wskazać dowolną aplikację (*.exe) albo bibliotekę DLL (*.dll), aby edytor automatycznie wypakował z niej wszystkie ikony. Potem pozostaje już tylko jedną wybrać – najlepiej tę o największej rozdzielczości.

Po przygotowaniu wszystkich ikon wystarczy kliknąć przycisk „Generuj” i wskazać katalog docelowy, aby Stream Deck Icon Builder wygenerował wszystkie ikony do wskazanego katalogu. Na koniec cały projekt możemy zapisać: i tu bardzo ważna informacja: w pliku projektu znajdą się wszystkie informacje, które są potrzebne do ponownego wygenerowania ikon w dowolnym czasie. Na przykład pobrana z Visual Studio ikona zostanie umieszczona wewnątrz takiego pliku, więc możemy go na przykład wysłać znajomemu – i będzie on mógł bez problemu wygenerować sobie taki sam zestaw jak Twój, albo wprowadzić do niego dowolne zmiany.

Aplikację możesz pobrać z działu Download mojej strony. Wersja darmowa nie pozwala na otwieranie, zapisywanie i generowanie ikon – ale możesz sprawdzić, czy zaproponowany przeze mnie sposób ich edycji przypadł Ci do gustu. Jeżeli tak, możesz kupić klucz licencyjny do aplikacji w sklepie – kosztuje ona 10 USD.