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.
Czytaj więcej:
ComboChkBox
StudioSystem to potężna platforma, która oferuje szeroki zakres możliwości dla firm chcących zarządzać przepływem pracy i danymi. Oferuje użytkownikom pole wyboru, które umożliwia im łatwy dostęp do szeregu funkcji i opcji, ułatwiając tworzenie, zarządzanie i przechowywanie danych.
Skanowanie kodów EAN i QR przy pomocy aparatu
Aplikacja StudioSystem Web na systemy android pozwala na skanowanie kodów EAN i kodów QR przy pomocy aparatu fotograficznego urządzenia mobilnego. W aplikacji StudioSystem posiadamy uniwersalna bibliotekę, która pozwoli na skanowanie kodów EAN i QR przy pomocy aparatu urządzenia mobilnego (terminal, smartfon wyposażone w system Android). Przykładowe działanie jest zaprezentowane zaprezentowane na witrynie testowej. https://studiosystemtest.softwarestudio.com.pl/role_sys/jqs21.aspx?kod=636b-45e9-b3a2&uid=6b629599-636b-45e9-b3a2-7056a5088712 Przykładowa transakcja znajduje
StudioSystem Android kod QR kody EAN kody kreskowe skanowanie StudioSystem
Zdjęcia za pomocą kamery na urządzeniach Android
Platforma StudioSystem pozwala za pomocą modułu dla urządzeń mobilnych uruchamiać aparat fotograficzny, przechwycić zrobione zdjęcia i wysłać je na serwer.
j_insert_update – zaawansowane programowanie – zmiana funkcji przycisków
W dzisiejszej erze cyfrowej możliwość łatwego manipulowania obiektami w formularzu lub oknie może otworzyć przed programistami cały świat możliwości. Dzięki platformie StudioSystem programiści mają dostęp do potężnego zestawu narzędzi, dzięki którym manipulowanie obiektami na formularzu jest proste i intuicyjne.
role_ank/wypelnij_ankiete.aspx
Transakcja umożliwia udzielenie odpowiedzi na ankietę przygotowaną transakcja role_ank/dodaj_ankiete.aspx Parametry refno i edycja Parametr refno przyjmuje wartość klucza nagłówka ankiety (ankiety_n.REFNO) w przypadku, gdy chcemy dodać nowe odpowiedzi do danej ankiety. W przypadku, gdy chcemy edytować wcześniej wypełnioną ankietę parametr refno musi przyjąć wartość klucza głównego tabeli, w której zapisywane są odpowiedzi (dpank.REFNO) dodatkowo powinien pojawić się parametr edycja=1. Przykłady Nowe odpowiedzi: ..role_ank/wypelnij_ankiete.aspx?refno=REFNO_Z_TABELI_ANKIETY_N Edycja odpowiedzi: ..role_ank/wypelnij_ankiete.aspx?edycja=1&refno=REFNO_Z_TABELI_DPANK widok Transakcja