G Markeable Area

To use GMarkable Area First you need to include it as a dependency in your project.

 Following is a description of the content of the module:

MarkableBlock:

MarkableAble placeholders.

1.     Content: Will be the content that is displayed
2.     Marker: Is the aspect of the marker that will be placed over the content when user clicks on it.

Markeable Inputs:

MarkerPointList a list of points, this should be passed in if we want to show the image with markers previously marked. 

MarkeableAreaOptions, a structure that defines some configurations for the markeable block.

MarkerPoint

A marker point has the following attributes:

• Id: The id of this marker point
• x: The x position for this marker point on the respective content
• y: The y position for this marker point on the respective content
• distance - an internal field. 
• angle - The angle applied to the current marker point - useful if we need to rotate the point
• label - The label for the current marker point
• originalWidth :
  • Reference width for the point. In case the container is resizable this value must be set in order to calculate the relative position of the point.
    EG: if the point was saved as having x=100 on a container with 1000 width, when the container is resized the y will be automatically set to appropriate ratio, in this case if the container was rezised to 500 width, x would be 50.
• originalHeigth: 
  • This is the reference height for the point. In case the container is resizable this value must be set in order to calculate the relative position of the point.
    EG: if the point was saved as having y=100 on a container with 1000 height, when the container is resized the y will be automatically set to appropriate ratio, in this case if the container was rezised to 500 height, y would be 50.

MarkeableAreaOptions

MarkeableArea options has the following attributes:

• IsEditable - Defines if the area will allow the add/remove of markers
• OffsetXAlignement - If defined is the offset in the x axis for the click. If not set the marker will be placed centered by the point of click
• OffsetYAlignement - If defined is the offset in the y axis for the click. If not set the marker will be placed centered by the point of click
• ShowLabel - If set to true a label will be appended to the point, default label is the current number of the click.
• LabelXOffset - The x position relative to the click + markersize
• LabelYOffset - The y position relative to the click + markersize
• MaxNumberOfPoints - If -1 allows any number of points, otherwise it will only allow these many.
• LabelClass - By default adds class "gmarker-label" , this is the class that will be applied to the label.

Block Events

Markeable block has the following events:

MarkeableBlockReady- This event is triggeret when the markeable block is ready, and returns the internal id of the markeable area object. 
                                      Note: The id returned is the id that must be used to call additionalFunctions on the same object.

MarkerAdded- This event is triggered every time a marker is added to the content through the user click. It contains in its payload information about the object added

MarkerLabelUpdated - This event is triggered when the label of a marker is updated. It contains in its payload the id of the marker and the value for the new label.

MarkerRemoved- This event is triggered when a user removes a marker from the content. It contains in its payload the id of the marker removed.

AdditionalFunctions

AddPoints - This function allows you to dinammically add any list of points to the content.

RemovePoint- This function allows you to remove a specific point by id

ResetPoints- This function resets all the points in the given area

GetSizeRatio- This function gets the size ratio for the given area, besides the Id it also needs the original dimensions for the area. This will return both x and y ratios. 1 means is a 1:1 ratio.

Move- This function allows you to move any point in any direction. Allowed directions are Up, Down, Left and Right

Rotate- This function allows you to rotate any point. Allowed directions are Left or Right.

Rotate- This function

Direction Pad Block: 

This block allows you to create a simple direction pad: 

This direction pad triggers an event with the direction clicked , and can be usefull for example to control a point on the area with the action move.