Strona główna > HTML5, Internet Explorer, Visual Studio, Windows 8 > Zawiało HTML5 i JavaScriptem w Windows 8–urządzenia i uprawnienia

Zawiało HTML5 i JavaScriptem w Windows 8–urządzenia i uprawnienia

Dostęp do urządzeń zaprezentuję na przykładzie kamerki internetowej, wbudowanej często w tablety i komputery PC. W systemie Windows 8 aplikacja nie ma bezpośredniego dostępu do sprzętu, dlatego jeżeli chcemy uzyskać film lub zdjęcie musimy zwrócić się do sytemu z prośba o przekazanie takich danych. Wtedy system wyświetla z góry zdefiniowane okno, w którym prosi użytkownika o odpowiednie dane, które później przekazuje Nam, aplikacji.

Najpierw musimy poinformować system Windows o tym, że w Naszej aplikacji będziemy korzystać z kamerki internetowej, robimy to klikając na plik package.appxmanifest w Solution Explorer. Otworzy nam się okno, w którym powinniśmy przejść na zakładkę Capabilities i zaznaczyć Webcam jako element, do którego będziemy chcieli uzyskać dostęp.

Następnie przechodzimy do pliku default.html i dodajemy w body znacznik, w którym wyświetlimy zdjęcie oraz przycisk, który aktywuje mechanizm

<img alt="photo" id="photo"/>

<input id="takePhoto" type="button" value="Take a photo" />

Następnie przejdźmy do pliku default.js, w którym dopiszmy zdarzenie dla przycisku:

document.getElementById("takePhoto")

.addEventListener("click", function() {

var camera = new Windows.Media.Capture.CameraCaptureUI();

camera.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)

.done(function(photo) {

document.getElementById("photo").src = URL.createObjectURL(photo);

});

});

Kod ten realizuje następujące rzeczy:

· Szukamy w drzewie obiektów takePhoto i przypisujemy do obsługę zdarzenia kliknięcia.

· Zdarzenie kliknięcia inicjalizuje klasę Windows Runtime Windows.Media.Capture.CameraCaptureUI. Proszę zwrócić uwagę, że nie ma znaczenia, że jesteśmy w JavaScript, otrzymujemy dostęp do klasy Windows RT, której instancje tworzymy na potrzeby naszego kodu.

· Obiekt kamery camera, posiada metodę captureFileAsync, która w asynchroniczny sposób wywoła specjalne okno systemu Windows i zapyta użytkownika o zdjęcie. Na końcu asynchronicznej metody dodaliśmy tak zwany promise done, który mówi o tym, że jak zakończymy wykonywanie metody captureFileAsync przejdziemy do wywołania kolejnej funkcji zdefiniowanej w środku done.

· Funkcja zdefiniowana w done, przypisuje zdjęcie do obrazka wyszukanego w drzewie obiektów.

Użytkownik klikając przycisk i aktywując naszą logike otrzyma zapytanie od systemu operacyjnego czy zezwala naszej aplikacji na dostęp do kamery:

image

po czym otrzyma okno, w którym może stworzyć zdjęcie i je udostępnić aplikacji.

Jeżeli użytkownik wyrazi na coś zgodę, w każdej chwili może odznaczyć to pozwolenie w specjalnym pasku wysuwanym z prawem strony ekranu klikając na Settings

image

I wybierając Permissions

image

Jeżeli chcielibyśmy otrzymać dostęp do pozycji użytkownika możemy użyć mechanizmu, który jest w stanie namierzyć komputer przy użyciu urządzenia GPS, wspierając się sieciami komórkowymi i sieciami WiFI w okolicy.

Tutaj scenariusz jest bardzo podobny, należy udać się do pliku manifestu i na zakładce Capabilities zaznaczyć uprawnienie Location by móc uzyskać dostęp do pozycji użytkownika.

Następnie należy napisać kod, który uruchomi cały mechanizm:

var location = new Windows.Devices.Geolocation.Geolocator();

location.getGeopositionAsync().done(function(position) {

var lat = position.coordinate.latitude;

var long = position.coordinate.longitude;

});

Powyżej stworzyliśmy zmienną location, do które przypisana została klasa lokalizatora z Windows Runtime, następnie dodana została implementacja mechanizmu pobierającego lokalizacje przy użyciu asynchronicznej metody getGeopositionAsync i promise done, który poczeka na pobranie lokalizacji, po czym uruchomi zdefiniowaną w sobie funkcję przypisującą do zmiennych wysokość i szerokość geograficzną.
W bardzo podobny sposób możemy zbudować dostęp do akcelerometru, jeżeli mamy takowe urządzenie w komputerze lub tablecie. Wystarczy stworzyć obiekt urządzenia:

var accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

accelerometer.addEventListener("readingchanged", function (e) {

var accelX = e.reading.accelerationX;

var accelY = e.reading.accelerationY;

var accelZ = e.reading.accelerationZ;

});

W następnym odcinku powiem trochę o dzieleniu się informacjami z innymi aplikacjami. Zapraszam.

  1. Brak komentarzy.
  1. No trackbacks yet.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: