Enabling VNC In Mac OS X

Mac OS X has a VNC server built in. You just need to enable it. These steps work in OS version 10.6.4.

Open System Preferences.

image

Click Sharing.

image

Check Remote Management.

image

Check appropriate permissions as shown below.

image

Click OK.

Click Computer Settings.

image

Enable VNC and set a password.

image

Click OK.

That’s all!

You can monitor the VNC server process in the Activity Monitor tool as shown below.

image

Caveat! Not all is well with Mac’s VNC server. Watch out for these:

  1. Copy and paste between windows and Mac does not work. In fact, the moment you copy text in Windows, the VNC server crashes (and restarts) in Mac.
  2. File transfer does not work.

WebSphere Commerce 6.0 Install Problem

This morning, I was setting up a test machine with WebSphere Commerce 6.0 Express. I proceeded with typical installation. The installer kept giving error message about Windows user ID password – “User password entered is incorrect”.

This was most frustrating to say the least. I was entering the correct user ID and password. The user belonged to the Administrators group.

The solution was to install DB2 first. DB2 installer most probably adds the correct rights to the user.

Then, I did a custom install of Commerce. Typical install was not possible since DB2 was already installed. Things went smoothly.

Converting Mouse Event Coordinates to Canvas Coordinate

The coordinate system of a HTML5 canvas object starts with 0,0 in its upper left hand corner. Coordinate system for a mouse event object, on the other hand, is highly ambiguous. QuirksMode has a detail discussion on this topic. If you are developing an interactive drawing application, you will need to convert mouse event coordinates to the coordinate system of a canvas.

Based on the QuirksMode article, I developed these utility methods that can do the conversion. I have only tested this with FF 3.6.8.

/*
 * Get mouse event coordinate converted to canvas coordinate
 * c: The canvas object
 * e: A mouse event
 */
function toCanvasX(c, e) {
  var posx = 0;
  
  if (e.pageX)   {
    posx = e.pageX;
  } else if (e.clientX)   {
    posx = e.clientX + document.body.scrollLeft
      + document.documentElement.scrollLeft;
  }
  posx = posx - c.offsetLeft;
  return posx;
}

function toCanvasY(c, e) {
  var posy = 0;
  
  if (e.pageY)   {
    posy = e.pageY;
  } else if (e.clientY)   {
    posy = e.clientY + document.body.scrollTop
      + document.documentElement.scrollTop;
  }
  posy = posy - c.offsetTop;
  
  return posy;
}

Below is an example application that uses these methods. This is perhaps one of the simplest interactive drawing applications using HTML 5 canvas.

<!DOCTYPE html>
<html>
<head>
<title>Canvas Test</title>

<script type="text/javascript">
// globals
var x = 0;
var y = 0;

function init() {
	var canvas = document.getElementById('canvas');
	canvas.addEventListener("mousedown", drawLine, false);
}

/*
 * Get mouse event coordinate converted to canvas coordinate
 * c: The canvas object
 * e: A mouse event
 */
function toCanvasX(c, e) {
  var posx = 0;
  
  if (e.pageX)   {
    posx = e.pageX;
  } else if (e.clientX)   {
    posx = e.clientX + document.body.scrollLeft
      + document.documentElement.scrollLeft;
  }
  posx = posx - c.offsetLeft;
  return posx;
}

function toCanvasY(c, e) {
  var posy = 0;
  
  if (e.pageY)   {
    posy = e.pageY;
  } else if (e.clientY)   {
    posy = e.clientY + document.body.scrollTop
      + document.documentElement.scrollTop;
  }
  posy = posy - c.offsetTop;
  
  return posy;
}

function drawLine(e) {
  var posx = toCanvasX(this, e);
  var posy = toCanvasY(this, e);
  var ctx= this.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(posx, posy);
  ctx.stroke();
  
  x = posx;
  y = posy;
}
</script>

</head>

<body onload="init();">

<canvas id="canvas" width="500" height="500" style="border: 1px dotted;">
      This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>