DOM gestures and manipulations complete code
Collapse the table of content
Expand the table of content

DOM gestures and manipulations complete code (HTML)

This topic provides the complete code sample used in Quickstart: Pointers.

This topic contains these sections:

Download location

This sample is not available for download.

Technologies

Programming languagesC++
Programming modelsWindows Runtime

Requirements

Minimum supported clientWindows 8
Minimum supported serverWindows Server 2012
Minimum required SDKMicrosoft Visual Studio Express 2012 for Windows 8

View the code ()

default.css


body {
    overflow: hidden;
    position: relative;
}

div #targetContainer {
/*
Set the width and height properties of the target container to fill the viewport. 
You can set these properties to 100%, but we use 100vw (viewport width) and 100vh (viewport height).
See http://go.microsoft.com/fwlink/?LinkID=301480 for more detail on CSS units supported by Internet Explorer.
*/
    height: 100vw;
    width: 100vh;
    overflow: hidden;
    position: absolute;
}

div #colorMixer {
/*
A manipulation-blocking element is defined as an element that explicitly 
blocks direct manipulation via declarative markup, and instead fires gesture 
events such as MSGestureStart, MSGestureChange, and MSGestureEnd.
*/
    touch-action: none;
    -ms-transform-origin: 0px 0px;
    position: absolute;
    background-color: black;
    border-color: white;
    border-width: thick;
    border-style: solid;
}

div #colorSelector {
    position: relative;
}

div #eventLog {
    -ms-overflow-style:scrollbar;
}

input.Red {
    background-color: rgb(255,0,0);
}

input.Green {
    background-color: rgb(0,255,0);
}

input.Blue {
    background-color: rgb(0,0,255);
}


default.html


<html>
<head>
    <meta charset="utf-8" />
    <title>PointerInput</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- BasicGesture references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div class="TargetContainer" id="targetContainer">
        <div id="colorMixer">
            <input type="radio" name="color" value="R" title="Red" id="red" class="Red" /><label for="red" id="labelRed">Red</label>
            <input type="radio" name="color" value="G" title="Green" id="green" class="Green" /><label for="green" id="labelGreen">Green</label>
            <input type="radio" name="color" value="B" title="Blue" id="blue" class="Blue" /><label for="blue" id="labelBlue">Blue</label>
            <div id="targetLog"></div>
            <div id="eventLog"></div>
        </div>
    </div>
</body>
</html>


