Contents:

I. The basics
II. Tags
III. Math and Conditionals
IV.Tags List
I. THE BASICS

When you open facer for the first time You are greeted with a lovely
welcome screen

When you swipe you will be prompted to select your watch

Why is this important? when you are

using facer you will have a
blank ‘canvas’ to work on, this canvas
is dependent on what kind of watch
you have. For this tutorial we will be
using the Moto 360 canvas, but the
only difference between the different
types is in the sizing and alignment, so
anything made for one watch can be
re-sized and aligned for another.

There are several buttons you are greeted with upon opening facer

First is ‘My Watchfaces’ this is where all of the watch faces you have
made and downloaded will be saved.

Second is ‘Featured Watchfaces’ this is were featured faces are posted by

the dev so you can easily download them and add them to your
collection.

Once you go into ‘My watcfaces’ You are greeted to all of your watch
faces, and a few different menu items.
 The ‘ + ‘ button allows you to create a new watch face, which
shows up as a blank square titled ‘Untitled WtachFace’

The button next to it allows you to add a watch face from your
phone, these files are usually .face or .zip files, located in your
downloads folder. If you want to download cool faces you can
try Facerepo.

the three dots next to it are for settings, there you can choose to
enable weather data, which allows you to synch weather based
on location. You can also edit the frequency with which the data
are synchronized with the face, the temperature scale, and it
allows you to set a manual location.

Once you have created a new watchface you may press the dots
on the canvas to get started.

You will be greeted with your blank canvas. If you press the second button
on the top (the one that looks like sheets of paper) you will enter the layer
page.

Here you can press the ‘+’ button to add

either an Image, a shape, or text.
I’ll walk you through making a basic analog watchface. You
need three things to begin with, a PNG image for your hour
hand, another for the minute hand, and the background
image, whic needs to be at least 320 pixels large.

Once you have chosen them, go ahead and save them to your phone, the gallery can be accessed
through facer when you are making your watch face.

Now when you click on the ’+’ button and add an image you will be greeted with this:
First I will explain each one of these
sections, then we’ll add the image.

X offset- where your image is on the x-

axis Y offset- where your image is on the
y axis Rotation- How and when your
image rotates (important for watch
hands) Opacity- the degree of
translucence to your image, scale it down
to make things more opaque, of use
conditionals to make them disappear
unless certain conditions are met.
Alignment- where the anchor for the
image is set, if it is the centre of the
image then you can align your image to x-
160 and y-160 and have it centred

The width and Height of the image can be scaled once you have selected your
background image.

When you select your background image play around with the alignment, x
offset and Y offset. For a background image center and x-160, y-160 is generally
used. For different images you can change them though, so explore a bit!

Here we have the image centred and scaled to 320x320

pixels, this is enough to fill the background.

I then add two new images, One for the Hour hand and
another for the minute hand.
Once you add your watch hand you can press the layers button to see it over you
background.

adjust the height and width to what you desire.

Because this is
a watch hand
we will be
working with
the Rotation
value. Go
ahead and
Press the ?
button.

You will find three options there: Tags, Math, and Conditionals (I’ll explain math
and conditionals a bit further down, so for now just press Tags)

Here you find all of the Tag values used in Facer. These tags allow you to make
content rich watchfaces. For now the only value we need is the Hour and
Minute hand rotations (you can also find them in the list below).

When making watch hands always make sure the are pointing Up to the 12 mark
on a watch, this will allow you to align them easily.

When you press the value that you want it will be copied to the clipboard,
allowing you to easily copy and paste tags into your different sections.

For this face use #DWFM# for the minute hand rotation and #DWFKS# for the
hour hand rotation.
 When you have finished adjusting your Hour hand it should look
something like this:

The Width and Height are adjusted. The X and Y offset are centered wit
the alignment, and the Rotation Value has the tag you are using in it.

Repeat this with the minute hand, using the value #DWFM# for its
rotation.

For this watchface I also made a new shape. A circle, centred at

160x160, color: black and width x height: 7x7. this acts as a visual Pivot
point for the watch hands.

In the end you should have a simple analog face a bit like this:

