Une règle à pixel en ligne faite en Javascript/CSS et avec du drag-and-drop

[ 16 ] Commentaires
Share

Je continue ma route dans la créations d’applications en python/javascript sur AppEngine avec maintenant une application de règle en ligne pour le développement Web et le graphisme. Là, l’idée était de ne pas avoir à installer une règle à pixel à chaque fois que l’on change d’ordinateur, mais d’en retrouver une sur le web où que l’on soit et que l’on aille. Malheureusement, ma recherche d’applications similaires sur le web s’étant révélée infructueuse, je me suis rendu à l’évidence qu’il fallait que j’en développe une moi-même (why not, après tout). C’est donc ce que j’ai fait. (Edit : d’ailleurs, grand bien m’en a pris, parce que Smashing Magazine m’avait fait un joli lien à l’époque).

Plusieurs choses :

Je voulais d’abord me limiter à une règle entourant la page (parce que je ne pensais pas avoir la possibilité technique d’aller plus loin), celle que l’on voit en jaune, qui est utilisable notamment en redimmensionant votre page web. C’était bien, mais déjà pas forcément très simple à gérer. En fait, j’aurais voulu que la partie centrale du tableau (celle qui contient la page web cible) aille jusqu’au bas de la page, mais je ne voyais pas comment faire ça (les conseils donné un peu partout sur le web de mettre un html,body{hright:100%;} n’ont pas fait grand chose pour améliorer ma situation). Donc au final j’ai choisis l’option de mettre une taille de départ (600px de haut pour la table) avec la possibilité, en haut à droite de la table, d’augmenter cette taille ou de la réduire pour pouvoir travailler sur une zone adaptée à chacun.

Ceci fait, je me suis dit qu’il pourrait vraiment être sympa de faire une règle en « drag and drop » au dessus de l’iframe, parce que cela permettrait vraiment d’avoir un comportement proche de ce que l’on a quand on utilise une règle à pixel sur son PC. A ma grande surprise, je n’ai quasiment pas eu de problème pour la réaliser. J’ai pris juste un élément flottant dans la page, qu’on fait bouger en modifiant en direct les valeurs de positionnement grâce au javascript.

L’évolution suivante a été d’implémenter le choix de l’unité de mesure au sein même de la règle. Avec un peu de Javascript changeant la propriété CSS de background, et un background différent par unité de mesure, ce problème a été réglé (bon, et un peu de KolourPaint pour adapter les règles horizontales à la verticale, mais c’est négligeable). Pour une meilleure lisibilité des différentes unités de mesure, j’ai rajouté un PNG un peu transparent permettant de rendre plus sombre le derrière des unités de mesure, et donc d’y voir plus clair.

Par contre, je n’ai toujours pas trouvé la façon dont je pourrais réaliser proprement un tour de 90° de la règle, parce que le code Javascript que j’essayais ne fonctionnait pas. En effet, pour implémenter les nouvelles valeurs de CSS (notamment pour le changement du background, ainsi que pour le changement de valeurs entre la hauteur et la largeur), il fallait récupérer celles en place, mais je n’arrivais pas à les récupérer proprement et à faire un tri à partir de ça.

Enfin, j’ai rajouté un lien permettant de rafraichir l’iframe en place, car celà permettait de travailler sur un même document avec les règles correctement positionnées, ce qui ne serait pas possible dans le cas d’un rechargement complet d’une page (car dans ce cas, les règles se remettent dans leur position d’origine).

Pour ceux qui ont la flemme d’aller tester l’outil, voici encadrés les éléments les plus importants :

Pour ce qui est du test de compatibilité, j’ai testé pour Chrome 5 et 6, ainsi que Firefox 3.6, mais rien de plus. Si vous avez d’autres navigateurs « acceptable » (Opera, Safari, Internet Explorer 7+), je suis preneur de feedbacks.

La règle à pixels est là.

Vous serez peut-être intéressé :

16 commentaires sur ce billet

  1. PSP dit :

    J’ai testé sous IE 7 et sous IE 8 et c’est bien moche comparé aux tests sous Chrome et Firefox =P

    Je t’ai fait un screen pour que tu vois ce que ça donne : http://themespsp.fr/wp-content/uploads/2010/07/drag-and-drop.png

    RépondreRépondre
  2. Louis dit :

    Humm, effectivement… Mais c’est « juste » la table qui semble foirer, le dragNDrop a l’air correct… Je vais tenter de regler ça ce soir oubdemin 😉 merci en tout cas !

    RépondreRépondre
  3. PSP dit :

    @Louis: Oui oui le dragNDrop fonctionne malgré le soucis présent sur le screen 😉
    Ralala, quelle daube ce IE ^^

    RépondreRépondre
  4. Louis dit :

    @steve: Oui oui, moi j’utilisais plutôt Gnome Screen Ruler ou Kruler, mais c’est dans le même genre. Le problème reste le même : tu as besoin de les installer !

    @PSP: Je viens d’essayer avec IE8 : effectivement, ça ne fonctionne pas. C’est définitivement de la marde.

    RépondreRépondre
  5. PSP dit :

    @Louis: Le viens de tester à l’instant sous IE 6 (hé oui, l’IE installé sur mon ordi est IE 6) et le résultat est exactement le même … C’est la qu’on voit que sur certains points, IE n’avance pas que ça soit la V6 ou la V8, le résultat est le même !

    RépondreRépondre
  6. Louis dit :

    Je viens de tester sur Safari & Opera, ça passe sans problème. C’est donc IE6/7/8 qui est définitivement de la merde (ce qu’on savait tous déjà).

    RépondreRépondre
  7. Anne A dit :

    Pardonnez-moi, mon français est de l’école secondaire. Amour de la fonction nombre de mots, pouvez-vous faire un nombre de caractères ainsi? Il serait grand pour une utilisation à tweet.

    RépondreRépondre
  8. Louis dit :

    @Anne A: Ah vrai dire, je n’ai rien compris.

    [English version] : I did not understood your comment. Don’t hesitate to comment in english, I’ll answer you in this langage as well 🙂

    RépondreRépondre
  9. PSP dit :

    @Louis: Si j’ai bien compris, il veut un compteur de caractères pour ne pas dépasser les 140 limités pour un tweet 😉

    RépondreRépondre
  10. Louis dit :

    @PSP: Je veux bien, c’est encore plus simple, mais en soit c’est pas supra utile vu que l’interface Web de Twitter fournit déjà ce service.

    RépondreRépondre
  11. PSP dit :

    Ouép je sais, fin c’est pour lui pas pour moi ^^
    Peut être il en aurait une autre utilité et twitter n’était qu’un exemple pour lui afin qu’on le comprenne, à voir 😉

    RépondreRépondre
  12. Louis dit :

    @PSP: Ah oui ça c’est possible. Boarf, je ferai un compteur de caractères 🙂 C’est pas ce qui est long.

    Par contre, je compte faire un truc pour twitter des URL proprement en ayant juste à entrer l’URL et à cliquer sur « Twiitter », mais faut que je comprenne comment fonctionne l’oauth de Twitter (et comment le faire fonctionner avec Google AppEngine), et ça c’est pas gagné.

    RépondreRépondre
  13. PSP dit :

    C’est vrai que c’est pas mal ton idée, bon courage !

    Tu pourrais même intégrer les URL courtes (shortlink) de wordpress 3 si tu arrive comme ça on évite de passer par un service externe 😉

    RépondreRépondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *