android: improved multitouch. removed unneeded div tag inside Selecte…

…dInterfacePage. Working multitouch / resolution on android 2.1 and honeycomb.
matiasw · Jul 24, 2011 · 3fcf82d · 3fcf82d
1 parent 3a22310
commit 3fcf82d
Showing 7 changed files with 143 additions and 126 deletions.
diff --git a/Android/Control/assets/www/index.html b/Android/Control/assets/www/index.html
@@ -87,21 +87,20 @@
 
            midiManager = new MIDIManager();
 
-           console.log("before im");
            interfaceManager = new InterfaceManager();
            interfaceManager.init();
-           console.log("before im");
+
            destinationManager = new DestinationManager();
            destinationManager.init();
 
            oscManager = new OSCManager();
            oscManager.startup();
 
            bonjour = new Bonjour();
-           bonjour.startup();
+           //bonjour.startup();
 
            features = new DeviceFeatures();
-            document.addEventListener('orientationChanged', control.onRotation, false);
+           document.addEventListener('orientationChanged', control.onRotation, false);
 
             // interfaceScroller   = new iScroll('interfaceScroller');
             // destinationScroller = new iScroll('destinationScroller');
@@ -209,12 +208,12 @@ <h1>
                 </ul>
             </div>
         </div>
-        <div data-role="page" id="SelectedInterfacePage">
+        <div data-role="page" id="SelectedInterfacePage" style="background-color:#f00">
             <div id="selectedInterface">
                 <!--<canvas id="canvas"></canvas>-->
             </div>
         </div>
-        <!--<div style="display:block; position:fixed; top: 100px; left: 100px; width:50px; height:50px; background-color:#f00; z-index:100;" ontouchend="window.location.reload(true)"><h2>RELOAD</h2></div>-->
+        <div style="display:block; position:fixed; top: 100px; left: 100px; width:50px; height:50px; background-color:#f00; z-index:100;" ontouchend="window.location.reload(true)"><h2>RELOAD</h2></div>
         <div data-role="footer" data-id="foo1" data-position="fixed" class="ftr ui-bar-a ui-footer ui-footer-fixed ui-fixed-overlay" role="contentinfo" style=" border-top-width:0;bottom:0px; width:100%; border-width:0; padding:0; margin:0">
             <div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
                 <ul class="ui-navbar-noicons ui-grid-c" style="border-top-width:0;">

diff --git a/Android/Control/assets/www/js/Bonjour.js b/Android/Control/assets/www/js/Bonjour.js
@@ -4,7 +4,7 @@ var Bonjour = function() {
 };
 
 Bonjour.prototype.startup = function() {
-	setTimeout(function() { PhoneGap.exec(null, null, 'Bonjour', 'start', []) }, 2500);
+	setTimeout(function() { PhoneGap.exec(null, null, 'Bonjour', 'start', []) }, 1000);
 };
 
 PhoneGap.addConstructor(function() {

diff --git a/Android/Control/assets/www/js/Control.js b/Android/Control/assets/www/js/Control.js
@@ -21,6 +21,7 @@ function Control() {
 	interfaceDiv = document.getElementById("selectedInterface");
 	this.changeTab(this.currentTab);
 	this.isAddingConstants = false;
+	this.isLoadingInterface = false;
 	return this;
 }
 

diff --git a/Android/Control/assets/www/js/InterfaceManager.js b/Android/Control/assets/www/js/InterfaceManager.js
@@ -59,56 +59,94 @@ function InterfaceManager() {
             }
         }, 1000);
     }