You can rename it whatever you want and send it over

to your watch to test at any moment using the third
button on the top, the one with the arrow.
 II. TAGS

Tags are values that the app can read and that allow you to truly customize your WatchFace. They can
be used to display anything from the time to your battery percentage to the weather!

Some tags are a bit different than others in that they do not define a specific time or day but a
rotational value. These rotational value tags (marked in dark purple) are integers that define the
rotation of a hand in your watch face as opposed to telling you specifically what time or what minute it
is.

Another that should be explained is the weather icon values. These can be used to display Icons for
different weather status. In order to do this you must give each image a specific value, right now the
weather conditions available are:

Code Condition

01 clear sky

03 clouds

10 rain

11 thunderstorm

13 snow

50 Foggy

When defining an image to use to display a weather condition use a statement similar to this in the
opacity field:

$#WCCI#=01?80:0$

This means that when #WCCI# the weather condition icon is equal to 01(clear sky) the the Image opacity
will be 80(i.e. visible) and if not then the opacity will be 0. If this syntax is confusing to you check out the
Math and Conditionals section after this.
 III. MATH AND CONDITIONALS

Right now math in face is limited to just basic operators (+, -, *, /, %) on (floats) and [integers]. This
allows you to do basic math in all of the fields above.

You’ll understand a bit more of the mat that can be used when we go over conditionals.

Conditional data allows you to have dynamic information based on tags.

Statements are usually built like this:

$ TAG [OPERAND] RIGHT ? TRUE : FALSE$

The operand can be

=

!=

<

>

<=

>=

So for example, if you want an image to be displayed at twelve, you would use a formula like this one
in the opacity field:

$#DH#=12?100:0$

This is basically saying:

$#when hour in the day# = 12? set opacity to 100 : else set it to
zero$

So when the time is twelve o’clock then the image will be displayed, any other time the image opacity
is set to zero.

Conditional Statements such as these can be used in any of the text fields in Facer, allowing you to
adjust X and Y values, Opacity, rotation, and even width and height of an image!

You can also use up to three conditional statements at a time, to do this simple use:

|| as Or
&& as and

For example if we take the statement we made earlier

$#DH#=12?100:0$

and decide we want the image to be displayed until 7 pm, we could use multiple conditionals to do
so. We would need to create a similar statement in the opacity field saying if the time is greater than
twelve, but less than eight the image opacity should be 100, else it is 0.

To do so we can type

$#DH#>12&&#DH#<8?100:0$

in the opacity field.

Notice the && in between the two statements. This means that if statement one AND statement two
are equal, then the statement will read its true value, the 100 opacity.

Now this same statement could use the ‘or’ instead of ‘and’, the statement would read:

$#DH#>12||#DH#<8?100:0$

If the hour is greater than twelve OR it is less than eight, i.e. seven then set opacity to 100 else set it to
0.

The statement read similar to the use of ‘and’ but in this case only one statement needs to be true for
the conditional statement to be met, and give the ‘true’ value. in this case the image would Always be
displayed, because there would always be a time value Less than or equal to sever OR greater than or
equal to twelve.

Another example can be changing time zones on a watch had, to display different time zones.

If you live in Pacific time but also want a smaller hand to point out the time in Eastern time, you will
use math to set the conditions for the rotation. The hour hand has to be three hours different from
the current time.

If you use:

