dcmjs-ecg
Version:
DICOM electrocardiography (ECG) rendering for Node.js and browser using dcmjs
140 lines (126 loc) • 3.99 kB
HTML
<html lang="en">
<head>
<title>dcmjs-ecg rendering example</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
/>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div id="dropZone" class="container">
<div class="content">
<p id="infoText">
<a id="openLink" href="">Open</a> or drag and drop a DICOM ECG Part 10 file to render
it!<br />
Nothing gets uploaded anywhere.
</p>
<img id="renderingImage" />
</div>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/dcmjs"></script>
<script type="text/javascript" src="dcmjs-ecg.min.js"></script>
<script>
const { DicomEcg } = window.dcmjsEcg;
function renderFile(file) {
const reader = new FileReader();
reader.onload = (file) => {
const arrayBuffer = reader.result;
const imageElement = document.getElementById('renderingImage');
const infoTextElement = document.getElementById('infoText');
infoTextElement.innerText = '';
const t0 = performance.now();
const ecg = new DicomEcg(arrayBuffer);
const t1 = performance.now();
console.log(`Parsing time: ${t1 - t0} ms`);
console.log(`Transfer syntax UID: ${ecg.getTransferSyntaxUid()}`);
renderEcg({
ecg,
imageElement,
infoTextElement,
});
};
reader.readAsArrayBuffer(file);
}
function renderEcg(opts) {
try {
opts.infoTextElement.innerHTML = '';
opts.imageElement.width = 0;
opts.imageElement.height = 0;
opts.imageElement.src = '';
const t0 = performance.now();
const renderingResult = opts.ecg.render({
speed: 25,
amplitude: 5,
applyLowPassFilter: true,
});
const t1 = performance.now();
const svgDoc = new DOMParser().parseFromString(renderingResult.svg, 'application/xml');
const viewBox = svgDoc.documentElement.viewBox.baseVal;
opts.imageElement.width = viewBox.width;
opts.imageElement.height = viewBox.height;
opts.imageElement.src = `data:image/svg+xml;base64, ${btoa(renderingResult.svg)}`;
const t2 = performance.now();
console.log(
`ECG info:\n${renderingResult.info
.map(
(i) =>
`${i.key}: ${Array.isArray(i.value) ? i.value.join(', ') : i.value} ${
i.unit !== undefined ? i.unit : ''
}`
)
.join('\n')}`
);
console.log(`Rendering time: ${t1 - t0} ms`);
console.log(`Drawing time: ${t2 - t1} ms`);
} catch (err) {
opts.infoTextElement.innerText = 'Error: ' + err.message;
throw err;
}
}
const dropZone = document.getElementById('dropZone');
dropZone.ondragover = (event) => {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
};
dropZone.ondrop = (event) => {
event.stopPropagation();
event.preventDefault();
const files = event.dataTransfer.files;
renderFile(files[0]);
};
const openLink = document.getElementById('openLink');
openLink.onclick = () => {
const input = document.createElement('input');
input.type = 'file';
input.onchange = (event) => {
const files = event.target.files;
renderFile(files[0]);
};
input.click();
return false;
};
</script>
</html>