Skip to content

Commit 5567a07

Browse files
laurentbouquinlaurentbouquin
committed
UPDATE: Add functions for working animations
- Correct flip flop to output wire ids - Remove useless `console.log` lines - Add functions for working animations
1 parent 425fb17 commit 5567a07

7 files changed

+142
-50
lines changed

‎src/code/client.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,11 @@ <h3 class="settings-title">Application Information:</h3>
141141
<script src="js/variables.js"></script>
142142
<script type="module" src="js/parse-sdf-to-json.js"></script>
143143
<script src="js/tool-bar.js" defer></script>
144+
<script src="js/animation.js"></script>
144145
<script src="js/settings.js" defer></script>
145146
<script src="js/schematics.js"></script>
146147
<script src="js/connections.js" defer></script>
147148
<script src="js/parse-json-to-data.js"></script>
148-
<script src="js/animation.js"></script>
149149
</body>
150150

151151
</html>

‎src/code/css/animations.css

+14
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,18 @@
55
aspect-ratio: 1/1;
66
background-color: white;
77
z-index: 1;
8+
}
9+
10+
11+
.move-left {
12+
animation: move-left 1s forwards;
13+
}
14+
15+
@keyframes move-left {
16+
0% {
17+
left: 0;
18+
}
19+
100% {
20+
left: 80vw;
21+
}
822
}

‎src/code/js/animation.js

+122-38
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,134 @@
11
function animate() {
22

3-
for (let elem of pathElements) {
4-
switch (elem.type) {
5-
case 'userInput':
6-
animateUserInput(elem);
7-
break;
8-
case 'lut':
9-
animateLUT(elem);
10-
break;
11-
case 'DFF':
12-
animateDFF(elem);
13-
break;
14-
15-
default:
16-
break;
17-
}
18-
}
3+
for (let elem of pathElements) {
4+
// console.log('animate', elem);
5+
switch (elem.type) {
6+
case 'userInput':
7+
animateUserInput(elem);
8+
break;
9+
case 'lut':
10+
animateLUT(elem);
11+
break;
12+
case 'DFF':
13+
animateDFF(elem);
14+
break;
15+
16+
default:
17+
break;
18+
}
19+
}
1920
}
2021

