Add a spinning icon

[jywarren]

After #1136, we'll be able to use icons.

In our MapKnitter Lite demo (https://publiclab.github.io/Leaflet.DistortableImage/examples/archive
), when you click "Place", it can take a few seconds to work. Let's think through some Javascript to show a spinning icon to show it's working, and to hide it again once it's done.

Let's work together in the comments here before we try to open a pull request: What are the steps to achieve this? What could some JavaScript code look like to make this work? What do we need to know, or what might go wrong that we should watch for?

Thank you! This is for folks who have completed a first-timers-only issue already.

[RealRichi3]

One question, where would the spinning icon be displayed? Would it be on the side bar or the map?

And should the spinning icon cover have something like a grey overlay below it, and the overlay should cover and be above the map

[jywarren]

I think it could be on the button or right next to it. Because of how the button is created, it may need to be within the button. Then it's simpler too instead of interacting with the map visually.

…

On Thu, Oct 13, 2022, 10:00 AM Richie ***@***.***> wrote: One question, where would the spinning icon be displayed? Would it be on the side bar or the map? And should the spinning icon cover have something like a grey overlay below it, and the overlay should cover and be above the map — Reply to this email directly, view it on GitHub <#1137 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J3KZMLAHY3STXGLYN3WC5NLNANCNFSM6AAAAAARDZBRZY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[RealRichi3]

True, it'll be easier to implement

[RealRichi3]

For this task, it think we'll need to know when the image has been placed on the map

First we need a way to know if the map has been placed or not

We can use a gif for the spinning icon, set the display property to hidden.
Then on click of the place on map button we can display the spinning icon.
The gif for the spinning icon will be visible as long as the image hasn't been placed on the map

[RealRichi3]

function isMapPlaced:
    // code to check if the map is placed

get spinning icon element from DOM
set spining icon element display to hidden

add an event listener to listen for click action on the `place on map`
       while not isMapPlaced:
             place the spinning icon above the clicked button
       set the spinning icon display to hidden

[RealRichi3]

There might be better implementation for this tho, suggestions are welcomed

[jywarren]

The button is created here, and we can add a click listener to it at that time, what do you think?

Leaflet.DistortableImage/examples/archive.html

Lines 103 to 120 in c80a7c6

	if (file.format === 'PNG' || file.format === 'JPEG'){
	let imageRow = document.createElement('div');
	let image = new Image(150, 150);
	let placeButton = document.createElement('a');
	placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button');
	placeButton.innerHTML = 'Place on map';
	image.src = `${url.replace('metadata', 'download')}/${file.name}`;
	imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5');
	imageRow.append(image, placeButton);
	imageContainer.appendChild(imageRow);
	imageCount++;
	}
	});
	responseText.innerHTML = imageCount ? `${imageCount} image(s) fetched successfully.` : 'No images found in the link provided...'

[RealRichi3]

perfect, we can add the click listener here, we also need to find a way to check if the image has been placed

[RealRichi3]

I think knowing when the image has been placed would be the main issue, we can handle the rest with a simple logic

[RealRichi3]

One question, how are the Images placed on the map, i mean what is the process it goes through. Do we just get the image, then position then add a new DOM element containing the image

[jywarren]

One way to know is to track onload listener of the image. Another is to poll to see if the image has a width attribute. I think the onload listener would be best... let's also look if there is an event fired once the image finishes loaded.

[segun-codes]

Perhaps, we could consider SVG spinner instead of GIF spinning icon.

[jywarren]

Its true, and we do have a loading spinner in our icons locally already I think. But I imagine we will be using a range of icons in this page so I think it's worth standardizing on FontAwesome. You can add the "spin" class to make it spin without using a gif!

[RealRichi3]

Good idea, correct me if i'm wrong, so currently the plan is to

• Add an click event listener for the place on map buttons
• Add an onload event listener for the images
• Onclick of the button we display the spinning icon
• Then Onload of the image, the spinning icon disappears

If this is it, i would like to work on it then. Correct me if i missed anything

[RealRichi3]

I was thinking about the event listener to check if the image has been added, i saw something about Mutation event, we can use this to check if a node or child element has been added to the parent div or element.

I had another idea tho,

• Have a counter to store the current size of the images within the parent element in the DOM,
• An async while loop to keep checking if the number of child elements in the parent element increases. It should be async we don't have to wait for it to complete.
• If we notice any increment in the number of child elements we can then stop the spinning button and break out of the loop

The downside of this is that it might run forever incases where the image doesn't load. To account for this, we can set the async while loop to only run for a limited time, lets say, 30 seconds.

I think the first idea is better

[segun-codes]

That's yet another good idea. If we are going by the first idea as suggested, we should still consider implementing @jywarren's idea of waiting time. If no 'image dropped on map' event is fired after this waiting period elapses, then a message (e.g., "Please attempt to place the image again") can be displayed to the user. This can address network connectivity issue midway into a "place image on map" operation.

[segun-codes]

Hi @jywarren, the conversation here stimulated me into considering raising the two issues listed below. What do you think? Can I go ahead?

1. provide drag and drop support for an image to be placed on a map: this is an alternative to using the 'place on map' button.
2. provide hide and unhide functionality for the sidebar where we have the button 'place on map': currently, the sidebar sits on a reasonable percentage of the browser page, we can hide the sidebar when not needed (and unhide when required) so that user can have full benefit of the entire page for image distortion etc. I suspect such flexibility will offer better user experience.

