Merge pull request #12 from MickaelMatuchak/master

Fix compass direction on Zenpad 10"

.travis.yml

@@ -29,6 +29,7 @@ install:
 before_script:
 - cordova platform rm android
 - cordova platform add android@6.3.0
+- cordova plugin add cordova-android-support-gradle-release --variable ANDROID_SUPPORT_VERSION=24.0.0
 script:
 - cordova prepare
 - cordova build android --release

config.xml

@@ -23,5 +23,6 @@
     <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
     <plugin name="phonegap-plugin-barcodescanner" spec="^6.0.8" />
     <plugin name="cordova-plugin-device" spec="^2.0.1" />
-    <engine name="android" spec="^6.4.0" />
+    <plugin name="cordova-plugin-screen-orientation" spec="^3.0.1" />
+    <engine name="android" spec="^6.3.0" />
 </widget>

www/css/boussole.css

@@ -99,4 +99,98 @@
 #compass_elt {
     clear: both;
     margin-top: 120px;
+    transition: all 1s ease;
+}
+
+/* boussole design paysage */
+section.landscape {
+    text-align: center;
+}
+
+section .entete {
+    margin-top: 10px;
+}
+
+
+section.landscape .entete .score, section.landscape .entete .temps {
+    vertical-align: middle;
+    float: right;
+}
+
+section.landscape .entete .score, section.landscape .entete .temps {
+    width: 15%;
+    margin-right: 6px;
+    text-align: center;
+}
+
+section.landscape .entete .score p, section.landscape .entete .temps p {
+    display: inline-block;
+    text-align: center;
+}
+
+section.landscape .entete .score p:first-child, section.landscape .entete .temps p:first-child {
+    display: block;
+    height: 60px;
+    vertical-align: middle;
+}
+
+section.landscape .entete .temps p:first-child {
+    margin-bottom: 10px;
+}
+
+section.landscape .entete .temps #title-time {
+    margin-top: 6px;
+}
+
+section.landscape .entete .logo {
+    width: 30%;
+    float: left;
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 6px;
+}
+
+section.landscape .conseil .banniere_balise {
+    line-height: 40px;
+    height: 40px;
+}
+
+section.landscape .conseil .indice_icone {
+    float: right;
+    margin-right: 6px !important;
+}
+
+section.landscape .conseil {
+    float: right;
+    width: 100%;
+}
+
+section.landscape .conseil #conseilHide, section.landscape .conseil p.valeur {
+    text-align: right;
+}
+
+section.landscape .boussole {
+    margin: 195px auto auto;
+}
+
+section.landscape #compass_elt {
+    margin-top: 67px;
+}
+
+section.landscape .informations_balise {
+    margin-top: -150px;
+}
+
+section.landscape #btn_pass, section.landscape #btn_flash {
+    width: 20%;
+}
+
+section.landscape #btn_pass {
+    float: left;
+    margin-left: 5%;
+}
+
+section.landscape #btn_flash {
+    float: right;
+    margin-right: 5%;
 }

www/index.html

@@ -129,15 +129,14 @@ <h3>Parcours :</h3>
             </div>
             <div class="temps">
                 <p><img src="img/partie/icone-temps.png" alt="temps"/></p>
-                <p>TEMPS</p>
+                <p id="title-time">TEMPS</p>
                 <p><strong><span class="valeur" id="timer"></span></strong></p>
             </div>
             <div class="conseil">
                 <p class="banniere_balise">BALISE <span id="numero_balise"></span>/<span id="nombre_balise"></span></p>
-                <strong><p class="valeur" style="color: green">Lorem ipsum sit amet, consectetur adipiscing elit.</p>
-                </strong>
                 <p class="indice_icone"><img src="img/partie/icone-indice.png" class="image_indice_icone" alt="indice"/></p>
                 <p id="conseilHide" class="indice_texte">INDICE CACHÉ <strong>50 m(minimum)</strong></p>
