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

104
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,
fill: 'rgba(255, 0, 0, 1.0)',
draggable: false,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 20,
shadowOffset: { x: 0, y: 0 },
shadowOpacity: 1,
});
// // Send POST request to the server clickableRect.on('click', () => {
// fetch('http://localhost:3000/api/change-directory', { let linkName = link.url
// method: 'POST', // Check if the window is already open
// headers: { if (myWindow && !myWindow.closed) {
// 'Content-Type': 'application/json', // Reuse the existing window
// }, myWindow.location.href = 'http://localhost:3000/' + linkName;
// body: JSON.stringify(postData), } else {
// }) // Open a new window and assign a unique name
// .then(response => response.json()) myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
// .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('mouseenter', () => {
clickableRect.on('mouseenter', () => { document.body.style.cursor = 'pointer';
document.body.style.cursor = 'pointer'; });
});
clickableRect.on('mouseleave', () => { clickableRect.on('mouseleave', () => {
document.body.style.cursor = 'default'; document.body.style.cursor = 'default';
}); });
// Add the clickable rectangle to the layer layer.add(clickableRect);
layer.add(clickableRect); });
});
// stage.scaleX(0.05) stage.add(layer);
// stage.scaleY(0.05) })
// Center the stage initially .catch(error => console.error('Error fetching JSON:', error));
// stage.x((stage.width() - image.width()) / 2);
// stage.y((stage.height() - image.height()) / 2);
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,7 +126,6 @@ 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;