Add a fps-counter widget to some Sky demos

sky/examples/touch-demo.sky

 <sky>
-<div id="log">Ready</div>
+<import src="fps-counter.sky" />
+<style>
+dot {
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    background-color: #00FF00;
+}
+</style>
+<dot />
+<log>Ready</log>
+<x-fps-counter />

[ojan, 2015/01/15 18:54:57]

Does this work? Shouldn't this just be fps-counter?

[abarth-chromium, 2015/01/15 19:09:38]

Oops.  We did this to comment it out.  I'll add it back.

 <script>
+var dot = document.querySelector("dot");
+var log = document.querySelector("log");
+
 function logTouchEvent(evt) {
   var message = "type=" + event.type;
-  if (evt.touches && evt.touches.length > 0)
-    message += " x=" + evt.touches[0].clientX + " y=" + evt.touches[0].clientY;
-  document.getElementById("log").textContent = message;
+  if (evt.touches && evt.touches.length > 0) {
+    var x = evt.touches[0].clientX.toFixed(2);
+    var y = evt.touches[0].clientY.toFixed(2);
+    message += " x=" + x + " y=" + y;
+
+    var transform = "translate(" + (x - 50)  + "px," + (y - 50) + "px)";
+    dot.style.transform = transform;
+  }
+  log.textContent = message;
 }
 
 document.documentElement.addEventListener("touchstart", logTouchEvent);
 document.documentElement.addEventListener("touchmove", logTouchEvent);
 document.documentElement.addEventListener("touchend", logTouchEvent);
 document.documentElement.addEventListener("touchcancel", logTouchEvent);
 </script>
 </sky>
+s

[esprehn, 2015/01/14 23:48:54]

typo