This post is the second post on how to implement a custom functionality into Ramboll's SurveyXact questionnaire software. If you missed the first part - read it here.
The patient / respondent completes the questionnaire and data is stored within SurveyXact's API/XML module for you to retrieve. At the data processor there’s a text field that show the respondent's drawing of their pain translated into coordinates. The respondent cannot see this – it is reserved for the data processor. The format of the coordinates is x1, y1, x2, y2, x3, y3....
In the HTML code below, a function is written that separates the result at every other comma (,) making it it's own coordinate.
You should now be able to recreate the drawing from your respondent by copying the data from the input field. It’s important to include all coordinates. Consider to replace the current text field with an expanding one so all coordinates are visible.
The data processor in the hospital project used their own backend implementation, but below I have included the HTML and Javascript code to do it locally.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js" charset="utf-8"></script>
</head>
<body>
<div id="canvas"></div>
<input id="input" type="string">
<button type="button" id="drawButton">Draw SVG</button>
<button type="button" id="saveButton">Save SVG</button>
<script src="image.js" charset="utf-8"></script>
</body>
</html>
Javascript
// Test string
'use strict'
const string = 'your-coordinates-from-the-input';
// Initiate the program
function setup() {
// Creating canvas element
const canvas = createCanvas(450, 500);
// Assigning it to the div with id: #canvas
canvas.parent('canvas')
// Load empty BG image
const bg = loadImage('images/body.png', img => {
image(img, 0, 0);
});
// Select button with id: #drawButton
const drawButton = document.querySelector('#drawButton');
// Assign click event to button
drawButton.addEventListener('click', () => {
// Select button with id: #drawButton
const input = document.querySelector('#input').value;
// Parse coordinates to array format
const parser = (string) => {
return string.split(',')
.map(parseFloat)
.reduce((acc, val, i, arr) => (i % 2) ? acc : [...acc, arr.slice(i, i + 2)], []);
}
// Create array with parsed coordinates
const parsedCoordinates = parser(input)
// Draw coordinates on to the BG image from the array with parsed coordinates
function draw() {
// Draw red color
stroke(255, 40, 0);
// 3 pixels pr. coordinate
strokeWeight(3);
// Draw each coordinate in the array
for (var i = 0; i < parsedCoordinates.length; i++) {
point(parsedCoordinates[i][0], parsedCoordinates[i][1]);
}
}
draw();
});
// Select button with id: #saveButton
const saveButton = document.querySelector('#saveButton');
// Assign click event to button
saveButton.addEventListener('click', () => {
// Save and give a file name
saveCanvas(canvas, "mySVG.png");
// Prints to the console
print("Saved");
// Just export once
noLoop();
});
}
Insert the coordinates into the HTML element input and click on the button called “Draw SVG”.
The program has now recreated the respondent's drawing. Lastly, click on the button called “Save SVG”.
The picture is saved locally on the computer as a .png file for you to use.
