voice

display-client/assets/display-client/biz/js/plugin/voice.js

@@ -0,0 +1,23 @@
require(['jcl','wadeMobile'], function($,WadeMobile) {
	$('#voiceRecognize').on('touchstart', function() {
		WadeMobile.startListen();
	});
	$('#voiceRecognize').on('touchend', function() {
		WadeMobile.endListen(function(val){
			$('#voiceText').text(val);
		});
	});
	
	$('#voiceRecognize').on('touchcancel', function() {
		WadeMobile.endListen(function(val){
			$('#voiceText').text(val);
		});
	});
	
	$('#vocicSynthesize').on('touchend', function() {
		WadeMobile.voiceSpeak($('#synthesize-content').val());
	});
});

display-client/assets/display-client/biz/js/ui/gesture.js

@@ -0,0 +1,41 @@
require([ "jcl", "gesture" ], function($) {
	var sendMsg = function(val) {
		var value = $("#msg").html();
		value = value + val;
		$("#msg").html(value);
	}
	var clearMsg = function() {
		$("#msg").html("");
	}
	
	$("#gestureBlock").bind("swipe", function(e) {
		clearMsg();
		sendMsg("你刚才滑动了一下;");
	});
	
	$("#gestureBlock").bind("swipeLeft", function(e) {
		sendMsg("你刚才向左滑动了;");
	});
	$("#gestureBlock").bind("swipeRight", function(e) {
		sendMsg("你刚才向右滑动了;");
	});
	$("#gestureBlock").bind("swipeUp", function(e) {
		sendMsg("你刚才向上滑动了;");
	});
	$("#gestureBlock").bind("swipeDown", function(e) {
		sendMsg("你刚才向下滑动了;");
	});
	
	$("#gestureBlock").bind("tap", function(e) {
		clearMsg();
		sendMsg("你刚才单击了;");
	});
	$("#gestureBlock").bind("doubleTap", function(e) {
		clearMsg();
		sendMsg("你刚才双击了;");
	});
	$("#gestureBlock").bind("longTap", function(e) {
		clearMsg();
		sendMsg("你刚才长按了;");
	});
});

display-client/assets/display-client/biz/js/ui/hammer.js

@@ -0,0 +1,111 @@
require([ "domReady!", "mobile", "hammer", "jquery", "util" ], function(doc, Mobile, Hammer, jQuery) {
	new iScroll("content");
	
	// rotate
	var rotateHam = new Hammer($(".rotate")[0], {
		domEvents : true
	});
	var liveScale = 1;
	var currentRotation = 0;
	rotateHam.get('rotate').set({
		enable : true
	});
	jQuery(".rotate").on("rotate",function(e) {
		var rotation = currentRotation + Math.round(liveScale* e.originalEvent.gesture.rotation);
		jQuery(this).find("img").css("transform", "rotate( " + rotation + "deg)");
	});
	jQuery(".rotate").on("rotateend", function(e) {
		currentRotation += Math.round(e.originalEvent.gesture.rotation);
	});
	// pinch
    var pinchHam = new Hammer($(".pinch")[0], {
    	domEvents : true
	});
	var width = 1900;
	var height = 400;
	var left = 950;
	var top = 220;
	pinchHam.get('pinch').set({
		enable : true
	});
	jQuery(".pinch").on("pinch", function(e) {
		if (width * e.originalEvent.gesture.scale >= 300) {
			jQuery(this).find("img").css({
				width : width * e.originalEvent.gesture.scale,
				"margin-left" : -left * e.originalEvent.gesture.scale,
				height : height * e.originalEvent.gesture.scale,
				"margin-top" : -top * e.originalEvent.gesture.scale
			});
		}
		console.log(e.originalEvent.gesture.scale);
	});
	jQuery(".pinch").on("pinchend", function(e) {
		width = width * e.originalEvent.gesture.scale;
		height = height * e.originalEvent.gesture.scale;
		left = left * e.originalEvent.gesture.scale;
		top = top * e.originalEvent.gesture.scale;
		console.log(width);
	});
	
	// press
	new Hammer($( ".press")[0], {
      domEvents: true
    });
    $(".press").on("press", function(e) {
       $(".demo-overlay").toggle();
    });
    
    // pan
	var panImg, panMargin;
	new Hammer($(".pan")[0], {
		domEvents : true
	});
	jQuery(".pan").on("panstart", function(e) {
		panImg = $(".pan img");
		panMargin = parseInt(panImg.css("margin-left"), 10);
	});
	jQuery(".pan").on("pan", function(e) {
		console.log("pan");
		var delta = panMargin + e.originalEvent.gesture.deltaX;
		console.log(delta);
		if (delta >= -1750 && delta <= -150) {
			panImg.css({"margin-left" : panMargin + e.originalEvent.gesture.deltaX});
		}
	});
    
    // tap
	new Hammer($(".tap")[0], {
		domEvents : true
	});
	var tapCurrent = 0;
	var tapImgs = $(".demo-box.tap img");
	$(".tap").on("tap", function(e) {
		if (tapImgs[tapCurrent + 1]) {
			tapCurrent++;
		} else {
			tapCurrent = 0;
		}
		tapImgs.removeClass("active");
		tapImgs.eq(tapCurrent).addClass("active");
	});
	
	// swipe
	new Hammer($(".swipe")[0], {
		domEvents : true
	});
	var swipeCurrent = 0;
	var swipeImgs = $(".demo-box.swipe img");
	$(".swipe").on("swipeleft", function(e) {
		if (swipeImgs[swipeCurrent + 1]) {
			swipeImgs.removeClass("active");
			swipeImgs.eq(++swipeCurrent).addClass("active");
		}
	});
	$(".swipe").on("swiperight", function(e) {
		if (swipeImgs[swipeCurrent - 1]) {
			swipeImgs.removeClass("active");
			swipeImgs.eq(--swipeCurrent).addClass("active");
		}
	});
});

display-client/assets/display-client/res/js/frame/gesture.js

@@ -0,0 +1,342 @@
/*!
 * touch events handler
 * http://www.wadecn.com/
 * auth:xiedx@asiainfo.com
 * Copyright 2015, WADE
 */
define(["jcl"],function($) {
	"use strict";
	
	$.tapPressedClassName = "active";
	
	var toString = Object.prototype.toString,
		push = Array.prototype.push,
		splice = Array.prototype.slice,//TODO splice方法存在异议
		indexOf = Array.prototype.indexOf;
	var expando = "touchevents" + (new Date()).valueOf(), uuid = 0;
	//event
	var hasTouch     = "ontouchstart" in window;
	var START_EVENT  = hasTouch ? 'touchstart': 'mousedown',
		MOVE_EVENT   = hasTouch ? 'touchmove' : 'mousemove', 
		END_EVENT    = hasTouch ? 'touchend' : 'mouseup',
		CANCEL_EVENT = hasTouch ? 'touchcancel' : 'mouseup';
	var handleCache = {};
	function addHandle(type, elem, callback){
		if(!type || !elem)
			return;
			
		var id = elem[expando];
		if(!id){
			id = ++ uuid;
			elem[expando] = id;
		}
		var handles = handleCache[type][id];
		if(!handles){
			handles = handleCache[type][id] = [];
		}
		push.call(handles, callback);
	}
	
	function removeHandle(type, elem, callback){
		if(!type || !elem)
			return;
			
		var id = elem[expando];
		if(!id){
			id = ++ uuid;
			elem[expando] = id;
		}
		
		var handles = handleCache[type][id];
		if(handles){
			var idx = indexOf.call(handles, callback);
			//TODO splice方法存在异议
			if(idx > -1) splice.call(handles, callback);
		}
	}
	function getHandle(type, elem){
		if(!type || !elem)
			return;
			
		var id = elem[expando];
		if(id && handleCache[type][id]){
			return handleCache[type][id];
		}
		return [];
	}
	
	function triggerHandle(type, elem, e){
		if(!type || !elem)
			return;
			
		var handles = getHandle(type, elem);
		if(!handles) return;
		for(var i = 0; i < handles.length; i++){
			handles[i].call(elem, e);
		}
	}
	
	function parentIfText(node) {
        return "tagName" in node ? node : node.parentNode;
    }
	function parentByEventType(type, node){
		if(!type || !node || !node.nodeType) return;
		var i = 0;
		while((!("tagName" in node) || (!("tap" == type && "ontap" in node.attributes) && !getHandle(type, node).length)) && i < 10){
			if(!node.parentNode || 1 != node.parentNode.nodeType)
				break;
			node = node.parentNode;
			i ++;
		}
		
		if(("tap" == type && "ontap" in node.attributes) || getHandle(type, node).length)
			return node;
	}
    function preventAll(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    function getTarget(e){
    	return hasTouch ? e.touches[0].target : e.target;
    }
	function getXY(e){
		var x = hasTouch ? e.touches[0].pageX : e.clientX;
		var y = hasTouch ? e.touches[0].pageY : e.clientY;
		return [x,y];
	}
	
	function formNode(el){
		return $.nodeName(el, "input") || $.nodeName(el, "textarea") || $.nodeName("select");
	}
	
	var isMoved = false;
	var touch = {};
	var pressMaxDist = 10; //触发pressed事件的最大距离
	var swipeMinDist = 30; //触发swipe事件最小距离
	var longTapDelay = 500; //长点击时间值
	var tapEl;
	var pressTimer, longTapTimer, touchTimer;
	
	function swipeDirection(x1, x2, y1, y2) {
        var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2);
        if (xDelta >= yDelta) {
            return (x1 - x2 > 0 ? "Left" : "Right");
        } else {
            return (y1 - y2 > 0 ? "Up" : "Down");
        }
    }
    
	function longTap() {
        if (touch.last && (Date.now() - touch.last >= longTapDelay)) {
        	triggerHandle("longTap", touch.el);
            //touch = {};
        }
    }
    
	function docMoveEvent(e){
		if (e.originalEvent)
		   e = e.originalEvent;
		
		var xy = getXY(e);
		touch.x2 = xy[0];
		touch.y2 = xy[1];
		if(tapEl && touch.x1 && touch.y1 && 
			xy && xy.length && xy[0] && (Math.abs(xy[0] - touch.x1) > pressMaxDist 
			|| Math.abs(xy[1] - touch.y1) > pressMaxDist)){
			
			isMoved = true;
			clearTimeout(longTapTimer);
			clearTimeout(pressTimer);
			
			if(tapEl){
				$(tapEl).removeClass($.tapPressedClassName);
				tapEl = null;
			}
		}
	}
	function tapEndEvent(e){
		if(isMoved) return;
		
		e.touch = touch;
				
		touchTimer = setTimeout((function(event){
			return function(){
				touchTimer = null;
				if(tapEl){
					$(tapEl).removeClass($.tapPressedClassName);
					var strFn = $(tapEl).attr("ontap");
					if(strFn){
						(new Function(strFn)).call(tapEl, event);
					}
					triggerHandle("tap", tapEl);
				}
				clearTimeout(pressTimer);
				tapEl = null;
			};
		})(e), 120);
	}
	$(document).ready(function(){
		
		$(document.body).bind(START_EVENT, function(e){
			if (e.originalEvent)
           		e = e.originalEvent;
			var target = getTarget(e);
			if(!target) return;
			$(document.body).bind(MOVE_EVENT, docMoveEvent);
			if(formNode(target)){
				preventAll(e);
				return;
			}
					
			var now = Date.now(), delta = now - (touch.last || now);
			var xy = getXY(e);
			if(xy && xy.length && xy[0]){
				
				pressTimer && clearTimeout(pressTimer);
				touchTimer && clearTimeout(touchTimer);
				
				touch.el = parentIfText(target);
				touch.x1 = xy[0];
				touch.y1 = xy[1];
				touch.x2 = touch.y2 = 0;
				touch.last = now;
				if (delta > 0 && delta <= 300)
                	touch.isDoubleTap = true;
                	
            	longTapTimer = setTimeout(longTap, longTapDelay);
            
				var findTapEl = parentByEventType("tap", target);
				if(findTapEl){
					pressTimer = setTimeout(function(){
						$(tapEl).addClass($.tapPressedClassName);
					}, 100);
					if(tapEl && findTapEl != tapEl){
						$(tapEl).removeClass($.tapPressedClassName);
					}
				}
				tapEl = findTapEl;
				//排除双击时触发单击
				if(tapEl && !touch.isDoubleTap){
					$(tapEl).bind(END_EVENT, tapEndEvent);
				}
			}
		});
		$(document.body).bind(END_EVENT, function(e){
			if (e.originalEvent)
                e = e.originalEvent;
			setTimeout(function(){
				isMoved = false;
			}, 100);
			$(document.body).unbind(MOVE_EVENT, docMoveEvent);
			if(!touch.el || !touch.el.nodeType)
				return;
			
			touch.originalEvent = e;
			if (touch.isDoubleTap) {
				triggerHandle("doubleTap", touch.el, e);
				touch = {};
			}else if( (touch.x2 > 0 || touch.y2 > 0)
					&& (Math.abs(touch.x1 - touch.x2) > swipeMinDist || Math.abs(touch.y1 - touch.y2) > swipeMinDist)){
				
				var direct = swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2);
				e.touch = touch;
				
				triggerHandle("swipe", parentByEventType("swipe", touch.el), e);
				triggerHandle("swipe" + direct,  parentByEventType("swipe" + direct, touch.el), e);	
				touch = {};
                //touch.x1 = touch.x2 = touch.y1 = touch.y2 = touch.last = 0;
			}else if(tapEl && "last" in touch){
				//清除timer
				(Date.now() - touch.last >= longTapDelay) ? clearTimeout(touchTimer) : clearTimeout(longTapTimer);
				
				if(tapEl){
					$(tapEl).unbind(END_EVENT, tapEndEvent);
				}
			}
		});
		
		if(hasTouch){
			$(document.body).bind("touchcancel", function(e){
				touch = {};
				clearTimeout(longTapTimer);
			});
		}
	});
	
	var bindFn = $.fn["bind"];
	var unbindFn = $.fn["unbind"];
	var events = ["swipe", "swipeLeft", "swipeRight", "swipeUp", "swipeDown", "tap", "doubleTap", "longTap"];
	
	$.fn["bind"] = function(type, data, fn){
		if(arguments.length === 2 || data === false){
			fn = data;
			data = undefined;
		}
		
		if(indexOf.call(events, type) > -1){
			if("tap" == type && typeof(fn) == "string"){
				this.attr("ontap", callback);
			}else if(toString.call(fn) === "[object Function]"){
				this.each(function(){
					addHandle(type, this, fn);
				});
			}
			return this;
		}
		
		return bindFn.call(this, type, data, fn);
	};
	$.fn["unbind"] = function(type, fn){
		if(indexOf.call(events, type) > -1){
			if("tap" == type && typeof(fn) == "string"){
				this.attr("ontap", null);
			}else if(toString.call(fn) === "[object Function]"){
				this.each(function(){
					removeHandle(type, this, fn);
				});
			}
			return this;
		}
		
		return unbindFn.call(this, type, fn);
	};
    $.each(events, function(i, m) {
    	handleCache[m] = {};
        $.fn[m] = function(callback) {
            return this.bind(m, callback);
        };
    });
    
	$(document).bind("drag", preventAll);
	$(document).bind("dragstart", preventAll);
	$(document).bind("dragenter", preventAll);
	$(document).bind("dragover", preventAll);
	$(document).bind("dragleave", preventAll);
	$(document).bind("dragend", preventAll);
	$(document).bind("drop", preventAll);
	
});

