Creating a custom Drawing toolbar

If your implementation can not leverage the sample menu templates or web-components included in your package and requires a totally custom interface for managing the drawing tools, This article is for you.

Activating a drawing tool (rectangle, doodle, line, fibonacci, etc.) on the chart is easy. All you have to do is configure the currentVectorParameters to your liking (line color, fill color, font, line style, line width, etc.), and call changeVectorType to enable that tool with those parameters. That's all.

The drawling tool will remain enabled for the user to add as many instances of it as they wish until it is turned off by setting the changeVectorType to null, an empty string, or enable a different drawing type.

Although you can customize the values of the currentVectorParameters elements to meet your needs, and even add new elements to it if you are creating new drawings that need additional parameters; you should never have any elements removed from it.

Since not all drawings have the same configuration parameters, CIQ.Drawing#getDrawingParameters is a helper function intended to return the relevant parameters and current settings for the requested drawing type. For example, you can use the returning object as your template for creating the proper UI tool box for that particular drawing. Will you need a line width UI element, a fill color?, etc. Or you can use it to know what values you should be setting if enabling a particular drawing type with specific properties.

If you will be allowing users to manipulate drawing settings via a UI, you can create menus and interactive interfaces to collect each one of the parameters and finally set the currentVectorParameters object accordingly and activate the drawing type.

See CIQ.ChartEngine.currentVectorParameters for sample template for the parameters object.

See 'Classes' in CIQ.Drawing for available drawings.

To activate a specific drawing tool you can simply call CIQ.ChartEngine#changeVectorType :

stxx.changeVectorType(yourDrawingType);

To deactivate drawing mode , set the Vector Type to blank (''), like so:

stxx.changeVectorType('');

To clear all the drawings from the chart canvas call:

stxx.clearDrawings();

So, for example, to activate rectangles you would do this:

// set your menu to ask the user for the line style, line width, line color and fill color
stxx.currentVectorParameters={
    pattern:"dashed",
    lineWidth:2,
    fillColor:"pink",
    currentColor: "red"
}

// then activate the drawing tool for the user.
stxx.changeVectorType('rectangle');

Sidebar: Special note on styles for fibonacci levels.

To provide maximum flexibility, each fib level has its own style parameters you can set. Sorry I missed that originally.

So you can either go to each one and manually set to the patterns/width you want, or just run something like this every time you need to reset those :

 var fib=this.context.stx.currentVectorParameters.fibonacci;
 if(fib){
  for(var i=0;i<fib.fibs.length;i++){
   fib.fibs[i].parameters.lineWidth=width;
   fib.fibs[i].parameters.pattern=pattern;
  }
  fib.timezone.parameters.lineWidth=width;
  fib.timezone.parameters.pattern=pattern;
 }

####More examples:

Enable a line tool with these parameters:

      stxx.currentVectorParameters.pattern = "solid";
      stxx.currentVectorParameters.lineWidth = '2';
      stxx.currentVectorParameters.fillColor = 'red';
      stxx.currentVectorParameters.currentColor = 'blue';
      stxx.changeVectorType('line');

Enable a fibonacci tool with these parameters:

      var width = 5; pattern = 'dashed';
      stxx.currentVectorParameters.pattern = pattern;
      stxx.currentVectorParameters.lineWidth = width;
      stxx.currentVectorParameters.fillColor = 'yellow';
      stxx.currentVectorParameters.currentColor = 'purple';
      var fib=stxx.currentVectorParameters.fibonacci;
         if(fib){
           for(var i=0;i<fib.fibs.length;i++){
              fib.fibs[i].parameters.lineWidth=width;
              fib.fibs[i].parameters.pattern=pattern;
          }
          fib.timezone.parameters.lineWidth=width;
          fib.timezone.parameters.pattern=pattern;
        }      
      stxx.changeVectorType('fibonacci');

Enable a rectangle tool with these parameters:

      stxx.currentVectorParameters.pattern = "solid";
      stxx.currentVectorParameters.lineWidth = 4;
      stxx.currentVectorParameters.fillColor = 'white';
      stxx.currentVectorParameters.currentColor = 'black';
      stxx.changeVectorType('rectangle');

Disabling drawing selection after every rendering

By default the provided drawing tool-bar will remember the selected type and users will be able render many drawings at a time until they explicitly turn it off. This may not be your preference and instead you may want to reset after every drawing so the user can carry on to something else without having to manually turn off the drawing tool-bar.

To do this simply reset the drawing to none (CIQ.DrawingToolbar.setDrawingType ) and turn off the cross-hairs ( CIQ.DrawingToolbar.setCrosshairs ) in the callbacks.drawing function.

Here is the actual code you will need:

stxx.callbacks.drawing=saveDrawings;


function saveDrawings(obj){
    var tmp=obj.stx.exportDrawings();
    if(tmp.length===0){
        CIQ.localStorage.removeItem(obj.symbol);
    }else{
        CIQ.localStorageSetItem(obj.symbol, JSON.stringify(tmp));
    }

    // additional code to turn off active drawing type and related functionality
    var stx= obj.stx;
    stx.changeVectorType(null);
    if(stx.layout.crosshair){
        stx.layout.crosshair=false;
        stx.changeOccurred("layout");
        stx.doDisplayCrosshairs();
    }
    if(stx.preferences.magnet){
        stx.preferences.magnet=false;
        CIQ.clearCanvas(stx.chart.tempCanvas, stx);
    }
}

Alternatively, if using the provided toolbar web component you can call the DrawingToolbar.noTool method from saveDrawings:

function saveDrawings(obj){
    var tmp=obj.stx.exportDrawings();
    if(tmp.length===0){
        CIQ.localStorage.removeItem(obj.symbol);
    }else{
        CIQ.localStorageSetItem(obj.symbol, JSON.stringify(tmp));
    }
    $("cq-toolbar")[0].noTool();
}