Lecture
Использование возможностей HTML5 и Apache Cordova для доступа к ресурсам мобильного устройства
Использование Cordova - плагина на примере объекта Camera
Методы объекта Camera [5]:
- camera.getPicture - активизирует камеру и возвращает изображение в качестве значения;
- camera.cleanup - удаляет изображение.
Основные свойства объекта Camera:
- ImageData: файл изображения;
- quality: качество сохраняемого изображения, выраженное в диапазоне 0-100, где 100 -более высокое разрешение;
- DestinationType: формат возвращаемого значения;
- targetWidth: ширина в пикселях для масштабирования изображения;
- targetHeight: высота в пикселях для масштабирования изображения;
- correctOrientation: поворот изображения для коррекции ориентации устройства во время захвата (Boolean);
- saveToPhotoAlbum: сохранение изображения в фотоальбом после съемки(Boolean).
Обращение к методу объекта имеет вид:
navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions ] );
где
- cameraSuccess - имя обработчика события при успешной фотосъемке;
- cameraError, - имя обработчика события при возникновении проблем;
- cameraOptions - список свойств объекта.
Метод camera.getPicture активизирует (открывает) устройство, которое позволяет пользователю фотографировать. Когда пользователь щелкает на выбранной фотографии, появится диалоговое окно, которое позволяет ему выбрать желаемое изображение. Возвращаемое значение ImageData имеет один из форматов, указанных в списке cameraOptions. С полученным изображением можно делать все, что угодно, например:
- отображать на экране тегом <img>,
- сохранять данные локально в памяти мобильного устройства (LocalStorage) и т.д.
Пример JavaScript - кода [4] использования методов и свойств объекта Camera для создания и обработки фотографии:
// вызов метода открытия камеры
navigator.camera.getPicture(OnSuccess, OnFail, {
quality: 75,
allowEdit: true,
targetWidth: 280,
targetHeight: 280,
destinationType: destinationType.DATA_URL
});
// обработка полученной фотографии
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
// обработка ошибки
function onFail(message) {
alert('Failed because: ' + message);
}Использование Cordova - плагина на примере объекта Compass
Методы объекта Compass:
- compass.getCurrentHeading - получает показания датчика компаса мобильного устройства, который измеряет направление в градусах от 0 до 359.99, где 0 соответствует северу;
- compass.watchHeading - получает текущее направление движения устройства через регулярные промежутки времени, запускает обработчики событий успешной регистрации показаний датчика и при возникновении проблем;
- compass.clearWatch - прекращает просмотр датчика компаса.
Обращение к основному методу объекта compass.getCurrentHeading имеет вид:
navigator.compass.watchHeading(compassSuccess, compassError, [ compassOptions ] );
где
- compassSuccess - имя обработчика события при успешной регистрации показаний датчика;
- compassError, - имя обработчика события при возникновении проблем;
- compassOptions - список свойств объекта Compass.
Пример JavaScript - кода использования методов и свойств объекта Compass для снятия показаний датчика мобильного устройства и отображения полученных значений на мобильной странице:
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// The watch id references the current `watchHeading`
var watchID = null;
// Wait for device API libraries to load document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
function onDeviceReady() {
startWatch();
}
// Start watching the compass function startWatch() {
// Update compass every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
}
// Stop watching the compass
function stopWatch() {
if (watchID) {
navigator.compass.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get the current heading
function onSuccess(heading) {
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading.magneticHeading;
}
// onError: Failed to get the heading
function onError(compassError) {
alert('Compass error: ' + compassError.code);
}
</script>
</head>
<body>
<div id="heading">Waiting for heading...</div>
<button onclick="startWatch();">Start Watching</button>
<button onclick="stopWatch();">Stop Watching</button>
</body>
</html>Другие многочисленные примеры использования плагинов Cordova и средств JavaScript API можно посмотреть на сайте Cordova [1].