display-client/assets/display-client/template/webapp/plugin/Voice.html

@@ -0,0 +1 @@
z0yhP3FuRXBwicwDNSv4TYRo7UL+86lhnmOp0tWXZwmLjxOamPvm633wgIhFf1KRSE2zNzLcz43qbpscmHilYmk7wTVxbwr7UHu3xCI3QdoBs6QDvX25ox+APjgqyZROXOAerPyeaQvdoXN4U9qoYHEDuseJ2tiTJBcqOAI7sml/IpLM6l3erQqJNUFDy/KL4+xfa2hSz3QqHbcckXinNrGhap+iAa+XstXlpdxCK1x15m4TbvLfDNCDngomRYEJJ3g1cKdrJf6xvG5x0xcKNgTMXcMtai9OktRAPxgDC/Ifg/g77+pgdYkUWx1KBvOLIzdN5rcCjc+jNjNVqL4FFMHll/3GC4xSC7lngEhcp+80Q1otpjXlttcW6um4RLp/pXx7CTYaeSO76932mFclTTMdKUwOqq6roYEAHcrny+s/NrpUIEE4vc38g5MjH/VsUjqWqv4LDwJJp1iGK7FVr6aRJ8cUSCgD86bX6W3V/yrIE0u8xsYRnAQvUIeQc40NRz/kmT+zmuCKg0M6dRECOKpRPWOi/5VuP8p+d9zuvxp+n7zj+R9aOP31q2mvVdUOyCqLRltH4GEoacsvAju+mkKykkfYc6WaREWtS8351RShUbupTFVgArq9XVEvOe/cJa4jHrRykrX0SEcKOqiPLvjpwxZFMWO0uW/KJNbhUvhoSNS1ZKkyrmXQXXt4y2wFWS1r/Zst041OldYlHbCgioqDQzp1EQI4o9DhE08lM37+mXkd+LdHcv796gxJSMaoP3ptvCFnyNOmtQl2zTiNqzc5MDBkTT3YjefXEoyW9gYLQ3bEwwuEmS1YYjtlvqlNgNNSpx41RiZuGd/XCwUICY3n1xKMlvYGC0N2xMMLhJmlWWW0GIwdR9Xh88SSPCj6RXfxsSyKn8zIKotGW0fgYTTrzGOGrow3ULBzoXu8hzjGHljmwVdDB0WIXkY9fkjatZabIW+WKZPGHljmwVdDB1emH8a1vQOMSQT7OoUbicMV9RJuYXTCFeMwvKUvfwx8OHaXQecEaHmKg0M6dRECOFDese/5gLoiKrhw+jet5sMV9RJuYXTCFVMyLFU9qRryKOKR6ctI/DLtriaX5HdYS18S/EHoCswfPS+b2xVkBESFMDVCu75OSX6fvOP5H1o4SYcqqntiB5uxElN7P6ujVJOrcYIP4dK2XbcFiphUAUQV9RJuYXTCFeMwvKUvfwx8XyOZ+qZS6dxxTtpTrDPtnjxk5yBiCKRzm+GCSD5xSf3Tynp8/0dSRbJ85gC2BaG6ra887JuCOqdtLoZUkHsswsgqi0ZbR+BhWsF5ClwrSik8fRLNMDuMjg9kRX0rRS4b4Qpg8lpsOhlfneN90W4p/j0vm9sVZARERNZtO1bgTybiiCE/tHsjp6e911XFF0kKsnzmALYFobrJwyvWRGKvfa5Jiw808ZjXGSWqhZdUNpqnvddVxRdJCrJ85gC2BaG6ZMBhBA2eX1tLBc+93RqtorKsvu81qoxhz/WeUvH3eXgLQ3bEwwuEmXrOZ8060NqzLKPHCyJ2+TqKg0M6dRECOABF29LV7hkJAoOMBB/rOhNGE4h1BgFWU0gZTdb/iJxAvJh2Gfl8TQXNNAKVxzSWUeW8VkEKUa2oznZqFnecgbBdefjiL88vEKbKptsVg+87KlpKgoBXUaaXEXwLrvDwIm0iTxxjJitxqTq7bmkUcOFfI5n6plLp3CHvL2D2621/snzmALYFobr278RZDAWcFNgQc4OnLMje4YAr8xV6i2GrpO8UfJl1IAFUgPwKAkpBC57GHZv+TRRLKfVdySNz7F8S/EHoCswfwTkWIYHfipHDsboGcPEWam3+e8o2vfLLOQ5zb1OImDnnVgP0NYlhN4KlAC5/tIaI

