$wp.content

This interface provides APIs required for using the loaded current pages and elements from W Player.

getPage()

• Description

  Returns the page object.

  Receives the page object to which it currently belongs by entering the ID, sent from the state event, as a parameter.

  It is possible to select elements loaded to the page, using function "getElement()."

• Syntax

  function getPage(‘pageId’);

• Parameter

  pageId: ID value sent from the state event

• Return value

  Success: Page object, fail: Always successful

• Constraints

  If an ID value is not entered or an invalid value is entered, the page object currently playing on the screen will be sent.

• Code example

  $wp.content.getPage(‘pageId’);

setProperty()

• Description

  Configure page properties.

• Syntax

  function setProperty('name', 'value');

• Parameter

  name: Property name

  value: Property value

  name	value
  	Type	Description
  background-color	color	value: "rgba(0, 0, 0, 1)"

• Return value

  Type : bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  If you change a property that is not supported (e.g., a property that is not included in the parameter table), W Player playback may be affected.

• Code example

  $wp.content.getPage(pageId).setProperty('background-color', “rgba(255, 0, 0, 1)”));

getProperty()

• Description

  Find the property value of the page.

• Syntax

  function setProperty('name', 'value');

• Parameter

  name: Property name

  name	Return value
  	Type	Description
  name	string	string
  background-color	color	value: "rgba(0, 0, 0, 1)"

• Return value

  Type: Refer to the table above.

  If API has been run successfully: normal value

  If API has not been run successfully: undefined

• Code example

  $wp.content.getPage(pageId).getProperty('background-color');

getGlobalPage()

• Description

  Returns the common page object. Receives the common page object to which it belongs by entering the ID, sent from the state event, as a parameter.

  It is possible to select elements loaded to the common page, using function "getElement()."

• Syntax

  function getGlobalPage(‘pageId’);

• Parameter

  pageId: ID value sent from the state event

• Return value

  Success: Current global page object

  Fail: Always successful

• Constraints

  Property-related functions are not provided, unlike the getPage() API.

• Code example

  $wp.content.getGlobalPage(pageId);

getElement()

• Description

  Returns element objects that have names from the page.

  Allows each element to be controlled via API provided by the element.

• Syntax

  function getElement(‘name’);

• Parameter

  name: Name of the element object

  Note

  Refer to the following for details. ▶ Web Author screen layout

• Return value

  function getElement(‘name’);

  Success: The element object is returned

  Fail: undefined

• Code example

  $wp.content.getPage(pageId).getElement(‘Text1’);

setProperty()

• Description

  Configure the properties of an element. Supported properties have different values depending on the element.

• Syntax

  function setProperty('name', 'value') ;

• Parameter

  name: Property name

  value: Property value

  Supported elements	name	value
  		Type	Description
  common (Note that video elements are not supported)	width	number	Value unit: px
  	height	number	Value unit: px
  	left	number	Value unit: px
  	top	number	Value unit: px
  	visibility	string	value: "visible,hidden"
  	opacity	number	value: 0.0~1.0
  	rotation	number	value: 0~360
  	size	Object	{width: 0, height: 0}
  	position	Object	{left: 0, top: 0}
  image	flip-x	boolean	-
  	flip-y	boolean	-
  	source	string	Absolute file path (This can be created by referring to getRootDirectory().)
  	flip	Object	valueObject = {x: false, y: false}
  video	source	string	Absolute file path (This can be created by referring to getRootDirectory().)
  text	font-size	number	value: font size
  	font-variant	string	value: "normal, small-caps"
  	font-color	color	value: "rgba(0, 0, 0, 1)"
  	background-color	color	value: "rgba(0, 0, 0, 1)"
  	font-weight	string	value: "normal, bold"
  	font-style	string	value: "normal, italic"
  	text-decoration	string	value: "none, line-through, underline"
  	letter-spacing	number	Value unit: px (0-50)
  	horizontal-align	string	value: "left,right,center"
  	vertical-align	string	value: "top,middle,bottom"
  	text	string	string

• Return value

  Type: bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  If you edit a property that is not supported (e.g., a property that is not included in the parameter table), W Player playback may be affected.

• Code example

  $wp.content.getPage(pageId).getElement(‘Text1’).setProperty(‘text’, ‘Hello World!’);

• Others

  Image/Video elements - The parameter of a Source property can be set as follows:

  var imagePath = $wp.local.getRootDirectory() + “/testImage.png”;

  Refer to the following: ▶ $wp.local. getRootDirectory();

  $wp.content.getPage(pageId).getElement(‘Image1’).setProperty(‘source’, imagePath);

getProperty()

