Advanced Configuration

To create a new a new FlowViewInnerWindow style variable, all you will need is an update and a draw function. The update function will need to have the following variables as inputs.

update = function (x, y, w, h)

This allows for on each update to know where your drawing functionality is.

The draw function will need to have the following inputs.

draw = function (ctx)

ctx will be the drawing 2d context from the canvas.

Now for some of the caveats. Both of these caveats apply to the FlowViewElement and FlowViewInnerWindow.
  • The update function will only happen if the mouse button is down and is moving OR the mouse button is up and movement is happening (this means that if the mouse is down but movement is not occurring, then we are NOT going to update). The only other place would be if init is NOT 0. The reason that we do this is to cut down on the number of times that we are actually running through the updates. We do this again because if we don't we can end up killing CPU by updating too many times.
  • The draw function will only happen if FlowView.update() returns true (meaning that we will need to redraw) OR if init is NOT 0. Since drawing is immensely expensive we do this to make sure that we are not killing the CPU. Also, we draw at a maximum (FlowView.updatetime * 2) to ensure that we are NOT killing the CPU.

NOTE: When testing using this functionality, it should be noted that upwards of 40% CPU can be used when moving through the flow by BOTH Firefox as well as Xorg in Linux. Since the redrawing goes through your webbrowser; the context drawing occurs at that level and the underlying OS must then redraw the application. As such, we need to make sure that we are limiting the amount of time that the CPU is getting beaten down.

Last edited Dec 19, 2010 at 3:24 AM by Suroot, version 1


No comments yet.