(((#Dh#*30)+(#Dm#*0.5))+90)

For The hour hand you are stating:

$(((#Hour in day (0-23)# times 30) plus (#minute in day# times 0.5))
plus 90)$

the ((#Dh#*30)+(#Dm#*0.5)) part allows you to have an hour hand that moves with the hour,
just as the tag #DWFKS# does. the + 90 is because three hours is 90 degrees, allowing you to adjust
for your time zone.

Next you will find a list of tags. These are available in the app itself, but this can be a convenient place to
check when you are planning out a Watch Face.
IV.Tags List

TIME

Tag Definition Example

#Dy# year 2014
#Dyy# year 14
#Dyyyy# year 2014
#DM# month in year 10
#DMM# month in year 10
#DMMM# month in year oct
#DMMMM# month in year october
#DW# week in month 2
#Dw# week in year 41
#DD# day in year 281
#Dd# day in month 8
#DE# day of week wed
#DEEEE# day of week wednesday
#DF# day of week in month 2
#Da# Am/Pm am
#Dh# Hour in day Am/Pm 7
#Dk# hour in day 1-24 7
#DH# hour in day 0-23 7
#DK# hour in day Am/Pm (0-11) 07
Hour in day w/ Leading zero
#DHZ# (00-23) 07
Hour in day w/ Leading zero
#DkZ# (01-24) 07
Hour in day Am/Pm wit
#DKZ# leading zero (00-11) 07
Hour in day Am/Pm with
#DhZ# leading zero (01-12) 07
Value for hour hand
#DhoT# rotation(12 hour) 330
Value for hour hand
#DhoTb# rotation(24 hour) 165
 Value for hour hand
#DWFK# rotation(12 hour, wareface) 330
Value for hour hand
#DWFH# rotation(24 hour, wareface) 165
#DhT# String value hour (12hr) SEVEN
#DkT# String value hour (24hr) SEVEN
#Dm# minute in hour 55
minute in hour w/ leading
#DmZ# zero 55
Value for minute hand
#DmoT# rotation 330
Value for minute hand
#DWFM# rotation (wear face image) 330
#DmT# string value for minutes FIFTY FIVE
string value for minutes (tens
#DmMT# place) FIFTY
string value for minutes
#DmST# (ones place) FIVE
#Ds# Second in minute 4
Second in minute w/ leading
#DsZ# zero 04
Value for second hand
#DseT# rotation 306
Value for second hand
#DWFS# rotation (wearface) 54
#Dz# timezone EDT
EASTERN
DAYLIGHT
#Dzzzz# timezone TIME

BATTERY

#BLP# Battery Level % 73%

#BLN# Bettery Level Integer 73
#BTC# Battery Temp Celcius 32C
#BTI# Battery Temp Farenheit 90F
#BTCN# Battery temp celcius integer 32
Bettery Temp farenheit
#BTIN# integer 90
#BS# Battery Charging Status not charging
ANDROID WEAR

#ZLP# Low power mode false

#ZSC# Step count 1240

WEATHER

upper
#WLC# Location washington
#WTH# Todays High 71
#WTL# Todays low 61
#WCT# Current temp 72
#WCCI# Current condition icon 01
#WCCT# Current condition text fair
#WCHN# current humidity number 53.0
#WCHP# current humidity percentage 53%
#WFAH# Forecast hday 1 high 71
#WFAL# Forecast day 1 low 61
#WFACT# Forecast day 1 condition text Showers late
Forecast day 1 condition
#WFACI# icon 11
#WFBH# Forecast hday 2 high 71
#WFBL# Forecast day 2 low 41
AM
thunderstorm
#WFBCT# Forecast day 2 condition text s
Forecast day 2 condition
#WFBCI# icon 11
#WFCH# Forecast hday 3 high
#WFCL# Forecast day 3 low
#WFCCT# Forecast day 3 condition text
Forecast day 3 condition
#WFCCI# icon
#WFDH# Forecast hday 4 high
#WFDL# Forecast day 4 low
#WFDCT# Forecast day 4 condition text
Forecast day 4 condition
#WFDCI# icon
#WFEH# Forecast hday 5 high
 #WFEL# Forecast day 5 low
#WFECT# Forecast day 5 condition text
Forecast day 5 condition
#WFECI# icon
#WFFH# Forecast hday 6 high
#WFFL# Forecast day 6 low
#WFFCT# Forecast day 6 condition text
Forecast day 6 condition
#WFFCI# icon
#WFGH# Forecast hday 7 high
#WFGL# Forecast day 7 low
#WFGCT# Forecast day 7 condition text
Forecast day 7 condition
#WFGCI# icon

These are the basics of Facer!! if you want to learn more checkout r/Facer on reddit, it has this nice Wiki
that has some tutorials, and if you can't find an answer there feel free to make a post! For more info on
face check out http://facerandroid.com/.