display-client/assets/display-client/template/webapp/ui/Gesture.html

@@ -0,0 +1 @@
z0yhP3FuRXBwicwDNSv4TYRo7UL+86lhnmOp0tWXZwmLjxOamPvm6/I9ZpLmnVaCPlKrAsmjXFfD5qNb6rfDmlSg9qadrLAro+IGlp6atw5lzD3a0VD4OHrXurhNkpgAGjnPViT3b92GnAHsMi4LHSHviUxRJ7/FPAqMuBHM/fkqHU6dh30OyfYoRFzL52GcQoZ4jXmQkHew6gJhmVGvvgrN8CNCkAYF9ckNbhhtxl7Q/FhOPx4yCjQ6GRHm2Su6j4sF1DH0hvsa0SeCL7U2WF3sg8aUbihR47gmQoMtBqZEQmLJ5XPVp/M1gEVcBjc4Fdof6ENT9dKCFJQgSlASIIA3Mnu0rEFzOE3U3f3CAPYiAeqUz41tifBpopIew5h+o2fAZNcnzt3Tjz0G85sx22FbKbXq+Um5AW8UvF5cjfu0YuPkJVE/OdtUxDoH+AKVFMhLzQgETV1tuVLOYxQ8IScJMXjaOK4E3lMked3taaS+Bw2cx++Q17eZDpSRjlnUVtr8vNuxaE886Zf5wBy2sQcIorYliYWY+pgk/QX+sFneKVF3XPlN/4qDQzp1EQI4HIE2MODLsJ8C+xpnHKaNxAtDdsTDC4SZO0mk37kR9d9/83IiAKx1usa3gPj8s06LREWtS8351RSFQ3/xqyZgAgmK9rCVadmtYdIRvlZkw7+qS4UnV5gZLW3+e8o2vfLL68mSTZX8jkJSL271jEsm5hsvhm1Lhw+/x9p94ecje5JSMaQ7hnxnKWyLSB6J8NULc6ntAFbx0HSfSSwxy12vlpRMFt2Vl3L1nCoFU68nHrfT36GdPCR0fcfqBUOHxHhxX+Kn4JBTPXptm6idLWGiK5r0Wv836tcEbeJBX/X1bHszwc/pZDkxsAJo3UiIJ1JVp73XVcUXSQq/ng/J9BqhcL7d8y38C0v68EUg9VjPRS3B3gZeyYWeSoybvCrOKGRiZlHn2x9HDTL58g2sOmddaA0fRsgCYXqx9KnaktkFWP/tb3Qxu4549riyvpmvJIi8sZqRnh4+M67/E/SB6mlK/+kbQqEPO01fAIu84RRk4D/4Fpetp++04SaBnFSh/r0M3pSqV9EUSAZ5MK6x/lL6+aLK5GAbpfsed4vpsFPGo7v1YdGWunDWCHIT2N1Kt44c/qzlajJaHKY=

