Chip Placement

using simulated annealing heuristic

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>
  <table>
    <tr>
      <td>
          Temperature:
      </td>
      <td>
          <input type='number' value=100 id='temperatureInput'/>
      </td>
    </tr>
    <tr>
      <td>
          Cooling rate:
      </td>
      <td>
          <input type='number' value=5 id='coolingRateInput'/>
      </td>
    </tr>
    <tr>
      <td>
          Number of moves per temperature:
      </td>
      <td>
          <input type='number' value=20 id='movesInput'/>
      </td>
    </tr>
    <tr>
      <td>
          Frozen(stop) temperature:
      </td>
      <td>
          <input type='number' value=10 id='stopInput'/>
      </td>
    </tr>
      <tr>
      <td>
          Delay between each iteration (in milliseconds) :
      </td>
      <td>
          <input type='number' value=100 id='delay'/>
      </td>
    </tr>
    <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-wide'></textarea>
      </td>
    </tr>
  </table>
  
  <div class='button-container'>
      <button class='run-button'>Run</button>
      <button class='reset-button'>Reset</button>
  </div>

  <span class='container-label'>Canvas:</span> 
  <div id='assignmentContainer' class='assignment-container'><canvas id='drawingCanvas' height='500' width='800'></canvas></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;
}

.assignment-container {
   border:        1px solid #333333;
   height:        500px;
   margin-bottom: 10px;
   width:         650px;
}

.button-container {
   overflow:    visible;
   white-space: nowrap;
   width:       650px;
   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;
   white-space:      nowrap;
   width:            100px;
}

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

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';

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

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

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

// Initializes listeners and resets any values
this.init = function() {
    
   // Clears canvas
   self.clearCanvas();
  
   // Adds a click event listeners to the 'Run' button
   $('.run-button').click(function() {
       // Clears canvas
       self.clearCanvas();
     
       // Runs algorithm
       self.run();
   });
  
   // Adds a click event listener to the 'Reset' button
   $('.reset-button').click(function() {
       self.clearCanvas();
       clearInterval(simAnnealer);
   });
  
   // Adds click event listeners to all the 'Example' buttons
   $('.example-button').click(function() {
 	   self.loadExample($(this).attr('number'));
   });
};

// Clears canvas of all rendered elements
this.clearCanvas = function() {
   // Clears the drawing canvas of any preiously rendered elements
   self.$canvas.clearCanvas();
};

// Loads pre-configured examples into the inputs
this.loadExample = function(example) {
    this.clearCanvas();
...