Static gestures complete code (Windows)

0 out of 3 rated this helpful - Rate this topic

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

This topic contains these sections:

Download location
Technologies
Requirements
View the code ()

Download location

This sample is not available for download.

Technologies

Programming languages	C++
Programming models	Windows Runtime

Requirements

Minimum supported client	Windows 8
Minimum supported server	Windows Server 2012
Minimum required SDK	Microsoft Visual Studio Express 2012 for Windows 8

View the code ()

default.css

JavaScript


body {
/*
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.
*/
    overflow: hidden;
    position: absolute;
    font-family: 'Segoe UI';
    font-size: small;
    -ms-touch-action: none;
    background-color: black;
}

div #targetContainer {
    position: relative;
    height: fill-available;
    width: fill-available;
}

div #inputBox {
    position: relative;
    width: 640px;
    height: 640px;
    color: black;
    overflow: hidden;
    background-color: darkgrey;
    margin: 0px;
    padding: 0px;
    border-width: 1px;
    border-color: white;
    border-style: solid;
}

div #instructions {
    position: relative;
    width: 100%;
    height: fit-content;
    color: black;
    background-color: white;
    visibility: visible;
}

div #questions {
    position: relative;
    width: 100%;
    height: fit-content;
    color: white;
    background-color: black;
    visibility: visible;
}

div #answers {
    position: relative;
    width: 100%;
    height: fit-content;
    color: white;
    background-color: black;
    visibility: visible;
}

div #clues {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: DimGray;
}

div #timerBox {
    background-color: red;
    color: black;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 20px;
    text-align: center;
}

div #answerFloater {
    position: absolute;
    visibility: hidden;
    top: 0px;
    left: 0px;
    background-color: blue;
}

div #eventLog {
    font-size: xx-small;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 640px;
    height: 50px;
    overflow: auto;
    overflow-style: auto;
}

default.html

HTML


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

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.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="inputBox">
            <div id="instructions">Tap gray box below: Double tap to start questions, tap for next question, press and hold to show clues.</div>
            <div id="questions">&nbsp;</div>
            <div id="answers">
                <label for="answer">Answer:</label>
                <input type="text" id="answer" maxlength="30" size="30" style="z-index:1" />
                <button id="submit">Submit</button>
                <button id="stumped">Stumped</button>                
            </div>
            <div id="clues">

            </div>
            <div id="timerBox"></div>
        </div>
        <div id="eventLog"></div>

        <div id="answerFloater">
            <p>Show answer?</p>
            <button id="yes">Yes</button>
            <button id="no">No</button>
        </div>
    </div>
</body>
</html>

default.js

JavaScript


"use strict";
var _applicationData;
var _localSettings;
var _data;
var _inputBox;
var _instructions;
var _answers;
var _questions;
var _clues;
var _eventLog;
var _eventLog;
var _floater;


function initialize() {

    // Load xml data from file into local app settings.
    dataObject.initialize();
    _data = dataObject.getData();

    // Get our UI objects.
    _inputBox = document.getElementById("inputBox");
    _instructions = document.getElementById("instructions");
    _questions = document.getElementById("questions");
    _answers = document.getElementById("answers");
    _clues = document.getElementById("clues");
    _eventLog = document.getElementById("eventLog");
    _floater = document.getElementById("answerFloater");

    // Configure the target.
    setTarget();

}

// Configure the interaction target.
function setTarget() {
    //  Set the position of the input target.
    var inputLeft = (window.innerWidth - _inputBox.clientWidth) / 2.0;
    var inputTop = (window.innerHeight - _inputBox.clientHeight) / 2.0;
    var transform = (new MSCSSMatrix()).translate(inputLeft, inputTop);
    _inputBox.style.msTransform = transform;

    // Set the position of the event log.
    transform = (new MSCSSMatrix()).translate(inputLeft, inputTop + _inputBox.clientHeight);
    _eventLog.style.msTransform = transform;

    // Associate interaction target with our input manager.
    // Scope input to clue area only.
    _clues.inputManager = new inputManager(_clues);
}