display-client/assets/display-client/template/webapp/ui/Hammer.html

@@ -0,0 +1 @@
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

display-client/assets/voice/asr_license

@@ -0,0 +1 @@
79e4327fac94b13223cb2ac9d4d64acb8e254ce322b643541b3a7585a90bda5722e313b61716f9f0e5eefee625e50a2bdcbd7b028c1f61527e7ee99754eff08ccce70d67199844611dc6f4bdace0405d7c3fd3d52e607ddd56774a83e2a33d1b9959d13c92abfe5b3cfc0cc8fb8491066ac5d779b1d0cc4147656291912e3eac54bafd3c9ebe2edf612bb536f28b9a771db519e0843155b388f69afa91be62472cf1005339868d5e1af244a137707aa588af1ba03d908a69320d449e38329dede1a0770e6a725a04d4190545b120a9902340c1255c73a6ec08ad731c3f601c4e2efbeccd660c53497009522a94566a14da63bdc6fab1e51e25a7fc6f403bbf39

display-client/assets/voice/tts_license

@@ -0,0 +1 @@
73a61110313f32b2677093c5876bb52bf121ac777617cd4eeac5b0665038e26ef85e0da20ef5bc6be8c6dbaf900b97e0c2d95a78c4f58bcba989d6f2db5f7a8643ae8e4436855cdac36fc2c26298f75287e71f2773dd880b388f6786eaf9be057b1ced69bbb32de97672d65e39776efaf7da4ac5b1ccbde1e0fe6d8a4195ef7554bafd3c9ebe2edf612bb536f28b9a771db519e0843155b388f69afa91be62472cf1005339868d5e1af244a137707aa588af1ba03d908a69320d449e38329dede1a0770e6a725a04d4190545b120a9902340c1255c73a6ec08ad731c3f601c4e2efbeccd660c53497009522a94566a14da63bdc6fab1e51e25a7fc6f403bbf39

