pulseplot
Version:
Pulse data viewer JS library
72 lines (62 loc) • 2.7 kB
HTML
<html lang=en-us>
<meta charset=utf-8>
<title>Pulseplot: Pulse Data plot example</title>
<meta name=description content="HTML5 Pulse Data Viewer.">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=stylesheet href="styles.css">
<link rel=stylesheet href="example.css">
<div id="dropZone"></div>
<div id="header">
<h1>Pulseplot<span class="small">Pulse Data plot example</span></h1>
</div>
<div id="pulseplots">
<div class="pulseplot">
<div class="fileinfo"></div>
<canvas class="pulseplot-canvas"></canvas>
<div class="pulseplot-messages"></div>
</div>
</div>
<label class="inputfile-box">
<svg class="inputfile-icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
<path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"></path>
</svg>
<input type="file" id="inputfile" class="inputfile-files" name="files[]" multiple />
<strong>Choose a file</strong>
<span> or drag it here</span>.
<br>
<i>.ook (pulse text)</i>
</label>
<input type="file" id="addfile" class="inputfile-files" name="files[]" multiple />
<label for="addfile"><div class="fab"> + </div></label>
<script src="pulseplot.js"></script>
<script>
// if using this as module:
// import { Pulseplot } from './pulseplot.js';
const data = {
time: '2021-01-23T13:24:00.270264',
format: 'fsk', // or 'mod'
freq1: 434002072, // or 'freq1_Hz'
freq2: 433934824, // or 'freq2_Hz'
count: 675,
centerfreq_Hz: 433920000,
rate: 250000, // or 'samplerate_Hz'
rssi_dB: -6.556,
snr_dB: 7.581,
noise_dB: -14.137,
pulses: [0, 4400, 492, 484, 492, 488, 484, 488, 488, 484, 492, 484, 488, 488, 484, 488, 488, 488, 488, 488, 484,
488, 488, 488, 488, 484, 492, 484, 488, 488, 488, 484, 488, 488, 488, 488, 484, 488, 488, 488, 488, 1460, 488,
488, 972, 488, 1464, 484, 488, 488, 488, 972, 1948, 488, 488, 976, 1948, 484, 492, 484, 1952, 484, 976, 488,
21436, 488, 976, 484, 1464, 972, 492, 1456, 11696, 1948, 488, 488, 976, 1944, 492, 484, 488, 1948, 488, 976,
484, 21440, 488, 972, 488, 1464, 976, 484, 1464, 17456]
}
const parent = '.pulseplot'
const pulseplot = new Pulseplot({
parent,
data,
})
pulseplot.enableScrollZoom()
pulseplot.createDropZone()
pulseplot.dropZone.addInput('#inputfile')
pulseplot.dropZone.addInput('#addfile')
</script>