Orientation controls were updated
authorEugene Ostroukhov <eugeneo@symbian.org>
Wed, 30 Jun 2010 16:50:22 -0700
changeset 407 c7c8bde493b1
parent 406 f928c6777132 (diff)
parent 405 9ce576f05e7a (current diff)
child 408 9985028ffc2c
Orientation controls were updated
org.symbian.tools.wrttools.previewer/preview/css/style.css
org.symbian.tools.wrttools.previewer/preview/script/accelerometer.js
org.symbian.tools.wrttools.previewer/preview/script/emulator.js
org.symbian.tools.wrttools.previewer/preview/script/helper.js
org.symbian.tools.wrttools.previewer/preview/script/jquery-ui/js/jquery.numeric.pack.js
org.symbian.tools.wrttools.previewer/preview/wrt_preview.html
--- a/org.symbian.tools.wrttools.previewer/preview/css/style.css	Wed Jun 30 15:12:13 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/css/style.css	Wed Jun 30 16:50:22 2010 -0700
@@ -301,43 +301,18 @@
 	padding: 3px;
 }
 
-div#rotateCW{
-	position: absolute;
-	left: 0;
-	top: 0;
-	background-image: url(../images/rotate-right.png);
-	height: 32px;
-	width: 32px;
-	cursor: pointer;
-}
-div#rotateCCW{
-	position:absolute;
-	right: 0;
-	top: 0;
-	background-image: url(../images/rotate-left.png);
-	height: 32px;
-	width: 32px;
-	cursor: pointer;
-	opacity: 0.8;
-}
-
 /*
 	preferences CSS
 */
 div#TopToolbar{
-	left: 20%;
-	right: 20%;
-	background-color: gray;
-	opacity: 0.7;
+	left: 30%;
+	right: 30%;
 	top: 0;
 	height: 32px;
 	text-align: center;
-	min-width: 150px;
+	min-width: 50px;
 	position: absolute;
 }
-div#TopToolbar:hover{
-	opacity: 0.9;
-}
 
 div#InspectorBtn{
 	width: 75px;
@@ -745,4 +720,13 @@
 	left: 0;
 	width: 100%;
 	top: 130px	
+}
+
+input.axis-entry {
+	margin-bottom: 5px;
+	margin-top: 5px;
+	margin-left: 15px;
+	margin-right: 15px;
+	text-align: center;
+	width: 6ex;
 }
