29
mars
2018

Proposition de nouvelle media-query : regarder un site web le 30 du mois pendant une pleine lune en faisant face au Nord-Est et en faisant des squats

Technique - par Goufalite - 4034 hits

J'ai découvert récemment les nouvelles media-queries version 5 qui proposent des mises en situation qui dépassent la taille ou l'orientation de l'écran. On parle par exemple de la gestion de la luminosité ou si la page contient des scripts. En cette période propice je propose donc une nouvelle media-query qui gère les gens qui font des squats le 30 du mois en faisant face au Nord-Est pendant la pleine lune, un public très souvent oublié !

Un media-query, c'est quoi ?

Quand les téléphones portables capables d'afficher un site web sont arrivés, les webmasters ont dû s'adapter pour aider les développeurs à ne pas s'arracher les cheveux. L'idée était de récupérer via Javascript la taille de l'écran et d'adapter le style en fonction.

Avec les media-queries, en quelques lignes on peut imposer des règles de style CSS en fonction d'une certaine configuration :

/* �cran d'ordintateur */ @media screen { div { width:100%; } } /* imprimante */ @media print { div { width:50%; } } /* �cran de moins de 480 pixels de long */ @media max-width:480px { div { width:30%; } }

L'idée est donc d'avoir une balise permettant d'afficher le site dans la circonstance que j'ai décrit dans le titre, elle aurait donc pour titre :

on30thfullmoonfacingnewhilesquatting

Poisson d'Avr... quoi ?!?

Bien entendu cette media-query n'existe pas, mais on a tout ce qu'il faut en Javascript pour la réaliser

Mise en application

En ce mois d'Avril 2018, la pleine Lune arrive le 30 du mois, et bon, j'aime faire des squats le soir quand je rentre afin de rester en forme, et il s'avère que mon équipement sportif est disposé de telle sorte à ce que sois dirigé vers le Nord-Est. Il est donc important que je puisse regarder mes sites web préférés dans ces conditions !

Le 30	Attente de démarrage
Pleine lune	Attente de démarrage
Face au N-E	Attente de démarrage
En faisant des squats	Attente de démarrage

Le 30 du mois

Javascript gère très bien les dates, mais pas le formattage...

(new Date()).getDate()==30;

Pendant la pleine lune

~~Un peu plus difficile~~ En fait c'est le bordel ! La Lune n'est pas en orbite fixe donc les phases ne sont pas cycliques dans le temps. Le mieux est d'utiliser une API permettant de récupérer cette information comme wunderground par exemple. Pour le besoin de cet exercice, on va faire de l'approximation : chaque pleine Lune arrive tous les 29.530588853 jours (à peu près), il suffit de compter le temps passé entre la dernière pleine Lune (le 02 Mars à 1:51) et faire un modulo de cette période.

date = (new Date()).getTime(); lastFullMoon = (new Date("2018-03-02 01:51")).getTime(); cycle = 2551442.8768992; // 29.530588853 jours * 86400 secondes // 0 => pleine lune, 50 => nouvelle lune ageOfMoon = (((date-lastFullMoon)/1000)%cycle)/cycle *100

Faisant face au Nord-Est

Petite contrainte en approche : il faut que l'appareil qui lise le site web ait une boussole. On peut le vérifier et exploiter le résultat qui sera sous forme d'angle.

if (window.DeviceOrientationAbsoluteEvent) { // position plus pr�cise, mais pas g�n�rique window.addEventListener('deviceorientationabsolute', processOrientation, false); } else if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', processOrientation, false); } else { // pas d'orientation possible ! } function processOrientation(event) { where = ""; //l'angle est invers� sur mon t�l�phone angle = (360 - event.alpha)%360; valid[2].isValid = false; if (angle < 78.75 || angle > 281.25) { where = " Nord"; } else if (angle > 101.25 && angle < 258.75) { where = " Sud"; } if (angle > 11.25 && angle < 168.75) { where += " Est"; } else if (angle >191.25 && angle < 348.75) { where += " Ouest"; } }

En train de faire des squats

Alors là ça se complique ! Il faut que l'appareil fasse des mouvement continus de haut en bas, et occasionnellement qu'il ait un accéléromètre. Comme pour la boussole on va vérifier ça avant, ensuite il faudra construire un algorithme afin de détecter les mouvements et en déduire une répétition... Malheureusement pour compliquer le tout, l'appareil est en accélération permanente même à l'arrêt à cause de la gravité terrestre !

Pour simplifier le problème, on va prendre l'accélération sur l'axe d'altitude de l'appareil et en étudier la variation.

if(window.DeviceMotionEvent) { window.addEventListener("devicemotion", processMotion, false); } else { // impossible de mesurer le mouvement } function processMotion(event) { date = (new Date().getTime()); newval = event.acceleration.y; if (newval < -1 || newval > 1) { change = newval > lastval ? "i":"d"; lasttime = date; } if (date-lasttime > 3000) { times = [lasttime]; times.push(date); lasttime = date; rendertable(); } if (change != lastchange) { times.push(date); if (times.length > 20) { times.shift(); } rendertable(); } lastval = newval; lastchange = change; } function rendertable() { moy1 = []; totalmoy = 0; if (times.length > 1) { for (i = 1; i< times.length; i++) { diff = times[i]-times[i-1]; moy1.push(diff); totalmoy += diff; } truemoy = totalmoy/moy1.length; date = (new Date()).getTime(); if (truemoy >= 3000) { text = "Bah alors ?"; } else if (truemoy > 1000) { text = "Trop lent !"; } else if (truemoy < 300) { text = "Continue comme �a !"; } else { text = "Allez du nerf !"; } } }

Vous pourrez trouver le code de ce programme sur mon Github, et si vous avez des propositions d'améliorations simples (ne pas tout réécrire ;)) vous pouvez le proposer en pull request.

Conclusion

Quelqu'un a dit un jour : aujourd'hui on teste la robustesse d'un appareil uniquement avec le navigateur web. Et on peut voir que de plus en plus de fonctionnalités sont accessibles aux browsers, il suffit juste d'attendre un peu pour les voir arriver dans nos poches.

Et un jour, vous pourrez dire que votre téléphone fait le café !

Vous pouvez aussi lire :

[Technique] Pourquoi je ne rends pas mon site compatible mobile (du 20/08/2015)
[Technique] Décorez votre PC pour Noël en Javascript (du 09/12/2010)
[Technique] Trajet optimum avec l'API Tisseo (du 16/07/2019)
[Technique] Etre daltonien dans une équipe (du 01/12/2017)
[Technique] Mettre à jour mes 25 mots de passe, mais bien sûr ! (du 28/03/2016)

Goufalite - Site Web - Steam - Twitter

R�dacteur et programmeur principal du Goufablog. Ing�nieur de profession et avide de connaissances technologiques et scientifiques il partage son savoir � travers ces diff�rents articles. Plus de renseignements sur la page de contact.