This project is read-only.

Basic Configuration

We're going to cover some of the more basic configuration options that exist. All of these are variables that exist under the variables themselves.

FlowView Variable
  • w - Width of the flow view.
  • h - Height of the flow view.
  • offset - Distance from the top of the canvas to the flow view.
  • title - This is the title that is listed at the top of the flow view element.
  • bg - Background style.
  • border - Border style.
  • borderwidth - Border width.
  • running - If this variable is 0, the main() will stop iterating.
  • lastdraw - This is a unix timestamp of the last time a draw occurred, by setting this to 0 it will force a redraw as long as update returns true, see Advanced Configuration for more information.
  • updatetime - This is the number of milliseconds between the completion of main() and when it is called again. I would recommend leaving this at the default as draw will only be called at 2 * updatetime.
  • current_x - This is the current position in the flow (note that it is not the element number but the x coordinate).
  • movement - This is how far the mouse's X position moved and how far current_x will be moved on the next update.
  • drift - This is the percent of movement that will remain after the next update should the mouse button be let up (by increasing this, the time that the flow moves after the mouse is let up will increase. Decreasing the variable will decrease the time the flow moves. CAVEAT: Do not set to >= 1 as this will provide some strange results).
  • mouse_position - This is used to determine the distance that the flow needs to move. It will be set to NULL if ismoving is 0 otherwise .x and .y will be set to the last know mouse location.
  • ismoving - This is used to define that the mouse button has been pressed if 1 and not pressed if 0.
  • init - Forces a redraw regardless of if any updates occurred or not.
  • mouse_moved - Denotes whether or not the mouse actually moved while the mouse was down. Used to tell if it was only a click. (Added On-Click callback for Elements)
  • elements - Array of all the FlowViewElements.
  • elementwidth - Width of all FlowViewElements
  • elementheight - Height of all FlowViewElements
  • elementoffset - The distance between the top of the canvas and where the top of the element is.
  • elementdistance - The distance between elements.

FlowViewElement Variable
  • x - Position that this element exists (this is related to current_x from the FlowView).
  • y - Position of the top of the element.
  • w - Width of the element.
  • h - Height of the element.
  • parent - This is the FlowView element, it will be used to reference the global element variables as well as the height/width/etc..
  • backgroundstyle - Style of the background to be drawn.
  • position - Position of the element in the array (is used to calculate the x).
  • title - Title to be displayed.
  • offset - Distance from the y to the point that we begin drawing.
  • innerwindow - Variable which is used to draw the inner window.
    • x - Position of the innerwindow
    • y - Position of the innerwindow
    • w - Width of the innerwindow
    • h - Height of the innerwindow
    • bg - Background style.
    • border - Border style.
    • borderwidth - Width of the border to draw.
  • innerwindowdrawable - Variable which draws the inner window use setinnerwindowdrawable(ele) to set this properly (ImageFlowViewInnerWindow gives an example of what can be used).
  • clickcallback - Function that will be called when the element has been clicked (without any movement occurring). (Added On-Click callback for Elements)
    • This function should accept two variables (event, relationalevent); the first is the actual mouseclick event the second is an x,y coordinate denoting where in the ELEMENT the click occurred.

ImageFlowViewInnerWindow Variable
  • x - X Position of the inner window.
  • y - Y Position of the inner window.
  • w - Width of the inner window.
  • h - Height of the inner window.
  • url - URL for the image to use.
  • img - Image DOM object which will be drawn.

The proper way to create a new FlowViewElement with an image in the window and an onclick function is as follows.

  var innerwin = new ImageFlowViewInnerWindow("image_url");
  var onclickfunc = function (event, relationalevent) {
    alert("Element " + this.title + " clicked at (" + relationalevent.x + "," + relationalevent.y + ")";
  var ele = new FlowViewElement("Title");

I would like to create an object which can take an img object allowing for the ability to only have to create one img object but use that to draw over and over again.

Now we continue to the Advanced Configuration section where we will look at more options for creating innerwindowdrawables

Last edited Dec 23, 2010 at 3:31 AM by Suroot, version 7


No comments yet.