<commit_before><!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Grid.js by enterprisebug</title>

    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
	<link rel="stylesheet" type="text/css" href="assets/fd-slider/fd-slider.css?v=2">
	<link rel="stylesheet" type="text/css" href="assets/fd-slider/fd-slider-tooltip.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="assets/fd-slider/fd-slider.js"></script>
	<script type="text/javascript" src="assets/jscolor/jscolor.js"></script>
	<script type="text/javascript" src="dist/grid.js"></script>
  </head>
<body>
	<!-- HEADER -->
	<div id="header_wrap" class="outer">
		<header class="inner">
			<a id="forkme_banner" href="https://github.com/enterprisebug/grid.js">View on GitHub</a>

			<h1 id="project_title">Grid.js</h1>
			<h2 id="project_tagline">Will draw a nice grid on a HTML5 canvas element</h2>

			<section id="downloads">
				<a class="zip_download_link" href="https://github.com/enterprisebug/grid.js/blob/gh-pages/dist/grid.min.js">grid.min.js</a>
				<a class="tar_download_link" href="https://github.com/enterprisebug/grid.js/blob/gh-pages/dist/grid.js">grid.js</a>
			</section>
		</header>
	</div>

	<!-- MAIN CONTENT -->
	<div id="main_content_wrap" class="outer">
		<section id="main_content" class="inner">
		
			<h2>Demo / Configuration</h2>
			
			<div id="demo_left">
				<canvas id="myCanvas" width="350" height="200"></canvas>
			</div>
			<div id="demo_right">
				<form id="opts">
					<label>Distance:</label><input type="text" name="distance" min="5" max="100" step="1" value="30" /><br />
					<label>LineWidth:</label><input type="text" name="lineWidth" min="0" max="5" step="0.1" value="1" /><br />
					<label>Caption:</label><input type="checkbox" name="caption" /><br/>
					<label>GridColor:</label><input class="color" value="#66ff00" color="#66ff00" name="gridColor" />
				</form>
			</div>
			
			<div style="clear:both;"></div>
			
			
			<h2>Usage</h2>

			<p>Assume that we have a HTML5 canvas element:</p>

			<div class="highlight"><pre><span class="nt">&lt;canvas</span> <span class="na">id=</span><span class="s">"myCanvas"</span> <span class="na">width=</span><span class="s">"350"</span> <span class="na">height=</span><span class="s">"200"</span><span class="nt">&gt;&lt;/canvas&gt;</span></pre></div>

			<p>Use grid like this:</p>

			<div class="highlight">
<pre>
<span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"myCanvas"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">"2d"</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">distance</span> <span class="o">:</span> <span class="mi"><span id="opt-distance">20</span></span><span class="p">,</span>
  <span class="nx">lineWidth</span> <span class="o">:</span> <span class="mf"><span id="opt-lineWidth">1.5</span></span><span class="p">,</span>
  <span class="nx">gridColor </span> <span class="o">:</span> <span class="s2">"<span id="opt-gridColor">#ff0000</span>"</span><span class="p">,</span>
  <span class="nx">caption</span> <span class="o">:</span> <span class="kc"><span id="opt-caption">true</span></span>
<span class="p">};</span>
<span class="k">new</span> <span class="nx">Grid</span><span class="p">(</span><span class="nx">opts</span><span class="p">).</span><span class="nx">draw</span><span class="p">(</span><span class="nx">context</span><span class="p">);</span>
</pre>
			</div>
			

<script>

$(function() {
	var params = {};
	var hash = /^#\?(.*)/.exec(location.hash);
	if (hash) {
		$.each(hash[1].split(/&/), function(i, pair) {
			var kv = pair.split(/=/);
			params[kv[0]] = kv[kv.length-1];
		});
	}
	$('#opts input[min]').each(function() {
		var val = params[this.name];
		if (val !== undefined) this.value = val;
		this.onchange = animate;
	});
	$('#opts input[color]').each(function() {
		var val = params[this.name];
		if (val !== undefined) this.value = val;
		this.onchange = animate;
	});
	$('#opts input:checkbox').each(function() {
		this.checked = !!params[this.name];
		this.onclick = animate;
	});

	animate();
});