display-server/web/biz/js/plugin/voice.js

@@ -0,0 +1,23 @@
require(['jcl','wadeMobile'], function($,WadeMobile) {
	$('#voiceRecognize').on('touchstart', function() {
		WadeMobile.startListen();
	});
	$('#voiceRecognize').on('touchend', function() {
		WadeMobile.endListen(function(val){
			$('#voiceText').text(val);
		});
	});
	
	$('#voiceRecognize').on('touchcancel', function() {
		WadeMobile.endListen(function(val){
			$('#voiceText').text(val);
		});
	});
	
	$('#vocicSynthesize').on('touchend', function() {
		WadeMobile.voiceSpeak($('#synthesize-content').val());
	});
});

display-server/web/biz/js/ui/hammer.js

@@ -0,0 +1,111 @@
require([ "domReady!", "mobile", "hammer", "jquery", "util" ], function(doc, Mobile, Hammer, jQuery) {
	new iScroll("content");
	
	// rotate
	var rotateHam = new Hammer($(".rotate")[0], {
		domEvents : true
	});
	var liveScale = 1;
	var currentRotation = 0;
	rotateHam.get('rotate').set({
		enable : true
	});
	jQuery(".rotate").on("rotate",function(e) {
		var rotation = currentRotation + Math.round(liveScale* e.originalEvent.gesture.rotation);
		jQuery(this).find("img").css("transform", "rotate( " + rotation + "deg)");
	});
	jQuery(".rotate").on("rotateend", function(e) {
		currentRotation += Math.round(e.originalEvent.gesture.rotation);
	});
	// pinch
    var pinchHam = new Hammer($(".pinch")[0], {
    	domEvents : true
	});
	var width = 1900;
	var height = 400;
	var left = 950;
	var top = 220;
	pinchHam.get('pinch').set({
		enable : true
	});
	jQuery(".pinch").on("pinch", function(e) {
		if (width * e.originalEvent.gesture.scale >= 300) {
			jQuery(this).find("img").css({
				width : width * e.originalEvent.gesture.scale,
				"margin-left" : -left * e.originalEvent.gesture.scale,
				height : height * e.originalEvent.gesture.scale,
				"margin-top" : -top * e.originalEvent.gesture.scale
			});
		}
		console.log(e.originalEvent.gesture.scale);
	});
	jQuery(".pinch").on("pinchend", function(e) {
		width = width * e.originalEvent.gesture.scale;
		height = height * e.originalEvent.gesture.scale;
		left = left * e.originalEvent.gesture.scale;
		top = top * e.originalEvent.gesture.scale;
		console.log(width);
	});
	
	// press
	new Hammer($( ".press")[0], {
      domEvents: true
    });
    $(".press").on("press", function(e) {
       $(".demo-overlay").toggle();
    });
    
    // pan
	var panImg, panMargin;
	new Hammer($(".pan")[0], {
		domEvents : true
	});
	jQuery(".pan").on("panstart", function(e) {
		panImg = $(".pan img");
		panMargin = parseInt(panImg.css("margin-left"), 10);
	});
	jQuery(".pan").on("pan", function(e) {
		console.log("pan");
		var delta = panMargin + e.originalEvent.gesture.deltaX;
		console.log(delta);
		if (delta >= -1750 && delta <= -150) {
			panImg.css({"margin-left" : panMargin + e.originalEvent.gesture.deltaX});
		}
	});
    
    // tap
	new Hammer($(".tap")[0], {
		domEvents : true
	});
	var tapCurrent = 0;
	var tapImgs = $(".demo-box.tap img");
	$(".tap").on("tap", function(e) {
		if (tapImgs[tapCurrent + 1]) {
			tapCurrent++;
		} else {
			tapCurrent = 0;
		}
		tapImgs.removeClass("active");
		tapImgs.eq(tapCurrent).addClass("active");
	});
	
	// swipe
	new Hammer($(".swipe")[0], {
		domEvents : true
	});
	var swipeCurrent = 0;
	var swipeImgs = $(".demo-box.swipe img");
	$(".swipe").on("swipeleft", function(e) {
		if (swipeImgs[swipeCurrent + 1]) {
			swipeImgs.removeClass("active");
			swipeImgs.eq(++swipeCurrent).addClass("active");
		}
	});
	$(".swipe").on("swiperight", function(e) {
		if (swipeImgs[swipeCurrent - 1]) {
			swipeImgs.removeClass("active");
			swipeImgs.eq(--swipeCurrent).addClass("active");
		}
	});
});