\ No newline at end of file
--- a/org.symbian.tools.wrttools.previewer/preview/script/accelerometer.js	Wed Jun 30 15:12:13 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/script/accelerometer.js	Wed Jun 30 16:50:22 2010 -0700
@@ -3,47 +3,88 @@
 }
 
 function RotationControls(accelCallback) {
-	this.angleX = 180;
-	this.angleY = 180;
-	this.angleZ = 180;
+	this.angleX = 0;
+	this.angleY = 0;
+	this.angleZ = 0;
 	var control = this;
 	this.accelerationCallback = accelCallback;
 
-	$("#sliderX").slider( {
-		slide : updateAngleX,
-		animate : true,
-		max : 360,
-		min : 0,
-		value : this.angleX
-	});
-	$("#sliderY").slider( {
-		slide : updateAngleY,
-		animate : true,
-		max : 360,
-		min : 0,
-		value : this.angleY
-	});
-	$("#sliderZ").slider( {
-		slide : updateAngleZ,
-		animate : true,
-		max : 360,
-		min : 0,
-		value : this.angleZ
-	});
-	this.paint();
+	setupListeners("xaxis", "xleft", "xright", updateAngleX, this.angleX);
+	setupListeners("yaxis", "yleft", "yright", updateAngleY, this.angleY);
+	setupListeners("zaxis", "zleft", "zright", updateAngleZ, this.angleZ);
+
+	window.setTimeout(function() {
+		this.paint();
+	}, 50);
+
+	function setupListeners(inputId, leftArrow, rightArrow, fn, initial) {
+		var input = $("#" + inputId);
+		input.numeric();
+		input.val(initial);
+		input.change(function() {
+			adjust(input, fn, 0);
+		});
+		handleButton(leftArrow, input, fn, -1);
+		handleButton(rightArrow, input, fn, 1);
+	}
 
-	function updateAngleX(event, ui) {
-		control.angleX = ui.value;
+	function handleButton(buttonId, input, fn, increment) {
+		var id = false;
+		var timeout = false;
+		var stop = function() {
+			if (timeout) {
+				window.clearTimeout(timeout);
+				timeout = false;
+				adjust(input, fn, increment);
+			}
+			if (id) {
+				window.clearInterval(id);
+				id = false;
+			}
+		};
+
+		$("#" + buttonId).mousedown(function() {
+			timeout = window.setTimeout(function() {
+				id = window.setInterval(function() {
+					timeout = false;
+					adjust(input, fn, increment);
+				}, 10);
+			}, 250);
+		}).mouseup(stop).focusout(stop).blur(stop).mouseleave(stop);
+	}
+
+	function adjust(input, callback, increment) {
+		var n = parseInt(input.val());
+		if (isNaN(n)) {
+			n = 0;
+		}
+		var val = fix(n + increment);
+		input.val(val);
+		callback(val);
+	}
+
+	function fix(n) {
+		while (n < -180) {
+			n = n + 360;
+		}
+		while (n >= 180) {
+			n = n - 360;
+		}
+		return n;
+	}
+
+	function updateAngleX(angle) {
+		control.angleX = angle;
 		control.paint();
 	}
 
-	function updateAngleY(event, ui) {
-		control.angleY = ui.value;
+	function updateAngleY(angle) {
+		control.angleY = angle;
 		control.paint();
 	}
 
-	function updateAngleZ(event, ui) {
-		control.angleZ = ui.value;
+	function updateAngleZ(angle) {
+		control.angleZ = angle;
 		control.paint();
 	}
 }
@@ -58,7 +99,7 @@
 
 	var r = 62;
 
-	var xy = (180 - this.angleX) * Math.PI / 180;
+	var xy = (this.angleX - 180) * Math.PI / 180;
 	var yz = (this.angleY - 180) * Math.PI / 180;
 	var xz = (180 - this.angleZ) * Math.PI / 180 + Math.PI / 2;
 
@@ -336,16 +377,13 @@
 
 RotationSupport.prototype.setAngles = function(x, y, z) {
 	this.controls.angleX = x;
-	this.controls.angleY = z; // It is extremly messy - this UI was developed separately from the rest and follows 
+	this.controls.angleY = z; // It is extremly messy - this UI was developed
+	// separately from the rest and follows
 	this.controls.angleZ = y; // different conventions
-	$("#sliderX").slider( {
-		value : x
-	});
-	$("#sliderY").slider( {
-		value : z
-	});
-	$("#sliderZ").slider( {
-		value : y
-	});
+
+	$("#xaxis").val(this.controls.angleX);
+	$("#yaxis").val(this.controls.angleY);
+	$("#zaxis").val(this.controls.angleZ);
+
 	this.controls.paint(true);
 };
--- a/org.symbian.tools.wrttools.previewer/preview/script/emulator.js	Wed Jun 30 15:12:13 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/script/emulator.js	Wed Jun 30 16:50:22 2010 -0700
@@ -97,8 +97,8 @@
 Emulator.prototype.setAccelerationValues = function(x, y, z) {
 	window.setTimeout(function() {
 		NOKIA.emulator.accelerationChanged(x, y, z);
-		NOKIA.rotationSupport.setAngles(180 - x * 90, y * 90 + 180,
-				180 + z * 90);
+		NOKIA.rotationSupport.setAngles(x * 90, y * 90,
+				z * 90);
 	}, 5);
 };
 
@@ -111,6 +111,11 @@
 	var device = NOKIA.helper.getPreference('__SYM_NOKIA_EMULATOR_DEVICE');
 	NOKIA.currentDevice = device || NOKIA.currentDevice;
 
+	// load the saved device mode
+	var mode = NOKIA.helper.getPreference('__SYM_NOKIA_EMULATOR_DEVICE_MODE');
+	if (mode != null)
+		NOKIA.mode = mode;
+
 	var orientation = NOKIA.helper.getPreference("__SYM_DEVICE_ORIENTATION");
 	if (orientation != null) {
 		this.orientation = orientation;
@@ -128,19 +133,14 @@
 			this.setAccelerationValues(-1, 0, 0);
 			break;
 		case ORIENTATIONS.DisplayUpwards:
-			this.setAccelerationValues(0, 0, 1);
+			this.setAccelerationValues(NOKIA.mode == 'portrait' ? 0 : 1, 0, 1);
 			break;
 		case ORIENTATIONS.DisplayDownwards:
-			this.setAccelerationValues(0, 0, -1);
+			this.setAccelerationValues(NOKIA.mode == 'portrait' ? 0 : 1, 0, -1);
 			break;
 		}
 	}
 
-	// load the saved device mode
-	var mode = NOKIA.helper.getPreference('__SYM_NOKIA_EMULATOR_DEVICE_MODE');
-	if (mode != null)
-		NOKIA.mode = mode;
-
 	// SAVE the device DATA
 	NOKIA.helper.setPreference('__SYM_NOKIA_EMULATOR_DEVICE',
 			NOKIA.currentDevice);
@@ -189,6 +189,7 @@
 			NOKIA.mode = 'landscape';
 		}
 	}
