xxxxxxxxxx
161
/* Data element mapping
Map has structure:
{"from": (x,y), "to": (x,y), "mapped":, "false"}
[1,2]
*/
let sourceData = ["FirstName", "LastName", "City", "State", "Zip", "Phone", "Email"];
let targetData = ["PersonID", "FamilyName", "GivenName", "MiddleName", "Street", "City", "StateCode", "Age", "MobileNumber", "E-Mail"];
let mappings = [];
// animate these mapping pairs
let pairs = [[0,2],[1,1],[2,5],[3,7],[4,null],[5,8]];
let autoMapping = false;
let currentIndex = 0;
let mappingInterval;
// streight horizontal to the right
let scx = -1000; // source curve constraint x
let scy = 400; // default source curve constraint x
// streight horizontal from the left
let tcx = 1000; // target curve constraint x
let tcy = -50;
function setup() {
createCanvas(500, 500);
textSize(12);
let startY = 60;
let gap = 40;
// Initialize mappings (left to right, top to bottom)
for (let i = 0; i < sourceData.length; i++) {
mappings.push({ from: createVector(50, startY + i * gap),
to: createVector(450, startY + i * gap),
mapped: false });
}
// Create buttons
let startButton = createButton('Start Auto Mapping');
startButton.position(20, 460);
startButton.mousePressed(toggleAutoMapping);
let nextButton = createButton('Next Match');
nextButton.position(180, 460);
nextButton.mousePressed(nextMatch);
let resetButton = createButton('Reset Automap');
resetButton.position(340, 460);
resetButton.mousePressed(resetMapping);
}
function draw() {
background(245);
drawDataElements();
drawMappings();
}
function drawDataElements() {
// Draw source data elements
for (let i = 0; i < sourceData.length; i++) {
fill('lightgreen');
stroke('gray')
strokeWeight(1);
rect(10, 35 + i * 40, 100, 20, 5);
fill('black');
textAlign(RIGHT);
textSize(12);
noStroke();
text(sourceData[i], 100, 50 + i * 40);
}
// Draw target data elements
for (let i = 0; i < targetData.length; i++) {
fill('lightblue');
strokeWeight(1);
stroke('gray')
rect(390, 35 + i * 40, 100, 20, 5);
fill('black');
textAlign(LEFT);
textSize(12);
noStroke();
text(targetData[i], 400, 50 + i * 40);
}
}
function drawMappings() {
for (let i = 0; i < currentIndex; i++) {
if (mappings[i].mapped) {
strokeWeight(.5);
stroke('silver');
line(mappings[i].from.x + 60, mappings[i].from.y-16,
mappings[i+2].to.x - 60, mappings[i+2].to.y-16);
noFill();
stroke('blue');
strokeWeight(2);
y1 = mappings[i].to.y-16;
y2 = mappings[i+2].from.y-16;
ydiff = y2 - y1;
customCurve(scx, y1+ydiff,
mappings[i].from.x + 60, y1,
mappings[i+2].to.x - 60, y2,
tcx, y2-ydiff, 1)
}
}
// Check for completion
if (currentIndex >= mappings.length) {
textSize(24);
fill('green');
text("Done with Match", 10, 450);
// print(mappings);
// noLoop();
}
}
// this has the delay
function toggleAutoMapping() {
autoMapping = !autoMapping;
this.html(autoMapping ? 'Stop Auto Mapping' : 'Start Auto Mapping');
// interval to wait in milliseconds
// call nextMatch() every second
if (autoMapping) {
mappingInterval = setInterval(() => {
nextMatch();
}, 1000);
} else {
clearInterval(mappingInterval);
}
}
function nextMatch() {
if (currentIndex < mappings.length) {
mappings[currentIndex].mapped = true;
currentIndex++;
}
}
function resetMapping() {
currentIndex = 0;
mappings.forEach(mapping => mapping.mapped = false);
clearInterval(mappingInterval);
autoMapping = false;
select('button').html('Start Auto Mapping');
}
// Draw a curve with only the percent drawin
function customCurve(c1x, c1y, x1, y1, x2, y2, c2x, c2y, percent) {
beginShape();
for (let t = -0.01; t <= percent + 0.01; t += 0.01) {
let v0 = createVector(c1x, c1y);
let v1 = createVector(x1, y1);
let v2 = createVector(x2, y2);
let v3 = createVector(c2x, c2y);
let x = curvePoint(v0.x, v1.x, v2.x, v3.x, t);
let y = curvePoint(v0.y, v1.y, v2.y, v3.y, t);
curveVertex(x, y);
}
endShape();
}