[sainamercy]

The code for the click event is already there. the highlighted areas could be a simple fix:

document.addEventListener("click", (event) => {
if (event.target.classList.contains('place-button')) {
// render spinner
let imageURL = event.target.previousElementSibling.src;
let image = L.distortableImageOverlay(imageURL);
map.imgGroup.addLayer(image);
// image.addEventListener('load', ()=>{ // hide the spinner })
}
});

[sainamercy]

The button is created here, and we can add a click listener to it at that time, what do you think?

Leaflet.DistortableImage/examples/archive.html

Lines 103 to 120 in c80a7c6

	if (file.format === 'PNG' || file.format === 'JPEG'){
	let imageRow = document.createElement('div');
	let image = new Image(150, 150);
	let placeButton = document.createElement('a');
	placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button');
	placeButton.innerHTML = 'Place on map';
	image.src = `${url.replace('metadata', 'download')}/${file.name}`;
	imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5');
	imageRow.append(image, placeButton);
	imageContainer.appendChild(imageRow);
	imageCount++;
	}
	});
	responseText.innerHTML = imageCount ? `${imageCount} image(s) fetched successfully.` : 'No images found in the link provided...'

How does one display part of a file like this

[RealRichi3]

The code for the click event is already there. the highlighted areas could be a simple fix:

document.addEventListener("click", (event) => { if (event.target.classList.contains('place-button')) { // render spinner let imageURL = event.target.previousElementSibling.src; let image = L.distortableImageOverlay(imageURL); map.imgGroup.addLayer(image); // image.addEventListener('load', ()=>{ // hide the spinner }) } });

True, it applies the same logic we had in mind tho, I'll wait for @jywarren to approve before taking up the task

[7malikk]

Leaflet.DistortableImage/examples/archive.html

Lines 77 to 89 in c80a7c6

	map = L.map('map').setView([51.505, -0.09], 13);
	map.attributionControl.setPosition('bottomleft');
	map.addGoogleMutant();
	map.whenReady(() => {
	new bootstrap.Modal(welcomeModal).show();
	});
	};
	const setupCollection = () => {
	map.imgGroup = L.distortableCollection().addTo(map);

The button is created here, and we can add a click listener to it at that time, what do you think?

Leaflet.DistortableImage/examples/archive.html

Lines 103 to 120 in c80a7c6

	if (file.format === 'PNG' || file.format === 'JPEG'){
	let imageRow = document.createElement('div');
	let image = new Image(150, 150);
	let placeButton = document.createElement('a');
	placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button');
	placeButton.innerHTML = 'Place on map';
	image.src = `${url.replace('metadata', 'download')}/${file.name}`;
	imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5');
	imageRow.append(image, placeButton);
	imageContainer.appendChild(imageRow);
	imageCount++;
	}
	});
	responseText.innerHTML = imageCount ? `${imageCount} image(s) fetched successfully.` : 'No images found in the link provided...'

How does one display part of a file like this

Hello @sainamercy, see how here

[sainamercy]

Hi @7malikk. Thanks

[7malikk]

@segun-codes and @RealRichi3, this looks like an interesting issue I'd like to join you both in resolving it.

[jywarren]

The code for the click event is already there. the highlighted areas could be a simple fix:

@sainamercy is correct, the click event is there!

I think @sainamercy has the right idea for inserting code in these lines:

#1137 (comment)

Maybe @sainamercy and @RealRichi3 would like to take this on together? @RealRichi3 if you open a PR with your attempt and @sainamercy can offer comments on it, that can count as a contribution for both of you. Just please note that it's collaborative in the PR description so we can count it for both.

@7malikk appreciate your help and if you can offer input that's great, but since @RealRichi3 and @sainamercy have already gotten a start, perhaps we can find another for you?

@segun-codes i like the hide sidebar option. What could it look like when minimized, so it can be re-opened? Maybe you and @7malikk could open a new issue for that and discuss the design ideas before starting a PR?

[7malikk]

@jywarren thats sounds great
@segun-codes how would you like to begin?

[RealRichi3]

Alright @jywarren

[sainamercy]

Hi @RealRichi3 I would be happy to collaborate with you

[segun-codes]

Alright @jywarren. @7malikk I will open an issue for this and then we can proceed to discuss design ideas.

[segun-codes]

@jywarren, what about the 'drag and drop' issue I suggested, do you want to react to it as well?

[7malikk]

Alright @jywarren. @7malikk I will open an issue for this and then we can proceed to discuss design ideas.

This sounds good @segun-codes
Ping me when you do

[jywarren]

Regarding drag and drop, unfortunately there are some complications... I wrote a bit more in #998 (comment)

Thank you for your interest!!!

[segun-codes]

Alright @jywarren. @7malikk I will open an issue for this and then we can proceed to discuss design ideas.

This sounds good @segun-codes Ping me when you do

Issue opened, tagged you and @jywarren. (here #1172)

[segun-codes]

Regarding drag and drop, unfortunately there are some complications... I wrote a bit more in #998 (comment)

Thank you for your interest!!!

Oh! okay... thank you for clarifying @jywarren.