Введение в разработку приложений для Firefox OS

Давайте добавим немного JavaScript, чтобы скрыть заголовок и изменить цвет текста и границы кнопки. Мы помещаем это в конец документа.

 <script> $("#runButton").on("click", function(){ if($(this).find("span").html() === "Run"){ $(this).find("span").html("Stop"); $(this).animate({"borderColor": "red"}, "fast"); $("#index").find("h2").slideUp(); $("#realTimeStats").slideDown(); }else{ $("#realTimeStats").slideUp(); $("#index").find("h2").slideDown(); $(this).find("span").html("Run"); $(this).animate({"borderColor": "green"}, "fast"); } }); </script> 

Здесь мы создаем обработчик события для кнопки запуска. Если текст кнопки «Выполнить», он изменяется на «Стоп» (и наоборот), а граница меняет свой цвет с помощью плагина jQuery jquery.animate-colors-min.js. Функции slideUp () и slideDown () — две функции, которые делают элемент видимым или скрытым с помощью простой анимации.

До сих пор у нас была кнопка, которая изменяет текст и его цвет рамки, заголовок h2 и данные в реальном времени, которые становятся скрытыми и видимыми при нажатии кнопки. Теперь добавим код, чтобы найти координаты и расстояние пробега. Удалите весь код в app.js и добавьте это:

 var distance = 0; var locationCords = { firstPos: null, secondPos: null }; var distanceInterval; function getLocation() { // Gets the current position navigator.geolocation.getCurrentPosition(function(position) { if(locationCords.firstPos === null){ locationCords.firstPos = position.coords; }else{ locationCords.secondPos = locationCords.firstPos; locationCords.firstPos = position.coords; distance += calculateDistance(locationCords.secondPos, locationCords.firstPos); } }, function(error){ // error handling switch(error.code){ case error.PERMISSION_DENIED: alert("User denied the request for Geolocation."); break; case error.POSITION_UNAVAILABLE: // Some error handling here break; case error.TIMEOUT: // Some error handling here break; case error.UNKNOWN_ERROR: // Some error handling here break; } }); } function calculateDistance(loc1, loc2) { var R = 6371; // km var dLat = (loc2.latitude-loc1.latitude).toRad(); var dLon = (loc2.longitude-loc1.longitude).toRad(); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(loc1.latitude.toRad()) * Math.cos(loc2.latitude.toRad()) * Math.sin(dLon/2) * Math.sin(dLon/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; return d * 1000; //meters } Number.prototype.toRad = function() { return this * Math.PI / 180; }; 

Сначала мы создаем 3 переменные:

• «Расстояние» , которое содержит пробег
• «LocationCoords» , который содержит текущие и последние координаты
• « DistanceInterval » , который содержит интервал, в котором вызывается функция getLocation () .

Внутри обработчика событий функции мы создаем интервал, который выполняется каждые 10 секунд, и после нажатия «Стоп» этот интервал прерывается и переменные сбрасываются. Это достигается путем вызова clearInterval () с distanceInterval в качестве аргумента.

 $("#runButton").on("click", function(){ if($(this).find("span").html() === "Run"){ $(this).find("span").html("Stop"); ... distanceInterval = setInterval(function(){getLocation()}, 10000); // Add this }else{ ... clearInterval(distanceInterval); // And this } }); 

Мы также добавляем еще один интервал, который обновляет данные выполнения, «timeInterval», который содержит это значение.

 $("#runButton").on("click", function(){ if($(this).find("span").html() === "Run"){ ... startTime = new Date().getTime(); timeInterval = setInterval(function(){timeLeft()}, 1000); distanceInterval = setInterval(function(){getLocation()}, 5000); }else{ ... clearInterval(timeInterval); clearInterval(distanceInterval); $("#hours").html(0); $("#minutes").html(0); $("#seconds").html(0); $("#meters").html(0); } }); 

Мы добавляем еще одну переменную с именем «startTime», которая содержит время в начале цикла. Мы создаем интервал для обновления времени, вызывая функцию timeLeft () .

Мы добавляем этот код в app.js. Это позволяет рассчитать время и обновить время и расстояние.

 function timeLeft(){ var thisTime = new Date().getTime(); var seconds = Math.floor((thisTime - startTime)/ 1000); var hours = Math.floor(seconds/3600); var minutes = Math.floor((seconds - (hours * 3600))/60); var seconds = Math.floor(seconds - (hours * 3600) - (minutes * 60)); $("#hours").html(hours); $("#minutes").html(minutes); $("#seconds").html(seconds); $("#meters").html(Math.floor(distance)); } в function timeLeft(){ var thisTime = new Date().getTime(); var seconds = Math.floor((thisTime - startTime)/ 1000); var hours = Math.floor(seconds/3600); var minutes = Math.floor((seconds - (hours * 3600))/60); var seconds = Math.floor(seconds - (hours * 3600) - (minutes * 60)); $("#hours").html(hours); $("#minutes").html(minutes); $("#seconds").html(seconds); $("#meters").html(Math.floor(distance)); } 

Остается только страница, на которой пользователь видит результаты запуска. Мы создаем новый раздел без заголовка. Давайте скопируем раздел из app.html строительных блоков и отредактируем его. Мы ставим id и его позицию данных как «правильные». Используя эти позиции данных, мы можем осуществлять переходы с одной страницы на другую. Мы оставляем только элемент статьи, так как другие нам не нужны.

 <section role="region" id="viewResultsPage" data-position="right"> <article class="content scrollable header"> <div style="text-align: center;"> <div><h2>You have run <em id="resMeters"></em> meters.</h2></div> <div><h2>You have rund <em id="spanHours"></em> H <em id="spanMinutes"></em> M <em id="spanSeconds"></em> S.</h2></div> <div><h2>Your avarage speed is <em id="avarageSpeed"></em> m/s</h2></div> <button class="recommend" style="margin-top: 150px;">Run Again</button> </div> </article> </section> 

Нам нужно добавить переход из раздела с id = «index» в раздел с id = «viewResultsPage» .

 $("#runButton").on("click", function(){ if($(this).find("span").html() === "Run"){ ... }else{ ... $("#viewResultsPage").removeClass("right"); $("#viewResultsPage").addClass("current"); $("#index").addClass('left'); } }); 

Проверьте это снова в симуляторе. Просто нажмите обновить до менеджера приложений и посмотрите результат.

Мы выбираем раздел с id = «viewResultsPage», удаляем класс «right» и добавляем класс «current». В разделе с id = «index» добавьте класс «left». Чтобы вернуться в раздел с id = «index», просто добавьте эти классы обратно.

 $("#viewResultsPage").find("button").on("click", function(){ $("#viewResultsPage").addClass("right"); $("#viewResultsPage").removeClass("current"); $("#index").removeClass('left'); }); 

Это простой обработчик события для кнопки «Выполнить снова», который обращает то, что мы сделали, чтобы получить от индекса до viewResultsPage.

Последнее, что нужно, — это напечатать данные прогона в viewResultsPage и сбросить каждую переменную для нового прогона.

 function timeLeft(){ ... $("#emMeters").html(Math.floor(distance)); $("#emHours").html(hours); $("#emMinutes").html(minutes); $("#emSeconds").html(seconds); $("#avarageSpeed").html(Math.floor(distance/((hours*3600) + (minutes*60) +seconds))); } $("#viewResultsPage").find("button").on("click", function(){ ... startTime = 0; distance = 0; locationCords.firstPos = null; locationCords.secondPos = null; }); в function timeLeft(){ ... $("#emMeters").html(Math.floor(distance)); $("#emHours").html(hours); $("#emMinutes").html(minutes); $("#emSeconds").html(seconds); $("#avarageSpeed").html(Math.floor(distance/((hours*3600) + (minutes*60) +seconds))); } $("#viewResultsPage").find("button").on("click", function(){ ... startTime = 0; distance = 0; locationCords.firstPos = null; locationCords.secondPos = null; }); 

Вывод

Создать приложение Firefox OS не сложно, это легко для любого, кто имеет опыт в веб-разработке. Использование строительных блоков делает это еще проще. Firefox OS — это новая мобильная ОС, которая делает шаги, которые ранее не делала ни одна другая ОС. Я верю, что Open Web принесет новую эпоху в сеть, а Firefox OS и Mozilla прилагают фантастические усилия.

Что вы думаете о Firefox OS?