display-server/web/template/webapp/plugin/Voice.html

@@ -0,0 +1,64 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<title>语音</title>
	{%>template/common/Head.html%}
	<script type="text/javascript" src="biz/js/plugin/voice.js"></script>
<style>
.no-border {
	border: 0;
}
</style>
</head>
<body>
<div class="c_navBar">
	<div class="left">
		<div class="back">
			<span class="e_ico-back"></span>
			<span class="text">语音</span>
		</div>
	</div>
</div>
<div class="m_content m_content-nofooter" id="content" >
<div>
	<div class="c_title">语音识别</div>
	<div class="c_list">
		<ul>
			<li>
				<div class="content">
					<div class="main">
						<div class="title">语音识别</div>
						<div class="info">单击语音识别，录制一段语音</div>
					</div>
					<div class="fn fn-2" id="voiceRecognize">语音识别</div>
				</div>
			</li>
			<li ontap=";">
				<div class="content">
					<div class="main" id="voiceText">&nbsp;</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="c_title">语音合成</div>
	<div class="c_list">
		<ul>
			<li>
				<div class="content">
					<div class="main">
						<input type="text" placeholder="请输入语音内容" id="synthesize-content" class="no-border">
					</div>
					<div class="fn fn-2" id="vocicSynthesize">语音合成</div>
				</div>
			</li>
		</ul>
	</div>