+                <strong><p class="valeur" style="color: green">Lorem ipsum sit amet, consectetur adipiscing elit.</p></strong>
             </div>
         </div>
 

www/js/App.js

@@ -14,7 +14,7 @@ var app = {
     indiceEntrepreneur: [],
     isTimerLoaded: false,
 
-// Initialisation cache les indices et affiche la vue actuelle
+    // Initialisation cache les indices et affiche la vue actuelle
     initialize: function () {
         $('.indice').hide();
 
@@ -135,6 +135,12 @@ var app = {
             startTimer();
         }
 
+        // Si le device est une tablette une ZenPad 10", la boussole est réglée pour être tenue en landscape
+        if (device.model == "P028") {
+            document.getElementById('compass').setAttribute('class', 'view landscape');
+            window.screen.orientation.lock('landscape');
+        }
+
         // Affiche le message (dist min 50m)
         document.getElementById('conseilHide').style['display'] = 'block';
         // Cache l'indice
@@ -164,8 +170,9 @@ var app = {
         cordova.plugins.barcodeScanner.scan(
             function (result) {
                 // Balise vide
-                if (result.text == '')
+                if (result.text == '') {
                     navigator.notification.confirm('Aucun code flashé', null, 'Resultat QR Code', ['OK']);
+                }
 
                 // Bonne balise
                 else if (result.text == markToFind) {
@@ -189,6 +196,8 @@ var app = {
 
     // Affiche la question d'une balise
     showQuestionView: function () {
+        window.screen.orientation.lock('portrait');
+
         this.team.nbMarksFind++;
 
         var q = this.infosParcours[this.currentMark]['Question'];
@@ -379,6 +388,8 @@ var app = {
 
     // Question sur l'entrepreneur mystère si on est sur la dernière balise
     showQuestionEntrepreneurView: function () {
+        window.screen.orientation.lock('portrait');
+
         this.team.nbMarksFind++;
 
         for (var i = 0; i < this.entrepreneurs.length; i++) {

www/js/class/Compass.js

@@ -55,9 +55,18 @@ var compass = {
             var angle = compass.data.actualPosition.bearingTo(compass.data.destination) - compass.data.heading.magneticHeading;
 
             // Gestion de la tablette 10" Asus ZenPad qui configure la boussole en format paysage.
+            /*
             if (device.model == "P028") {
                 angle = angle + 90;
             }
+            */
+
+            // envoyer uniquement un angle positif
+            /*
+            if(Math.sign(angle) === -1){
+                angle = 360+angle;
+            }
+            */
 
             rotate(Math.round(angle));
         }

www/js/functions.js

@@ -59,24 +59,21 @@ function startTimer() {
     }
 }
 
-var ancienAngle = null;
-var ancienneAngleBalise = null;
+var newAngle = 0;
+var actualAngle;
 
 // Rotate boussole
 function rotate(angle) {
-    if (ancienneAngleBalise == null) {
-        ancienneAngleBalise = app.currentMark;
-    }
-
-    if (ancienAngle == null || ancienneAngleBalise != app.currentMark) {
-        ancienAngle = angle
-    }
-
-    var newAngle = 0.5 * ancienAngle + 0.5 * angle;
 
-    $('#compass_elt').rotate(newAngle);
+    // algorithme pour empêcher l'aiguille de faire des tours complets lorsque du passage d'angles positifs à négatif
+    newAngle = newAngle || 0;
+    actualAngle = newAngle % 360;
+    if ( actualAngle < 0 ) { actualAngle += 360; }
+    if ( actualAngle < 180 && (angle > (actualAngle + 180)) ) { newAngle -= 360; }
+    if ( actualAngle >= 180 && (angle <= (actualAngle - 180)) ) { newAngle += 360; }
+    newAngle += (angle - actualAngle);
 
-    ancienAngle = newAngle;
+    $('#compass_elt').rotate(Math.round(newAngle));
 }
 
 var ancienneDistance = null;