+	NOKIA.helper.setPreference('__SYM_NOKIA_EMULATOR_DEVICE_MODE', NOKIA.mode);
 
 	if (!NOKIA.emulator.orientationSupports())
 		NOKIA.mode = NOKIA.deviceList[NOKIA.currentDevice]['default'];
--- a/org.symbian.tools.wrttools.previewer/preview/script/helper.js	Wed Jun 30 15:12:13 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/script/helper.js	Wed Jun 30 16:50:22 2010 -0700
@@ -32,32 +32,7 @@
 		}
 	}
 
-	// Selecting Version
-	if (NOKIA.version == 'WRT 1.0')
-		$('#wrt_version_1_0')[0].checked = true;
-	else
-		$('#wrt_version_1_1')[0].checked = true;
-
-	// HomeScreen Support
-	if (NOKIA.deviceList[NOKIA.currentDevice].homeScreenSupport) {
-		if (typeof NOKIA.emulator.plist.MiniViewEnabled != 'undefined') {
-			if (NOKIA.emulator.plist.MiniViewEnabled == 'false')
-				$('#HS_Control_Info')
-						.html(
-								"<span id='wrt-help' onclick='javascipt:NOKIA.helper.showMiniviewHelp();'></span><strong>Not Enabled</strong><br/><small>Click on help to read more about enabling Mini view support</small>");
-			else
-				$('#HS_Control_Info').html("Supported");
-		} else
-			$('#HS_Control_Info').html(
-					"<span id='wrt-help'></span>Not Supported");
-
-		$('#HS_Control_Info').show();
-
-	} else {
-		$('#HS_Control_Info').html(
-				"Not Supported for the selected Device resolution");
-		$('#HS_Control_Info').show();
-	}
+	NOKIA.version = "1.1";
 };
 
 EmulatorHelper.prototype.getInfo = function(url, callback) {
@@ -241,25 +216,6 @@
 	return NOKIA.emulator.prefs[name];
 };
 
