[Drupal] How to draw shapes using Raphel JS in Drupal 7

Akhila.vn | Updated 11 Nov 2016 | 3 min read

While working on a Drupal project, I had to draw three concentric circles. Each circle was supposed to display the currently entered data in three text areas, called a golden circle. Using Raphael's JavaScript vector graphics library in Drupal 7 makes your work really simple. Please go through the following steps:

First I downloaded the Drupal 'libraries' module and stored it in 'sites/all/modules/'.
Then I downloaded the 'raphael-min.js' from 'http://raphaeljs.com/' and stored it in 'sites/all/libraries/raphael'.

Implemented hook_libraries_info with following code,


function MODULE_NAME_libraries_info() {
  // Expected to be extracted into 'sites/all/libraries/raphael'.
  $libraries['raphael'] = array( // Machine name.
    'name' => 'Raphael library',
    'version arguments' => array(
      'file' => 'raphael-min.js', // Could be any file with version info.
      'pattern' => '/(\d\.){1,2}\d/', // Regular expression pattern matching version number.
      'lines' => 3,
    ),
    'files' => array(
      'js' => array('raphael-min.js'), // Path to the file location.
    ),
  );
  return $libraries;
}

Implemented hook_theme() with following code,


  function MODULE_NAME_theme() {
    //theme for golden circle
    $theme['MODULE_NAME_THEME_golden_circle'] = array(
      'arguments' => array('rows' => NULL),
      'template' => 'templates/golden_circle',
    );
    return $theme;
  }

I created a JS code with 2 more text area fields (using http://jsfiddle.net/x7nsa5by/) in 'golden_circle.js' and stored it in 'sites/all/modules/MODULE_NAME/js/'. The code is as follows :


  //Code to display the golden circle.
  (function ($) {
    Drupal.behaviors.MODULE_NAME = {
      attach: function(context, settings) {
        if(typeof Raphael != 'undefined') {
          var paper = Raphael("golden-circle", 500, 500);
          var why_impt='';
          var how_impt='';
          var what_plans='';
          //initialization.
          drawPaper(paper, why_impt, how_impt, what_plans);
          //getting and passing to circle first text.
          $('#why_imp').keyup(function(){
            why_impt = $('#why_imp').val();
            drawPaper(paper, why_impt, how_impt, what_plans);
          });
          //getting and passing to circle second text.
          $('#how_imp').keyup(function(){
            how_impt = $('#how_imp').val();
            drawPaper(paper, why_impt, how_impt, what_plans);
          });
          //getting and passing to circle third text.
          $('#what_plan').keyup(function(){
            what_plans = $('#what_plan').val();console.log(what_plan);
            drawPaper(paper, why_impt, how_impt, what_plans);
          });
        }
      }
    }
    })(jQuery.noConflict());

    //Function to draw cicle.
    function drawPaper(paper, why_impt,how_impt, what_plans) {
      paper.clear();
      Text1 = paper.text(250, 40, why_impt).attr({fill: '#ff0000'});
      Text2 = paper.text(250, 120, how_impt).attr({fill: '#ff0000'});
      Text3 = paper.text(250, 250, what_plans).attr({fill: '#ff0000'});

      paper.add([
        {
          type: "circle",
          cx: 250,
          cy: 250,
          r: 100,
          stroke: "#f00",
          text: Text1
        },
        {
          type: "circle",
          cx: 250,
          cy: 250,
          r: 170,
          stroke: "#f00",
          text: Text2
        },
        {
          type: "circle",
          cx: 250,
          cy: 250,
          r: 250,
          stroke: "#f00",
          text: Text3
        }
      ]);
    }


function MODULE_NAME_FUNCTION_NAME_form($form, &$form_state) {
  $form['why_imp'] = array(
    '#title' => t('Textarea for outside circle'),
    '#type' => 'textarea',
    '#rows' => 5,
    '#weight' => 1,
    '#attributes' => array(
      'id' => 'why_imp',
    )
  );
  $form['how_imp'] = array(
    '#type' => 'textarea',
    '#title' => t('Textarea for middle circle'),
    '#rows' => 5,
    '#weight' => 2,
    '#attributes' => array(
      'id' => 'how_imp',
    )
  );
  $form['what_plan'] = array(
    '#type' => 'textarea',
    '#title' => t('Textarea for inner circle'),
    '#rows' => 5,
    '#weight' => 3,
    '#attributes' => array(
      'id' => 'what_plan',
    )
  );
   $form['submit_button'] = array(
    '#type' => 'submit',
    '#value'  => t('DATA SUBMIT'),
    '#weight' => 5,
    '#submit' => array('SUBMIT_FUNCTION'),
  );
  return $form;
}

Created a TPL file named 'golden_circle.tpl.php' and store it in 'sites/all/modules/MODULE_NAME/templates/'.

Then I created a pagecallback with following code,


  function MODULE_NAME_PAGECALLBACK_FUNCTION() {
    libraries_load('raphael');
    drupal_add_js(drupal_get_path('module', 'MODULE_NAME') . '/js/golden_circle.js');
    $output['golden_circle']['#markup'] = theme('MODULE_NAME_THEME_golden_circle');
    $output['golden_circle_form'] = drupal_get_form('MODULE_NAME_FUNCTION_NAME_form');
    return $output;
  }

References :

Zyxware is a leading Drupal web development services provider from India. We offer Drupal Migration Services for our clients to migrate their site to the latest Drupal version. We are here to serve your needs. If you have any queries, please feel free to get in touch with us here.

[Drupal] How to draw shapes using Raphel JS in Drupal 7

Related Topics