Agamotto: how about a PNG compatibility?

Hi Y'all!

I used Agamotto today to show the different types of lightings and markings we can find on an airport. To make it very "step by step", it seemed to me that it was the best one. My idea was to use a night version illustration of an airport as a background and to add layers with transparent background that would contain the different markings and lights. Welll... Nope! 

It seems that Agamotto is not compatible with PNG... So as soon as I move the cursor to make new elements appear, the airport background disappears and I get a full black background with only a light or marking element.

Of course I can and I will reuse the airport background to make it work.... But it doesn't make sense to me to load the whole thing with a full image while we could use PNG images with transparent backbround...

any plan of improvement on that?

Pilotbear

otacke's picture

Hi Pilotbear!

The reason for your issue is not incompatibility with PNG, but deliberate replacement of transparency with a black background. The main intention of Agamotto was not your use case, but blending different images -- and in that case, using the transparency would lead to strange results. In fact, it caused some confusion while testing.

However, an option for toggling the behavior is totally possible. How should it work? What's your suggestion?

Best,

Oliver

Well, the map example on this site is the perfect example of what it could be. One background (which would not necesssarily be the first image, though, it could be decided in the settings which image is the background), and transparent layers piling up as we move the cursor. 
When I teach my students, I like to deliver the information step by step and same when when it's visual. If I show them an image a lighted airport, it can be very messy and confusing. If I show them the threshold lights, first, the runway lights, then, the taxiway lights, etc... it's way more efficient visually and we respect one of the principle of teaching : form easy to complicated, from symple to complex...

I attached a little piece of a navigation map... you'll understand why having transparent layers instead of full visually loaded images would be more ineresting in terms of file weight. If I want to teach every my students every little symbol on the map, it will take them for ever to memorize and understand how the airpace works, for example. If I use a background image (terrain  + water) and add gradually all the symbols with an explanation, I guaranty you the lesson will be WAYYY MORE efficient! ;-)

My suggestion is just from a user's point of view, I only have an HTML/CSS/graphic work background and I don't do programming. But it seemed to me that having transparent PNGs would make the whole thing lighter and more efficient in terms of teaching techniques... 

Does that answer your question?

PilotBear

 

Attachments: 
otacke's picture

Hi Pilotbear!

Thanks. Now I better understand what you have in mind. Imagining the workflow, I wonder if modifying Agamotto would be the best way to go.

Right now, even if Agamotto had the feature that you're thinking of, the workflow would be virtually the same. You'd use an image manipulation program (e.g. GIMP) and you'd position the overlay icon correcty above the background and save the image with the same dimensions as the background image -- either including the background or just using a transparent background. In the latter case, as you noted correctly, the amount of storage needed would be (much) smaller, but would also require to add new options to the editor of Agamotto for this special purpose only, and the way Agamotto works under the hood would also have to be changed. Still possible.

I wonder, however, if there was an easier way for others who are not familiar with GIMP or similar tools. The workflow could also look like this: Define a background image, successively create a new layer and position an image (or multiple images) directly in the editor. One could also wonder if adding labels or some text might be useful as overlays. I think this would be much easier and user-friendly. Having a look at the previous description of the workflow: "H5P Course Presentation" offers exactly that but lacks a "blending transition" (or more transitions in general).

Of course, since H5P doesn't want to be a provider of bloated silver bullet content types but prefers specialized sleak content types, it could also be a good idea to create a new one designed specifically for your use case (anticipating some features that others might need such as the label overlays mentioned above).

What do you think about those ideas?

To be honest I have no idea the amoutnt of work it represents as I don't have any programming skills, except for HTML/CSS... And let's make that clear : I don't expect anyone to work FOR ME, of course ;-)
I just thought that my case was probably not unique and that other users might have the same issue with Agamotto.
Your idea might work better. Tahnsk a lot for your answer.

Pilotbear

 

otacke's picture

Hi Pilotbear!

Don't worry about the amount of work :-) I'm just trying to figure out what a good solution for all/most/many users might look like on a user experience level, not on a code level.

Wednesday's picture

For the record, I came searching here because I hit a similar problem.

All my slides had transparent backgrounds and when I saw they were being placed on a black background, not a white one, I looked for the button to change this... and not there.

If I understand what the dev is saying, the black background solved a problem for the blended images where mixed states between slides are shown.

For me, I will just reformat all these images to all have the intended white background and not translucent pixels.

otacke's picture

Hi Wednesday!

Yes, a background is added to allow proper transitions. It could as well be a white one (or any other color), but you're the first person to ask for it ever. I'll put an option for it onto the list of my TODOs.

Best,
Oliver

Wednesday's picture

Thanks Oliver,

I really like the agamotto tool you created. I started using it last year and can see lots of other ways I can apply it my teaching.

If the option to customise background colour isn't too hard to add it would be nice, particularly if it extended to the background behind the slider... but sounds like I might be in the minority on that one which is fair enough.

I would also use the option to have the slider set to a vertical format (perhaps down the right side of the image area?) too (I'm guessing I'm the only one that asked about that too!?).

Neither of those updates are essential to me, just 'nice to have's.

There is one nagging problem I do encounter. I don't think it's anything wrong with your code, but my problem stemming from bringing this content into the Canvas LMS system (currently unsupported) via iframe. What is happening is the labels on the slider don't show up, but, if I resize my window down (and even back up again slowly) they magicaly do appear. Happens on all browsers.

 

otacke's picture

Hi Wednesday!

Adding an option for setting the color is trivial. Having a vertical slider involves some more work (and yes, your the first one to ask for it :-)).

The label issue might in fact be a problem with initializing the content. The labels will not be displayed if they are too long and would overlap, but as you describe it, they are displayed if you resize the iframe to a smaller size? 

Best,

Oliver

Wednesday's picture

Thanks Oliver, for your reply and your work.

I really like the agamotto tool you created. I started using it last year and can see lots of other ways I can apply it in my teaching.

If the option to customise background colour isn't too hard to add it would be nice, particularly if it extended to the background behind the slider... but sounds like I might be in the minority on that one which is fair enough.

I would also make use of an option to have the slider set to a vertical format (perhaps down the right side of the image area) ... I'm guessing I'm the only one that asked about that too!?

Neither of those updates are essential to me, just 'nice to have's.

There is one nagging problem I do encounter. I don't think it's anything wrong with your code though, but rather my problem stemming from bringing this content into the Canvas LMS system (currently unsupported) via iframe. What is happening in this context is the labels on the slider don't show up, but, if I resize my window down (and even back up again slowly - so weird) they magicaly do appear. Happens on all browsers.

 I understand if you can't help me with this problem as it is probably out of your scope of control. Anyway, just wanted to add my feedback because I'm really happy I discovered H5P generally and Agamotto is definately one of my favorites here. Great work. 

otacke's picture

Hi Wednesday!

I just added the option to set the transparency replacement color yourself. Will be included in the next update of Agamotto, but I can't tell when the core team has time to complete a code review.

Best,
Oliver

Wednesday's picture

Thanks for the update Oliver.

otacke's picture

Hi Wednesday!

The update has just been released on h5p.org and should also be available on self-hosted systems shortly.

Best,
Oliver