JSignage:Frame decoration attributes

Description

Frame decoration attributes apply to all types of layers. They are optional, but when present, they can:

• Specify a solid or semi-transparent background to the layer.
• Draw a frame at the layer's borders.
• Alter the shape of the layer's corners.
• Add some decoration elements around the layer, such as shadows.
• Set some padding between the layer's borders and its content.

The frame decoration attributes are specified in the frame attribute of the layer, which must be an object containing the one or more of the attributes specified below. For instance: { screenColor: 'white', shape: 'round' }

Note:

The frame attribute cannot be modified using $.attr() - instead, the layer needs to be recreated.

Attributes definition

Common

• screenColor

  Color of the screen area around a media frame. It provides the default value whenever a decoration effect needs to match the screen color. Default: 'currentColor'.

Shape of the corners

• shape

  One of 'square', 'round' or 'snip'. Defines the shape of the corners of the frame or media. Default: 'square'.

• rx

  Horizontal size of the corners when the shape is not square, i.e. radius for round corners. The size is expressed as an absolute number of pixels or as a percentage of the smaller of the width or height of the layer. Default: '20%'.

• ry

  Vertical size of the corners when the shape is not square. By default it is equal to rx. If different the round corners are in fact elliptical.

• corners

  Array of corners whose shape is modified. Default: .[ 'topLeft', 'topRight', 'bottomRight', 'bottomLeft' ]. Note that elements if the array must always appear in this order.

• clip

  Control whether the layer's content should be clipped at the corners. Clipping is implemented by hiding the part of the content that is outside of the frame's shape behind the screenColor opaque color. The valed values are 'none', 'auto' or 'force'. When set to 'auto', clipping will only be applied when the layer is a media layer and some of the content lies outside of the shape. Default value: 'auto'.

Effect of the corner attributes on an image

Background color

Layers are transparent by default. An opaque background color can be specified instead.

• backColor

  Color of the background. Default: 'none'.

• backOpacity

  Opacity of the background. Default: '100%'.

• uiStyle

  If not null, must be one of the three UI styles: 'manzana', 'round' or 'square'. Default: null.

Effect of the background color attributes

Drawing a frame

Note that the frame is contained entirely inside the area assigned to the layer, thus reducing the area for its content. This is done in a way that does not modify the aspect ratio of the area, but rather clips some of the content at the border if needed to maintain aspect ratio.

• frameColor

  Color of the frame. If equal to 'none', no frame is drawn. Default: 'none'.

• frameSize

  Size of the frame as an absolute number of pixels or as a percentage of the smaller of the layer width or height. Default: '6%'.

Effect of the frame attributes

Content padding

• padding

  Size of padding for all borders if there only one number, or array of padding sizes for the top, right, bottom and left border in that order, separated by spaces. Each padding size is either an absolute number of pixels or a percentage of the smaller of the layer width or height. Default: '0'.

Effect of padding attribute

Soft edges

Soft edges blends the content at its interface. This allows a smoother color transition, and gives a blurred appearance to the borders.

• softEdge

  When true a mask is drawn on top the media to blend the borders with the background color. Default: false.

• softEdgeSize

  Size of the soft edges gradient as an absolute number of pixel or as a percentage of the smaller of the layer width or height. Default: '6%'.

• softEdgeColor

  Color used to soften the borders. Default: frameColor, if the decoration also specifies a frame, otherwise screenColor.

Effect of the soft edge attributes

Shadows

• shadow

  When true a semi-transparent shadow is drawn around the layer borders. The shadow is drawn outside of the area assigned to the layer and does not impact the size of its content. Default: false.

• shadowSize

  Size of the drop shadow as an absolute number of pixels or as a percentage of the smaller of the layer width or height. Default: '3%'.

• shadowColor

  Color of the shadow. Default: '#A0A0A0'

Effect of the shadow attributes

Special effects

• specialFX The following effects are currently supported:
  • reflection a mirror reflection of the layer at the bottom
  • rotate a pseudo-3d paper sheet effect around the layer

Notes:

• In order to apply reflection the screen background behind the media must be of a constant color and reflectionColor or by default screenColor must be set to that color.
• Caution: Applying specials effect to a video or animation media causes a severe performance penalty and requires testing the resulting project for adequate performance.

Effect of the specialFX attribute

Examples

Rounded corners

Add a rounded corner to an image on a white background.

$(function(){
  $.media({ left: '10%', top: '20%', width: '640', height: '480', href: 'image_4_3.jpg',
            frame: { screenColor: 'white', shape: 'round' }
         }).addTo('svg');
});

Notes:

• The background must be of an uniform color (and equal to screenColor ) in order to use the round frame. This example is designed to be displayed on an uniform white background.
• The aspect ratio of the file must match the one of the media for the rounded corner to be visible.
• The same notes applies to the snip type of corner

Partial snip corners

Cut the top right and bottom left corner of the image.

$(function(){
  $.media({ left: '35%', top: '25%', width: 400, height: 300, href: 'image_4_3.jpg', 
            frame: { screenColor: 'white', shape: 'snip' , corners: [ 'topRight', 'bottomLeft' ]}
         }).addTo('svg');
});

• corners: [ 'topRight', 'bottomLeft' ] controls which corner are modified by the decoration.

Soft edge around an image

Blur the edge of the image to make it fade into the background.

$(function(){
  $.media({ left: '10%', top: '10%', width: '80%', height: '80%' , href: 'image_16_9.jpg', 
            frame: { softEdge : true, screenColor : 'white', softEdgeSize :'10%' }
         }).addTo('svg');
});

• The aspect ratio of the media viewbox must match the one of the image file in order for the soft edges to be applied correctly.

Shadow with a frame

Add a white frame and a drop shadow around the image.

$(function(){
  $.media({ left: 120, top: 30, width: 400, height: 300,  href: 'image_4_3.jpg', 
            frame: { frameColor: 'white', frameSize: '5%', shadow: true }
        }).addTo('svg');
});

• Adding a frame around the image increases the effect of the shadow.
• Shadows are looking better on a white or bright colored background.