-EmulatorHelper.prototype.version = function(ele) {
-	if (confirm('Would you like to reload the widget to apply the changes on the Version settings?')) {
-		NOKIA.helper.setPreference('__SYM_WRT_VERSION', ele.value);
-		$("#loaderDiv").html("Applying the " + ele.value + ", please wait...");
-		$("#loaderDiv").show();
-		$("#loaderDiv")[0].className = 'green';
-
-		window.setTimeout(function() {
-			document.location = document.location;
-		}, 3000);
-	} else {
-		ele.checked = false;
-		if (ele.value != 'WRT 1.0')
-			$("#wrt_version_1_0")[0].checked = true;
-		else
-			$("#wrt_version_1_1")[0].checked = true;
-	}
-};
-
 EmulatorHelper.prototype.addListeners = function() {
 	NOKIA.helper.loadPreferences();
 	/*
@@ -315,15 +271,6 @@
 		}
 	}
 
-	// WRT Version controls
-	$('#wrt_version_1_0').change(function() {
-		NOKIA.helper.version(this);
-	});
-
-	$('#wrt_version_1_1').change(function() {
-		NOKIA.helper.version(this);
-	});
-
 	$("#iframeMask").click(function() {
 		$("#orientationIcon").hide();
 		$("#iframeMask").hide();
@@ -368,14 +315,49 @@
 	// $("event-memory-info").show();
 	// break;
 	// case 4:
-	// $("settings-view").show();
-	// break;
 	//					
 	// }}
 	});
 	$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *").removeClass(
 			"ui-corner-all ui-corner-top").addClass("ui-corner-bottom");
 
+	$("#xleft").button( {
+		icons : {
+			primary : 'ui-icon-triangle-1-w'
+		},
+		text : false
+	});
+	$("#xright").button( {
+		icons : {
+		primary : 'ui-icon-triangle-1-e'
+	},
+	text : false
+	});
+	$("#yleft").button( {
+		icons : {
+		primary : 'ui-icon-triangle-1-w'
+	},
+	text : false
+	});
+	$("#yright").button( {
+		icons : {
+		primary : 'ui-icon-triangle-1-e'
+	},
+	text : false
+	});
+	$("#zleft").button( {
+		icons : {
+		primary : 'ui-icon-triangle-1-w'
+	},
+	text : false
+	});
+	$("#zright").button( {
+		icons : {
+		primary : 'ui-icon-triangle-1-e'
+	},
+	text : false
+	});
+	
 	/*
 	 * Event triggering
 	 */
@@ -427,12 +409,6 @@
 		$("#event-memory-info").hide();
 	});
 