default.js


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                initialize();
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    var _width = 640;
    var _height = 640;

    var _pointerInfo;
    var _targetLog;

    var _selectedColor;
    var _colorRed, _colorGreen, _colorBlue;

    // Color-specific data object.
    //   value: The color value (r, g, or b)
    //   rotation: The rotation value used to calculate color value.
    //   matrix: The transform matrix of the target.
    function colorInfo(value, rotation, matrix) {
        this.value = value;
        this.rotation = rotation;
        this.matrix = matrix;
    }

    function initialize() {
        // Configure the target.
        setTarget();

        // Initialize color tracking.
        setColors();
    }

    // Configure the interaction target.
    function setTarget() {
        //  Set up the target position, size, and transform.
        colorMixer.style.width = _width + "px";
        colorMixer.style.height = _height + "px";
        colorMixer.style.msTransform = (new MSCSSMatrix()).
            translate((window.innerWidth - parseInt(colorMixer.style.width)) / 2.0,
            (window.innerHeight - parseInt(colorMixer.style.height)) / 2.0);

        // Create gesture recognizer.
        var msGesture = new MSGesture();
        msGesture.target = colorMixer;
        colorMixer.gesture = msGesture;
        // Expando property for handling multiple pointer devices.
        colorMixer.gesture.pointerType = null;

        // Expando property to track pointers.
        colorMixer.pointers = [];

        // Declare event handlers.
        colorMixer.addEventListener("pointerdown", onPointerDown, false);
        colorMixer.addEventListener("pointerup", onPointerUp, false);
        colorMixer.addEventListener("pointercancel", onPointerCancel, false);
        colorMixer.addEventListener("lostpointercapture", onLostPointerCapture, false);
        colorMixer.addEventListener("MSGestureChange", onMSGestureChange, false);
        colorMixer.addEventListener("MSGestureTap", onMSGestureTap, false);
        colorMixer.addEventListener("MSGestureEnd", onMSGestureEnd, false);
        colorMixer.addEventListener("MSGestureHold", onMSGestureHold, false);
    }

    // Initialize values and event listeners for color tracking.
    function setColors() {
        var m = new MSCSSMatrix(colorMixer.style.msTransform);
        _colorRed = new colorInfo(0, 0, m);
        _colorGreen = new colorInfo(0, 0, m);
        _colorBlue = new colorInfo(0, 0, m);

        document.getElementById("red").addEventListener("click", onColorChange, false);
        document.getElementById("green").addEventListener("click", onColorChange, false);
        document.getElementById("blue").addEventListener("click", onColorChange, false);
    }

    // Re-draw target based on transform matrix associated with color selection.
    function onColorChange(e) {
        switch (e.target.id) {
            case "red":
                colorMixer.style.msTransform = _colorRed.matrix;
                break;
            case "green":
                colorMixer.style.msTransform = _colorGreen.matrix;
                break;
            case "blue":
                colorMixer.style.msTransform = _colorBlue.matrix;
                break;
        }
        _selectedColor = e.target.id;

        eventLog.innerText = "Color change";
        targetLog.innerText = colorMixer.style.msTransform;
    }
    // Pointer down handler: Attach the pointer to a gesture object.
    function onPointerDown(e) {
        // Do not attach pointer if no color selected.
        if (_selectedColor === undefined)
            return;
        _selectedColor = getSelectedColor();

        // Process pointer.
        if (e.target === this) {
            this.style.borderStyle = "double";
            //  Attach first contact and track device.
            if (this.gesture.pointerType === null) {
                this.gesture.addPointer(e.pointerId);
                this.gesture.pointerType = e.pointerType;
            }
                // Attach subsequent contacts from same device.
            else if (e.pointerType === this.gesture.pointerType) {
                this.gesture.addPointer(e.pointerId);
            }
                // New gesture recognizer for new pointer type.
            else {
                var msGesture = new MSGesture();
                msGesture.target = e.target;
                e.target.gesture = msGesture;
                e.target.gesture.pointerType = e.pointerType;
                e.target.gesture.addPointer(e.pointerId);
            }
        }
        eventLog.innerText = "Pointer down";
    }

    // Get the current color.
    function getSelectedColor() {
        var colorSelection = document.getElementsByName("color");
        for (var i = 0; i < colorSelection.length; i++) {
            if (colorSelection[i].checked)
                return colorSelection[i].id;
        }
    }

    // Gesture change handler: Process gestures for translation, rotation, and scaling.
    // For this example, we don't track pointer movements.
    function onMSGestureChange(e) {
        // Get the target associated with the gesture event.
        var elt = e.gestureObject.target;
        // Get the matrix transform for the target.
        var matrix = new MSCSSMatrix(elt.style.msTransform);

        // Process gestures for translation, rotation, and scaling.
        e.target.style.msTransform = matrix.
            translate(e.offsetX, e.offsetY).
            translate(e.translationX, e.translationY).
            rotate(e.rotation * 180 / Math.PI).
            scale(e.scale).
            translate(-e.offsetX, -e.offsetY);

        // Mix the colors based on rotation value.
        switch (_selectedColor) {
            case "red":
                _colorRed.rotation += ((e.rotation * 180 / Math.PI));
                _colorRed.rotation = _colorRed.rotation % 360;
                targetLog.innerText = _colorRed.rotation.toString();
                if (_colorRed.rotation >= 0)
                    _colorRed.value = parseInt(Math.abs(_colorRed.rotation) * (256 / 360));
                else
                    _colorRed.value = parseInt((360 - Math.abs(_colorRed.rotation)) * (256 / 360));
                document.getElementById("labelRed").innerText = _colorRed.value.toString();
                _colorRed.matrix = matrix;
                break;
            case "green":
                _colorGreen.rotation += ((e.rotation * 180 / Math.PI));
                _colorGreen.rotation = _colorGreen.rotation % 360;
                targetLog.innerText = _colorGreen.rotation.toString();
                if (_colorGreen.rotation >= 0)
                    _colorGreen.value = parseInt(Math.abs(_colorGreen.rotation) * (256 / 360));
                else
                    _colorGreen.value = parseInt((360 - Math.abs(_colorGreen.rotation)) * (256 / 360));
                document.getElementById("labelGreen").innerText = _colorGreen.value.toString();
                _colorGreen.matrix = matrix;
                break;
            case "blue":
                _colorBlue.rotation += ((e.rotation * 180 / Math.PI));
                _colorBlue.rotation = _colorBlue.rotation % 360;
                if (_colorBlue.rotation >= 0)
                    _colorBlue.value = parseInt(Math.abs(_colorBlue.rotation) * (256 / 360));
                else
                    _colorBlue.value = parseInt((360 - Math.abs(_colorBlue.rotation)) * (256 / 360));
                document.getElementById("labelBlue").innerText = _colorBlue.value.toString();
                _colorBlue.matrix = matrix;
                break;
        }
        e.target.style.backgroundColor = "rgb(" + _colorRed.value + ", " + _colorGreen.value + ", " + _colorBlue.value + ")";
        targetLog.innerText = e.target.style.msTransform;
        eventLog.innerText = "Gesture change";
    }

    // Tap gesture handler: Display event.
    // The touch language described in Touch interaction design (http://go.microsoft.com/fwlink/?LinkID=268162),
    // specifies that the tap gesture should invoke an elements primary action (such as launching an application 
    // or executing a command). 
    // The primary action in this sample (color mixing) is performed through the rotation gesture.
    function onMSGestureTap(e) {
        eventLog.innerText = "Gesture tap";
    }

    // Gesture end handler: Display event.
    function onMSGestureEnd(e) {
        if (e.target === this) {
            this.style.borderStyle = "solid";
        }
        eventLog.innerText = "Gesture end";
    }

    // Hold gesture handler: Display event.
    function onMSGestureHold(e) {
        eventLog.innerText = "Gesture hold";
    }

    // Pointer up handler: Display event.
    function onPointerUp(e) {
        eventLog.innerText = "Pointer up";
    }

    // Pointer cancel handler: Display event.
    function onPointerCancel(e) {
        eventLog.innerText = "Pointer canceled";
    }

    // Pointer capture lost handler: Display event.
    function onLostPointerCapture(e) {
        eventLog.innerText = "Pointer capture lost";
    }
    app.start();
})();


 

 

Show:
© 2016 Microsoft