Size and location of interactive elements in content.json

Submitted by Jessica Peppit on Fri, 04/27/2018 - 14:47
Forums: 
Developers

Hi!

I am trying to figure out how H5P specifies the x, y, width, and height of interactive elements.

How would I write a function that takes the actual size of an image to get the width and height values specified in the content.json file?

How would I translate the x, y values that are visible in the H5P editor (for instance, 10, 360) into the x and y values specified in the content.json file?

I have looked at the content.json file, and for an image that is 1920x1080 and stretched out to cover the entire screen, I get the following:

x: 0

y:0

width:40.01891962421712

height: 22.505219206680586

For an image that is 500x500, placed about center of the screen, I get the following:

x: 22.964509394572026

y: 3.710575139146568

width: 20.876826722338205

height: 20.876826722338205

For an image that is 100x100, I get the following:

width: 4.175365344467641

height: 4.175365344467641

 

icc's picture

icc

Thu, 05/03/2018 - 16:20

Hi Jessica, 

I'm glad you asked.
These values are actually relative to the font-size of the H5P Content in order to make the scale the same way relative to each other. For a presentation that is 640x400 the font-size is 16 – meaning that x and width range from 0 to 40, y and height range from 0 to 25. To get an element to cover the bottom right 1/4 of the presentation it would need {x:20,y:12.5,width:20,height:12.5}

The actual pixel resolution of the image is not taken into consideration.

I hope this will be useful to you.