JustGage

08 oktobar 2012
JustGage
JustGage je koristan Java Skript plugin za generisanje i animiranje jednostavnih i efektnih merača komandnih tabli (dashboard gagues). Baziran je na Raphaël biblioteci za vektorsko crtanje, tako da je potpuno nezavisan od rezolucije i samopodešavajući.

Obzirom da je u pitanju čist SVG, radi u gotovo svakom browseru - IE6+, Chrome, Firefox, Safari, Opera, Android, itd.

Kako se koristi?

  1. Uključi JustGage i Raphaël skriptove na strani
  2. <script src="/raphael.2.1.0.min.js" type="text/javascript"></script>
    <script src="/justgage1.0.min.js" type="text/javascript">><script>
    
  3. Kreiraj div sa id, width i height parametrima
  4. Pozovi "justGage({id, value})"
  5.     <script>
        var g = new JustGage({
        id: "gauge",
        value: 67,
        min: 0,
        max: 100,
        title: "Visitors"
        });
        </script>
    

Ovo je najjednostavniji setup. Ukoliko želiš da zamastiš ruke :) ima još puno zupčanika i šrafova sa kojima možeš da se igraš - pogledaj demo sekciju na sajtu da vidiš sve kul stvari koje možeš da odradiš kombinovanjem različitih parametara.

justgage-simple

Auto-podešavanje

JustGage se automatski podešava na veličinu elementa koji ga sadrži. I na zum strane. I na gustinu ekrana (PPI). To znači da ćeš dobiti čiste, oštre i lepe merače na svakom tipu displeja i svakoj rezoluciji.

Intervali

Ako želiš da meriš, na primer, interval između 350 i 980 - nema problema, justGage podržava tu opciju. Vrednost i boja se prikazuju na osnovu procenta koji uzimaju u definisanom intervalu, sa opciono prikazanim min i max vrednostima. Takođe, ako je vrednost van intervala, bez brige - justGage pokriva i ovu situaciju.

justgage-custom

Gradijenti ili solidne boje

Imaš previše merača na strani, pa sve deluje previše šareno sa svim tim različitim vrednostima i bojama? Nema problema, možeš izabrati da se boja prikazuje po sektoru. To znači da će boja ostati zelena za sve vrednosti od 0% do 33%, žuta od 33% do 66%, i crvena preko 66%.
Ovo su osnovne boje, ali se može podesiti proizvoljan broj različitih boja i sektora.

justgage-color-selector

Kastomizacja izgleda

Ukoliko ti se ne dopada osnovni stil, možeš sam kreirati svoj - justGage ima gomilu parametara koji kontrolišu izgled merača uključujući širinu merača, boju, senku, boje prikazanih vrednosti, boje labela, itd.

justgage-custom-style

Licenca i kompatibilnost

JustGage je pušten pod MIT licencom, što znači da možeš da ga koristiš i modifikuješ kako god tebi lično odgovara. U teoriji, trebalo bi da radi pod svakim browserom koji podržava SVG. U praksi, testiran je u Chrome 20, Firefox 12, IE6, 7, 8, 9, Opera 12, Safari 5.1.2, Android 4.0.

Preuzimanje skripte

Ovu korisnu skriptu možete pronaći na justgage.com, a autora iste možete pratiti na twitteru ako želite da mu postavite neka pitanja ili da mu pošaljete pozdrav.

Nenad Antić

Nenad Antić

Osnivač i urednik Web Arene.
UI/UX i Web dizajner, jedan od moderatora zvaničnog Joomla foruma, kao i dugogodišnji zaluđenik za sve što ima veze sa Web-om i dizajnom.

Web: about.me/nenadantic E-mail: Ova adresa el. pošte zaštićena je od spam napada, treba omogućiti JavaSkript da biste je videli
DreamWeb Hosting

Arena @ Twitter

Arena @ Facebook