JSignage:Shapes

From SpinetiX Support Wiki

Jump to: navigation, search

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
Rectangle1.png
// 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
Circle2.png
// 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
Line2.png
// 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
Polygon1.png
// 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
Path1.png
// 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
LinearGradient1.png
// 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
JSignage-SampleGraph.png

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
JSignage-3dpie.png

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 );
});
This page was last modified on 26 March 2019, at 14:49.