Exercices complémentaires pour ceux qui ont suivi le module option

Test sur device mobile de programmes de paint "adaptés" à de tels devices

Ajout d'une couche de compatibilité sur le paint du tutorial WWW2012

Maitenant nous allons regarder cet exemple présenté pendant le cours: l'éditeur HTML5 de "cadres" pour entreprises, sur le site http://www.renbyperadotto.com/ 

Testez ce logiciel en cliquant sur "créer votre ren" en bas à droite. Testez cette application depuis un ordinateur, puis depuis une tablette. Que remarquez-vous ? QUe ce soit à la souris ou en mode tactile, les fonctionnalités sont les mêmes. En effet, une couche d'émulation tactile -> souris a été intégrée, et des tags méta ont été ajoutés au début de la page HTML pour interdire un zoom à deux doigts (en revanche, on peut scroller le canvas central avec deux doigts).

Note : cet éditeur a été adapté (6 mois de travail) et intégré à l'outil de vente en ligne prestashop. Le point de départ est le  logiciel open source svg-edit, un éditeur svg disponible sur http://code.google.com/p/svg-edit/. Comparez les deux versions, vous verrez qu'un important travail d'adaptation/ergonomie/fiabilisation a été effectué.

Tag meta :

<!--  Michel Buffa : Interdiction du zoom a deux doigts -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"        />
<meta name="apple-mobile-web-app-capable" content="yes"        />

Et la couche d'émulation de la souris (qui transforme en gros des événements "touch" en évenement "mouse") :

IpadTouch.js (mais n'est pas spécifique à l'ipad à part pour les gestures à deux doigts) :

console.log("load ipadtouch.js");
$(function () {
    $.extend($.support, {
        touch: "ontouchend" in document
    });
    if ($.support.touch) {
        document.addEventListener("touchstart", iPadTouchHandler, false);
        document.addEventListener("touchmove", iPadTouchHandler, false);
        document.addEventListener("touchend", iPadTouchHandler, false);
        document.addEventListener("touchcancel", iPadTouchHandler, false);
        
        // Michel Buffa : pour traitement zoom/pinch/rotate ----------
        MBangle = 0;
        MBnewAngle;
        MBscale = 1;
        MBnewScale;
        
        document.addEventListener("gesturechange", getAngleAndScale, false);
        document.addEventListener("gestureend", saveChanges, false);
        // ------------------------------------------------------------

    }
});

//--------- Michel Buffa zoom/pinch/rotate -----------
function saveChanges() {
    MBangle = MBnewAngle;
    MBscale = MBnewScale;
}
function getAngleAndScale(e) {
    // Don't zoom or rotate the whole screen
    e.preventDefault();
    // Rotation and scale are event properties
    MBnewAngle = MBangle + e.rotation;
    MBnewScale = MBscale * e.scale;
    // Combine scale and rotation into a single transform
    var tString = "rotate(" + MBnewAngle + "deg) scale(" + MBnewScale + ")";
    //document.getElementById("theDiv").style.webkitTransform = tString;
    console.log("Gesture 2 doigts detectee : " + tString);
}
//----------------------------------------------------
var lastTap = null,
    tapValid = false,
    tapTimeout = null;

function cancelTap() {
    tapValid = false
}
var rightClickPending = false,
    rightClickEvent = null,
    holdTimeout = null,
    cancelMouseUp = false;

function cancelHold() {
    if (rightClickPending) {
        window.clearTimeout(holdTimeout);
        rightClickPending = false;
        rightClickEvent = null
    }
}
function startHold(a) {
    if (!rightClickPending) {
        rightClickPending = true;
        rightClickEvent = a.changedTouches[0];
        holdTimeout = window.setTimeout("doRightClick();", 800)
    }
}

function doRightClick() {
    rightClickPending = false;
    var a = rightClickEvent,
        b = document.createEvent("MouseEvent");
    b.initMouseEvent("mouseup", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
    a.target.dispatchEvent(b);
    b = document.createEvent("MouseEvent");
    b.initMouseEvent("mousedown", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 2, null);
    a.target.dispatchEvent(b);
    b = document.createEvent("MouseEvent");
    b.initMouseEvent("contextmenu", true, true, window, 1, a.screenX + 50, a.screenY + 5, a.clientX + 50, a.clientY + 5, false, false, false, false, 2, null);
    a.target.dispatchEvent(b);
    cancelMouseUp = true;
    rightClickEvent = null
}

function iPadTouchStart(a) {
    console.log("iPadTouchStart");
    var b = a.changedTouches[0],
        g = "mouseover",
        c = document.createEvent("MouseEvent");
    c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
    b.target.dispatchEvent(c);
    g = "mousedown";
    c = document.createEvent("MouseEvent");
    c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
    b.target.dispatchEvent(c);
    if (tapValid) {
        window.clearTimeout(tapTimeout);
        if (b.target == lastTap) {
            lastTap = null;
            tapValid = false;
            g = "click";
            c = document.createEvent("MouseEvent");
            c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
            b.target.dispatchEvent(c);
            g = "dblclick";
            c = document.createEvent("MouseEvent");
            c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
            b.target.dispatchEvent(c)
        } else {
            lastTap = b.target;
            tapValid = true;
            tapTimeout = window.setTimeout("cancelTap();", 600);
            startHold(a)
        }
    } else {
        lastTap = b.target;
        tapValid = true;
        tapTimeout = window.setTimeout("cancelTap();", 600);
        startHold(a)
    }
}

function iPadTouchHandler(a) {
    var b = "";
    if (!(a.touches.length > 1)) {
        switch (a.type) {
        case "touchstart":
            console.log("touchstart");
            if ($(a.changedTouches[0].target).is("select")) return;
            iPadTouchStart(a);
            a.preventDefault();
            return false;
        case "touchmove":
            console.log("touchmove");
            cancelHold();
            b = "mousemove";
            a.preventDefault();
            break;
        case "touchend":
            console.log("touchend");
            if (cancelMouseUp) {
                cancelMouseUp = false;
                a.preventDefault();
                return false
            }
            cancelHold();
            b = "mouseup";
            break;
        default:
            return
        }
        a = a.changedTouches[0];
        var g = document.createEvent("MouseEvent");
        g.initMouseEvent(b, true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
        a.target.dispatchEvent(g);
        if (b == "mouseup" && tapValid && a.target == lastTap) {
            g = document.createEvent("MouseEvent");
            g.initMouseEvent("click", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
            a.target.dispatchEvent(g)
        }
    }
};

Si on inclus ce fichier dans une programme qui reconnait des évenements souris, il devait réagir au touch de manière transparente. Notez au passage l'ajoute de la détection de gestures pinch and rotate via des évenements pour le moment réservés à IOS : "gesturestart" et "gestureend". Et aussi l'émulation du clic droit via un appui long avec le doigt.

Cela n'a pas été testé, mais normalement si vous incluez ce fichier, ainsi que la librairie jquery, dans le programme du paint de WWW2012 que vous avez fait tourner quelques section plus tot, vous devriez pouvoir faire fonctionner au moins le dessin à la fois à la souris et aux doigts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
<script type="text/javascript" src="IpadTouch.js"></script>

Travail pour vous occuper pendant la fin du TP

Augmenter l'interface du paint version WWW2012, essayer d'ajouter des éléments d'interface qui fonctionnent sur tablette.