Alternative 4x4 Launcher - Larger Icons and Text

[onlinespending]

I wanted to have a 4x4 Launcher layout, but wasn't happy with the patches currently available. The icons and text are resized too small for my tastes, especially on the relatively small screen size of the Pre.

I spent a while tweaking the parameters of two launcher files to create a 4x4 launcher layout that keeps the icons the same size as the originals and reduces the font size by only 1 point (from 14px to 13px). It wraps the app title as well.

UPDATE (10/14/2009): I fixed the missing page indicator on the right, and believe to have fixed the down arrow appearing even when a page has no more than 16 icons. Only launcher-assistant.js has changed.

I encourage someone to create a patch based on my 4x4 layout and add it to the Preware patches feed. You're even more than welcome to take credit for the patch.


/usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js

--- launcher-assistant.js.orig	Mon Oct 12 21:08:49 2009
+++ launcher-assistant.js	Wed Oct 14 10:15:05 2009
@@ -10,8 +10,8 @@
 	 */
 	kQuickLaunchHeight: 67,
 	
-	kPageIndicatorSpacing: 6, 	/* spacing between each page indicator */
-	kPageMargin: 10, /* 10 pixel margin on each side of a page */
+	kPageIndicatorSpacing: 1, 	/* spacing between each page indicator */
+	kPageMargin: 0, /* 0 pixel margin on each side of a page */
 	kPageWidthNoMargin: NaN,
 	kPageWidth: NaN,
 	kAppsPerRow: NaN,
@@ -89,7 +89,8 @@
 
 		// pre-calculate commonly used measurements
 		this.kPageWidth = $('launcher_root').getWidth();
-		this.kPageWidthNoMargin = (this.kPageWidth - this.kPageMargin * 2);
+		this.kPageWidthNoMargin = (this.kPageWidth - 20);
 		
 		// setup the initial dimensions for launcher/global-search
 		this.adjustLayout();
@@ -322,9 +323,9 @@
 		var newAppDiv = $(newAppInfo.launchPointId);
 		Mojo.assert(newAppDiv !== undefined, "Application (%d) was inserted into the DOM but unable to be retrieved!", newAppInfo.launchPointId);
 		if (isNaN(this.kAppWidth) || isNaN(this.kAppHeight)) {
-			this.kAppWidth = newAppDiv.getWidth();
-			this.kAppHeight = newAppDiv.getHeight();
-			this.kAppsPerRow = Math.round(this.kPageWidthNoMargin / this.kAppWidth);
+			this.kAppWidth = 80;
+			this.kAppHeight = 92;
+			this.kAppsPerRow = 4;
 		}
 		
 		Mojo.listen(newAppDiv, Mojo.Event.tap, this.onAppTapped.bindAsEventListener(this));
@@ -437,8 +438,8 @@
 	/* determines the position of an app element at appIndex within a page */
 	calculateAppPosition: function(appIndex) {
 		return {
-			left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) + this.kPageMargin),
-			top: (Math.floor(appIndex/this.kAppsPerRow) * this.kAppHeight)
+			left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) - 10),
+			top: ((Math.floor(appIndex/this.kAppsPerRow) * this.kAppHeight) - 8)
 		};
 	},

/usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css

--- launcher.css.orig	Mon Oct 12 21:05:19 2009
+++ launcher.css	Mon Oct 12 21:08:34 2009
@@ -121,16 +121,17 @@
 
 .launcher_page .name {	
 	position:absolute;
-	top: 68px;
-    width:100px;
-	height: 34px;
-	max-height: 34px;
+	top: 62px;
+	left: 11px;
+    width:78px;
+	height: 28px;
+	max-height: 28px;
     clear:both;
-	line-height:16px;
+	line-height:13px;
     color:white;
     text-align:center;
 	font-weight:bold;
-    font-size: 14px;	
+    font-size: 13px;	
 	overflow: hidden;
 	text-overflow: ellipsis;
 	z-index:5;

[icesalmon]

Good job. That looks amazing.

[2sslow]

Originally Posted by onlinespending

I wanted to have a 4x4 Launcher layout, but wasn't happy with the patches currently available. The icons and text are resized too small for my tastes, especially on the relatively small screen size of the Pre.

I spent a while tweaking the parameters of two launcher files to create a 4x4 launcher layout that keeps the icons the same size as the originals and reduces the font size by only 1 point (from 14px to 13px). It wraps the app title as well.

I encourage someone to create a patch based on my 4x4 layout and add it to the Preware patches feed. You're even more than welcome to take credit for the patch.


/usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js

--- launcher-assistant.js.orig	Mon Oct 12 21:08:49 2009
+++ launcher-assistant.js	Mon Oct 12 21:13:52 2009
@@ -10,8 +10,8 @@
 	 */
 	kQuickLaunchHeight: 67,
 	
-	kPageIndicatorSpacing: 6, 	/* spacing between each page indicator */
-	kPageMargin: 10, /* 10 pixel margin on each side of a page */
+	kPageIndicatorSpacing: 1, 	/* spacing between each page indicator */
+	kPageMargin: 0, /* 0 pixel margin on each side of a page */
 	kPageWidthNoMargin: NaN,
 	kPageWidth: NaN,
 	kAppsPerRow: NaN,
@@ -322,9 +322,9 @@
 		var newAppDiv = $(newAppInfo.launchPointId);
 		Mojo.assert(newAppDiv !== undefined, "Application (%d) was inserted into the DOM but unable to be retrieved!", newAppInfo.launchPointId);
 		if (isNaN(this.kAppWidth) || isNaN(this.kAppHeight)) {
-			this.kAppWidth = newAppDiv.getWidth();
-			this.kAppHeight = newAppDiv.getHeight();
-			this.kAppsPerRow = Math.round(this.kPageWidthNoMargin / this.kAppWidth);
+			this.kAppWidth = 80;
+			this.kAppHeight = 92;
+			this.kAppsPerRow = 4;
 		}
 		
 		Mojo.listen(newAppDiv, Mojo.Event.tap, this.onAppTapped.bindAsEventListener(this));
@@ -437,8 +437,8 @@
 	/* determines the position of an app element at appIndex within a page */
 	calculateAppPosition: function(appIndex) {
 		return {
-			left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) + this.kPageMargin),
-			top: (Math.floor(appIndex/this.kAppsPerRow) * this.kAppHeight)
+			left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) - 10),
+			top: ((Math.floor(appIndex/this.kAppsPerRow) * this.kAppHeight) - 8)
 		};
 	},

/usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css

--- launcher.css.orig	Mon Oct 12 21:05:19 2009
+++ launcher.css	Mon Oct 12 21:08:34 2009
@@ -121,16 +121,17 @@
 
 .launcher_page .name {	
 	position:absolute;
-	top: 68px;
-    width:100px;
-	height: 34px;
-	max-height: 34px;
+	top: 62px;
+	left: 11px;
+    width:78px;
+	height: 28px;
+	max-height: 28px;
     clear:both;
-	line-height:16px;
+	line-height:13px;
     color:white;
     text-align:center;
 	font-weight:bold;
-    font-size: 14px;	
+    font-size: 13px;	
 	overflow: hidden;
 	text-overflow: ellipsis;
 	z-index:5;

Try pming emoney_33 or rwhitby and see if they will submit this!!!!

[dBsooner]

Creating a patch for it now. I will get it into the Webos-Patches feed.

P.S. Please post all Patch related threads in the PATCH subforum. Thank you.

[onlinespending]

Originally Posted by dBsooner

Creating a patch for it now. I will get it into the Webos-Patches feed.

P.S. Please post all Patch related threads in the PATCH subforum. Thank you.

Thanks! Just noticed the recently new Patch subforum. Mods, please move this to the WebOS Patch forum.

[jack87]

Originally Posted by onlinespending

Thanks! Just noticed the recently new Patch subforum.

it is official dBsooner is the patch guy here on out.. look he even has a tittle.

[milominderbinder]

Originally Posted by onlinespending

I wanted to have a 4x4 Launcher layout, but wasn't happy with the patches currently available. The icons and text are resized too small for my tastes, especially on the relatively small screen size of the Pre....

Originally Posted by dBsooner

Creating a patch for it now. I will get it into the Webos-Patches feed.

P.S. Please post all Patch related threads in the PATCH subforum. Thank you.

@Online - Thank You! I love this layout. I too like 4x4 but hate the tiny font.

@dsooner - Thank you! What is this patch named?

- Craig

[DretheAce]

Awesome, I can't wait for this to show up.

[dBsooner]

Patch has been created and added to the WebOS-Patches feed (hint: Preware). It is titled "4x4 Icons v3" in the App Launcher category.

BTW: This is my default App Launcher size now. Great job!

[TreoRock]

I don't think it is available yet.

[onlinespending]

Originally Posted by dBsooner

Patch has been created and added to the WebOS-Patches feed (hint: Preware). It is titled "4x4 Icons v3" in the App Launcher category.

BTW: This is my default App Launcher size now. Great job!

Thanks! And I am flattered you're already using it.

[jack87]

onlinespending

very well done!

[dBsooner]

Originally Posted by TreoRock

I don't think it is available yet.

"Update Feeds". Preware Menu->Update feeds. And remember to REMOVE the old before installing the new.

[joetemp75]

i want to thank you guys. i friggin love the community here

[Freshyz]

This patch falls in the category of:

'I didn't know I would need this until it became available.'

Big thanks to those responsible!


(and on a side note, when is the 'squarify screen' patch through PW ever going to happen? Hint Hint)

[ericizzy1]

this is a great patch. thank you.

[Change]

Originally Posted by Freshyz

This patch falls in the category of:

'I didn't know I would need this until it became available.'

Big thanks to those responsible!


(and on a side note, when is the 'squarify screen' patch through PW ever going to happen? Hint Hint)

Yes please! The squarify patch is much desired via preware.

[dBsooner]

Originally Posted by Change

Yes please! The squarify patch is much desired via preware.

Originally Posted by Freshyz

(and on a side note, when is the 'squarify screen' patch through PW ever going to happen? Hint Hint)

It will happen when someone steps up as the "maintainer" of the patch. I am too busy with simply maintaining the builds and verifying all is there correctly.

If someone wants to be the maintainer of a patch, or has a link to an updated patch, let me know via PM or email. (Hint: look under my contact details). With the forums so large, it is hard for me to comb through everything finding updated patches when they are buried deep in threads. I am going to make some forum rules later. Just been lazy today.

[nethan]

Awesome. I was digging the 4x4 but the small size was bothering me. And then presto! Well done onlinespending.

[Change]

I have to say, this makes the app launcher so much better with the larger icons. Great job onlinespending!