-
-    // width and height are provided to function from Java to avoid bugs in screen.width / screen.height in Android 2.2 and 2.3
+    // assumes portrait; _width will always be less than _height
     this.rotationSet = function(_width, _height) {
+        //control.makePages(pages, screen.width * r, screen.height * r);
+        PhoneGap.exec(null, null, "DeviceFeatures", "getScale", []);
+        //PhoneGap.exec(null, null, "DeviceFeatures", "print", ["h:" + screen.height + " || w: " + screen.width]);
         PhoneGap.exec(null, null, "DeviceFeatures", "print", ["pixelRatio = " + window.devicePixelRatio]);
-
-        console.log("WINDOW.INNERWIDTH = " + window.innerWidth + " || window.innerheight = " + window.innerHeight);
-        console.log("WINDOW DPI = " + window.devicePixelRatio);
         var r = 1 / window.devicePixelRatio;
-        console.log("width = " + _width + " || height = " + _height);
-        console.log("width = " + screen.width * r + " || height = " + screen.height * r);
-
         var w, h;
-        // change w / h depending on orientation
+            // change w / h depending on orientation
         if(control.orientationString == "portrait") {
             w = _width; h = _height;
         }else{
             w = _height; h = _width;
-        }
+        }   
+        // froyo / gingerbread
+        console.log("DEVICE VERSION = " + device.version);
+        if(parseFloat(device.version) >= 2.2 && parseFloat(device.version) < 3.0) {
+            console.log("inside froyo / gingerbread");
+            console.log("width = " + _width + " height = " + _height);
+
+            $("#SelectedInterfacePage").css({
+                                'width':  w  + 'px',
+                                'height': h  + 'px',
+                                'display': 'block',
+                                'overflow': 'visible',
+                                'top':  0, 
+                                'left': 0
+            });
+            $("#selectedInterface").css({
+                        'width':  w  + 'px',
+                        'height': h  + 'px',
+                        'display': 'block',
+                        'overflow': 'visible',
+                        'top':  0,
+                        'left': 0
+            });
 
-        $("#SelectedInterfacePage").css({
-                            'width':  w  * r + 'px',
-                            'height': h * r + 'px',
-                            'display': 'block',
-                            'overflow': 'visible',
-                            'top':  0, 
-                            'left': 0
-        });
-        $("#selectedInterface").css({
-                    'width':  w  * r + 'px',
-                    'height': h * r + 'px',
-                    'display': 'block',
-                    'overflow': 'visible',
-                    'top':  0,
-                    'left': 0
-        });
-
-        control.makePages(pages, w * r, h * r);
-        //control.makePages(pages, screen.width, screen.height);
+            control.makePages(pages, w * r, h * r);
+        }else{ // android 2.1 / honeycomb
+            console.log("SCALE = " + window.interfaceManager.scale);
+            console.log("WINDOW DPI = " + window.devicePixelRatio);
+            PhoneGap.exec(null, null, "DeviceFeatures", "print", ["width = " + screen.width + " || height = " + screen.height]);
+            $("#SelectedInterfacePage").css('height', 'auto');
+            // $("#SelectedInterfacePage").css({
+            //                     'width':  screen.width  * r + 'px',
+            //                     'height': screen.height * r + 'px',
+            //                     'display': 'block',
+            //                     'top':  0,
+            //                     'left': 0
+            // });
+            PhoneGap.exec(null, null, "DeviceFeatures", "print", ["PAGE " + $("#SelectedInterfacePage").css("height")]);
+            // document.getElementById("selectedInterface").style.display = "block";            
+            // document.getElementById("selectedInterface").style.height = "auto";
+            $("#selectedInterface").css({
+                                   'background-color': '#ccc',
+                                   'display': 'block',                                   
+                                   'width':  '5',
+                                   'height': '5',
+                                   'overflow': 'hidden',
+                                   'top':  0,
+                                   'left': 0
+                       });
+            PhoneGap.exec(null, null, "DeviceFeatures", "print", ["interface height = " + $("#selectedInterface").css("height")]);
+
+            PhoneGap.exec(null, null, "DeviceFeatures", "print", ["after setting css"]);
+            control.makePages(pages, w * r, h * r);
+            PhoneGap.exec(null, null, "DeviceFeatures", "print", ["interface height = " + $("#selectedInterface").css("height")]);
+
+        }
+
         if (constants != null) {
             control.loadConstants(constants);
         }
+        PhoneGap.exec(null, null, "DeviceFeatures", "print", ["interface height = " + $("#selectedInterface").css("height")]);
+
 
         control.loadWidgets();
+        PhoneGap.exec(null, null, "DeviceFeatures", "print", ["interface height = " + $("#selectedInterface").css("height")]);
 
-        if (this.currentTab != document.getElementById("selectedInterface")) {
+        if (control.currentTab != document.getElementById("selectedInterface")) {
             control.changeTab(document.getElementById("selectedInterface"));
             $.mobile.changePage('#SelectedInterfacePage');
         }
+        control.isLoadingInterface = false;
+        PhoneGap.exec(null, null, "DeviceFeatures", "print", ["interface height = " + $("#selectedInterface").css("height")]);
+
     }
