wgbartley/spark-web-ide-memory-tracker.html

## spark-web-ide-memory-tracker.html
<!DOCTYPE html>
<html>
<head>

<title></title>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>

<script type="text/javascript">
var graphs = {};

$(document).ready(function() {
	$('button').click(function(e) {
		e.preventDefault();

		process();
	}).click();


	$('table thead tr th span.graph').each(function() {
		graphs[$(this).attr('class').split(' ')[1]] = $(this).peity('line');
	});

	graphs['flash_pie'] = $('.flash_pie').peity('donut');
	graphs['ram_pie'] = $('.ram_pie').peity('donut');
});


function process() {
	var str = $('textarea').val().toUpperCase();
	var lines = str.split("\n");
	var data;
	var html = '<tr>';

	for(var l=0; l<lines.length; l++) {
		lines[l] = $.trim(lines[l]);

		if(lines[l].length==0)
			continue;

		else if(lines[l].substr(0, 6)=='OUTPUT')
			continue;

		else if(lines[l].substr(0, 4)=='TEXT')
			continue;

		else if(lines[l]=='IN A NUTSHELL:')
			continue;

		else if(lines[l].substr(0, 10)=='FLASH USED' || lines[l].substr(0, 8)=='RAM USED') {
			data = lines[l].match(/(\d+)/g);
			html += '<td>'+data[0]+'</td>';

			if(lines[l].substr(0, 10)=='FLASH USED') {
				$('.flash').append(','+data[0]);
				$('.flash_pie').text(data[0]+'/'+data[1]);
			} else if(lines[l].substr(0, 8)=='RAM USED') {
				$('.ram').append(','+data[0]);
				$('.ram_pie').text(data[0]+'/'+data[1]);
			}
		} else {
			data = lines[l].match(/(\d+)/g);

			for(var i=0; i<data.length; i++) {
				if(i==4)
					continue;

				$('table thead tr th:eq('+i+') span.graph').append(','+data[i]);
				html += '<td>'+data[i]+'</td>';
			}
		}
	}

	html += '</tr>';

	$('table tbody').append(html);

	for(var g in graphs)
		graphs[g].change();

	$('textarea').val('');
}
</script>

<style type="text/css">
table {
	width: 100%;
	border-collapse: collapse;
}

table thead tr th {
	text-align: left;
	vertical-align: top:
	border: 1px solid gray;
}

textarea {
	position: absolute;
	top: 75%;
	right: 10px;
	bottom: 3.5em;
	left: 10px;

	width: 98.5%;
}

button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;

	width: 99%;
	height: 2.5em;
}
</style>

</head>

<body>

<table>
	<thead>
		<tr>
			<th width="15%">text <span class="graph text">0</span></th>
			<th width="15%">data <span class="graph data">0</span></th>
			<th width="15%">bss <span class="graph bss">0</span></th>
			<th width="15%">dec <span class="graph dec">0</span></th>
			<th width="20%">flash <span class="graph flash">0</span> <span class="graph_pie flash_pie">0/100</span></th>
			<th width="20%">ram <span class="graph ram">0</span> <span class="graph_pie ram_pie">0/100</span></th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

<textarea></textarea>

<button>Submit</button>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<title></title>

	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>

	<script type="text/javascript">
	var graphs = {};

	$(document).ready(function() {
	$('button').click(function(e) {
	e.preventDefault();

	process();
	}).click();


	$('table thead tr th span.graph').each(function() {
	graphs[$(this).attr('class').split(' ')[1]] = $(this).peity('line');
	});

	graphs['flash_pie'] = $('.flash_pie').peity('donut');
	graphs['ram_pie'] = $('.ram_pie').peity('donut');
	});


	function process() {
	var str = $('textarea').val().toUpperCase();
	var lines = str.split("\n");
	var data;
	var html = '<tr>';

	for(var l=0; l<lines.length; l++) {
	lines[l] = $.trim(lines[l]);

	if(lines[l].length==0)
	continue;

	else if(lines[l].substr(0, 6)=='OUTPUT')
	continue;

	else if(lines[l].substr(0, 4)=='TEXT')
	continue;

	else if(lines[l]=='IN A NUTSHELL:')
	continue;

	else if(lines[l].substr(0, 10)=='FLASH USED' \|\| lines[l].substr(0, 8)=='RAM USED') {
	data = lines[l].match(/(\d+)/g);
	html += '<td>'+data[0]+'</td>';

	if(lines[l].substr(0, 10)=='FLASH USED') {
	$('.flash').append(','+data[0]);
	$('.flash_pie').text(data[0]+'/'+data[1]);
	} else if(lines[l].substr(0, 8)=='RAM USED') {
	$('.ram').append(','+data[0]);
	$('.ram_pie').text(data[0]+'/'+data[1]);
	}
	} else {
	data = lines[l].match(/(\d+)/g);

	for(var i=0; i<data.length; i++) {
	if(i==4)
	continue;

	$('table thead tr th:eq('+i+') span.graph').append(','+data[i]);
	html += '<td>'+data[i]+'</td>';
	}
	}
	}

	html += '</tr>';

	$('table tbody').append(html);

	for(var g in graphs)
	graphs[g].change();

	$('textarea').val('');
	}
	</script>

	<style type="text/css">
	table {
	width: 100%;
	border-collapse: collapse;
	}

	table thead tr th {
	text-align: left;
	vertical-align: top:
	border: 1px solid gray;
	}

	textarea {
	position: absolute;
	top: 75%;
	right: 10px;
	bottom: 3.5em;
	left: 10px;

	width: 98.5%;
	}

	button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;

	width: 99%;
	height: 2.5em;
	}
	</style>

	</head>

	<body>

	<table>
	<thead>
	<tr>
	<th width="15%">text <span class="graph text">0</span></th>
	<th width="15%">data <span class="graph data">0</span></th>
	<th width="15%">bss <span class="graph bss">0</span></th>
	<th width="15%">dec <span class="graph dec">0</span></th>
	<th width="20%">flash <span class="graph flash">0</span> <span class="graph_pie flash_pie">0/100</span></th>
	<th width="20%">ram <span class="graph ram">0</span> <span class="graph_pie ram_pie">0/100</span></th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>

	<textarea></textarea>

	<button>Submit</button>

	</body>
	</html>