// inputManager handles gesture recognition for this sample.
function inputManager(target) {
    var questionsStarted = false;
    var tapCount = 0;
    var questionTotal = _data.selectNodes("questions/question").length;
    var clueCount = 0;
    var doubleTap = false;
    var startTime;
    var clueTimer;
    var intervalTimerId;

    // Initialize the gesture recognizer.
    var gr = new Windows.UI.Input.GestureRecognizer();

    // Turn off visual feedback for gestures.
    // Visual feedback for pointer input is still displayed. 
    gr.showGestureFeedback = false;

    // Configure gesture recognizer to process the following:
    // double tap               - start questions and timer.
    // tap                      - move to next question.
    // right tap                - show answer.
    // hold and hold with mouse - start clues.
    gr.gestureSettings =
        Windows.UI.Input.GestureSettings.tap |
        Windows.UI.Input.GestureSettings.doubleTap |
        Windows.UI.Input.GestureSettings.rightTap |
        Windows.UI.Input.GestureSettings.hold |
        Windows.UI.Input.GestureSettings.holdWithMouse;

    // Register event listeners for these gestures.
    gr.addEventListener('tapped', tappedHandler);
    gr.addEventListener("holding", holdingHandler);
    gr.addEventListener("righttapped", rightTappedHandler);

    // Register event listeners for DOM pointer events.
    // The event pointer(s) are passed to the gesture recognizer
    // for further processing.
    target.addEventListener('MSPointerDown', pointerDown, false);
    target.addEventListener('MSPointerMove', pointerMove, false);
    target.addEventListener('MSPointerUp', pointerUp, false);
    target.addEventListener("MSPointerOver", pointerOver, true);
    target.addEventListener("MSPointerOut", pointerOut, true);

    // The following functions are registered to handle DOM pointer events

    // Basic pointer handling to highlight input area.
    function pointerOver(evt) {
        _eventLog.innerText += "pointer over || ";
        evt.target.style.backgroundColor = "DarkGray";
    }
    function pointerOut(evt) {
        _eventLog.innerText += "pointer out || ";
        evt.target.style.backgroundColor = "DimGray";
    }

    // Handle the pointer down event.
    function pointerDown(evt) {
        _eventLog.innerText += "pointer down || ";

        // Hide the floater if visible.
        _floater.style.visibility = "hidden";

        // Get the PointerPoint for the pointer event.
        var pp = evt.currentPoint;

        // Get whether this pointer down event is within
        // the time threshold for a double tap.
        doubleTap = gr.canBeDoubleTap(pp);

        // Pass the PointerPoint to the gesture recognizer.
        gr.processDownEvent(pp);
    };

    // Handle the pointer move event.
    // The holding gesture is routed through this event.
    // If pointer move is not handled, holding will not fire.
    function pointerMove(evt) {
        //_eventLog.innerText += "pointer move || ";

        // Get intermediate PointerPoints
        var pps = evt.intermediatePoints;

        // Pass the array of PointerPoints to the gesture recognizer.
        gr.processMoveEvents(pps);
    };

    // Handle the pointer up event.
    function pointerUp(evt) {
        _eventLog.innerText += "pointer up || ";

        // Get the current PointerPoint
        var pp = evt.currentPoint;

        // Pass the PointerPoint to the gesture recognizer.
        gr.processUpEvent(pp);
    };

    // The following functions are registered to handle gesture events.

    // This handler processes taps and double taps.
    // Potential double taps are identified in the pointer down handler.
    function tappedHandler(evt) {
        // Single tap and questions started: Display next question.
        if (!doubleTap && questionsStarted) {
            _eventLog.innerText += "tapped || ";
            _instructions.innerText = "Double tap to stop questions.";
            _clues.innerText = "";
            tapCount++;
            if (tapCount > questionTotal) {
                _questions.innerText = "No more questions.";
            } else {
                var xpath = "questions/question[" + (tapCount % (questionTotal + 1)) + "]/q";
                // Read data from a simple setting
                _questions.innerText = _data.selectSingleNode(xpath).innerText;
            }
        }
        // Single tap and questions not started: Don't do much.
        else if (!doubleTap && !questionsStarted) {
            _eventLog.innerText += "tapped || ";
            _instructions.innerText = "Double tap to start questions.";
        }
        // Double tap and questions not started: Display first question.
        else if (doubleTap && !questionsStarted) {
            _eventLog.innerText += "double-tapped || ";
            // Return if last question displayed.
            if (tapCount > questionTotal) {
                _questions.innerText = "No more questions.";
                return;
            }
            // Start questions.
            questionsStarted = true;
            _instructions.innerText = "Starting questions (double tap to stop questions).";

            // Question number is based on tap count.
            tapCount++;

            // Select question from XML data object.
            var xpath = "questions/question[" + (tapCount % (questionTotal + 1)) + "]/q";
            _questions.innerText = _data.selectSingleNode(xpath).innerText;

            // Display a basic timer once questions started.
            startTime = new Date().getTime();
            intervalTimerId = setInterval(displayTimer, 100);
        }
        // Double tap and questions started: Stop questions and timer.
        else if (doubleTap && questionsStarted) {
            _eventLog.innerText += "double-tapped || ";
            _instructions.innerText = "Questions stopped (double tap to start questions).";
            questionsStarted = false;
            clearInterval(intervalTimerId);
        }
    };

    // For this app, we display a basic timer once questions start.
    // In a more robust app, could be used for achievements.
    function displayTimer() {
        var x = new Date().getTime();
        timerBox.innerText = (x - startTime) / 1000;
    }

    // This handler processes right taps.
    // For all pointer devices a right tap is fired on
    // the release of a press and hold gesture.
    // For mouse devices, righttapped is also fired on a right button click.
    // For pen devices, 
    function rightTappedHandler(evt) {
        if (!questionsStarted) {
            return;
        }
        var transform = (new MSCSSMatrix()).
            translate(
            (window.innerWidth - _inputBox.clientWidth) / 2.0 + evt.position.x,
            (window.innerHeight - _inputBox.clientHeight) / 2.0 + evt.position.y);
        _floater.style.visibility = "visible";
        _floater.style.msTransform = transform;
        eventLog.innerText = "right-tap || ";
    }

    // A holding event is fired approximately one second after 
    // a pointer down if no subsequent movement is detected.
    // Handle the pointer move event.
    // The holding gesture is routed through this event.
    // If pointer move is not handled, holding will not fire.
    function holdingHandler(evt) {
        if (!questionsStarted)
            return;
        if (evt.holdingState == Windows.UI.Input.HoldingState.started) {
            _eventLog.innerText += "holding || ";
            clueManager.initialize(tapCount);
        } else if (evt.holdingState == Windows.UI.Input.HoldingState.completed) {
            clueManager.destroy();
            _eventLog.innerText += "holding completed || ";
        } else {
            _eventLog.innerText += "holding canceled || ";
        }
    }

};

