Create, Edit & Install A Custom Watch Face for the Gear 2 Neo

This is not a full blown, how to program tutorial. It's a simple "Getting started with Tizen SDK for Wearables"

First, you will need to Download and Install the Tizen SDK for Wearables.

Once installed, Start the Tizen IDE.

We need to make a quick emulator to emulate our Gear 2 Neo.

On the lower left panel, the Connection Explorer, click on the first icon to start the Emulator Manager.
Click "Add New".
Choose a Name in the Detail panel, ie 'Gear2Neo'
Change the 'Density' to 278. Leave the rest of the settings default.
Click [Confirm]
Give it a moment to create your emulator.
Now your Gear 2 Neo emulator has been created.

Start your emulator by clicking the blue 'Play/Run' button at the bottom of your newly created emulator.
You can minimize the Connection Explorer now.

Once the emulator starts, you can choose to right click on it, and click "Always on top"

Next, Maximize the Tizen IDE.

Let's start playing with a sample project.

Click File > New > Tizen Wearable Web Project.
In the new window, click Sample > Web App > ClockWidget > and choose a Project name (ie. MyWatchFace)

You will now be back to the Tizen IDE and you will have a project (MyWatchFace?) in the Project Explorer.
Double click on the name of the project and you will see the project files.
You can edit these with custom images and code or you can just test the stock project.
At the top of the Tizen IDE, click on the green Play/Run button. This will install and start the project on the emulator. It will also build a file in your Project Explorer named the same as your project, but ending with a .wgt extention. In this case, MyWatchFace.wgt. This file can be pushed directly to your Gear 2 via USB using SDB.

At this point you should have a pretty plain and simple black watchface on your emulator thanks to the sample we just built, but let's add a custom background.

Make a custom 320x320 pixel image to use as a background with photoshop, gimp, etc. I'll name mine 'mywatchface.jpg'. Now paste it into your Project Explorer.

While you are in the Project Explorer, double click on the css folder.

Next, double click on the style.css to open that style file.

Locate the background: #000 line and replace it with this line.. background: url(../mywatchface.jpg);

Click the Save icon to save the style.css.

Click the green Play/Run button to install and build the new version.

If you don't see the new watch face load immediately on the emulator, you may need to go into settings on the emulator and select the new watch face.

Now that we have played with the ClockWidget sample and edited the css to add a custom background, we can play around with java coding and more down the road, but let's put this watch face onto our Gear 2 Neo.

You will need to copy the MyWatchFace.wgt file that was built in the Project Explorer into the same directory that your SDB.exe is located... (ie. C:\Tizen\tizen-wearable-sdk\tools)

It's easier if you make sure that the emulator is no longer running.

Turn on USB Debugging (Settings/Gear Info) and then plug your watch into your PC/Laptop via USB.

If you have issues with your computer detecting your watch, you may need to install the Samsung USB drivers for your watch.

Start a CMD Prompt

Switch to the directory with the SDB.exe and MyWatchFace.wgt

Run a simple test to see if the watch is being seen..

Type: sdb devices

If you get an error, something is wrong. You should see "List of devices attached" and one should be a series of numbers and letters and display as "SM-R381"

Now that you know the device can be seen, you can push your watch face to the Gear 2 Neo.

Type: sdb install MyWatchFace.wgt

You will see text scroll by and then it will indicate that it is done. You should now have a new watch face on your watch!!

To manually uninstall the watch face, you will need to look at in your Project Explorer, Open the config.xml and click the Source tab at the bottom to locate the package id for this app.. In my case, it's package="rlfNgozRkA"

Type: sdb uninstall rlfNgozRkA

Now have fun. Share your experiences, ask questions.. and most of all.. Share your custom watch faces here for everyone. As a community we can all help each other learn how to program for our Tizen wearables.

<- Please click Thank You!

markbc01 said:

Thank you for this .. . it is a great way for us to start!

I actually would like to make a 24 hour analogue watch face --something like military time or international time, but to start off this will be very helpful!

I noticed when I DL the Tizen SDK, I thought it asked me to install Java --how much of that do I need to install (there seem to be several Java options for my Windows 7 64bit system! Or, can I skip that?

sorry to bug you with such a basic question, but I am trying to get it right step-by-step! :good:

Click to expand...

Click to collapse

I already had Java JDK installed, but you can grab it here if you need it...

http://www.oracle.com/technetwork/java/javase/downloads/jdk-7-netbeans-download-432126.html

Once installed, you will probably want to put it into your Environmental Variables.. Just right click on the "This PC" icon on your desktop. Then click 'Properties' and then 'Advanced System Settings', then click the [Enviromental Variables] button. Scroll down until you find PATH. It should have a several paths, add the following to the beginning... C:\Program Files\Java\jdk1.7.0_51\bin; (Note that this path will depend on where you installed the Java JDK and the version)

You can save it. To test it.. Open a CMD Prompt and type javac and if you get an error, something didn't work.

neonfreak20 said:

Awesome, Thanks for taking the time to make this :victory:

Click to expand...

Click to collapse

It was my pleasure. I am learning too.. but I figured I would share what I learn so that we can all learn together..

.
.

ex-28 said:

thank you soo much for this , had this installed for a while now been playing around a bit but this has been so helpful.


only problem I have is my background image isn't showing up ,
I have background: url(../mywatchface.jpg); set in the style.css and pasted "mywatchface.jpg" into "mywwatchface" project but when I set the above and hit save then the green start, it loads however the watch emulator that is open doesn't change , and I have no errors in the problems box.

Click to expand...

Click to collapse

Is the image the proper size (320 x 320)? Are you sure you saved it as a jpg? (If you save as a png or something else, you will need to edit the background url.) Are you sure the mywatchface.jpg is in the root of your project and not in the css or js folder? Are you sure there is no typo in your style.css?

I noticed that in your comment, there is a typo in your project name. Is there a typo in your project name or only in your comment above?

ex-28 said:

type only in comment as far as I see. and I belive the image is in the correct folder.

mywatchface.jpg looking at it it was at 320x240 changed it now to 320x320.
testing in a second here

yup same results wont load the background I just see the black background with a white digital watch and the date under it as in screenshot.

sorry I attached screenshot now forgot it.

Click to expand...

Click to collapse

What are the settings in your emulator?

ex-28 said:

thank you soo much for this , had this installed for a while now been playing around a bit but this has been so helpful.

Click to expand...

Click to collapse

What version of the Tizen for Wearables IDE are you running? Version : 1.0.0b1 ?

ex-28 said:

helps if I select the watch face I guess.,. lol now I get it , thank you soo much

Click to expand...

Click to collapse

Glad we got it sorted out. Enjoy.. After you get it tweaked the way you like, give it a custom name and feel free to share your watchface.wgt here for everyone to try out.

ex-28 said:

maybe add that to the op that once you make the changes you have to go into settings on the emulator and select the new watch face , lol , I just had a brain fart moment there. but totally forgot and maybe helpful for new users

Click to expand...

Click to collapse

Done.

Here are a couple very basic animated analog watch faces as samples..

.

ex-28 said:

only problem I had I was getting an error so I deleated my project compleatlly and started over , but its still throwing the same error.

when I click on the green Play/Run button to start the project under problems window I have Description Resource Path Location Type
Expected '===' and instead saw '=='. main.js /MyWatchFace/js line 135 JavaScript Problem

it highlights this if (e.keyName == 'back') {

removed and restarted it again and same thing. any ideas ?
this is happening before I make any changes to any files , and just following the steps in op

Click to expand...

Click to collapse

That makes no sense, first because there was no change made to the main.js, and secondly because that is the eventListener and it should be '==' and not '==='