function animate() {
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");

	// clear stage
	context.clearRect(0, 0, canvas.width, canvas.height);

	var opts = {};
	$('#opts input[min]').each(function() {
		$('#opt-' + this.name).text(opts[this.name] = parseFloat(this.value));
	});
	$('#opts input[color]').each(function() {
		$('#opt-' + this.name).text(opts[this.name] = this.value);
	});
	$('#opts input:checkbox').each(function() {
		opts[this.name] = this.checked;
		$('#opt-' + this.name).text(this.checked);
	});
	new Grid(opts).draw(context);
}

</script>
			<h2>Support or Contact</h2>

			<p>
				<img src="https://api.twitter.com/1/users/profile_image?screen_name=danielsirz&size=bigger" height="73" width="73" alt="<NAME>" valign="top" align="left" id="twitter_image"/>
				If you encounter any problems, please use the <a href="https://github.com/enterprisebug/grid.js/issues">GitHub issue tracker</a>.<br />
				For updates <a href="http://twitter.com/danielsirz">follow me on Twitter</a>.<br />
				If you like <a href="https://github.com/enterprisebug/grid.js">grid.js</a>, let me know.<br /><br />
			</p>

			<h2>Changes</h2>
			
			<h3>Version 1.1 (2012-08-20)</h3>
			<ul>
				<li>Added Caption</li>
				<li>Added gridColor</li>
			</ul>

			<h3>Version 1.0 (2012-08-14)</h3>
			<ul>
				<li>Initial Realease</li>
			</ul>
<commit_msg>Update index.html<commit_after><!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Grid.js by enterprisebug</title>

    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
	<link rel="stylesheet" type="text/css" href="assets/fd-slider/fd-slider.css?v=2">
	<link rel="stylesheet" type="text/css" href="assets/fd-slider/fd-slider-tooltip.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="assets/fd-slider/fd-slider.js"></script>
	<script type="text/javascript" src="assets/jscolor/jscolor.js"></script>
	<script type="text/javascript" src="dist/grid.js"></script>
  </head>
<body>
	<!-- HEADER -->
	<div id="header_wrap" class="outer">
		<header class="inner">
			<a id="forkme_banner" href="https://github.com/enterprisebug/grid.js">View on GitHub</a>

			<h1 id="project_title">Grid.js</h1>
			<h2 id="project_tagline">Will draw a nice grid on a HTML5 canvas element</h2>

			<section id="downloads">
				<a class="zip_download_link" href="https://github.com/enterprisebug/grid.js/blob/gh-pages/dist/grid.min.js">grid.min.js</a>
				<a class="tar_download_link" href="https://github.com/enterprisebug/grid.js/blob/gh-pages/dist/grid.js">grid.js</a>
			</section>
		</header>
	</div>

	<!-- MAIN CONTENT -->
	<div id="main_content_wrap" class="outer">
		<section id="main_content" class="inner">
		
			<h2>Demo / Configuration</h2>
			
			<div id="demo_left">
				<canvas id="myCanvas" width="350" height="200"></canvas>
			</div>
			<div id="demo_right">
				<form id="opts">
					<label>Distance:</label><input type="text" name="distance" min="5" max="100" step="1" value="30" /><br />
					<label>LineWidth:</label><input type="text" name="lineWidth" min="0" max="5" step="0.1" value="1" /><br />
					<label>Caption:</label><input type="checkbox" name="caption" /><br/>
					<label>GridColor:</label><input class="color" value="#66ff00" color="#66ff00" name="gridColor" />
				</form>
			</div>
			
			<div style="clear:both;"></div>
			
			
			<h2>Usage</h2>

			<p>Assume that we have a HTML5 canvas element:</p>

			<div class="highlight"><pre><span class="nt">&lt;canvas</span> <span class="na">id=</span><span class="s">"myCanvas"</span> <span class="na">width=</span><span class="s">"350"</span> <span class="na">height=</span><span class="s">"200"</span><span class="nt">&gt;&lt;/canvas&gt;</span></pre></div>

			<p>Use grid like this:</p>

			<div class="highlight">
