     height = width
   $('#hubo_container').width(width)
   $('#hubo_container').height(height)
-  hubo.canvas.resize(width, height)
+  c.resize(width, height)
+
+# Add the FPS counter
+addStats = () ->  
+  stats = new Stats()
+  stats.setMode(0); # 0: fps, 1: ms
+  $('#hubo_container').append(stats.domElement)
+  stats.domElement.style.position = 'relative'
+  stats.domElement.style.cssFloat = 'right'
+  LIVE.stats = stats
 
 #
 # MAIN
 #
 $( document ).ready () ->
   #
+  # Setup live data feed
+  #
+  LIVE.connectToServer()
+
+  #
   # Setup GUI
   #
-  window.stats = new Stats()
-  stats.setMode(0); # 0: fps, 1: ms
-  $('#hubo_container').append(stats.domElement)
-  stats.domElement.style.position = 'relative'
-  stats.domElement.style.float = 'right'
-
+  addStats()
+
+  #
+  # Setup Hubo-in-the-Browser
+  #
+  c = new Hubo.DefaultCanvas("#hubo_container")
+  adaptCanvasSize(c);
+
+  # Deal with tablet screen orientation and window resizes
   $(window).on('orientationchange resize', () ->
     # I added a delay to this effect because I found that the size recalculation
     # is more reliable if we wait a moment after the orientation change.
-    setTimeout(adaptCanvasSize, 500)
+    setTimeout(adaptCanvasSize(c), 500)
   );
 
-  #
-  # Setup Hubo-in-the-Browser
-  #
-  # I appologize that this cannot be done with CSS.
-  size = Math.min($(window).width(), $(window).height())
-  $('#hubo_container').width(size)
-  $('#hubo_container').height(size)
-  c = new Hubo.DefaultCanvas("#hubo_container")
-
-  window.texture = THREE.ImageUtils.loadTexture('checkerboard.png', THREE.Linear)
+  # Create a floor
+  texture = THREE.ImageUtils.loadTexture('checkerboard.png', THREE.Linear)
   texture.wrapS = THREE.RepeatWrapping;
   texture.wrapT = THREE.RepeatWrapping;
   texture.repeat.x = 20;
   texture.repeat.y = 20;
-
-  window.hubo = new Hubo("hubo2", callback = ->    
-    hubo_loaded = true;
+  floorG = new THREE.PlaneGeometry(20, 20)
+  floorM = new THREE.MeshBasicMaterial({map: texture})
+  LIVE.floor = new THREE.Mesh(floorG, floorM)
+  LIVE.floor.overdraw = true;
+  c.scene.add(LIVE.floor);
+
+  hubo = new Hubo("hubo2", callback = ->
     # Once the URDF is completely loaded, this function is run.
     # Add your robot to the canvas.
     c.add hubo

use_socket = true;
connection_established = false;
hubo_loaded = false;

setUpdateHook = () ->
  if (connection_established and hubo_loaded)
    if (use_socket)
      socket.on 'serial_state', (serial_state) ->
        # console.log(serial_state)
        window.serial_state = serial_state
        # LED status indicator
        flashLED()
        updateModel(serial_state)

connectToServer = () ->
  if connection_established
    return
  if (use_socket)
    console.log('Trying to connect to server...')
    window.socket = io.connect(':6060', {'force new connection':true, timeout: 3000})
    socket.on 'connect', () -> 
      console.log('connect')
      connection_established = true
      setUpdateHook()
    # Debugging
    socket.on 'connecting', () -> console.log('connecting')
    socket.on 'disconnect', () -> console.log('disconnect')

    # hubo.canvas.controls.target=new THREE.Vector3(0,0,-0.4);
    hubo.autorender = false
    $("#load").hide()

    # Create FT display axes
    if not hubo.ft?
