Monday 17 February 2014

Zooper Now - The Google Home Screen (Part 1 - Header and Clock Setup)

So, it's been a while. How's everybody doing? I meant to get this up sooner but some unforseen (read: bonehead) circumstances involving flashing the newest SlimKat update and not creating backups set me back a little bit. Regardless, here we are...

Zooper Now - The Google Home Screen (Part 1 - Header and Clock Setup)

This is going to take some time, so buckle up kids.
You're going to need to stock up on a few things before we begin (if you don't already have them):


The last three are optional, however these are the ones I will be using. You can easily switch out Hangouts for something like WhatsApp or BBM, Google+ for Facebook or Twitter, or Gmail for Outlook or...Gmail? I'm sure you'll be able to figure out what to do, although if you're still using BBM, I must say, I have my doubts.

Please be advised that my PPI is set to 320 so it should match most phones, but as I mentioned in an earlier post, yours may be different. I've enable Labs (Hold down the Volume Down button for a couple seconds in Nova Settings) in Nova Launcher and enabled Big Grid Size Options so my Desktop Grid can be set to 16 x 9. I've also removed all Apps, Shortcuts and Widgets, and Disabled the Dock. You may also need to set a Gesture to open your App Drawer. Please note I'm also using the new and improved SlimPie instead of the standard Navigation Bar and Expanded Desktop Mode to hide my Status Bar. Those of you using phones with onscreen navigation will run into issues if you don't have some way of accomplishing this as well.

We'll start with the obvious one: The Search Widget. 

We're going to attempt to replicate Google Now, so we need to download a few resources before we begin. Here you can find the Google Now Header images, here you can download the Google font and here you can grab the Roboto Font Family . Here I've uploaded a cropped image of the Google Now microphone, or you can try to track one down or crop it yourself if you're feeling lucky. Once you've got the header images, use a file explorer to rename them to the appropriate time of day - Dawn, Day, Dusk, and Night. For my widget I used the default mountains, but you can choose whichever location suits your fancy, as long as you download each different time of day. Also, be sure to copy the .ttf files to the Zooper Widget Fonts folder.

Create a 7 x 2 Zooper Widget at the top of your screen, and resize it to 9 x 4. Open it up and set the Widget Background to #fff0f0f0. Tap Layout and add a Bitmap. Change your Widget Name to 'Night,' Screen Anchor to Center Top, Find your Night header image, and set the Scale to 50. Then go back and add another one. Repeat the same process as above but instead choose your Dusk header and rename it appropriately. This time, we're going to scroll down to Advanced Parameters and input this string:

$#DH#<(#ASH#+2)?[oy]0[/oy]:[oy]-500[/oy]$

This checks if the current hour (24-hour format) is less than two hours after today's sunset hour (24-hour format too). If it is, the image will stay where it is. If not, it will move off the screen.

Next add another Bitmap for the Day header. Rename it Day and scale it to 50, then in advanced parameters input:

$#DH#<#ASH#?[oy]0[/oy]:[oy]-500[/oy]$

This one is different because it will move off screen at sunset, instead of two hours later.

For Dawn, the process is the same, with the Advanced Parameter string:

$#DH#<(#ARH#+2)?[oy]0[/oy]:[oy]-500[/oy]$

This will keep the Dawn header image on the screen until two hours after sunrise.

You need to add a second Night bitmap and name it Night 2. If you don't things might get confusing...maybe. Input this string into the Advanced Parameters:

$#DH#<#ARH#?[oy]0[/oy]:[oy]-500[/oy]$

We need to include the second one so that the Dawn header won't appear too soon. Since the Dawn header is set to appear any time less than two hours after sunrise, as soon as the clock strikes midnight, your phone will say that the sun's coming up.

Next we'll add a white Rectangle. Fairly straightforward - Center Top anchor, Y Offset at 35, Width to 335, Height to 40. Corners to 2 to make it pretty, Shadow Blur to 10, Shadow Y Offset to 3 and Shadow Colour to #40000000. Under Module OnTap Action, swipe over to App List and select Google. Like I said, fairly straightforward.

Add Rich Text (or Text, it really doesn't matter), anchored on the Top Left, X Offset to 25, Y Offset to 40. Edit the text manually so it says Google and change the Font Size to 25 and Family to Catull (you downloaded that right?) Colour is #ffaaaaaa.

Finally, we'll add the microphone bitmap I so graciously provided for you (aren't I such a hero?) with the anchor set to Top Right, X Offset at 15 and Y Offset to 35. You don't need to worry about scaling this one, but under Module OnTap Action, choose Voice Search.

Make sure to Disable the Widget OnTap Action before you finish or else you'll open the Widget Configuration every time you try to perform a text search. Then, return to your home screen and take a look! You should have something that looks like this:


Add another 7 x 2 Zooper Widget directly below that last one, but this time resize it to 9 x 3.

Add a Rectangle. White. Width: 330. Height: 100. Corners: 2. Blur: 10. Shadow Y Offset: 3. Shadow Colour: #40000000. From here on out, all rectangles we make will have the same Width, Corners, and Shadow Values. Just saves me some time writing it out again. Don't forget.

Rich Text (it matters this time) - Bottom Left Anchor. X Offset: 30. Y Offset: 15. Font Size: 50. Colour: #ffaaaaaa. Family: Roboto Light, and change the text to:

#Dh#:Dmm#[sr=0.5]#Da#[/sr]

Next, Text/Rich Text - Top Left anchor, X Offset: 30, Y Offset: 25, Font Size: 20, Colour: #ffaaaaaa. Leave the Family where it is. Change text to:

#DMMMM d, y#

Add a Text/Rich Text with a Bottom Right Anchor, X Offset: 30, Y Offset: 23, Size: 20, Colour: #ffaaaaaa, Leave the family where it is again, and change the text to:

#BLEV#$#BSTATN#=2||5?+$

The above string will return a + beside the battery level if the battery is Charging (2) or(||) Full (5), otherwise it will simply show your batter level.

Finally add a Text with a Top Right anchor, X Offset: 20 and Y Offset: 30. Change the Module OnTap Action to the Clock app change the text to ... with a font size of 20. Colour is #ffaaaaaa, change the Font Family to Roboto-Black and Rotate to 90.

Just as above, disable the Widget OnTap Action then return to your home screen. Voila!


 Finally, for now, we'll add the More button at the bottom of the screen. Widget size is 9 x 2. Rectangle (remember what I told you earlier) has a Height of 60. Add a Text Module and change the text to say More. Font Size: 15, Colour: #ffaaaaaa, and Family: RobotoCondensed-Italic. Set the Widget OnTap Action to Shortcuts, Nova Launcher, App Drawer. I guess you didn't need a Gesture after all...

Here's where we're at so far:


We've made a lot of progress, but we're not done yet. Stay tuned for Part 2 where the fun really begins. We still need to fill up that empty space in middle, and we'll need Tasker, AutoNotification and AutoVoice to do it. As you can probably tell from the screenshot (and the gradual deterioration of my writing) above, it's time to hit the hay, but we'll be back soon with Zooper Now - The Google Home Screen (Part 2 - Notifications and Voice Control).

No comments:

Post a Comment