Jump to content

JSignage:Shapes

From SpinetiX Wiki

Description

The jSignage library provides the following functions for drawing SVG paths and SVG shapes:

Effects and custom animations, as well as frame decoration attributes cannot be used for shapes, because these are requiring a jSignage layer. Therefore, the solution is to add the shape into a jSignage layer (typically a group) and then apply the effect, the custom animation or the frame decoration - something like: 

$.g({ frame: { frameColor: 'red'} }).add($.<shape>).<effect>

Parameters

These functions are taking one parameter (type: Plain Object) containing the specific attributes required by each function, along with the fill and stroke attributes, which are common to all of them.

Fill and stroke attributes

The jSignage shapes can be filled (which means painting the interior of the shape) and stroked (which means painting along the outline of the shape). The following attributes are supported for these painting operations:

  • fill
    Type: Paint. Default: 'black'.
    Specifies how the interior of the given shape should be painted; can be 'none' for a transparent interior, a solid color or a gradient.
  • fillOpacity
    Type: Number. Default: 1.
    Specifies the opacity of the painting operation for the interior the shape. The accepted values are between 0.0 (fully transparent) and 1.0 (fully opaque).
  • fillRule
    Type: String. Default: 'nonzero'.
    Indicates the filling rule to be used to determine what parts of the canvas are included inside the shape. Can be 'nonzero', 'evenodd' or 'inherit'.
  • stroke
    Type: Paint. Default: 'none'.
    Specifies how the exterior of the given shape should be painted; can be 'none' for no frame, a solid color or a gradient.
  • strokeDashArray
    Type: String. Default: 'none'.
    Specifies the pattern of dashes and gaps used to stroke the outline; can be 'none' or a list that specifies the lengths of alternating dashes and gaps separated by comas (e.g. '5,3,2,5,3,2').
  • strokeOpacity
    Type: Number. Default: 1.
    Specifies the opacity of the painting operation for the stroke. The accepted values are between 0.0 (fully transparent) and 1.0 (fully opaque).
  • strokeWidth
    Type: Number . Default: 1.
    The width of the stroke in pixels. No stroke is painted for a zero value.

Examples

Rectangle example
// draw a blue rectangle and add it to the document
$.rect({ x: 200, y: 100, width: 600, height: 400, fill:'blue' }).addTo('svg');


Circle example
// draw a red-stroked transparent circle and add it to the document
$.circle( { cx: 640, cy: 360, r: 200, fill:'none', stroke:'red', strokeWidth: '20' }).addTo('svg');


Line example
// draw a dashed blue line and add it to the document
$.line({ 
    x1: 80, y1: 400, x2: 1200, y2: 400, 
    stroke: 'blue', strokeWidth: 20, strokeLineCap: 'round', strokeDashArray: '40, 50' 
}).addTo('svg');


Polygon example
// draw a blue-stroked red star and add it to the document
$.polygon( {
    fill:'red', stroke: 'blue', strokeWidth: 5,
    points: [ '350,  75', '379, 161', '469, 161', '397, 215', '423, 301', 
              '350, 250', '277, 301', '303, 215', '231, 161', '321, 161' ]
}).addTo('svg');


Path example
// draw a red triangle with blue outline and add it to the document
$.path( {
    fill:'red', stroke: 'blue', strokeWidth: 3,
    d: new $.pathData().moveTo( 100, 100 ).lineTo( 300, 100).lineTo( 200, 300).close()
}).addTo('svg');


Gradient rectangle example
// add a blue to red horizontal gradient to the document
var gradient = $.linearGradient({ 
    x1: 320, y1: 0, x2: 960, y2: 0, 
    stops: [ { offset: 0, color: 'blue' }, 
             { offset: 1, color: 'red' } ] 
}).addTo('svg');

// draw a rectangle filled with the linear gradient created above
$.rect({ 
    x: 320, y: 180, width: 640, height: 360, 
    stroke: 'black', 
    fill: gradient.ref() 
}).addTo('svg');

Advanced examples

Drawing a complete graph

Draw a complete graph using axis and labels.

This example uses:

In this example the data is hard coded into the file. However the AJAX framework could be used to retrieve data from external file or remote servers. 