-
+    
     this.promptForInterfaceDownload = function() {
         var interfacesDiv = document.getElementById("Interfaces");
         var promptDiv = document.createElement("div");
@@ -359,22 +397,25 @@ function InterfaceManager() {
     }
 
     this.runInterface = function(json) {
-        control.unloadWidgets();
-        constants = null;
-        pages = null;
+        if(!control.isLoadingInterface) {
+            control.unloadWidgets();
+            constants = null;
+            pages = null;
 
-        oscManager.delegate = oscManager;
-        midiManager.delegate = midiManager;
+            oscManager.delegate = oscManager;
+            midiManager.delegate = midiManager;
 
-        eval(json);
+            eval(json);
 
-        this.currentInterfaceName = loadedInterfaceName;
-        this.currentInterfaceJSON = json;
+            this.currentInterfaceName = loadedInterfaceName;
+            this.currentInterfaceJSON = json;
 
-        if (typeof interfaceOrientation != "undefined") {
-            control.orientationString = interfaceOrientation;
-            //console.log("ROTATING ****************************" + interfaceOrientation);
-            PhoneGap.exec(null, null, "DeviceFeatures", "setOrientation", [interfaceOrientation]); // the plugin calls the rotationSet method after it's finished rotating which loads in widgets, sets screen resolution etc.
+            if (typeof interfaceOrientation != "undefined") {
+                control.orientationString = interfaceOrientation;
+                //console.log("ROTATING ****************************" + interfaceOrientation);
+                PhoneGap.exec(null, null, "DeviceFeatures", "setOrientation", [interfaceOrientation]); // the plugin calls the rotationSet method after it's finished rotating which loads in widgets, sets screen resolution etc.
+            }
+            control.isLoadingInterface = true;
         }
     }
 

diff --git a/Android/Control/assets/www/textmate.tmproj b/Android/Control/assets/www/textmate.tmproj
@@ -3,98 +3,100 @@
 <plist version="1.0">
 <dict>
 	<key>currentDocument</key>
-	<string>js/ControlAccelerometer.js</string>
+	<string>index.html</string>
 	<key>documents</key>
 	<array>
 		<dict>
 			<key>filename</key>
 			<string>js/Control.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T22:36:33Z</date>
+			<date>2011-07-18T23:31:37Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>index.html</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T23:01:01Z</date>
+			<date>2011-07-18T23:31:37Z</date>
+			<key>selected</key>
+			<true/>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/OSCManager.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T21:28:35Z</date>
+			<date>2011-07-18T07:31:07Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/Bonjour.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T00:34:28Z</date>
+			<date>2011-07-18T22:31:18Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/DeviceFeatures.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T00:34:06Z</date>
+			<date>2011-07-18T07:54:00Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/Widget.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-05T19:34:02Z</date>
+			<date>2011-07-18T21:22:29Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/phonegap.0.9.4.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T21:27:23Z</date>
+			<date>2011-07-18T07:28:10Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/DestinationManager.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T19:18:03Z</date>
+			<date>2011-07-18T21:23:04Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/InterfaceManager.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T21:03:12Z</date>
+			<date>2011-07-18T23:31:34Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/PreferencesManager.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-05T20:05:10Z</date>
+			<date>2011-07-18T22:54:12Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>../../src/com/charlieroberts/Control/Bonjour.java</string>
 			<key>lastUsed</key>
-			<date>2011-07-10T23:25:16Z</date>
+			<date>2011-07-18T07:28:15Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>../../src/com/charlieroberts/Control/Control.java</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T22:36:02Z</date>
+			<date>2011-07-18T07:43:54Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>../../src/com/charlieroberts/Control/DeviceFeatures.java</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T19:44:00Z</date>
+			<date>2011-07-18T23:10:39Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>../../src/com/charlieroberts/Control/OSCManager.java</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T21:30:24Z</date>
+			<date>2011-07-18T21:22:23Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
 			<string>js/ControlAccelerometer.js</string>
 			<key>lastUsed</key>
-			<date>2011-07-11T23:52:50Z</date>
+			<date>2011-07-18T06:53:40Z</date>
 		</dict>
 		<dict>
 			<key>filename</key>
@@ -111,8 +113,6 @@
 		<dict>
 			<key>filename</key>
 			<string>js/MultiButton.js</string>
-			<key>selected</key>
-			<true/>
 		</dict>
 	</array>
 	<key>fileHierarchyDrawerWidth</key>
@@ -131,16 +131,16 @@
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
-			<integer>42</integer>
+			<integer>53</integer>
 		</dict>
 		<key>../../src/com/charlieroberts/Control/Control.java</key>
 		<dict>
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>37</integer>
+				<integer>9</integer>
 				<key>line</key>
-				<integer>17</integer>
+				<integer>38</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
@@ -152,14 +152,14 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>69</integer>
+				<integer>28</integer>
 				<key>line</key>
 				<integer>56</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
-			<integer>0</integer>
+			<integer>17</integer>
 		</dict>
 		<key>../../src/com/charlieroberts/Control/OSCManager.java</key>
 		<dict>
@@ -180,14 +180,14 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>8</integer>
+				<integer>67</integer>
 				<key>line</key>
-				<integer>65</integer>
+				<integer>211</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
-			<integer>13</integer>
+			<integer>0</integer>
 		</dict>
 		<key>interfaces/gyro.js</key>
 		<dict>
@@ -208,44 +208,28 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>38</integer>
+				<integer>47</integer>
 				<key>line</key>
-				<integer>6</integer>
+				<integer>11</integer>
 			</dict>
-			<key>columnSelection</key>
-			<false/>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
 			<integer>0</integer>
-			<key>selectFrom</key>
-			<dict>
-				<key>column</key>
-				<integer>25</integer>
-				<key>line</key>
-				<integer>6</integer>
-			</dict>
-			<key>selectTo</key>
-			<dict>
-				<key>column</key>
-				<integer>38</integer>
-				<key>line</key>
-				<integer>6</integer>
-			</dict>
 		</dict>
 		<key>js/Control.js</key>
 		<dict>
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>30</integer>
+				<integer>33</integer>
 				<key>line</key>
-				<integer>16</integer>
+				<integer>23</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
-			<integer>176</integer>
+			<integer>0</integer>
 		</dict>
 		<key>js/ControlAccelerometer.js</key>
 		<dict>
@@ -310,9 +294,9 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>85</integer>
+				<integer>4</integer>
 				<key>line</key>
-				<integer>14</integer>
+				<integer>13</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
@@ -324,23 +308,23 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>11</integer>
+				<integer>20</integer>
 				<key>line</key>
-				<integer>26</integer>
+				<integer>107</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
-			<integer>3</integer>
+			<integer>84</integer>
 		</dict>
 		<key>js/OSCManager.js</key>
 		<dict>
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>28</integer>
+				<integer>1</integer>
 				<key>line</key>
-				<integer>149</integer>
+				<integer>22</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
@@ -382,44 +366,28 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>23</integer>
+				<integer>0</integer>
 				<key>line</key>
 				<integer>143</integer>
 			</dict>
-			<key>columnSelection</key>
-			<false/>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
 			<integer>89</integer>
-			<key>selectFrom</key>
-			<dict>
-				<key>column</key>
-				<integer>10</integer>
-				<key>line</key>
-				<integer>143</integer>
-			</dict>
-			<key>selectTo</key>
-			<dict>
-				<key>column</key>
-				<integer>23</integer>
-				<key>line</key>
-				<integer>143</integer>
-			</dict>
 		</dict>
 		<key>js/phonegap.0.9.4.js</key>
 		<dict>
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>6</integer>
+				<integer>4</integer>
 				<key>line</key>
 				<integer>487</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
-			<integer>479</integer>
+			<integer>472</integer>
 		</dict>
 	</dict>
 	<key>openDocuments</key>
@@ -445,6 +413,6 @@
 	<key>showFileHierarchyDrawer</key>
 	<true/>
 	<key>windowFrame</key>
-	<string>{{1019, 271}, {1284, 1147}}</string>
+	<string>{{14, 0}, {1640, 1028}}</string>
 </dict>
 </plist>
diff --git a/Android/Control/src/com/charlieroberts/Control/Control.java b/Android/Control/src/com/charlieroberts/Control/Control.java
@@ -28,7 +28,8 @@ public void onCreate(Bundle savedInstanceState)
          getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN ); 
          getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); 
 
