Funkcjonalność umożliwia w aplikacji na Android uruchomić aparat w trybie do skanowania kodów QR, odczytanie wartości z wybranego kodu QR i wpisanie zeskanowanej wartości do dowolnego elementu html.
- Osadzenie elementu w aplikacji
W kodzie html należy umieścić diva z odpowiednimi parametrami (opis parametrów poniżej) np.:
<div class="AndroidQrCode" ssWidh="100px" ssText="QR SCAN" ssClass="art-buttonSiberia" ssElementId="QR_CODE_VALUE"></div>lub w przypadku użycia z transakcji jqs
$("#formularz").append('<div class="AndroidQrCode" ssWidh="100px" ssText="QR SCAN" ssClass="art-buttonSiberia" ssElementId="QR_CODE_VALUE"></div>');Następnie, aby powołać komponent do życia należy pobrać skrypt odpowiedzialny za uruchomienie i obsługę skanera kodów QR, a po poprawnym załadowaniu skryptu wywołać na wcześniej dodanym elemencie html funkcję konfigurującą KonfigurujAndroidQrCode znajdującą się w pliku studiosystemIS.js. Jako parametr funkcji przekazujemy kontrolkę (obiekt jQuery).
np.:
$.getScript('/Scripts/html5-qrcode.min.js', function () {
$(".AndroidQrCode").each(function (index) {
new KonfigurujAndroidQrCode($(this));
});
});- Parametry
- ssText – parametr pozwalający ustawić nazwę przycisku. W przypadku braku domyślnie zostanie ustawiony tekst „Skanuj kod QR” wraz z obrazkiem pobranym ze ścieżki /images_k/24×24/dodaj.png. Obrazek mógłby przedstawiać aparat/kamerę/zdjęcie, ale nie znalazłem takiego w naszym zestawie. W przypadku pojawienia się nowej ikonki warto by było podmienić obrazek na lepszy.
np.:
ssText="Skanuj kod QR"
ssText="Skanuj kod QR<img src='/images_k/24x24/android.png' style='margin-left: 5px;' title='android qr scaner'/>"- ssWidh – parametr pozwala ustawić szerokość przycisku w pikeslach, procentach lub wartość kalkulowana. Domyślna wartość to 200px
np.:
ssWidh="200px"
ssWidh="75%"
ssWidh="calc(100% - 20px)"- ssClass – parametr pozwala nadpisać style przycisku. Przycisk zawsze ma nadaną klasę art-button (domyślna klasa do stylowania przycisków w studiosystem). Parametrem ssClass można dodać dodatkową klasę nadpisującą style klasy art-button.
np.:
ssClass="art-buttonSiberia"W efekcie przycisk będzie miał przypisane dwie klasy class=”art-button art-buttonSiberia”, a jego kolor/motyw zmieni się z intensywnego/ciemnego niebieskiego na jasnoniebieski/siberia.
- ssElementId – parametr obowiązkowy, oczekuje nazwy klasy elementu, do którego zostanie podstawiona zeskanowana zawartość kodu QR. Skrypt sam sprawdzi jaki rodzajem elementu został przekazany i użyje odpowiednio funkcji $(„#” + ssElementId).val(odczytana_wartosc) dla obiektów typu input lub textarea, a dla reszty elementów html takich jak div, span, p i inne użyje funkcji $(„#” + ssElementId).html(odczytana_wartosc)
- ssCameraId – współczesne urządzenie z androidem posiadają wiele kamer. Aby skryp zaczął działać musimy wskazać którą kamerą ma skanować kod QR. Parametr przyjmuje wartości od 0 do ilość kamer w urządzeniu minus 1. Parametr jest opcjonalny i najlepiej używać go tylko w przypadku, gdy domyślnie wybrana kamera z jakichś powodów jest nieodpowiednia (np. domyślnie wybrano kamerę z przodu urządzenia). Domyślnie wybierana jest kamera ostatnia na liście dostępnych. W większości przypadków będzie to właściwy wybór, ponieważ będzie to jedna z kamer na tyle urządzenia (kamery z przodu są zwracane jako pierwsze).
- ssFunction – nazwa funkcji, która ma zostać wykonana po zeskanowaniu kodu QR
3. Niezbędne pliki do uruchomienia funkcjonalności
Pliki potrzebne aby uruchomić skanowanie kodów QR u klienta:
- /Scripts/html5-qrcode.min.js (biblioteka skanera)
- /Scripts/studiosystemIS.js (plik zawierający klasę zapewniającą całą otoczkę w okół skanera KonfigurujAndroidQrCode).
4. Znane problemy
Skaner kodów QR nie radzi sobie ze skanowaniem z ekranów (laptopy, monitory, telefony, telewizory, itp.). Skanowany kod QR musi być na papierze.