index.html

<html>
<head>

	<script src="js/lib/jquery-2.0.3.min.js"></script>
	<script src="js/lib/knockout-3.0.0.js"></script>
	<script src="js/lib/bootstrap.min.js"></script>

	<script src="js/main.js"></script>
	<script src="js/canvas.js"></script>

	<link rel="stylesheet" type="text/css" href="css/lib/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/test.css">
	<link rel="image_src"  type="image/png" href="preview.png">

	<script>

	function ViewModel()
	{
		var self = this;

		self.rows = ko.observable( ["0000", "1111", "0000", "1111"] );

	}

	var viewModel = new ViewModel();
	
	$(document).ready( function() {
		// Register keyboard bindings
		$('#varBox').keypress(function(e) { if(e.which == 13) { $('#cmdButton').click() } });
		$('#cmdBox').keypress(function(e) { if(e.which == 13) { $('#cmdButton').click() } });
		$("#cmdButton").click(function () {
			var expr = $('#cmdBox').val();
			var vars = $('#varBox').val();
			var ret = go( expr, vars );
			viewModel.rows(ret);
			drawCanvas( grayCode(ret), vars );
		});

		// ViewModel!
		ko.applyBindings( viewModel );
		var grid = go("ac'+a'c", "abcd")
		drawCanvas( grid, "abcd" );
	});
	

	</script>

</head>
<body>
	<div>
		<h1>Karnaugh mapper tool</h1>
	</div>

	<div id="content">

		<form class="form-horizontal" role="form">
            <div class="form-group">
				<div id="varBoxWrapper" class="input-group input-group-lg">
					<span class="input-group-addon">Variables</span>
					<input id="varBox" class="form-control" type="text" placeholder="e.g. abcd"></input>
				</div>
			</div>
			
			<div class="form-group">
				<div id="cmdBoxWrapper" class="input-group input-group-lg">
					<span class="input-group-addon">Expression</span>
					<input id="cmdBox" class="form-control" type="text" placeholder="e.g. ac'+a'c"></input>
					<div class="input-group-btn"><button id="cmdButton" class="btn btn-primary" type="button">Go</button></div>
				</div>
			</div>
		</form>

		<div id="diagram-wrapper">
			<!-- <div id="diagram" data-bind="foreach: rows">
				<div data-bind="text: $data"></div>
			</div> -->
			<canvas id="karnaugh" width="300" height="300"></canvas>
		</div>

		<div>
			<h2>What?</h2>
			<p>A simple tool for visualising boolean algebra in a Karnaugh map. Enter any expression (well, almost!) and this tool will provide you with beatiful graphics using the age old knowledge of mister Karnaugh himself!</p>
			<h2>How to use</h2>
			<p>Enter the variables you want to use in the variables field. Variable names can only be one letter. Example; Entering "ab" yields two variables, one named "a" and one named "b". Entering "her" yields three variables: "h", "e" and "r".</p>
			<p>Enter the expression you want evaluated in the <emph>expression</emph> field. The expression can use the variables named in the <emph>variables</emph> field and the constants "0" and "1"
			<p>The operators currently supported are logical and, or, not and xor. These can be written as javascript operators or, preferably, in a more succinct way as follows:</p>
			<dl>
				<dt>and</dt><dd>concatenate variables</dd>
				<dt>or</dt><dd>+, binary operator</dd>
				<dt>xor</dt><dd>^, binary operator</dd>
				<dt>not</dt><dd>', suffix unary operator</dd>
			</dl>
			The resulting Karnaugh diagram will be drawn in the box. Currently up to four variables are supported.
			<h3>Examples</h3>
			<dl>
				<dt>Variables</dt><dd>abc<dd>
				<dt>Expression</dt><dd>(a+bc)'</dd>
				<dt>Equivalent</dt><dd>not ( a or (b and c) )</dd>
			</dl>
			<dl>
				<dt>Variables</dt><dd>xy<dd>
				<dt>Expression</dt><dd>x^y' + 1</dd>
				<dt>Equivalent</dt><dd>(x xor (not y)) or 1</dd>
			</dl>
			Now, try it!
		</div>
	</div>

</body>
</html>