Hello everyone, I have been avoiding Javascript for a while now and finally (with the help of chat GPT) I have been creating a script that can do something very specific with handling images,
So far and after all non-code alternatives, Code is my last resort to get this to work
Setup:
I have Database Thing called Project images, it has a single Image field and its on my page on a Repeating group.
Images can be clicked to select them by adding the Cell’s Service Image to a List Custom State
There is a dropdown that has 90, 180 and 270 degrees and a Button that triggers the action or workflow
The goal is to Rotate the image by the degrees selected and generate a new image URL with the new orientation
Then take that new url and add it to the corresponding Service Image thing in the database
I have an HTML element with the script and a Javascript to Bubble element from the Toolbox plugin with listeners for the dropdown and for a button click
“suposedly” to get triggered when the loop is done and the URLs are ready, then take that list of text and use each item in the Make changes to list of things workflow
I don’t know what im doing with the javascript and toolbox part, just following GPT’s instructions basically…
So far the javascript loads properly, the images are updated in real time into the script.
but the listeners aren’t working (i guess, cause I’m not sure how to troubleshoot), the Javascript to Bubble elements does not trigger it
Also tried deleting the listeners, making the angle the dropdowns value into the script and using the “Run Javascript” action on button press
But still doesn’t work. on Asynchronously checked nothing really happens and unchecked it crashes as soon as it runs the step.
This is the code that Im using
document.addEventListener(“DOMContentLoaded”, function() {
let selectedAngle = 90; // Default angle
let imageUrls = [Body’s Selected Images:format as text]; // This will be dynamically populated
// Add event listener to dropdown to update selected angle
document.getElementById(‘rotation-dropdown’).addEventListener(‘change’, function() {
selectedAngle = parseInt(this.value);
console.log(“Dropdown value changed. Selected angle:”, selectedAngle);
});
// Add event listener to button to trigger rotation
document.getElementById(‘rotate-button’).addEventListener(‘click’, function() {
rotateImages();
console.log(“Rotate button clicked.”);
});
function rotateImages() {
let rotatedImageUrls = []; // Clear previous results within function scope
imageUrls.forEach((imageUrl, index) => {
const img = document.createElement('img');
img.src = imageUrl;
img.style.display = 'none';
const canvas = document.createElement('canvas');
document.getElementById('image-container').appendChild(img);
document.getElementById('image-container').appendChild(canvas);
img.onload = function() {
const ctx = canvas.getContext("2d");
if (selectedAngle === 180) {
canvas.width = img.width;
canvas.height = img.height;
} else {
canvas.width = img.height;
canvas.height = img.width;
}
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(selectedAngle * Math.PI / 180);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
ctx.restore();
const rotatedImageUrl = canvas.toDataURL();
rotatedImageUrls.push(rotatedImageUrl);
if (rotatedImageUrls.length === imageUrls.length) {
updateBubble(rotatedImageUrls);
}
};
});
}
function updateBubble(rotatedImageUrls) {
bubble_fn_update_image(rotatedImageUrls);
}
// This function can be called by Bubble to update image URLs dynamically
function updateImageUrls(urls) {
imageUrls = urls.map(url => url.startsWith('//') ? `https:${url}` : url);
}
// Expose the updateImageUrls function to Bubble
window.updateImageUrls = updateImageUrls;
});
And this is the Javascript to Bubble element setup
What am I doing wrong here?
Any help would be appreciated!