Channel Routing

Left Edge Algorithm

by phanikar subodh krishna chereddi

HTML

<script src="http://projects.calebevans.me/jcanvas/resources/jcanvas/jcanvas.js"></script>
  <button number='1' class='example-button'> Example 1</button>
  <button number='2' class='example-button'> Example 2</button>
  <button number='3' class='example-button'> Example 3</button>
  <button class='anim-button'> Animate</button>
  <button class='pause-button'> Pause</button>
  <button class='resume-button'> Resume</button>
  <table>
    <tr>
      <td>
         <span class='container-label'>Inputs:</span> 
        <textarea id='inputData' class='textarea-style'></textarea>
      </td>
      <td>
         <span class='container-label'>Output:</span> 
        <textarea id='outputData' class='textarea-style'></textarea>
      </td>
    </tr>
  </table>
  
  
  <span class='container-label'>Canvas:</span>
  <p id="current" class='current-value'></p>  
  <div id='assignmentContainer' class='assignment-container'><canvas id='drawingCanvas' height='800' width='800'></canvas></div>
  <div class='button-container'>
      <button class='run-button'>Run</button>
      <button class='reset-button right-align'>Reset</button>
  </div>

CSS

/*
    Please only use the following colors in your assignments. 
    
    // Grays
    lightest-gray:             #FBFBFB;
    lighter-gray:              #D8D8D8;
    light-gray:                #CCCCCC;
    gray:                      #888888;
    darker-gray:               #666666;
    darkest-gray:              #333333;

    // Oranges
    lightest-orange:           #FFDAC1;
    lighter-orange:            #F9D8BC;
    light-orange:              #FFB789;
    pale-orange:               #E8B493;
    accent-orange:             #E68142;
    orange:                    #c60;
    dark-orange:               #AB4600;

    // Blues
    lighter-blue:              #87ADD2;
    light-blue:                #6685A8;
    dark-blue:                 #5780A6;
    darker-blue:               #576E91;

    // Greens
    green:                     #738033;

    // Reds
    light-red:                 #FF4949;
    red:                       #BB0404;
    dark-red:                  #880000;

    // Yellows
    light-yellow:              #FFD364;
    yellow:                    #EAB51F;
    dark-yellow:               #D39F0D;

    // Black & white
    black:                     #000000;
    white:                     #FFFFFF;
*/

body {
   background-color: white;
}

.current-value {
    font-size: 40px;
    color : red;
}
.assignment-container {
   border:        1px solid #333333;
   height:        800px;
   margin-bottom: 10px;
   width:         800px;
}

.button-container {
   overflow:    visible;
   white-space: nowrap;
   width:       800px;
   word-wrap:   none;
}

.container-label {
   font-size: 20px;
   display: block;
}

.example-button {
   background-color: #c60;
   border:           none;
   color:            white;
   cursor:           pointer;
   font-size:        16px;
   height:           30px;
   margin:           0 2px 5px 0;
   width:            100px;
}

.reset-button, .run-button {
   background-color: #c60;
   border:           none;
   color:            white;
  ...

JavaScript

/*
  Two javascript libraries have been included for your use 
  Please do not use any other external javascript library
  
  Included libraries:
     - jQuery
     - jCanvas

  Documentation / references:
  References: 
     - HTML/CSS/JavaScript
     http://www.w3schools.com/
     https://developer.mozilla.org/en-US/Learn/HTML
     - jQuery
     http://learn.jquery.com/
     http://www.w3schools.com/jquery/default.asp
     
  API:
     - jQuery
     http://api.jquery.com/
     - jCavanas  
     http://projects.calebevans.me/jcanvas/docs/
*/

// Stores the id of the canvas element
this.canvasId = 'drawingCanvas';

// Stores the id of the assignment container
this.divContainerId = 'assignmentContainer'; 

// Stores the id of the input textarea
this.inputTextareaId = 'inputData';

// Stores the id of the input textarea
this.outputTextareaId = 'outputData';

// Stores the id of the current animation name
this.currentAnim = "current";
// Initializes and returns |cellSize| number of cells
this.initilizeCells = function(cellSize) {
    // Creates an array of cells
    var cells = new Array(cellSize);
    for (var i = 0; i < cellSize; i++) {
      // Stores the x position of the cell, and the label
      cells[i] = 'C' + (i+1);
    }
  
    return cells;
};

// Initializes 20 cells
this.cells = this.initilizeCells(20);

// Gets a reference to the canvas
this.$canvas = $('#' + this.canvasId);

// Sets default spacing to 0
this.spacing = 0;

// Sets the cell height to always be 50 pixels from the bottom of the canvas
this.cellHeight = this.$canvas.height() - 50;

// Sets the tracking spacing to fit all 6 tracks
this.trackSpacing = (this.$canvas.height() - 300) / 6;

// Sets a reference to the global scope
var self = this;

// Initializes listeners and resets any values
this.init = function() {
    
   // Clears canvas
   self.clearCanvas();
  
   // Draw cell and track template
   self.drawTracksAndCells();
  
   // Adds a click event listeners to the 'Run' button
  ...