Blog - tfe homepage https://tfeserver.fr/ Blog de tfe: Un peu de tout, linux, perl, libre, blender, scripts etc... Display html img with correct exif orientation Just find a small tip today. I am creating a image section for my website, and i just found that by default, html img tag display the image without looking at the exif-orientation information.

That cause the images taken from smartphones look wrong.

The tip consist in the following css code, to display correctly the image:


img {
     image-orientation: from-image;
}

Works fine in firefox, but it looks like chrome just sux at displaying it.

... ]]>
https://tfeserver.fr/blog/css-and-img-exif-orientation-displayed.html https://tfeserver.fr/blog/css-and-img-exif-orientation-displayed.html> Blog Sat, 16 Mar 2019 07:34:00 +0100
css media hover J'ai découvert le media query hover:hover, très pratique pour ne pas déclencher les animations sur les dispositifs ne supportant pas cet état.

Sur mobile par défaut, les :hover sont déclenchés des que le click est effectué sur l'element, ce qui n'est pas du tout pratique!


@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

De cette façon, le style ne sera appliqué que si l'element est vraiment survolé , et non cliqué.

... ]]>
https://tfeserver.fr/blog/media-query-hover.html https://tfeserver.fr/blog/media-query-hover.html> Blog Tue, 12 Mar 2019 04:11:00 +0100
Rclone Une petite trouvaille qui peut etre utile si on a besoin de cloner un dossier sur n'importe quel "cloud storage": rclone.

Tout comme son nom l'indique, ca marche comme rsync, mais avec n'importe quelle solution (amazon EC2, gogle drive, webdav, etc..)

... ]]>
https://tfeserver.fr/blog/rclone-rsync-cloud-storage.html https://tfeserver.fr/blog/rclone-rsync-cloud-storage.html> Blog Tue, 12 Mar 2019 04:09:00 +0100
Puzzle game - Début d'interface et niveaux Voila une nouvel billet de blog contenant l'avancée de mon jeu.

Étant en vacance cette semaine, j'ai pu avancer un petit peu. Les changements sont:

  • Ajout du "niveau 0 ", pour l'accueil. Les cubes bougent tout seul, et le menu est affiché
  • Differentes hauteurs de camera selon la complexité du niveau
  • Dès que l'on réussi un niveau, on passe au suivant :)

 

Comme d'habitude, les  sources sont disponibles.

... ]]>
https://tfeserver.fr/blog/threejs-puzzle-game-ui-wip.html https://tfeserver.fr/blog/threejs-puzzle-game-ui-wip.html> Blog Thu, 07 Mar 2019 07:47:00 +0100
Threejs - Résoudre le puzzle-cube Encore un billet montrant l'avancement de mon petit projet.

J'ai rajouté la détection à chaque mouvement d'une pièce pour savoir si le puzzle est résolu ou pas.

 

... ]]>
https://tfeserver.fr/blog/threejs-puzzle-solving.html https://tfeserver.fr/blog/threejs-puzzle-solving.html> Blog Tue, 19 Feb 2019 07:44:00 +0100
Alita - le film. wtf? Petit encart non informatique pour me pleindre :).

Parceque oui, Alita le film est joli, et franchement reussi niveau graphismes mais NON Alita ce n'est pas du tout ca.

 

On retiendra:

  • Que hugo n a pas d amis dans la bd
  • Que le gros mechant n est pas un depredateur sexuel n attaquant que les filles. Non non et non! C est un psicopathe qui bouffe des cerveaux!!
  • Que ce n est pas Alita qui trouve le corps de berzerker mais le docteur
  • Que alita n est cense faire du motoroball qu apres la mort d hugo...
  • La fille du maitre des chiens inexistante??
  • L assistant du docteur est cense etre gros et gras
  • Le docteur n a pas de femme. C est quoi cette histoire??
  • Le docteur a la marque de zalem
  • Alita ne se souvient pas si bien de son passe si tot.

 

Bref... copie a revoir!

... ]]>
https://tfeserver.fr/blog/alita-le-film-wtf.html https://tfeserver.fr/blog/alita-le-film-wtf.html> Blog Sat, 16 Feb 2019 02:04:00 +0100
Threejs - diviser une image en plusieurs textures Petite mise à jour sur l'avancement de mon petit "projet" actuel.

Comme signalé sur mes billets précédents, j'arrive bien à faire tourner le cube pour le faire se déplacer. Restait maintenant à lui appliquer la texture qui va bien.

 

L'idée de base est d'avoir une grande image à reproduire, et plusieurs cube se partageant cette image comme texture.

 

Comme d'habitude, les  sources sont disponibles.

 

... ]]>
https://tfeserver.fr/blog/threejs-cube-texture.html https://tfeserver.fr/blog/threejs-cube-texture.html> Blog Fri, 08 Feb 2019 08:34:00 +0100
Threejs - two cubes moving Well, i am starting to have something!

I can now initiate instances of cubes, and bind them to different keys.

To have some hits about how it is done, you can read the sources, sure, but here is the big part:

The server is serving the client commands, wich looks like:


    { "command": "add", "id":"floor","type":"plane", "position": [ 0,0,0],  "rotation":[0,0,0], "width":200, "height":200, "color": "#b0b0b0" },

    { "command": "add", "id":"floorgrid","type":"grid", "position": [ 0,0,0], "rotation":[90,0,0], "divisions": 20,  "size":200, "color": "#000000" },

    { "command": "loadjs", "file":"js/characters/square.js"},

    { "command": "loadjs", "file":"levels/puzzle/logic.js"}


The square.js file define the "squre" object, wich is the moveable cube.

And on the logic.js  file, the magic!

(function(ux)
{
    var square1 = new square();
    square1.init({x :0, y:0 });
    // Bindings: should go elsewhere
    ux.unbindall();

    ux.bind('a', square1.trigger_move.bind(this,'left'));
    ux.bind('d', square1.trigger_move.bind(this,'right'));
    ux.bind('w', square1.trigger_move.bind(this,'top'));
    ux.bind('s', square1.trigger_move.bind(this,'bottom'));

    var square2 = new square();
    square2.init({x :1, y:0 });
    ux.bind('h', square2.trigger_move.bind(this,'left'));
    ux.bind('l', square2.trigger_move.bind(this,'right'));
    ux.bind('k', square2.trigger_move.bind(this,'top'));
    ux.bind('j', square2.trigger_move.bind(this,'bottom'));
})(this);

Preview:

 

... ]]>
https://tfeserver.fr/blog/threejs-two-cubes-moving.html https://tfeserver.fr/blog/threejs-two-cubes-moving.html> Blog Fri, 01 Feb 2019 09:19:00 +0100
Threejs multiplayer test 1 This is a game i am developing with Threejs and Web sockets, basically to learn web sockets, and use javascript classes.

Nothing crazy to see right now, only a multiplayer counter wich increments/decrements while the players are connecting to the webpage.

 

 

As always, the sources are public, and available on framagit.

... ]]>
https://tfeserver.fr/blog/threejs-multiplayer-test1.html https://tfeserver.fr/blog/threejs-multiplayer-test1.html> Blog Sun, 27 Jan 2019 12:11:00 +0100
Deepmind Starcraft! Apparemment, l'IA de google a continué à evoluer, et cette fois-ci elle s'attaque à Starcraft2, rien que ça!

Il va faloir regarder le live demain pour voir ce que ça donne!

Rendez vous:

 

... ]]>
https://tfeserver.fr/blog/deepmind-starcraft2.html https://tfeserver.fr/blog/deepmind-starcraft2.html> Blog Wed, 23 Jan 2019 11:51:00 +0100