cailean/transmediale-noura-tafeche
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hyperlink automation

Browse Source
This commit is contained in:
Cailean Finn
2024-01-16 10:11:48 +00:00
parent 810873cfac
commit 9ac3f4a1dc
1 changed files with 47 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
client/app.js
View File

@@ -40,71 +40,56 @@ imageObj.onload = function () {
// Add the image to the layer // Add the image to the layer
layer.add(image); layer.add(image);
const clickableRect = new Konva.Rect({ // Fetch JSON data asynchronously
id: 'public/test/lol', fetch('./links.json')
x: 2635, // Adjust position as needed .then(response => response.json())
y: 441, // Adjust position as needed .then(jsonData => {
width: 655, // Process the JSON data and create rectangles
height: 45, const layer = new Konva.Layer();
fill: 'rgba(255, 0, 0, 0.0)', // Red with 50% opacity
draggable: false,
shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
shadowBlur: 20, // Blur radius
shadowOffset: { x: 0, y: 0 }, // Offset of the shadow
shadowOpacity: 1, // Shadow opacity
});
// Attach a click event listener to the rectangle jsonData.sections.forEach(section => {
clickableRect.on('click', () => { section.links.forEach(link => {
// console.log(clickableRect.id()) const clickableRect = new Konva.Rect({
// // Data to send with the POST request id: link.id,
// const postData = { x: link.x,
// rectangleId: clickableRect.id() y: link.y,
// }; width: link.width,
height: link.height,
// // Send POST request to the server fill: 'rgba(255, 0, 0, 1.0)',
// fetch('http://localhost:3000/api/change-directory', { draggable: false,
// method: 'POST', shadowColor: 'rgba(0, 0, 0, 0.5)',
// headers: { shadowBlur: 20,
// 'Content-Type': 'application/json', shadowOffset: { x: 0, y: 0 },
// }, shadowOpacity: 1,
// body: JSON.stringify(postData), });
// })
// .then(response => response.json())
// .then(data => {
// console.log('Server response:', data);
// })
// .catch(error => {
// console.error('Error sending POST request:', error);
// });
let linkName = ''
// Check if the window is already open
if (myWindow && !myWindow.closed) {
// Reuse the existing window
myWindow.location.href = 'http://localhost:3000/' + linkName;
} else {
// Open a new window and assign a unique name
myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
}
});
// Change cursor on hover clickableRect.on('click', () => {
clickableRect.on('mouseenter', () => { let linkName = link.url
document.body.style.cursor = 'pointer'; // Check if the window is already open
}); if (myWindow && !myWindow.closed) {
// Reuse the existing window
clickableRect.on('mouseleave', () => { myWindow.location.href = 'http://localhost:3000/' + linkName;
document.body.style.cursor = 'default'; } else {
}); // Open a new window and assign a unique name
myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
}
});
// Add the clickable rectangle to the layer clickableRect.on('mouseenter', () => {
layer.add(clickableRect); document.body.style.cursor = 'pointer';
});
// stage.scaleX(0.05) clickableRect.on('mouseleave', () => {
// stage.scaleY(0.05) document.body.style.cursor = 'default';
// Center the stage initially });
// stage.x((stage.width() - image.width()) / 2);
// stage.y((stage.height() - image.height()) / 2); layer.add(clickableRect);
});
});
stage.add(layer);
})
.catch(error => console.error('Error fetching JSON:', error));
stage.x((stage.width()/2) - (image.width()/2) * 0.15) stage.x((stage.width()/2) - (image.width()/2) * 0.15)
stage.y((stage.height()/2) - (image.height()/2) * 0.15) stage.y((stage.height()/2) - (image.height()/2) * 0.15)
@@ -141,8 +126,7 @@ window.addEventListener('wheel', (e) => {
// Calculate the new scale based on the wheel delta // Calculate the new scale based on the wheel delta
zoomLevel += e.deltaY * -0.001; zoomLevel += e.deltaY * -0.001;
zoomLevel = Math.max(0.15, Math.min(0.8, zoomLevel)); zoomLevel = Math.max(0.15, Math.min(0.8, zoomLevel));
console.log(zoomLevel)
// Calculate the new scale factor // Calculate the new scale factor
const scale = zoomLevel / oldScale; const scale = zoomLevel / oldScale;