JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<input type=file>
<svg height="700" width="700">
</svg>

JavaScript

const PKT_SIZE = 59;
const POS_DISTANCE = 19;
const POS_ANGLE = 21;
const PI = Math.PI;

const svg = document.querySelector('svg');
document
	.querySelector('[type="file"]')
  .addEventListener('change', function(c) {
  	const reader = new FileReader(); 
    reader.addEventListener('load', function(l) {
    	const buffer = l.target.result;
      let x = 0, y = 0, a = 0, m = 'M350 350 ';
    	for(let i = PKT_SIZE * 250; i < buffer.byteLength; i+= PKT_SIZE) {
      	const sample = new DataView(buffer, i, PKT_SIZE);
        const distance = sample.getInt16(POS_DISTANCE);
        let angle = sample.getInt16(POS_ANGLE);
        console.log(sample, distance, angle);
				if (Math.abs(distance) > 100) {
        	continue;
        }
				a = (a + (2 * angle) / 23);         
        x += distance * Math.cos(a);
        y += distance * Math.sin(a);
        m += "L" + (x * 0.6 + 350) + " " + (y * 0.6 + 350);
      }
      svg.insertAdjacentHTML('afterbegin',
      	'<path d="' + m + '" fill="transparent" stroke="black"/>'
      );
    });
  	reader.readAsArrayBuffer(c.target.files[0]);
	});