<pre>
<span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"myCanvas"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">"2d"</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">distance</span> <span class="o">:</span> <span class="mi"><span id="opt-distance">20</span></span><span class="p">,</span>
  <span class="nx">lineWidth</span> <span class="o">:</span> <span class="mf"><span id="opt-lineWidth">1.5</span></span><span class="p">,</span>
  <span class="nx">gridColor </span> <span class="o">:</span> <span class="s2">"<span id="opt-gridColor">#ff0000</span>"</span><span class="p">,</span>
  <span class="nx">caption</span> <span class="o">:</span> <span class="kc"><span id="opt-caption">true</span></span>
<span class="p">};</span>
<span class="k">new</span> <span class="nx">Grid</span><span class="p">(</span><span class="nx">opts</span><span class="p">).</span><span class="nx">draw</span><span class="p">(</span><span class="nx">context</span><span class="p">);</span>
</pre>
			</div>
			

<script>

$(function() {
	var params = {};
	var hash = /^#\?(.*)/.exec(location.hash);
	if (hash) {
		$.each(hash[1].split(/&/), function(i, pair) {
			var kv = pair.split(/=/);
			params[kv[0]] = kv[kv.length-1];
		});
	}
	$('#opts input[min]').each(function() {
		var val = params[this.name];
		if (val !== undefined) this.value = val;
		this.onchange = animate;
	});
	$('#opts input[color]').each(function() {
		var val = params[this.name];
		if (val !== undefined) this.value = val;
		this.onchange = animate;
	});
	$('#opts input:checkbox').each(function() {
		this.checked = !!params[this.name];
		this.onclick = animate;
	});

	animate();
});


function animate() {
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");

	// clear stage
	context.clearRect(0, 0, canvas.width, canvas.height);

	var opts = {};
	$('#opts input[min]').each(function() {
		$('#opt-' + this.name).text(opts[this.name] = parseFloat(this.value));
	});
	$('#opts input[color]').each(function() {
		$('#opt-' + this.name).text(opts[this.name] = this.value);
	});
	$('#opts input:checkbox').each(function() {
		opts[this.name] = this.checked;
		$('#opt-' + this.name).text(this.checked);
	});
	new Grid(opts).draw(context);
}

</script>
			<h2>Support or Contact</h2>

			<p>
				<img src="https://pbs.twimg.com/profile_images/745199995/daniel_profile_bigger.jpg" alt="<NAME>" valign="top" align="left" id="twitter_image"/>
				If you encounter any problems, please use the <a href="https://github.com/enterprisebug/grid.js/issues">GitHub issue tracker</a>.<br />
				For updates <a href="http://twitter.com/danielsirz">follow me on Twitter</a>.<br />
				If you like <a href="https://github.com/enterprisebug/grid.js">grid.js</a>, let me know.<br /><br />
			</p>

			<h2>Changes</h2>
			
			<h3>Version 1.1 (2012-08-20)</h3>
			<ul>
				<li>Added Caption</li>
				<li>Added gridColor</li>
			</ul>

			<h3>Version 1.0 (2012-08-14)</h3>
			<ul>
				<li>Initial Realease</li>
			</ul>

{'fraction_non_alphanumeric': 0.2465906372118989, 'fraction_numerical': 0.01674774702926868, 'mean_word_length': 4.810936051899907, 'pattern_counts': {'":': 0, '<': 479, '<?xml version=': 0, '>': 479, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3539267', 'n_tokens_mistral': 5002, 'n_tokens_neox': 4541, 'n_words': 771}