Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 330 / 27 | Длительность: 11:36:00
Специальности: Программист
Лекция 9:

Использование возможностей 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].

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?