Zooper - Part 2

I realized the redundancy of Part 1 after I put it up. I mean, how easy would it be to just hit the question mark in the top right corner? Developers add these things to make things easier for their users and the Zooper support page does an excellent job of taking care of that.

I'm not going to hold your hand...much.

Chances are that you know what you're doing and I'm not going to force through the basics. As I said in my first post, you're a themer, right?

So now that we've figured out where all the pieces are on the board, let's play...

I'm going to do a walkthrough to create a pretty simple clock widget, and instead of listing off the different parameters and what they do, I'm going to try to include as many different features as possible. This way if you don't already know how to do something you can learn, and if you do, you won't get bored.

Let's begin by creating a widget on your home screen. Depending on which launcher you're using you may need to resize the widget. I'm using Nova Launcher Prime with labs enabled and big grid size options selected (16 rows, 9 columns, no margins) but you can use whatever you prefer.

Please note that not all devices have the same pixel density, so you may need to adjust the size values in your widget accordingly. My phone has a PPI of 320 and although that's fairly standard, my values may be different from yours. Also, if you're unlocked and rooted, running a custom ROM or have Xposed Framework Modules like GravityBox or XBlast Tools installed, you may need to adjust for things like expanded desktop mode or different navbar heights.

Anyway...

Create a 7x2 (or largest size available) Zooper widget on your home screen. If your widget doesn't reach the edge of your grid, resize it horizontally so it fills the whole screen to both edges. Using my settngs, my widget size changes to 9x2. Open the interface and set Widget Background to #00000000. Tap Layout, then the plus sign in the top right to add a module. For this one we're going to use Rich Text.

Set your screen anchor to Center Left, and change your X Offset value to 20.

Tap Edit Text Manually, clear out the default text and input this string:

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

All Zooper variables are contained within two '#' symbols. Different variables start with different capital letters. Date and time will always begin with #D...#, just as battery is #B...# and calendar variables are #C...#

The #Dh:mm# variable will give you the time of day. If you were to use a capital H instead it would display in the 24-hour format. 2 H's (capitalized or not) will add a 0 before the first number if the first number is only one digit. The mm part of variable will give you the minutes in the hour. Capitalizing those however will return the current month as a two digit number.

#Da# returns AM or PM depending on the time of day and the [sr=0.5]...[/sr] markup sets the relative size of the text in half. If you were to set that to a different number like 2, the size would be doubled. Pretty neat, eh?

Scroll down a bit and change your font size to 50. Then select Text Font Family and change your font to Roboto Thin. What's that you say? You don't have that font?

Download the entire Roboto font family here. (Except Roboto Slab. That one you can find on your own.)

Just unzip the file and copy the desired .ttf files into your Zooper Fonts folder. It should be located under sdcard/ZooperWidget/Fonts. You can do this with any .ttf file you wish to use. I'm just going to leave a link to a really handy file explorer right here to make this whole process that much more enjoyable.

On to the second part of the widget. Add a Rich Text module and set the Screen Anchor to Top Right. X and Y Offsets to 20. Slide on down to Edit Text Manually and input this string:

#DMMMM# [no]#Dd#[/no], #Dy#
#BLEV#$#BSTAT#=Charging? - #BSTAT#$

If you're reading this on a phone and are seeing three lines, switch to landscape. There's two. Seriously, I'm not crazy.

#DMMMM# returns the current month in all it's glory. Three M's give the short form, two M's give the numerical value with two digits (starting with 0 if less than 10), one M returns one digit.

#Dd# gives you the day of the month. #DD# would give you the day of the year. You have been warned!

The [no]...[/no] markup makes the ordinal form of any number it's placed around, and trust me this the first of may times you'll use it.

#Dy# returns the full year. You'll probably never need to remember this one since you're going to change your home screen at least another hundred times before the year is out.

#BLEV# returns the current battery level with the % symbol. If you add an N on the end to make it #BLEVN# it'll return just the number. #BSTAT# returns whether the phone is charging, discharging, or charged. The N added to this one returns a number value, but that just gets way too confusing.

Make sure there are no spaces between the # and the $. This will just mess with everything.

Conditionals are a very useful addition to widget creation with Zooper. To begin, you start your string with a $. This essentially becomes your 'if.' So a string that starts with $#BSTAT# means 'If the Battery Status.' Next comes the condition. You can use = or != for matches/equals or doesn't match/equal, respectively. Of course you can also use <, >, as well as +, -, /, *, as long as they're within a pair of parentheses and && (and) or || (or). You can have A LOT of fun with this. So, where were we? $#BSTAT#=Charging, (make sure to capitalize Charging since #BSTAT# will return Charging and we want to match it) means ’If the Battery Status is Charging.' The question mark is our 'then' followed by what the string should return. In this case (and this is why we didn't add the space before, right?) it would be ' - #BSTAT#.' I had you skip the space because this module is anchored on the Top Right so a space, when not used within a conditional string, would cause alignment issues that'll make you cringe a little bit.

So there's our conditional. In English: 'If the Battery Status is Charging then return the Battery Status.' Close it up with another $ to seal the deal, and you're done! There's no need to add an 'else' since Zooper won't return anything if the condition isn't met. Although, if you were to include one in a future widget, you would use a : to denote an otherwise return event. Such as: 'If ($) the temperature (#WTEMP#) is smaller (<) than 0, then return (?) "put on a coat" otherwise return (:) "Should be OK for shorts..." Then finish with a $. This is of course just an example, and I definitely don't recommend shorts anywhere below 10°C...and even that's pushing it.

When you're all done you should have something that looks like this:

That's it! One overcomplicated guide to creating your first widget. See you next time!