degliwe · February 17, 2017 15:01 · Jan 9, 2015 · Dec 22, 2014 · Dec 22, 2014 · Dec 22, 2014
diff --git a/0_sensorface_anim.gif → 0_Add some depth to your WatchFace.gif b/0_sensorface_anim.gif → 0_Add some depth to your WatchFace.gif
diff --git a/1_readme.md → 1_Add some depth to your WatchFace.md b/1_readme.md → 1_Add some depth to your WatchFace.md
diff --git a/1_readme.md b/1_readme.md
@@ -82,7 +82,7 @@ public void onDraw(Canvas canvas, Rect bounds) {
 ```
 
 ##Conclusion
-I can already see many sues for this, like realistic lightning to make "classic" wtach face even more realistic and shiny, but also more abstract or experimental animated faces, like a spaceship hud...
+I can already see many use for this, like realistic lightning to make "classic" wtach face even more realistic and shiny, but also more abstract or experimental animated faces, like a spaceship hud...
 
 This is it, you are all set.
 I can't wait to see the great interactive watch faces you will make and the creative unexpected uses for this.

diff --git a/z_sensorface_anim.gif → 0_sensorface_anim.gif b/z_sensorface_anim.gif → 0_sensorface_anim.gif
diff --git a/2_readme.md → 1_readme.md b/2_readme.md → 1_readme.md
@@ -3,8 +3,6 @@
 Since the early days of Android wear, I wanted to try to make more interactive faces.
 I think the various sensors offer a great opportunity to implement realistic light, giving more depth to your watch face.
 
-![animated gif](https://gist.github.com/degliwe/cb115278fbb62065e76e/raw/e9b3c09895b1785615cae936e8d59f2a81ba6f6f/1_sensorface_anim.gif)
-
 In case you don't know what this is about, you can give it a try here from the sample I've uploaded to the playstore:
 https://play.google.com/store/apps/details?id=com.deglise.sensorface
 

diff --git a/z_banner.png b/z_banner.png
diff --git a/2_readme.md b/2_readme.md
@@ -3,7 +3,7 @@
 Since the early days of Android wear, I wanted to try to make more interactive faces.
 I think the various sensors offer a great opportunity to implement realistic light, giving more depth to your watch face.
 
-
+![animated gif](https://gist.github.com/degliwe/cb115278fbb62065e76e/raw/e9b3c09895b1785615cae936e8d59f2a81ba6f6f/1_sensorface_anim.gif)
 
 In case you don't know what this is about, you can give it a try here from the sample I've uploaded to the playstore:
 https://play.google.com/store/apps/details?id=com.deglise.sensorface

diff --git a/0_banner.png → z_banner.png b/0_banner.png → z_banner.png
diff --git a/1_sensorface_anim.gif → z_sensorface_anim.gif b/1_sensorface_anim.gif → z_sensorface_anim.gif
diff --git a/banner.png → 0_banner.png b/banner.png → 0_banner.png
diff --git a/sensorface_anim.gif → 1_sensorface_anim.gif b/sensorface_anim.gif → 1_sensorface_anim.gif
diff --git a/README.md → 2_readme.md b/README.md → 2_readme.md
diff --git a/banner.png b/banner.png
diff --git a/sensorface_anim.gif b/sensorface_anim.gif
diff --git a/anim.gif b/anim.gif
diff --git a/anim.gif b/anim.gif
diff --git a/README.md b/README.md
@@ -0,0 +1,92 @@
+#Add some depth to your WatchFace
+
+Since the early days of Android wear, I wanted to try to make more interactive faces.
+I think the various sensors offer a great opportunity to implement realistic light, giving more depth to your watch face.
+
+
+
+In case you don't know what this is about, you can give it a try here from the sample I've uploaded to the playstore:
+https://play.google.com/store/apps/details?id=com.deglise.sensorface
+
+
+## Implement SensorEventListener
+
+The very first thing to do is to implement SensorEventListener, and then declare a SensorManager, sensorX and sensorY as described below.
+
+```java
+private class Engine extends CanvasWatchFaceService.Engine implements SensorEventListener{
+
+  SensorManager sensorMgr;
+  float sensorX;
+  float sensorY;
+
+  ...
+}
+```
+
+## @Override
+Implementing SensorEventListener, requires you to provide onSensorChanged and onAccuracyChanged method as shown below.
+
+```java
+@Override
+public void onSensorChanged(SensorEvent event) {
+
+  // Reading raw value
+  // todo smoothen things
+  sensorX=event.values[0];
+  sensorY=event.values[1];
+
+}
+
+@Override
+public void onAccuracyChanged(Sensor sensor, int accuracy) {
+  //You can keep it empty
+}
+```
+
+##Register & unregister sensor
+You want the sensor to be on as soon as your watchface is shown but you also don't want your face to lock the sensor when the screen is off or when another app may need the sensor...
+
+Then onVisibilityChanged seems the best place to achieve that.
+
+```java
+@Override
+public void onVisibilityChanged(boolean visible) {
+  super.onVisibilityChanged(visible);
+
+  if (visible) {
+    registerSensor();
+  } else {
+    unregisterSensor();
+  }
+}
+
+private void unregisterSensor() {
+  sensorMgr.unregisterListener(this);
+}
+
+private void registerSensor() {
+  sensorMgr = (SensorManager) getSystemService(getBaseContext().SENSOR_SERVICE);
+  sensorMgr.registerListener(this, sensorMgr.getDefaultSensor(Sensor.TYPE_ACCELEROMETER), SensorManager.SENSOR_DELAY_NORMAL);
+}
+```
+
+##Time to draw!
+From the onDraw method, you can now, access the sensorX,sensorY to alter position of the element on the canvas.
+
+```java
+@Override
+public void onDraw(Canvas canvas, Rect bounds) {
+  // Draw digital minutes.
+  canvas.drawText(minuteString, x+sensorX, mYOffset+sensorY, mShadowPaint);
+  canvas.drawText(minuteString, x, mYOffset, mTimePaint);
+}
+```
+
+##Conclusion
+I can already see many sues for this, like realistic lightning to make "classic" wtach face even more realistic and shiny, but also more abstract or experimental animated faces, like a spaceship hud...
+
+This is it, you are all set.
+I can't wait to see the great interactive watch faces you will make and the creative unexpected uses for this.
+
+Feel free to share the result of your experiments with me.