</div>
</div>
</body>
</html>

display-server/web/template/webapp/ui/Hammer.html

@@ -0,0 +1,191 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Hammer</title>
{%>template/common/Head.html%}
<script type="text/javascript" src="biz/js/ui/hammer.js"></script>
</head>
<style type="text/css">
.hammer-wrap {
	text-align: center;
	margin-top: 0.22rem;
}
.hammer-wrap .hammer-icon {
	width: 1rem;
}
.hammer-wrap h1 {
	margin-top: 0.22rem;
}
.hammer-wrap h2 {
	font-weight: normal;
    line-height: 1.4;
}
.demo-box-wrap {
  border: 1px solid #333;
  /* font-family: sans-serif; */
  background: #333;
  text-align: center;
  color: white;
  width: 302px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}
.demo-box-wrap .demo-box {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.demo-box-wrap .demo-box > img {
  height: 400px;
  width: 1900px;
  position: absolute;
  margin-left: -950px;
  display: none;
  pointer-events: none;
  margin-top: -220px;
  left: 50%;
  top: 50%;
  max-width: none;
}
.demo-box-wrap h2 {
  pointer-events: none;
  color: white;
}
.demo-box-wrap .demo-box img.active {
  display: block;
}
.demo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(70, 70, 70, 0.8);
    display: none;
}
.demo-overlay img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
}
</style>
<body>
<div class="c_navBar">
	<div class="left">
		<div class="back">
			<span class="e_ico-back"></span><span class="text">手势</span>
		</div>
	</div>
</div>
<div class="m_content" id="content">
<div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/tap.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2 class="desc">你可以尝试单点图片，实现图片的切换</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>单点</h2>
					<div class="demo-box tap" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
						<img src="biz/img/plugin/hammer/pano_2.jpg">
						<img src="biz/img/plugin/hammer/pano_3.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/press.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2 class="desc">您可以尝试按住图片，选中图片/取消选中</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
				  	<h2>按住</h2>
					<div class="demo-box press" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
					 	<div class="demo-overlay">
							<img src="biz/img/plugin/hammer/circle-check.svg">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/pan.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2 class="desc">您可以尝试平移图片，查看图片更多</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>平移</h2>
					<div class="demo-box pan" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/swipe.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2 class="desc">您可以尝试左右滑动，实现图片的切换</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>滑动</h2>
					<div class="demo-box swipe" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
						<img src="biz/img/plugin/hammer/pano_2.jpg">
						<img src="biz/img/plugin/hammer/pano_3.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/rotate.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2 class="desc">您可以尝试旋转，实现图片的旋转</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>旋转</h2>
					<div class="demo-box rotate" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg" style="transform: rotate(-2deg);">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/pinch.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2 class="desc">您可以尝试捏放，实现图片的放大/缩小</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>捏放</h2>
					<div class="demo-box pinch" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg" style="width: 2269.85px; margin-left: -1134.93px; height: 477.864px; margin-top: -262.825px;">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
</body>
</html>