• Description

  Find the property value of an element.

• Syntax

  function getProperty (‘name’);

• Parameter

  name: Property name

  Supported elements	name	Return value
  		Type	Description
  common (Note that video elements, with the exception of Lock, are not supported)	width	number	Value unit: px
  	height	number	Value unit: px
  	left	number	Value unit: px
  	top	number	Value unit: px
  	visibility	string	value: "visible,hidden"
  	opacity	number	value: 0.0~1.0
  	rotation	number	value: 0~360
  	size	Object	{width: 0, height: 0}
  	position	Object	{left: 0, top: 0}
  	lock-position-size	boolean	-
  	lock-design	boolean	-
  	lock-content	boolean	-
  image	flip-x	boolean	-
  	flip-y	boolean	-
  	source	string	Absolute file path
  	flip	Object	{x: false, y: false}
  video	source	string	Absolute file path
  web content	user-data	Object	{"key","value"}
  text	font-size	number	value: font size
  	font-variant	string	value: "normal, small-caps"
  	font-color	color	value: "rgba(0, 0, 0, 1)"
  	background-color	color	value: "rgba(0, 0, 0, 1)"
  	font-weight	string	value: "normal, bold"
  	font-style	string	value: "normal, italic"
  	text-decoration	string	value: "none, line-through, underline"
  	letter-spacing	number	Value unit: px (0-50)
  	horizontal-align	string	value: "left,right,center"
  	vertical-align	string	value: "top,middle,bottom"
  	text	string	string

• Return value

  Type: Refer to the table above

  If API has been run successfully: Normal value

  If API has not been run successfully: undefined

• Code example

  $wp.content.getPage(pageId).getElement(‘Text1’).getProperty(‘text’);

addEventListener()

• Description

  Add a Listener that receives click events for the currently playing element.

• Syntax

  function addEventListener(type,myFunction);

• Parameter

  type: "click" ("Click" is only supported)

  myFunction: callback function

• Return value

  Type: bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  "Click" is only supported as Type.

  Supported elements: Images, video, text, stickers, and figures

  Click field: This is the most outer rectangular field among the element fields. (Note that a figure element is set based on the outer edge of the figure shape.)

• Code example

  $wp.content.getPage(pageId).getElement(‘Text1’). addEventListener(‘click’,myFunction);

getPropertyType()

• Description

  Import the names of properties provided in the content interface.

  Property name	Return value
  WIDTH	'width'
  HEIGHT	'height'
  LEFT	'left'
  TOP	'top'
  VISIBILITY	'visibility'
  OPACITY	'opacity'
  ROTATION	'rotation'
  SIZE	'size'
  POSITION	'position'
  FLIP_X	'flip-x'
  FLIP_Y	'flip-y'
  SOURCE	'source'
  FLIP	'flip'
  FONTFAMILY	'font-family'
  FONTSIZE	'font-size'
  FONTVARIANT	'font-variant'
  FONTCOLOR	'font-color'
  BACKGROUNDCOLOR	'background-color'
  FONTWEIGHT	'font-weight'
  FONTSTYLE	'font-style'
  TEXTDECORATION	'text-decoration'
  LETTERSPACING	'letter-spacing'
  HORIZONTALALIGN	'horizontal-align'
  VERTICALALIGN	'vertical-align'
  TEXT	'text'
  LOCKPOSITIONANDSIZE	'lock-position-size'
  LOCKDESIGN	'lock-design'
  LOCKCONTENT	'lock-content'
  NAME	'name'
  USERDATA	'user-data'

• Syntax

  function getPropertyType();

• Parameter

  None

• Return value

  Success: object (property name), fail: Always successful

• Code example

  $wp.content.getPropertyType();

• Others

  If you convert objects returned from $wp.content.getPropertyType(); to variables, typos can be prevented.

  var contentPropertyType = $wp.content.getPropertyType();

  $wp.content.getPage().getElement('Text1').setProperty(contentPropertyType.TEXT, “TEST”);

movePage()

• Description

  Play content by moving between pages.

• Syntax

  function movePage(‘pageName’);

• Parameter

  page name

• Return value

  Type: bool

  If API has been run successfully: true

  If API has not been run successfully: false

• Constraints

  The movePage() API only works properly when the web content is played from the common page.

  If the movePage API is used from an HTML element located in a general page, a page transition takes place to perform playback on that general page and the existing HTML element stops operation.

• Code example

  $wp.content.movePage(‘pagename’);

• Others

  If used together with the pageChanged state under setDefaultCallback(), additional information about changes to the page can be obtained.

  Refer to the following: ▶ $setDefaultCallback()