Witam.
Po https://forum.android.com.pl/topic/402866-poradnik-zooper-widget-czae-asae-i-wstae-p-i-podstawy-dodawanie-nowych-szablona-w/ , przyszedł czas na część drugą, w której zajmiemy się tworzeniem własnych widgetów.
Na początek pokażę jak zrobić prosty widget z wykorzystaniem wbudowanych w zoopera funkcji.
W dalszej części poradnika sukcesywnie będziemy przechodzić do złożonych zagadnień.
DO MODERATORÓW.
Postanowiłem założyć nowy temat, aby z https://forum.android.com.pl/topic/402866-poradnik-zooper-widget-czae-asae-i-wstae-p-i-podstawy-dodawanie-nowych-szablona-w/ nie zrobić "tematu rzeki" i zbędnie nie zaciemniać istniejącego już tematu z podstawami Zoopera.
Jeśli natopmiast stwierdzicie,że ten zabieg jest zbędny to prosze o informację, wyedy przebuduję część I i jakoś wkleję zawartość tego wątku.
Opisu jest sporo, jednak wszystkie istotne rzeczy są pisane pogrubioną czcionką... opis pisany normalną czcionką, służy niejako wyjaśnieniu i rozwinięciu przedstawionych opcji.
DO RZECZY!!!!
Po zapoznaniu się z podstawami Zoopera opisanymi ogólnie w części pierwszej poradnika,
nadszedł czas na dalszą cześć zabawy.
Zaczniemy od zrobienia własnego widgetu od podstaw, na początek z wykorzystaniem wbudowanych w Zoopera funkcji i ikon.
Załóżmy, że chcemy stworzyć prosty widet pokazujący aktualną pogodę dla naszej lokalizacji, czas oraz datę, jak również dodamy kilka mniej lub bardziej przydatnych informacji dotyczących naszego urządzenia.
Więc zaczynamy!!
................:::::::::::::::::::::::::::::::........................
TWORZYMY PROSTY WIGDET!!!!
(poszczególne etapy podzieliłem i "pochowałem" w spoilerach aby ułatwić czytelność)
Na pustym obszarze pulpitu wstawiamy szablon Zoopera 4x3 ( 4x3, gdyż w dalszych częściach poradnika w przyszłości będziemy rozbudowywać szablon )
Klikamy we wstawiony szablon i wybieramy opcję PUSTY.
Pokaże się nam dostępna lista opcji Zoopera, nas jednak interesuje UKŁAD – pierwsza opcja.
Klikamy na liście UKŁAD
Zobaczymy na ekranie puste okienko szablonu, pod nim Moduły wigdetu ( w tej chwili powinna być pusta lista), a na górze po prawej opcje w postaci ikon + ADD oraz zaznacz wszystko .. My wybieramy + Add
Klikamy w ikonkę + ADD
Ukaże się nam lista modułów dostępnych dla budowy szablonu. Każdy moduł jest stosownie opisany w samym Zooperze, bardziej szczegółowo będziemy się nimi zajmować w dalszych częściach więc teraz nie będę opisywał każdego po kolei.
Na pierwszy ogień, chcemy aby nasz widget zawierał dobrze widoczny zegar .
Wybieramy więc moduł TEKST
z automatu na środku szablonu pojawi się nam malutki zegar cyfrowy, który teraz musimy „podrasować”. Załóżmy , że chcemy aby nasz zegar pokazywał się po lewej stronie widgetu powiedzmy w 1/3 jego wysokości.
Wybieramy na liście modułów OPCJĘ TEKST
Dla zachowania ładu i czytelności modułów zmieniamy NAZWĘ MODUŁU na ZEGAR
Przechodzimy do Punkt Odniesienia
Klikamy Lewy środek
Następnie przechodzimy do oś Y i klikamy „podwójną” strzałką w lewo podnosząc w ten sposób nasz zegar do żądanego poziomu.
Następnie przechodzimy do opcji czcionki ( niżej listy) i ustawiamy odpowiedni rozmiar. Ja wybrałem 70.
Możemy tutaj również zmienić kolor czcionki ( ja zostawiam biały) oraz krój czcionki.
Żeby nasz zegar nie wyglądał „płasko” ustawimy teraz jego cień, w tym celu…
W tym celu przechodzimy nizej do menu i w opcjach CIEŃ wybieramy ROZPŁYWANIE. Ja ustawiłem je na 10, oś X na 4 a oś Y na -3
Zegar wstępnie mamy gotowy.
Pod zegarem wstawmy nazwę aktualnego dnia tygodnia i datę.
Wracamy na listę modułów i wybieramy + ADD
Znów wstawiamy tekst
Zmieniamy nazwę modułu na NAZWA DNIA
Przechodzimy do Zawartości tekstu, wybieramy Data a następnie Nazwa dnia.
Wracamy do menu tego tekstu i podobnie jak z zegarkiem tak i teraz ustawiamy jego pozycję
Punkt odniesienia – lewy środek, dopasowujemy oś X i Y alby tekst zrównał się nam z zegarem,
Ustawiamy wielkość czcionki ( u mnie 19) oraz cień, który ustawiłem z takimi samymi parametrami jak zegar.
Obok nazwy dnia chcemy wstawić datę, ale z zachowaniem stylu czcionki z nazwą dnia.
Zastosujemy prosty trick.🙂
Po prawej stronie modułu tekstowego NAZWA DNIA stawiamy „fajeczkę” następnie wybieramy opcję CLONE (ikonka z + w białym prostokącie)
Zooper od razu przechodzi do ustawień sklonowanego elementu.
Dla porządku więc zmieniamy nazwę modułu np. na DATA DZIŚ
„Przesuwamy” go w prawo klikając w prawo OŚ X
Wchodzimy w ZAWARTOŚĆ TEKSTU, DATA, Dzień, nazwa miesiąca.
Otrzymujemy pod zegarem napis np. „środa 9 kwietnia”. Na moje oko po nazwie dnia przydałby się przecinek, więc
Wracamy do listy modułów i klikamy na moduł z Nazwą dnia, następnie Edytuj tekst ręcznie
Po zapisie #DEEEE# wstawimy przecinek otrzymując #DEEE#, następnie klikamy „fajeczkę” po prawej na górze zapisując zmiany.
Następnie mamy fantazję, aby nasz widget posiadał pod tym wszystkim co stworzyliśmy do tej pory OPIS AKTUALNYCH WARUNKÓW POGODOWYCH.
Podobnie jak wcześniej, wstawiamy nowy moduł tekstowy
Ustawiamy dla niego rozmiar czcionki, jej styl, położenie oraz cieniowanie w taki sam sposób jak wcześniejsze moduły tekstowe.
Przechodzimy na zawartość tekstu , Pogoda i Wybieramy Bieżące Warunki
Teraz wstawmy nad zegarem tekst z naszą lokalizacją .
Wracamy na UKŁAD MODUŁÓW, wstawimy nowy Tekst, ustawiamy parametry jak ostatnio, z tym że ustawiamy tekst NAD ZEGAREM
Klikamy ZAWARTOŚĆ TEKSTU, Lokalizacja, Miejscowość, kraj.
Nasz widget pokazuje już tekst z kilkoma przydatnymi informacjami ale przydałoby się, aby pokazywał również graficznie aktualną pogodę. Zakładam, że grafika z pogodą będzie po prawej stronie widgetu mniej więcej na wysokości zegara…
Przechodzimy na Listę modułów, klikamy + ADD
Wstawiamy Zestaw Ikon (Mapy Bitowe)
Przechodzimy na ZESTAW IKON i z listy wybieramy ZW Weather Icons
Następnie TRYB ZESTAWU IKON oraz CURRENT WEATHER.
Otrzymamy ikonkę prezentującą nam Aktualne warunki pogodowe. Teraz musimy ją ustawić w odpowiednim miejscu, wg wcześniejszych założeń.
PUNKT ODNIESIENIA i wybieramy PRAWY ŚRODEK, następnie za pomocą opcji OŚ X oraz OŚ Y przesuwamy ikonkę na wysokość mniej więcej naszego zegara i lekko odsuwamy od prawej krawędzi (moje ustawienia to oś x 30, oś y -70)
Dobrze by było, aby widget pokazywał również aktualną temperaturę.
Wstawimy nowy tekst, nadajemy mu nazwę np. TEMPERATURA, ustawiamy mu znane już parametry i ustawiamy położenie „pod ikonką pogody”
Następnie wchodzimy na EDYTUJ TEKST RĘCZNIE
Kasujemy zapis godziny #DHH#:#Dmm#
Przechodzimy na opcję POGODA i wybieramy BIERZĄCA TEMPERATURA
!!!UWAGA . Możemy też ręcznie wpisać #WCTEMP# !!!!
Klikamy na górze po prawej „fajeczkę” OK, zatwierdzając zmiany.
Teraz nasz widget nabiera kształtu 😉 Ma jednak jedną przypadłość … szare ciemne tło.. Możemy je zmienić na inny kolor lub zrobić całkiem przezroczyste, dzięki czemu nie będzie ma naszym pulpicie pod wigtetem ciemnego tła i tapeta będzie wyglądał naturalnie
PRZECHODZIMY DO UKŁADU WIDGETU
TŁO WIDGETU i ustawiamy kolor, przezroczystość itp.. ja ustawiam całkowitą przezroczystość tła widgetu przesuwając suwak max w prawo – wartość koloru zmieni się nam na #00000000.
Zapisujemy nasz szablon klikając na górze po prawej ikonkę dyskietki (save) np. jako „szablon cwiczebny” 🙂
Przyda nam się w dalszych częściach, gdzie rozbudujemy i poprawimy widget.
Na tę chwilę po opisanych wcześniej zabiegach powinniśmy otrzymać mniej więcej coś takiego
Gotowy dotychczasowy szablon dostępny jest TUTAJ
................:::::::::::::::::::::::::::::::........................
Wzbogacamy Wigdet o paski postępu!!!!
(poszczególne etapy podzieliłem i "pochowałem" w spoilerach aby ułatwić czytelność)
Do uzyskanego wcześniej prostego widgetu dodamy teraz paski postępu. zaczniemy od paska z baterią. Szczegóły w spoilerze
Edytujemy poprzednio wykonany widget.
Klikamy Układ a następnie ADD +
Wybieramy PASEK POSTĘPU
Proponuję dla porządku nadać mu nawę np BATERIA
Ustawiamy pasek za pomocą osi x oraz osi Y w pożądane miejsce ( ja przesunąłem go max w lewo pod zegarami).
Klikamy w opcję EDYTUJ MIN/MAX WARTOŚĆ PASKA POSTĘPU
Tutaj troszkę się zatrzymamy w celu wyjaśnień. (rozwiń spoiler)
W tym menu widać 3 podstawowe ustawienia paska. MIN, MAX oraz WARTOŚĆ.
MIN to dolna skrajna wartość paska, którą to w zależności od przeznaczenia paska można dowolnie zmieniać. I nie koniecznie musi być to ściśle określona watrość liczbowa, można tutaj dodać dowolną zmienną zoopera odpowiadającą danej funkcji z przeznaczeniem paska. Pokażę to w dalszej części na podstawie paska z obciążeniem procesora.
MAX - Górna granica paska, i podobnie jak MIN można ją określić na sztywno zadając wartość jak i zmiennymi zoopera.
WARTOŚĆ - tutaj określamy czego dotyczy nasz pasek, jak również z tej pozycji pasek będzie zaciągał aktualną wartość dla paska.
Na dole mamy jeszcze listę zmiennych jakie możemy wykorzystać tworząc nasz pasek.
Tyle celem szybkich wyjaśnień.. wracamy do naszego paska.
Ustawienia paska, jakie widać bezpośrednio po wejściu w wartość min/max są standardowo ustawione dla paska z baterią. Min może być tylko 0 a masz tylko 100 z oczywistych względów a Wartość #BLEVN# zwraca bierzący poziom baterii.
Możemy więc zabrać się za nadanie wyglądu naszemu paskowi.
WRACAMY DO OPCJI NASZEGO PASKA
Znajdziemy tam cały szereg opcji pozwalajacych Wam spersonalizować Wasz pasek, możemy go:
zrobić w różnych kolorach ( kolor 1 i drugiego plany, opcja WYPEŁNIENIE)
podzielić na segmenty (podział i odstępy)
zrobić w kształcie koło lub łuku (zakrzywienie)
Oraz co Wam fantazja przyniesie.
Wszystkie te opcje są dość czytelnie opisane w zooperze, wiec nie ma sensu ich tutaj powtarzać.
Proponuję się pobawić tymi ustawieniami bo tylko w ten sposób dokładnie dowiecie się co i jak dana opcja robi, a wszystkich możliwości tutaj nie spossób opisać).
Ja założyłem że pasek będzie łukiem i tak sobie zrobiłem... screen umieszczę na końcu tej części.
DODAMY DO PASKA TEXT, POKAZUJĄCY AKTUALNY POZIOM BATERII
Wracamy do menu głównego naszego widgetu
Układ,
Add +
Tekst
EDYTUJ TEXT RĘCZNIE
Kasujemy ręcznie zadaną z automatu wartość godziny
Rozwijamy zakładkę pogoda
WYBIERAMY # WCTEMP# zmieniając wartość textu na aktualną temperaturę.
Ustawiamy za pomocą opcji textu położenie, kolor i rozmiar, ewentualnie cień itp.
Na chwilę obecną nasz Ćwiczebny szablon wygląda mniej więcej tak
Oczywiście wygląd może się u Was różnić w zależności od opcji jakie wybraliście dla paska. 😉
TO JEDNAK NIE KONIEC LEKCJI 🙂 Z PROGRESSBAREM ...
Wspomniałem wcześniej, że wartości min i max w ustawieniach paska postępu nie koniecznie muszą być wpisane na sztywno. Jako poszczególną wartość np MAX możemy dodać wartość jaką odczyta nam zooper z naszego urządzenia. dobrym przykładem będzie tutaj pasek pokazujący bieżące użycie procesora.
WSTAWIAMY NOWY PASEK POSTĘPU
Edytuj wartość min/max
MIN - WYBIERAMY ZAKŁADKĘ SYSTEM I USTAWIAMY NA #SCPUMIN - USTAWI NAM TO DOLNĄ GRANICĘ PASKA NAMINIMALNĄ WARTOŚĆ CZĘSTOTLIWOŚĆ PRACY NASZEGO PROCKA
MAX - wybieramy zakładkę system i wybieramy #SCPUMAX# - USTAWI NAM TO GÓRNĄ GRANICĘ PASKA NA MAXYMALNĄ WARTOŚĆ CZĘSTOTLIWOŚĆ PRACY NASZEGO PROCKA
WARTOŚĆ - USTAWIAMY NA #SCPUCUR# - wybierając w tej chwili bieżącą częstotliwość pracy procka.
PRZECHODZIMY DO NADANIA WYGLĄDU PASKA WG WASZYCH UPODOBAŃ.
DODAJEMY TEXT POKAZUJĄCY BIEŻĄCE UŻYCIE PROCKA ( wartość textu ustawiamy na #SCPUCUR#)
Po tych wszystkich zabiegach nasz ćwiczebny szablon został wyposażony w dwa paski postępu. Jeden z baterią a drugi z bieżącym CPU.
Wygląda mniej więcej tak:
................:::::::::::::::::::::::::::::::........................
Widget z mapą i naszą lokalizacją. !!!!
(poszczególne etapy podzieliłem i "pochowałem" w spoilerach aby ułatwić czytelność)
W tej części pokażę ogólnie jak zrobić wigdet pokazujący naszą pozycję na mapie.
Sposoby są dwa:
1)
Musimy zacząć od przygotowania PNG z mapą, najlepiej z idealnie odzwierciedloną siatką kartograficzną,
np dla mapy europy południk zaczyna się od -10 a kończy na 40 (to są istotne dane dla tego sposobu określenia lokalizacji), a równoleżniki zaczynają się od 35 na dole mapy do 70 na górze mapy. Oczywiście dla mapy świata wartości te będą znacząco inne.
Wzoruję się na tej mapce.
Teraz wstawiasz pasek postępu, nazywasz go np długość geograficzna, bo za nią będzie odpowiadał, wchodzisz w wartość min i max paska i ustawiasz wartości wg mapy - MIN na -10 a MAX na 40. W polu Wartość wpisz #LLONG#
Pasek rozciągasz na powierzchni całego obrazka z mapą.
Kolor pierwszego i drugiego planu tego paska zrobisz na przezroczysty
Tryb wypełnienia - Wyróżnij bieżące - kolor jaki chcesz
Obrys np na 2
odstępy 20
podział 1 (wartości są przykładowe - ustawiasz tak aby było ładnie 🙂 )
TERAZ WSTAWIASZ pasek postępu odpowiedzialny za szerokość
obracasz go o -90 stopni rozciągasz na cała powierzchnię obrazka z mapą,
Parametry wyglądu paska ustawiasz podobnie jak we wcześniejszym (pasek długości)
Wchodziszw Ustawianie wartości min/max i ustawiasz:
MIN 35, MAX 70 (wg obrazka z mapą) pole WARTOŚĆ na #LLAT#
Dopieścisz wg Swoich potrzeb i ma działać.
Będzie to wyglądało mniej więcej jak w Forum po zmianach, link nie działa
2)
Drugi sposób jest nieco szybszy ale wymaga wg mnie troszkę pokombinowania
Nie musimy się bawić w paski postępu, wystarczy że wstawisz punkt (prostokąt) lub obrazek np jakąś strzałkę i przypiszesz jej w ustawieniach zaawansowanych taką wartość
cyfry 180 i 107 są podkreślone, ponieważ niekoniecznie u Ciebie taka wartość będzie. Tutaj musisz "pokombinować" z tymi wartościami alby w ostatecznym rachunku odpowiadały wartości Twojej lokalizacji.
................:::::::::::::::::::::::::::::::........................
WIGDET PLAYERA
(poszczególne etapy podzieliłem i "pochowałem" w spoilerach aby ułatwić czytelność)
Po udanych wszystkich zabiegach powinno wyjśc coś takiego mniej więcej oczywiście 😉
Do stworzenia własnego Playera potrzebne będą...
ZOOPER WIGET PRO
Apk Media Utilities, darmowa do pobrania https://play.google.com/store/apps/details?id=com.batescorp.notificationmediacontrols.alpha&hl=pl
Troszkę czasu i fantazji
1) Pobieramy i instalujemy Media Utilites
Wchodzimy w menu aplikacji i na liście zaznaczamy opcję jak na screenie
2) Wstawiamy na pulpicie nowy pusty szablon zoopera np 4x1
3) Ustawimy parametry wigetu wg własnych upodobań (rozmieszczenie przycisków, ramki itp...)
4) Jeśli chcemy aby nasz wiget podczas odtwarzania utworu wyświetlał okładkę, wstawiamy MAPĘ BITOWĄ, edytujemy ją opcją ZAAWANSOWANE PARAMERTY i wpisujemy wartość #TMU_COVERART#
Następnie oczywiście musisz doskalować rozmiar wyświetlanej okładki do swojego wigetu
5) Możemy dodać takie parametry jak Nazwa wykonawcy, Tytuł utworu, Tytuł Albumu....
W tym celu dodajemy gdzie chcemy nowy TEXT, następnie EDYTUJ RECZNIE TEKST, oraz wpisujemy w znacznikach ## odpowienie wartości:
TMU_ALBUM Nazwa albumu
TMU_ARTIST Nazwa wykonawcy
TMU_TRACK nazwa utworu
TMU_COVERART - bitmapa zawierającą aktualną okładkę
TMU_ISPLAYING - zwraca 1 jesli gra muzyka, 0 jeśli nie...
TMU_CURR_APP - prawdopodobnie nazwa aktualnie używanego playera
6) Czas na przyciski PLAY/PAUSE, Następny, Poprzedni...
W tym celu wstawiamy do wigety wcześniej przygotowane obrazki z symbolami przycisków lub używamy po prostu TEXTU wpisując odpowiednie <<, >II, >> lub dowolną kombinację jaka Wam przyjedzie do głowy
Następnie wybieramy w opcji danego obrazka/textu Kliknięcie Modułu (beta...), przechodzimy na zakładkę Shorttcuts i wybieramy MEDIA UTILITES ACTION a następnie właściwą akcję kliknięcia danego obrazka/tekstu.
postępujemy tak z wszystkimi "przyciskami" playera przypisując im właściwą akcję...
GOTOWE... powinno śmigać
Pod tym linkiem znajdziecie mój player ... jak nie ruszy to choć przyda się do podglądu co i jak;)
Możemy również widget wzbogacić o paski potępu i inne "bajery":)
Jeśli chodzi o pasek postępu to w ustawieniach Media Utillites na samym dole zaznaczasz opcje SEND SONG PROGGRESS
Następnie w swoim szablonie Playera wstawiasz PASEK POSTĘPU. Następnie wchodzisz w Edytuj Min/Max Wartość paska , i ustawiasz kolejno MIN - 0, Maks. 100, a w polu Wartość wpisujesz tak: #TMU_TRACK_PERC#
Zatwierdzasz i ma śmigać 😉
DODATKOWO JAK CHCESZ aby widget pokazywał Ci całkowity czas trwania utworu, to gdzieś na końcu paska postępu wstawiasz TEXT, następnie edytuj text ręcznie i wpisujesz #TMU_TRACK_LENGTH#
Jeśli chcesz aby widget pokazywał bieżący stan trwania utworu ( z niestety 5s opóźnieniem) to w edycji ręcznej pola tekstowego wpisujesz #TMU_PLAYTIME#
Żródło
UWAGA: Ten sposób może nie działaś na wszystkich odtwarzaczach
W mam nadzieję niedalekiej przyszłości zajmiemy się rozbudowaniem wigdetu z wykorzystaniem zarówno wbudowanych opcji jak i dodamy swoje.
Zapraszam.
PS: Chcesz skopiować poradnik na inne forum?? SKONTAKTUJ SIĘ ZE MNĄ NA PV