![]() Geek, nouvelles technologies, société et jeux vidéos! | |||||||||||||
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 applicationEn 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 du moisJavascript gère très bien les dates, mais pas le formattage... (new Date()).getDate()==30;
Pendant la pleine lune
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-EstPetite 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 squatsAlors 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. ConclusionQuelqu'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 :
![]() 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. ![]()
|
![]() |
||||||||||||
|
Votre avis?