Source

arduino_rfid_controller / ThreeWireMatrix / matrix_solver.html

Full commit
<html>
	<head>
		<title>Matrix Keypad Wiring Solver</title>
		<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
		<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/black-tie/jquery-ui.css" rel="stylesheet" />
		<style>
			/* Custom
----------------------------------*/
		html, body{
		    font-size: 10px;
		    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
		    padding:0;
		    margin:0;
		}
    #container{
		    margin:0; padding:0;
		}
		#col_center{
		    padding:1em;
		    padding-top:0;
		    overflow:hidden;
		}
		#col_left{
		    float: left;
		    width: 300px;
		}
		div.panel>div.ui-widget-content {
			min-height: 400px;
			padding: 0.5em;
		}
		.slider-set div.ui-slider-horizontal {
		  width: 200px;
		  display:inline-block
		}
		.slider-set input {
		  width: 25px;
		  display:inline-block;
		  border:0;
		  color:#f6931f;
		  font-weight:bold;
		  background-color: #fff;
		}
		.slider-set label {
		  display: inline-block;
		  width: 50px;
		  text-align: right;
		}
		.var-field {
		  border:0;
		  color:#f6931f;
		  font-weight:bold;
      background-color: #fff;
    }

		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
		<script type="text/javascript">
	    $(document).ready(
				function(){
					/* select number of keys on the keypad */
					$( "#slider_row_count" ).slider({
						value:4,
						min: 1,
						max: 12,
						slide: sliderSlide,
						change: keySettingsChanged
					});
					$( "#slider_col_count" ).slider({
						value:3,
						min: 1,
						max: 12,
						slide: sliderSlide,
						change: keySettingsChanged
					});
					keySettingsChanged();
				});
				function sliderSlide(event,ui) {
				  if(this.id && ~this.id.indexOf("slider_")) {
  					$( "#" + this.id.replace("slider_","var_") ).val( ui.value );
				  }
				}
				function keySettingsChanged() {
					var rows =  $( "#slider_row_count" ).slider( "value" );
					var cols = $( "#slider_col_count" ).slider( "value" );
 					$( "#var_row_count" ).val( rows );
					$( "#var_col_count" ).val( cols );
          $( "#var_key_count" ).val( rows * cols );
          for (int i = 0; i < (rows*cols);i++) {
          	var s = $('<div class="panel_pin_info_form"></div>')
          	$('<label for="input_key_text_' + i + '">Key Text</label><input type="text" name="key_text[]" id=
          	$('<p><input type="text" name="key_text[]" id="' + i + '" value="' + i + '" /></p>').fadeIn("fast").appendTo('#content_holder_pin_forms'); 
		i++;	
		return false;
	});
          }
				}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="col_left">
				<div id="panel_pin_input" class="panel ui-widget">
					<div class="ui-widget-header">Pin Inputs</div>
					<div class="ui-widget-content">
						<div id="content_holder_key_count_select">
              <div class="slider-set">
  							<label for="var_row_count">Rows:</label>
	  						<input type="text" id="var_row_count" disabled />
		  					<div id="slider_row_count"></div>
              </div>
              <div class="slider-set">
				  			<label for="var_col_count">Columns:</label>
			  				<input type="text" id="var_col_count" disabled />
	    					<div id="slider_col_count"></div>
              </div>
              <div>
							  <label for="var_key_count">Total Number of keys:</label>
							  <input type="text" id="var_key_count" class="var-field" disabled />
							</div>
						</div>
						<hr/>
						<div id="content_holder_pin_forms">
						</div>
	  		  </div>
				</div>
			</div>
			<div id="col_center">
				<div id="panel_display" class="panel ui-widget">
					<div class="ui-widget-header">Results</div>
					<div class="ui-widget-content">
						display crap here
					</div>
				</div>
			</div>
		</div>
	</body>
</html>