benursu/Contact Lens - Spectrogram Export Tool - index.html

## Contact Lens - Spectrogram Export Tool - index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Export Animation Data for Spark AR</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				background-color: #bfe3dd;
				color: #000;
			}

			a {
				color: #2983ff;
			}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	</head>

	<body>

		<div id="container"></div>

		<div id="info">
			Export Animation Data for Spark AR<br>
			Check Console<br>
			<canvas id="spectrogramCanvas" width="1800" height="280"></canvas>
		</div>
		<div id="spectrogram">


		</div>

		<script type="module">

		$(function() {

			///////////////////////////////////////
			///////////////////////////////////////
			///////////////////////////////////////
			//init change as needed

			//
			var file = 'spectrograms/intro-350-20.png';
			var spectrogramWidth = 350;
			var spectrogramHeight = 20;
			//16000ms

			///////////////////////////////////////
			///////////////////////////////////////
			///////////////////////////////////////

			var output = '';

			var img = new Image();
			img.src = file;
			var canvas = document.getElementById('spectrogramCanvas');
			var ctx = canvas.getContext('2d');
			img.onload = function() {
				ctx.drawImage(img, 0, 0);

				output += 'var animationFrequency = {};\n';

				for(var k = spectrogramHeight-1; k >= 0; k--){
					output += 'animationFrequency[\'freq' + k + '\'] = Animation.samplers.polyline({ keyframes: [0';
					for(var i = 0; i < spectrogramWidth; i++){
						output += ',';
						var pixel = ctx.getImageData(i, k, 1, 1);
						var data = pixel.data;
						var amplitude = data[0] + data[1] + data[2];
						output += (amplitude / 765).toFixed(3);
						// output+= data[0] + '/' + data[1] + '/' + data[2] + ',';

					}
					output += ',0], knots: [0';
					for(var i = 0; i < spectrogramWidth; i++){
						output += ',';
						output += (i+1);
					}
					output += ',' + (spectrogramWidth + 1) + '] });\n';
				}

				output += 'var animationVolume = Animation.samplers.polyline({ keyframes: [0';
				for(var i = 0; i < spectrogramWidth; i++){
					output += ',';
					var pixel = ctx.getImageData(i, 0, 1, spectrogramWidth);
					var data = pixel.data;
					var total = 0;
					for(var k = 0; k < data.length; k++){
						var val = data[k];
						if(val != 255){
							total += data[k];
						}
					}
					var volume = total / data.length;
					output += (volume).toFixed(4);
				}
				output += ',0], knots: [0';
				for(var i = 0; i < spectrogramWidth; i++){
					output += ',';
					output += (i+1);
				}
				output += ',' + (spectrogramWidth + 1) + '] });\n';


				//write to file
				$.ajax({
					url: '/receiveAnimationData',
					data: output,
					cache: false,
					contentType: false,
					processData: false,
					method: 'POST',
					type: 'POST',
					success: function(data){
						console.log('Successly written to receiveAnimationData.js');
						console.log('file: ' + file);
					}
				});

			};


		});

		</script>

	</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Export Animation Data for Spark AR</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
	<style>
	body {
	background-color: #bfe3dd;
	color: #000;
	}

	a {
	color: #2983ff;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	</head>

	<body>

	<div id="container"></div>

	<div id="info">
	Export Animation Data for Spark AR<br>
	Check Console<br>
	<canvas id="spectrogramCanvas" width="1800" height="280"></canvas>
	</div>
	<div id="spectrogram">


	</div>

	<script type="module">

	$(function() {

	///////////////////////////////////////
	///////////////////////////////////////
	///////////////////////////////////////
	//init change as needed

	//
	var file = 'spectrograms/intro-350-20.png';
	var spectrogramWidth = 350;
	var spectrogramHeight = 20;
	//16000ms

	///////////////////////////////////////
	///////////////////////////////////////
	///////////////////////////////////////

	var output = '';

	var img = new Image();
	img.src = file;
	var canvas = document.getElementById('spectrogramCanvas');
	var ctx = canvas.getContext('2d');
	img.onload = function() {
	ctx.drawImage(img, 0, 0);

	output += 'var animationFrequency = {};\n';

	for(var k = spectrogramHeight-1; k >= 0; k--){
	output += 'animationFrequency[\'freq' + k + '\'] = Animation.samplers.polyline({ keyframes: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	var pixel = ctx.getImageData(i, k, 1, 1);
	var data = pixel.data;
	var amplitude = data[0] + data[1] + data[2];
	output += (amplitude / 765).toFixed(3);
	// output+= data[0] + '/' + data[1] + '/' + data[2] + ',';

	}
	output += ',0], knots: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	output += (i+1);
	}
	output += ',' + (spectrogramWidth + 1) + '] });\n';
	}

	output += 'var animationVolume = Animation.samplers.polyline({ keyframes: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	var pixel = ctx.getImageData(i, 0, 1, spectrogramWidth);
	var data = pixel.data;
	var total = 0;
	for(var k = 0; k < data.length; k++){
	var val = data[k];
	if(val != 255){
	total += data[k];
	}
	}
	var volume = total / data.length;
	output += (volume).toFixed(4);
	}
	output += ',0], knots: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	output += (i+1);
	}
	output += ',' + (spectrogramWidth + 1) + '] });\n';


	//write to file
	$.ajax({
	url: '/receiveAnimationData',
	data: output,
	cache: false,
	contentType: false,
	processData: false,
	method: 'POST',
	type: 'POST',
	success: function(data){
	console.log('Successly written to receiveAnimationData.js');
	console.log('file: ' + file);
	}
	});

	};


	});

	</script>

	</body>

	</html>