2122
function animateUserInput(elem) {
22-
let elemPos = document.querySelector(`#userInput-out`).getBoundingClientRect();
23-
let elemTop = elemPos.top;
24-
let elemLeft = elemPos.left;
25-
connections.innerHTML += `<div class="animation" id="animation-${elem.type}" style="position: absolute; top: ${convertPxToVh(elemTop)}vh; left: ${convertPxToVw(elemLeft)}vw;"></div>`;
26-
27-
document.getElementById(`animation-${elem.type}`).animate([
28-
{ transform: `translateX(0vw)` },
29-
{ transform: `translateX(${convertPxToVw(document.querySelector(`#userInput-out-Wire1`).getBoundingClientRect().right)}vw)` },
30-
{ transform: `translateY(${convertPxToVh(document.querySelector(`#userInput-out-Wire2`).getBoundingClientRect().top)}vh)` },
31-
{ transform: `translateX(${convertPxToVw(document.querySelector(`#userInput-out-Wire3`).getBoundingClientRect().right)}vw)` }
32-
], {
33-
duration: 1000,
34-
iterations: 1
35-
});
23+
let elemPos = document.querySelector(`#userInput-out`).getBoundingClientRect();
24+
let elemTop = elemPos.top;
25+
let elemLeft = elemPos.left;
26+
connections.innerHTML += `<div class="animation" id="animation-${elem.type}" style="position: absolute; top: ${convertPxToVh(elemTop)}vh; left: ${convertPxToVw(elemLeft)}vw;"></div>`;
3627
}
3728

3829
function animateLUT(elem) {
39-
let elemPos = document.querySelector(`#lut-${elem.id}-out`).getBoundingClientRect();
40-
let elemTop = elemPos.top;
41-
let elemLeft = elemPos.left;
42-
connections.innerHTML += `<div class="animation" id="animation-${elem.type}" style="position: absolute; top: ${convertPxToVh(elemTop)}vh; left: ${convertPxToVw(elemLeft)}vw;"></div>`;
30+
let elemPos = document.querySelector(`#lut-${elem.id}-out`).getBoundingClientRect();
31+
let elemTop = elemPos.top;
32+
let elemLeft = elemPos.left;
33+
connections.innerHTML += `<div class="animation" id="animation-${elem.type}-${elem.id}" style="position: absolute; top: ${convertPxToVh(elemTop)}vh; left: ${convertPxToVw(elemLeft)}vw;"></div>`;
4334
}
4435

4536
function animateDFF(elem) {
46-
let elemPos = document.querySelector(`#ff-${elem.id}-out`).getBoundingClientRect();
47-
let elemTop = elemPos.top;
48-
let elemLeft = elemPos.left;
49-
connections.innerHTML += `<div class="animation" id="animation-${elem.type}" style="position: absolute; top: ${convertPxToVh(elemTop)}vh; left: ${convertPxToVw(elemLeft)}vw;"></div>`;
37+
let elemPos = document.querySelector(`#ff-${elem.id}-out`).getBoundingClientRect();
38+
let elemTop = elemPos.top;
39+
let elemLeft = elemPos.left;
40+
connections.innerHTML += `<div class="animation" id="animation-ff-${elem.id}" style="position: absolute; top: ${convertPxToVh(elemTop)}vh; left: ${convertPxToVw(elemLeft)}vw;"></div>`;
41+
}
42+
43+
44+
function move(element, distances) {
45+
46+
console.log("Type of distances:", typeof distances[0].split('-')[0]);
47+
// Create an array of animation steps
48+
const steps = [
49+
distances[0].split('-')[0] === 'right' || distances[0].split('-')[0] === 'left'
50+
? { left: distances[0].split('-')[1] }
51+
: { top: distances[0].split('-')[1] },
52+
distances[1].split('-')[0] === 'right' || distances[1].split('-')[0] === 'left'
53+
? { left: distances[1].split('-')[1] }
54+
: { top: distances[1].split('-')[1] },
55+
distances[2].split('-')[0] === 'right' || distances[2].split('-')[0] === 'left'
56+
? { left: distances[2].split('-')[1] }
57+
: { top: distances[2].split('-')[1] }
58+
];
59+
60+
// Add optional steps if they exist
61+
if (distances[3]) {
62+
steps.push(
63+
distances[3].split('-')[0] === 'right' || distances[0].split('-')[0] === 'left'
64+
? { left: distances[3].split('-')[1] }
65+
: { top: distances[3].split('-')[1] }
66+
);
67+
}
68+
69+
if (distances[4]) {
70+
steps.push(
71+
distances[4].split('-')[0] === 'right' || distances[0].split('-')[0] === 'left'
72+
? { left: distances[4].split('-')[1] }
73+
: { top: distances[4].split('-')[1] }
74+
);
75+
}
76+
77+
// Animate each step with timeout between them
78+
function animateStep(index) {
79+
if (index >= steps.length) return;
80+
81+
element.animate([steps[index]], {
82+
duration: 200,
83+
fill: 'forwards'
84+
}).onfinish = () => {
85+
// Apply styles to maintain position
86+
Object.assign(element.style, steps[index]);
87+
88+
// Wait before starting next animation
89+
setTimeout(() => animateStep(index + 1), 200);
90+
};
91+
}
92+
93+
// Start the animation sequence
94+
animateStep(0);
95+
}
96+
97+
function strToInt(value) {
98+
if (value.substring(value.length - 2) === 'vh') {
99+
return Number(value.replace('vh', ''));
100+
} else {
101+
return Number(value.replace('vw', ''));
102+
}
50103
}
104+
105+
106+
forward.addEventListener('click', function () {
107+
// let element = 'userInput-out';
108+
let element = 'ff--1';
109+
let elem = document.getElementById(`animation-${element}`);
110+
let wire1 = document.getElementById(`${element}-Wire1`)
111+
let wire2 = document.getElementById(`${element}-Wire2`)
112+
let wire3 = document.getElementById(`${element}-Wire3`)
113+
let wire4 = document.getElementById(`${element}-Wire4`) ?? null;
114+
let wire5 = document.getElementById(`${element}-Wire5`) ?? null;
115+
animateElement(elem, [wire1, wire2, wire3, wire4, wire5]);
116+
});
117+
118+
function animateElement(elem, wires) {
119+
let value1 = strToInt(wires[0].style.marginLeft) + strToInt(wires[0].style.width) - .3 + 'vw';
120+
let value2 = elem.style.top > wires[1].style.marginTop
121+
? strToInt(wires[1].style.marginTop) - .5 + 'vh'
122+
: strToInt(wires[1].style.marginTop) + strToInt(wires[1].style.height) - 1 + 'vh';
123+
let value3 = elem.style.left > wires[2].style.marginLeft
124+
? strToInt(wires[2].style.marginLeft) - .25 + 'vw'
125+
: strToInt(wires[2].style.marginLeft) + strToInt(wires[2].style.width) - .25 + 'vw';
126+
let value4 = wires[3] != null ? elem.style.top > wires[3].style.marginTop
127+
? strToInt(wires[3].style.marginTop) - .5 + 'vh'
128+
: strToInt(wires[3].style.marginTop) + strToInt(wires[3].style.height) - 1.25 + 'vh' : null;
129+
let value5 = wires[4] != null ? strToInt(wires[4].style.marginLeft) + strToInt(wires[4].style.width) - .25 + 'vw' : null;
130+
let distances = [`right-${value1}`, `up-${value2}`, `right-${value3}`];
131+
if (wires[3] != null) distances.push(`down-${value4}`);
132+
if (wires[4] != null) distances.push(`right-${value5}`);
133+
move(elem, distances);
134+
};

‎src/code/js/connections.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -145,11 +145,12 @@ function drawBasicConnection(obj1, obj2) {
145145
let distW1 = dists[0];
146146
let distW2 = dists[1];
147147

148+
let elemId = obj1.split('-')[1] == '' ? "-1" : obj1.split('-')[1];
148149

149150
// Draw the connection
150-
drawLine(.6, distW1 + sizeOut, outputCenter, output.left, obj1, `${obj1.split('-')[0]}-${obj1.split('-')[1]}-Wire1`);
151-
drawLine(distH, .3, (output.top < input.top ? outputCenter : inputCenter), output.right + distW1, obj1, `${obj1.split('-')[0]}-${obj1.split('-')[1]}-Wire2`);
152-
drawLine(.6, distW2 + sizeIn, inputCenter, input.right - distW2 - sizeIn, obj1, `${obj1.split('-')[0]}-${obj1.split('-')[1]}-Wire3`);
151+
drawLine(.6, distW1 + sizeOut, outputCenter, output.left, obj1, `${obj1.split('-')[0]}-${elemId}-Wire1`);
152+
drawLine(distH, .3, (output.top < input.top ? outputCenter : inputCenter), output.right + distW1, obj1, `${obj1.split('-')[0]}-${elemId}-Wire2`);
153+
drawLine(.6, distW2 + sizeIn, inputCenter, input.right - distW2 - sizeIn, obj1, `${obj1.split('-')[0]}-${elemId}-Wire3`);
153154
}
154155

155156

@@ -357,6 +358,7 @@ function drawInputToFlipflop(obj1, obj2) {
357358
let inputCenter = input.top + inputCenterHeight - .3;
358359

359360

361+
360362
// Draw the connection
361363
drawLine(.6, distW + sizeOut, outputCenter, output.left, obj1, `in-${obj1.split('-')[1]}-Wire1`);
362364
drawLine(distH, .3, (output.top < input.top ? outputCenter : inputCenter), output.right + distW, obj1, `in-${obj1.split('-')[1]}-Wire2`);
@@ -420,7 +422,6 @@ function drawFlipflopToFlipflopConnections(obj1, obj2) {
420422
function drawConnectionSelect(obj1, obj2) {
421423
let ob1 = obj1.split('-')[0];
422424
let ob2 = obj2.split('-')[0];
423-
console.log(ob1, ',', ob2);
424425
if ((ob1 === 'lut' && ob2 === 'ff' ||
425426
(ob1 === 'userInput' || ob1 === 'Clock') && ob2 === 'lut') && obj2 !== 'lut-gnd') {
426427
drawBasicConnection(obj1, obj2);

‎src/code/js/load.js

-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,5 @@ function endLoad(){
2929

3030
clock[0].style.position = 'fixed';
3131
clock[0].style.bottom = '1vh';
32-
console.log('end load');
3332

3433
}

‎src/code/js/parse-json-to-data.js

-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ function sortElements(luts, flipFlops, ios, connections) {
66

77
displayInput(UI.Input.type);
88
let currentElement = connections[UIIndex].Output;
9-
console.log('current = ', currentElement.id);
109
if (currentElement.type === 'lut') {
1110
hasLut = true;
1211
let lut = luts.find(lut => {
13-
console.log('lut.id = ', lut);
1412
return lut.id.toString() === currentElement.id
1513
});
1614
let output = lut.connections.some(item => item.id === '0' && item.io === 'output');
@@ -22,7 +20,6 @@ function sortElements(luts, flipFlops, ios, connections) {
2220
displayLUT(lut.id, inputs[0].id, inputs[1].id, inputs[2].id, output);
2321
}
2422
} else if (currentElement.type === 'DFF') {
25-
console.log('ffs = ', flipFlops);
2623
let ff = flipFlops.find(ff => { return ff.id.toString() === currentElement.id });
2724
displayFlipFlop(ff.id, ff.connections[0].id, ff.connections[1].id, ff.connections[2].id);
2825
}
@@ -36,7 +33,6 @@ function sortElements(luts, flipFlops, ios, connections) {
3633

3734
if (nextElement.type === 'lut') {
3835
let lut = luts.find(lut => { return lut.id.toString() === nextElement.id });
39-
lut.id === 167 ? console.log('lut = ', lut) : {};
4036
let output = lut.connections.some(item => item.id === '0' && item.io === 'output');
4137
let inputs = lut.connections.filter(item => item.io === 'input');
4238
inputs.sort((a, b) => a.id - b.id);
@@ -145,5 +141,4 @@ function parseJsonFile() {
145141
drawClockBase('Clock-out');
146142
}
147143

148-
console.log('pathElements = ', pathElements);
149144
}

‎src/code/js/parse-sdf-to-json.js

-1
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,6 @@ function getConnectionsFromString(element) {
135135
elementFinal.type = "DFF";
136136
elementFinal.port = "0";
137137
if (element[7] === '$') {
138-
console.log(element);
139138
elementFinal.id = element.split('\\')[2].split('~')[1];
140139
if (element.split("_")[2][0] === 'i') {
141140
elementFinal.io = "input";

0 commit comments

Comments
 (0)