var label = [ 'Jan 2010', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
              'Jan 2011', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep' ];
               
var rate1 = [ 1.47652, 1.46712, 1.44824, 1.43362, 1.41811, 1.37674, 1.34603, 1.34257, 1.30888, 1.34524, 1.3442, 1.28107, 
              1.27907, 1.29758, 1.28666, 1.29704, 1.25372, 1.20917, 1.17659, 1.12028, 1.18173 ];
 
var rate2 = [ 1.42721, 1.36857, 1.35685, 1.34095, 1.25653, 1.22085, 1.277, 1.29029, 1.3067, 1.38978, 1.3661, 1.32201, 
              1.33654, 1.36452, 1.39992, 1.44484, 1.43486, 1.43884, 1.42643, 1.43432, 1.39692 ];
 
function graph( data, min, max, width, height, offx, delta, clr){
   var path = new $.pathData();
   for ( i in data ) {
     val = (data[i]-min) * height/(max-min);
     if ( i==0 )
       path.moveTo( offx+i*delta, height-val );
     else
       path.lineTo( offx+i*delta, height-val );
     $.circle( { cx: offx+i*delta, cy: height-val, r: 10 } ).addTo('svg');
   }
   $.path( { fill:'none', stroke: clr, strokeWidth: 5, d: path }).addTo('svg');
}
function fullGraph( data, label, min, max, width, height ) {
    var offx = 80, offy = 70;
    var ticksx=8;
    var tw =7;
    var clr = [ 'red', 'blue' ], strokeC = 'black';
    
    width-=offx;
    height-=offy;
    var delta = width/(data[0].length-1);
    
    // the frame
    $.line( { x1: offx, y1: 0, x2: offx, y2: height, stroke: strokeC, strokeWidth: 5  } ).addTo('svg');
    $.line( { x1: offx, y1: height, x2: offx+width, y2: height, stroke: strokeC, strokeWidth: 5  } ).addTo('svg');
    
    // the ticks
    var g1 = $.g().addTo( 'svg' );
    // the ticks
    for ( i=0; i<ticksx+1; i++ ){
        y = i*height/ticksx;
        $.line( { x1: offx-tw, y1: y, x2: offx+tw, y2: y, stroke: strokeC, strokeWidth: 3 } ).addTo( g1 );
        v = ( max-i*(max-min)/ticksx ).toFixed(2);
        $.textArea( { top: y-18, left: 0, height: 25, width: offx, fontSize: 20 } ).tspan( v ).addTo( g1 );
    }
    var g2 = $.g().addTo( 'svg' );
    for ( i=0; i<data[0].length; i++ ){
        x = i*delta+offx;
        $.line( { x1: x, y1: height-tw, x2: x, y2: height+tw, stroke: strokeC, strokeWidth: 3  } ).addTo( g2 );
        $.textArea( { top: height, left: x-delta/2, height: offy, width: delta, fontSize: 20 } ).tspan( label[i] ).addTo( g1 );
    }
    
    // the data
    for ( k in data ) {
      graph( data[k], min, max, width, height, offx, delta, clr[k] ); 
    }
}
$(function(){ 
    fullGraph( [rate1, rate2], label, 1.1, 1.5, 1280, 720 );
});
Chart pie with highlight

Draw a pie chart with one slice being highlighted with some zoom effects.

This example uses:

  • TextArea for the labels
  • Paths for the graph of the data.
  • Groups for the position of the highlighted slice.
  • Effects for the apparition of the highlighted slice.

In this example the data is hard coded into the file. However the AJAX framework could be used to retrieve data from external file or remote servers. 

function pieHighlight ( data, highlight ) {
   var cx=640, cy=360, r = 280, h=30;
   var clr = ['#B0CC40', '#4879B4', '#CC2568', '#FAE019', '#BFBFE0'];
   var sum = 0;
   for ( i in data )
      sum += data[i];
   
   var start = 0;
   var xs = Math.sin( start ) * r + cx, ys = Math.cos( start ) * r + cy;
   
   for ( i in data ) {
      var angle = 2*Math.PI * data[i]/sum;
      var flag = angle>Math.PI?1:0;
      var end = start + angle;
      var x = Math.sin( end ) * r + cx, y = Math.cos( end ) * r + cy;
      
      if ( i == highlight ){
        g = $.g( {left: Math.sin( (end+start)/2 ) * h,
                  top: Math.cos( (end+start)/2 ) * h} )
             .zoomIn( {dur: 5} );
      } else {
        g = $.g( );
      }
      
      var path = new $.pathData();
      path.moveTo( cx, cy ).lineTo( xs, ys ).arcTo( r, r, 0, flag, 0, x, y ).close();
      $.path( { fill: clr[i], stroke: 'white', d: path }).addTo( g  );
      
      var tx = Math.sin( (end+start)/2 ) * 1.15*r + cx, ty = Math.cos( (end+start)/2 ) * 1.15*r + cy;
      $.textArea( {top: ty-20, left: tx-75, fontSize: 30, width: 150, height: 50,
                  } ).tspan( (data[i]/sum*100).toFixed() + '%' ).addTo( g );
      
      g.addTo('svg');
      xs = x; ys =y; start = end;
   }
}
$(function(){ 
   pieHighlight( [ 20, 10, 25, 10, 12 ], 2 );
});
Retrieved from "https://support.spinetix.com/w/index.php?title=JSignage:Shapes&oldid=15564"