var clueManager = (function () {
    var that = {};
    var clueTimerId;

    that.initialize = function (tapCount) {
        var clue;
        var clueCount = 0;
        var clueCollection = _data.selectNodes("questions/question[" + tapCount + "]/clues/clue");

        clueTimerId = setInterval(function () {
            clueCount++;

            if (clueCount > clueCollection.length) {
                _clues.innerText += "\nNo more clues.";
                clearInterval(clueTimerId);
                return;
            }

            if (clueCount == 1)
                clue = clueCollection.first();

            _clues.innerText += "\n" + clue.current.innerText;
            clue.moveNext();
        }, 2000);
    }

    that.destroy = function () {
        clearInterval(clueTimerId);
    }
    return that;
})();

var dataObject = (function () {
    var that = {};
    var applicationData = Windows.Storage.ApplicationData.current;
    var localSettings = applicationData.localSettings;
    that.initialize = function () {
        // This sample uses data/data.xml (Assume valid, set file properties: Package Action - Content / Copy to Output Directory - Always)
        // Use default load settings.
        Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("data").then(function (dataFolder) {
            dataFolder.getFileAsync("data.xml").then(function (dataFile) {
                Windows.Data.Xml.Dom.XmlDocument.loadFromFileAsync(dataFile).then(function (data) {
                    // Create a simple setting
                    try {
                        localSettings.values["data"] = data.getXml();
                    } catch (e) {
                        _eventLog.innerText += e.description;
                    }

                }, function (error) {
                    _eventLog.innerText += "Error: Unable to load XML file";
                });
            }, function (error) {
                _eventLog.innerText += error.description;
            });
        }, function (error) {
            _eventLog.innerText += error.description;
        });
    };
    that.getData = function () {
        var data = new Windows.Data.Xml.Dom.XmlDocument;

        var xmlLoadSettings = new Windows.Data.Xml.Dom.XmlLoadSettings();
        xmlLoadSettings.elementContentWhiteSpace = false;
        data.loadXml(localSettings.values["data"], xmlLoadSettings);
        return data;
    }
    return that;
})();

function loadData() {
    // This sample uses data/data.xml (Assume valid, set file properties: Package Action - Content / Copy to Output Directory - Always)
    // Use default load settings.
    _applicationData = Windows.Storage.ApplicationData.current;
    _localSettings = _applicationData.localSettings;
    Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("data").then(function (dataFolder) {
        dataFolder.getFileAsync("data.xml").then(function (dataFile) {
            Windows.Data.Xml.Dom.XmlDocument.loadFromFileAsync(dataFile).then(function (data) {
                // Create a simple setting
                try {
                    _localSettings.values["data"] = data.getXml();
                } catch (e) {
                    _eventLog.innerText += e.description;
                }

            }, function (error) {
                _eventLog.innerText += "Error: Unable to load XML file";
            });
        }, function (error) {
            _eventLog.innerText += error.description;
        });
    }, function (error) {
        _eventLog.innerText += error.description;
    });
};

(function () {
    document.addEventListener("DOMContentLoaded", initialize, false);
})();

Build date: 11/29/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)