-         super.loadUrl("file:///android_asset/www/index.html");
+         //super.loadUrl("file:///android_asset/www/index.html");
+         super.loadUrl("http://192.168.1.6/~charlie/www/index.html");         
          super.appView.setWebChromeClient(new EclairClient2(this));
 
          // TODO: the line below seems to create better multitouch, but it also makes some errant calls every once in a while...

diff --git a/Android/Control/src/com/charlieroberts/Control/DeviceFeatures.java b/Android/Control/src/com/charlieroberts/Control/DeviceFeatures.java
@@ -48,7 +48,14 @@ public PluginResult execute(String action, JSONArray data, String callbackId) {
             		}
 
     		        if(action.equals("setOrientation")) {
-                        String jsString = "javascript:window.interfaceManager.rotationSet("+ webView.getWidth() + "," + webView.getHeight() + ");";
+    		            float w = webView.getWidth();
+    		            float h = webView.getHeight();
+    		            String jsString = "";
+    		            if(w < h) {
+                            jsString = "javascript:window.interfaceManager.rotationSet("+ w + "," + h + ");";
+                        }else{
+                            jsString = "javascript:window.interfaceManager.rotationSet("+ h + "," + w + ");";
+                        }
                         //System.out.println(jsString);
                         webView.loadUrl(jsString);
                         //System.out.println("after sending to js");