Integrating FontAwesome on watchkit

The aim of this post is integrating FontAwesome on watchkit extension target. Font Awesome gives you scalable vector icons. This font has many advantages. First, a would dare to say that you will find the icon that you were looking for in its catalog. Second, that if you do not need more than one color, instead of placing an image resource you will be placing a character. Could y0u  figure it out how much space are you saving up?. And third, that you will not have problem on scaling because it is a vector image.

The base project

For setup the base project just follow the instructions from a previous post. You have to add the 3 necessary files for integrating font awesome, at the end of this post you will find the link to the project on GitHub.

Integrating FontAwesome on watchkit

 

And be sure that NSString+FontAwesome.m file is ready for the following targets.

targetsase

 

For both targets, be sure that:

1. In project properties>watchkitFontAweSome extension>BuildPhases>Copy Bundle Resources is included FontAwesome.ttf.

addfonttotarge

 

2. Add the following key array in the Info.plist file:

Fonts provided by application > Item 0 String FontAwesome.ttf

infoplist

 

You could also edit the source code and add the following xml snippet:

 Repeat the two steps for the other target.

Let’s code

Add a text label in the storyboard where we will print some icon with the new font:

interfacecontro

 

Link the label to an IBOutlet in InterfaceController.m

iboutlet2

Add the following snippet for adding some text to the label:

In my case I have decided to put it on the willActivate method from InterfaceController.m. Basically what I am doing here is setting an attributed text, where fa-cloud-upload is the name of the icon that I am interested in showing. Finally, I am setting FontAwesome for the first character of the string, the rest of the string is presented with the default font.

Run the target extension.

targetextension

 

 

If you did not missed any step you should have to see the following in the simulator:

demofont

As you can see the fa-cloud-upload symbol has been shown at the beginning of the text. You can also download this project from Github.

Image animations on Watchkit sdk

The aim of this post is just showing how to do a simple image animation. I have been investigating if it was possible to make animations in Watchkit using CALayer class, as in normal iPhone and iPad apps, but it has not been possible. The possibilities that provides UI in the Watchkit are very very poor, I figure it out that apple guys are fixing that.

The base project

For setup the base project just follow the instructions from a previous post. Add in the main scene the image that will hold the animation.

Image animations on Watchkit

Link the image to an IBOutlet.

IBOUTLETImage animations on Watchkit

 

Now we will add the images used for the animation:

Image animations on Watchkit

Add the following lines to the watch kit interface view controller:

And Finally run the target:

Image animations on Watchkit

If the instructions were followed you should have to see something like this:

Image animations on Watchkit

 

If you had any doubt about what I have explained, you can find this project on Github.

Communication between Apple Watch and iPhone app

The aim of this post is to show a possible mechanism for implementing the communication between Apple Watch and iPhone app. After trying several methods: CoreData, NSKeyedUnarchiver and NSUserDefaults, I have decided to chose NSUserDefault because it was the most simplified one. I would recommend the other two just in case that you wanted to share bigs amounts of data.

The application that I am going to create will show in the watch screen the value of a counter, that is increased (or decreased) from the iPhone app. Before continuing, be sure that you are working with Xcode 6.2, otherwise you will not be able to create a watchkit extension.

Create a new Single View project

Create a new Single View Application project:

Communication between Apple Watch and iPhone app

Communication between Apple Watch and iPhone app

 

Go to project properties>Capabilites>App Group, turn it on and create a new group:

Communication between Apple Watch and iPhone app

 

In the iPhone app storyboard we will add another label and a stepper:

Communication between Apple Watch and iPhone app

 

Add an action method for the stepper and leave it in blank by the moment, we will fill it later.

Communication between Apple Watch and iPhone app

The watch kit extension

Go to File>New>Target…>iOS>Apple Watch

Communication between Apple Watch and iPhone app

Communication between Apple Watch and iPhone app

 

And go to project properties, select the target extension (E), select Capabilities, turn on App Groups and select the group that you created before:

Communication between Apple Watch and iPhone app

 

Now we will place the label in the watch kit storyboard that will show the value of the counter.

Communication between Apple Watch and iPhone app

 The common data

I have created a new group on top the project hierarchy and added a module called Model, that is where I will place the common data.

Communication between Apple Watch and iPhone app

 

VERY IMPORTANT: Be sure that those files are assigned for both targets:

Communication between Apple Watch and iPhone app

 

Now is time to fill the stepper action method that we have created previously and do not forget the #import:

Now let make an stop in the path for checking if stepper is updating the counter. Select watchkitCounter target and any iPhone simulator and press the play button for running the app in the iPhone:

Communication between Apple Watch and iPhone app

 

Click on the stepper for assuring that label updates with counter value:

Communication between Apple Watch and iPhone app

 

Next step is to fill in the watch kit extension interface controller:

 

I have initialised the label when the form is loaded and program a timer for pulling the data. Finally build and execute the target watchkitCounter Watch App:

Communication between Apple Watch and iPhone app

 

Once the simulator is on you will see that the app is not running, this is normal. Be sure that apple watch simulator is also on screen, if does not go to iOS Simulator>Hardware>External Displays>Apple Watch (and re-run):

Communication between Apple Watch and iPhone app

 

Do not get nervous, if you see blank screen on watch kit simulator, on my computer (Mac-mini 16GB+SSD) takes almost 10 seconds for starting up. Once is on, you will see that watch-simulator refreshes the value of the counter, but the iPhone simulator does not start up the iPhone app, next step is select the iPhone app play with the stepper and observe how counter in the watch-simulator is being updated.

Communication between Apple Watch and iPhone app

 

And that is all!. In case that you had any doubt or something were not properly explained, you can download the demo project from here. I hope that this post would be useful and clarified your doubts, please feel free to send me any comment or amend.