Mapa drogowa projektanta GUI Lopaka

Cześć, To mój ostatni newsletter e-mailowy — przynajmniej na rok 2025.

Niektórzy z was mogli przegapić trwającą wyprzedaż 50% na każdy plan subskrypcji Lopaka (w tym plany roczne). Jest ograniczona do pierwszych 50 realizacji. Użyj tego kodu: 2025BLACK

Wasze hojne wsparcie pozwala mi nadal budować i dzielić się Lopaka ze społecznością. Pomaga mi dostarczać więcej funkcji i aktualizacji.

*Dotyczy okresu do 12 miesięcy. Kod jest ważny do 30 listopada 23:59 UTC

Wierzę, że przejrzystość jest kluczowa przy budowaniu dobrego produktu. Po raz pierwszy dzielę się tą mapą drogową z kimkolwiek. Zawsze trudno mi zobowiązywać się do dużych celów. Traktuj to jako wstępny szkic lub wizję przyszłości Lopaka. Na razie bez terminów.

Wyobrażam sobie świat, w którym każde urządzenie, bez względu na to, jak małe, ma czysty, intuicyjny interfejs — a Lopaka jest sposobem, w jaki się go buduje.

MAPA DROGOWA (wyobrażona)

1. Rozszerzenie wsparcia dla biblioteki LVGL, aby przyciągnąć programistów wbudowanego UI.
   • Podstawy: przycisk, etykieta, obraz – Dodanie podstawowych widżetów do edytora, aby użytkownicy mogli łatwo projektować podstawowe interfejsy z komponentami LVGL.
   • Zagnieżdżanie i wyrównywanie – Wsparcie układów rodzic–dziecko oraz narzędzi wyrównywania, aby odwzorować zachowanie układów w prawdziwym świecie.
   • Łuk, panel, lista – Dodanie bardziej złożonych widżetów, aby poszerzyć elastyczność projektowania i dopasować się do przypadków użycia w prawdziwym świecie.
2. Ustrukturyzowane ponowne użycie elementów projektu między ekranami/projektami.
   • Komponenty i instancje – Definiowanie komponentów wielokrotnego użytku (takich jak przyciski) i tworzenie ich instancji na różnych ekranach z powiązaniem.
   • Stany komponentów – Logika wariantów (np. najechanie, wciśnięcie, nieaktywny) dla interaktywności i prototypowania.
   • Biblioteka komponentów – Współdzielone, globalne komponenty do użycia w różnych projektach.
3. Dopracowanie przepływu pracy i narzędzia precyzyjne, dzięki którym edytor wydaje się „solidny”.
   • Edycja kodu – Edycja w linii automatycznie generowanego kodu, aby go dopracować lub wstrzyknąć logikę.
   • Przebudowa układu – Przebudowa UI/UX, aby zmniejszyć tarcie i uczynić narzędzia układu bardziej intuicyjnymi.
   • Swobodny obszar rysowania z ramkami – Odeście od stałych ekranów; pozwolenie użytkownikom pracować na swobodnym obszarze rysowania i rysować granice ekranów.
   • Siatka i linie pomocnicze – Pomoc w precyzyjnym wyrównywaniu i strukturyzowaniu elementów UI.
   • Przyciąganie do... – Włączenie przyciągania do siatki, linii pomocniczych lub obiektów dla układów idealnych co do piksela.
   • Prawdziwe kopiowanie i wklejanie – Zachowanie pełnych danych elementu podczas kopiowania między projektami.
   • Edycja tekstu w miejscu – Kliknięcie i edycja tekstu bezpośrednio na obszarze rysowania (nie na pasku bocznym).
4. Większe możliwości rysowania dla szkiców UI i makiet.
   • Więcej narzędzi: trójkąt, łuk – Dodanie większej liczby kształtów, aby rysować bogatsze interfejsy.
   • Rozmiar i kształt narzędzia Paint/gumki – Dostosowywanie narzędzi pędzla dla pixel artu lub dekoracji.
   • Krzywe Béziera – Rysowanie własnych krzywych
5. Lepsza kontrola i elastyczność typografii dla wyświetlaczy.
   • Więcej domyślnych czcionek – Rozszerzenie wbudowanych opcji czcionek o dobrą czytelność na małych wyświetlaczach.
   • Format U8G2 format – Wsparcie unikalnej struktury i formatowania czcionek U8g2.
   • Konwersja każdej czcionki do każdego formatu – Uniwersalny konwerter dla TTF/OTF → Adafruit/U8g2/LVGL itd.
   • Własne zestawy glifów – Pozwolenie użytkownikom definiować zawartość pliku czcionki, aby oszczędzać pamięć
6. Schematy przepływu i prototypowanie, aby symulować prawdziwe przepływy użytkownika
   • Podstawowy diagram przepływu użytkownika – Rysowanie przepływów między ekranami, aby wizualizować logikę nawigacji.
   • Obszary klikalne – Definiowanie dotykowych hotspotów, aby symulować interakcje.
   • Zewnętrzne elementy sterujące – Symulowanie naciśnięć przycisków lub zdarzeń z urządzeń fizycznych.
7. Organizowanie zasobów projektu do ponownego użycia i współpracy.
   • Biblioteka obrazów – Centralna biblioteka do przechowywania zaimportowanych lub utworzonych obrazów.
   • Kolekcje czcionek – Zapisywanie i ponowne używanie presetów czcionek w różnych projektach.
   • Współdzielone komponenty – Synchronizacja komponentów między wieloma użytkownikami/projektami.
8. Edytor animacji i narzędzia ruchu
   • Edytor klatek kluczowych – Edycja oparta na osi czasu dla płynnej kontroli animacji.
   • Edytor przejść – Definiowanie interakcji między ekranami lub stanami z efektami ruchu.
   • Biblioteka animacji – Zarządzanie presetami animacji lub zaimportowanymi sekwencjami i ponowne ich używanie.
9. Kontrola wersji
   • Śledzenie historii projektu, przywracanie zmian i porównywanie stanów ekranów.
10. Wbudowane narzędzia wspierające pracę zespołową i komunikację.
    • Udostępnianie zespołowe i prywatność – Zapraszanie współpracowników i zarządzanie prawami dostępu.
    • Komentarze i dyskusje – Pozostawianie notatek lub opinii powiązanych z konkretnymi elementami.
    • Edycja na żywo – Edycja wieloosobowa w czasie rzeczywistym, jak w Figmie.

Uff... To OGROMNE. Ok... wracajmy do pracy.

Jeśli chcesz dołączyć do tej podróży i masz wiedzę, którą możesz się podzielić, porozmawiajmy. Jestem bardzo otwarty na nowe rozmowy.

Jeśli wolisz wesprzeć mnie w inny sposób, rozważ subskrypcję (nie przegap okazji z kodem 2025BLACK).

P.S.: Będę nadal publikować aktualizacje na naszym hubie Discord oraz jako lopaka_app na X i Instagramie.