Projektowanie GUI w HTML5 : Gauge

gauge_ikona

HTML5 daje dodatkowe możliwości w zakresie tworzenia lekkich komponentów wizualizacyjnych. Lekkość rozumiemy tu przez brak wymagań wobec dodatkowych komponentów, takich jak Flash, Silverlight lub SVG, które nie zawsze znajdują się na komputerze użytkownika. Oczywistym wymaganiem jest przeglądarka internetowa z obsługą standardu HTML5 i tu natrafiamy na problem ponad 20% udziału w rynku starszych, niekompatybilnych z HTML5 przeglądarek na komputerach typu desktop.

W przypadku urządzeń mobilnych sytuacja wygląda lepiej. Na szczęście wydaje się, że wielcy świata IT doszli do porozumienia i nikt nie neguje trafności wyboru HTML5 jako wiodącego standardu na najbliższe lata. Możemy zatem z czystym sumieniem zacząć korzystać z jego dobrodziejstw.

Poniżej przedstawimy prosty sposób na stworzenie komponentu realizującego funkcjonalność wskaźnika (gauge). W sieci znajdziemy wiele rozwiązań gotowych do użycia, ale jeśli chcemy uzyskać specyficzny wygląd, może okazać się, że żadne nie będzie idealnie pasować. Możemy wtedy samodzielnie dostosować komponent AtenaGauge, który powstał z myślą o łatwej zmianie wyglądu.

Głównym składnikiem kontrolki jest biblioteka JavaScript, która realizuje umieszczanie ścieżek, kółek, kresek itp. na elemencie <canvas>.  Odpowiada ona także za dodanie całego elementu <div> zawierającego dodatkowe elementy, np. opis, skalę itp. W przypadku zastosowania innych kształtów lub rozmiarów algorytm rysujący wymaga dostosowania. W zamieszczonej wersji obsługiwane są półkola oraz paski pionowe. Najprostsze zastosowanie polega na wykorzystaniu dołączonych funkcji generujących  całe elementy <div> zawierające dodatkowe elementy, np. opis, skalę itp.:

Funkcja

Parametr

Wymagalny

Opis

AtenaGaugeFactory   Wskaźnik półkolisty
p_parentid T Identyfikator elementu nadrzędnego, do którego zostanie dodana kontrolka. Można dodawać wiele kontrolek do jednego elementu nadrzędnego.
p_divid T Identyfikator generowanego elementu kontrolki, musi być unikalny w ramach strony.
p_start T Minimalna wartość skali
p_end T Maksymalna wartość skali
p_description Opis pod kontrolką
p_onclick Kod JavaScript, który zostanie wykonany na zdarzeniu onclick.
p_picture url grafiki tła
p_backcolor Kolor tła widocznego przez przezroczyste elementy grafiki tła.
p_AtenaGauge Objekt typu AtenaGauge pozwala na dostosowanie wszystkich parametrów.
AtenaGaugeFactoryBar   Wskaźnik pionowy
p_AtenaGaugeBar Objekt typu AtenaGaugeBar pozwala na dostosowanie wszystkich parametrów.
Inne parametry identyczne jak w AtenaGaugeFactory, oprócz p_AtenaGauge.

Następnym elementem jest plik z grafiką decydujący o wyglądzie. Cały pomysł opiera się na wypełnianiu przezroczystych części grafiki za pomocą rysowanych na kanwie elementów graficznych. Dzięki temu łatwo możemy zmienić wygląd oraz stosować nieregularne kształty.

W załączonym archiwum znajdziemy przykłady zastosowania wskaźników.

Wygląd

Grafika tła

Kod JavaScript

gauge gotowy gauge gotowy
1
2
3
4
5
6
7
8
AtenaGaugeFactory( { p_parentid:'d1',
p_divid:'d1g',
p_start:0,
p_end:40,
p_value:25,
p_description:'przykład 1',
p_onclick:'location.href=\'http://blog.atena.pl\'',
p_picture:'gauge_skala_noglow.png' } );
bar gotowy bar tło
1
2
3
4
5
6
7
8
AtenaGaugeFactoryBar( { p_parentid:'d2',
p_divid:'d2g',
p_start:0,
p_end:40,
p_value:30,
p_description:'przykład 2',
p_onclick:'location.href=\'http://www.atena.pl\'',
p_picture:'bar1.png' } );

Zachęcamy do eksperymentowania z możliwościami różnych kompozycji. Poniżej przykład wraz z kodem używającym parametru p_AtenaGauge, który  daje większe możliwości zmiany zachowania kontrolki.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out','destination-atop',
'lighter','darker','copy','xor'
];

for (i=0;i&lt;compositeTypes.length;i++){
var label = compositeTypes[i];
var pag = new AtenaGauge('canvad3_'+i+'g', 'gauge_skala_noglow.png' , 50 ) ;
pag.GaugeCompositeOperation = compositeTypes[i];
pag.GaugeAlpha = 1;
AtenaGaugeFactory( { p_parentid:'d3',
p_divid:'d3_'+i+'g',
p_start:0,
p_end:40,
p_value:20+i,
p_description:label,
p_onclick:'',
p_AtenaGauge:pag } );
}

opcje_przenikania

Opcje możliwe do ustawienia przy pomocy parametrów p_AtenaGauge oraz p_AtenaGaugeBar:

Funkcja

Parametr

Opis

AtenaGaugeFactory P_AtenaGauge Wskaźnik półkolisty
ScaleColor Kolor półkola
ScaleWidth Szerokość półkola
ScaleXStart Pozycja X środka półkola
ScaleYStart Pozycja Y środka półkola
ScaleRadius Promień półkola
AnimationIntervalMs Odstęp pomiędzy animacjami
GaugeCompositeOperation Styl kompozycjisource-oversource-insource-outsource-atopdestination-over
destination-in
destination-out
destination-atop
lighter
darker
copy
xor
GaugeAlpha Przezroczystość półkola0 – przezroczyste; 1 pełne wypełnienie
PercentValue Ustawienie % pokazywanego półkola w odniesieniu do parametrów ScaleArcBegin oraz ScaleArcEnd
ScaleArcBegin Minimalna wartość skali w radianach
ScaleArcEnd Maksymalna wartość skali w radianach
ScaleArcStep Co ile radianów ma następować animacja
ImgSrc url grafiki tła
AtenaGaugeFactoryBar p_AtenaGaugeBar Wskaźnik pionowy
  ImgSrc url grafiki tła
  ScaleEnd
  ScaleBegin
  ScaleStep
  ScaleColor Kolor paska
  ScaleWidth Szerokość paska
  ScaleX Pozycja X lewej krawędzi paska
  AnimationIntervalMs Odstęp pomiędzy animacjami
  GaugeCompositeOperation Styl kompozycjisource-oversource-insource-outsource-atopdestination-over
destination-in
destination-out
destination-atop
lighter
darker
copy
xor
  GaugeAlpha Przezroczystość paska0 – przezroczyste; 1 pełne wypełnienie
  PercentValue Ustawienie % pokazywanego paska w odniesieniu do parametrów ScaleBegin oraz ScaleEnd

Poniżej zamieszczam źródła przykładowego projektu wykorzystującego zaprezentowany przeze mnie sposób generacji Gauge.
AtenaGauge

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *