PixelArt Quilting

for designing pixel art quilts

by Laurel Bruggeman

HTML

<div class="column">
   Width (in blocks): <input type="text" id="width"/>  <br/>
   Height (in blocks): <input type="text" id="height"/>
   <div id="gridHolder"></div>
   <div id="legendHolder">
      <table id="legend" class="legend">
         <thead>
         <tr>
            <th>color</th>
            <th>name</th>
            <th>number of blocks</th>
            <th>amount of fabric</th>
         </tr>
         </thead>
      </table>
   </div>
</div>
<div class="column column2">
   <div>
      <div>
         <textarea id="patternTextArea"></textarea>
      </div>
      <p>
         <select id="examples">
            <option>load example...</option>
             
<option...

CSS

body{
         background-color: #fff;
         padding: 40px;
         font-family: Helvetica, sans-serif;
         font-size: 0.8em;
         line-height: 1.2;
      }

      .highlight{
         background-color: #ddd;
      }

      table{
         border-collapse: collapse;
      }
      table.legend td{
         padding:5px;
         pointer:cursor;
      }
      table.legend .legend-color{
         padding: 0;
         margin:5px;
      }
      table.size thead th, table.legend thead th{
         padding: 5px;
         border: 1px solid #ccc;
      }
      table.legend, table.size{
         border:1px solid #ccc
      }
      table.legend thead, table.size thead{
         font-weight:bold;
         text-transform: capitalize;
         background-color: #f2f2f2;
      }
      #gridHolder, #legendHolder{
         /*padding: 20px;*/
      }
      #gridHolder{
         margin-top: 20px;
      }
      #legendHolder{
         margin-top: 20px;
      }
      .column2{
         margin-left:20px;
      }
      table.grid td, .legend-color{
         width: 20px;
         height: 20px;
         border:1px solid black;
         cursor: pointer;
      }
      .myClass{
         background-color: #ccc;
      }
      td.unmarked{
         background-color: #fff;
      }

      table.legend tr.selected td:not(:first-child){
         background-color: #ffff8b;
      }
      table.size tr.selected td{
         background-color: #ffff8b;
      }
      .inches:after{
         content: '"';
      }
      .yards:after{
         content: ' yd';
      }
      .strips:after{
         content: ' strips';
      }
      .column{
         float:left;
         position: relative;
      }

JavaScript

var markerArray = new Array(
           "unmarked",
           "bisque",
           "lightsalmon",
           "tomato",
           "red",
           "maroon",
           "orange",
           "khaki",
           "palegoldenrod",
           "yellow",
           "yellowgreen",
           "olivedrab",
           "limegreen",
           "green",
           "darkgreen",
           "lightSeaGreen",
           "lightSkyBlue",
           "lightSteelBlue",
           "cornflowerblue",
           "blue",
           "navy",
           "lightpink",
           "orchid",
           "lightcoral",
           "mediumpurple",
           "purple",
           "chocolate",
           "saddlebrown",
           "silver",
           "gray",
           "black",
           "white"
   );
   function buildMaterialsTable(){
      var tbody = document.getElementById('materialsBody');
      for(var i=1;i<24;i++){
         var fbs = i* 0.5;
         var cbs = fbs+0.5;
         var row = document.createElement('tr');
        row.className = "dataRow";
         if(cbs==2.5 || cbs==5 || cbs==10){
            row.className += " highlight";
         }
         row.setAttribute('data-size', cbs);
         var td = document.createElement('td');
         var span = document.createElement('span');
         span.className="fbs inches"; span.innerHTML = fbs;
         td.appendChild(span);
         row.appendChild(td);

         td = document.createElement('td');
         span = document.createElement('span');
         span.className="cbs inches"; span.innerHTML = cbs;
         td.appendChild(span);
         row.appendChild(td);

         td = document.createElement('td');
         span = document.createElement('span');
         var span2 = document.createElement('span');
         var span3 = document.createElement('span');
         span.className="finishedWidth inches";
         span2.innerHTML = " x ";
         span3.className="finishedHeight inches";
         td.appendChild(span); td.appendChild(span2);...