G Markable Area

Stable Version 1.0.0 (Compatible with OutSystems 11)
Published on 14 Mar by 
0.0
 (0 ratings)

G Markable Area

Documentation

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.