Metal Detector / js /
app.ui.js
/* * Copyright (c) 2015 Samsung Electronics Co., Ltd. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*global window, document*/ /** * Application UI module. * It is responsible for managing user interface. * * @module app.ui * @requires {@link app.model} * @namespace app.ui * @memberof app */ // make sure that "app" namespace is created window.app = window.app || {}; // strict mode wrapper (function defineAppUi(app) { 'use strict'; /** * Signal indicator bars count. * * @memberof app.ui * @private * @const {number} */ var SIGNAL_INDICATOR_BARS_COUNT = 9, /** * Percentage width for signal-strength on indicator bars. * example: Indicator layer with set width SIGNAL_INDICATOR_PERCENT[4] * + % will highlight four indicator bars. * * @memberof app.ui * @private * @const {number[]} */ SIGNAL_INDICATOR_PERCENT = [29, 34, 40, 50, 56, 63, 73, 81, 89, 100], /** * Not sensor not supported error. * * @memberof app.ui * @private * @const {string} */ SENSOR_NOT_SUPPORTED_ERROR_MSG = 'Magnetic sensor\n is not ' + 'supported\n on this device.', /** * Sensor failure error message. * * @memberof app.ui * @private * @const {string} */ SENSOR_FALIURE_ERROR_MSG = 'Magnetic sensor\nfailed.', /** * Unknown error message. * * @memberof app.ui * @private * @const {string} */ UNKNOWN_ERROR_MSG = 'Magnetic sensor\nunknown error\noccurred.\n' + 'Application may not\nwork correctly', /** * Signal strength value element. * * @memberof app.ui * @private * @type {HTMLElement} */ signalStrengthValueEl = null, /** * Signal strength indicator holding active indicator bars. * * @memberof app.ui * @private * @type {HTMLElement} */ signalStrengthIndicatorEl = null, /** * Signal direction indicator element. * * @memberof app.ui * @private * @param {HTMLElement} */ signalDirectionIndicatorEl = null, /** * Signal strength indicator active layer. * * @memberof app.ui * @private * @param {HTMLElement} */ signalStrengthOnEl = null, /** * Signal strength indicator background layer. * * @memberof app.ui * @private * @param {HTMLElement} */ signalStrengthOffEl = null, /** * If set to true signal direction indicators are visible. * * @memberof app.ui * @private * @type {boolean} */ indicatorsTurnedOn = false, /** * Application model module reference. * * @memberof app.ui * @private * @type {object} */ model = null; // create namespace for the module app.ui = app.ui || {}; /** * Sets magnetic field strength value. * * @memberof app.ui * @private * @param {number} value */ function setValue(value) { signalStrengthValueEl.innerText = value.toFixed(0); } /** * Highlights signal strength indicator bars. * * @memberof app.ui * @private * @param {number} value */ function setSignalStrengthIndicator(value) { // how many indicator bars should be highlighted; logarithmic scale var indicatorCount = model.calculateRelativeSignalStrength(value, SIGNAL_INDICATOR_BARS_COUNT); signalStrengthIndicatorEl.style.height = SIGNAL_INDICATOR_PERCENT[indicatorCount] + '%'; } /** * Turns off direction and strength indicators. * * @memberof app.ui * @private */ function turnOffIndicators() { indicatorsTurnedOn = false; signalDirectionIndicatorEl.classList.add('off'); signalStrengthIndicatorEl.classList.add('hidden'); signalStrengthOnEl.classList.add('hidden'); signalStrengthOffEl.classList.add('hidden'); } /** * Turns on direction and strength indicators. * * @memberof app.ui * @private */ function turnOnIndicators() { indicatorsTurnedOn = true; signalDirectionIndicatorEl.classList.remove('off'); signalStrengthIndicatorEl.classList.remove('hidden'); signalStrengthOnEl.classList.remove('hidden'); signalStrengthOffEl.classList.remove('hidden'); } /** * Sets rotate direction indicators rotation. * * @memberof app.ui * @private * @param {number} rotation Rotation value in degrees. */ function rotateDirectionIndicators(rotation) { signalDirectionIndicatorEl .style.webkitTransform = 'rotate(' + rotation + 'deg)'; signalStrengthOnEl .style.webkitTransform = 'rotate(' + rotation + 'deg)'; signalStrengthOffEl .style.webkitTransform = 'rotate(' + rotation + 'deg)'; } /** * Handles model "model.magnetic.ready" event. * * @memberof app.ui * @private */ function onMagneticReady() { turnOnIndicators(); } /** * Handles model "model.magnetic.update" event. * * @memberof app.ui * @private * @param {CustomEvent} event */ function onMagneticUpdate(event) { var data = event.detail, value = data.value, rotation = data.rotation, rotationVisible = data.rotationVisible; if (indicatorsTurnedOn && !rotationVisible) { turnOffIndicators(); } else if (!indicatorsTurnedOn && rotationVisible) { turnOnIndicators(); } setValue(value); setSignalStrengthIndicator(value); if (indicatorsTurnedOn) { rotateDirectionIndicators(rotation); } } /** * Handles model "model.magnetic.error" event. * * @memberof app.ui * @private * @param {CustomEvent} event */ function onMagneticError(event) { var type = event.detail; switch (type) { case model.ERROR.NOT_SUPPORTED: window.alert(SENSOR_NOT_SUPPORTED_ERROR_MSG); model.exitApplication(); break; case model.ERROR.START_FAILURE: window.alert(SENSOR_FALIURE_ERROR_MSG); model.exitApplication(); break; default: window.alert(UNKNOWN_ERROR_MSG); } } /** * Registers event listeners. * * @memberof app.ui * @private */ function bindEvents() { window.addEventListener('model.magnetic.ready', onMagneticReady); window.addEventListener('model.magnetic.update', onMagneticUpdate); window.addEventListener('model.magnetic.error', onMagneticError); } /** * Initialize application. * * @memberof app.ui * @public */ function init() { model = app.model; signalStrengthValueEl = document.getElementById('value-number'); signalStrengthIndicatorEl = document.querySelector('#signal-strength-on .resizable'); signalDirectionIndicatorEl = document.getElementById('signal-direction-indicator'); signalStrengthOnEl = document.getElementById('signal-strength-on'); signalStrengthOffEl = document.getElementById('signal-strength-off'); bindEvents(); model.init(); } app.ui.init = init; })(window.app);