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-left: 0;
		    padding-top:0;
		    overflow:hidden;
		}
		#col_left{
		    float: left;
		    width: 300px;
		    padding:1em;
		    padding-top:0;
		}
		div#panel_load_save textarea {
			width: 100%;
			max-width: 100%;
			min-width: 100%;
			height: 75px;
		}
		div.panel>div.ui-widget-content {
			min-height: 400px;
			padding: 0.5em;
		}
		div#panel_load_save>div.ui-widget-content {
			min-height: 100px;
			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;
    }
    .panel_pin_info_form input {
      width: 40px;
    }
    .panel_pin_info_form label {
      width: 40px;
      display: inline-block;
      text-align: right;
      padding-right: 5px;
    }
		</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
					});
					$( "#content_holder_pin_forms").on("change keyup input","input",function() {
						keyValuesChanged();
					});
					$( "#btn_load" ).on("click",jsonRestore);
					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 );
          console.log(rows*cols);
          $("#content_holder_pin_forms").empty();
          for (var i = 0; i < (rows*cols);i++) {
            console.log(i);
          	var s = $('<div class="panel_pin_info_form" id="panel_pin_info_form_'+i+'"></div>')
 	        	$('<label for="input_key_text_' + i + '">Key</label><input type="text" name="input_key_text_'+i+'" id="input_key_text_'+i+'">').appendTo(s);
   	      	$('<label for="input_pin_r_' + i + '">Pin R</label><input type="text" name="input_pin_r_'+i+'" id="input_pin_r_'+i+'">').appendTo(s);
     	    	$('<label for="input_pin_b_' + i + '">Pin B</label><input type="text" name="input_pin_b_'+i+'" id="input_pin_b_'+i+'">').appendTo(s);
      	  	s.fadeIn("fast").appendTo('#content_holder_pin_forms'); 
		      }
				}
				function keyValuesChanged() {
					jsonSave();
				}
				function jsonSave() {
					var obj = {};
					obj["rows"] = $( "#slider_row_count" ).slider( "value" );
					obj["cols"] = $( "#slider_col_count" ).slider( "value" );
					obj["pins"] = {};
					$("#content_holder_pin_forms .panel_pin_info_form").each(function() {
						var key_id = parseInt(this.id.replace("panel_pin_info_form_",""));
						obj["pins"][key_id] = {};
						obj["pins"][key_id]["key_text"] = $('#input_key_text_'+key_id,this).val();
						obj["pins"][key_id]["pin_r"] = $('#input_pin_r_'+key_id,this).val();
						obj["pins"][key_id]["pin_b"] = $('#input_pin_b_'+key_id,this).val();
					});
					$("#textarea_load_save").val(JSON.stringify(obj, undefined, 2));
				}
				function jsonRestore() {
					var obj = JSON.parse($("#textarea_load_save").val());
					$( "#slider_row_count" ).slider( "value", obj["rows"] );
					$( "#slider_col_count" ).slider( "value", obj["cols"] );
					for (var i = 0; i < parseInt(obj["rows"])*parseInt(obj["cols"]);i++) {
						if(obj["pins"] && obj["pins"][i]) {
	          	$('#input_key_text_' + i).val(obj["pins"][i]["key_text"]);
  	 	      	$('#input_pin_r_' + i).val(obj["pins"][i]["pin_r"]);
   		      	$('#input_pin_b_' + i).val(obj["pins"][i]["pin_b"]);
   		      }
		      }
				}
		</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_load_save" class="panel ui-widget">
					<div class="ui-widget-header">Load/Save JSON</div>
					<div class="ui-widget-content">
						<textarea name="textarea_load_save" id="textarea_load_save"></textarea><br/>
						<input type="button" id="btn_load" value="Restore From JSON" />
					</div>					
				</div>
				<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>