-	// for minView more info
-	$("#mini-view-back").click(function(event) {
-		$("#settings-view").show();
-		$("#mini-view-info").hide();
-	});
-
 	// Slider
 	$('#slider').slider(
 			{
@@ -582,11 +558,6 @@
 	NOKIA.emulator.child.widget.triggerListener(provider, eventType, data);
 };
 
-EmulatorHelper.prototype.showMiniviewHelp = function() {
-	$("#settings-view").hide();
-	$("#mini-view-info").show();
-};
-
 EmulatorHelper.prototype.checkDependencies = function() {
 
 	for ( var key in NOKIA.scriptsLoaded) {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.tools.wrttools.previewer/preview/script/jquery-ui/js/jquery.numeric.pack.js	Wed Jun 30 16:50:22 2010 -0700
@@ -0,0 +1,13 @@
+/*
+ *
+ * Copyright (c) 2006/2007 Sam Collett (http://www.texotela.co.uk)
+ * Licensed under the MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Version 1.0
+ * Demo: http://www.texotela.co.uk/code/jquery/numeric/
+ *
+ * $LastChangedDate: 2007-05-29 11:31:36 +0100 (Tue, 29 May 2007) $
+ * $Rev: 2005 $
+ */
+eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('r.E.W=7(c,d){c=c||".";d=q d=="7"?d:7(){};6.K(7(e){g a=e.i?e.i:e.h?e.h:0;2(a==k&&6.N.J()=="G"){5 3}f 2(a==k){5 j}g b=j;2((e.4&&a==y)||(e.4&&a==v))5 3;2((e.4&&a==t)||(e.4&&a==u))5 3;2((e.4&&a==V)||(e.4&&a==S))5 3;2((e.4&&a==R)||(e.4&&a==Q))5 3;2((e.4&&a==P)||(e.4&&a==O)||(e.L&&a==p))5 3;2(a<I||a>H){2(a==p&&6.l.F==0)5 3;2(a==c.n(0)&&6.l.o(c)!=-1){b=j}2(a!=8&&a!=9&&a!=k&&a!=D&&a!=C&&a!=M&&a!=B&&a!=A){b=j}f{2(q e.i!="z"){2(e.h==e.m&&e.m!=0){b=3}f 2(e.h!=0&&e.i==0&&e.m==0){b=3}}}2(a==c.n(0)&&6.l.o(c)==-1){b=3}}f{b=3}5 b}).x(7(){g a=r(6).w();2(a!=""){g b=T U("^\\\\d+$|\\\\d*"+c+"\\\\d+");2(!b.s(a)){d.X(6)}}});5 6}',60,60,'||if|true|ctrlKey|return|this|function||||||||else|var|keyCode|charCode|false|13|value|which|charCodeAt|indexOf|45|typeof|jQuery|exec|120|88|65|val|blur|97|undefined|46|39|36|35|fn|length|input|57|48|toLowerCase|keypress|shiftKey|37|nodeName|86|118|90|122|67|new|RegExp|99|numeric|apply'.split('|'),0,{}))
\ No newline at end of file
--- a/org.symbian.tools.wrttools.previewer/preview/script/lib/sapi/Sensor.js	Wed Jun 30 15:12:13 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/script/lib/sapi/Sensor.js	Wed Jun 30 16:50:22 2010 -0700
@@ -102,7 +102,7 @@
 
 	function createOrientationResult() {
 		return context.Result( {
-			DataType : "AxisData",
+			DataType : "OrientationData",
 			TimeStamp : new Date().getTime(),
 			DeviceOrientation : orientation
 		});
--- a/org.symbian.tools.wrttools.previewer/preview/wrt_preview.html	Wed Jun 30 15:12:13 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/wrt_preview.html	Wed Jun 30 16:50:22 2010 -0700
@@ -21,6 +21,7 @@
 	<link type="text/css" rel="stylesheet"  href="preview/script/jquery-ui/css/ui-darkness/jquery-ui-1.8.2.custom.css"/>	
 	<script type="text/javascript" src="preview/script/jquery-ui/js/jquery-1.4.2.min.js"></script>
 	<script type="text/javascript" src="preview/script/jquery-ui/js/jquery-ui-1.8.2.custom.min.js"></script>
+	<script type="text/javascript" src="preview/script/jquery-ui/js/jquery.numeric.pack.js"></script>
 	<!-- jQuery-ui Ends -->	
 	<script type="text/javascript" language="JavaScript" src="preview/script/emulator.js"></script>
 	<script type="text/javascript" language="JavaScript" src="preview/script/helper.js"></script>
@@ -84,10 +85,9 @@
 		<div id="tabs" class="tabs-bottom">
 		<ul id="tabs-header">
 			<li><a href="#console">Console</a></li>
-			<li><a href="#event-acceleration">Acceleration</a></li>
+			<li><a href="#event-acceleration">Screen</a></li>
 			<li><a href="#event-battery-info">Battery</a></li>
 			<li><a href="#event-messaging-info">Events</a></li>
-			<li><a href="#settings-view">Preferences</a></li>
 		</ul>
 		<div id="console" class="hide" style="height: 100%">
 			<span id="Console-Clear-Button"></span>
@@ -95,27 +95,29 @@
 			<div id="preview-ui-bottom-body" style="height: 100%"></div>
 		</div>
 		<div id="event-acceleration" class="hide">
-			<div style="width: 100%">
-				<div style="margin-left: auto; margin-right: auto; width: 250px">
+			<table cellpadding='0' cellspacing='0' width="100%">
+			<tr>
+				<th>Screen Resolution:</th>
+				<td>
+					<select id="resOptions">
+						<option selected="selected" value="http://www.forum.nokia.com/devices/matrix_240x320_1.html">240x320</option>
+						<option value="http://www.forum.nokia.com/devices/matrix_320x240_1.html">320x240</option>
+						<option value="http://www.forum.nokia.com/devices/matrix_360x640_1.html">360x640</option>
+						<option value="http://www.forum.nokia.com/devices/E90_Communicator">800x352</option>
+					</select>
+				</td>
+			</tr>
+			<tr>
+				<th>
 					<canvas width="140px" height="120px" id="phoneposition" >No canvas available</canvas>
-					<div id="accel-data">
-						<div>X Axis: <span id="xaxis" class="readonly-field">0000</span></div>
-						<div>Y Axis: <span id="yaxis" class="readonly-field">0</span></div>
-						<div>Z Axis: <span id="zaxis" class="readonly-field">0</span></div>
-					</div>
-				</div>
-				<div id="accel-sliders">
-					<div style="height: 15px">
-						<div id="sliderY"></div>
-					</div>
-					<div style="height: 15px">
-						<div id="sliderZ"></div>
-					</div>
-					<div style="height: 15px">
-						<div id="sliderX"></div>
-					</div>
-				</div>
-			</div>
+				</th>
+				<td>
+					<div><button id="xleft"></button><input id="xaxis" class="ui-widget axis-entry"/><button id="xright"></button></div>
+					<div><button id="yleft"></button><input id="yaxis" class="ui-widget axis-entry"/><button id="yright"></button></div>
+					<div><button id="zleft"></button><input id="zaxis" class="ui-widget axis-entry"/><button id="zright"></button></div>
+				</td>
+			</tr>
+			</table>
 		</div>
 		<div id="event-battery-info" class="hide">
 			<table cellpadding='0' cellspacing='0' width="100%">
@@ -153,61 +155,8 @@
 				</tr>
 			</table>
 		</div>
-		<div id="settings-view" class="hide">
-			<table width="100%" cellpadding="0" cellspacing="0">
-				<tr>
-					<th>
-						WRT Version
-					</th>
-					<td>
-						<label><input type="radio" name="wrt_version" id="wrt_version_1_0" value="WRT 1.0"/> WRT 1.0</label>	
-						<label><input type="radio" name="wrt_version" id="wrt_version_1_1" value="WRT 1.1"/> WRT 1.1</label>	
-					</td>
-				</tr>
-				<tr>
-					<th>
-						Home Screen view
-					</th>
-					<td>
-						<div id="HS_Control_Info">
-							Hello
-						</div>
-					</td>
-				</tr>
-			</table>
-		</div>
-		<div id="mini-view-info" class="hide">
-			<div class="ui-panel">
-				<a class="ui-button" id="mini-view-back">Back</a>
-			</div>
-			<table cellpadding='0' cellspacing='0' width="100%">
-				<tr>
-					<th>To enable Mini view support for HomeScreen widget </th>
-				</tr>
-				<tr>
-					<td>
-						Add this line in Info.plist file
-						<code>&lt;key&gt;MiniViewEnabled&lt;/key&gt;<br/>&lt;true/&gt;</code>
-						and optionally add the following to the MainHTML file
-						<code>&lt;div id="miniView"&gt; &lt;--  Define your Home Screen view here  --&gt; &lt;/div&gt;</code><br/>
-						See Web Developer's Library for <a class="link" href="http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-63F4E17E-8895-4054-82AD-762B90610B30.html" target="_blank">more details</a>
-					</td>
-				</tr>
-			</table>
-		</div>
 		</div>
 	</div>
-	<div id="TopToolbar">
-		<div id="rotateCW"></div>
-		<select id="resOptions">
-			<option selected="selected" value="http://www.forum.nokia.com/devices/matrix_240x320_1.html">240x320</option>
-			<option value="http://www.forum.nokia.com/devices/matrix_320x240_1.html">320x240</option>
-			<option value="http://www.forum.nokia.com/devices/matrix_360x640_1.html">360x640</option>
-			<option value="http://www.forum.nokia.com/devices/E90_Communicator">800x352</option>
-		</select>
-		<div id="rotateCCW"></div>
-	</div>
-	<div id="PreferencesBtn" class="hide"></div>
 	<div id="InspectorBtn" class="hide"></div>
 	<div id="orientationIcon"></div>
 	<div id="loaderDiv"></div>